Web nasıl çalışır: ilk HTML sayfan

Her gün onlarca web sayfası açıyorsun: haberler, videolar, okulunun sitesi. Peki adresi yazdığın an ile sayfanın ekranda belirdiği an arasında ne oluyor? Bir sayfa aslında nelerden oluşur? Bu derste bunu öğrenecek ve ilk web sayfanı kendin yazacaksın.

Bir siteyi açtığında ne olur?

Her web sitesi bir sunucuda saklanır: internete sürekli bağlı olan ve dosyaları tutan bir bilgisayarda. Tarayıcın (Chrome, Firefox, Safari, Edge) ise istemcidir (client): sunucudan dosyaları ister ve sana gösterir. Bu “konuşma” birkaç adımda gerçekleşir:

1. 1
   Adresi yazarsın

   Adres çubuğuna https://example.com/about gibi bir URL yazarsın ya da bir bağlantıya tıklarsın.

2. 2
   Sunucu bulunur

   DNS sistemi example.com gibi bir alan adını sunucunun sayısal adresine, yani IP adresine çevirir. Bir telefon rehberi gibi çalışır: sen adı bilirsin, numarayı DNS bulur.

3. 3
   İstek gönderilir

   Tarayıcı sunucuya bir HTTP isteği gönderir: “Bana /about sayfasını ver.” HTTPS'teki S harfi “secure” (güvenli) anlamına gelir: veriler yolda şifrelenir.

4. 4
   Yanıt gelir

   Sunucu bir HTML dosyası ve bir durum koduyla yanıt verir: 200 her şeyin yolunda olduğunu, 404 ise böyle bir sayfanın olmadığını gösterir.

5. 5
   Sayfa oluşturulur

   Tarayıcı HTML'i okur, içinde adı geçen CSS dosyalarını, görselleri ve betikleri de indirir ve sayfayı ekrana çizer.

HTML, CSS ve JavaScript

Her web sayfası üç dilin ortak ürünüdür. Bunu bir eve benzetebilirsin: HTML duvarlar ve odalardır, yani yapı; CSS boya ve mobilyadır, yani görünüm; JavaScript ise elektriktir, yani bir düğmeye bastığında olan şeyler.

Etiketler, öğeler ve öznitelikler

HTML, içeriği etiketlerle işaretler: açılı ayraçlar içindeki kelimelerle. Çoğu etiket çift olarak gelir: açılış etiketi <p> ve eğik çizgili kapanış etiketi </p>. Açılış etiketi, içerik ve kapanış etiketi birlikte bir öğe (element) oluşturur.

• Açılış etiketi <p>, öğenin başladığı yeri gösterir.
• Kapanış etiketi </p>, öğenin bittiği yeri gösterir; addan önceki eğik çizgiye dikkat et.
• Öznitelik, açılış etiketine ek bilgi verir ve name="value" biçiminde yazılır; örneğin title="Tip".
• <br>, <hr> ve <img> gibi boş öğelerin (void elements) içeriği ve kapanış etiketi yoktur.

<p>Plain text and <strong>important text</strong>.</p>
<p title="Surprise!">Hold your mouse over this paragraph.</p>
<p>First line<br>Second line</p>
<hr>
<p>Nested: <em>italic with <strong>bold</strong> inside</em></p>

Bir HTML belgesinin yapısı

.html uzantılı her dosya aynı iskelet üzerine kurulur. Bunu aklında tut; her sayfa böyle başlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My first page</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #e34f26; }
  </style>
</head>
<body>
  <!-- Everything inside body is visible -->
  <h1>Hello, world!</h1>
  <p>This is my first web page.</p>
  <p>I am learning <strong>HTML</strong>.</p>
</body>
</html>

• <!DOCTYPE html>, tarayıcıya bunun modern bir HTML (HTML5) belgesi olduğunu söyler. Her zaman ilk satıra yazılır.
• <html lang="en"> kök öğedir; geri kalan her şey onun içindedir. lang özniteliği sayfanın dilini belirtir: Türkçe bir sayfa için tr, Azerbaycanca için az, Rusça için ru.
• <head> sayfa hakkındaki bilgileri tutar ve ekranda görünmez: <meta charset="UTF-8"> ş, ğ, ı gibi harflerin doğru görünmesini, viewport telefonlarda doğru ölçeği sağlar; <title> tarayıcı sekmesindeki addır, <style> ise CSS kurallarını içerir; onları CSS modülünde öğreneceğiz.
• <body>, sayfada görünen her şeyi içerir: başlıkları, metni, görselleri, düğmeleri.
• <!-- … --> bir yorumdur, yani insanlar için bir not. Tarayıcı onu göstermez.