🌐 Internetul = Reteaua fizica
Internetul este o retea globala de calculatoare conectate intre ele prin cabluri, fibra optica, sateliti si unde radio. A fost creat in anii 1960 (sub numele ARPANET).
Internetul este infrastructura - "drumurile" pe care circula datele. Pe aceste drumuri circula multe servicii diferite: email, mesaje, jocuri online, streaming video, si... web-ul.
Gandeste-te la Internet ca la reteaua de drumuri si autostrazi din Romania. Drumurile exista fizic - sunt asfalt, poduri, tuneluri. Pe aceste drumuri circula masini, camioane, biciclete, motociclete. Drumul in sine nu este masina - este infrastructura pe care masina circula.
📎 Web-ul = Un serviciu pe Internet
World Wide Web (WWW) este un serviciu care ruleaza pe Internet. A fost inventat in 1989 de Tim Berners-Lee. Web-ul foloseste Internetul pentru a transmite pagini (documente HTML) de la servere la browser-ul tau.
Web-ul este doar unul dintre serviciile care folosesc Internetul. Alte servicii: email (Gmail, Yahoo Mail), mesagerie (WhatsApp, Telegram), gaming online, streaming (Netflix, Spotify).
Daca Internetul e reteaua de drumuri, atunci Web-ul este un tip de vehicul care circula pe acele drumuri - sa zicem, autobuzul. Email-ul ar fi alt vehicul - camionul de curierat. WhatsApp ar fi o motocicleta rapida. Toate circula pe aceleasi drumuri (Internet), dar sunt vehicule diferite (servicii diferite).
💻 Browser-ul = Clientul tau
Browser-ul (Chrome, Firefox, Edge, Safari) este programul de pe calculatorul tau care cere pagini web de la servere si le afiseaza pe ecran.
Browser-ul face doua lucruri importante:
1. Trimite cereri - cand tastezi o adresa sau dai click pe un link, browser-ul trimite o cerere la server
2. Interpreteaza codul HTML - primeste raspunsul (cod HTML) si il transforma in pagina vizuala pe care o vezi
Browser-ul este ca tu la restaurant. Te asezi la masa (deschizi browser-ul), comanzi un fel de mancare (tastezi adresa site-ului), si astepti sa ti se aduca preparatul (pagina web). Tu nu gatesti mancarea - doar o comanzi si o primesti gata pregatita!
🖥 Serverul = Calculatorul care serveste
Serverul este un calculator puternic care stocheaza fisierele unui site web si le trimite catre oricine le cere. Cuvantul "server" vine de la "a servi" (to serve). Serverul serveste pagini web.
Serverele sunt calculatoare care functioneaza 24/7, non-stop, conectate permanent la Internet, asteptand cereri de la browsere din toata lumea.
Companii mari ca Google, Facebook si YouTube au mii de servere raspandite in toata lumea (numite "data centers" sau centre de date).
Serverul este ca bucatarul din bucatarie. El are toate ingredientele (fisierele HTML, imaginile, CSS), primeste comanda ta (cererea HTTP), pregateste preparatul (gaseste fisierul cerut) si ti-l trimite la masa (afiseaza pagina in browser). Bucatarul serveste multi clienti in acelasi timp, la fel ca un server web!
🔗 URL = Uniform Resource Locator
URL-ul este adresa unica a fiecarei pagini de pe web. La fel cum fiecare casa are o adresa postala unica, fiecare pagina web are un URL unic prin care poate fi gasita.
Cand tastezi un URL in bara de adrese a browser-ului, ii spui practic: "Du-ma exact la aceasta pagina, de pe acest server!"
URL-ul este ca adresa de pe un plic. Cand trimiti o scrisoare, scrii: Str. Libertatii, Nr. 10, Bucuresti, Romania. Fiecare parte identifica locatia exact. La fel, un URL are parti care identifica exact unde se afla o pagina web: protocolul (cum trimiti), domeniul (orasul/cladirea), si calea (apartamentul exact).
🌎 Domeniu (Domain Name) = Numele site-ului
Domeniul este numele unic al unui site web. Exemple: google.ro, facebook.com, wikipedia.org.
In realitate, serverele sunt identificate prin numere numite adrese IP (ex: 142.250.185.99 = google.com). Dar nimeni nu tine minte numere! De aceea exista DNS (Domain Name System) - un "catalog telefonic" al Internetului care traduce numele de domeniu in adrese IP.
Terminatia domeniului se numeste extensie sau TLD (Top Level Domain):
| Extensie | Semnificatie | Exemplu |
|---|---|---|
| .ro | Romania (domeniu de tara) | emag.ro, digi24.ro |
| .com | Comercial (international) | google.com, youtube.com |
| .org | Organizatie non-profit | wikipedia.org |
| .edu | Educational | mit.edu, harvard.edu |
| .gov | Guvernamental | gov.ro, nasa.gov |
Adresa IP (142.250.185.99) este ca numarul de telefon al cuiva - exact, dar greu de retinut. Domeniul (google.com) este ca numele din agenda - usor de retinut. DNS-ul functioneaza ca aplicatia de Contacte din telefon: tu apesi pe "Mama" si telefonul stie automat ca trebuie sa sune la 0721-xxx-xxx.
📄 HTML = HyperText Markup Language
HTML (HyperText Markup Language) este limbajul in care sunt scrise paginile web. Nu este un limbaj de programare - este un limbaj de marcare (markup). Asta inseamna ca HTML descrie structura si continutul unei pagini, nu logica sau calculele.
HTML foloseste tag-uri (etichete) intre paranteze unghiulare < > pentru a spune browser-ului ce sa afiseze si cum sa organizeze continutul. Majoritatea tag-urilor vin in perechi: un tag de deschidere <tag> si unul de inchidere </tag>.
HTML este ca scheletul corpului uman. Scheletul da structura - defineste unde este capul, unde sunt mainile, unde sunt picioarele. Fara schelet, corpul ar fi doar o gramada de organe. La fel, HTML da structura paginii: unde e titlul, unde e textul, unde e imaginea. CSS (pe care il vei invata in atomii urmatori) este ca hainele - da aspect vizual, culori si dimensiuni. JavaScript este ca muschii - da miscare si interactivitate.
🏷 Tag-uri HTML de baza
Iata cele mai importante tag-uri HTML pe care le vei intalni:
| Tag | Ce face | Exemplu |
|---|---|---|
<html> |
Containerul principal al paginii | Tot codul HTML e intre aceste tag-uri |
<head> |
Informatii despre pagina (invizibile) | Titlul, stiluri, meta-date |
<title> |
Titlul din tab-ul browser-ului | <title>Pagina mea</title> |
<body> |
Continutul vizibil al paginii | Tot ce vede utilizatorul |
<h1> - <h6> |
Titluri (h1=mare, h6=mic) | <h1>Titlu mare</h1> |
<p> |
Paragraf de text | <p>Text aici.</p> |
<a> |
Link (hyperlink) | <a href="url">Click</a> |
<img> |
Imagine | <img src="poza.jpg"> |
🔍 View Page Source - Priveste codul oricarui site
Fiecare pagina web pe care o vizitezi este de fapt un document HTML text. Browser-ul tau il interpreteaza si il transforma in ceva vizual (cu culori, imagini, butoane). Dar poti vedea oricand codul original!
Cum vezi codul sursa:
▪ Ctrl + U = deschide codul sursa complet (intr-un tab nou)
▪ F12 = deschide Developer Tools (unelte pentru dezvoltatori)
▪ Click dreapta > "View Page Source" = alta varianta
📝 Structura minima a unui fisier HTML
Orice pagina HTML are aceeasi structura de baza. Iata un exemplu complet cu explicatii:
<!-- Aceasta linie spune browser-ului ca e HTML5 --> <!DOCTYPE html> <!-- Containerul principal - TOATA pagina --> <html lang="ro"> <!-- HEAD = informatii INVIZIBILE --> <head> <!-- Permite caractere romanesti (a, i, s, t) --> <meta charset="UTF-8"> <!-- Titlul din tab-ul browser-ului --> <title>Pagina mea super tare</title> </head> <!-- BODY = continutul VIZIBIL --> <body> <h1>Bine ai venit pe site-ul meu!</h1> <p>Aceasta pagina a fost creata de mine.</p> <p>Invat HTML la ora de TIC!</p> <h2>Link-uri utile</h2> <a href="https://google.ro">Mergi la Google</a> </body> </html>
Observa structura: <html> contine <head> si <body>. Tag-urile se imbrica (nest) unul in altul, ca papusile rusesti (matrioshka): cutia mare contine cutii mai mici, care contin cutii si mai mici. Fiecare tag deschis trebuie inchis: <h1>...</h1>.
✎ Editor dedicat de pagini web — Google Sites
Programa scolara (OMEN 3393/2017) cere sa inveti sa creezi pagini web folosind un editor dedicat (competenta VIII-1.2: "Utilizarea unui editor dedicat pentru realizarea unor pagini web"). Acesta este un instrument special, diferit de un editor text obisnuit (Notepad).
Un editor dedicat de pagini web are o interfata WYSIWYG (What You See Is What You Get — "ce vezi este ce obtii"): adaugi text, imagini si linkuri prin click, iar editorul genereaza codul HTML in fundal, automat.
Exemple de editoare dedicate accesibile in scoala:
- Google Sites (sites.google.com) — gratuit, online, nu necesita instalare, se salveaza automat in Google Drive
- Wix (wix.com) — gratuit cu cont, interfata drag-and-drop
- Microsoft Expression Web — offline, instalabil pe Windows
- KompoZer — offline, open-source, gratuit
In aceasta lectie vom folosi Google Sites — cel mai accesibil din scoala (necesita doar un cont Google).
Ai scris vreodata un text in Google Docs? Apesi pe B si textul devine Bold — nu trebuie sa scrii nimic special manual. Un editor dedicat de pagini web functioneaza la fel: tu apesi butoane vizuale, el genereaza codul HTML pentru tine. E ca diferenta intre a gati dupa reteta (Notepad) si a comanda la restaurant (Google Sites).
| Zona interfata | Ce face | Echivalent HTML |
|---|---|---|
| Bara de sus (toolbar) | Publica site-ul, previzualizeaza, undo/redo | — |
| Panoul dreapta — "Insert" | Adauga text, imagini, linkuri, tabele, video | <p>, <img>, <a>, <table> |
| Panoul dreapta — "Pages" | Gestioneaza paginile site-ului (adauga/sterge) | fisiere .html separate |
| Panoul dreapta — "Themes" | Schimba aspectul vizual (culori, fonturi) | CSS (stiluri) |
| Zona centrala (canvas) | Editezi direct continutul paginii, vizual | continut din <body> |
| Buton "Preview" | Previzualizeaza cum va arata pagina publicata | deschidere in browser |
| Buton "Publish" | Publica site-ul online, accesibil oriunde | upload pe server |
- Deschide sites.google.com (ai nevoie de cont Google)
- Apasa "Blank site" (site gol) sau alege un sablon
- In zona centrala, click pe "Click to edit title" si scrie titlul paginii tale
- Apasa Insert → Text box pentru a adauga un paragraf
- Apasa Insert → Image pentru a adauga o imagine
- Apasa Preview (pictograma ochi) pentru a vedea cum arata pagina
- Apasa Publish pentru a pune site-ul online cu o adresa publica
🎨 Formatare text: culoare, marime, font
Programa (OMEN 3393/2017) cere sa stii sa formatezi textul unei pagini web: culoare, marime si tip de font. In HTML modern, formatarea se face cu CSS (Cascading Style Sheets).
Cel mai simplu mod (potrivit pentru incepatori) este CSS inline: adaugi atributul style="..." direct pe tag-ul HTML.
| Proprietate CSS | Ce face | Exemplu valoare |
|---|---|---|
color | Culoarea textului | red, blue, #ff0000 |
font-size | Marimea textului | 16px, 1.2em, large |
font-family | Tipul de font | Arial, Georgia, sans-serif |
font-weight | Grosimea textului | bold, normal, 700 |
font-style | Inclinarea textului | italic, normal |
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Formatare text</title> </head> <body> <!-- Titlu cu culoare albastra si font-size 36px --> <h1 style="color: blue; font-size: 36px;">Pagina mea</h1> <!-- Paragraf cu font Arial si text rosu --> <p style="color: red; font-family: Arial;"> Acesta este un paragraf cu text rosu in Arial. </p> <!-- Paragraf bold si italic --> <p style="font-weight: bold; font-style: italic; font-size: 20px;"> Text ingrosat si inclinat. </p> </body> </html>
CSS inline (style= pe fiecare tag) e usor de inceput, dar repetitiv daca ai multe elemente. O varianta mai ordonata: pui toate stilurile intr-un bloc <style> in <head>, aplicate tuturor elementelor de acel tip dintr-o data:
<head>
<style>
h1 { color: blue; font-size: 36px; }
p { color: red; font-family: Arial; }
</style>
</head>
Ambele metode sunt corecte la nivel gimnazial.
🖼 Formatare paragraf si fundal pagina
Pe langa formatarea textului, programa cere sa stii sa formatezi paragraful (aliniere, spatiere) si fundalul paginii (culoare de fundal).
| Proprietate CSS | Ce face | Exemplu valoare |
|---|---|---|
text-align | Alinierea textului in paragraf | left, center, right, justify |
line-height | Spatiul intre randuri | 1.5, 24px |
margin | Spatiu exterior (in jurul elementului) | 10px, 0 auto |
padding | Spatiu interior (intre text si margine) | 8px, 10px 20px |
background-color | Culoarea de fundal a elementului sau paginii | yellow, #f0f0f0, rgb(255,200,0) |
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Formatare pagina</title> <!-- Bloc de stiluri pentru intreaga pagina --> <style> body { background-color: #e8f4f8; font-family: Arial, sans-serif; } h1 { color: #1a237e; text-align: center; } p { color: #333333; font-size: 16px; line-height: 1.6; text-align: justify; margin: 10px 0; padding: 8px; background-color: #ffffff; } </style> </head> <body> <h1>Site-ul meu cu formatare</h1> <p>Primul paragraf — fundal alb, text gri inchis, spatiere 1.6 intre randuri.</p> <p>Al doilea paragraf primeste aceleasi stiluri automat, fara sa repet style= pe fiecare tag.</p> </body> </html>
background-color pe <body> este ca si cum ai zugravit peretii intregii camere (pagina) intr-o culoare. background-color pe un <p> este ca un tablou pe perete — are propriul sau fundal distinct. padding este spatiul de aer intre text si marginea casetei, iar margin este distanta dintre casete.
| Mod | Exemplu | Observatie |
|---|---|---|
| Nume englezesc | red, blue, yellow | Simplu, 140 culori predefinite |
| Hexazecimal (#RRGGBB) | #ff0000 = rosu, #0000ff = albastru | Precis, cel mai des intalnit in practica |
| RGB | rgb(255, 0, 0) = rosu | Valori 0-255 pentru Rosu, Verde, Albastru |