Lecția 1 – Bazele HTML

by

📌 Ce este HTML?

HTML (HyperText Markup Language) este limbajul standard folosit pentru a crea structura paginilor web.
HTML nu este limbaj de programare, ci limbaj de marcare (markup language).

➡️ Spune browserului:

  • ce este titlu
  • ce este paragraf
  • ce este imagine
  • ce este link
  • ce este buton etc.

📄 Structura de bază a unui document HTML

<!DOCTYPE html>
<html>
<head>
    <title>Titlul paginii</title>
</head>
<body>
    Continutul paginii
</body>
</html>

🔍 Explicații:

  • <!DOCTYPE html> → tipul documentului (HTML5)
  • <html> → rădăcina documentului
  • <head> → informații despre pagină (nu apar vizual)
  • <title> → titlul din tab-ul browserului
  • <body> → conținutul vizibil al paginii

🏷 Etichete (tags), elemente și atribute

✅ Etichetă (tag)
<p>
</p>

✅ Element HTML
<p>Salut lume!</p>


→ tag + conținut + tag de închidere

✅ Atribut
<p class="text">Salut</p>


Structură:

<tag atribut="valoare">continut</tag>

🧩 Exemple de etichete de bază

<h1>Titlu mare</h1>
<h2>Subtitlu</h2>
<p>Paragraf</p>
<br>  <!-- linie nouă -->
<hr>  <!-- linie orizontală -->

<a href="https://google.com">Link</a>

<img src="imagine.jpg" alt="descriere imagine">

🧠 Reținut important

  • HTML este structură, nu design
  • CSS = design
  • JS = logică

✏️ Exerciții practice

🟢 Exercițiul 1 – Structură minimă

Creează un fișier index.html cu:

  • titlu pagină: „Prima mea pagină”
  • un titlu mare
  • un paragraf

👉 Model:

<!DOCTYPE html>
<html>
<head>
    <title>Prima mea pagină</title>
</head>
<body>
    <h1>Bine ați venit!</h1>
    <p>Aceasta este prima mea pagină HTML.</p>
</body>
</html>

🟡 Exercițiul 2 – Profil personal

Creează o pagină cu:

  • nume (h1)
  • școală (p)
  • hobby (p)
  • un link către un site preferat
  • o imagine