Cum funcționează web-ul

Lectură estimată: 14 minute

Estimare pentru text, la un ritm de 180 de cuvinte pe minut. Timpul pentru analizarea codului, exerciții și proiecte se adaugă separat și depinde de ritmul tău.

De la o adresă la o pagină pe care o poți verifica

La finalul acestei lecții vei avea două pagini legate între ele și un fișier de stiluri. Vei putea explica de unde primește browserul fiecare fișier, vei identifica o cerere reușită și vei provoca o eroare controlată ca să înveți să o repari. Exemplul este un atelier fictiv de biciclete, ales pentru a avea un conținut concret. Nu reprezintă un client real și nu trimite programări. Păstrează fișierele: în lecțiile următoare vom dezvolta structura și aspectul unei pagini de servicii.

Începe cu un director nou, numit atelier-web. Nu lucra într-un director cu documente personale sau cu fișierele altui proiect. Ai nevoie de un browser și de un editor care salvează text simplu în UTF-8. Poți folosi editorul de cod preferat; Notepad poate salva text simplu, în timp ce un document Word obișnuit nu este un fișier HTML. Pentru partea HTTP a laboratorului vom folosi și Python 3, dacă este instalat. Prima parte funcționează fără Python și fără conexiune la internet.

Ce primește browserul și ce face cu acel conținut

Un document HTML descrie conținutul: un titlu, o explicație, un link, o listă. Browserul interpretează marcajele și construiește o reprezentare a documentului în memorie, numită DOM. Aceasta îi permite să organizeze elementele și să afișeze pagina. Nu trebuie să memorezi astăzi structura internă a browserului. Reține însă diferența dintre fișierul salvat de tine și documentul pe care browserul îl construiește din acel fișier. O modificare temporară în instrumentele de dezvoltare nu rescrie automat sursa de pe disc.

CSS descrie prezentarea acelor elemente. De exemplu, stabilește lățimea zonei de lectură și culoarea unui link. Dacă fișierul CSS lipsește, un document HTML simplu poate rămâne lizibil, folosind stilurile implicite ale browserului. Această separare ne oferă un test util: dispariția culorilor fără dispariția textului indică o problemă diferită de imposibilitatea de a încărca documentul. Vom provoca exact acest caz, fără să schimbăm simultan mai multe lucruri.

JavaScript poate modifica documentul și răspunde la interacțiuni, dar nu este necesar pentru orice comportament. Un link HTML poate deschide altă pagină fără JavaScript. Un browser poate verifica nativ anumite câmpuri de formular. În acest laborator nu introducem niciun script: vrem să observăm relația dintre document și resurse, fără alte dependențe. Faptul că pagina nu folosește JavaScript nu o împiedică să fie o pagină web reală și navigabilă.

Pe un site public, serverul poate trimite un fișier HTML existent sau poate produce răspunsul folosind o aplicație și date. Browserul primește rezultatul, nu codul privat al acelei aplicații. În schimb, HTML-ul, CSS-ul și JavaScript-ul trimise clientului pot fi inspectate. Nu pune parole sau chei private în aceste fișiere. Pentru proiectul nostru static, serverul are o sarcină mai restrânsă: livrează fișierele pe care le-ai salvat în directorul de lucru.

Citirea unei adrese fără să ghicești

Adresa http://127.0.0.1:8000/servicii.html?mod=demo#revizie conține mai multe părți. Schema http indică protocolul; 127.0.0.1 este adresa locală de buclă, adică propriul calculator; 8000 este portul pe care va asculta programul server. Calea /servicii.html identifică resursa cerută. Partea ?mod=demo este o interogare, iar #revizie este un fragment folosit de browser pentru a identifica o țintă în document. Fragmentul nu este trimis serverului în cererea HTTP.

În laboratorul nostru, interogarea nu schimbă conținutul fișierului static. În alte aplicații, aceeași sintaxă poate selecta un filtru sau o pagină de rezultate, deoarece aplicația interpretează parametrii. Nu presupune că orice text adăugat după semnul întrebării produce automat un comportament. La fel, fragmentul funcționează ca destinație în pagină dacă există un element cu identificatorul potrivit. Vei crea explicit un astfel de element în pagina de servicii.

Pe un domeniu public, DNS ajută la găsirea adreselor serverului, iar HTTPS protejează transportul folosind TLS. Această descriere este o orientare, nu o cronologie rigidă pentru fiecare încărcare: browserul poate reutiliza conexiuni și informații deja memorate. În laborator folosim direct adresa 127.0.0.1, fără un domeniu de rezolvat. Adresa nu devine publică prin simpla pornire a serverului local. Dacă o scrii pe telefon, ea desemnează telefonul, nu calculatorul pe care ai pornit laboratorul.

Laborator: trei fișiere, două pagini și o resursă comună

Creează fișierele index.html, servicii.html și styles.css direct în atelier-web. Verifică extensiile reale: index.html.txt este alt nume. În Windows poți activa afișarea extensiilor în Explorer; în editor verifică numele din dialogul de salvare. Folosește litere mici și păstrează exact numele din exemple. Un sistem de fișiere poate tolera diferențe între majuscule și minuscule, dar alt server poate considera Styles.css și styles.css fișiere diferite.

Salvează primul bloc în index.html. Linia cu charset precizează codificarea; salvează și fișierul efectiv în UTF-8. Titlul din head apare în fila browserului, iar h1 este titlul vizibil în pagină. Linia link cere încărcarea fișierului CSS din același director. Nu este un link de navigare pentru cititor, ci o relație dintre document și o resursă de prezentare. Linkul a din main este, în schimb, controlul pe care îl va activa cititorul.

<!doctype html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Atelier demonstrativ — început</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Atelier demonstrativ de biciclete</h1>
    <p>Acesta este un proiect fictiv pentru învățarea HTML și CSS.</p>
    <p><a href="servicii.html#revizie">Vezi serviciul de revizie</a></p>
  </main>
</body>
</html>

Salvează al doilea bloc în servicii.html. Identificatorul revizie este ținta fragmentului din linkul primei pagini. Linkul de întoarcere indică index.html, nu un fișier de pe calculatorul autorului. Nicio adresă nu conține un director precum C:\Users: dacă muți împreună cele trei fișiere într-un alt director, relațiile dintre ele se păstrează. Acesta este avantajul căilor relative într-un proiect mic și autonom.

<!doctype html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Servicii — atelier demonstrativ</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Servicii demonstrative</h1>
    <section id="revizie">
      <h2>Revizie de bicicletă</h2>
      <p>Exemplu de serviciu: verificarea frânelor și a transmisiei.</p>
    </section>
    <p><a href="index.html">Înapoi la pagina de început</a></p>
  </main>
</body>
</html>

Salvează ultimul bloc în styles.css. Nu copia în acest fișier etichete style sau marcajele care delimitează blocul în lecție. Pentru moment, observă rezultatul: textul are un font fără serife, zona de lectură este limitată și centrată, iar legăturile sunt albastre și subliniate. Conturul de focus ajută la urmărirea linkului selectat prin tastatură. Vom explica selectoarele și modelul de cutie în lecția dedicată; aici folosim CSS drept resursă a cărei încărcare poate fi verificată.

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.6;
  color: #172b3a;
  background: #f5f7fa;
}
main {
  max-width: 44rem;
  margin-inline: auto;
  padding: 1.5rem;
  overflow-wrap: anywhere;
}
a { color: #0645ad; text-decoration: underline; }
a:focus-visible { outline: 3px solid #172b3a; outline-offset: 4px; }

Deschide index.html prin dublu-click sau prin opțiunea browserului de a deschide un fișier. Adresa începe cu file:, iar browserul citește resursele locale. Apasă Tab până când linkul are focus și apoi Enter. Trebuie să ajungi la servicii.html, cu fragmentul #revizie în adresă. Activează linkul de întoarcere. Dacă ai deschis din greșeală fișierul în editor, nu ai făcut o cerere web; alege deschiderea cu browserul.

Schimbă textul primului paragraf, salvează și reîncarcă pagina. Dacă modificarea nu apare, verifică întâi fișierul editat și adresa file: din browser. Două directoare cu același nume de fișier produc ușor confuzii. Nu începe prin reinstalarea editorului. Schimbă temporar titlul într-un text foarte distinct, precum Test atelier 42, pentru a confirma că lucrezi pe copia corectă; după verificare, revino la titlul descriptiv.

Servirea aceluiași proiect prin HTTP

Deschide un terminal în directorul atelier-web. Pe Windows verifică Python cu py --version; pe Linux sau macOS încearcă python3 --version. Dacă respectiva comandă nu există, nu înseamnă că HTML-ul este greșit: lipsește interpretorul sau comanda prin care este disponibil. Poți termina partea cu fișiere locale și reveni după configurarea Python 3. Nu este necesar să instalezi o bibliotecă Python pentru acest server; modulul face parte din biblioteca standard.

Pe Windows, cu lansatorul py disponibil, rulează următoarea comandă. Lasă terminalul deschis cât timp testezi. Textul afișat de server poate varia cu versiunea Python, dar trebuie să indice că ascultă pe adresa și portul cerute. Dacă apare o eroare că portul este ocupat, alege 8001 și folosește același număr în adresa browserului. Nu opri procese necunoscute doar pentru a elibera portul din exemplu.

py -m http.server 8000 --bind 127.0.0.1

Pe Linux sau macOS, comanda echivalentă folosește numele interpretorului disponibil acolo. Rulează o singură variantă, nu ambele simultan pe același port. Dacă ai Python instalat sub alt nume, adaptează doar numele executabilului, păstrând argumentele. Directorul din care pornești comanda devine rădăcina fișierelor servite în acest exemplu; de aceea am separat proiectul de documentele personale și nu am pornit serverul din directorul contului de utilizator.

python3 -m http.server 8000 --bind 127.0.0.1

Deschide http://127.0.0.1:8000/index.html. Conținutul ar trebui să fie același, dar mecanismul de acces este diferit: browserul vorbește acum cu un program server prin HTTP. Legarea la 127.0.0.1 limitează ascultarea la interfața locală în configurația obișnuită a laboratorului. Acest server este un instrument de dezvoltare, nu soluția de publicare a unui site. Încheie experimentul cu Ctrl+C în terminalul lui. Nu configura expunerea către internet pentru exercițiul acesta.

Urmărirea cererilor în instrumentele browserului

Deschide instrumentele pentru dezvoltatori din meniul browserului și selectează Network, uneori tradus Rețea. Deschide panoul înainte de reîncărcare, pentru a înregistra cererile. În Chromium poți bifa Disable cache cât timp instrumentele sunt deschise, astfel încât experimentul inițial să nu fie influențat de reutilizarea unor răspunsuri. Reîncarcă index.html și caută documentul și styles.css. Browserul poate cere și alte resurse, precum o pictogramă implicită; nu deduce corectitudinea din numărul total de rânduri.

Selectează documentul. Pentru încărcarea obișnuită, fără cache, serverul de laborator răspunde cu 200. În antete poți vedea adresa cerută și tipul conținutului; în răspuns găsești textul HTML. Selectează apoi styles.css și verifică separat adresa, statusul și regulile CSS primite. O pagină cu documentul încărcat corect poate avea o resursă secundară lipsă. De aceea, un singur răspuns 200 nu certifică întregul ecran și nici funcționarea tuturor legăturilor.

Activează linkul de servicii și urmărește cererea pentru servicii.html. Adresa din bara browserului include #revizie, dar cererea pentru document nu include acel fragment. Într-o pagină atât de scurtă este posibil să nu observi deplasarea vizuală: ținta încape deja în ecran. Verificarea bună este identificatorul existent și adresa corectă, nu obligația de a vedea o animație sau o anumită distanță de derulare. Fragmentul nu introduce singur niciun efect animat.

O eroare controlată: document prezent, stiluri lipsă

În index.html schimbă numai href="styles.css" în href="stiluri-lipsa.css". Salvează și reîncarcă folosind Network cu cache dezactivat. Documentul trebuie să rămână disponibil, iar cererea pentru stiluri-lipsa.css să primească 404. Textul și linkul există în continuare, dar prezentarea revine la stilurile implicite. Statusul 404 arată că serverul a răspuns și nu a găsit resursa cerută. El nu înseamnă că browserul nu a putut contacta serverul.

Repară numele în HTML și reîncarcă. Confirmă separat revenirea stilurilor și răspunsul pentru styles.css. Nu crea un fișier gol cu numele greșit doar ca să dispară eroarea: ai obține eventual 200, dar fără regulile dorite. În depanare verifici conținutul răspunsului, nu numai culoarea sau codul din tabel. Dacă styles.css răspunde 200 și tot nu vezi schimbarea, verifică dacă răspunsul conține efectiv CSS și dacă regula modificată se aplică elementului vizat.

Oprește acum serverul cu Ctrl+C și cere o adresă nouă, de exemplu /test-dupa-oprire.html, păstrând cache dezactivat. Browserul poate afișa o eroare de conexiune; nu există un răspuns HTTP 404 de la programul oprit. Formularea mesajului depinde de browser. O pagină deja afișată poate rămâne vizibilă după oprire, fiindcă browserul nu șterge automat documentul din memorie. Pentru diagnostic trebuie să provoci o cerere nouă, nu doar să privești fila veche.

De ce cache-ul schimbă ce observi

După experimentul inițial, pornește din nou serverul și permite cache-ul. În anumite încărcări poți întâlni 304 sau o mențiune despre resurse reutilizate din memorie ori de pe disc. Un 304 este un răspuns la o verificare condițională, prin care browserul poate reutiliza reprezentarea pe care o are deja; nu este același lucru cu un 404. Nu promitem un anumit status la fiecare reîncărcare: setările, antetele și istoricul browserului influențează rezultatul.

Când verifici o modificare, notează dacă ai dezactivat cache-ul. Altfel, două persoane pot vedea trasee diferite și pot trage concluzii opuse din aceeași pagină. În acest laborator, rezultatul vizual așteptat este stabil, însă numărul de transferuri nu este o constantă. Nu transforma reîncărcarea forțată într-o soluție universală: o cale greșită rămâne greșită și după golirea cache-ului. Repară cauza pe care ai identificat-o în adresa sau conținutul cererii.

Căi relative: un experiment înainte de publicare

Creează un subdirector numit pagini și copiază acolo servicii.html, păstrând și originalul. Deschide /pagini/servicii.html prin HTTP. Fișierul copiat cere acum /pagini/styles.css, deoarece referința styles.css se rezolvă față de directorul documentului. În proiectul nostru, acel fișier nu există. Linkul index.html indică, în mod similar, /pagini/index.html. Pagina copiată arată astfel de ce o cale relativă corectă într-un director poate deveni greșită în altul.

În copia din pagini, schimbă foaia de stil în ../styles.css și legătura de întoarcere în ../index.html. Cele două puncte urcă un nivel de director. Confirmă în Network adresele rezolvate și navigarea. O cale care începe cu /, precum /styles.css, pornește de la rădăcina adresei HTTP; ar funcționa în rădăcina acestui server, dar poate necesita altă organizare dacă publici întregul proiect sub /atelier/. Nu înlocui mecanic toate căile relative cu unele absolute.

Exerciții cu rezolvări și dovezi

Exercițiul întâi: un coleg vede pagina fără culori, iar Network arată 200 pentru index.html și 404 pentru Styles.css. Fișierul salvat este styles.css. Explică ce verifici înainte de a modifica regulile de culoare. Rezolvare: verifici numele din atributul href și numele real al fișierului, inclusiv literele mari, apoi adresa completă rezolvată de browser. Corectezi referința și confirmi că răspunsul conține CSS. Nu poți repara o resursă negăsită schimbând valoarea unei culori în alt fișier.

Exercițiul al doilea: modifici un paragraf în panoul Elements, îl vezi schimbat și apoi dispare după reîncărcare. Ce s-a pierdut? Rezolvare: ai schimbat documentul din memoria browserului, nu sursa salvată. Scrie modificarea în editor, salvează index.html și reîncarcă. Verifică textul în răspunsul documentului. Dacă folosești facilități speciale de sincronizare ale instrumentelor, comportamentul poate fi diferit; acest exercițiu presupune instrumente obișnuite, fără asemenea configurări.

Exercițiul al treilea: cu serverul pornit pe calculator, încerci adresa 127.0.0.1:8000 de pe alt dispozitiv și nu vezi pagina. Rezolvare: adresa se referă la dispozitivul pe care o folosești, iar serverul nostru ascultă local. Pentru lecția aceasta lucrezi în browserul aceluiași calculator. Testarea pe alte dispozitive este un scenariu separat, cu altă configurare; nu este necesară pentru a dovedi că fișierele și legăturile create aici funcționează.

Exercițiul final: redactează o fișă cu patru observații proprii. Notează adresa documentului, adresa CSS, rezultatul erorii controlate și corectura aplicată. Adaugă numele browserului și dacă ai folosit cache. Dovada poate fi o captură Network și o propoziție pentru fiecare caz. Scrie explicit ce ai executat și ce ai doar citit. Nu marca experimentul HTTP drept verificat dacă ai lucrat numai prin file:, chiar dacă pagina arată identic.

Înainte de următoarea lecție

Păstrează cele trei fișiere originale într-o stare funcțională și copia reparată din pagini ca exemplu de căi relative. Confirmă navigarea în ambele sensuri, diacriticele și încărcarea foii CSS. Dacă ai lucrat cu serverul, oprește-l după verificare. Ai acum un proiect mic în care poți separa conținutul de prezentare, o resursă lipsă de o conexiune nereușită și fișierul salvat de documentul din browser. Lecția următoare dezvoltă alegerea elementelor HTML și structura semantică a paginii.