Crearea și stilizarea paginilor web statice și introducere în programarea client-side.
HTML nu este un limbaj de programare, ci un limbaj de marcare (markup): el nu execută instrucțiuni și nu are decizii sau bucle, ci descrie structura și semnificația conținutului. Această distincție e prima întrebare de teză.
Un document HTML5 corect are următoarea schelă:
Elementele au forma `<etichetă atribut=„valoare”>conținut</etichetă>`. Există și elemente vide (self-closing), care nu au conținut și deci nici etichetă de închidere: `<img>`, `<br>`, `<hr>`, `<input>`, `<meta>`.
HTML5 a introdus elementele semantice, care înlocuiesc mulțimea de `<div>`-uri fără sens: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`. Ele nu schimbă aspectul, dar ajută motoarele de căutare și cititoarele de ecran să înțeleagă pagina — de aceea sunt preferate.
Două atribute globale sunt esențiale pentru restul capitolului: `id`, care trebuie să fie unic în pagină, și `class`, care poate fi folosit de oricâte elemente și chiar mai multe pe același element (`class=„buton principal”`). Confuzia id/class se plătește imediat când ajungi la selectorii CSS.
Conținutul se organizează cu un set restrâns de elemente, pe care examenul le cere efectiv scrise corect.
Text și titluri: `<h1>` … `<h6>` marchează ierarhia secțiunilor, nu mărimea literei — dacă vrei text mare, folosești CSS, nu un `<h1>` nepotrivit. Paragraful e `<p>`. Pentru accent semantic se folosesc `<strong>` (importanță) și `<em>` (emfază), preferate lui `<b>` și `<i>`, care descriu doar aspectul.
Liste: - `<ul>` – listă neordonată, cu marcatori; - `<ol>` – listă ordonată, numerotată; - în ambele, fiecare element este `<li>`; - `<dl>` cu `<dt>` și `<dd>` – listă de definiții.
Imagini: `<img src=„poza.jpg” alt=„descriere”>`. Atributul `alt` este obligatoriu în practică: el se afișează dacă imaginea nu se încarcă și este citit de cititoarele de ecran pentru persoanele nevăzătoare.
Legături (hyperlink): `<a href=„https://exemplu.ro”>text</a>`. Atributul `href` dă destinația și poate fi o adresă absolută, una relativă (`pagina2.html`, `../imagini/logo.png`) sau o ancoră internă (`#contact`, care sare la elementul cu acel `id`). `target=„_blank”` deschide în filă nouă.
Tabele: `<table>` conține rânduri `<tr>`, iar în rânduri celule de date `<td>` sau celule de antet `<th>` (îngroșate și centrate implicit). Structura completă adaugă `<thead>`, `<tbody>`, `<tfoot>` și `<caption>`. Îmbinarea celulelor se face cu atributele `colspan` (pe orizontală, coloane) și `rowspan` (pe verticală, rânduri) — ordinea lor se confundă des.
O regulă de fond: tabelele se folosesc doar pentru date tabelare. Construirea layout-ului paginii cu tabele este o practică depășită; pentru asta există CSS.
CSS separă prezentarea de structură. O regulă are forma:
``` selector { proprietate: valoare; } ```
Stilurile pot fi aplicate în trei moduri, în ordinea crescătoare a priorității: extern (fișier .css legat cu `<link rel=„stylesheet” href=„stil.css”>`, singura variantă recomandată pentru un site real), intern (bloc `<style>` în `<head>`) și inline (atributul `style` pe element, greu de întreținut).
Selectorii de bază:
Două mecanisme explică de ce „stilul meu nu se aplică”:
Confuzia clasică la examen: un elev crede că regula de la sfârșitul fișierului bate întotdeauna. Nu — ordinea decide doar între reguli cu aceeași specificitate; un selector `#meniu a` bate un `.link` scris mai jos.
Fiecare element din pagină este redat ca o cutie dreptunghiulară, formată din patru straturi, dinspre interior spre exterior:
1. content – conținutul propriu-zis (`width`, `height`); 2. padding – spațiul interior, între conținut și chenar; ia culoarea de fundal a elementului; 3. border – chenarul; 4. margin – spațiul exterior, care separă elementul de vecini; este întotdeauna transparent.
Capcana numărul unu a CSS-ului: implicit (`box-sizing: content-box`), `width` se referă doar la conținut, așa că lățimea reală ocupată = width + padding stânga/dreapta + border stânga/dreapta. Un element cu `width: 200px; padding: 20px; border: 5px` ocupă în realitate 250px. Soluția practică, folosită azi în toate proiectele, este `box-sizing: border-box`, care face ca `width` să includă padding și border.
O a doua subtilitate: marginile verticale adiacente se colapsează (dintre 30px și 20px rămâne 30px, nu 50px), în timp ce marginile orizontale se adună normal.
Proprietatea `display` decide comportamentul cutiei: `block` (ocupă toată lățimea disponibilă, începe pe rând nou — `div`, `p`, `h1`), `inline` (ocupă doar cât conținutul, stă în rând cu textul, iar `width` și `height` nu au efect — `span`, `a`), `inline-block` (stă în rând, dar acceptă dimensiuni) și `none` (elementul dispare complet, fără să lase spațiu — spre deosebire de `visibility: hidden`, care îl ascunde, dar îi păstrează locul).
Flexbox rezolvă alinierea într-o singură direcție. Se activează cu `display: flex` pe container, iar copiii devin elemente flexibile. Proprietățile-cheie ale containerului: `flex-direction` (`row` implicit, sau `column`), `justify-content` (aliniere pe axa principală), `align-items` (aliniere pe axa transversală), `gap` (spațiul dintre elemente) și `flex-wrap`. Confuzia sigură la teză: dacă `flex-direction` este `column`, axa principală devine verticala, deci `justify-content` aliniază pe verticală, iar `align-items` pe orizontală — exact invers față de cazul obișnuit.
JavaScript este singurul limbaj de programare propriu-zis din acest capitol: el se execută în browser (client-side) și face pagina interactivă. Se include cu `<script src=„script.js”></script>`, de regulă înainte de `</body>`, ca să existe deja elementele pe care le manipulează.
Variabile: se declară cu `let` (valoare care se poate schimba) și `const` (valoare care nu se reatribuie); `var`, forma veche, are un comportament derutant al vizibilității și nu se mai recomandă. Tipurile de bază sunt `number`, `string`, `boolean`, `null`, `undefined`, plus obiectele și tablourile. JavaScript are tipizare dinamică: aceeași variabilă poate primi valori de tipuri diferite.
O capcană specifică, foarte iubită la teze: operatorul `==` face conversie de tip înainte de comparație, așa că `„5” == 5` este adevărat, în timp ce `===` compară și valoarea, și tipul, deci `„5” === 5` este fals. Regula practică: folosește întotdeauna `===`.
Funcții: `function suma(a, b) { return a + b; }` sau varianta modernă, funcția săgeată: `const suma = (a, b) => a + b;`. Structurile de control (`if`, `for`, `while`, `switch`) sunt cele cunoscute din C++.
Accesul la elementele paginii (DOM): pagina este reprezentată în memorie ca un arbore de obiecte (DOM). Elementele se obțin cu `document.getElementById(„id”)` sau, mai general, cu `document.querySelector(„.clasa”)`, care acceptă orice selector CSS. Conținutul se schimbă cu `textContent` (text simplu, varianta sigură) sau `innerHTML` (interpretează HTML).
Evenimente: codul se leagă de acțiunile utilizatorului. Modul recomandat este:
``` buton.addEventListener(„click”, function () { ... }); ```
Evenimente uzuale: `click`, `submit`, `change`, `input`, `keydown`, `mouseover`, `load`. În interiorul funcției, obiectul `event` descrie ce s-a întâmplat, iar `event.preventDefault()` oprește comportamentul implicit — cel mai des, retrimiterea paginii la trimiterea unui formular.
Formularul este mecanismul prin care utilizatorul trimite date către server. Elementul `<form>` are două atribute esențiale: `action` (adresa care primește datele) și `method`.
Diferența GET vs. POST este o întrebare aproape sigură:
Atenție: POST nu criptează nimic. Confidențialitatea o dă HTTPS, nu metoda.
Câmpurile se creează cu `<input>`, al cărui atribut `type` decide comportamentul: `text`, `password`, `email`, `number`, `date`, `checkbox`, `radio`, `file`, `submit`. Alte elemente: `<textarea>` pentru text lung, `<select>` cu `<option>` pentru liste derulante.
Două atribute pe care elevii le tratează superficial:
La butoanele radio, toate opțiunile dintr-un grup trebuie să aibă același `name` — altfel utilizatorul le poate bifa pe toate simultan, ceea ce contrazice ideea de alegere unică.
Validarea are două straturi. Cea din HTML5 se face declarativ, cu `required`, `min`, `max`, `minlength`, `maxlength`, `pattern` (expresie regulată) și cu tipuri ca `email` sau `number`; browserul afișează singur mesajele. Cea din JavaScript permite verificări complexe (parolele coincid, CNP-ul e coerent) și mesaje personalizate.
Regula de aur, valabilă indiferent de cât de bine validezi în pagină: validarea pe client este pentru confortul utilizatorului, nu pentru securitate. Ea poate fi ocolită complet, așa că datele trebuie validate obligatoriu și pe server.