Lectia 1: Introducere in HTML | TIC Clasa a VII-a

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

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.

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

⚠ 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:

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

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

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

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

Ce este HTML?

Obiectivul lectiei

Dupa aceasta lectie vei putea: