close

HTML Yapısına Giriş: Temel Öğeler ve Söz Dizimi

HTML yapısı, web sayfalarının oluşturulmasında çok önemli bir rol oynar. İçeriğin bir web sayfasında nasıl düzenlendiğini ve görüntülendiğini tanımlar. İşte temel HTML yapısına bir giriş:

1. Doctype

Doctype(Document Type Declaration), web sayfasının kullandığı HTML sürümünü tanımlar. HTML dosyasının başına yerleştirilmelidir.

2.html etiketi

Html etiketi, her HTML dosyasının kök öğesidir. Web sayfasının tüm içeriğini kapsar.

3. head etiket

Head etiketi, tarayıcıda doğrudan görüntülenmeyen web sayfası hakkında bilgi içerir. Burası sayfanın başlığının, meta etiketlerin, CSS ve JavaScript dosyalarına olan bağlantıların ve diğer çeşitli öğelerin tanımlandığı yerdir.

4. body etiket

Gövde etiketi, web sayfasında görüntülenen tüm içeriği içerir. Metin, resimler, videolar, bağlantılar ve diğer kullanıcı arabirimi bileşenleri gibi öğelerin tanımlandığı yer burasıdır.

5. İç içe geçmiş etiketler

HTML, açılış ve kapanış etiketleriyle hiyerarşik bir yapı kullanır. Alt etiketler, üst etiketlerin içine yerleştirilir. Örneğin, p etiketi(paragraf), yayılma etiketleri(satır içi metin), güçlü etiketler(kalın metin) ve diğer birçok etiketi içerebilir.

6. Ortak etiketler

HTML, içeriği biçimlendirmek ve görüntülemek için bir dizi etiket sağlar. Örneğin, h1-h6 etiketleri(başlıklar), p etiketi(paragraf), img etiketi(resim), a etiketi(bağlantı) ve diğerleri.

 

İşte tam bir HTML sayfa yapısının bir örneği:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

Yukarıdaki örnekte, etiket, etiket ve etiket gibi ana öğeleri içeren eksiksiz bir doctype HTML html sayfamız head var body. Head kısmında sayfa başlığını, kullanılacak CSS ve JavaScript dosyalarını tanımlıyoruz. Gövde bölümü, web sayfasının içeriğini görüntülemek için üstbilgi, ana ve altbilgi gibi öğeleri içerir.

 

Doğru HTML yapısını kullanarak iyi organize edilmiş, okunabilir ve etkileşimli web sayfaları oluşturabilirsiniz.