YAPI PROTOKOLÜ

HTML Eğitimi

Modern web sayfalarının temel iskelet yapısını oluşturan etiketler, hiyerarşi ve semantik kurallar rehberi.

🌐 HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının yapısını kuran bir işaretleme dilidir. Tarayıcılar bu kodları okuyarak görsel bir arayüze dönüştürür. HTML; stil için CSS ve dinamiklik için JavaScript ile birlikte çalışır.

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <title>Sayfa Başlığı</title>
  </head>
  <body>
    <h1>Merhaba Dünya!</h1>
  </body>
</html>

🏷️ Temel Metin Etiketleri

İçeriklerin önem sırasını ve metin biçimlerini belirlemek için kullanılan hiyerarşik etiketler.

<!-- Başlıklar (h1 en önemli, h6 en küçük) -->
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>

<!-- Paragraf ve Biçimlendirme -->
<p>Bu bir paragraf metnidir.</p>
<strong>Kalın metin</strong>
<em>İtalik vurgu</em>
<br> <!-- Alt satıra geçiş -->
<hr> <!-- Yatay çizgi -->

🔗 Bağlantılar ve Görseller

Sayfalar arası geçiş yapmak ve multimedya içerikleri yerleştirmek için kullanılan pencerelerdir.

<!-- Link (Köprü) -->
<a href="https://google.com" target="_blank">Google'a Git</a>

<!-- Görsel Ekleme -->
<img src="resim.jpg" alt="Açıklama" width="300">

📋 Listeleme Yapıları

Verileri maddeler halinde veya numaralı şekilde organize etmek için kullanılır.

<!-- Sırasız (Noktalı) Liste -->
<ul>
  <li>Elma</li>
  <li>Armut</li>
</ul>

<!-- Sıralı (Numaralı) Liste -->
<ol>
  <li>Adım 1</li>
  <li>Adım 2</li>
</ol>

📦 Konteynırlar ve Düzenleyici Etiketler

Sayfayı bölümlere ayırmak ve stillendirme için gruplama yapmak amacıyla kullanılır.

<!-- Blok Konteynır -->
<div class="kart">
  <h2>Başlık</h2>
  <p>İçerik alanı.</p>
</div>

<!-- Satır İçi Konteynır -->
<span style="color:red">Özel Kelime</span>

📝 Form ve Giriş Elemanları

Kullanıcılardan bilgi toplamak ve etkileşime girmek için kullanılan yapı taşları.

<form action="/gonder" method="post">
  <input type="text" placeholder="İsim">
  <input type="email" placeholder="E-posta">
  <button type="submit">Gönder</button>
</form>

💎 Semantik (Anlamsal) Etiketler

Tarayıcılara ve arama motorlarına sayfanın hangi bölümünün ne anlama geldiğini açıklayan etiketlerdir.

<header>Sayfa Başlığı ve Logo</header>
<nav>Navigasyon Menüsü</nav>
<main>Ana İçerik</main>
<section>Bölüm</section>
<aside>Yan Panel</aside>
<footer>Alt Bilgi</footer>