Veb necə işləyir: ilk HTML səhifən

Hər gün onlarla veb-səhifə açırsan: xəbərlər, videolar, məktəbin saytı. Bəs ünvanı yazdığın an ilə səhifənin ekranda göründüyü an arasında nə baş verir? Səhifə ümumiyyətlə nədən ibarətdir? Bu dərsdə bunu öyrənəcək və ilk veb-səhifəni özün yazacaqsan.

Saytı açanda nə baş verir?

Hər sayt serverdə saxlanılır — internetə daim qoşulu olan və faylları saxlayan kompüterdə. Sənin brauzerin (Chrome, Firefox, Safari, Edge) isə müştəridir (client): serverdən faylları istəyir və onları sənə göstərir. Bu «söhbət» bir neçə addımda baş verir:

1. 1
   Ünvanı yazırsan

   Ünvan sətrinə https://example.com/about kimi bir URL yazırsan və ya keçidə klik edirsən.

2. 2
   Server tapılır

   DNS sistemi example.com kimi domen adını serverin rəqəmli ünvanına — IP ünvanına çevirir. Bu, telefon kitabçasına bənzəyir: sən adı bilirsən, nömrəni isə DNS tapır.

3. 3
   Sorğu göndərilir

   Brauzer serverə HTTP sorğusu göndərir: «Mənə /about səhifəsini ver». HTTPS-dəki S hərfi «secure» (təhlükəsiz) deməkdir: məlumat yolda şifrələnir.

4. 4
   Cavab gəlir

   Server HTML faylı və status kodu ilə cavab verir: 200 hər şeyin qaydasında olduğunu, 404 isə belə səhifənin olmadığını bildirir.

5. 5
   Səhifə qurulur

   Brauzer HTML-i oxuyur, orada adı çəkilən CSS fayllarını, şəkilləri və skriptləri də yükləyir və səhifəni ekranda çəkir.

HTML, CSS və JavaScript

Hər veb-səhifə üç dilin birgə işidir. Onu evə bənzətmək olar: HTML divarlar və otaqlardır, yəni quruluş; CSS boya və mebeldir, yəni xarici görünüş; JavaScript isə elektrikdir — düyməyə basanda nəyinsə baş verməsi.

Teqlər, elementlər və atributlar

HTML məzmunu teqlərlə nişanlayır — bucaqlı mötərizələrə alınmış sözlərlə. Teqlərin çoxu cüt olur: açılan <p> və çəp xətli bağlanan </p>. Açılan teq, məzmun və bağlanan teq birlikdə element əmələ gətirir.

• Açılan teq <p> elementin başladığı yeri göstərir.
• Bağlanan teq </p> elementin bitdiyi yeri göstərir — addan əvvəlki çəp xəttə diqqət et.
• Atribut açılan teqə əlavə məlumat verir və name="value" şəklində yazılır, məsələn, title="Tip".
• <br>, <hr>, <img> kimi boş elementlərin (void elements) məzmunu və bağlanan teqi olmur.

<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>

HTML sənədinin quruluşu

.html uzantılı hər fayl eyni «skelet» üzərində qurulur. Onu yadda saxla — bütün səhifələr belə başlayır:

<!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> brauzerə bunun müasir HTML (HTML5) sənədi olduğunu bildirir. Həmişə birinci sətirdə yazılır.
• <html lang="en"> kök elementdir, qalan hər şey onun içindədir. lang atributu səhifənin dilini göstərir: azərbaycanca səhifə üçün az, rusca üçün ru, türkcə üçün tr.
• <head> səhifə haqqında məlumatı saxlayır və ekranda görünmür: <meta charset="UTF-8"> ə, ş, ğ kimi hərflərin düzgün görünməsi, viewport telefonlarda düzgün miqyas üçündür, <title> brauzer vərəqindəki (tab) addır, <style> isə CSS qaydalarını saxlayır — onları CSS modulunda öyrənəcəyik.
• <body> səhifədə görünən hər şeyi saxlayır: başlıqları, mətni, şəkilləri, düymələri.
• <!-- … --> şərhdir — insanlar üçün qeyd. Brauzer onu göstərmir.