Lecția 00 · Cum funcționează web-ul¶

Internetul vs. Web-ul¶

Mulți folosesc cuvintele „Internet” și „Web” ca și cum ar fi același lucru. Nu sunt.

• Internetul este rețeaua fizică globală de cabluri, routere, antene și servere care conectează miliarde de calculatoare.
• Web-ul (World Wide Web) este stratul de informație construit deasupra Internetului — site-urile, paginile, imaginile, videoclipurile pe care le vezi în browser.

Modelul client–server¶

Orice pagină web pe care o deschizi presupune două părți care comunică:

[CLIENT]                            [SERVER]
Chrome / Firefox / Edge       Un calculator puternic
(calculatorul tău)            (ex: serverele Google)

      |   1. Cerere (request)            |
      |   GET /index.html                |
      |  ------------------------------> |
      |                                  |
      |   2. Răspuns (response)          |
      |   200 OK + cod HTML              |
      |  <------------------------------ |
      |                                  |
      v                                  v
   Afișează pagina            Trimite mai departe

• Clientul cere o resursă (o pagină, o imagine, un videoclip).
• Serverul răspunde cu acea resursă (sau cu o eroare, dacă nu există).

Browser-ul tău este un client. Google, YouTube, Wikipedia rulează pe servere.

Cererea HTTP pe scurt¶

Limbajul prin care clientul și serverul vorbesc se numește HTTP (HyperText Transfer Protocol). Când scrii o adresă și apeși Enter, se întâmplă (simplificat):

1. Browser-ul construiește o cerere: „Dă-mi pagina / de pe ursoaia-edu.online”.
2. Serverul răspunde cu un cod de stare și conținutul paginii.

Coduri pe care le vei întâlni des:

Ce face browser-ul?¶

Browser-ul are practic 3 joburi atunci când primește o pagină:

1. Citește HTML-ul (parse) și construiește o structură de tip copac (DOM).
2. Aplică CSS-ul ca pagina să arate frumos (culori, fonturi, poziții).
3. Execută JavaScript-ul ca pagina să fie interactivă (butoane, animații, date dinamice).

Fără browser, HTML este doar un fișier text. Browser-ul este „motorul” care îl transformă în ceea ce vezi.

Cele 3 limbaje ale web-ului¶

Orice site modern este construit pe trei piloni:

Instrumentele noastre¶

1. Editor de cod: VS Code¶

Visual Studio Code este un editor gratuit, rapid și folosit în industrie. Descarcă-l și instalează-l.

După instalare, instalează o singură extensie esențială pentru început:

• Live Server (autor: Ritwick Dey) — pornește un mini-server local și îți reîmprospătează automat pagina când salvezi fișierul.

2. Browser: Chrome sau Firefox¶

Orice browser modern e bun. Recomandăm Chrome sau Firefox pentru că au DevTools puternice. Evită Internet Explorer — e oficial abandonat.

3. DevTools (uneltele developer-ului)¶

Cea mai importantă scurtătură din tot cursul:

F12

(sau Ctrl+Shift+I pe Windows / Cmd+Opt+I pe Mac)

Se va deschide un panou cu mai multe tab-uri. Cele care ne interesează acum:

• Elements — arborele HTML al paginii curente. Poți edita temporar orice element (doar la tine, nimeni altcineva nu vede schimbarea).
• Console — poți scrie comenzi JavaScript și vedea mesajele din pagină.
• Network — arată toate cererile HTTP (HTML, imagini, CSS, JS) pe care le face pagina.

Primul tău experiment¶

1. Deschide google.com.
2. Apasă F12.
3. Mergi în tab-ul Elements.
4. Dă click pe săgeata/iconița „Inspect” din stânga-sus a panoului și apoi click pe bara de căutare Google.
5. În panou vei vedea codul HTML al acelui element — un <input>.
6. Dublu-click pe un text vizibil din pagină (ex: „Google Search”) și schimbă-l cu numele tău. Apasă Enter. Pagina arată altfel doar pentru tine.

Bravo! Tocmai ai făcut primul „hack” al unei pagini web. (Nu e un hack real — e doar o modificare locală.)

Exerciții¶

Exercițiu 1 — Disecează un URL¶

Explică fiecare parte a adresei: https://ursoaia-edu.online/courses/python/04-conditii/

Exercițiu 2 — Modifică temporar un titlu¶

Deschide Wikipedia, apasă F12, mergi în Elements, găsește tag-ul <h1> al articolului și schimbă textul. Ia un screenshot. După refresh, totul revine.

Exercițiu 3 — Folosește Console¶

Deschide orice pagină și în tab-ul Console scrie:

document.title

și apasă Enter. Ce afișează?

Rezumat¶

• Internet ≠ Web. Internetul e infrastructura; Web-ul e stratul de site-uri.
• Paginile merg pe modelul client–server prin protocolul HTTP/HTTPS.
• Browser-ul face 3 lucruri: parsează HTML, aplică CSS, execută JS.
• Cele 3 limbaje: HTML (structură), CSS (aspect), JavaScript (comportament).
• Instrumentele tale: VS Code + Live Server + browser modern + F12.
• F12 îți deschide DevTools — tab-urile Elements, Console, Network sunt prietenii tăi.

Pasul următor: → Lecția 01: Prima ta pagină