Tematică științifică · 10.3

Limbajul HTML și paginile web

Limbajul HTML și editarea paginilor web: structura documentului, elementele structurale, textul, listele, legăturile, harta de imagine, imaginile și elementele multimedia, tabelele, formularele, stilurile CSS, interactivitatea cu JavaScript, proiectarea, optimizarea și publicarea unui site, cu aparițiile la Definitivat și Titularizare.

∗ Și la proba practică — Titularizare

Paginile web sunt fișiere text scrise în limbajul HTML. Browserul citește fișierul, interpretează marcajele din el și afișează textul, imaginile, tabelele și legăturile. O pagină se descrie din trei puncte de vedere, fiecare cu limbajul lui:

conținutul și structura — ce elemente are pagina și cum sunt organizate: HTML;
prezentarea — cum arată elementele: culori, fonturi, dimensiuni, așezare în pagină: CSS;
comportamentul — cum reacționează pagina la acțiunile utilizatorului: JavaScript.

Exemplele din lecție se pot scrie în orice editor de text, se salvează cu extensia .html și se deschid cu dublu clic, în browser.

Pagina web și limbajul HTML

Noțiuni de bază

Noțiunea	Ce reprezintă
pagina web	fișier cu extensia `.html` sau `.htm`, scris în limbajul HTML, care poate conține text, imagini, liste, tabele, formulare, elemente multimedia și legături
site-ul web	colecție de pagini web legate între ele, cu o pagină principală (de obicei `index.html`), împreună cu imaginile, fișierele de stiluri și celelalte fișiere pe care le folosesc
HTML	HyperText Markup Language, limbajul de marcare a hipertextului, cu care se descriu conținutul și structura paginilor web
eticheta (tag, marcaj)	cuvânt special scris între `<` și `>`, care marchează un element al paginii, de exemplu `<p>`
elementul	eticheta de început, conținutul și eticheta de sfârșit: `<p>Text</p>`
atributul	proprietate a unui element, scrisă în eticheta de început sub forma `nume="valoare"`, de exemplu `<img src="poza.jpg">`

Majoritatea etichetelor sunt pereche: eticheta de sfârșit are, în plus, caracterul /, de exemplu <b> și </b>. Unele etichete sunt simple (vide), fără conținut și fără etichetă de sfârșit: <br>, <hr>, <img>, <input>, <meta>.

Reguli de scriere:

etichetele și atributele se pot scrie cu litere mari sau mici, fiindcă HTML nu face deosebirea; se recomandă literele mici;
valorile atributelor se scriu între ghilimele;
mai multe spații sau rânduri noi consecutive din codul sursă sunt afișate ca un singur spațiu;
etichetele pereche se închid în ordinea inversă deschiderii: <b><i>text</i></b>, nu <b><i>text</b></i>;
textul scris între  este un comentariu, pe care browserul nu îl afișează.

Caracterele speciale

Unele caractere au rol special în HTML sau nu se găsesc pe tastatură. Ele se scriu prin entități, care încep cu & și se termină cu ;:

Entitatea	Caracterul afișat
`<`, `>`	`<`, `>`
`&`	`&`
`"`	`"`
` `	spațiu care nu se desparte la capăt de rând și nu se comprimă cu spațiile vecine
`©`	©

Fără entități, textul a<b ar fi citit de browser ca începutul unei etichete.

Editoarele de pagini web

Editoarele de text, în care se scrie codul sursă: Notepad, Notepad++, Gedit, Visual Studio Code. Rezultatul se vede deschizând fișierul în browser; după fiecare salvare, pagina se reîncarcă cu butonul Reîmprospătare (F5).
Editoarele vizuale și platformele online, în care pagina se construiește prin inserarea elementelor, iar codul se generează automat: Google Sites, Wix, WebWave, WordPress.
Platformele de testare, în care codul HTML și CSS se scrie într-o parte a ferestrei și rezultatul apare imediat în cealaltă: editorul online de pe W3Schools, htmleditor.online.

Codul sursă și instrumentele browserului

Vizualizarea codului sursă (Ctrl + U sau clic dreapta → Vizualizați sursa paginii) arată fișierul HTML primit de la server, exact cum a fost scris.
Inspectarea (F12 sau clic dreapta → Inspectați) deschide instrumentele pentru dezvoltatori. Fila Elemente arată structura paginii ca arbore de elemente; la selectarea unui element se văd stilurile CSS aplicate lui și zona pe care o ocupă în pagină. Modificările făcute aici sunt temporare și dispar la reîncărcare.
Validarea verifică dacă un cod respectă standardul: W3C Markup Validation Service pentru HTML și W3C CSS Validation Service pentru CSS. Ele semnalează erorile frecvente:
- etichete neînchise sau închise în altă ordine decât au fost deschise;
- atribute scrise greșit sau folosite la o etichetă care nu le are;
- valori de atribute fără ghilimele de închidere;
- lipsa atributului alt la imagini.

Browserul încearcă să afișeze și o pagină cu erori, dar rezultatul poate diferi de la un browser la altul; de aceea codul se validează.

Structura documentului

Documentul HTML

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Topologiile rețelelor de calculatoare">
  <title>Rețele de calculatoare</title>
  <link rel="stylesheet" href="stiluri.css">
</head>
<body>
  <h1>Topologii de rețea</h1>
  <p>O rețea locală folosește de obicei topologia stea.</p>
  <script src="script.js"></script>
</body>
</html>

Elementul	Rolul
`<!DOCTYPE html>`	declarația de la începutul fișierului, care anunță browserului versiunea HTML5
`<html>` … `</html>`	cuprinde întregul document; atributul `lang` precizează limba conținutului
`<head>` … `</head>`	antetul, cu informații despre pagină, care nu se afișează în fereastră
`<title>` … `</title>`	titlul paginii, afișat pe fila browserului și ca titlu al rezultatului în motoarele de căutare
`<body>` … `</body>`	corpul paginii, cu tot conținutul afișat

În antet mai apar:

<meta charset="utf-8"> — codificarea caracterelor, necesară pentru afișarea corectă a diacriticelor;
<meta name="viewport" ...> — potrivește lățimea paginii cu lățimea ecranului, pentru afișarea corectă pe telefon;
<meta name="description" ...> — descrierea scurtă a paginii, afișată de motoarele de căutare sub titlu;
<base href="..."> — adresa de bază față de care se calculează adresele relative din pagină;
<link> — legarea unui fișier extern, de exemplu fișierul de stiluri CSS;
<style> — stilurile CSS scrise direct în pagină;
<script> — cod JavaScript, scris direct sau încărcat dintr-un fișier; se așază de obicei la sfârșitul corpului.

Etichete structurale, de conținut și de prezentare

Categoria	Rolul	Exemple
structurale	împart documentul și pagina în zone cu un anumit rol	`<html>`, `<head>`, `<body>`, `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`
de conținut	marchează informația propriu-zisă și semnificația ei	`<h1>`…`<h6>`, `<p>`, `<ul>`, `<ol>`, `<li>`, `<a>`, `<img>`, `<table>`, `<form>`, `<strong>`, `<em>`
de prezentare	stabilesc numai aspectul, fără să spună ce este conținutul	`<font>`, `<center>`, `<b>`, `<i>`, `<u>`, atributele `bgcolor`, `align`, `border`

Etichetele de prezentare vin din versiunile vechi ale limbajului. În HTML5 multe dintre ele sunt învechite: browserele le afișează în continuare, dar aspectul se stabilește recomandat prin CSS, iar HTML păstrează numai structura și conținutul.

Elementele structurale HTML5

Zonele unei pagini, marcate cu elemente structurale.

Elementul	Ce conține
`<header>`	antetul paginii sau al unei secțiuni: sigla, numele site-ului, titlul
`<nav>`	meniul de navigare, cu legăturile către paginile principale
`<main>`	conținutul principal al paginii; o pagină are un singur `<main>`
`<section>`	o parte tematică a conținutului, de obicei cu un titlu propriu
`<article>`	un conținut de sine stătător: un articol, o știre, o postare
`<aside>`	informații alăturate conținutului principal: legături utile, reclame, note
`<footer>`	subsolul paginii: autorul, datele de contact, drepturile de autor
`<figure>`, `<figcaption>`	o imagine, o diagramă sau un fragment de cod, cu legenda lui

Elementele structurale nu schimbă aspectul paginii, dar spun ce rol are fiecare zonă. Motoarele de căutare și programele care citesc pagina cu voce tare pentru persoanele cu deficiențe de vedere se folosesc de această informație.

Elementele generice

<div> — bloc generic, care grupează alte elemente pe rânduri separate; se folosește când niciun element structural nu se potrivește;
<span> — element generic în interiorul unui rând de text, folosit pentru a formata o parte din text.

Orice element poate primi atributele:

id — un nume unic în pagină, folosit pentru legături interne, stiluri și JavaScript;
class — unul sau mai multe nume de clasă, comune mai multor elemente care se formatează la fel;
style — stiluri CSS aplicate numai acelui element;
title — textul afișat când cursorul stă deasupra elementului.

<div class="avertisment" id="nota-1">
  Adresa <span class="cod">192.168.1.1</span> este o adresă privată.
</div>

Fundalul paginii

Eticheta <body> are atributele:

bgcolor — culoarea de fundal a paginii: <body bgcolor="#EEFFEE">;
background — imaginea de fundal, repetată pe toată suprafața paginii: <body background="fundal.jpg">;
text — culoarea textului;
link, vlink, alink — culorile legăturilor, prezentate în tab-ul Legăturile.

În HTML5 aceste atribute sunt învechite și se folosesc stilurile: <body style="background-color: #EEFFEE">, respectiv <body style="background-image: url('fundal.jpg')">. Culoarea fundalului se alege astfel încât textul să rămână ușor de citit.

Textul și listele

Titluri, paragrafe, linii

Eticheta	Efectul	Atribute
`<h1>` … `<h6>`	titluri pe șase niveluri, cu text îngroșat; `<h1>` are dimensiunea cea mai mare, `<h6>` cea mai mică	`align`: `left`, `center`, `right`
`<p>`	paragraf, separat de restul textului printr-un spațiu deasupra și dedesubt	`align`: `left`, `center`, `right`, `justify`
`<br>`	trecere la rândul următor, în interiorul aceluiași paragraf	—
`<hr>`	linie orizontală de separare	`width`, `size` (grosimea), `align`, `color`
`<pre>`	text preformatat, afișat cu spațiile și rândurile din codul sursă	—
`<blockquote>`	citat pe mai multe rânduri, retras față de margini	`cite`

Titlurile se folosesc în ordinea nivelurilor: un singur <h1> pentru titlul paginii, <h2> pentru secțiuni, <h3> pentru subsecțiuni, fără salturi de nivel.

Formatarea caracterelor

Eticheta	Efectul
`<strong>`, `<b>`	text îngroșat; `<strong>` spune în plus că textul este important
`<em>`, `<i>`	text înclinat; `<em>` spune în plus că textul este accentuat
`<u>`	text subliniat
`<sup>`, `<sub>`	exponent, indice: `x<sup>2</sup>`, `H<sub>2</sub>O`
`<mark>`	text evidențiat
`<small>`	text mai mic
`<del>`, `<ins>`	text șters (tăiat), respectiv text adăugat (subliniat)
`<code>`	fragment de cod, cu font monospațiat
`<font>`	fontul, cu atributele `face` (numele fontului), `size` (dimensiunea, de la 1 la 7) și `color` (culoarea); învechită în HTML5

<p align="justify">
  Topologia <strong>stea</strong> leagă fiecare nod la un
  <font face="Arial" color="blue">switch central</font>.
</p>

Culorile

Culorile se scriu prin:

nume: red, green, navy, white;
cod hexazecimal, de forma #RRGGBB: câte două cifre hexazecimale, de la 00 la FF (0–255 în zecimal), pentru intensitatea componentelor roșu, verde și albastru;
funcția rgb(), cu cele trei intensități scrise în zecimal.

Culoarea	Hexazecimal	`rgb()`
roșu	`#FF0000`	`rgb(255, 0, 0)`
verde	`#00FF00`	`rgb(0, 255, 0)`
albastru	`#0000FF`	`rgb(0, 0, 255)`
alb	`#FFFFFF`	`rgb(255, 255, 255)`
negru	`#000000`	`rgb(0, 0, 0)`
gri	`#808080`	`rgb(128, 128, 128)`

Exemplu: în #1E90FF, roșul este 1E = 1 · 16 + 14 = 30, verdele 90 = 9 · 16 = 144, iar albastrul FF = 255, deci culoarea este rgb(30, 144, 255), un albastru deschis.

Listele

Tipul	Etichetele	Atribute
listă ordonată (numerotată)	`<ol>` … `</ol>`, fiecare element între `<li>` și `</li>`	`type`: `1`, `A`, `a`, `I`, `i`; `start`: numărul primului element; `reversed`: numerotare descrescătoare
listă neordonată (cu marcatori)	`<ul>` … `</ul>`, fiecare element între `<li>` și `</li>`	`type`: `disc`, `circle`, `square` (învechit; în CSS, `list-style-type`)
listă de definiții	`<dl>` … `</dl>`, termenul între `<dt>` și `</dt>`, definiția între `<dd>` și `</dd>`	—

<ol type="A" start="3">
  <li>LAN</li>
  <li>MAN</li>
</ol>
<ul>
  <li>Topologii
    <ul>
      <li>magistrală</li>
      <li>stea</li>
    </ul>
  </li>
</ul>
<dl>
  <dt>Router</dt>
  <dd>Echipament care leagă rețele diferite.</dd>
</dl>

Prima listă este numerotată cu C. și D.. A doua este o listă imbricată: lista interioară se scrie în interiorul unui element <li> al listei exterioare.

Legăturile

Eticheta `<a>`

O legătură (hiperlegătură, link) este un text sau o imagine care, la clic, deschide altă resursă. Se scrie cu eticheta <a> (de la anchor, ancoră):

<a href="https://www.edu.ro" target="_blank" title="Site-ul ministerului">Ministerul Educației</a>

Atributul	Rolul
`href`	adresa destinației; fără el, elementul nu este legătură
`target`	fereastra în care se deschide destinația: `_self`, aceeași fereastră (implicit), sau `_blank`, o fereastră ori o filă nouă
`title`	textul afișat când cursorul stă deasupra legăturii
`download`	fișierul destinație se descarcă, în loc să fie deschis

Tipurile de legături

Tipul	Destinația	Valoarea lui `href`
externă (globală)	o pagină de pe alt site, prin adresă absolută, cu protocol și nume de server	`https://www.edu.ro/programe.html`
locală, în același folder	un fișier al aceluiași site, prin adresă relativă	`contact.html`
locală, într-un subfolder	fișierul dintr-un folder aflat sub cel curent	`lectii/retele.html`
locală, într-un folder superior	fișierul din folderul părinte; `../` urcă un nivel	`../index.html`
internă (ancoră)	o zonă a aceleiași pagini, marcată cu atributul `id` (în versiunile vechi, `<a name="...">`)	`#topologii`
către o zonă din altă pagină	zona marcată dintr-un alt fișier	`retele.html#topologii`
de e-mail	deschide aplicația de e-mail, cu destinatarul completat	`mailto:secretariat@scoala.ro`
de telefon	inițiază un apel pe telefon	`tel:+40211234567`
către un fișier	un document care se descarcă sau se deschide în aplicația lui	`programa.pdf`

<h2 id="topologii">Topologii</h2>
...
<a href="#topologii">Înapoi la topologii</a>

Adresa absolută conține întreaga adresă URL și duce la aceeași resursă indiferent de pagina din care se face legătura. Adresa relativă este calculată față de folderul paginii curente; ea rămâne corectă când întregul site este mutat pe alt server, dacă structura folderelor se păstrează.

O imagine scrisă între <a> și </a> devine legătură:

<a href="index.html"><img src="sigla.png" alt="Pagina principală"></a>

Culorile legăturilor

O legătură are trei stări, iar culoarea fiecăreia se stabilea prin atribute ale etichetei <body>:

link — legătura nevizitată;
vlink — legătura vizitată;
alink — legătura activă, în momentul apăsării.

<body link="#0000FF" vlink="#800080" alink="#FF0000">

În HTML5 aceste atribute sunt învechite, iar culorile se stabilesc cu pseudo-clasele CSS a:link, a:visited, a:hover și a:active, prezentate în tab-ul Stilurile CSS.

Harta de imagine

O hartă de imagine împarte o imagine în zone, iar fiecare zonă duce la altă destinație. De exemplu, pe harta României, clic pe fiecare județ deschide pagina acelui județ.

<img src="harta.png" alt="Harta regiunilor" usemap="#regiuni" width="600" height="400">
<map name="regiuni">
  <area shape="rect" coords="20,30,200,150" href="nord.html" alt="Regiunea de nord">
  <area shape="circle" coords="320,200,60" href="centru.html" alt="Regiunea centru">
  <area shape="poly" coords="400,250,580,260,560,390,420,380" href="sud.html" alt="Regiunea de sud">
</map>

Atributul usemap al imaginii are ca valoare numele hărții, precedat de #.
Fiecare zonă se descrie cu eticheta <area>, cu forma dată de atributul shape și coordonatele, în pixeli, date de coords:
- rect (dreptunghi) — colțul din stânga sus și colțul din dreapta jos: x1,y1,x2,y2;
- circle (cerc) — centrul și raza: x,y,r;
- poly (poligon) — perechile de coordonate ale vârfurilor: x1,y1,x2,y2,….
Coordonatele se măsoară de la colțul din stânga sus al imaginii și se citesc, de exemplu, în Paint, unde bara de stare afișează poziția cursorului.

Imagini și multimedia

Imaginile

Imaginea se inserează cu eticheta simplă <img>. Fișierul imaginii rămâne separat de pagină, iar pagina conține doar adresa lui.

<img src="imagini/router.jpg" alt="Router wireless" width="300" height="200">

Atributul	Rolul
`src`	adresa fișierului imagine, relativă sau absolută; atributul este obligatoriu
`alt`	textul alternativ, afișat dacă imaginea nu se încarcă și citit de programele pentru persoanele cu deficiențe de vedere
`width`, `height`	lățimea și înălțimea, în pixeli; dacă lipsesc, imaginea apare la dimensiunea ei reală
`title`	textul afișat când cursorul stă deasupra imaginii
`border`	grosimea chenarului, în pixeli (învechit; în CSS, `border`)
`align`	alinierea imaginii față de textul din jur: `left`, `right`, `top`, `middle`, `bottom` (învechit; în CSS, `float` și `vertical-align`)
`hspace`, `vspace`	distanța imaginii față de textul din jur, pe orizontală și pe verticală (învechite; în CSS, `margin`)
`usemap`	numele hărții de imagine asociate

Formatul	Caracteristici	Potrivit pentru
JPEG (`.jpg`)	compresie cu pierdere de calitate, fișiere mici	fotografii
PNG (`.png`)	compresie fără pierdere, acceptă transparența	sigle, desene, capturi de ecran
GIF (`.gif`)	cel mult 256 de culori, acceptă animația	animații simple
SVG (`.svg`)	imagine vectorială, se mărește fără pierderea calității	sigle, pictograme, diagrame
WebP (`.webp`)	compresie mai bună decât JPEG și PNG, acceptă transparența	fotografii și desene pe web

Sunetul, filmul și paginile încorporate

<audio src="imn.mp3" controls></audio>

<video width="480" controls poster="coperta.jpg">
  <source src="prezentare.mp4" type="video/mp4">
  <source src="prezentare.webm" type="video/webm">
  Browserul nu poate reda filmul.
</video>

<iframe src="https://www.youtube.com/embed/..." width="560" height="315"
        title="Film despre rețele"></iframe>

Elementul	Rolul	Atribute uzuale
`<audio>`	redă un fișier de sunet (MP3, OGG, WAV)	`src`, `controls` (butoanele de redare), `autoplay`, `loop`, `muted`
`<video>`	redă un film (MP4, WebM)	`src`, `controls`, `width`, `height`, `poster` (imaginea afișată înainte de pornire), `autoplay`, `loop`, `muted`
`<source>`	variante ale aceluiași fișier, în formate diferite; browserul o alege pe prima pe care o poate reda	`src`, `type`
`<iframe>`	încorporează o altă pagină în pagina curentă: un film de pe YouTube, o hartă, un formular Google	`src`, `width`, `height`, `title`

Textul scris între <video> și </video> apare numai în browserele care nu cunosc elementul.

În versiunile vechi ale limbajului, fereastra browserului se putea împărți în cadre (frames), fiecare afișând altă pagină, cu etichetele <frameset> și <frame>; de exemplu, un cadru îngust în stânga, cu meniul, și un cadru mare în dreapta, cu pagina aleasă. Cadrele nu mai sunt acceptate în HTML5: meniul comun se realizează cu <nav> și CSS, iar o pagină se încorporează în alta cu <iframe>.

Tabelele

Etichetele tabelului

Eticheta	Rolul
`<table>` … `</table>`	cuprinde tabelul
`<caption>`	titlul tabelului, scris imediat după `<table>`
`<thead>`, `<tbody>`, `<tfoot>`	grupează rândurile de antet, de date și de subsol
`<tr>`	un rând (table row)
`<th>`	o celulă de antet (table header), cu text îngroșat și centrat
`<td>`	o celulă de date (table data)

<table border="1" width="60%" cellpadding="5" cellspacing="0">
  <caption>Tipuri de rețele</caption>
  <tr>
    <th>Tipul</th>
    <th>Aria de acoperire</th>
  </tr>
  <tr>
    <td>LAN</td>
    <td>o clădire</td>
  </tr>
  <tr>
    <td>WAN</td>
    <td>țări, continente</td>
  </tr>
</table>

Materialul acesta se citește pe educamp.ro și nu se tipărește.

Ce cuprinde subcapitolul

Pagina web și limbajul HTML
Structura documentului
Textul și listele
Legăturile
Imagini și multimedia
Tabelele
Formularele
Stilurile CSS
JavaScript
Realizarea și publicarea unui site
Apariții la examen

Continuă lectura ca și cursant

Cel puțin un subcapitol din fiecare capitol este disponibil gratuit și integral. Pentru a citi toate celelalte subcapitole ale disciplinei, te înscrii la cursul de pregătire.

Prima săptămână este gratuită, fără plată și fără card. Dacă vrei să vezi mai întâi cum este prezentată materia, poți reveni la primul subcapitol al capitolului.

100 RON / lună, pentru o disciplină

Ce cuprinde:

Două întâlniri de câte două ore, în fiecare lună
Tot suportul de curs publicat până acum la disciplina aleasă
Capitole noi în fiecare săptămână, cuprinse în luna plătită, fără costuri suplimentare
Material organizat după structura programei de examen
Acces de pe orice dispozitiv, folosind același cont
Prima săptămână gratuită, fără card și fără reînnoire automată

Începe săptămâna gratuită Sunt cursant — login

Află când publicăm materiale noi

Materia este publicată treptat, capitol cu capitol. Înscrie-te pentru a primi un e-mail atunci când apare un capitol nou de informatică.

Surse

Coriteac, M.-E., Cosman, C. D., Curta, I.-V., Stoian, A., „Informatică și TIC. Manual pentru clasa a VIII-a”, Editura Sigma, București, 2025
Popa, D., „Informatică și TIC. Manual pentru clasa a VIII-a”, Editura Intuitext, București, 2025
Gremalschi, A., Corlat, S., Braicov, A., „Informatică. Manual pentru clasa a 12-a”, Editura Știința, Chișinău, 2015
Mîndruță, C., „Web Design” (HTML, CSS), suport de curs
Drăgoi, D. D., Schnakovszky, C., Raveica, I. C., Ganea, B.-I., „Utilizarea calculatoarelor. Note de curs și aplicații”, Universitatea din Bacău, 2007
Programa școlară pentru disciplina Tehnologia informației și a comunicațiilor, clasa a X-a, trunchi comun, 2026
Programa școlară pentru disciplina Informatică și TIC, clasele a V-a – a VIII-a, OMEN 3393/2017
Programa școlară pentru disciplina Tehnologia informației și a comunicațiilor, filiera tehnologică, clasele a XI-a – a XIII-a
Repere metodologice pentru aplicarea curriculumului la clasa a IX-a, Tehnologia informației și a comunicațiilor, 2021
Programa pentru examenul de definitivare în învățământ, disciplina Informatică, cap. 10 „Rețele de calculatoare”
Programa pentru concursul de ocupare a posturilor didactice, disciplina Informatică, cap. 10 „Rețele de calculatoare”
Subiecte și bareme publicate, Definitivat și Titularizare, informatică, 2020