HTML - Competente Digitale

HTML in Notepad - codul brut, capcana extensiei

La HTML nu se cere sa fii dezvoltator web; se cere sa scrii corect tag-urile cu paranteze unghiulare si sa salvezi cu extensia .html, nu .txt. Capcana numarul unu, in fiecare an, este salvarea gresita.

Ce trebuie sa stii

Scrie structura minima a unei pagini HTML: <!DOCTYPE html>, <html>, <head>, <title>, <body>.
Foloseste tag-urile pentru titluri de la <h1> (cel mai mare) pana la <h6> (cel mai mic).
Pune textul in paragrafe cu <p> si </p>, in loc sa lasi text brut in body.
Foloseste line break <br> pentru rand nou si <hr> pentru linie orizontala despartitoare.
Creeaza liste nesortate <ul> si sortate <ol>, fiecare element fiind <li>.
Construieste un tabel cu <table>, randuri cu <tr>, celule cu <td>, antete cu <th>.
Insereaza o imagine cu <img src="..." alt="..." width="..." height="..."> - pune mereu si atributul alt (buna practica; unele subiecte il puncteaza).
Creeaza un hyperlink cu <a href="...">text</a>. Pentru deschidere in tab nou: target="_blank".
Formateaza text in linie: <b> bold, <i> italic, <u> subliniat (depasit semantic, dar acceptat in examen).
Aplica stil simplu cu atributul style (de exemplu style="color:red") - varianta clasica din examen.
Salveaza cu extensia .html in Notepad: File > Save As > Save as type "All Files" > nume cu .html in coada.
Deschide pagina in browser cu dublu-click in folder, ca sa verifici vizual rezultatul.

Pe scurt - comenzile cheie

Tag / Operatie	Cum o scrii	Capcana
Structura minima	`<!DOCTYPE html><html><head><title>...</title></head><body>...</body></html>`	Fara <body>, continutul nu apare in browser.
Titlu mare	`<h1>Titlu</h1>`	h1 trebuie sa fie unic pe pagina (titlul principal). Pentru subtitluri foloseste h2, h3.
Paragraf	`<p>Acesta este un paragraf.</p>`	Textul fara `<p>` apare pe un singur rand, fara spatiere.
Rand nou in paragraf	`<br>` (fara tag de inchidere)	Nu folosi <br> pentru a separa paragrafe - foloseste `<p>` separate.
Lista cu marcaje	`<ul><li>Item 1</li><li>Item 2</li></ul>`	<li> trebuie sa fie INSIDE <ul> sau <ol>, nu liber.
Lista numerotata	`<ol><li>...</li></ol>`	Numerele sunt generate automat - nu le scrie tu in continut.
Tabel simplu	`<table border="1"><tr><td>A</td><td>B</td></tr></table>`	Fara <tr>, celulele apar pe un rand fara structura. Atributul border="1" face marginile vizibile.
Cap de tabel	`<th>Coloana 1</th>`	th este bold si centrat implicit; td este text normal.
Imagine	`<img src="poza.jpg" alt="Descriere" width="200">`	pune mereu alt - e buna practica si unele subiecte il puncteaza; concentreaza-te insa pe parametrii ceruti explicit (src, dimensiuni).
Hyperlink	`<a href="https://edu.ro">Site Minister</a>`	Adauga `target="_blank"` daca vrei deschidere in tab nou.
Bold / Italic / Underline	`<b>text</b>`, `<i>text</i>`, `<u>text</u>`	Modernul foloseste <strong> si <em>, dar examenul accepta b si i.
Stil simplu inline	`<p style="color:red;font-size:18px">Text</p>`	Atributele de stil sunt in ghilimele, perechi `cheie:valoare` separate prin `;`.
Salvare ca .html	File > Save As > File name: `pagina.html` > Save as type: All Files	Daca lasi "Text Documents (*.txt)", fisierul ajunge `pagina.html.txt`.

HTML in Notepad si rezultatul in browser, side-by-side — Scrii codul in Notepad si verifici imediat rezultatul in browser cu F5.

Dialogul Save As din Notepad cu schimbarea de la Text Documents la All Files pentru salvare .html — La salvare: Save as type trebuie schimbat din "Text Documents" in "All Files", altfel fisierul devine .html.txt.

Mini-lectie pas cu pas

PASUL ZERO la examen: editezi fisierul comp_h existent, nu creezi pagina de la zero.
In subiectele oficiale primesti deja fisierul comp_h in directorul examen si trebuie sa-l MODIFICI. Fluxul corect: click-dreapta pe comp_h > Open with > Notepad (dublu-click il deschide in browser, doar pentru vizualizare). Editezi codul in Notepad, Ctrl+S, apoi F5 (Refresh) in browser ca sa vezi rezultatul. Tine ambele ferestre deschise si repeta bucla editare-salvare-refresh dupa fiecare modificare.

Restul pasilor de mai jos te invata tag-urile de la zero - dar la examen le aplici in fisierul primit, nu intr-o pagina noua.
Deschide Notepad, nu Word.
Start > tasteaza Notepad > Enter. Foloseste Notepad, nu WordPad si nici Word. Word adauga formatare invizibila care strica codul HTML.
Scrie structura minima.
In Notepad, scrie exact (cu tot cu paranteze unghiulare):
```
<!DOCTYPE html>
<html>
  <head>
    <title>Pagina mea</title>
  </head>
  <body>

  </body>
</html>
```
Textul din <title> apare in tab-ul browser-ului, nu pe pagina.

Adauga titlu si paragraf.

Intre <body> si </body> scrie:

<h1>Despre mine</h1>
<p>Sunt elev in clasa a XII-a si invat pentru BAC Competente Digitale.</p>
<hr>
<h2>Hobby-urile mele</h2>
<p>Pictura, muzica, programare.</p>

Eticheta <hr> deseneaza o linie orizontala despartitoare.

Creeaza o lista cu marcaje.
Pentru o lista cu lucruri:
```
<ul>
  <li>Desen</li>
  <li>Pian</li>
  <li>HTML</li>
</ul>
```
Pentru lista numerotata, inlocuieste ul cu ol si numerele apar automat.
Insereaza o imagine cu alt si dimensiuni.
Pune imaginea in acelasi folder cu fisierul .html. Apoi in cod:
```
<img src="poza.jpg" alt="Portretul meu" width="200" height="200">
```
Atributul alt e o buna practica importanta - apare daca imaginea nu se incarca si este folosit de cititoare de ecran. Scrie-l mereu; punctele insa cad pe parametrii ceruti explicit in subiect.

Creeaza un hyperlink.

Link catre un site extern:

<a href="https://www.edu.ro">Site-ul Ministerului</a>

Pentru deschidere in tab nou, adauga target="_blank":

<a href="https://www.edu.ro" target="_blank">Site-ul Ministerului</a>

Construieste un tabel 2x3 cu cap de tabel.

Tabelul are 1 rand de antet (th) si 2 randuri de date (td):

<table border="1">
  <tr>
    <th>Nume</th>
    <th>Varsta</th>
    <th>Oras</th>
  </tr>
  <tr>
    <td>Andrei</td>
    <td>18</td>
    <td>Iasi</td>
  </tr>
  <tr>
    <td>Bianca</td>
    <td>19</td>
    <td>Cluj</td>
  </tr>
</table>

Atributul border="1" face marginile vizibile. Fara el, tabelul apare fara linii.

Aplica stil simplu pe un paragraf.
Pentru text rosu, dimensiune 20px, centrat:
```
<p style="color:red; font-size:20px; text-align:center;">
  Acest paragraf este formatat inline.
</p>
```
Atributele de stil sunt perechi proprietate:valoare separate prin punct si virgula.
Salveaza cu extensia .html (PASUL CRITIC).
File > Save As. In dialog:
- La File name scrie pagina.html (cu extensia .html scrisa explicit).
- La Save as type alege All Files (*.*), NU "Text Documents".
- La Encoding lasa UTF-8.
Click Save. Du-te in folder. Daca fisierul are iconita browser-ului (Chrome, Edge), e bine. Daca are iconita Notepad, ai gresit extensia.
Verifica in browser.
Dublu-click pe pagina.html in folder. Trebuie sa se deschida in browser (Chrome, Edge), nu in Notepad. Daca se deschide in Notepad, fisierul are extensia gresita - probabil .txt.

Cerintele care apar efectiv in subiecte (cu anul in paranteza)

Culori hexazecimale + tag-urile din era veche, acceptate de barem.
Codul de culoare incepe cu # si are EXACT 6 caractere hexazecimale. Exemplu real (model 2026, 4b): culoarea #99C23C pe ultimele 3 cuvinte dinaintea imaginii:
```
<font color="#99C23C">ultimele trei cuvinte</font>
```
sau varianta CSS: <span style="color:#99C23C">...</span>. Tot din era veche, baremele accepta si <font face="Courier"> pentru schimbarea fontului (model 2026, 4a: primele doua paragrafe cu font Courier).

Capcana: fara # browserul nu interpreteaza codul ca hex; cu doar 5 caractere (99C23) nu se aplica nimic. Verifica vizual cu F5.
Link relativ catre un fisier local din acelasi director.
Cand fisierele sunt in acelasi folder (cazul directorului examen), in href ajunge doar numele fisierului, fara cale. Exemplu real (model 2019, 4a): primul paragraf devine link catre fisierul Excel:
```
<a href="comp_x.xlsx">textul paragrafului</a>
```
Capcana: verifica extensia REALA in File Explorer (View > bifeaza File name extensions) - poate fi .xls in loc de .xlsx. Apoi testeaza link-ul in browser: click pe el trebuie sa deschida fisierul.

Entitati HTML - caracterele speciale se scriu prin cod.

Modelul 2019 (4b) cerea un paragraf care contine DOAR simbolul copyright, scris prin codul lui: ©. Mini-tabelul de retinut:

Cod	Afiseaza	Cand il folosesti
`©`	©	simbol copyright (cerut literal in modelul 2019)
` `	spatiu	spatiu care nu se "strange" si nu se rupe la capat de rand
`&`	&	semnul & scris ca text
`<` / `>`	< / >	parantezele unghiulare ca text, nu ca tag

Aliniere la dreapta pe un paragraf.
Doua variante echivalente, ambele acceptate (model 2019, 4b: paragraful cu © aliniat la dreapta):
```
<p align="right">&copy;</p>
<p style="text-align:right">&copy;</p>
```
Capcana: alinierea se pune pe tag-ul <p> care contine textul, nu pe un tag separat - si verifici cu F5 ca simbolul apare lipit de marginea dreapta.

Incearca singur

Modifica codul HTML din casuta de mai sus si vezi imediat rezultatul renderat in panoul din dreapta. Incearca sa adaugi un tabel 2x2, o imagine (foloseste https://picsum.photos/200 ca src de test), un link spre Wikipedia. Daca un tag nu se inchide corect, vei vedea pagina rupandu-se - asa inveti unde se pune semnul / la inchidere.

Capcane si confuzii frecvente

Salvat ca .txt in loc de .html - capcana clasica numarul 1. La Save as type alege "All Files", iar in nume scrie explicit pagina.html.
Tag-uri neinchise - daca scrii <p>text fara </p>, browser-ul incearca sa ghiceasca si poate strica restul paginii.
Lipseste atributul alt la imagine - scrie-l din reflex; e buna practica si unele subiecte il puncteaza.
Imaginea nu apare - calea (src) e gresita, sau imaginea nu este in folderul paginii. Litere mari/mici conteaza la nume.
Folosesti Word in loc de Notepad - Word salveaza cu formatari ascunse care fac codul invalid.
Tabel fara <tr> - daca pui <td> direct in <table> fara rand, celulele nu se afiseaza corect.
Folosesti ghilimele curbate in atribute - copiate din Word, ghilimelele "smart quotes" nu sunt recunoscute. Rescrie ghilimelele direct in Notepad.
Numar manual in lista <ol> - scrii "1. Item" in interiorul <li> si apar "1. 1. Item". Pune doar textul, numarul vine automat.

Greseli vs corect

Gresit

Save As:
  File name: pagina
  Save as type: Text Documents (*.txt)

Fisierul ajunge pagina.txt. Browser-ul nu il deschide ca pagina web - il afiseaza ca text simplu cu tag-urile vizibile.

Corect

Save As:
  File name: pagina.html
  Save as type: All Files (*.*)
  Encoding: UTF-8

Numele cu .html explicit si tipul "All Files" salveaza ca pagina web. Browser-ul o deschide corect.

Gresit

<img src="poza.jpg" width="200">

Lipseste atributul alt. Baremul il cere explicit - pierzi puncte chiar daca imaginea se vede in browser.

Corect

<img src="poza.jpg" alt="Portretul meu" width="200">

Cu alt populat, imaginea este accesibila si conforma cu cerinta. alt apare ca text alternativ daca imaginea nu se incarca.

Gresit

<table>
  <td>A</td>
  <td>B</td>
</table>

Celulele <td> nu sunt invelite in randuri <tr>. Tabelul nu se afiseaza corect.

Corect

<table border="1">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

Structura corecta: table > tr (rand) > td (celula). Atributul border="1" face liniile vizibile.

Verifica-te

Q1. Care tag creeaza titlul cel mai mare al unei pagini HTML?

Raspuns: <h1>.

Explicatie: h1 este cel mai mare; h2, h3, ..., h6 sunt din ce in ce mai mici.

Q2. Cum scrii o imagine cu text alternativ (alt) si latime de 300px?

Raspuns: <img src="poza.jpg" alt="Descriere" width="300">

Explicatie: alt este descrierea textuala obligatorie. width controleaza dimensiunea afisata.

Q3. Cum creezi un link care se deschide in tab nou?

Raspuns: <a href="https://edu.ro" target="_blank">Edu</a>

Explicatie: atributul target="_blank" spune browser-ului sa deschida link-ul in tab nou.

Q4. Salvezi din Notepad ca .html, dar la dublu-click se deschide in Notepad. De ce?

Raspuns: Probabil ai salvat cu "Save as type: Text Documents" si fisierul real este pagina.html.txt. Activeaza View > File name extensions ca sa vezi extensia reala.

Explicatie: la Save As, alege "All Files (*.*)" si scrie explicit ".html" in nume.

Q5. Care este structura minima a unei pagini HTML?

Raspuns: <!DOCTYPE html><html><head><title>...</title></head><body>...</body></html>

Explicatie: DOCTYPE declara HTML5. html este radacina. head are titlu si metadate. body are continutul vizibil.

Q6. Cum aplici culoare rosie pe un paragraf, inline?

Raspuns: <p style="color:red">Text rosu</p>

Explicatie: atributul style primeste perechi proprietate:valoare separate prin punct si virgula.

Q7. La examen primesti fisierul comp_h si trebuie sa-l modifici. Cum il deschizi pentru EDITARE si cum verifici rezultatul?

Raspuns: Click-dreapta pe comp_h > Open with > Notepad (editare). Dupa fiecare modificare: Ctrl+S in Notepad, apoi F5 in browser (unde l-ai deschis cu dublu-click pentru vizualizare).

Explicatie: dublu-click deschide fisierul in browser, unde poti doar vedea pagina, nu edita codul.

Q8. Cum scrii un paragraf care contine doar simbolul copyright, aliniat la dreapta?

Exerseaza pe subiecte reale

Continua cu

Walkthrough pas cu pas Model 2024 - HTML: rezolvare comentata cu toate tag-urile cerute. Urmatoarea competenta Internet si comunicare - Fisa A cu cautare ghidata si email cu atasament.

Aplica ce ai invatat

Pune totul cap la cap in proiectul ghidat Portofoliu personal in HTML - construiesti o pagina completa in Notepad, cu toate tag-urile din lectie, in bucla editare-salvare-refresh.

Dupa Save As, intoarce-te in folder. Daca iconita fisierului tau este iconita browser-ului (Chrome/Edge), e salvat corect. Daca este iconita Notepad, ai facut .txt din greseala - sterge si salveaza din nou.

Cod	Afiseaza	Cand il folosesti
`©`	©	simbol copyright (cerut literal in modelul 2019)
` `	spatiu	spatiu care nu se "strange" si nu se rupe la capat de rand
`&`	&	semnul & scris ca text
`<` / `>`	< / >	parantezele unghiulare ca text, nu ca tag

Cod	Afiseaza	Cand il folosesti
`©`	©	simbol copyright (cerut literal in modelul 2019)
` `	spatiu	spatiu care nu se "strange" si nu se rupe la capat de rand
`&`	&	semnul & scris ca text
`<` / `>`	< / >	parantezele unghiulare ca text, nu ca tag

Cod	Afiseaza	Cand il folosesti
`©`	©	simbol copyright (cerut literal in modelul 2019)
` `	spatiu	spatiu care nu se "strange" si nu se rupe la capat de rand
`&`	&	semnul & scris ca text
`<` / `>`	< / >	parantezele unghiulare ca text, nu ca tag