roadmap.az

Menyu

HTML & CSSDərs 1 / 16

Veb proqramlaşdırmaya giriş

Sayt brauzerə necə gəlir?

Veb-səhifə brauzerin göstərə bildiyi sənəddir; sayt ortaq məqsəd və ünvan altında əlaqəli səhifələrdən ibarətdir. URL açanda brauzer serverə sorğu göndərir. Server HTML və lazım olan digər resursları qaytarır. Brauzer sənədi oxuyur, CSS qaydalarını tətbiq edir və JavaScript-i icra edir.

Üç texnologiyanın işi

<h1>Salam, veb!</h1>
<button type="button" id="greet">Salamla</button>
<style>button { padding: 12px; color: navy; }</style>
<script>
  document.querySelector('#greet').addEventListener('click', () => {
    document.querySelector('h1').textContent = 'Xoş gəldin!';
  });
</script>
Nümunə

HTML düymənin və başlığın mənasını, CSS görünüşünü, JavaScript isə klikdən sonrakı dəyişikliyi müəyyən edir. İlk təcrübədə kod bir fayldadır; layihə böyüdükcə faylları ayır.

Birgə hazırlama prosesi

Dizayner görünüş və istifadə axınını, frontend proqramçı brauzer interfeysini, backend proqramçı server davranışını hazırlayır. Test edən şəxs gözlənilən davranışı yoxlayır. Tələbi anlamaq, kiçik hissəni hazırlamaq və rəy əsasında təkmilləşdirmək eyni işin mərhələləridir. Xətti planlaşdırma ilə iterativ işi fərqləndir: iterativ işdə nəticə erkən yoxlanılır.

Əlavə qeydlər və mənbələr

Veb-sayt və veb-səhifənin fərqini, brauzerin serverdən fayl almasını və HTML, CSS, JavaScript-in birgə rolunu öyrən. Frontend, backend, dizayner və digər komanda üzvlərinin işi saytın hazırlanma prosesində birləşir.

Niyə vacibdir?

Brauzer, server və şəbəkənin rolunu anlamaq sonradan problemlərin səbəbini tapmağa kömək edir.

Bu mövzuda

  • Brauzer və server
  • HTML, CSS və JavaScript
  • Komanda rolları və hazırlama prosesi

Mövzuya baxış

Sorğunun kiçik hekayəsi

Brauzerə example.com yazanda DNS domenin uyğun server ünvanını tapmağa kömək edir. Brauzer serverə HTTP sorğusu göndərir. Server HTML cavabı qaytarır; brauzer sənədi oxuyub CSS, şəkil və JavaScript kimi əlavə faylları da istəyə bilər.

İnternet cihazları birləşdirən şəbəkədir. Veb isə bu şəbəkənin üzərində işləyən xidmətlərdən biridir. Brauzer səhifəni göstərən proqram, server isə sorğulara cavab verən tərəfdir.

Network panelində 200 uğurlu cavabı, 404 isə soruşulan resursun tapılmadığını bildirir. Status kodu problemi araşdırmaq üçün ilk ipucudur.

Mövzu üzrə praktika

Bir saytı aç, brauzerin Network panelində ilk sorğunu tap. Ünvanı, status kodunu və cavabın növünü qeyd et.

Bir səhifənin serverdən brauzerə necə gəldiyini öz sözlərinlə izah edə bilirsən.

Mövzunun yoxlama siyahısı

  • Brauzer və serverin rolunu izah et
  • Domen, DNS və hostinq anlayışlarını fərqləndir
  • Sorğu və cavabın keçdiyi yolu çək

Mənbələr

Məşqin idarəetməsi
Addım 1 / 2

Sorğunu brauzerdən serverə apar

Brauzerdən səhifəni istə, server cavabını qəbul et və səhifəni göstər.

Prosesi son vəziyyətə çatdır.

  1. Brauzer
  2. Sorğu göndərildi
  3. HTML gəldi
  4. Səhifə göründü
Brauzer

Səhifənin ünvanını açmaq istəyirsən.

https://example.test

Bu məşq prosesi modelləşdirir.

Özün sına

Bir sayt seç, onun struktur, görünüş və davranış hissələrini ayır. Sorğunun brauzerdən serverə və cavabın geri keçdiyi yolu çək.

Nəticəni necə yoxlayım?

Saytın strukturunu, üslubunu və davranışını ayırır, brauzer–server əlaqəsini və komandadakı rolları öz sözlərinlə izah edirsən.

Gözlənilən nəticə

  • Üç texnologiyanın rolu ayrı izah olunur.
  • Sorğunun və cavabın istiqamətləri göstərilir; serverlə brauzer qarışdırılmır.
Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Kitab mağazasını nümunə götürək. Görünən səhifə frontend-dir; sifarişin saxlanması serverin işidir.

cavab.txt

Quruluş (HTML): məhsul adı, qiymət, şəkil, “Səbətə əlavə et” düyməsi.
Görünüş (CSS): kartın rəngi, boşluqları, şriftləri və mobil düzülüşü.
Davranış (JavaScript): düyməyə basanda səbətin sayının artması.

Brauzer → HTTPS sorğusu → server → HTML/CSS/JS cavabı → brauzerdə səhifə.
Sifariş: brauzer → POST sorğusu → backend yoxlaması → verilənlər bazası → cavab.
Dizayner görünüşü, frontend interfeysi, backend isə server məntiqini hazırlayır.

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.