HTML Nedir? İlk Web Sayfanızı Sıfırdan Yapın

HTML, HyperText Markup Language (Hiper Metin İşaretleme Dili) ifadesinin kısaltmasıdır. Bir programlama dili değil, bir işaretleme dilidir. Yani web sayfasının yapısını, hangi kısmın başlık, hangi kısmın paragraf, resim ya da bağlantı olduğunu tarayıcıya anlatır. İnternette gördüğünüz her sayfa, arka planda HTML kullanır.

HTML Nasıl Çalışır?

Bir HTML dosyası, etiketlerden (tag) oluşur. Etiketler açılış ve kapanış olarak yazılır:

<p>Bu bir paragraftır.</p>

Burada <p> açılış, </p> kapanış etiketidir. İkisinin arasındaki metin ise içeriktir. Tarayıcı bu dosyayı okur ve etiketlere göre sayfayı ekranda çizer.

İlk Web Sayfanızı Oluşturun

Özel bir programa ihtiyacınız yok. Not Defteri gibi bir metin editörü yeterlidir.

1. Masaüstünde index.html adında bir dosya oluşturun.
2. Aşağıdaki kodu içine yapıştırın ve kaydedin.
3. Dosyaya çift tıklayarak tarayıcıda açın.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>İlk Sayfam</title>
</head>
<body>
    <h1>Merhaba Dünya</h1>
    <p>Bu benim ilk web sayfam.</p>
</body>
</html>

Sayfanın İskeleti

• <!DOCTYPE html> tarayıcıya dosyanın modern HTML olduğunu söyler.
• <html lang="tr"> tüm sayfayı kapsar. lang değeri sayfanın dilini belirtir.
• <head> sayfa hakkındaki bilgileri tutar ve ekranda görünmez.
• <meta charset="UTF-8"> Türkçe karakterlerin doğru görünmesini sağlar.
• <title> tarayıcı sekmesinde görünen başlıktır.
• <body> ekranda görünen tüm içeriği barındırır.

En Sık Kullanılan Etiketler

• <h1> ile <h6>: Başlıklar. h1 en büyük ve en önemlisidir.
• <p>: Paragraf.
• <a href="https://ornek.com">: Bağlantı.
• <img src="resim.jpg" alt="Açıklama">: Resim. alt metni erişilebilirlik ve SEO için önemlidir.
• <ul> ve <li>: Madde işaretli liste.
• <br>: Satır sonu.
• <div>: İçeriği gruplamak için kullanılan genel kutu.

Bağlantı ve Resim Örneği

<a href="https://www.yunuskaytan.com/en/">Blogu ziyaret et</a>
<img src="kapak.jpg" alt="Blog kapak görseli">

img ve br gibi bazı etiketlerin kapanış etiketi yoktur, bunlara boş (void) etiket denir.

Özellikler (Attribute)

Etiketlerin davranışını href, src, alt, class ve id gibi özellikler belirler. Özellikler açılış etiketinin içine, ad="değer" biçiminde yazılır.

Sık Yapılan Hatalar

• Etiketi açıp kapatmayı unutmak.
• Dosya uzantısını .txt bırakmak. Dosya adı mutlaka .html ile bitmelidir.
• charset tanımlamayıp Türkçe karakterlerin bozulmasına neden olmak.

Sonraki Adım

HTML yalnızca yapıyı kurar. Renk, boyut ve yerleşim gibi görünüm için CSS, etkileşim için JavaScript öğrenmeniz gerekir. Önce HTML’i rahat yazar hale gelmeniz, sonraki adımları çok kolaylaştırır.