Ana Sayfa / HTML Dersleri / Ders 2

Ders 2 – Başlıklar ve Paragraflarla Çalışmak

Bu derste HTML’de metinleri nasıl düzenleyeceğini öğreneceksin. Başlık etiketleri (<h1>–<h6>) ve paragraf etiketi (<p>) ile bir sayfaya anlamlı bir yapı kazandıracağız.

Ön Bilgi: Bir HTML Sayfasının Temel Yapısı

HTML dosyaları belirli bir iskelet yapısına sahiptir. Bu yapı, tarayıcının sayfayı doğru şekilde anlamasını sağlar. Bir web sayfası oluştururken aşağıdaki temel şablon her zaman kullanılır: 

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <title>Sayfanın Başlığı</title>
</head>

<body>
    Sayfa içeriği buraya yazılır.
</body>

</html>

Bu Yapıdaki Bölümler Ne İşe Yarar?

  • <!DOCTYPE html>
    Tarayıcıya “Bu HTML5 yapısıdır” bilgisini verir.
  • <html> ... </html>
    Tüm sayfayı kapsayan en dış etikettir.
  • <head> ... </head>
    Sayfanın görünmeyen kısmıdır. İçinde şunlar bulunur:
    • <title> → Tarayıcı sekmesindeki başlık
    • <meta> → Karakter seti, açıklamalar
  • <title>
    Tarayıcı sekmesinde görünen metindir.
    Örnek: “Yeşil Bilişim – HTML Dersleri”

💡 Not: Bir web sayfası oluştururken tüm içerik daima <body> etiketi içinde bulunur. Bu derste öğreneceğin başlık ve paragraf etiketleri de <body> içine yazılır.

1. Neleri Öğreneceksin?

  • <h1>–<h6> başlık etiketlerinin farklarını,
  • <p> etiketi ile paragraf oluşturmayı,
  • Satır sonu için <br> ve yatay çizgi için <hr> kullanımını,
  • Karmaşa yaratmadan okunaklı metin yazmayı.

2. Başlık Etiketleri: <h1>–<h6>

Başlık etiketleri, bir sayfadaki konuları hiyerarşik olarak düzenlemek için kullanılır. Hem kullanıcılar hem de arama motorları için sayfanın ana ve alt başlıklarını anlamayı kolaylaştırır. 

<h1>Yeşil Bilişim</h1>
<h2>Hakkımda</h2>
<h3>Eğitim Bilgilerim</h3>
<h3>Hobilerim</h3>
  • <h1>: Sayfanın en büyük ve ana başlığı (genelde sayfada 1 tane olur).
  • <h2>: Ana başlığın alt başlıkları.
  • <h3>–<h6>: Daha alt seviyedeki başlıklar.

💡 İpucu: Başlıkları sadece “yazıyı büyütmek” için kullanma. Gerçekten konu başlığını ifade ediyorsa <h1>, <h2> vb. etiketleri tercih et.

3. Paragraflar: <p> etiketi

Bir metni cümleler hâlinde yazmak istediğinde paragraf etiketi kullanırsın. Her paragraf için ayrı bir <p> etiketi açılır ve kapatılır. 

<p>
Merhaba, ben Ayşe. 9. sınıf öğrencisiyim ve kod yazmayı öğreniyorum.
</p>

<p>
Boş zamanlarımda kitap okumayı, bisiklete binmeyi ve web sitesi tasarlamayı seviyorum.
</p>

Tarayıcı her <p> etiketi arasında otomatik olarak biraz boşluk bırakır. Böylece metinler bitişik durmaz ve daha rahat okunur.

4. Satır Sonu ve Yatay Çizgi

Bazen yeni bir paragraf açmadan, sadece satır atlamak istersin. Bunun için <br> etiketi kullanılabilir. Fakat gereksiz yere çok fazla <br> kullanmak sayfayı karmaşık hâle getirebilir. 

<p>
Yeşil Bilişim'e hoş geldin!<br>
Bu satır bir alt satıra geçer.<br>
Ama yine de aynı paragrafın içindeyiz.
</p>

Yatay bir ayraç çizgisi eklemek için <hr> etiketi kullanılır: 

<h2>Hakkımda</h2>
<p>Kendimi tanıttığım kısa bir paragraf.</p>

<hr>

<h2>İletişim</h2>
<p>Bana ulaşmak için e-posta gönderebilirsin.</p>

💡 İpucu: <br> ve <hr> etiketlerini sadece gerçekten ihtiyaç olduğunda kullan. Çoğu durumda yeni bir <p> etiketi açmak daha doğrudur.

5. Mini Görev – Kendini Tanıt Sayfası

Aşağıdaki adımları takip ederek kendi “Kendimi Tanıtıyorum” sayfanı oluştur:

  1. index.html dosyandaki mevcut içeriği silme; altına ekleme yapabilirsin.
  2. Sayfanın en üstüne bir <h1> başlığı ekle: “Ben Kimim?” gibi.
  3. Altına en az iki ayrı <p> paragraf yaz: biri kendini tanıtan, diğeri hobelerini anlatan.
  4. İstersen bölüm başlıkları için <h2> kullan: “Hobilerim”, “Hedeflerim” gibi.
  5. Dosyayı kaydedip tarayıcıyı yenile ve sayfanı incele.

İleride bu sayfayı renkler ve yazı tipleriyle güzelleştirmek için CSS kullanacağız.


Ders 2 Görev / Quiz Linki

Kaynaklar

  • MDN – “HTML headings” ve “HTML paragraphs” dokümanları
  • Yeşil Bilişim: HTML Ders 1 notların