HTML Etiketleri ve Yapısı

Web geliştirmeye yeni başlıyorsanız, HTML öğrenmek, ilk adımınız olmalı. HTML, web sayfalarının iskeletini oluşturur ve sayfanın yapısal elemanlarını tanımlar. Peki, HTML etiketleri nedir, nasıl kullanılır ve bir HTML belgesi nasıl yapılandırılır? Bu yazıda, HTML etiketlerini ve yapısını detaylı bir şekilde inceleyeceğiz.

HTML Etiketlerinin Temeli

HTML, etiketler kullanarak içerik oluşturur. Etiketler genellikle açılış ve kapanış etiketlerinden oluşur. Örneğin:

<p>Bu bir paragraftır.</p>

Yukarıdaki örnekte, <p> etiketi paragrafı tanımlar. <p> etiketi açılış etiketidir, </p> ise kapanış etiketidir. Kapanış etiketi, açılış etiketinin tersidir ve içerik bitiminde kullanılır.

HTML Etiketlerinin Genel Yapısı

Bir HTML belgesinin genel yapısı şu şekildedir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa Başlığı</title>
</head>
<body>
    <!-- Sayfanın içeriği burada yer alır -->
    <h1>Başlık</h1>
    <p>Bu bir paragraftır.</p>
</body>
</html>

1. `<!DOCTYPE html>`

Bu satır, HTML5 belgesinin kullanıldığını belirtir ve sayfanın doğru şekilde render edilmesini sağlar.

2. `<html>`

HTML belgesinin başlangıcını belirtir. Aynı zamanda lang özelliği, sayfanın dilini belirtir.

3. `<head>`

Sayfanın başlık, karakter seti, stil dosyaları ve diğer meta bilgilerini içerir. Tarayıcıya sayfanın nasıl işleneceği hakkında bilgi verir.

4. `<meta>`

Sayfa hakkında meta bilgileri sağlar. Örneğin, karakter seti ve uyumlu görünüm (responsive design) gibi.

5. `<title>`

Sayfanın başlığını belirler ve tarayıcı sekmesinde görünen metni oluşturur.

6. `<body>`

Sayfanın görünen içeriğini içerir. Bu bölümde başlıklar, paragraflar, görseller, bağlantılar gibi öğeler bulunur.

Yaygın HTML Etiketleri

HTML etiketleri, sayfanın farklı bölümlerini tanımlar. İşte bazı yaygın HTML etiketleri:

Başlık Etiketleri:

Başlık etiketleri, sayfa içeriğinin başlıklarını düzenler. Başlıklar, <h1> ile <h6> arasındaki etiketlerle oluşturulur. <h1> en büyük başlıkken, <h6> en küçük başlıktır.

<h1>Birinci Derece Başlık</h1>
<h2>İkinci Derece Başlık</h2>
<h3>Üçüncü Derece Başlık</h3>

Paragraf Etiketi:

Paragraflar için <p> etiketi kullanılır. Bu etiket, metin paragraflarını tanımlar.

<p>Web geliştirmeye hoş geldiniz!</p>

Bağlantı Etiketi:

Bağlantılar için <a> etiketi kullanılır. Bu etiket, sayfalar arası geçiş yapmanızı sağlar.

<a href="https://www.celenk.tr">celenk.tr Sitesi</a>

Liste Etiketleri:

HTML’de iki tür liste vardır: sıralı (ordered) ve sırasız (unordered).

Sırasız Liste: <ul> etiketiyle yapılır ve her madde <li> etiketiyle belirtilir.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Sıralı Liste: <ol> etiketiyle yapılır ve her madde yine <li> ile belirtilir.

<ol>
    <li>Birinci Adım</li>
    <li>İkinci Adım</li>
    <li>Üçüncü Adım</li>
</ol>

Resim Etiketi:

Resimleri sayfaya eklemek için <img> etiketi kullanılır. Bu etiket, bir kaynağa (source) işaret eder.

<img src="resim.jpg" alt="Açıklama Metni">

Görsel ve Metin İçin Stil:

HTML öğelerine stil vermek için CSS kullanılabilir, ancak bu öğelere doğrudan stil vermek için style özelliği de kullanılabilir.

<p style="color: blue;">Bu mavi renkte bir paragraftır.</p>

Sonuç

HTML, web sayfalarını oluşturmak için kullanılan temel bir dildir. Etiketler, sayfanın yapısını oluşturur ve içeriği düzenler. HTML öğrenmek, web geliştirmeye başlamak için atılacak ilk adımdır. Temel etiketleri ve yapıyı öğrendikçe, daha karmaşık web sayfalarını oluşturmak için CSS ve JavaScript gibi diğer teknolojileri de öğrenebilirsiniz.

Web geliştirmeye ilk adımınızı attınız! Şimdi, HTML etiketleri hakkında öğrendiklerinizi gerçek projelerde kullanmaya başlayabilirsiniz.

Tamer Çelenk

son yazılar

hakkımda