Elemente de continut

1

Liste: ordonate, neordonate si de definitii

HTML are trei tipuri de liste, fiecare cu rol diferit:
<ul> (unordered list) — lista neordonata, cu buline, pentru elemente fara ordine obligatorie.
<ol> (ordered list) — lista ordonata, cu numerotare automata (1, 2, 3...), pentru pasi sau clasamente.
<dl> (definition list) — lista de definitii, perechi termen-explicatie.
In toate, fiecare element al listei sta intr-o eticheta <li> (list item) — cu exceptia <dl>, care foloseste <dt> (termen) si <dd> (definitie).

Exemplu — pasi tehnologici (lista ordonata):

<ol>
  <li>Masurare si trasare pe placa de PAL</li>
  <li>Debitare cu fierastraul circular</li>
  <li>Slefuire margini</li>
  <li>Aplicare cant PVC pe margini</li>
  <li>Gaurire pentru balamale</li>
</ol>

Browserul afiseaza automat: 1. Masurare si trasare... 2. Debitare... 3. Slefuire... si asa mai departe. Nu scrii tu cifrele — daca adaugi sau muti un <li>, numerotarea se recalculeaza singura.

Exemplu — lista de definitii (termeni tehnici):

<dl>
  <dt>PAL</dt>
  <dd>Placa aglomerata din lemn, obtinuta prin presarea de aschii cu adeziv</dd>
  <dt>MDF</dt>
  <dd>Placa fibrolemnoasa de densitate medie, mai fina decat PAL</dd>
</dl>

Greseala frecventa: multi incearca sa faca o lista numerotata scriind manual "1. Masurare", "2. Debitare" ca text simplu intr-un <p>. Problema: daca mai adaugi un pas la mijloc, trebuie sa renumerotezi tu, manual, tot restul. Cu <ol>, browserul face asta automat.

2

Tabele: randuri, coloane si celule unite

Un tabel HTML se construieste din trei nivele imbricate: <table> (tot tabelul) > <tr> (table row — un rand) > <th> sau <td> (o celula de antet, respectiv o celula de date). Zonele <thead> si <tbody> grupeaza randul de antet separat de randurile de date, ceea ce ajuta atat la stilizare cat si la intelegerea structurii.

Exemplu — tabel cu esente de lemn:

<table>
  <thead>
    <tr>
      <th>Esenta</th>
      <th>Densitate (kg/m3)</th>
      <th>Utilizare</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stejar</td>
      <td>720</td>
      <td>Mobilier masiv</td>
    </tr>
    <tr>
      <td>Fag</td>
      <td>680</td>
      <td>Placaj, mobilier curbat</td>
    </tr>
    <tr>
      <td>Brad</td>
      <td>450</td>
      <td>Constructii, cherestea</td>
    </tr>
  </tbody>
</table>

Asa arata rezultat, afisat de browser:

Esenta	Densitate (kg/m3)	Utilizare
Stejar	720	Mobilier masiv
Fag	680	Placaj, mobilier curbat
Brad	450	Constructii, cherestea

Unirea celulelor — colspan si rowspan:

colspan="2" pe un <th> sau <td> il intinde pe 2 COLOANE alaturate, pe orizontala. rowspan="2" il intinde pe 2 RANDURI alaturate, pe verticala. Se folosesc cand un titlu sau o valoare acopera mai multe celule (ex: un antet "Pret (lei)" deasupra a doua coloane "Cu TVA" si "Fara TVA").

<tr>
  <th rowspan="2">Esenta</th>
  <th colspan="2">Pret (lei/m3)</th>
</tr>
<tr>
  <th>Fara TVA</th>
  <th>Cu TVA</th>
</tr>

3

Imagini cu text alternativ si harti de imagine

O imagine se insereaza cu <img>, o eticheta care NU are inchidere separata (nu exista </img>). Atributul obligatoriu src spune de unde se ia fisierul; atributul alt (text alternativ) descrie in cuvinte ce reprezinta imaginea. alt este citit de cititoarele de ecran pentru persoane cu deficiente de vedere si este afisat de browser daca imaginea nu se poate incarca (link stricat, conexiune lenta).

Exemplu corect:

<img src="dulap-stejar.jpg" alt="Dulap din lemn masiv de stejar, cu doua usi si rafturi interioare" width="400" height="300">

alt descrie CE se vede, nu repeta numele fisierului si nu scrie doar "imagine" sau "poza". width si height (in pixeli) rezerva spatiul pentru imagine inainte ca aceasta sa se incarce, ceea ce evita "saltul" continutului paginii.

Greseala frecventa: alt="imagine" sau alt lasat gol (alt="") pe o imagine care conteaza pentru continut (un produs, o schema tehnica). alt="" e corect DOAR pentru imagini pur decorative, fara informatie proprie (ex: o linie despartitoare grafica). Pentru orice imagine cu continut real, alt trebuie sa descrie ce se vede.

Harta de imagine (image map) — zone pe care se poate da clic:

O harta de imagine transforma zone dintr-o singura imagine in linkuri diferite — util pentru o schema a atelierului sau o harta a unui traseu, unde fiecare zona duce spre o pagina diferita. Se leaga o imagine de o harta cu atributul usemap, iar zonele se definesc in <map> cu etichete <area>.

<img src="schema-atelier.jpg" alt="Schema atelierului cu zonele de lucru" usemap="#harta-atelier">

<map name="harta-atelier">
  <area shape="rect" coords="0,0,200,150" href="zona-debitare.html" alt="Zona de debitare">
  <area shape="rect" coords="200,0,400,150" href="zona-slefuire.html" alt="Zona de slefuire">
  <area shape="circle" coords="350,200,40" href="depozit-materiale.html" alt="Depozit de materiale">
</map>

coords se citeste diferit dupa forma din shape: pentru "rect" sunt 4 numere — x1,y1 (coltul stanga-sus) si x2,y2 (coltul dreapta-jos), in pixeli fata de coltul stanga-sus al imaginii. Pentru "circle" sunt 3 numere — x,y (centrul) si raza. Pentru "poly" (poligon) e o lista de perechi x,y, cate una pentru fiecare colt al formei.

4

Sunet si video redate direct in pagina

HTML permite sa redai fisiere audio si video direct in pagina, fara plugin-uri externe, cu etichetele <audio> si <video>. Fiecare poate contine unul sau mai multe <source> — variante ale aceluiasi fisier in formate diferite, pentru ca nu toate browserele suporta toate formatele. Atributul controls afiseaza bara de comenzi (play, pauza, volum).

Exemplu — instructiuni audio de siguranta:

<audio controls>
  <source src="instructiuni-siguranta.mp3" type="audio/mpeg">
  Browserul tau nu suporta elementul audio.
</audio>

Textul de dupa <source> (aici "Browserul tau nu suporta...") este continut de rezerva — se afiseaza DOAR daca browserul nu poate reda niciunul dintre formatele oferite. In browserele moderne, in mod normal, nu se vede — apare doar bara de comenzi audio.

Exemplu — tutorial video, cu doua formate pentru compatibilitate:

<video width="480" height="270" controls>
  <source src="tutorial-slefuire.mp4" type="video/mp4">
  <source src="tutorial-slefuire.webm" type="video/webm">
  Browserul tau nu suporta elementul video.
</video>

Browserul incearca fisierele <source> in ordine si il reda pe primul pe care il intelege. Doua formate (mp4 si webm) acopera aproape toate browserele fara sa depinzi de unul singur.

Exemplu numeric — cat de mare e un fisier audio?

Marimea aproximativa a unui fisier audio se calculeaza asa: marime (KB) = bitrate (kbps) × durata (secunde) ÷ 8 (imparti la 8 pentru ca bitrate-ul e in biti, iar marimea fisierului o vrei in Bytes — 1 Byte = 8 biti).

Un fisier instructiuni-siguranta.mp3 codat la 128 kbps, cu durata de 3 minute (180 secunde):
marime = 128 × 180 ÷ 8 = 23.040 ÷ 8 = 2.880 KB ≈ 2,8 MB.

Poti reface acest calcul pentru orice fisier: un clip de 90 de secunde la acelasi bitrate de 128 kbps ar avea 128 × 90 ÷ 8 = 1.440 KB ≈ 1,4 MB.

5

Butoane si campuri de formular

Un formular incepe cu <form> si contine campuri de introducere a datelor. Cel mai folosit este <input>, al carui comportament depinde de atributul type (text, email, number, checkbox, radio, submit...). Alte campuri utile: <select> (lista derulanta cu <option>), <textarea> (zona de text pe mai multe randuri) si <button>. Fiecare camp ar trebui insotit de un <label> — eticheta text asociata prin for (pe label) = id (pe camp).

Exemplu — formular de comanda pentru un atelier:

<form action="/trimite-comanda" method="post">

  <label for="nume">Nume complet:</label>
  <input type="text" id="nume" name="nume" required><br>

  <label for="telefon">Telefon:</label>
  <input type="tel" id="telefon" name="telefon" required><br>

  <label for="esenta">Esenta lemn dorita:</label>
  <select id="esenta" name="esenta">
    <option value="stejar">Stejar</option>
    <option value="fag">Fag</option>
    <option value="brad">Brad</option>
  </select><br>

  <label for="mesaj">Detalii comanda:</label><br>
  <textarea id="mesaj" name="mesaj" rows="4" cols="30"></textarea><br>

  <input type="checkbox" id="acord" name="acord" required>
  <label for="acord">Sunt de acord cu prelucrarea datelor</label><br>

  <button type="submit">Trimite comanda</button>
  <button type="reset">Sterge formularul</button>

</form>

Unde ajung datele — atributele action, method si name:

action (pe <form>) — adresa unde se trimit datele cand formularul e trimis (aici, "/trimite-comanda" pe server).
method (pe <form>) — cum se trimit: post trimite datele ascunse, in corpul cererii (folosit la formulare care schimba ceva pe server, ca o comanda); get le pune vizibile in URL (folosit la cautari, filtre).
name (pe fiecare camp — input, select, textarea) — eticheta cu care ajunge acea valoare la server; fara name, campul se completeaza pe ecran, dar valoarea lui NU se trimite deloc.
value (pe fiecare <option> dintr-un <select>) — ce se trimite efectiv la server pentru acea alegere; textul vizibil intre <option> si </option> e doar ce vede utilizatorul, value poate fi diferit (ex: un cod scurt).
rows si cols (pe <textarea>) — inaltimea (in randuri) si latimea (in caractere) zonei de text vizibile pe ecran.

Ce fac cele mai folosite atribute type= pe input:

text — o linie de text liber (nume, adresa)
email — browserul verifica de bunavoie forma de e-mail (contine @)
tel — camp pentru numar de telefon (pe mobil deschide tastatura numerica)
number — accepta doar cifre (ex: cantitate)
checkbox — bifa DA/NU, independenta de celelalte
radio — alegere UNICA dintr-un grup (folosind acelasi name la toate optiunile)
submit — trimite formularul catre server

Atributul required (fara valoare) blocheaza trimiterea formularului daca acel camp e gol — browserul afiseaza singur un mesaj de atentionare, fara cod suplimentar.

Greseala frecventa: valoarea din for pe <label> nu se potriveste EXACT (litera cu litera) cu id-ul campului — de exemplu for="Nume" cu id="nume" (majuscula diferita). In acest caz legatura nu functioneaza: click pe eticheta nu mai muta focusul in camp, iar unele cititoare de ecran nu mai pot anunta corect campul.

6

Cadre (frames) — de ce nu se mai folosesc

Odata, o pagina web putea fi impartita in mai multe "ferestre" independente cu <frameset> si <frame> — de exemplu un meniu fix in stanga si continutul care se schimba in dreapta, fiecare incarcat dintr-un fisier .html separat. Aceasta tehnica este eliminata din HTML5 — nu mai face parte din standard si nu ar trebui folosita azi.

Cum arata (istoric — NU se mai foloseste):

<!-- Tehnica veche, eliminata din HTML5 — doar pentru intelegere istorica -->
<frameset cols="20%,80%">
  <frame src="meniu.html">
  <frame src="continut.html">
</frameset>

De ce a fost abandonata:

URL unic pentru tot ce vede utilizatorul — indiferent ce cadru navighezi, adresa din bara ramane aceeasi; nu poti trimite cuiva un link direct catre pagina exacta pe care o vede.
Buton Inapoi imprevizibil — navigarea intre cadre nu se comporta natural cu istoricul browserului.
Indexare greoaie in motoarele de cautare — Google trebuie sa proceseze fiecare cadru ca pagina separata, fara context clar despre pagina "intreaga".
Printare si afisare pe mobil dificile — layout-ul rigid pe cadre fixe nu se adapteaza la ecrane mici.
Probleme de accesibilitate — cititoarele de ecran au dificultati sa explice utilizatorului ca pagina e impartita in zone independente.

Ce se foloseste azi in loc:

Pentru un layout cu meniu fix si continut variabil, site-urile moderne folosesc pagini HTML separate complete (fiecare cu propriul <head> si <body>, propriul URL), cu meniul de navigare repetat identic in fiecare pagina — exact tehnica din urmatoarea lectie a acestui modul. Elementul <iframe> (inline frame) inca exista in HTML5, dar are alt rol: insereaza un CONTINUT extern PUNCTUAL, in interiorul unei pagini normale cu URL propriu — de exemplu o harta:

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450"></iframe>

Diferenta esentiala: un <iframe> e o fereastra mica DIN INTERIORUL unei pagini normale, in timp ce <frameset> inlocuia elementul <body> al paginii cu o grila de cadre (structura ramanea <html><head>...</head><frameset>...</frameset></html> — <html> ramanea elementul radacina) — de-asta primul e acceptat azi, iar al doilea nu.

7

Recapitulare si conexiuni

Fiecare tip de continut de pe o pagina web are eticheta lui specifica — nu improvizezi cu paragrafe si spatii, ci folosesti elementul construit exact pentru acel scop. Aceasta disciplina face pagina intelegibila atat pentru browser, cat si pentru cititoarele de ecran si motoarele de cautare.

Harta elementelor invatate azi:

Liste — <ul>/<li> (neordonata), <ol>/<li> (ordonata), <dl>/<dt>/<dd> (definitii)
Tabele — <table> > <tr> > <th>/<td>, cu colspan si rowspan pentru celule unite
Imagini — <img src alt>, cu alt obligatoriu descriptiv
Harti de imagine — <img usemap> + <map> + <area shape coords href>
Sunet si video — <audio>/<video> + <source> + controls
Formulare — <form> + <input>/<select>/<textarea>/<button>, cu <label for> asociat prin id
Cadre — <frameset>/<frame> eliminate din HTML5; <iframe> ramane, pentru continut extern punctual

Conexiune cu urmatoarea lectie:

Acum stii sa umpli o pagina cu continut. In lectia urmatoare inveti cum se LEAGA mai multe pagini intr-un sit intreg: pagina de start, cai relative fata de cai absolute, meniu de navigare repetat pe toate paginile si legaturi interne cu ancore catre o zona anume din aceeasi pagina.

De retinut pentru proba de competente digitale:

Orice imagine cu continut real trebuie sa aiba alt descriptiv — verificat explicit la evaluare.
Un tabel foloseste <th> pentru antet, nu <td> ingrosat manual.
Un formular functional are <label for> = <input id> pe fiecare camp.
<frameset>/<frame> NU se mai folosesc — daca apar intr-un raspuns, e semn de continut invechit.

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

Liste: ordonate, neordonate si de definitii

Tabele: randuri, coloane si celule unite

Imagini cu text alternativ si harti de imagine

Sunet si video redate direct in pagina

Butoane si campuri de formular

Cadre (frames) — de ce nu se mai folosesc

Recapitulare si conexiuni

Exercitii practice

Exercitiul 1 (Nivel minim) — Lista si tabel

Exercitiul 2 (Nivel standard) — Imagine si formular de comanda

Exercitiul 3 (Nivel performanta) — Video, harta de imagine si evaluare critica

Ce ai invatat astazi

Vrei mai mult?

Urmatoarea lectie