Tehnologii web
Elevii creează pagini web de bază folosind limbaje de marcare și stilizare.
Cum funcționează o pagină web și structura HTML
O pagină web este, în esență, un fișier text scris în limbajul HTML (HyperText Markup Language). Browserul îl citește și îl transformă în pagina colorată pe care o vezi. Prima idee de fixat: HTML nu este limbaj de programare — nu are bucle, condiții sau variabile. Este un limbaj de marcare: etichetează bucățile de conținut ca să spună browserului CE este fiecare (titlu, paragraf, imagine).
Marcarea se face cu etichete (taguri) scrise între paranteze unghiulare. Majoritatea vin în perechi: eticheta de deschidere <p> și cea de închidere </p>, cu bara oblică la închidere. Conținutul stă între ele.
Structura obligatorie a oricărui document:
- <html> — rădăcina, cuprinde tot documentul;
- <head> — antetul: informații DESPRE pagină, care NU se afișează în corpul ei — aici stă <title>, titlul afișat pe fila browserului;
- <body> — corpul: tot ce se vede efectiv în pagină.
Confuzia clasică de test: <title> nu apare în pagină! El apare pe fila (tab-ul) browserului. Titlul mare vizibil în pagină se face cu <h1>.
Etichetele se imbrichează corect ca păpușile rusești: ultima deschisă e prima închisă. Secvența <b><i>text</b></i> e greșită — corect este <b><i>text</i></b>. Browserele iartă adesea asemenea greșeli, dar la test ele se punctează.
Etichetele de bază: text, liste, imagini, linkuri
Conținutul obișnuit al unei pagini se marchează cu un set mic de etichete care trebuie știute pe de rost:
- Titluri: <h1> ... <h6> — șase niveluri, de la cel mai important (h1) la cel mai mărunt (h6). Numărul indică IMPORTANȚA, nu mărimea aleasă de tine: h1 e titlul principal al paginii, de regulă unul singur.
- Paragraf: <p>. Atenție, în HTML apăsarea tastei Enter în fișierul sursă NU creează rând nou în pagină — browserul comprimă spațiile și trecerile la rând. Rândul nou forțat se obține cu <br>, o etichetă FĂRĂ pereche de închidere.
- Evidențiere: <b> sau <strong> pentru aldin (bold), <i> sau <em> pentru cursiv (italic).
- Liste: <ul> — listă neordonată (cu buline); <ol> — listă ordonată (numerotată automat); în ambele, fiecare element stă în <li>. Mnemonic: UL = unordered, OL = ordered.
- Imagine: <img src='poza.jpg' alt='descriere'> — etichetă fără închidere. Atributul src spune DE UNDE se ia imaginea, iar alt oferă textul afișat când imaginea nu se poate încărca (și citit de cititoarele de ecran pentru nevăzători).
- Link (hyperlink): <a href='https://www.edu.ro'>Ministerul Educației</a>. Atributul href conține ADRESA destinație, iar textul dintre etichete este ceea ce se vede și se apasă.
Modelul general: eticheta spune ce este elementul, atributele (scrise în eticheta de deschidere, sub forma nume='valoare') îi dau detalii. Confuzia src/href e capcana preferată a testelor: src la imagini, href la linkuri.
Tabele în HTML
Datele așezate pe rânduri și coloane — un orar, un clasament — se marchează cu tabelul HTML, construit din trei etichete imbricate obligatoriu în această ordine:
- <table> — cuprinde întregul tabel;
- <tr> (table row) — un rând al tabelului;
- <td> (table data) — o celulă de date din interiorul rândului;
- <th> (table header) — celulă de antet, afișată implicit aldin și centrat, folosită pe primul rând pentru numele coloanelor.
Un tabel cu 2 rânduri și 3 coloane are deci structura: în <table> stau două elemente <tr>, iar în fiecare <tr> stau trei celule <td>. Numărul de coloane NU se declară nicăieri — rezultă din numărul de celule puse în fiecare rând. De aici și greșeala tipică: rânduri cu număr diferit de celule dau un tabel strâmb.
Citirea structurii unui tabel din cod este exercițiul-standard: numeri elementele <tr> ca să afli rândurile, numeri celulele <td>/<th> dintr-un rând ca să afli coloanele.
Două subtilități care apar la itemi:
- ordinea imbricării este strictă: <td> stă DOAR în <tr>, iar <tr> doar în <table>; o celulă pusă direct în <table> este structural greșită;
- <th> nu este un rând special, ci o CELULĂ specială — un rând de antet este un <tr> obișnuit ale cărui celule sunt <th> în loc de <td>.
Pe vremuri tabelele se foloseau și la aranjarea întregii pagini; astăzi regula bunelor practici e clară: tabelul e pentru date tabelare, aranjarea paginii se face cu CSS.
Introducere în CSS
HTML spune CE este conținutul; CSS (Cascading Style Sheets) spune CUM ARATĂ: culori, fonturi, dimensiuni, spații, chenare. Separarea aceasta — conținut în HTML, aspect în CSS — este principiul central al capitolului.
O regulă CSS are trei părți: selectorul (pe cine stilizăm), proprietatea (ce anume schimbăm) și valoarea. De exemplu: p { color: red; } — toate paragrafele devin roșii. Selectorul p alege elementele, color e proprietatea, red e valoarea; declarațiile stau între acolade și se termină cu punct și virgulă.
Proprietăți de bază de recunoscut: color (culoarea textului), background-color (culoarea fundalului), font-size (dimensiunea literelor), font-family (tipul de literă), text-align (alinierea: left, center, right).
CSS-ul se poate atașa paginii în trei moduri — comparația lor e cerință de test:
- inline — atributul style direct pe element: <p style='color: red;'>text</p>. Rapid, dar rău la întreținere: stilul trebuie repetat pe fiecare element.
- intern — regulile stau în eticheta <style> din <head>-ul paginii; valabile pentru toată pagina.
- extern — regulile stau într-un fișier separat cu extensia .css, legat de pagină prin eticheta <link> din <head>. Cel mai bun mod: UN fișier stilizează TOATE paginile site-ului, iar o modificare într-un singur loc schimbă tot site-ul.
Dacă mai multe reguli se contrazic, câștigă cea mai specifică și mai apropiată de element — stilul inline bate stilul intern și pe cel extern. De aici vine cuvântul „cascading”: stilurile curg în cascadă și se suprascriu ordonat.
Formulare HTML simple
Până acum pagina doar AFIȘA informații. Formularele inversează sensul: utilizatorul introduce date — un nume, o opțiune, un mesaj — iar pagina le trimite spre prelucrare. Orice căsuță de login, căutare sau comentariu de pe web e un formular.
Elementele de bază:
- <form> — containerul care cuprinde tot formularul;
- <input type='text'> — căsuță de text pe un singur rând (nume, oraș);
- <input type='password'> — la fel, dar caracterele tastate se ascund sub buline;
- <input type='radio'> — buton radio: dintr-un grup se poate alege O SINGURĂ opțiune (nota acordată, clasa din care faci parte);
- <input type='checkbox'> — casetă de bifat: se pot alege MAI MULTE opțiuni simultan (materiile preferate);
- <textarea> — zonă de text pe mai multe rânduri (mesaje lungi);
- <select> cu opțiuni <option> — listă derulantă din care se alege o variantă;
- <input type='submit'> sau <button> — butonul care trimite formularul.
Diferența radio/checkbox este ÎNTREBAREA de la acest subcapitol: radio = alegere unică în cadrul grupului, checkbox = alegeri multiple. Butoanele radio din același grup se leagă între ele prin același atribut name — așa știe browserul că bifarea uneia le debifează pe celelalte.
Fiecare câmp are un atribut name, care dă numele datei trimise — fără el, valoarea câmpului nu pleacă nicăieri. Iar eticheta <label> asociază un text explicativ câmpului, ca utilizatorul să știe ce completează.
De reținut
- HTML
- limbaj de marcare (nu de programare) în care se descrie structura și conținutul paginilor web prin etichete
- etichetă (tag)
- marcaj scris între paranteze unghiulare care indică browserului ce tip de conținut urmează; majoritatea au pereche de închidere cu bară oblică
- atribut
- informație suplimentară scrisă în eticheta de deschidere, sub forma nume='valoare', de exemplu src la imagini sau href la linkuri
- head și body
- cele două zone ale documentului HTML: head conține informații despre pagină (inclusiv title), body conține tot ce se afișează efectiv
- hyperlink
- legătură către altă pagină sau resursă, creată cu eticheta a și atributul href, care conține adresa destinație
- listă ordonată / neordonată
- ol produce listă numerotată automat, ul listă cu buline; elementele ambelor se marchează cu li
- tabel HTML
- structură de date pe rânduri și coloane: table cuprinde tabelul, tr un rând, td o celulă de date, th o celulă de antet
- CSS
- limbajul foilor de stil, care descrie aspectul paginii (culori, fonturi, așezare), separat de conținutul HTML
- regulă CSS
- construcție formată din selector, proprietate și valoare, de exemplu p { color: red; } — toate paragrafele devin roșii
- formular
- zonă a paginii prin care utilizatorul introduce date (input, textarea, select) și le trimite cu un buton de tip submit
Greșeli frecvente
Greșit: Confundarea etichetei title cu titlul vizibil în pagină
Corect: title din head apare doar pe fila browserului; titlul mare vizibil în pagină se marchează cu h1 în body
Greșit: Folosirea lui href la imagini sau a lui src la linkuri
Corect: src (sursa) aparține etichetei img; href (adresa destinație) aparține etichetei a — inversarea lor strică ambele elemente
Greșit: Imbricare încrucișată a etichetelor, de tip <b><i>text</b></i>
Corect: Etichetele se închid în ordinea inversă deschiderii: <b><i>text</i></b> — ultima deschisă se închide prima
Greșit: Așteptarea ca Enter apăsat în codul sursă să creeze rând nou în pagină
Corect: Browserul comprimă spațiile și trecerile la rând din sursă; rândul nou se obține cu eticheta br sau printr-un nou paragraf p
Greșit: Folosirea butoanelor radio pentru opțiuni multiple
Corect: Radio permite o singură alegere din grup; pentru alegeri multiple simultane se folosesc casetele checkbox
Test — 6 întrebări ca la examen
1. HTML este:
- un limbaj de programare cu instrucțiuni repetitive
- un limbaj de marcare a conținutului paginilor web
- un protocol de transfer al paginilor web
- un program de editare a imaginilor
Vezi răspunsul
un limbaj de marcare a conținutului paginilor web. HTML etichetează conținutul (titluri, paragrafe, imagini) ca browserul să știe ce afișează — limbaj de marcare, fără bucle sau condiții. Protocolul de transfer, distractorul apropiat ca temă, este HTTP — numele asemănător produce frecvent confuzia.
2. Textul scris în eticheta title din head apare:
- ca titlu mare la începutul paginii
- pe fila (tab-ul) browserului
- în subsolul paginii
- doar la tipărirea paginii
Vezi răspunsul
pe fila (tab-ul) browserului. title este informație DESPRE pagină, plasată în head, deci nu se afișează în corpul ei — apare pe fila browserului și la salvarea în favorite. Titlul mare din pagină, capcana clasică, se face cu h1 în body.
3. Care secvență HTML creează corect un link către site-ul școlii?
- <a src='https://www.scoala.ro'>Școala mea</a>
- <img href='https://www.scoala.ro'>Școala mea</img>
- <a href='https://www.scoala.ro'>Școala mea</a>
- <link>https://www.scoala.ro</link>
Vezi răspunsul
<a href='https://www.scoala.ro'>Școala mea</a>. Linkul se creează cu eticheta a și atributul href, care ține adresa destinație; textul dintre etichete e partea vizibilă. Prima variantă — capcana principală — folosește src, atributul imaginilor, în locul lui href.
4. Un tabel HTML conține patru elemente tr, iar în fiecare tr se află câte trei elemente td. Tabelul are:
- 3 rânduri și 4 coloane
- 4 rânduri și 3 coloane
- 12 rânduri
- 4 coloane și 3 antete
Vezi răspunsul
4 rânduri și 3 coloane. tr marchează rândurile — sunt 4; celulele td din fiecare rând dau coloanele — 3. Prima variantă inversează exact rolurile celor două etichete, confuzia standard la citirea structurii unui tabel din cod.
5. Regula CSS p { color: blue; } are ca efect:
- colorarea în albastru a fundalului paginii
- colorarea în albastru a textului tuturor paragrafelor
- colorarea în albastru doar a primului paragraf
- sublinierea cu albastru a titlurilor
Vezi răspunsul
colorarea în albastru a textului tuturor paragrafelor. Selectorul p alege TOATE paragrafele, iar proprietatea color schimbă culoarea TEXTULUI lor. Fundalul — capcana perechii de proprietăți — s-ar schimba cu background-color, nu cu color.
6. Într-un chestionar online, utilizatorul trebuie să-și aleagă UN SINGUR mijloc de transport preferat dintr-o listă de cinci. Elementul de formular potrivit este:
- cinci casete checkbox
- cinci butoane radio cu același atribut name
- cinci câmpuri input de tip text
- cinci butoane submit
Vezi răspunsul
cinci butoane radio cu același atribut name. Butoanele radio din același grup (același name) permit exact o alegere — bifarea uneia le debifează pe celelalte. Checkbox-urile, distractorul simetric, ar permite bifarea mai multor opțiuni simultan, ceea ce contrazice cerința alegerii unice.