Bölüm 2: Temel HTML Etiketleri ve Metin Formatlama

temel-html-etiketleri

Temel HTML Etiketlerine Giriş

Bu bölümde HTML’in en temel ve sık kullanılan etiketlerini öğreneceksiniz. Bu etiketler, web sayfalarının %90’ında kullanılan temel yapı taşlarıdır.

Başlık Etiketleri (Headings)

HTML’de 6 seviye başlık etiketi bulunur: <h1> ile <h6> arasında.

<h1>En Büyük Başlık (Ana Başlık)</h1>
<h2>İkinci Seviye Başlık</h2>
<h3>Üçüncü Seviye Başlık</h3>
<h4>Dördüncü Seviye Başlık</h4>
<h5>Beşinci Seviye Başlık</h5>
<h6>En Küçük Başlık</h6>

Başlık Etiketlerinin Önemi

SEO: Arama motorları başlıkları sayfa içeriğini anlamak için kullanır
Erişilebilirlik: Ekran okuyucular başlık hiyerarşisini kullanır
Yapı: İçeriğin mantıklı bir şekilde organize edilmesini sağlar

Ipucu

En İyi Uygulama: Her sayfada sadece bir <h1> etiketi kullanın ve başlık seviyelerini sırayla kullanın (h1 → h2 → h3).

Başlık Kullanım Örneği

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Blog Yazısı</title>
</head>
<body>
    <h1>Web Geliştirme Rehberi</h1>
    
    <h2>Frontend Geliştirme</h2>
    <h3>HTML</h3>
    <h3>CSS</h3>
    <h3>JavaScript</h3>
    
    <h2>Backend Geliştirme</h2>
    <h3>Node.js</h3>
    <h3>Python</h3>
</body>
</html>

Paragraf Etiketi (`<p>`)

Metin içeriğinin temel birimi paragraftır. Her paragraf <p> etiketi ile sarmalanır.

<p>Bu bir paragraftır. Paragraflar metin içeriğinin temel yapı taşıdır.</p>
 
<p>Bu ikinci paragraf. Paragraflar arasında otomatik olarak boşluk bırakılır.</p>
 
<p>Uzun paragraflar bile tek bir p etiketi içinde yazılır. 
   Tarayıcı metni otomatik olarak satırlara böler ve ekran genişliğine 
   göre düzenler.</p>

Paragraf Özellikleri

Paragraflar arasında otomatik boşluk bırakılır
Tarayıcı metni otomatik olarak sarmaladı (wrap)
Birden fazla boşluk tek boşluk olarak görüntülenir

Satır Atlama (`<br>`) ve Yatay Çizgi (`<hr>`)

Satır Atlama - `<br>`

Paragraph içinde manuel satır atlama için kullanılır:

<p>Bu satırın sonunda<br>
   satır atlanacak ve<br>
   yeni satırda devam edilecek.</p>

Yatay Çizgi - `<hr>`

Bölümler arasında ayırıcı çizgi için kullanılır:

<p>İlk bölüm içeriği</p>
<hr>
<p>İkinci bölüm içeriği</p>

Uyarı

Dikkat: <br> ve <hr> etiketleri kendini kapatan etiketlerdir ve kapanış etiketi gerektirmez.

Metin Formatlama Etiketleri

Kalın Metin

<strong>Önemli kalın metin (anlamsal)</strong>
<b>Sadece görsel olarak kalın metin</b>

İtalik Metin

<em>Vurgulanan italik metin (anlamsal)</em>
<i>Sadece görsel olarak italik metin</i>

Diğer Formatlama Etiketleri

<u>Altı çizgili metin</u>
<s>Üstü çizgili metin</s>
<mark>İşaretlenmiş (highlight) metin</mark>
<small>Küçük metin</small>
<sub>Alt simge</sub> metin
<sup>Üst simge</sup> metin

Pratik Örnek

<p>
    Kimya formülü: H<sub>2</sub>O su molekülünü gösterir.
    Einstein'ın ünlü formülü: E=mc<sup>2</sup>
</p>
 
<p>
    <strong>Önemli:</strong> Bu <mark>önemli bilgi</mark> mutlaka 
    <em>hatırlanmalıdır</em>.
</p>

Liste Etiketleri

Sırasız Liste (Unordered List)

Madde işaretli listeler için kullanılır:

<ul>
    <li>İlk madde</li>
    <li>İkinci madde</li>
    <li>Üçüncü madde</li>
</ul>

Sıralı Liste (Ordered List)

Numaralı listeler için kullanılır:

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

İç İçe Listeler

<ul>
    <li>Ana madde 1
        <ul>
            <li>Alt madde 1.1</li>
            <li>Alt madde 1.2</li>
        </ul>
    </li>
    <li>Ana madde 2</li>
    <li>Ana madde 3</li>
</ul>

Tanım Listesi (Description List)

Terim ve açıklamalar için kullanılır:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - Web sayfalarının yapısını oluşturan dil</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - Web sayfalarının görünümünü düzenleyen dil</dd>
    
    <dt>JavaScript</dt>
    <dd>Web sayfalarına etkileşim katan programlama dili</dd>
</dl>

Bağlantı Etiketi (`<a>`)

Web’in temel özelliği olan linkler <a> etiketi ile oluşturulur.

Temel Bağlantı

<a href="https://www.google.com">Google'a Git</a>

Sayfa İçi Bağlantı

<!-- Hedef konumu işaretleme -->
<h2 id="bolum1">Bölüm 1</h2>
 
<!-- O konuma bağlantı -->
<a href="#bolum1">Bölüm 1'e Git</a>

E-posta Bağlantısı

<a href="mailto:[email protected]">E-posta Gönder</a>

Telefon Bağlantısı

<a href="tel:+905551234567">Ara: 0555 123 45 67</a>

Yeni Sekmede Açma

<a href="https://www.example.com" target="_blank">
    Yeni sekmede aç
</a>

Ipucu

Erişilebilirlik İpucu: Yeni sekmede açılan linkler için kullanıcıyı bilgilendirin:

<a href="https://example.com" target="_blank">
    Dış bağlantı (yeni sekmede açılır)
</a>

Blok ve Satır İçi Elementler

Blok Elementler

Tam genişlik kaplar ve yeni satırda başlar:

<div>Bu bir blok elementtir</div>
<p>Bu da bir blok elementtir</p>
<h1>Bu da blok element</h1>

Satır İçi (Inline) Elementler

Sadece içerik kadar yer kaplar ve aynı satırda devam eder:

<p>
    Bu paragrafta <span>span etiketi</span> ve 
    <a href="#">link etiketi</a> satır içi elementlerdir.
    <strong>Bu da</strong> satır içi element.
</p>

Pratik Uygulama

Şimdi öğrendiklerimizi birleştirerek örnek bir sayfa oluşturalım:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kişisel Blog</title>
</head>
<body>
    <h1>Ahmet Yılmaz'ın Blog'u</h1>
    
    <h2>Hakkımda</h2>
    <p>
        Merhaba! Ben <strong>Ahmet Yılmaz</strong>, bir yazılım geliştiricisiyim. 
        <em>Web teknolojileri</em> konusunda uzmanlaşmaya çalışıyorum.
    </p>
    
    <h2>İlgi Alanlarım</h2>
    <ul>
        <li>Web Geliştirme
            <ul>
                <li>Frontend (HTML, CSS, JavaScript)</li>
                <li>Backend (Node.js, Python)</li>
            </ul>
        </li>
        <li>Mobil Uygulama Geliştirme</li>
        <li>Veri Bilimi</li>
    </ul>
    
    <h2>Son Blog Yazılarım</h2>
    <ol>
        <li><a href="#html-egitimi">HTML Öğrenmenin Püf Noktaları</a></li>
        <li><a href="#css-tricks">CSS ile Modern Tasarım</a></li>
        <li><a href="#js-basics">JavaScript'e Giriş</a></li>
    </ol>
    
    <hr>
    
    <h2>İletişim</h2>
    <p>
        Bana ulaşabilirsiniz:<br>
        E-posta: <a href="mailto:[email protected]">[email protected]</a><br>
        Telefon: <a href="tel:+905551234567">0555 123 45 67</a>
    </p>
    
    <p><small>© 2025 Ahmet Yılmaz. Tüm hakları saklıdır.</small></p>
</body>
</html>

Anlamsal HTML (Semantic HTML)

Modern HTML’de anlamsal etiketler kullanmak önemlidir:

Anlamsal vs Anlamsal Olmayan

<!-- Anlamsal olmayan -->
<div class="header">Site Başlığı</div>
<div class="nav">Menü</div>
<div class="content">İçerik</div>
 
<!-- Anlamsal -->
<header>Site Başlığı</header>
<nav>Menü</nav>
<main>İçerik</main>

En Önemli Anlamsal Etiketler

<header>: Sayfa veya bölüm başlığı
<nav>: Navigasyon menüsü
<main>: Ana içerik
<article>: Bağımsız içerik
<section>: İlgili içerik bölümü
<aside>: Yan içerik (sidebar)
<footer>: Sayfa veya bölüm altlığı

Özet ve Ödev

Bu bölümde öğrendikleriniz:

✅ Başlık etiketleri (h1-h6) ve hiyerarşi
✅ Paragraf ve metin formatlama
✅ Liste türleri ve kullanımı
✅ Bağlantı oluşturma teknikleri
✅ Blok ve satır içi elementler

Pratik Ödev

Kişisel tanıtım sayfası oluşturun:
- Ana başlık olarak adınızı kullanın
- Hakkınızda 2-3 paragraf yazın
- Hobilerinizi sırasız liste olarak ekleyin
- Eğitim geçmişinizi sıralı liste olarak yazın
- E-posta ve sosyal medya linklerini ekleyin
Blog yazısı formatı oluşturun:
- Başlık hiyerarşisi kullanın
- İç içe listeler oluşturun
- Metin formatlama etiketlerini kullanın
- Sayfa içi navigasyon linklerini ekleyin

Sonraki bölümde HTML formları, kullanıcı girişi ve etkileşimli elementleri öğreneceksiniz!