📖 Ce este HTML?
HTML (HyperText Markup Language) este limbajul de bază pentru crearea paginilor web. Acesta spune browser-ului cum să afișeze conținutul unei pagini.
Important: HTML nu este un limbaj de programare, ci un limbaj de marcaj (markup). El structurează conținutul paginilor web.
🏗️ Structura de bază a unui document HTML
Toate documentele HTML au o structură de bază care include următoarele elemente:
<html> <!– Elementul rădăcină –>
<head> <!– Capul documentului (informații pentru browser) –>
<title>Titlul paginii</title>
</head>
<body> <!– Corpul documentului (conținut vizibil) –>
Conținutul paginii
</body>
</html>
🔤 Taguri HTML de bază
1. <html>
Tag-ul principal care conține întreaga pagină. Toate celelalte elemente se află în interiorul acestuia.
2. <head>
Conține informații despre pagină (metadate). Nu este vizibil în browser, dar este important pentru că conține titlul, legături către fișiere CSS, etc.
3. <title>
Definește titlul paginii care apare în bara de titlu a browser-ului și în rezultatele motoarelor de căutare.
4. <body>
Conține tot conținutul vizibil al paginii: text, imagini, tabele, etc.
5. <p> – Paragraf
Folosit pentru a crea paragrafe de text.
<p>Acesta este un alt paragraf.</p>
6. <h1>, <h2>, <h3>…
Folosite pentru titluri și subtitluri. <h1> este cel mai important, <h6> cel mai puțin important.
<h2>Subtitlu</h2>
<h3>Sub-subtitlu</h3>
🎨 Atribute pentru body (învechite, dar utile pentru înțelegere)
Atributul bgcolor
Definește culoarea de fundal a paginii (este învechit, în HTML modern se folosește CSS).
<h1>Pagina mea</h1>
<p>Acesta este un exemplu.</p>
</body>
Atributul background
Adaugă o imagine de fundal (este învechit, în HTML modern se folosește CSS).
<h1>Pagina mea</h1>
<p>Acesta este un exemplu.</p>
</body>
💻 Exemple practice
Exemplul 1: Pagină simplă HTML
<html>
<head>
<title>Prima mea pagină HTML</title>
</head>
<body>
<h1>Bun venit!</h1>
<p>Aceasta este prima mea pagină HTML.</p>
<p>HTML este foarte distractiv!</p>
</body>
</html>
Exemplul 2: Pagină cu fundal colorat
<html>
<head>
<title>Pagina mea colorată</title>
</head>
<body bgcolor=”lightgreen”>
<h1>Școala mea</h1>
<p>Numele meu este [numele tău].</p>
<p>Sunt elev în clasa a VIII-a.</p>
<p>Îmi place materia TIC!</p>
</body>
</html>
📝 Exercițiu pentru acasă
Creează o pagină HTML despre tine:
- Folosește un titlu principal <h1> cu numele tău
- Adaugă cel puțin 3 paragrafe <p> care descriu:
- Ce îți place să faci în timpul liber
- Materia ta preferată
- Ce ai învățat astăzi la TIC
- Experimentează cu diferite culori de fundal (bgcolor)
- Salvează fișierul cu extensia .html (ex: pagina_mea.html)
Sfat practic
Pentru a vedea cum funcționează codul HTML, salvează fișierul cu extensia .html (ex: pagina.html) și deschide-l dublu-click într-un browser (Chrome, Firefox, Edge).
🌟 Importanța HTML
- HTML este scheletul oricărei pagini web
- Toate site-urile pe care le vizitezi folosesc HTML
- Este primul pas în învățarea programării web
- Împreună cu CSS și JavaScript, formează baza web-ului modern
- Îți permite să îți creezi propriul site web personal