HTML'e Giriş ve Temel Etiketler

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının yapısını tanımlayan işaretleme dilidir. Etiketler (tags) kullanarak içeriği yapılandırırız.

İlk HTML Sayfamız

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Web Sayfam</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu benim ilk web sayfam.</p>
</body>
</html>

💡 Belge Yapısı: <!DOCTYPE html> — HTML5 olduğunu belirtir. <html> — Tüm sayfayı kapsar. <head> — Sayfa hakkında bilgiler (başlık, karakter seti, CSS bağlantıları). <body> — Sayfada görünen içerik.

Başlık Etiketleri (h1-h6)

<h1>Ana Başlık (En Büyük)</h1>
<h2>Alt Başlık</h2>
<h3>Bölüm Başlığı</h3>
<h4>Alt Bölüm</h4>
<h5>Küçük Başlık</h5>
<h6>En Küçük Başlık</h6>

⚠️ Kural: Her sayfada yalnızca bir tane <h1> kullanılmalıdır. Bu hem SEO hem de erişilebilirlik için önemlidir.

Paragraf ve Metin Biçimlendirme

<p>Bu bir paragraftır. Paragraflar <strong>kalın</strong> ve <em>italik</em> metin içerebilir.</p>

<p>Alt satıra geçmek için <br> etiketi kullanılır.<br>
Bu ikinci satırdır.</p>

<hr> <!-- Yatay çizgi -->

<p><mark>Vurgulanan metin</mark></p>
<p><del>Üstü çizili</del> ve <ins>altı çizili</ins></p>
<p>H<sub>2</sub>O ve x<sup>2</sup></p>

Yorum Satırları

<!-- Bu bir HTML yorumudur. Tarayıcıda görünmez. -->
<p>Bu metin görünür.</p>
<!-- <p>Bu metin devre dışı bırakıldı.</p> -->

Özel Karakterler

Karakter	HTML Kodu	Görünüm
Küçüktür	`<`	<
Büyüktür	`>`	>
Ve işareti	`&`	&
Boşluk	` `	(boşluk)
Telif hakkı	`©`	©

🎯 Uygulama

Kendinizi tanıtan bir web sayfası oluşturun (başlık, paragraflar, kalın/italik metinler)
Okul tanıtım sayfası hazırlayın (okul adı h1, bölümler h2, açıklamalar paragraf)
Özel karakterler kullanarak bir matematik formülü yazın

Web Geliştirme