avatar
Test Ustası
85 puan • 63 soru • 42 cevap
✔️ Cevaplandı • Doğrulandı

HTML nedir (Temel HTML kodları)

HTML'i bir web sitesinin iskeleti gibi düşünüyorum. Başlık, paragraf, resim ve link gibi temel yapıları nasıl oluşturacağımı öğrenmek istiyorum. Örneğin, bir yazıyı kalın yapmak için hangi kodu kullanmam gerektiğini tam olarak kavrayamadım.
WhatsApp'ta Paylaş
1 CEVAPLARI GÖR
✔️ Doğrulandı
0 kişi beğendi.
avatar
irem.ulusoy
12 puan • 40 soru • 46 cevap

🌐 HTML Nedir? (Temel HTML Kodları)

HTML (HyperText Markup Language), web sayfalarının iskeletini ve içeriğini oluşturmak için kullanılan standart bir işaretleme dilidir. Bir programlama dili değil, bir "biçimlendirme dili"dir. Bu ders notunda, HTML'in temel mantığını ve en çok kullanılan kodlarını öğreneceksiniz.

📖 HTML'in Temel Amacı

HTML, tarayıcıya (Chrome, Firefox vb.) "Bu bir başlık", "Bu bir paragraf", "Bu bir resim" gibi bilgileri etiketler (<tag>) aracılığıyla söyler. Tarayıcı da bu etiketleri yorumlayarak gördüğümüz web sayfasını oluşturur.

🏗️ Temel Bir HTML Belgesinin Yapısı

Her HTML belgesi aşağıdaki temel iskeletle başlar:

  • <!DOCTYPE html> → Belgenin HTML5 sürümüyle yazıldığını bildirir.
  • <html lang="tr"> → Kök etiket. İçindeki her şey HTML'dir. lang özelliği dil belirtir.
  • <head> → Sayfa hakkında teknik bilgiler (başlık, karakter seti, viewport) bulunur. Kullanıcıya gösterilmez.
  • <body> → Sayfada görünen tüm içerik bu etiketler arasına yazılır.

🔤 Örnek İskelet Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Sayfa Başlığı</title>
</head>
<body>
  <!-- Görünecek içerik buraya -->
</body>
</html>

🛠️ En Sık Kullanılan Temel HTML Etiketleri

1. 🧱 Metin ve Başlık Etiketleri

  • <h1>...<h6>: Başlık etiketleri. h1 en büyük ve önemli, h6 en küçüktür.
  • <p>: Paragraf oluşturur.
  • <b> veya <strong>: Metni kalın yapar. strong anlamsal olarak daha vurgulu.
  • <i> veya <em>: Metni italik yapar. em vurgu anlamı taşır.
  • <br>: Satır sonu (boşluk bırakır). Kapanış etiketi yoktur.
  • <hr>: Yatay çizgi ekler.

2. 🔗 Bağlantı ve Görsel Etiketleri

  • <a href="url">Bağlantı Metni</a>: Hyperlink oluşturur. href hedef adresi belirtir.
  • <img src="resim.jpg" alt="Açıklama">: Sayfaya resim ekler. src kaynak, alt alternatif metindir.

3. 📋 Liste Etiketleri

  • <ul>: Sırasız (maddeli) liste.
  • <ol>: Sıralı (numaralı) liste.
  • <li>: Her iki liste türünde de madde oluşturur.

4. 📦 Bölümleme Etiketleri (HTML5)

  • <header>: Sayfa veya bölüm başlığı.
  • <nav>: Navigasyon menüsü.
  • <main>: Sayfanın ana içeriği.
  • <section>: İçerik bölümü.
  • <article>: Bağımsız içerik bloğu (makale gibi).
  • <footer>: Sayfa veya bölüm alt bilgisi.
  • <div>: Genel amaçlı bir blok konteyneri. Stil vermek için sık kullanılır.

💡 Önemli Kurallar ve İpuçları

  • Etiketler genellikle bir açılış (<etiket>) ve bir kapanış (</etiket>) etiketinden oluşur.
  • Etiketler iç içe yazılabilir. En son açılan etiket, ilk kapatılmalıdır. Hatalı: <p><b>Metin</p></b> Doğru: <p><b>Metin</b></p>
  • HTML, büyük/küçük harfe duyarlı değildir, ancak küçük harf kullanımı standarttır.
  • Bir etikete ekstra bilgi eklemek için özellik (attribute) kullanılır. Örn: <a href="https://www.site.com" target="_blank">

Sonuç: HTML, web geliştirmenin temel taşıdır. Bu temel etiketleri öğrenmek, her türlü web sayfasının yapısını anlamanın ve kendi içeriğinizi oluşturmanın ilk adımıdır. 🚀

Yorumlar