Invatare Atomica

Ce este HTML?

Progres lectie:
0%
🎯

Obiectivul lectiei

Dupa aceasta lectie, vei intelege ce este HTML, cum functioneaza tag-urile si vei crea prima ta pagina web!

Dupa aceasta lectie vei putea:

  • Sa implementezi HTML (hypertext markup language)
  • Sa implementezi tag-uri HTML
  • Sa identifici si eviti greselile frecvente la scrierea tag-urilor HTML

Incearca singur!

🎯 INCEARCA

Fara instructiuni - vezi cat poti singur!

Provocarea ta (5 minute):

1. Copiaza urmatorul cod (structura HTML5 completa):

<!DOCTYPE html> <html> <head> <title>Prima mea pagina</title> </head> <body> <h1>Salut!</h1> </body> </html>
🚀 Testeaza pe OneCompiler

2. Lipeste codul in OneCompiler si apasa Run. Observa titlul afisat in tab-ul browserului (din <title>) si textul mare din pagina (din <h1>).

3. Modifica textul din <h1> (de exemplu scrie propriul tau nume). Apasa Run din nou si urmareste schimbarea.

4. Stergand linia <!DOCTYPE html> se strica ceva vizibil? Adauga-o inapoi — este obligatorie in HTML5 si trebuie sa fie intotdeauna prima linie din fisier.

💾 Vrei sa salvezi local?

Poti folosi si Notepad: File > Save As, alege "All Files (*.*)" si salveaza ca prima-pagina.html

💡 Nu stii cum sa salvezi ca .html? Click aici

In Notepad: File > Save As

La "Save as type" alege "All Files (*.*)"

Scrie numele cu extensia: prima-pagina.html

1

HTML (HyperText Markup Language)

HTML (HyperText Markup Language)
HTML este limbajul folosit pentru a crea structura paginilor web. Nu este un limbaj de programare - este un limbaj de marcare (markup).
Analogie: Daca o pagina web ar fi o casa, HTML ar fi scheletul (structura din beton si caramizi). CSS ar fi vopseaua si decoratiunile (culori, dimensiuni, aspect). JavaScript ar fi usile si ferestrele care se deschid la apasarea unui buton — adica tot ce reactioneaza la actiunile tale.
2

Tag-uri HTML

Tag-uri HTML

HTML foloseste tag-uri pentru a marca continutul. Un tag arata asa:

<numetag>continut</numetag>
  • <tag> = tag de deschidere
  • </tag> = tag de inchidere (cu /)
  • Textul dintre ele = continutul
3

⚠ Greseli frecvente

⚠ Greseli frecvente

Uiti sa inchizi tag-ul: <h1>Text ❌ vs <h1>Text</h1> ✅

Inversi ordinea: <b><i>text</b></i> ❌ vs <b><i>text</i></b> ✅

Extensia gresita: Salvezi ca .txt in loc de .html

Exercitii practice

Exercitiul 1 (Nivel minim) - Identifica erorile

Urmatoarele bucati de cod HTML contin greseli frecvente. Gaseste si corecteaza fiecare greseala:

  1. Ce greseala contine: <h1>Buna ziua<h1> ?
  2. Ce greseala contine: <b><i>text</b></i> ?
  3. Ai salvat un fisier HTML cu numele pagina.txt. Browserul nu il deschide ca pagina web. Ce trebuie schimbat?

Raspunde numerotat: 1. ... 2. ... 3. ...

Vezi rezolvarea

Rezolvare:

  1. Tagul de inchidere e gresit: <h1>Buna ziua<h1> repeta <h1> in loc sa foloseasca </h1> (cu slash). Corect: <h1>Buna ziua</h1>.
  2. Ordinea de inchidere e inversata: <b><i>text</b></i>. Tagurile se inchid in ordine inversa fata de deschidere (ultimul deschis se inchide primul). Corect: <b><i>text</i></b>.
  3. Extensia fisierului e gresita: trebuie redenumit din pagina.txt in pagina.html, altfel browserul il trateaza ca fisier text simplu, nu ca pagina web.

Exercitiul 2 (Nivel standard) - Prima pagina web

Cerinta: Creeaza de la zero o pagina HTML cu urmatoarea structura:

Ce trebuie sa contina pagina:

  • Declaratia DOCTYPE la inceput
  • Tag-urile <html>, <head> si <body>
  • Un titlu in <head>: "Pagina mea"
  • Un heading <h1> in body cu textul: "Buna! Sunt elev la cls. a VII-a."
  • Un paragraf <p> cu o propozitie la alegere despre tine

Exemplu output asteptat (in browser): un titlu mare urmat de un paragraf de text.

Indicii:

  • Incepe intotdeauna cu <!DOCTYPE html>
  • Fiecare tag deschis trebuie inchis: <p>...</p>
  • Testeaza in browser sau pe OneCompiler
Vezi rezolvarea

Rezolvare completa (structura invatata la lectie):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Pagina mea</title>
  5. </head>
  6. <body>
  7. <h1>Buna! Sunt elev la cls. a VII-a.</h1>
  8. <p>Imi place informatica si joc fotbal in timpul liber.</p>
  9. </body>
  10. </html>

Fiecare tag deschis (<html>, <head>, <body>) trebuie inchis o singura data, in ordine inversa fata de deschidere.

Exercitiul 3 (Nivel performanta) - Explica unui coleg

Cerinta: Scrie o explicatie de 3-5 propozitii pentru un coleg care nu a vazut niciodata HTML. Foloseste analogia "casa" din lectie si raspunde la intrebarile de mai jos:

Ghid de redactare:

  • Ce inseamna abrevierea HTML si ce face el?
  • Cum arata un tag (deschidere si inchidere) — da un exemplu concret
  • Ce se intampla daca uiti sa inchizi un tag?
  • De ce fisierul trebuie salvat cu extensia .html si nu .txt?

Cuvinte cheie de folosit: HTML, tag, deschidere, inchidere, browser, structura

Vezi rezolvarea

Schita de rezolvare (nu e textul gata scris, doar structura pe care o completezi singur):

  1. Propozitia 1: ce inseamna HTML (HyperText Markup Language) si ce face - e scheletul paginii, ca structura unei case.
  2. Propozitia 2: cum arata un tag, cu un exemplu concret, de exemplu <p>text</p> - are deschidere si inchidere.
  3. Propozitia 3: ce pateste pagina daca uiti sa inchizi un tag - browserul poate interpreta gresit structura.
  4. Propozitia 4: de ce fisierul trebuie salvat ca .html si nu .txt - doar asa browserul stie sa citeasca tagurile ca structura, nu ca text simplu.

Criterii de evaluare: foloseste toate cele 5 cuvinte cheie cerute, pastreaza analogia casei din lectie, are 3-5 propozitii clare, exemplul de tag e scris corect (deschidere si inchidere).

Ce ai invatat astazi

  • Ai invatat HTML (hypertext markup language)
  • Acum stii tag-uri HTML
  • Ai descoperit ⚠ greseli frecvente

Vrei mai mult?

Provocare: Deschide orice site cunoscut (al scolii tale, un site de stiri, Wikipedia), click-dreapta pe pagina si alege "Vizualizare sursa pagina" (sau apasa Ctrl+U). Cauta in primele 20 de linii: tag-ul DOCTYPE, tag-ul title si un tag pe care nu l-ai invatat inca azi. Noteaza-ti numele acelui tag necunoscut - il vei intalni in lectiile urmatoare.

De ce: ai vazut ca daca uiti sa inchizi un tag HTML, browserul tot deschide pagina (poate cu forma stricata), pe cand un program Python cu o greseala de sintaxa refuza sa porneasca deloc. De ce crezi ca HTML tolereaza greseli, in timp ce un limbaj de programare nu?

Unde se foloseste: orice pagina pe care o vizitezi vreodata - de la banca ta pana la un joc online - incepe cu exact acelasi <!DOCTYPE html> pe care l-ai scris azi. Codul sursa e mereu la un click distanta; in lectia urmatoare vei invata sa organizezi acel continut cu titluri si paragrafe, la fel cum face orice site real.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →