HTML, CSS və JavaScript: veb-səhifə nədən ibarətdir

Agentdən səhifəni düzəltməyi xahiş edirsiniz və sadə layihədə adları anlaşılmaz olan fayllar peyda olur: index.html, style.css, script.js. Ya da onlar əvvəldən var idi, agentin hesabatında isə "stilləri dəyişdim" yazılıb - və bu ifadədən onun konkret nəyə toxunduğu aydın olmur.

Brauzerin aldığı üç əsas texnologiyanı araşdıraq: HTML, CSS və JavaScript. Əyani olsun deyə, build mərhələsi olmayan sadə statik səhifə götürək. Real repozitoriyada fayllar başqa cür adlana və başqa yerdə dura bilər, ona görə də dəyişiklikdən əvvəl agentdən layihənin strukturunu göstərməyi və lazımi elementə cavabdeh faylları tapmağı xahiş etmək faydalıdır. Səhifəni əllə tərtib etməyi məqalə öyrətmir, bunun üçün agentiniz var.

Səhifə brauzerin oxuduğu mətndir

Sadə statik səhifədən başlayaq: onun mənbə faylları adi mətn fayllarıdır. Onları Bloknotla açıb gözlə oxumaq olar. Əlavə build burada lazım deyil: brauzer HTML-i oxuyur, əlaqəli resursları yükləyir və onlara əsasən səhifəni ekranda çəkir.

Belə layihənin başlanğıc nöqtəsi adətən index.html faylı olur. Brauzer onu açır, nişanlamanı təhlil edir və keçidlər üzrə stilləri, skriptləri, şəkilləri və şriftləri yükləyir.

Build mərhələsi olan layihədə mənbə kodu komponentlərdə ola bilər, hazır HTML, CSS və JavaScript-i isə xüsusi alət yaradır. Aşağıdakı rollar yenə də faydalı xəritə olaraq qalır, amma orada məhz belə adlı üç fayl axtarmağa ehtiyac yoxdur.

Sadə nümunəmiz üçün rolları fərqli olan üç fayl götürək:

• HTML - səhifədə nə var: başlıq, abzas, düymə, şəkil;
• CSS - necə görünür: rənglər, şriftlər, boşluqlar, künclərin yumrulanması, hamarlıq;
• JavaScript - nə baş verir: klik olanda, mətn daxil ediləndə, taymerlə.

Sonra - bir-bir.

HTML: nişanlama nədən ibarətdir

HTML çəkmək yox, nişanlamadır. Siz düymənin necə göründüyünü təsvir etmirsiniz. Siz "burada düymə var" deyirsiniz - brauzer isə onu bacardığı kimi özü çəkir.

Nişanlamanın əsas vahidi teqdir. Demək olar ki, həmişə onlar iki olur: açılış və bağlanış teqi, aralarında isə məzmun.

Hər hissənin öz adı var, hamısı birlikdə isə element adlanır. Bu söz lazım olacaq: səhifə haqqında danışanda çox vaxt "element" deyirlər və teqi içindəkilərlə birlikdə nəzərdə tuturlar.

Teq adları ingilis sözlərinin qısaltmalarıdır: p - paragraph, a - anchor, img - image sözündən. Onları əzbərləməyə ehtiyac yoxdur, amma tanımadığınız teqin nəyə cavabdeh olduğunu təxmin etməyə bu adətən kömək edir.

Bağlanış teqi çəp xətlə fərqlənir. Bağlanış teqi olmayan elementlər də var. Məsələn, <img> mətn və ya iç-içə teqlər saxlaya bilməz, şəklin ünvanını isə src atributu vasitəsilə alır.

Teqlər qutu içində qutu kimi bir-birinin içinə yerləşdirilir və tərs ardıcıllıqla bağlanır - əvvəlcə daxili, sonra xarici. Ardıcıllığı pozsanız, brauzer çökməyəcək, nə nəzərdə tutulduğunu təxmin etməyə çalışacaq. Adətən uğursuz təxmin edir.

İkinci anlayış atributdur. Bu, açılış teqinin içində yaşayan və onun haqqında nəsə deyən dəqiqləşdirmədir: keçid hara aparır, şəkli haradan götürmək lazımdır, bu elementi necə adlandırmaq olar.

<a href="https://example.com">Saytı aç</a>
<img src="cover.png" alt="Üz qabığı">
<button id="play" class="btn">Oyna</button>

Son sətirdəki class atributu iki dəqiqədən sonra lazım olacaq: məhz onun vasitəsilə düyməyə stillər tətbiq ediləcək. id="play" atributu isə ona unikal ad verir, skript düyməni bu adla tapacaq.

İndi isə bütöv səhifə. O, düşündüyünüzdən qısadır:

<!doctype html>
<html>
<head>
  <title>Mənim səhifəm</title>
</head>
<body>
  <h1>Birinci səhifə</h1>
  <p>Adi mətn abzası.</p>
  <button id="play" class="btn">Oyna</button>
</body>
</html>

İki hissə: <head> - xidməti hissədir, ora vərəqin başlığı və stillərə keçidlər yazılır; <body> - oxucunun ekranda gördüyü hər şey. Birinci sətir sadəcə brauzerə qarşısında müasir HTML olduğunu bildirir.

Sxem nişanlamanın əsas xüsusiyyətini göstərir: səhifədə hər şey nəyinsə içindədir. <body> <html>-in içində, düymə <body>-nin içində, mətn düymənin içində. Fayldakı pilləli boşluqlar da buradan gəlir: onlar gözəllik üçün deyil, nəyin nəyin içində olduğunu göstərir.

Praktiki nəticə sadədir. Brauzer vərəqinin başlığı və stillərin qoşulması <head>-də yaşayır və ekranda ümumiyyətlə görünmür. Qalan hər şey <body>-dədir. Agent hesabatda "body-yə blok əlavə etdim" yazırsa, söhbət məhz ikinci qutudan gedir: yeni hissə xidməti hissəyə yox, səhifəyə düşüb.

Dildə yüzdən çox teq var, amma real səhifədə demək olar ki, həmişə eyniləri fırlanır:

Son ikisinin özlüyündə heç bir mənası yoxdur və heç nə çəkmirlər. Bunlar boş qutulardır, onlardan stillər və skriptlər üçün tutmaq rahatdır, - elə buna görə də istənilən səhifədə onlardan ən çox olur.

CSS: səhifə görünüşünü necə alır

Çılpaq nişanlama kasıb görünür: ağ fonda qara mətn, boz sistem düyməsi, hər şey sol kənara sıxılıb. Bununla tərtib olunmuş səhifə arasındakı fərqin böyük hissəsini CSS yaradır.

CSS qaydalardan ibarətdir. Qayda iki suala cavabdır: nəyə tətbiq edirik və nəyi dəyişirik.

.btn {
  background: #6c5ce7;    /* fon rəngi */
  color: #ffffff;         /* mətn rəngi */
  padding: 12px 24px;     /* daxili boşluqlar */
  border-radius: 12px;    /* künclərin yumrulanması */
}

Birinci sətir selektordur: o, qaydanın hansı elementlərə aid olduğunu deyir. Sonra fiqurlu mötərizələrin içində "xassə: dəyər" cütləri gəlir, hər biri nöqtəli vergüllə bitir.

btn-dən əvvəlki nöqtə sinif (class) deməkdir. Düymədəki class="btn" atributunu xatırlayırsınız? Budur, o işə düşdü: nişanlamada elementə etiket asırsınız, stillərdə isə ona müraciət edirsiniz. Eyni etiketi on düyməyə asmaq olar - və bir qayda sayəsində on düymənin hamısı eyni görünəcək.

CSS-də yüzlərlə xassə var, amma başqasının faylını oxuyub orada nə baş verdiyini anlamaq üçün bir neçəsi kifayətdir:

• color - mətnin rəngi, background - fonun rəngi və ya şəkli;
• font-size və font-family - şriftin ölçüsü və qarnituru;
• padding - elementin içindəki boşluq, margin - çöldəki, qonşularla arasındakı;
• border-radius - künclərin yumrulanması, "bahalı" hissinin də yarısı elə budur;
• transition - hamarlıq: sıçrayışla yox, 0.2 saniyəyə.

Qaydalar çox vaxt ayrıca faylda olur, səhifə isə onun haqqında xidməti hissədəki bir sətirdən öyrənir:

<head>
  <link rel="stylesheet" href="style.css">
</head>

Bu sətri silin - stil faylı yüklənməyəcək. Mətn və elementlər nişanlamada qalacaq, amma adət etdiyiniz yerləşmə və tərtibat yox ola bilər, səhifədən istifadə etmək isə bəzən çətinləşəcək.

Sxemdə solda da, sağda da eyni səhifədir: başlıq, iki sətir mətn, düymə. Heç bir element nə əlavə olunub, nə də yox olub - bu nümunədə yalnız stil faylı dəyişdirilib.

Bu, texniki divar yox, axtarış xəritəsidir. Yeni yerləşmə üçün agentə bəzən HTML-də sinifləri və ya konteynerləri dəyişmək lazım olur, uğursuz CSS qaydası isə düymənin üstünü örtüb klikə mane ola bilər. Ona görə də vizual dəyişiklikdən sonra diff-ə baxır, səhifəni açır və təsirlənən hərəkətləri yoxlayırlar.

JavaScript: hərəkət olanda nə baş verir

HTML və CSS artıq səhifəni göstərməyi və ona hamar keçidlər və ya animasiya əlavə etməyi bacarır. Amma nümunəmizdəki düymənin hələ öz hərəkəti yoxdur: basırıq - xal dəyişmir.

Səhifəyə istənilən məntiqi adətən JavaScript əlavə edir. Düymə HTML-də artıq id="play" unikal adını alıb. İndi sxem sadədir: elementi tapmaq, hadisəni gözləmək, nəyisə dəyişmək.

// düyməni id-si ilə tapırıq
const button = document.getElementById("play");
let score = 0;

// hadisəyə abunə oluruq: klik olanda nə etməli
button.addEventListener("click", function () {
  score = score + 1;
  button.textContent = "Xal: " + score;
});

Birinci klik yazını "Xal: 1"-ə, ikincisi "Xal: 2"-yə dəyişir. Heç nə baş vermirsə, əvvəlcə yoxlayın ki, HTML-də id="play" yazılıb, skriptdə isə eyni ad - play.

Burada üç detal var. const və let dəyişən yaradır - dəyəri olan adlı qutu. addEventListener səhifəni hadisəyə abunə edir: klikə, mətn daxil edilməsinə, siçanın üzərinə gətirilməsinə. Fiqurlu mötərizələrin içində isə funksiya durur - hadisə baş verəndə icra olunacaq kod parçası.

Son sətirə diqqət yetirin: skript düymənin mətnini dəyişir. Bu vacib məqamdır - JavaScript səhifə işlədiyi vaxt həm nişanlamanı, həm də stilləri dəyişə bilir. O, abzas əlavə edə, bloku gizlədə, düymənin rəngini dəyişə bilər. Ona görə də qatlar arasındakı sərhəd divar yox, əmək bölgüsüdür.

Praktikada element verilənlərə reaksiya verirsə, klikləri emal edirsə və ya nəsə hesablayırsa, axtarışa JavaScript-dən başlayın. Hamar görünmə, rəngin dəyişməsi və sadə hərəkəti çox vaxt CSS edir. Bu, son diaqnoz yox, başlanğıc nöqtəsidir: dəyişiklikdən sonra səhifəni açın və görünüşü də, hərəkətləri də özünüz yoxlayın - bir ekran görüntüsü kifayət etmir.

Üç faylda bir düymə

Hamısını bir elementin üzərində birləşdirək. "Oyna" düyməsi eyni anda üç faylda yaşayır və hər biri öz işinə cavabdehdir.

<button id="play" class="btn">Oyna</button>

.btn {
  background: #6c5ce7;
  border-radius: 12px;
}

const playButton = document.getElementById("play");

playButton.addEventListener("click", function () {
  playButton.textContent = "Oyun başladı";
});

Fayllar qoşulubsa, klik "Oyna" yazısını "Oyun başladı" ilə əvəz edir. İndi nümunəni olmayan funksiya uydurmadan yoxlamaq olar.

İndi isə ən faydalısı - bir-bir sətir silsək, nə olacaq:

• HTML-i sildiniz - hər şey yox oldu: stil vermək və canlandırmaq üçün heç nə qalmadı;
• CSS-i sildiniz - düymə yerindədir və işləyir, sadəcə doxsanıncı illərin boz sistem düyməsi kimi görünür;
• JS-i sildiniz - düymə gözəldir, amma ölüdür. Basılır, heç nə baş vermir.

Buradan tapşırıq qoymaq üçün sadə xəritə alınır. Necə göründüyü xoşunuza gəlmirsə, axtarışa stillərdən başlayın. Nə baş verdiyi xoşunuza gəlmirsə, - skriptdən. Element ümumiyyətlə yoxdursa, nişanlamadan başlayın. Məhz başlayın: real dəyişiklik qonşu qata da toxuna bilər, ona görə də agentin nəticəsini diff-də və brauzerdə yoxlayırlar.

Layihə qovluğunda nə var

Sadə səhifə üçün ən çox rast gəlinən dəst belə görünür:

index.html    nişanlama, giriş nöqtəsi
style.css     stillər
script.js     davranış

Onlar nişanlamadakı iki sətirlə bağlanır. Stillər xidməti hissədə qoşulur, skript isə lap sonda, </body> bağlanmadan əvvəl - ki, o işə düşənə qədər bütün elementlər artıq mövcud olsun:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- səhifənin nişanlaması -->
  <script src="script.js"></script>
</body>

Başqa cür də olur. Böyük layihədə fayllar onlarladır, onlar css/ və js/ kimi qovluqlara paylanıb, yanında isə şəkillər və şriftlər durur. Əksinə də olur, fayl cəmi bir dənə olanda, - bu hal barədə elə aşağıda. Nişanlama, stillər və məntiqin rolları yenə qalır, amma faylların adları və qoşulma üsulu fərqli ola bilər.

Stillər və skriptlər səhifənin içində olanda

Üç fayl ən çox rast gəlinən düzülüşdür, amma yeganə deyil. Eyni CSS-i üç müxtəlif yerə qoymaq olar və gec-tez üçü də qarşınıza çıxacaq.

Birincisini artıq gördünüz: ayrıca fayl və <link> sətri. İkincisi - ayrıca fayl olmadan, birbaşa nişanlamanın içində <style> bloku:

<head>
  <style>
    .btn {
      background: #6c5ce7;
      border-radius: 12px;
    }
  </style>
</head>

İçəridə hər şey eynidir: selektor, fiqurlu mötərizələr, "xassə: dəyər" cütləri. Dəyişən yalnız ünvandır. Səhifə bir dənə olanda və onun üçün ayrıca fayl yaratmağa ehtiyac olmayanda belə yazırlar.

Üçüncü yer - daxili stillər, yəni inline styles. Xassələr birbaşa elementin üzərində, style atributunda durur:

<button class="btn" style="background: #e17055; font-size: 20px">Oyna</button>

Selektor burada lazım deyil: qaydanın nəyə aid olduğu onsuz da aydındır - üzərində yazıldığı elementə. Ona görə də nə fiqurlu mötərizə var, nə sinifdən əvvəl nöqtə, sadəcə nöqtəli vergüllə ayrılmış "xassə: dəyər" cütləri, hamısı bir sətirdə.

Bu, düz bir dəfə rahatdır. Sonra mənfi cəhətlər başlayır. Qayda yalnız bir elementə təsir edir: on düymə - on nüsxə, sonra isə onuncunun hamısını dəyişmək lazım gələcək. Adi daxili stil adətən fayldakı adi qaydadan üstün olur. Düyməni style ilə rəngləmisiniz, sonra eyni xassəni style.css-də dəyişirsiniz və rəngin niyə dəyişmədiyini anlamırsınız. Ona görə də style atributunu ilk növbədə yoxlanılanlar sırasında saxlayırlar; prioritetlərin ətraflı qaydaları hələlik lazım deyil.

Skriptlə də eyni hekayədir, sadəcə yer iki dənədir. Ayrıca fayl <script src="..."> ilə qoşulur, amma kodu birbaşa teqlərin arasına da yazmaq olar:

<script>
  document.getElementById("play").addEventListener("click", function () {
    alert("Oyun başladı");
  });
</script>

Baxıb xatırlamaq üçün hamısını bir cədvəldə toplayaq:

Ən ifrat hal - hər şey bir yerə yığılanda: nişanlama, <style> bloku və <script> bloku bir index.html-də yaşayır. Burada qorxulu heç nə yoxdur, kiçik səhifə üçün bu hətta daha sadədir: fayl bir dənədir, brauzerdə açdınız və işləyir, yolda heç nə itmir. Narahatlıqlar sonra, səhifə böyüyəndə və bu uzun vərəqdə nəyisə tapmaq lazım gələndə başlayır. Onda məzmunu adətən fayllara paylayırlar və həmin üçlük alınır.

Agentdən "stilləri dəyişməyi" xahiş etməzdən əvvəl onların harada olduğunu öyrənin. Layihədə bir index.html varsa, style.css faylı olmaya bilər və dəyişiklik nişanlamanın içində olacaq. Element dəyişmirsə, agentdən üç şeyi yoxlamağı xahiş edin: lazımi stil faylı qoşulubmu, selektor uyğun gəlirmi və daxili style və ya daha güclü qayda yoxdurmu. Belə axtarış günahkarı təxmin etmədən daralır.

Bu, Claude Code ilə birlikdə necə işləyir

İndi agent səhifə üzərində işə başlayanda nə baş verdiyi aydındır:

• sadə statik layihədə agent HTML, CSS və JavaScript-i özü yaza və bir-birinə bağlaya bilər. Başqa layihədə əvvəlcə ondan strukturu göstərməyi və lazımi elementə cavabdeh faylların adını çəkməyi xahiş edin;
• yazılmadan əvvəl nəyin görünəcəyi tənzimləmələrdən və iş rejimindən asılıdır. Agent təklifi əvvəlcədən göstərirsə, ona baxın; yazıldıqdan sonra isə hər halda diff-i və yekun faylları öyrənin. style.css adı faylın rolunu göstərir, amma hələ heç nəyə zəmanət vermir;
• vizual dəyişikliyi gözlə və təsirlənən elementlərə kliklə, davranış dəyişikliyini isə real hərəkətlərlə yoxlayın. Ekran görüntüsü sayğacın saymağı dayandırdığını göstərməyəcək;
• nəsə sınıbsa, təxmin edilən qatı yox, müşahidə etdiyiniz simptomu təsvir edin: "dəyişiklikdən sonra düymə görünür, amma klik heç nə etmir". Onda agent HTML, CSS və JavaScript arasındakı əlaqələri yoxlayacaq.