HTML Nedir? Sıfırdan HTML5 Öğrenme Rehberi

HTML (HyperText Markup Language), web sayfasındaki içeriğin yapısını ve anlamını tanımlayan işaretleme dilidir. Tarayıcıya hangi metnin başlık, hangisinin paragraf veya bağlantı olduğunu söyler. HTML bir programlama dili değildir; tek başına koşullar ya da döngüler çalıştırmaz.

Bir web sayfasında üç temel teknoloji sık sık birlikte kullanılır: HTML iskeleti kurar, CSS görünümü düzenler, JavaScript etkileşim ekler. Başlamak için ücretli yazılıma ihtiyacınız yoktur: bir metin editörü ve tarayıcı yeterlidir.

HTML5 belgesi nasıl oluşturulur?

Bilgisayarınızda index.html adlı bir dosya açın ve aşağıdaki kodu kaydedin. Daha sonra dosyaya çift tıklayarak tarayıcıda görüntüleyin.

<!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>HTML öğrenmeye bugün başladım.</p>
</body>
</html>

İlk bakışta karmaşık görünebilir; ancak her satırın görevi nettir:

• <!doctype html>: Tarayıcının belgeyi modern HTML standardında yorumlamasını sağlar.
• <html lang="tr">: Belgenin kök etiketidir; lang içeriğin dilini belirtir.
• <head>: Sayfa başlığı ve karakter kodlaması gibi, çoğunlukla ekranda görünmeyen bilgileri içerir.
• <meta charset="UTF-8">: Türkçe karakterlerin doğru görüntülenmesine yardımcı olur.
• <meta name="viewport">: Küçük ekranlarda doğru görüntüleme ölçeğinin temelini oluşturur.
• <title>: Tarayıcı sekmesinin başlığını belirtir.
• <body>: Ziyaretçinin gördüğü içeriklerin yer aldığı bölümdür.

Etiket, element ve özellik arasındaki fark

<p>Merhaba</p> örneğinde açılış etiketi <p>, kapanış etiketi </p> ve ikisinin arasındaki metin bir element oluşturur.

<html lang="tr"> içindeki lang, elemente ek bilgi veren bir özelliktir (attribute). Bazı elementler, örneğin <img> ve <meta>, kapanış etiketi kullanmaz.

HTML elementleri gerektiğinde iç içe yazılır. Örneğin bir paragrafın içinde bir bağlantı bulunabilir; fakat etiketlerin açılış ve kapanış sırası tutarlı olmalıdır.

<p>Kaynaklara <a href="https://developer.mozilla.org/tr/">MDN üzerinden</a> ulaşın.</p>

HTML dosyasını nasıl test ederiz?

Kaydettikten sonra tarayıcıda sayfayı açın. Farklı bir şey görmek için <h1> metnini değiştirin, dosyayı kaydedin ve sayfayı yenileyin.

Değişiklik görünmüyorsa dosyayı gerçekten kaydettiğinizden ve doğru dosyayı açtığınızdan emin olun.

Tarayıcının geliştirici araçlarında Elements/Öğeler bölümünü açarak oluşturulan HTML ağacını inceleyebilirsiniz. Bu araç, kapatılmayan etiketleri veya yanlış iç içe geçmiş elementleri anlamak için değerlidir.

Yeni başlayanların sık yaptığı hatalar

• Dosyayı index.html.txt olarak kaydetmek.
• Türkçe karakterler için UTF-8 tanımlamayı unutmak.
• Her metni <div> içine koyup gerçek başlık ve paragraf etiketlerini kullanmamak.
• Sayfayı yalnızca masaüstü ekranda kontrol etmek.
• Birden fazla ana başlığı gereksiz yere kullanıp başlık hiyerarşisini karıştırmak.

Mini uygulama: Kişisel tanıtım sayfası

Kendi adınızı bir <h1> içine, kısa tanıtımınızı <p> içine yazın. Ardından sevdiğiniz üç teknolojiyi bir listeyle ekleyin.

Son olarak <title> değerini değiştirin. Bu küçük çalışma, bir HTML sayfasının temel yapı taşlarını pekiştirir.

Sık sorulan sorular

HTML öğrenmek için CSS bilmek gerekir mi?

Hayır. Önce HTML ile anlamlı bir içerik yapısı kurup ardından CSS ile görünümü değiştirmek daha anlaşılır bir öğrenme sırasıdır.

HTML5 ayrı bir program mı?

Hayır. HTML5, HTML'in modern web standardı ailesinin yaygın adıdır. HTML yazmak için farklı bir program satın almanız gerekmez.