Tehnologii web
Introducere în crearea paginilor web statice și dinamice folosind HTML, CSS și noțiuni de bază de JavaScript.
Structura unui document HTML5
HTML (HyperText Markup Language) descrie structura și conținutul unei pagini web. Este un limbaj de marcare, nu de programare — nu are variabile, condiții sau cicluri; el doar etichetează conținutul: acesta e un titlu, acesta e un paragraf, aceasta e o imagine.
Scheletul obligatoriu al unui document HTML5:
- `<!DOCTYPE html>` — declarația din prima linie, care anunță browserul că urmează HTML5;
- `<html>` — elementul rădăcină, care cuprinde tot;
- `<head>` — metadatele paginii: titlul din bara browserului (`<title>`), codificarea caracterelor (`<meta charset='UTF-8'>` — fără ea diacriticele românești apar stricate), legăturile către fișierele CSS;
- `<body>` — conținutul vizibil: texte, imagini, linkuri.
Distincția head/body este prima sursă de confuzie: `<title>` NU apare în pagină, ci pe fila browserului; ce se vede în pagină stă exclusiv în body.
Un element HTML are de regulă etichetă de deschidere, conținut și etichetă de închidere: `<p>text</p>`. Câteva elemente sunt vide și nu se închid: `<img>`, `<br>`, `<input>`. Atributele adaugă informații în eticheta de deschidere, ca perechi nume-valoare: `<img src='poza.jpg' alt='descriere'>`.
Elementele se imbrică corect ca păpușile rusești: ultimul deschis se închide primul. Scrierea `<b><i>text</b></i>` este imbricare greșită — browserele o tolerează adesea, dar validatoarele o resping, iar comportamentul devine imprevizibil.
Elemente HTML de bază
Elementele pe care se construiește orice pagină:
- titluri: `<h1>` ... `<h6>`, de la cel mai important la cel mai mărunt; h1 ar trebui folosit o singură dată pe pagină, ca titlu principal — ierarhia titlurilor e structură logică, nu doar mărime de font;
- paragraf: `<p>`; întrerupere de linie: `<br>`. De reținut: în HTML, spațiile multiple și trecerile la linie nouă din codul sursă se comprimă într-un singur spațiu — fără `<p>` sau `<br>`, textul curge continuu;
- linkul (ancora): `<a href='https://exemplu.ro'>text vizibil</a>` — atributul href conține adresa destinație. Linkurile pot fi absolute (URL complet, către alt site) sau relative (către un fișier din același site: `despre.html`);
- imaginea: `<img src='cale' alt='text alternativ'>` — src indică fișierul, iar alt este textul afișat când imaginea nu se încarcă și citit de cititoarele de ecran pentru persoanele cu deficiențe de vedere; omiterea lui alt este o greșeală de accesibilitate, nu un detaliu;
- liste: `<ul>` — listă neordonată (buline), `<ol>` — listă ordonată (numerotată), ambele cu elemente `<li>`;
- tabele: `<table>`, cu rânduri `<tr>`, celule de antet `<th>` și celule de date `<td>`;
- containere generice: `<div>` — bloc, `<span>` — porțiune în interiorul unei linii; nu au sens propriu, există ca să fie stilizate cu CSS;
- elemente semantice HTML5: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<footer>` — spun browserului și motoarelor de căutare ce rol are fiecare zonă, nu doar cum arată.
Comentariile HTML se scriu `<!-- așa -->` și nu apar în pagină.
CSS: selectori și proprietăți
CSS (Cascading Style Sheets) descrie aspectul paginii: culori, fonturi, spații, așezare. Principiul de aur al web-ului modern: HTML pentru structură, CSS pentru prezentare — separarea lor face paginile ușor de întreținut.
O regulă CSS are forma: selector { proprietate: valoare; } — de exemplu `p { color: blue; font-size: 16px; }`.
Selectorii de bază, în ordinea în care trebuie știuți:
- de element: `p` — toate paragrafele;
- de clasă: `.important` — toate elementele cu atributul `class='important'`; o clasă poate fi refolosită pe oricâte elemente;
- de id: `#meniu` — elementul unic cu `id='meniu'`; un id trebuie să fie unic în pagină — diferența clasă/id este întrebarea standard;
- descendent: `nav a` — toate linkurile aflate în interiorul elementului nav;
- pseudo-clase: `a:hover` — starea linkului survolat cu mouse-ul.
CSS se poate atașa în trei moduri: inline (atributul style direct pe element — de evitat), intern (blocul `<style>` din head) și extern (fișier .css separat, legat cu `<link rel='stylesheet' href='stil.css'>`) — varianta corectă pentru orice site real, pentru că un singur fișier stilizează toate paginile.
Când mai multe reguli țintesc același element, câștigă regula mai specifică (id bate clasa, clasa bate elementul), iar la specificitate egală, ultima declarată — aceasta este „cascada” din nume. Proprietăți de bază: `color` (culoarea textului), `background-color`, `font-family`, `font-size`, `text-align`, `font-weight: bold`. Culorile se scriu cu nume (red), hexazecimal (#ff0000) sau rgb(255, 0, 0).
Modelul cutiei și așezarea în pagină
În CSS, fiecare element este o cutie dreptunghiulară formată din patru straturi concentrice — modelul cutiei (box model), dinspre interior spre exterior:
- content — conținutul propriu-zis (textul, imaginea);
- padding — spațiul dintre conținut și chenar, în interiorul cutiei; preia culoarea de fundal a elementului;
- border — chenarul;
- margin — spațiul în afara chenarului, care desparte cutia de vecine; este transparent.
Confuzia padding/margin este cea mai frecventă greșeală practică: padding-ul „umflă” elementul pe dinăuntru, margin-ul îl distanțează de celelalte. Lățimea reală ocupată = width + padding + border + margin (în modelul implicit), motiv pentru care multe pagini setează `box-sizing: border-box`, care include padding-ul și chenarul în width.
Elementele sunt de două feluri de afișare: bloc (div, p, h1 — ocupă toată lățimea și încep pe rând nou) și inline (span, a, b — curg în interiorul textului; width și height nu au efect asupra lor).
Pentru așezarea (layout) modernă a paginii:
- Flexbox — container unidimensional: `display: flex` pe părinte așază copiii pe un rând sau pe o coloană; `justify-content` distribuie spațiul pe direcția principală, `align-items` pe cea transversală; instrumentul standard pentru centrare și bare de navigație;
- Grid — container bidimensional: `display: grid` cu `grid-template-columns: 1fr 2fr 1fr` definește coloane și rânduri simultan; potrivit pentru schelete întregi de pagină.
Regula practică de alegere: o singură direcție (un rând SAU o coloană) → Flexbox; rânduri ȘI coloane simultan → Grid. Metodele istorice — tabele HTML pentru layout, float-uri — sunt considerate depășite.
Introducere în JavaScript
JavaScript este limbajul de programare al paginilor web — a treia componentă a triadei: HTML structura, CSS aspectul, JavaScript comportamentul. Rulează direct în browser (client-side) și poate reacționa la acțiunile utilizatorului și modifica pagina din mers, fără reîncărcare.
Precizare cerută la orice test: JavaScript NU este Java — sunt limbaje diferite, cu nume asemănător din motive istorice de marketing.
Elementele de bază:
- variabile: `let varsta = 16;` (modificabilă), `const nume = 'Ana';` (constantă). JavaScript este slab tipizat — tipul variabilei rezultă din valoare și se poate schimba;
- funcții: `function aduna(a, b) { return a + b; }`, apelate cu `aduna(2, 3)`;
- structuri de control identice ca idee cu C++: if/else, for, while;
- afișare și depanare: `console.log(...)` scrie în consola browserului; `alert(...)` deschide o fereastră de dialog.
Puntea dintre JavaScript și pagină este DOM (Document Object Model) — reprezentarea paginii ca arbore de obiecte pe care scriptul îl poate citi și modifica: `document.getElementById('titlu').textContent = 'Salut';` schimbă textul elementului cu id-ul titlu.
Evenimentele leagă codul de acțiunile utilizatorului: click, tastare, trimiterea unui formular. Varianta modernă folosește `addEventListener('click', functie)` pe elementul dorit.
Capcana clasică a operatorilor: `==` compară cu conversii automate de tip ('5' == 5 este adevărat), pe când `===` cere și egalitatea tipurilor ('5' === 5 este fals). Practica recomandată este folosirea consecventă a lui ===, tocmai ca să nu apară potriviri-surpriză.
Formulare și validare
Formularele sunt mecanismul prin care paginile colectează date de la utilizator. Elementul container este `<form>`, cu atributele action (adresa către care se trimit datele) și method:
- GET — datele se atașează la URL, vizibile în bara de adrese; potrivit pentru căutări, nepotrivit pentru date sensibile;
- POST — datele pleacă în corpul cererii, nu în URL; obligatoriu pentru parole și date personale.
Controalele uzuale, toate pe elementul `<input>` diferențiat prin atributul type: `text` (o linie de text), `password` (caractere mascate), `email`, `number`, `date`, `checkbox` (bife multiple), `radio` (o singură opțiune din grup — butoanele radio cu același atribut name formează grupul), `submit` (butonul de trimitere). Pentru texte lungi există `<textarea>`, pentru liste derulante `<select>` cu `<option>`. Eticheta `<label>` se leagă de control prin atributul for, îmbunătățind accesibilitatea.
Atributul name al fiecărui control este esențial: sub acest nume ajunge valoarea la server — un input fără name nu trimite nimic.
Validarea verifică datele înainte de trimitere. HTML5 oferă validare declarativă, fără nicio linie de cod: required (câmp obligatoriu), min/max și minlength/maxlength (limite), type='email' (format de adresă), pattern (expresie regulată). Browserul blochează trimiterea și afișează mesaje automat.
Pentru reguli mai complexe se adaugă validare în JavaScript, la evenimentul submit. Însă regula de securitate care trebuie ținută minte toată viața: validarea pe client este doar confort pentru utilizator; serverul TREBUIE să revalideze totul — orice utilizator rău intenționat poate ocoli complet browserul și trimite date fabricate direct către server.
De reținut
- HTML
- limbaj de marcare care descrie structura și conținutul paginii web prin elemente delimitate de etichete; nu este limbaj de programare
- atribut HTML
- pereche nume-valoare scrisă în eticheta de deschidere a unui element, care îi adaugă informații: href la linkuri, src și alt la imagini
- CSS
- limbajul foilor de stil în cascadă, care descrie aspectul paginii prin reguli de forma selector { proprietate: valoare; }
- selector de clasă și de id
- .nume selectează toate elementele cu clasa respectivă, refolosibilă; #nume selectează elementul cu id-ul respectiv, care trebuie să fie unic în pagină
- modelul cutiei
- reprezentarea oricărui element ca o cutie cu patru straturi: conținut, padding (spațiu interior), border (chenar) și margin (spațiu exterior)
- Flexbox și Grid
- sistemele moderne de așezare CSS: Flexbox aranjează elementele pe o singură direcție (rând sau coloană), Grid pe două dimensiuni simultan
- JavaScript
- limbajul de programare al browserului, care adaugă comportament paginii: reacționează la evenimente și modifică documentul prin DOM; diferit de Java
- DOM
- Document Object Model — reprezentarea paginii ca arbore de obiecte, prin care JavaScript citește și modifică dinamic conținutul și stilul elementelor
- GET și POST
- metodele de trimitere a formularelor: GET atașează datele la URL (vizibile), POST le trimite în corpul cererii — varianta obligatorie pentru date sensibile
- validare pe client și pe server
- verificarea datelor în browser (HTML5, JavaScript) este doar confort pentru utilizator; serverul trebuie să revalideze totul, fiindcă clientul poate fi ocolit
Greșeli frecvente
Greșit: Considerarea HTML drept limbaj de programare
Corect: HTML este limbaj de marcare: etichetează structura conținutului, fără variabile, decizii sau cicluri; programarea în pagină o face JavaScript
Greșit: Folosirea aceluiași id pe mai multe elemente din pagină
Corect: Id-ul trebuie să fie unic în document; pentru stiluri aplicate mai multor elemente se folosesc clasele — exact pentru asta există
Greșit: Confundarea padding-ului cu margin-ul
Corect: Padding este spațiul interior, între conținut și chenar, și preia fundalul elementului; margin este spațiul exterior, transparent, care desparte elementul de vecini
Greșit: Compararea valorilor în JavaScript cu == în loc de ===
Corect: == face conversii automate de tip ('5' == 5 e adevărat) și produce potriviri-surpriză; === compară și valoarea, și tipul — varianta sigură
Greșit: Bazarea securității exclusiv pe validarea din browser
Corect: Validarea HTML5/JavaScript poate fi ocolită complet de un utilizator rău intenționat; serverul trebuie să revalideze fiecare dată primită
Test — 6 întrebări ca la examen
1. Elementul <title> al unui document HTML:
- afișează titlul principal, cu litere mari, în partea de sus a paginii
- stabilește textul afișat pe fila browserului și aparține secțiunii head
- este obligatoriu să apară în body
- creează un link către prima pagină a site-ului
Vezi răspunsul
stabilește textul afișat pe fila browserului și aparține secțiunii head. title stă în head, printre metadate, și se vede pe fila browserului, nu în pagină. Titlul vizibil din pagină se face cu h1 — confuzia title/h1 este exact capcana acestei întrebări.
2. Care este rolul atributului alt al elementului <img>?
- stabilește adresa fișierului imagine
- definește lățimea imaginii în pixeli
- oferă un text alternativ afișat când imaginea nu se încarcă și citit de cititoarele de ecran
- adaugă un chenar decorativ imaginii
Vezi răspunsul
oferă un text alternativ afișat când imaginea nu se încarcă și citit de cititoarele de ecran. alt descrie imaginea în text: apare când fișierul lipsește și este esențial pentru accesibilitate. Adresa fișierului o dă atributul src — distractorul clasic, fiindcă cele două atribute stau mereu împreună pe img.
3. Regula CSS .mesaj { color: red; } se aplică:
- elementului unic cu id-ul mesaj
- tuturor elementelor care au clasa mesaj
- tuturor paragrafelor din pagină
- doar primului element cu clasa mesaj
Vezi răspunsul
tuturor elementelor care au clasa mesaj. Punctul din fața numelui marchează un selector de clasă, iar clasa poate fi purtată de oricâte elemente — toate primesc stilul. Selectorul de id ar începe cu # și ar ținti un singur element; diferența punct/diez este verificarea standard la selectori.
4. În modelul cutiei CSS, spațiul dintre conținutul elementului și chenarul său este:
- margin
- padding
- border
- outline
Vezi răspunsul
padding. Padding-ul este spațiul interior, între conținut și border, și preia culoarea de fundal a elementului. Margin — distractorul simetric — este spațiul din afara chenarului, care desparte elementul de vecinii lui.
5. În JavaScript, expresia '5' === 5 are valoarea:
- true, pentru că valorile sunt egale
- false, pentru că operanzii au tipuri diferite
- eroare de sintaxă
- 5
Vezi răspunsul
false, pentru că operanzii au tipuri diferite. Operatorul === cere egalitate de valoare ȘI de tip: un șir de caractere nu este identic cu un număr, deci rezultatul e false. Cu == rezultatul ar fi true datorită conversiei automate — exact diferența dintre cei doi operatori pe care o testează itemul.
6. Un formular de autentificare cu parolă trebuie trimis cu metoda POST deoarece:
- GET nu poate trimite mai mult de un câmp
- POST atașează datele la URL pentru verificare
- la GET datele apar în URL, unde pot fi văzute și salvate în istoric
- POST validează automat datele pe server
Vezi răspunsul
la GET datele apar în URL, unde pot fi văzute și salvate în istoric. GET pune datele în bara de adrese — parola ar rămâne în istoricul browserului și în jurnalele serverelor; POST le trimite în corpul cererii. Varianta b afirmă despre POST exact comportamentul lui GET, iar validarea pe server nu o face automat nicio metodă — rămâne responsabilitatea programatorului.