Invatare Atomica

Vreau sa formatez text ca un web designer!

Progres lectie:
0%
🎯

Obiectivul lectiei

Ai invatat structura de baza a unei pagini HTML. Acum e timpul sa adaugi titluri, paragrafe si sa formatezi textul ca un profesionist.

Dupa aceasta lectie vei putea:

  • Sa explici ce sunt heading-urile si de ce conteaza ordinea lor
  • Sa explici tag-ul

    - paragraful

  • Sa utilizezi tag-urile de formatare a textului
  • Sa aplici tag-uri semantice vs. tag-uri vizuale
  • Sa aplici tag-uri fara continut (self-clOSing)

Incearca singur!

🎯 INCEARCA

Testeaza inainte sa inveti!

Nu trebuie sa intelegi totul acum. Doar copiaza codul, deschide-l in browser si observa ce se intampla.

Misiunea ta (10 minute):
1
Copiaza codul de mai jos si salveaza-l intr-un fisier text.html. Deschide-l in browser (dublu-click pe fisier).
<!DOCTYPE html> <html> <head> <title>Pagina mea</title> </head> <body> <h1>Titlu principal</h1> <h2>Subtitlu</h2> <h3>Sub-subtitlu</h3> <p>Acesta este un paragraf normal. Browser-ul ignora spatiile multiple si enter-urile din cod.</p> <p>Text <strong>important</strong> si text cu <em>accent</em>.</p> <hr> <p>Linia 1<br>Linia 2<br>Linia 3</p> </body> </html>
2
Observa cum arata in browser. Apoi adauga si tag-urile h4, h5, h6 (cu orice text vrei). Ce observi legat de marimea lor?
3
In paragraful cu spatii multiple, adauga si mai multe spatii si enter-uri in cod. Salveaza si reincarca pagina. Se schimba ceva in browser?
4
Adauga un paragraf nou cu text <u>subliniat</u> si text <s>taiat</s>. Cum arata?
🌟 BONUS: Incearca sa scrii in pagina simbolul < (mai mic). Ce se intampla? Cum ai putea sa-l afisezi? (Indiciu: &lt;)
▶ Blocat la pasul 2? Click aici pentru un indiciu

Adauga sub <h3> urmatoarele tag-uri:

<h4>Nivel 4</h4>

<h5>Nivel 5</h5>

<h6>Nivel 6</h6>

Vei observa ca fiecare nivel devine mai mic. h1 este cel mai mare, h6 cel mai mic.

▶ Blocat la pasul 3? Click aici

Indiferent cate spatii sau enter-uri pui in cod, browser-ul le comprima intr-un singur spatiu. Acesta este comportamentul numit "whitespace collapsing".

Pentru a forta un rand nou, trebuie sa folosesti <br>. Pentru un spatiu suplimentar, folosesti &nbsp;.

▶ Blocat la pasul 4? Click aici

Adauga acest paragraf:

<p>Text <u>subliniat</u> si text <s>taiat</s>.</p>

<u> pune o linie sub text (underline), iar <s> pune o linie prin text (strikethrough).

1

Ce sunt heading-urile si de ce conteaza ordinea lor?

Ce sunt heading-urile si de ce conteaza ordinea lor?

HTML are 6 niveluri de titluri, de la <h1> (cel mai important) la <h6> (cel mai putin important). Ele creeaza o ierarhie in pagina, exact ca un cuprins dintr-o carte.

Regula de aur: Foloseste un singur <h1> per pagina (titlul principal), apoi <h2> pentru sectiuni mari, <h3> pentru sub-sectiuni, si asa mai departe.

📖 Analogie: Cuprinsul unei carti

Gandeste-te la cuprinsul unei carti de biologie:

h1: Biologie - Clasa a VII-a
  h2: Capitolul 1: Celula
    h3: 1.1 Structura celulei
    h3: 1.2 Tipuri de celule
  h2: Capitolul 2: Tesuturile
    h3: 2.1 Tesut muscular

La fel si in HTML: h1 este titlul cartii, h2 sunt capitolele, h3 sunt sub-capitolele.

Exemplu de ierarhie corecta
<h1>Scoala Gimnaziala Nr. 1</h1> <h2>Despre noi</h2> <h3>Istoric</h3> <h3>Misiunea noastra</h3> <h2>Programul scolar</h2> <h3>Orarul claselor V-VI</h3> <h3>Orarul claselor VII-VIII</h3>
2

Tag-ul

- Paragraful

Tag-ul <p> - Paragraful

Tag-ul <p> grupeaza textul in paragrafe. Browser-ul adauga automat spatiu inainte si dupa fiecare paragraf, facand textul mai usor de citit.

Dar atentie: browser-ul ignora spatiile multiple si enter-urile din cod! Aceasta se numeste whitespace collapsing (comprimarea spatiilor albe).

Codul pe care il scrii
<p>Acesta este un paragraf cu spatii si enter-uri multiple.</p>
Ce afiseaza browser-ul
Acesta este un paragraf cu spatii si enter-uri multiple.
3

Tag-urile de formatare a textului

Tag-urile de formatare a textului

HTML ofera mai multe tag-uri pentru a schimba aspectul textului. Iata cele mai importante:

Tag Efect Exemplu cod Rezultat
<strong> Bold (important) <strong>text</strong> text
<em> Italic (accent) <em>text</em> text
<u> Subliniat <u>text</u> text
<s> Taiat (strikethrough) <s>text</s> text
Exemplu complet
<p> Aceasta lectie este <strong>foarte importanta</strong> pentru toti elevii. Trebuie sa acordati <em>atentie deosebita</em> detaliilor. </p> <p> Pretul este <s>100 lei</s> acum doar <strong>50 lei</strong>! </p> <p> Completati campul <u>Nume si Prenume</u> cu litere de tipar. </p>
4

Tag-uri semantice vs. tag-uri vizuale

Tag-uri semantice vs. tag-uri vizuale

In HTML exista doua tipuri de tag-uri pentru formatare: semantice (au semnificatie) si vizuale (doar schimba aspectul).

De exemplu, <strong> si <b> arata la fel in browser (ambele fac text bold). Dar au semnificatii diferite!

5

Tag-uri fara continut (self-closing)

Tag-uri fara continut (self-closing)

Unele tag-uri HTML nu au continut intre ele - sunt "goale". Se numesc tag-uri self-closing (se inchid singure).

Tag Ce face Observatii
<br> Forteaza un rand nou (line break) Nu creeaza un paragraf nou, doar trece pe randul urmator
<hr> Afiseaza o linie orizontala (horizontal rule) Folosita pentru a separa vizual sectiuni diferite
Exemplu
<p>Strada Florilor, Nr. 10<br> Bucuresti, Sector 1<br> Cod postal: 010001</p> <hr> <p>Aceasta este o alta sectiune, separata de linia de sus.</p>
6

De ce am nevoie de entitati HTML?

De ce am nevoie de entitati HTML?

Unele caractere au o semnificatie speciala in HTML. De exemplu, < si > sunt folosite pentru tag-uri. Daca vrei sa le afisezi ca text normal, trebuie sa folosesti entitati HTML (coduri speciale).

Entitate Afiseaza Nume Cand o folosesti
&lt; < Less than Cand vrei sa afisezi semnul "mai mic" in text
&gt; > Greater than Cand vrei sa afisezi semnul "mai mare" in text
&amp; & Ampersand Cand vrei sa afisezi & in text
&nbsp; (spatiu) Non-breaking space Spatiu suplimentar care nu e comprimat
&copy; © Copyright Simbolul drepturilor de autor
&quot; " Quotation mark Ghilimele in contexte speciale
Exemplu practic
<p>In HTML, tag-urile se scriu intre &lt; si &gt;.</p> <p>Exemplu: &lt;p&gt;text&lt;/p&gt;</p> <p>&copy; 2026 Scoala mea</p>

Browser preview

file:///pagina.html

In HTML, tag-urile se scriu intre < si >.

Exemplu: <p>text</p>

© 2026 Scoala mea

7

Pastreaza spatiile si enter-urile cu 

            

            

                
Pastreaza spatiile si enter-urile cu <pre>




Stim ca browser-ul comprima spatiile. Dar uneori vrei sa pastrezi exact formatarea din cod - de exemplu pentru poezii, ASCII art, sau cod sursa. In acest caz, folosesti tag-ul <pre> (preformatted).




Exemplu: O poezie


<pre>
  Pe un picior de plai,
  Pe o gura de rai,
    Iata vin in cale
    Se coboara la vale.
</pre>




🔑 Cand folosesc <pre>?



                            • Poezii (pastrezi indentarea si randurile)

                            • Cod sursa (pastrezi formatarea)

                            • ASCII art (desene din caractere)

                            • Orice text unde spatiile si enter-urile conteaza
                        



            

        


        

            

                
8

                
O pagina HTML completa cu toate elementele invatate

            

            

                
O pagina HTML completa cu toate elementele invatate




Acum punem totul impreuna: headings, paragrafe, formatare, caractere speciale si separatori.




Pagina completa - salveaz-o si deschide-o in browser!





<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Scoala mea</title>
</head>
<body>
<h1>Scoala Gimnaziala "Mihai Eminescu"</h1>
<h2>Despre noi</h2>
<p>Scoala noastra a fost <strong>infiintata in 1965</strong> si
    este una dintre cele mai vechi din oras.</p>
<p>Avem <em>peste 500 de elevi</em> si un corp
    profesoral dedicat.</p>
<h2>Contact</h2>
<h3>Adresa</h3>
<p>Strada Florilor, Nr. 10<br>
Bucuresti, Sector 1<br>
Cod postal: 010001</p>
<h3>Program</h3>
<p>Secretariat: Luni - Vineri, 8:00 - 16:00</p>
<hr>
<p>&copy; 2026 Scoala Gimnaziala "Mihai Eminescu"</p>
</body>
</html>



            

        


    


    
    

        
Exercitii practice

        

            
Exercitiul 1 (Nivel minim) - Analiza codului HTML

            
Raspunde la urmatoarele intrebari:


    

  1. Care sunt cele 6 niveluri de heading in HTML? Care este cel mai important si care este cel mai putin important? De ce ar trebui sa ai un singur <h1> pe pagina?
    2. 

  2. Ce diferenta este intre <strong> si <b>? De ce recomandam <strong>? Da un exemplu de situatie in care un cititor de ecran ar beneficia de <strong>.
    3. 

  3. Explica ce este "whitespace collapsing". Scrie un exemplu de cod HTML cu spatii multiple si arata cum il afiseaza browser-ul. Cum poti forta spatii suplimentare?
    4. 



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

        

        

            
Exercitiul 2 (Nivel standard) - Creeaza pagina "Hobby-urile mele"

            
Cerinta: Creeaza o pagina HTML completa despre hobby-urile tale. Pagina trebuie sa contina:


    

  1. Un <h1> cu titlul "Hobby-urile mele"
    2. 

  2. Minim 3 sectiuni <h2> (cate una pentru fiecare hobby)
    3. 

  3. Cel putin o sub-sectiune <h3> in una din sectiuni
    4. 

  4. Minim 4 paragrafe <p> cu text
    5. 

  5. Foloseste <strong>, <em>, <u> si <s> (cel putin o data fiecare)
    6. 

  6. Cel putin un <br> si un <hr>
    7. 

  7. Cel putin un caracter special (&copy;, &lt;, etc.)
    8. 





Indicii:


    

  • Incepe cu <!DOCTYPE html> si structura completa
    • 

  • Poti folosi <s> pentru un hobby pe care l-ai abandonat
    • 

  • Foloseste <br> pentru o adresa sau o lista de echipamente
    • 

  • Pune &copy; la final cu numele tau
    • 




        

        

            
Exercitiul 3 (Nivel performanta) - Gaseste greselile

            
Cerinta: Urmatorul cod HTML contine 5 greseli. Gaseste-le pe toate si explica de ce sunt greseli si cum le corectezi.



<h1>Pagina mea</h1>

<h1>Bine ai venit!</h1>

<h3>Despre mine</h3>

<b>Ma numesc Ion.</b><br><br>

<b>Am 13 ani.</b><br><br>

<b>Imi place sa programez.</b>





Indicii:


    

  • Verifica numarul de <h1>
    • 

  • Verifica ierarhia headings
    • 

  • Gandeste-te la <b> vs <strong>
    • 

  • Gandeste-te la <br><br> vs <p>
    • 

  • Textul e intr-adevar "important" (bold) sau e text normal?
    • 





Cuvinte cheie de folosit: ierarhie, semantic, paragraf, heading, whitespace, formatare

        

    


    
    

        

            
Ce ai invatat astazi

            
    
                
  • Ai invatat ce sunt heading-urile si de ce conteaza ordinea lor
    • 
                
  • Acum stii tag-ul 
     - paragraful
    • 
                
  • Ai descoperit tag-urile de formatare a textului
    • 
                
  • Ai explorat tag-uri semantice vs. tag-uri vizuale
    • 
                
  • Ai inteles tag-uri fara continut (self-closing)
    • 
                
  • Ai invatat de ce am nevoie de entitati HTML
    • 
                
  • Acum stii pastreaza spatiile si enter-urile cu 
    • 
                
  • Ai descoperit o pagina HTML completa cu toate elementele invatate
    • 
            

        


        

        

            
Urmatoarea lectie

            
Continua cu lectia urmatoare pentru a aprofunda cunostintele.

            Continua →