HTML, CSS și JavaScript: din ce este construită o pagină web

Îi cereți agentului să corecteze pagina, și într-un proiect simplu apar fișiere cu nume confuze: index.html, style.css, script.js. Sau erau deja acolo, iar în raportul agentului scrie "am schimbat stilurile" - și din fraza aceea nu-i clar ce anume a atins.

Să analizăm trei tehnologii de bază pe care le primește browserul: HTML, CSS și JavaScript. Pentru claritate, vom lua o pagină statică simplă, fără build. Într-un repository real, fișierele pot avea alte nume și pot sta în alte locuri, deci înainte de modificare e util să-i cereți agentului să arate structura proiectului și să găsească fișierele responsabile de elementul dorit. Articolul nu vă învață să scrieți marcaj de mână, pentru asta aveți agentul.

O pagină este textul pe care îl citește browserul

Să începem cu o pagină statică simplă: sursele ei sunt fișiere text obișnuite. Le puteți deschide în Notepad și citi cu ochii. Aici nu e nevoie de niciun build suplimentar: browserul citește HTML-ul, încarcă resursele legate și după ele desenează pagina pe ecran.

Punctul de pornire al unui astfel de proiect este de obicei fișierul index.html. Browserul îl deschide, analizează marcajul și, după linkuri, încarcă stilurile, scripturile, imaginile și fonturile.

Într-un proiect cu build, sursele pot sta în componente, iar HTML-ul, CSS-ul și JavaScript-ul finale le generează un instrument special. Rolurile de mai jos rămân o hartă utilă, dar acolo nu trebuie să căutați exact trei fișiere cu aceste nume.

Pentru exemplul nostru simplu, să luăm trei fișiere cu roluri diferite:

• HTML - ce se află pe pagină: titlu, paragraf, buton, imagine;
• CSS - cum arată: culori, fonturi, spațieri, colțuri rotunjite, tranziții line;
• JavaScript - ce se întâmplă: la clic, la introducerea textului, după un timer.

Mai departe, pe rând.

HTML: din ce se compune marcajul

HTML este marcaj, nu desen. Nu descrieți cum arată un buton. Spuneți "aici este un buton" - și browserul îl desenează singur, cum știe.

Unitatea de bază a marcajului este eticheta. Aproape întotdeauna sunt două: una de deschidere și una de închidere, iar între ele stă conținutul.

Fiecare parte are propriul nume, iar toate împreună se numesc element. Cuvântul vă va prinde bine: despre pagină se spune mai des "element", adică eticheta împreună cu ce se află în ea.

Numele etichetelor sunt abrevieri ale unor cuvinte englezești: p de la paragraph, a de la anchor, img de la image. Nu are rost să le învățați pe de rost, dar de obicei vă ajută să ghiciți de ce răspunde o etichetă necunoscută.

Eticheta de închidere se deosebește printr-o bară oblică. Există și elemente fără etichetă de închidere. De exemplu, <img> nu poate conține text sau etichete imbricate, iar adresa imaginii o primește prin atributul src.

Etichetele se pun una în alta, ca niște cutii în cutii, și se închid în ordine inversă - mai întâi cea interioară, apoi cea exterioară. Dacă încurcați ordinea, browserul nu se blochează, încearcă să ghicească. De obicei ghicește prost.

Al doilea concept este atributul. E o precizare care stă în interiorul etichetei de deschidere și spune ceva despre ea: unde duce linkul, de unde se ia imaginea, cum se numește elementul.

<a href="https://example.com">Deschide site-ul</a>
<img src="cover.png" alt="Copertă">
<button id="play" class="btn">Joacă</button>

Atributul class din ultima linie vă va trebui peste două minute: prin el butonul va primi stilurile. Atributul id="play" îi dă un nume unic, după care scriptul va găsi butonul.

Acum o pagină întreagă. E mai scurtă decât ați crede:

<!doctype html>
<html>
<head>
  <title>Pagina mea</title>
</head>
<body>
  <h1>Prima pagină</h1>
  <p>Un paragraf obișnuit de text.</p>
  <button id="play" class="btn">Joacă</button>
</body>
</html>

Două părți: <head> este partea de serviciu, acolo merg titlul tabului și linkurile către stiluri; <body> înseamnă tot ce vede cititorul pe ecran. Prima linie doar îi spune browserului că are în față HTML modern.

Diagrama arată proprietatea principală a marcajului: pe pagină totul se află în interiorul a ceva. <body> în interiorul <html>, butonul în interiorul <body>, textul în interiorul butonului. De aici vine și scărița de indentări din fișier: nu e pentru frumusețe, ci arată ce e pus în ce.

Concluzia practică e simplă. Titlul tabului din browser și conectarea stilurilor stau în <head> și nu se văd deloc pe ecran. Tot restul e în <body>. Când agentul scrie în raport "am adăugat un bloc în body", e vorba exact de a doua cutie: noutatea a ajuns pe pagină, nu în partea de serviciu.

Limbajul are peste o sută de etichete, dar într-o pagină reală se învârt aproape mereu aceleași:

Ultimele două nu înseamnă nimic în sine și nu desenează nimic. Sunt cutii goale de care stilurile și scripturile se pot apuca ușor - și tocmai de aceea sunt cele mai multe în orice pagină.

CSS: cum își capătă pagina aspectul

Marcajul gol arată sărac: text negru pe alb, un buton gri de sistem, totul lipit de marginea stângă. Cea mai mare parte a diferenței dintre asta și o pagină aranjată o face CSS.

CSS e format din reguli. O regulă răspunde la două întrebări: la ce se aplică și ce schimbă.

.btn {
  background: #6c5ce7;    /* culoarea fundalului */
  color: #ffffff;         /* culoarea textului */
  padding: 12px 24px;     /* spațieri interioare */
  border-radius: 12px;    /* colțuri rotunjite */
}

Prima linie este selectorul: el spune la ce elemente se referă regula. Apoi, între acolade, vin perechi "proprietate: valoare", fiecare terminată cu punct și virgulă.

Punctul din fața lui btn înseamnă clasă. Vă amintiți atributul class="btn" de la buton? Uite că a intrat în joc: în marcaj îi atașați elementului un nume de clasă, iar în stiluri vă adresați acestui nume. Același nume îl puteți pune pe zece butoane - și toate zece vor arăta la fel datorită unei singure reguli.

CSS are sute de proprietăți, dar ca să citiți fișierul altcuiva și să înțelegeți ce se întâmplă acolo, ajung câteva:

• color - culoarea textului, background - culoarea sau imaginea fundalului;
• font-size și font-family - dimensiunea și familia fontului;
• padding - spațiul din interiorul elementului, margin - din exterior, dintre vecini;
• border-radius - colțurile rotunjite, adică jumătate din impresia de "scump";
• transition - tranziția lină: nu dintr-un salt, ci în 0.2 secunde.

Cel mai des regulile stau într-un fișier separat, iar pagina află de el dintr-un singur rând din partea de serviciu:

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

Ștergeți acest rând și fișierul de stiluri nu se mai încarcă. Textul și elementele rămân în marcaj, dar așezarea și aspectul obișnuite pot dispărea, iar pagina uneori devine mai greu de folosit.

În diagramă, în stânga și în dreapta e aceeași pagină: titlu, două rânduri de text, buton. Niciun element nu s-a adăugat și niciunul nu a dispărut - în acest exemplu s-a modificat doar fișierul de stiluri.

E o hartă de căutare, nu un zid tehnic. Pentru o așezare nouă, agentul uneori trebuie să schimbe clase sau containere în HTML, iar o regulă CSS nereușită poate acoperi butonul și împiedica clicul. De aceea, după o modificare vizuală, se verifică diff-ul, se deschide pagina și se testează acțiunile afectate.

JavaScript: ce se întâmplă la o acțiune

HTML și CSS știu deja să afișeze pagina și să-i adauge tranziții line sau animații. Dar butonul din exemplul nostru încă nu are o acțiune proprie: apăsați - scorul nu se schimbă.

Logica arbitrară pe pagină o adaugă de obicei JavaScript. Butonul a primit deja în HTML numele unic id="play". Acum schema e simplă: găsim elementul, așteptăm un eveniment, schimbăm ceva.

// găsim butonul după id-ul lui
const button = document.getElementById("play");
let score = 0;

// ne abonăm la eveniment: ce facem la clic
button.addEventListener("click", function () {
  score = score + 1;
  button.textContent = "Puncte: " + score;
});

Primul clic schimbă textul în "Puncte: 1", al doilea - în "Puncte: 2". Dacă nu se întâmplă nimic, verificați mai întâi că în HTML scrie id="play", iar în script - același nume play.

Aici sunt trei detalii. const și let creează o variabilă - o cutie cu nume, care ține o valoare. addEventListener abonează pagina la un eveniment: clic, introducere de text, trecerea mouse-ului. Iar între acolade stă o funcție - o bucată de cod care se execută atunci când are loc evenimentul.

Atenție la ultimul rând: scriptul schimbă textul butonului. E un moment important - JavaScript poate schimba și marcajul, și stilurile chiar în timp ce pagina rulează. Poate adăuga un paragraf, ascunde un bloc, recolora butonul. De aceea granița dintre straturi nu e un zid, ci o împărțire a muncii.

În practică, începeți căutarea în JavaScript dacă elementul reacționează la date, tratează un clic sau calculează ceva. Apariția lină, schimbarea culorii și mișcarea simplă le face adesea CSS. E un punct de plecare, nu un diagnostic definitiv: după modificare deschideți pagina și verificați personal aspectul și acțiunile - o captură de ecran nu ajunge.

Un buton în trei fișiere

Să adunăm totul pe un singur element. Butonul "Joacă" trăiește în trei fișiere deodată, și fiecare răspunde de partea lui.

<button id="play" class="btn">Joacă</button>

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

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

playButton.addEventListener("click", function () {
  playButton.textContent = "Jocul pornit";
});

Dacă fișierele sunt conectate, clicul schimbă textul "Joacă" în "Jocul pornit". Acum exemplul se poate verifica fără să inventăm o funcție care lipsește.

Iar acum partea cea mai utilă - ce se întâmplă dacă scoatem câte un rând:

• am scos HTML-ul - a dispărut totul: nu mai e nimic de stilizat și de însuflețit;
• am scos CSS-ul - butonul e la locul lui și funcționează, doar că arată ca un buton gri de sistem din anii nouăzeci;
• am scos JS-ul - butonul e frumos, dar mort. Se apasă, și nu se întâmplă nimic.

De aici iese o hartă simplă pentru formularea sarcinii. Dacă nu vă place cum arată, începeți căutarea cu stilurile. Dacă nu vă place ce se întâmplă - cu scriptul. Dacă elementul lipsește cu totul, începeți cu marcajul. Atenție, doar începeți: modificarea reală poate atinge stratul vecin, de aceea concluzia agentului se verifică în diff și în browser.

Ce se află în folderul proiectului

Setul cel mai frecvent pentru o pagină simplă arată așa:

index.html    marcaj, punct de intrare
style.css     stiluri
script.js     comportament

Le leagă două rânduri din marcaj. Stilurile se conectează în partea de serviciu, scriptul - chiar la final, înainte de </body>, ca în momentul în care pornește toate elementele să existe deja:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- marcajul paginii -->
  <script src="script.js"></script>
</body>

Se întâmplă și altfel. Într-un proiect mare sunt zeci de fișiere, împărțite în foldere precum css/ și js/, iar alături stau imagini și fonturi. Se întâmplă și invers, când fișierul e unul singur - despre acest caz, imediat mai jos. Rolurile marcajului, stilurilor și logicii rămân oricum, dar numele fișierelor și modul în care sunt conectate pot diferi.

Când stilurile și scripturile stau în interiorul paginii

Trei fișiere - varianta cea mai des întâlnită, dar nu singura. Același CSS îl puteți pune în trei locuri diferite, și pe toate trei le veți întâlni mai devreme sau mai târziu.

Primul l-ați văzut deja: fișier separat plus rândul <link>. Al doilea este un bloc <style> direct în marcaj, fără fișier separat:

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

Înăuntru e totul la fel: selector, acolade, perechi "proprietate: valoare". S-a schimbat doar adresa. Așa se scrie când pagina e una singură și nu are rost să-i faceți un fișier separat.

Al treilea loc sunt stilurile încorporate, adică inline styles. Proprietățile stau direct pe element, în atributul style:

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

Selectorul nu mai e necesar aici: e clar oricum la ce se referă regula - la elementul pe care e scrisă. De aceea nu există nici acolade, nici punct în fața clasei, doar perechi "proprietate: valoare" separate prin punct și virgulă, totul pe un rând.

Comod e exact o dată. Apoi încep minusurile. Regula acționează asupra unui singur element: zece butoane înseamnă zece copii, și pe urmă va trebui să le schimbați pe toate zece. Un stil inline obișnuit are de regulă prioritate față de o regulă obișnuită din fișier. Ați colorat butonul prin style, apoi modificați aceeași proprietate în style.css și nu înțelegeți de ce culoarea nu se schimbă. De aceea atributul style se verifică printre primele; regulile detaliate de prioritate nu vă trebuie încă.

Cu scriptul e aceeași poveste, doar că locurile sunt două. Un fișier separat se conectează prin <script src="...">, dar codul se poate scrie și direct între etichete:

<script>
  document.getElementById("play").addEventListener("click", function () {
    alert("Jocul pornit");
  });
</script>

Să adunăm totul într-un tabel mic, ca să aveți unde să vă uitați:

Cazul extrem e atunci când totul e pus laolaltă: marcajul, blocul <style> și blocul <script> trăiesc în același index.html. Nu e nimic grav aici, pentru o pagină mică e chiar mai simplu: un singur fișier, îl deschideți în browser și merge, nimic nu se pierde pe drum. Neplăcerile vin mai târziu, când pagina crește și în tot acest pomelnic trebuie să găsiți ceva. Atunci conținutul se împarte de obicei pe fișiere, și iese exact tripleta de mai sus.

Înainte să-i cereți agentului să "schimbe stilurile", aflați unde se află ele. Dacă în proiect e un singur index.html, fișierul style.css poate să nu existe, iar modificarea va ajunge în marcaj. Dacă elementul nu se schimbă, cereți-i agentului să verifice trei lucruri: dacă e conectat fișierul de stiluri potrivit, dacă selectorul se potrivește și dacă nu există un style încorporat sau o regulă mai puternică. Așa căutarea se restrânge fără să ghiciți vinovatul.

Cum funcționează asta împreună cu Claude Code

Acum e clar ce se întâmplă când agentul se apucă de o pagină:

• într-un proiect static simplu, agentul poate scrie și lega singur HTML, CSS și JavaScript. Într-un alt proiect, cereți-i mai întâi să arate structura și să numească fișierele responsabile de elementul dorit;
• ce anume se vede înainte de scriere depinde de setări și de modul de lucru. Dacă agentul arată propunerea dinainte, parcurgeți-o; după scriere, studiați în orice caz diff-ul și fișierele finale. Numele style.css sugerează rolul fișierului, dar încă nu garantează nimic;
• modificarea vizuală verificați-o cu ochii și cu un clic pe elementele afectate, iar modificarea de comportament - prin acțiuni reale. O captură de ecran nu arată că numărătorul a încetat să numere;
• dacă s-a stricat ceva, descrieți simptomul observat, nu stratul ghicit: "după modificare butonul se vede, dar clicul nu face nimic". Atunci agentul va verifica legăturile dintre HTML, CSS și JavaScript.