Invatare Atomica

Bine ai venit in Lumea Web!

Progres lectie:
0%
🎯

Obiectivul lectiei

Folosesti internetul zilnic - dar stii cum functioneaza de fapt? Azi descoperim ce se intampla cand tastezi o adresa in browser si apesi Enter.

Dupa aceasta lectie vei putea:

  • Sa explici 🌐 Internetul = reteaua fizica
  • Sa explici 📎 web-ul = un serviciu pe Internet
  • Sa aplici 💻 browser-ul = clientul tau
  • Sa aplici 🖥 serverul = calculatorul care serveste
  • Sa aplici 🔗 URL = uniform resource locator

Incearca singur!

🎯 INCEARCA

Descopera codul din spatele web-ului!

Nu trebuie sa stii inca ce inseamna codul. Scopul e sa vezi ca fiecare pagina web este de fapt un simplu fisier text!

Misiunea ta: Priveste "sub capota" web-ului
1
Deschide browser-ul (Chrome, Edge sau Firefox) si acceseaza site-ul google.ro
2
Apasa Ctrl + U pe tastatura. Se va deschide un tab nou cu codul sursa al paginii. Acesta este codul HTML pe care browser-ul il transforma in ce vezi pe ecran!
3
Gaseste tag-ul <title> in codul sursa (foloseste Ctrl + F si cauta "title"). Noteaza ce text gasesti intre <title> si </title>.
4
Repeta pasii 1-3 pentru inca 2 site-uri: wikipedia.org si youtube.com. Compara codurile!
5
Acum creeaza propriul tau fisier HTML! Deschide Notepad (sau orice editor de text), copiaza codul de mai jos, salveaza fisierul ca pagina-mea.html si deschide-l in browser (dublu-click pe fisier).
<!DOCTYPE html>
<html>
  <head>
    <title>Prima mea pagina</title>
  </head>
  <body>
    <h1>Salut, lume!</h1>
    <p>Aceasta este prima mea pagina web.</p>
    <p>Ma numesc [numele tau] si invat HTML!</p>
  </body>
</html>
🔗 Deschide OneCompiler HTML (alternativa online)
Indiciu 1: Nu gasesc tag-ul <title>

Dupa ce apesi Ctrl+U si se deschide codul sursa, apasa Ctrl+F (Find/Gaseste). In casuta de cautare, scrie <title> si apasa Enter. Browser-ul va evidentia automat unde se gaseste acest tag. Textul dintre <title> si </title> este titlul paginii (cel care apare in tab-ul browser-ului).

Indiciu 2: Cum salvez fisierul ca .html?

In Notepad, mergi la File > Save As. In campul "File name" scrie: pagina-mea.html. Important: la "Save as type" alege "All Files (*.*)" in loc de "Text Documents". Altfel fisierul se va salva ca pagina-mea.html.txt si nu va functiona.

Indiciu 3: Codul pare foarte complicat!

Nu te speria! Codul sursa al unui site real (Google, YouTube) are mii de linii. Tu nu trebuie sa intelegi totul acum. Scopul este doar sa vezi ca fiecare pagina web este un fisier text cu instructiuni HTML pe care browser-ul le transforma in ce vezi pe ecran. In lectiile urmatoare vei invata sa scrii propriul cod HTML.

🌟 BONUS: Deschide fisierul pagina-mea.html in browser, apoi apasa Ctrl+U pe el. Vei vedea exact codul pe care l-ai scris tu! Esti deja un creator web!
1

🌐 Internetul = Reteaua fizica

🌐 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.

🎨 Analogie: Reteaua de drumuri

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.

2

📎 Web-ul = Un serviciu pe Internet

📎 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).

🎨 Analogie: Masina pe drum

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).

3

💻 Browser-ul = Clientul tau

💻 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

🎨 Analogie: Clientul la restaurant

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!

4

🖥 Serverul = Calculatorul care serveste

🖥 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).

🎨 Analogie: Bucatarul la restaurant

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!

5

🔗 URL = Uniform Resource Locator

🔗 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!"

🎨 Analogie: Adresa postala

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).

6

🌎 Domeniu (Domain Name) = Numele site-ului

🌎 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
🎨 Analogie: Numarul de telefon vs. Contacte

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.

7

📄 HTML = HyperText Markup Language

📄 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>.

🎨 Analogie: Scheletul uman

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 mai tarziu) este ca pielea si hainele - da aspect si culoare. JavaScript este ca muschii - da miscare si interactivitate.

8

🏷 Tag-uri HTML de baza

🏷 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">
9

🔍 View Page Source - Priveste codul oricarui site

🔍 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

10

📝 Structura minima a unui fisier HTML

📝 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 (ă, î, ș, ț) -->
    <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>
💡 Observatie importanta

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>.

Exercitii practice

Exercitiul 1 (Nivel minim) - Creeaza o pagina HTML personala

Creeaza un fisier HTML care sa contina:

  1. Un titlu (<h1>) cu numele tau
  2. Un paragraf (<p>) in care te prezinti pe scurt (clasa, hobbies, materia preferata)
  3. Un al doilea paragraf cu 3 site-uri web preferate si de ce le-ai ales
  4. Un link (<a href="...">) catre unul din site-urile preferate

Salveaza fisierul ca despre-mine.html si deschide-l in browser.

Exercitiul 2 (Nivel standard) - Detectiv web - Exploreaza 5 site-uri

Viziteaza 5 site-uri web diferite si completeaza acest tabel (in caiet sau in Notepad):

Site URL complet Domeniu Extensie (.ro/.com/etc) Titlu (din <title>)
1. ... ... ... ... ...
2. ... ... ... ... ...
3. ... ... ... ... ...

Pentru fiecare site, foloseste Ctrl+U pentru a gasi tag-ul <title>.

Exercitiul 3 (Nivel performanta) - Analizeaza si compara

Raspunde la urmatoarele intrebari in caiet (minim 2-3 propozitii per intrebare):

  1. Compara: Deschide aceeasi pagina web in doua browsere diferite (ex: Chrome si Edge). Arata la fel? De ce crezi ca ar putea exista diferente?
  2. Explica: Un coleg spune: "Daca nu am Internet, nu pot folosi Web-ul." Are dreptate? Dar invers - daca ai Internet, poti folosi Web-ul? Dar alte servicii? Argumenteaza.
  3. Evalueaza: De ce crezi ca Tim Berners-Lee a ales sa faca Web-ul gratuit si deschis, in loc sa castige bani din el? Ce s-ar fi intamplat daca Web-ul ar fi fost un serviciu platit?

Cuvinte cheie de folosit: Internet, Web, browser, server, HTML, HTTP, URL, domeniu, protocol, tag-uri

Ce ai invatat astazi

  • Ai invatat 🌐 internetul = reteaua fizica
  • Acum stii 📎 web-ul = un serviciu pe Internet
  • Ai descoperit 💻 browser-ul = clientul tau
  • Ai explorat 🖥 serverul = calculatorul care serveste
  • Ai inteles 🔗 URL = uniform resource locator
  • Ai invatat 🌎 domeniu (domain name) = numele site-ului
  • Acum stii 📄 HTML = hypertext markup language
  • Ai descoperit 🏷 tag-uri HTML de baza
  • Ai explorat 🔍 view page source - priveste codul oricarui site
  • Ai inteles 📝 structura minima a unui fisier HTML

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →