Veb necə işləyir: brauzer, server, HTTP, domen və hostinq

İlk teqi yazmazdan əvvəl sayt ünvanını daxil edib Enter düyməsini basanda nə baş verdiyini başa düşmək faydalıdır. Saniyənin bir hissəsində brauzer internetdə lazımi kompüteri tapır, ondan faylları istəyir və aldığı mətni səhifəyə çevirir. Bu bilik ilk gündən işinizə yarayacaq: səhifənin niyə «açılmadığını», 404 xətasının haradan gəldiyini və saytın hansı hissəsinə sizin cavabdeh olacağınızı anlayacaqsınız.

Klient və server

Veb klient — server sxemi üzrə qurulub. Klient məlumat istəyən proqramdır; saytlar üçün bu, brauzerdir: Chrome, Firefox, Safari, Edge. Server gecə-gündüz internetə qoşulu olan, saytın fayllarını saxlayan və sorğu gələndə onları göndərən kompüterdir; adətən bu, data-mərkəzdə yerləşən Linux kompüteridir.

Əsas fikir: sayt istifadəçidə yox, serverdə saxlanılır. Brauzer səhifənin surətini yükləyir, onu göstərir və növbəti dəfə daha tez açmaq üçün faylların bir hissəsini keşdə saxlayır. Sahibi serverdəki faylı dəyişsə, yeni versiyanı bütün ziyarətçilər görəcək. Siz isə səhifəni öz brauzerinizdə dəyişsəniz, bunu yalnız siz və yalnız səhifə yenilənənə qədər görəcəksiniz — bunu DevTools mövzusunda yoxlayacağıq.

Sorğunun yolu: ünvandan səhifəyə qədər

https://prowid.com/courses/htmlcss?lang=ru ünvanını daxil etdikdən sonra nə baş verdiyini addım-addım araşdıraq.

Addım 1. Brauzer ünvanı hissələrə ayırır

URL — resursun internetdəki tam ünvanıdır. Brauzer onu hissələrə bölür:

Addım 2. DNS: addan IP ünvana

Şəbəkədəki kompüterlər bir-birini adla yox, 203.0.113.25 kimi rəqəmli IP ünvanları ilə tapır. Rəqəmləri yadda saxlamaq çətindir, buna görə DNS (Domain Name System) — internetin «telefon kitabçası» mövcuddur. Brauzer əvvəlcə DNS serverindən domenin IP ünvanını soruşur, yalnız sonra lazımi kompüterə qoşulur:

Brauzer → DNS server:     prowid.com-un IP ünvanı nədir?
DNS server → brauzer:     prowid.com = 203.0.113.25
Brauzer → 203.0.113.25:   qorunan bağlantı açıram (HTTPS, port 443)

DNS cavabı keşlənir, ona görə də təkrar ziyarətdə bu addım demək olar ki, ani olur. Terminalda nslookup prowid.com əmri saytın IP ünvanını göstərəcək.

Addım 3. HTTP sorğusu

Sonra brauzer serverə HTTP sorğusu göndərir — HTTP (HyperText Transfer Protocol) protokolunun qaydaları ilə yazılmış mətn mesajı. Sadələşdirilmiş şəkildə o, belə görünür:

GET /courses/htmlcss?lang=ru HTTP/1.1
Host: prowid.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/140.0
Accept: text/html
Accept-Language: ru,az;q=0.9,en;q=0.8

Ən vacibi birinci sətirdir: metod GET («mənə ver»), yol və protokolun versiyası. Aşağıda başlıqlar (headers) gəlir — xidməti məlumat: hansı sayt lazımdır (Host), hansı brauzer soruşur (User-Agent), o hansı formatları və dilləri başa düşür. Müasir saytlar HTTP/2 və HTTP/3 istifadə edir — onlar daha sürətlidir, amma mahiyyət eynidir.

Addım 4. HTTP cavabı

Server lazımi faylı tapır (və ya səhifəni proqramla yığır) və cavab göndərir: status sətri, başlıqlar və gövdə (body) — sənədin özü.

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 412
Cache-Control: max-age=600

(boş sətir, ondan sonra cavabın gövdəsi: HTML sənədi)

Cavabın gövdəsi HTML nişanlaması olan adi mətndir. Serverin qaytardığı sadə sənəd belə görünə bilər, kodun altında isə brauzerin ondan çəkəcəyi nəticə var:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML and CSS course</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 16px; }
    h1 { color: #4338ca; }
  </style>
</head>
<body>
  <h1>HTML and CSS course</h1>
  <p>Start: 1 October, Baku. Duration: 4 months.</p>
  <a href="#">Sign up</a>
</body>
</html>

Bu sənədin hər sətrini yaxın mövzularda öyrənəcəksiniz. İndi başqa şey vacibdir: server mətn göndərir, onu səhifəyə isə brauzer çevirir. Content-Type: text/html başlığı deyir: «bu HTML-dir, onu səhifə kimi göstər». text/plain olsaydı, eyni mətni bucaq mötərizələri ilə, bloknotdakı kimi görərdiniz.

Addım 5. Resursların əlavə yüklənməsi və səhifənin çəkilməsi

HTML-i oxuyarkən brauzer stillərə, skriptlərə, şəkillərə və şriftlərə keçidlər tapır və hər fayl üçün ayrıca sorğu göndərir — adi səhifənin yüklənməsi onlarla sorğudan ibarətdir. Sonra o, HTML-dən elementlər ağacı (DOM) qurur, CSS-i tətbiq edir, hər blokun yerini hesablayır və ekranda pikselləri çəkir.

Cavab kodları

Hər cavab üçrəqəmli status kodu ilə başlayır. Birinci rəqəm qrupu bildirir: 2xx — uğur, 3xx — yönləndirmə, 4xx — sorğuda xəta (klient tərəfində), 5xx — server tərəfində xəta.

«404» səhifəsi də HTML-dir. Server 404 kodu ilə cavab verir və ziyarətçi azmasın deyə saytın sahibinin özünün tərtib etdiyi adi sənədi göndərir:

<style>
  .error {
    max-width: 360px;
    padding: 24px;
    text-align: center;
    border: 2px dashed #f59e0b;
    border-radius: 12px;
    background: #fffbeb;
  }
  .error strong {
    display: block;
    font-size: 56px;
    color: #d97706;
  }
</style>

<div class="error">
  <strong>404</strong>
  <p>Page not found. Check the address or go to the home page.</p>
  <a href="#">Home page</a>
</div>

HTTPS: ünvan sətrindəki qıfıl nə üçündür

Adi HTTP məlumatı açıq mətnlə ötürür: ictimai Wi-Fi-ın sahibi və ya provayder onu oxuya və hətta dəyişdirə bilər. HTTPS — şifrələnmiş bağlantının (TLS) içində işləyən həmin HTTP-dir. O, üç zəmanət verir:

• şifrələmə — parolları, kart nömrələrini və mesajları yolda oğurlamaq olmur;
• həqiqilik — sertifikat təsdiq edir ki, saxta saytla yox, məhz prowid.com ilə ünsiyyət qurursunuz;
• bütövlük — heç kim səhifəyə xəbərsiz reklam və ya zərərli kod əlavə edə bilməz.

Bu gün HTTPS məcburi standartdır: brauzerlər HTTP saytlarını «Təhlükəsiz deyil» kimi işarələyir, geolokasiya və kamera yalnız HTTPS ilə işləyir, axtarış sistemləri isə qorunmayan saytları aşağı salır. Sertifikat pulsuzdur (məsələn, Let's Encrypt), əksər hostinqlər onu bir düymə ilə aktivləşdirir.

⚠️ Qıfıl yalnız bağlantının şifrələndiyini bildirir. O, saytın dürüst olduğunu sübut etmir: fişinq səhifələrində də HTTPS olur. Həmişə ünvan sətrində domeni yoxlayın.

HTML, CSS və JavaScript: bir səhifənin üç qatı

Səhifə üç texnologiyadan qurulur və hər birinin öz rolu var:

Kursun bir kartına baxaq. Əvvəlcə yalnız HTML: brauzer standart stilləri tətbiq edir, hər şey oxunur və işləyir, amma sayt kimi yox, sənəd kimi görünür.

<article>
  <h2>HTML and CSS</h2>
  <p>Build websites from scratch: 4 months, Baku.</p>
  <button>Sign up</button>
</article>

İndi CSS əlavə edək. Nişanlamada bir simvol belə dəyişməyib — dəyişən yalnız xarici görünüşdür:

<style>
  article {
    max-width: 300px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }
  h2 { margin: 0 0 8px; color: #4338ca; }
  button {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: #4f46e5;
  }
</style>

<article>
  <h2>HTML and CSS</h2>
  <p>Build websites from scratch: 4 months, Baku.</p>
  <button>Sign up</button>
</article>

JavaScript davranış əlavə edir, məsələn, düyməyə basandan sonra onun mətnini dəyişir. Kursun canlı nümunələrində skriptlər söndürülüb, ona görə burada yalnız kod var — JavaScript ayrıca öyrənilir:

// səhifədə düyməni tapırıq
const button = document.querySelector('button');

// klik olanda onun mətnini dəyişirik
button.addEventListener('click', () => {
  button.textContent = 'You are signed up!';
});

Domen, hostinq və statik sayt

Domen — saytın adıdır: prowid.com, gov.az. Onu qeydiyyatçı şirkətdən, adətən bir illiyə icarəyə götürür və müddətini uzadırlar. Hostinq — saytın fayllarının saxlandığı serverdəki yerdir. Saytın adla açılması üçün domenin DNS ayarlarında hostinq serverinin IP ünvanı göstərilir. Bənzətmə: domen — evin ünvanı, hostinq isə fayllarınızın yaşadığı evin özüdür.

Statik sayt — server tərəfindən olduğu kimi, hamıya eyni göndərilən hazır fayllar toplusudur (HTML, CSS, JS, şəkillər). Belə saytlar sürətli, ucuz və təhlükəsizdir, onları GitHub Pages, Netlify və ya Cloudflare Pages-də pulsuz yerləşdirmək olar. Dinamik sayt isə hər sorğu üçün HTML-i serverdəki proqramla (PHP, Python, Node.js), çox vaxt verilənlər bazasındakı məlumatlarla yığır: şəxsi kabinet, onlayn mağaza.

Bu kursda siz statik saytlar hazırlayırsınız. Belə layihənin tipik strukturu:

my-site/
├── index.html      ← ana səhifə: https://my-site.com/
├── about.html      ← https://my-site.com/about.html
├── css/
│   └── style.css
└── images/
    └── logo.svg

index.html faylı xüsusidir: ünvan qovluğa işarə edəndə, məsələn sadəcə https://my-site.com/, server məhz onu göndərir.

Öz gözümüzlə baxırıq: Network paneli

Bütün sorğuları və cavabları brauzerə daxil edilmiş tərtibatçı alətlərində (DevTools) görmək olar:

1. İstənilən saytı açın və F12 düyməsini basın (macOS-da Cmd + Option + I), sonra Network panelini seçin.
2. Səhifəni yeniləyin (Ctrl + R, macOS-da Cmd + R) — cədvəl sorğularla dolacaq.
3. Növü document olan ilk sətrə klikləyin — bu, HTML sənədinin özüdür.
4. Headers bölməsində Status Code və Content-Type-ı, Response bölməsində isə serverin göndərdiyi HTML mətnini tapın.

Cədvəl təxminən belə görünür (sadələşdirilmiş):

Name         Status   Type         Size      Time
htmlcss      200      document     14.2 kB   120 ms
style.css    200      stylesheet    8.1 kB    35 ms
main.js      200      script        5.4 kB    41 ms
logo.svg     200      svg+xml       2.3 kB    22 ms
promo.png    404      png           0.6 kB    18 ms

Birinci sətir HTML sənədidir, qalan faylları brauzer onu oxuyandan sonra istəyib. promo.png-dəki 404 kodu serverdə belə şəklin olmadığını bildirir. Cədvəlin üstündəki filtrlər (Doc, CSS, JS, Img) yalnız lazımi növ faylları saxlayır.

💡 Network panelindəki Disable cache işarəsi DevTools açıq olduqca keşi söndürür. CSS-i düzəltdiyiniz, amma dəyişikliklərin «görünmədiyi» hallarda bu, çox kömək edir.

Tipik səhvlər

«Sayt istifadəçidə saxlanılır». Xeyr: istifadəçidə yalnız müvəqqəti surət olur. Orijinal serverdə yaşayır və dəyişiklikləri hamının görməsi üçün faylları məhz orada dəyişmək lazımdır.

«HTML proqramlaşdırma dilidir». HTML nişanlama (markup) dilidir: onda dəyişənlər, şərtlər, dövrlər və hesablamalar yoxdur. O, «icra olunmur», sənədin nədən ibarət olduğunu təsvir edir; frontend-də proqramlaşdırma JavaScript ilə başlayır. Bununla belə, əlçatanlıq, SEO və CSS, JS ilə işləməyin rahatlığı nişanlamanın keyfiyyətindən asılıdır.

«Domen aldım — deməli, sayt internetdədir». Domen yalnız addır; hostinq olmadan onun işarə edəcəyi yer yoxdur. Hər ikisi lazımdır: domen və faylları olan server (və ya öz ünvanı olan GitHub Pages kimi pulsuz hostinq).

Öz kompüterinizdəki fayla keçid. file:// ilə başlayan ünvan sizin diskinizə aparır — dostunuzda bu ünvanla heç nə açılmayacaq:

file:///C:/Users/Murad/Desktop/my-site/index.html   ← diskinizdəki fayl, yalnız siz görürsünüz
https://murad.github.io/my-site/                    ← internetdəki ünvan, hamıda açılacaq

«404 — deməli, server xarab olub». 404 kodu serverin işlədiyini, amma bu yolda heç nə olmadığını bildirir — ən çox ünvanda və ya fayl adında hərf səhvi olur. Serverin öz problemləri 5xx kodlarıdır.

Xülasə

• Brauzer (klient) faylları istəyir, server onları saxlayır və göndərir; sayt serverdə yaşayır.
• Sorğunun yolu: URL → DNS IP ünvanı tapır → HTTP sorğusu → status kodu, başlıqlar və gövdə ilə cavab → CSS, JS, şəkillərin əlavə yüklənməsi → çəkilmə.
• Kodlar: 2xx — uğur, 3xx — yönləndirmə, 4xx — sorğuda xəta (404), 5xx — server xətası (500).
• HTTPS bağlantını şifrələyir və saytın həqiqi olduğunu təsdiq edir; bu gün məcburi standartdır.
• HTML — struktur, CSS — tərtibat, JavaScript — davranış; HTML proqramlaşdırma yox, nişanlama dilidir.
• Domen — saytın adı, hostinq — fayllar üçün yer; statik sayt serverin olduğu kimi göndərdiyi hazır fayllardır.
• DevTools-dakı Network paneli hər sorğunu, onun statusunu və serverin cavabını göstərir.

Praktika

1. Sevdiyiniz saytı, sonra Network panelini açın və səhifəni yeniləyin. Qeyd edin: HTML sənədinin status kodu və Content-Type-ı, sorğuların ümumi sayı (panelin aşağısında göstərilir).
2. İstənilən saytın ünvanına mövcud olmayan yol əlavə edin, məsələn /abc-123. Network-də 404 kodlu sorğunu tapın və Response bölməsində serverin hansı HTML-i göndərdiyinə baxın.
3. Üç ünvanı hissələrə (protokol, domen, yol, parametrlər) ayırın: istənilən xəbər saytının ana səhifəsi, Google-da axtarış nəticəsi və onlayn mağazada məhsul səhifəsi.
4. Bu dərsdəki kurs kartının HTML kodunu card.html faylında saxlayın və onu iki kliklə brauzerdə açın. Ünvan sətrinə baxın və bu keçidin dostunuzda niyə açılmayacağını izah edin. Kartı hamının görməsi üçün nə lazım olacağını təsvir edin: hansı hostinq, ünvan necə olacaq.

💡 1-ci tapşırıqda Type sütununa diqqət yetirin: sorğular arasında neçə stil, skript, şəkil və şrift var?