LEVEL 1 – Începător HTML
Creează un fișier numit
index.html.
▶ Hint
💡 Hint “index.html”:
1. Alege un folder pe calculator (ex: Desktop sau Documente).
2. În folder: click dreapta → New → Text Document.
3. Numește fișierul: index.html
(șterge tot ce scrie, inclusiv .txt).
4. Dacă apare un mesaj de avertizare despre schimbarea extensiei, apasă “Yes/Da”.
După asta, iconița fișierului ar trebui să se schimbe (de obicei apare iconul de browser).
Deschide fișierul
index.html într-un editor de text (ex: Notepad).
▶ Hint
💡 Hint “deschide fișierul”:
1. Găsește fișierul index.html în folder.
2. Click dreapta pe index.html → Open with / Deschidere cu → Notepad (sau alt editor simplu).
3. Editorul trebuie să arate o pagină goală unde poți scrie cod.
IMPORTANT:
NU folosi Word. Folosește Notepad, Notepad++, VS Code sau alt editor de text simplu.
Scrie structura de bază HTML:
<html>,
<head>,
<body>, apoi salvează.
▶ Hint
💡 Hint “structura de bază”:
1. În Notepad (în fișierul index.html), șterge orice text este acolo.
2. Copiază EXACT textul de mai jos:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
3. Apasă CTRL+S (sau File → Save).
4. Ai acum o pagină HTML corectă, dar încă goală.
Adaugă titlul paginii cu
<title> în interiorul lui
<head>.
▶ Hint
💡 Hint “<title>”:
1. În fișierul index.html, găsește partea:
<head>
</head>
2. Scrie titlul ÎNTRE <head> și </head>:
<head>
<title>Prima mea pagină HTML</title>
</head>
3. Salvează fișierul (CTRL+S).
4. Când vei deschide fișierul în browser, textul din <title> apare în tab-ul de sus al ferestrei.
Deschide fișierul
index.html în browser și verifică titlul paginii.
▶ Hint
💡 Hint “deschide în browser”:
1. Găsește fișierul index.html în folder.
2. Dublu click pe el.
→ Ar trebui să se deschidă în browser (Chrome, Edge, etc.).
3. Uită-te sus, în tab: ar trebui să vezi textul “Prima mea pagină HTML” (sau ce ai scris în <title>).
Scrie un titlu mare în pagină folosind
<h1> în interiorul lui
<body>.
▶ Hint
💡 Hint “<h1>”:
1. În fișier, caută secțiunea:
<body>
</body>
2. Între aceste două linii, scrie:
<body>
<h1>Bine ai venit în lumea HTML!</h1>
</body>
3. Salvează (CTRL+S) și reîncarcă pagina în browser (apăsând F5).
4. Ar trebui să vezi un titlu mare pe pagină.
Adaugă două paragrafe de text folosind
<p>.
▶ Hint
💡 Hint “paragrafe <p>”:
1. Sub titlul <h1>, adaugă două paragrafe:
<body>
<h1>Bine ai venit în lumea HTML!</h1>
<p>Acesta este primul meu paragraf în HTML.</p>
<p>Acesta este al doilea paragraf.</p>
</body>
2. Salvează și reîncarcă pagina (F5 în browser).
3. Vei vedea cele două paragrafe unul sub altul.
Folosește
<br> pentru a trece la rând nou în interiorul unui paragraf.
▶ Hint
💡 Hint “<br> pentru rând nou”:
1. Alege unul dintre paragrafe.
2. Adaugă un <br> în interiorul lui, unde vrei să treacă la rând nou.
Exemplu:
<p>
Aceasta este o propoziție.<br>
Aceasta este pe rândul următor.
</p>
3. Salvează și reîncarcă pagina. Vei vedea că textul după <br> apare pe rând nou.
Adaugă o linie orizontală între două paragrafe folosind
<hr>.
▶ Hint
💡 Hint “<hr> linie orizontală”:
1. Găsește cele două paragrafe.
2. Adaugă o linie <hr> între ele:
<p>Acesta este primul paragraf.</p>
<hr>
<p>Acesta este al doilea paragraf.</p>
3. Salvează și reîncarcă pagina. Vei vedea o linie orizontală între paragrafe.
LEVEL 2 – Formatarea textului
Scrie un text cuvinte îngroșate folosind
<b> sau
<strong>.
▶ Hint
💡 Hint “text îngroșat”:
1. Sub paragrafele deja create, adaugă:
<p>
Acesta este un text <b>îngroșat</b> în pagină.
</p>
2. Poți folosi și <strong> în loc de <b>:
<p>
Acesta este un text <strong>important</strong>.
</p>
3. Diferența principală: <strong> are și sens de “important” pentru cititoare de ecran.
Scrie un text înclinat folosind
<i> sau
<em>.
▶ Hint
💡 Hint “italic”:
1. Adaugă un paragraf nou:
<p>
Acesta este un text <i>scris cu litere înclinate</i>.
</p>
2. Sau:
<p>
Acesta este un text <em>accentuat</em>.
</p>
3. <i> = italic, <em> = accent semantic (important).
Scrie un text subliniat folosind
<u>.
▶ Hint
💡 Hint “subliniat”:
1. Adaugă:
<p>
Acesta este un cuvânt <u>subliniat</u> în propoziție.
</p>
2. Salvează și reîncarcă. Cuvântul din <u> va avea linie dedesubt.
Combină bold + italic + subliniere în aceeași propoziție.
▶ Hint
💡 Hint “combinare formatare”:
1. Poți pune tag-uri unul în altul:
<p>
Acesta este un cuvânt <strong><i><u>foarte important</u></i></strong> în text.
</p>
2. Ordinea tag-urilor la deschidere și închidere trebuie să fie corectă (ca niște paranteze).
Folosește
<small> pentru text mic și
<mark> pentru evidențiere.
▶ Hint
💡 Hint “small + mark”:
1. Exemplu cu small:
<p>
Acesta este un text normal și <small>acesta este un text mai mic</small>.
</p>
2. Exemplu cu mark:
<p>
Acesta este un text cu <mark>cuvinte evidențiate</mark>.
</p>
3. <mark> apare de obicei cu fundal galben (ca un marker).
Scrie o formulă cu
<sup> și
<sub> (ex: x², H₂O).
▶ Hint
💡 Hint “sup + sub”:
1. Exemplu pentru x la pătrat:
<p>
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
</p>
2. Exemplu pentru H2O:
<p>
Formula apei este H<sub>2</sub>O.
</p>
3. <sup> = exponent (sus), <sub> = indice (jos).
LEVEL 3 – Imagini
Salvează o imagine în același folder cu
index.html (ex: poza1.jpg).
▶ Hint
💡 Hint “imagine în același folder”:
1. Descarcă o imagine de pe internet (click dreapta → Save image as).
2. Salveaz-o în ACELAȘI folder unde este și index.html.
3. Dă-i un nume simplu, fără spații (ex: poza1.jpg).
Afișează imaginea în pagină folosind
<img> și atributul
src.
▶ Hint
💡 Hint “<img src>”:
1. În interiorul <body>, adaugă:
<img src="poza1.jpg">
2. Numele din src trebuie să fie EXACT numele fișierului (inclusiv .jpg / .png).
3. Salvează și reîncarcă pagina. Ar trebui să vezi imaginea.
Setează lățimea imaginii la 300px folosind atributul
width.
▶ Hint
💡 Hint “width”:
1. Modifică tag-ul imaginii:
<img src="poza1.jpg" width="300">
2. Salvează și reîncarcă. Imaginea va avea lățimea de 300 pixeli (înălțimea se ajustează automat).
Adaugă atributul
alt cu o descriere a imaginii.
▶ Hint
💡 Hint “alt (text alternativ)”:
1. Modifică tag-ul:
<img src="poza1.jpg" width="300" alt="O imagine cu peisaj de munte">
2. Textul “alt” este folosit dacă poza nu se încarcă sau pentru nevăzători.
Adaugă o margine la imagine folosind atributul
style.
▶ Hint
💡 Hint “border cu style”:
1. Modifică tag-ul imaginii așa:
<img src="poza1.jpg" width="300" alt="Peisaj" style="border:2px solid black;">
2. style="border:2px solid black;" înseamnă:
- grosime: 2px
- linie continuă (solid)
- culoare: negru (black)
Creează o galerie cu 3 imagini una sub alta.
▶ Hint
💡 Hint “galerie verticală”:
1. Salvează 3 imagini în folder (poza1.jpg, poza2.jpg, poza3.jpg).
2. În <body> scrie:
<h2>Galeria mea de imagini</h2>
<img src="poza1.jpg" width="250" alt="Imagine 1">
<br>
<img src="poza2.jpg" width="250" alt="Imagine 2">
<br>
<img src="poza3.jpg" width="250" alt="Imagine 3">
3. <br> forțează trecerea la rând nou.
Creează o galerie cu 3 imagini una lângă alta (în același rând).
▶ Hint
💡 Hint “galerie orizontală”:
1. Pune imaginile fără <br> între ele:
<h2>Galerie în linie</h2>
<img src="poza1.jpg" width="150" alt="1">
<img src="poza2.jpg" width="150" alt="2">
<img src="poza3.jpg" width="150" alt="3">
2. Atâta timp cât mai este loc pe rând, imaginile vor sta una lângă alta.
LEVEL 4 – Link-uri
Creează un link către Google folosind
<a href>.
▶ Hint
💡 Hint “link simplu”:
1. În <body>, adaugă:
<p>
Mergi la <a href="https://www.google.com">Google</a>.
</p>
2. “href” este adresa unde duce linkul.
3. Când dai click pe “Google”, se deschide site-ul.
Fă linkul către Google să se deschidă într-un tab nou folosind
target="_blank".
▶ Hint
💡 Hint “deschide în tab nou”:
1. Modifică linkul așa:
<a href="https://www.google.com" target="_blank">Google</a>
2. target="_blank" spune browserului să deschidă linkul într-un tab nou.
Transformă o imagine într-un link (click pe imagine → deschide un site).
▶ Hint
💡 Hint “imagine ca link”:
1. Pune <img> ÎNĂUNTRUL lui <a>:
<a href="https://www.google.com" target="_blank">
<img src="poza1.jpg" width="200" alt="Google">
</a>
2. Acum, când dai click pe imagine, se deschide adresa din href.
Creează un buton care este de fapt un link (stilizat cu
style).
▶ Hint
💡 Hint “buton-link”:
1. Creează un link și adaugă stil:
<a href="https://www.example.com" target="_blank"
style="background:#4caf50; color:white; padding:10px 15px; text-decoration:none; border-radius:5px;">
Apasă aici
</a>
2. Arată ca un buton, dar este link normal.
Creează un link intern într-o pagină (meniu care sare la o secțiune din pagină).
▶ Hint
💡 Hint “link intern (#)”:
1. Creează o secțiune cu un id:
<h2 id="despre">Despre mine</h2>
<p>Aici scriu câteva lucruri despre mine.</p>
2. Creează un link către această secțiune:
<a href="#despre">Mergi la secțiunea "Despre mine"</a>
3. Când dai click pe link, pagina se derulează până la elementul cu id="despre".
LEVEL 5 – Liste
Creează o listă neordonată (bullets) cu 3 hobby-uri ale tale.
▶ Hint
💡 Hint “listă neordonată (ul)”:
1. Folosește <ul> (unordered list) și <li> (list item):
<h2>Hobby-urile mele</h2>
<ul>
<li>Citit</li>
<li>Fotbal</li>
<li>Desen</li>
</ul>
2. Pe pagină vei vedea puncte (●) în fața fiecărui element.
Creează o listă ordonată (numerotată) cu 5 materii preferate.
▶ Hint
💡 Hint “listă ordonată (ol)”:
1. Folosește <ol> (ordered list):
<h2>Materiile mele preferate</h2>
<ol>
<li>Informatica</li>
<li>Engleză</li>
<li>Matematică</li>
<li>Istorie</li>
<li>Biologie</li>
</ol>
2. Pe pagină vei vedea 1., 2., 3. etc.
Creează o listă în listă (listă imbricată).
▶ Hint
💡 Hint “listă în listă”:
1. Pune un <ul> în interiorul unui <li>:
<h2>Meniul meu</h2>
<ul>
<li>Mâncăruri
<ul>
<li>Pizza</li>
<li>Paste</li>
</ul>
</li>
<li>Băuturi
<ul>
<li>Apă</li>
<li>Suc</li>
</ul>
</li>
</ul>
2. Vei vedea subliste indentate.
LEVEL 6 – Tabele
Creează un tabel simplu cu 2 coloane și 2 rânduri.
▶ Hint
💡 Hint “tabel simplu”:
1. Folosește <table>, <tr> (rând), <td> (celulă):
<h2>Tabel simplu</h2>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
2. border="1" desenează liniile tabelului.
Creează un orar (minim 5 zile, câteva ore) într-un tabel.
▶ Hint
💡 Hint “orar”:
1. Exemplu simplu:
<h2>Orarul meu</h2>
<table border="1">
<tr>
<th>Ziua</th>
<th>Ora 1</th>
<th>Ora 2</th>
</tr>
<tr>
<td>Luni</td>
<td>Matematică</td>
<td>Română</td>
</tr>
<tr>
<td>Marți</td>
<td>Informatica</td>
<td>Engleză</td>
</tr>
<!-- adaugă mai multe rânduri pentru restul zilelor -->
</table>
2. <th> = “table header”, de obicei textul e îngroșat.
Folosește
colspan pentru a uni două celule pe orizontală.
▶ Hint
💡 Hint “colspan”:
1. Exemplu (pauză care ocupă 2 coloane):
<tr>
<td>Miercuri</td>
<td colspan="2">Pauză</td>
</tr>
2. colspan="2" spune că această celulă ocupă spațiul a 2 coloane.
Folosește
rowspan pentru a uni două celule pe verticală.
▶ Hint
💡 Hint “rowspan”:
1. Exemplu:
<table border="1">
<tr>
<td rowspan="2">Sport</td>
<td>Luni</td>
</tr>
<tr>
<td>Marți</td>
</tr>
</table>
2. Celula “Sport” se întinde pe 2 rânduri.
LEVEL 7 – Formulare
Creează un formular simplu cu nume și un buton de trimitere.
▶ Hint
💡 Hint “formular simplu”:
1. Exemplu:
<h2>Formular simplu</h2>
<form>
Nume: <input type="text" name="nume">
<br><br>
<input type="submit" value="Trimite">
</form>
2. Deocamdată formularul nu trimite nicăieri, dar este corect HTML.
Adaugă câmpuri pentru vârstă (
type="number") și parolă (
type="password").
▶ Hint
💡 Hint “number + password”:
1. Poți extinde formularul:
<form>
Nume: <input type="text" name="nume"><br><br>
Vârstă: <input type="number" name="varsta"><br><br>
Parolă: <input type="password" name="parola"><br><br>
<input type="submit" value="Trimite">
</form>
2. type="password" ascunde caracterele pe ecran.
Adaugă butoane radio (radio buttons) pentru a alege genul (M/F).
▶ Hint
💡 Hint “radio buttons”:
1. Butoanele radio cu același “name” sunt legate între ele:
<p>
Gen:<br>
<input type="radio" name="gen" value="M"> Băiat<br>
<input type="radio" name="gen" value="F"> Fată
</p>
2. Poți selecta doar una dintre opțiuni deoarece au același name="gen".
Adaugă un checkbox pentru “Sunt de acord cu termenii”.
▶ Hint
💡 Hint “checkbox”:
1. Exemplu:
<p>
<input type="checkbox" name="acord"> Sunt de acord cu termenii.</input>
</p>
2. Poți bifa sau debifa independent de restul câmpurilor.
Adaugă un câmp
<textarea> pentru un mesaj mai lung.
▶ Hint
💡 Hint “textarea”:
1. Exemplu:
<p>
Mesaj:<br>
<textarea name="mesaj" rows="4" cols="40"></textarea>
</p>
2. rows = câte rânduri, cols = aproximativ câte caractere pe rând.
LEVEL 8 – Structură, secțiuni și div-uri
Creează o structură de pagină cu
<header>,
<main>,
<footer>.
▶ Hint
💡 Hint “header/main/footer”:
1. Exemplu simplu:
<header>
<h1>Site-ul meu</h1>
</header>
<main>
<p>Aici este conținutul principal al paginii.</p>
</main>
<footer>
<p>© 2025 Numele meu</p>
</footer>
2. Aceste tag-uri ajută la structurarea clară a paginii.
Creează 3
<div>-uri colorate diferit (ex: roșu, verde, albastru) folosind atributul
style.
▶ Hint
💡 Hint “3 div-uri colorate”:
1. Exemplu:
<div style="background:red; color:white; padding:10px; margin:5px;">
Acesta este un div roșu.
</div>
<div style="background:green; color:white; padding:10px; margin:5px;">
Acesta este un div verde.
</div>
<div style="background:blue; color:white; padding:10px; margin:5px;">
Acesta este un div albastru.
</div>
2. padding = spațiu interior, margin = spațiu exterior.
Creează un “card de profil” cu nume, poză și o scurtă descriere, încadrat într-un
<div>.
▶ Hint
💡 Hint “card de profil”:
1. Exemplu:
<div style="border:1px solid #ccc; padding:10px; width:250px; border-radius:8px;">
<img src="poza1.jpg" width="100" alt="Profil">
<h3>Numele meu</h3>
<p>Sunt elev în clasa a VIII-a și îmi place informatica.</p>
</div>
2. Poți schimba textul și poza ***** vrei.
Creează un layout cu două coloane: stânga (meniul), dreapta (conținutul).
▶ Hint
💡 Hint “două coloane simple”:
1. Exemplu cu <div> și style:
<div style="width:30%; float:left; background:#333; color:white; padding:10px;">
<h3>Meniu</h3>
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Contact</li>
</ul>
</div>
<div style="width:65%; float:right; background:#444; color:white; padding:10px;">
<h3>Conținut</h3>
<p>Aici este textul principal al paginii.</p>
</div>
2. float:left și float:right pun div-urile unul lângă altul.
3. Asigură-te că totalul lățimilor (width) nu depășește 100%.
LEVEL 9 – Mini-proiecte (HTML complet)
Mini-proiect 1: Creează o pagină “Despre mine” cu titlu, poză, câteva paragrafe și o listă cu hobby-uri.
▶ Hint
💡 Hint “Despre mine” – structură propusă:
1. Pornește de la structura de bază:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Despre mine</title>
</head>
<body>
<h1>Despre mine</h1>
<img src="poza1.jpg" width="200" alt="Poza mea">
<p>Mă numesc ... și sunt elev în clasa a VIII-a.</p>
<p>Îmi place să ... și să ...</p>
<h2>Hobby-urile mele</h2>
<ul>
<li>Hobby 1</li>
<li>Hobby 2</li>
<li>Hobby 3</li>
</ul>
</body>
</html>
2. Adaptează textul și hobby-urile la tine.
3. Asigură-te că poza este în același folder cu index.html.
Mini-proiect 2: Creează o pagină cu rețeta ta preferată (titlu, listă de ingrediente, pași).
▶ Hint
💡 Hint “Rețeta mea”:
1. Structură propusă:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rețeta mea preferată</title>
</head>
<body>
<h1>Rețeta mea preferată: Clătite</h1>
<h2>Ingrediente</h2>
<ul>
<li>2 ouă</li>
<li>300 ml lapte</li>
<li>200 g făină</li>
<li>1 plic zahăr vanilat</li>
</ul>
<h2>Mod de preparare</h2>
<ol>
<li>Amestecă ouăle cu laptele.</li>
<li>Adaugă făina și zahărul vanilat.</li>
<li>Prăjește clătitele într-o tigaie încinsă.</li>
</ol>
</body>
</html>
2. Poți schimba titlul și ingredientele pentru rețeta ta preferată.
Mini-proiect 3: Creează o pagină de prezentare pentru o firmă imaginară (nume, logo/imagine, servicii, date de contact).
▶ Hint
💡 Hint “Firma mea”:
1. Exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Firma mea</title>
</head>
<body>
<header>
<h1>TechKids SRL</h1>
<img src="logo.png" width="120" alt="Logo firma">
</header>
<main>
<h2>Despre noi</h2>
<p>Suntem o firmă care oferă cursuri de programare pentru copii.</p>
<h2>Serviciile noastre</h2>
<ul>
<li>Cursuri de HTML</li>
<li>Cursuri de Python</li>
<li>Ateliere de robotică</li>
</ul>
<h2>Contact</h2>
<p>Email:
[email protected]</p>
<p>Telefon: 0712 345 678</p>
</main>
<footer>
<p>© 2025 TechKids SRL</p>
</footer>
</body>
</html>
2. Poți inventa orice firmă: pizzerie, magazin online, club sportiv etc.
Mini-proiect 4: Creează un CV simplu în HTML (date personale, educație, competențe).
▶ Hint
💡 Hint “CV în HTML”:
1. Structură propusă:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CV - Numele meu</title>
</head>
<body>
<h1>CV - Numele meu</h1>
<h2>Date personale</h2>
<p>Nume: ...</p>
<p>Adresă: ...</p>
<p>Email: ...</p>
<h2>Educație</h2>
<ul>
<li>Școala Gimnazială ... , Clasa a VIII-a</li>
</ul>
<h2>Competențe</h2>
<ul>
<li>Utilizare calculator</li>
<li>HTML de bază</li>
<li>Lucru în echipă</li>
</ul>
</body>
</html>
2. Poți adăuga și alte secțiuni: hobby-uri, premii, proiecte.
Mini-proiect 5: Creează un “mini-site” cu cel puțin 3 pagini HTML legate prin link-uri de meniu.
▶ Hint
💡 Hint “mini-site cu 3 pagini”:
1. Creează 3 fișiere în același folder:
- index.html
- despre.html
- contact.html
2. În index.html, fă un meniu:
<h1>Site-ul meu</h1>
<nav>
<a href="index.html">Acasă</a> |
<a href="despre.html">Despre</a> |
<a href="contact.html">Contact</a>
</nav>
<p>Bun venit pe site-ul meu!</p>
3. În despre.html:
<h1>Despre</h1>
<p>Aici scriu câteva informații despre mine sau despre site.</p>
<p><a href="index.html">Înapoi la acasă</a></p>
4. În contact.html:
<h1>Contact</h1>
<p>Email: ...</p>
<p><a href="index.html">Înapoi la acasă</a></p>
5. Asigură-te că toate fișierele sunt în același folder și că numele în href corespund exact cu numele fișierelor.