HTML Temelleri: Web Geliştirmeye Giriş

HTML (HyperText Markup Language), bir web sayfasının yapısını ve içeriğini tanımlayan bir işaretleme dilidir. Mantıksal işlemler gerçekleştirmeyip yalnızca tarayıcıya başlığın, paragrafın, görselin veya bağlantının nerede bulunduğunu bildirdiği için bir programlama dili değildir. Öğrenmeye, belge yapısının temellerini ve temel etiketleri inceleyerek başlamalı; ilk gününüzde bile index.html adlı ilk dosyanızı oluşturmalısınız.

HTML Nedir ve Nasıl Çalışır?

HTML kısaltması HyperText Markup Language (Hipermetin İşaretleme Dili) anlamına gelir. Asıl görevi içeriğe anlam katmaktır. Herhangi bir siteyi açtığınızda tarayıcı HTML kodunu okur ve etiket kümesini alışık olduğunuz görsel sayfaya dönüştürür.

Frontend teknolojileri arasındaki farkı anlamak önemlidir:

• HTML iskelettir (yapı).
• CSS cilt ve giysilerdir (görünüm, renkler, boşluklar).
• JavaScript kaslar ve sinirlerdir (etkileşim, animasyon, tıklamalara tepki verme).

Belgenin Temel Yapısı

Her geçerli HTML sayfası tek bir şablona göre oluşturulur. Belge türü bildirimi, kök öğe, head bölümü (teknik bilgiler) ve body bölümü (görünür içerik) içerir.

Minimal çalışan koda bakalım:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый абзац текста.</p>
</body>
</html>

Temel öğeleri inceleyelim:

1. <!DOCTYPE html> — Tarayıcıya modern HTML5 standardının kullanıldığını bildiren yönerge.
2. <html> — Geri kalan her şeyin yerleştirildiği kök kapsayıcı. lang="ru" özniteliği, tarayıcıların ve arama motorlarının içerik dilini belirlemesine yardımcı olur.
3. <head> — Teknik kısım. Burada meta etiketler, stil dosyalarının bağlanması ve sekme başlığı (<title>) saklanır; bu başlık sayfanın kendisinde görünmez ancak tarayıcı sekmesinin adında görüntülenir.
4. <body> — Sayfanın görünür kısmı. Kullanıcının ekranda gördüğü her şey bu etiketin içinde yer alır.

Başlangıç İçin Temel Etiketler

Basit içerik oluşturmak için sınırlı sayıda öğe bilmek yeterlidir. Etiketler çiftli (açan <tag> ve kapatan </tag> kısmı olan) ve tekli (örneğin satır sonu veya görsel) olabilir.

Metinle Çalışma

• <h1>–<h6> — Farklı düzeylerde başlıklar. <h1> sayfada yalnızca bir kez bulunmalı ve ana konuyu yansıtmalıdır.
• <p> — Metin paragrafı.
• <strong> veya <b> — Kalın yazı tipi (önemli vurgu).
• <em> veya <i> — İtalik (duygusal vurgu).

Bağlantılar ve Medya

• <a href="URL">Bağlantı metni</a> — Hiper bağlantı oluşturur. href özniteliği gidilecek adresi belirtir.
• <img src="görsel_yolu" alt="Açıklama"> — Görsel ekler. src özniteliği dosya yolunu, alt ise görsel yüklenmediğinde veya görme engelli kullanıcılar için metinsel açıklamayı belirtir.

Listeler

• <ul> — Madde işaretli liste (noktalar).
• <ol> — Numaralı liste (sayılar).
• <li> — Liste öğesi (ul veya ol içine yerleştirilir).

Adım Adım Öğrenme Planı

Bilginin teoride kalmaması için basitten karmaşığa ilerleyin ve her aşamayı pratikle pekiştirin.

1. Aşama: Araçları Hazırlama

Güçlü donanıma ihtiyacınız yok. Yeterli olanlar:

1. Bir tarayıcı (Chrome, Firefox, Safari).
2. Bir kod düzenleyici. Visual Studio Code önerilir (ücretsiz, sözdizimi vurgulama ve ipuçlarıyla birlikte).

2. Aşama: Sözdizimini Öğrenme (1–3 gün)

.html dosyaları oluşturmayı, etiketleri doğru şekilde iç içe yerleştirmeyi ve hiyerarşiye uymayı öğrenin. Yalnızca başlıklar, paragraflar ve listeler kullanarak basit bir biyografi veya yemek tarifi hazırlamayı deneyin.

3. Aşama: Anlamsallık ve Erişilebilirlik (4–7 gün)

Her şey için evrensel bloklar olan <div> kullanmayı bırakın. Anlamsal etiketleri öğrenin:

• <header> — Site üst bilgisi.
• <nav> — Gezinme menüsü.
• <main> — Ana içerik.
• <article> — Bağımsız makale veya gönderi.
• <footer> — Site alt bilgisi.

Anlamsal kodlama, arama botlarının sitenizin yapısını daha iyi anlamasına yardımcı olur ve bu da sıralamayı olumlu etkiler.

4. Aşama: Formlar ve Tablolar (8–10 gün)

İletişim formları (<form>, <input>, <button>) ve tablolar (<table>, <tr>, <td>) oluşturmayı öğrenin. Bu, arayüzdeki etkileşimli öğelerin temelidir.

Yeni Başlayanların Sık Yaptığı Hatalar

Deneyimli geliştiriciler bile bazen hatalar yapar, ancak yeni başlayanların bunlardan en baştan kaçınması gerekir:

1. İç içe geçme kuralının ihlali. Etiketleri yanlış sırada kapatamazsınız.
   • Doğru: <strong><em>Metin</em></strong>
   • Yanlış: <strong><em>Metin</strong></em>
2. Kapanış etiketlerinin atlanması. Modern tarayıcılar bunu çoğu zaman affetse de kod dağınık hale gelir ve karmaşık durumlarda bozulabilir.
3. Eski etiketlerin kullanılması. <center>, <font> veya <bgsound> gibi etiketler HTML5'te artık desteklenmiyor. Hizalama ve yazı tipleri için CSS kullanın.
4. <!DOCTYPE html> eksikliği. Bu satır olmadan tarayıcı uyumluluk moduna (Quirks Mode) geçebilir ve sayfayı hatalı gösterebilir.

HTML'den Sonra Ne Öğrenilmeli?

Saf HTML çekici görünmez: beyaz arka planda siyah metin, varsayılan yazı tipleri. Modern siteler yapmak için ileriye taşınmanız gerekir.

1. CSS (Cascading Style Sheets). Sonraki zorunlu adım. Renkleri, boyutları, öğelerin yerleşimini değiştirmeyi ve siteyi mobil cihazlara uyarlamayı öğreneceksiniz.
2. Git. Sürüm kontrol sistemi. Kod değişikliklerini kaydetmenize ve bir şeyler ters gittiğinde önceki sürümlere dönmenize olanak tanır.
3. JavaScript. Sayfayı canlandırmak için programlama dili: kaydırıcılar, açılır pencereler, sayfayı yeniden yüklemeden veri gönderme.

Nihai Yol Haritası Tablosu

Küçük başlayın: bir dosya oluşturun, içine birkaç satır kod yazın ve tarayıcıda açın. Görünür sonuç, öğrenmeye devam etmeniz için anında motivasyon sağlar.