Capitolul 2: HTMLTag-uri și Elemente
În forma originală, codul HTML este pus într-un fișier cu extensia .html, încărcat pe un server web. Fișierul este de fapt un fișier text, dar pentru că i-am dat extensia .html, acesta va fi interpretat ca fiind HTML.
Când server-ul primește cerere pentru acel fișier, pur-și-simplu îl transmite browserului. Se mai întâmplă uneori ca serverul să genereze acel cod în timp ce procesează cererea, dar codul efectiv trimis browserului va arăta la fel.
Hai să încercăm un exemplu. Deschide VS Code, și copiază următoarele linii:
<!DOCTYPE html>
<html lang="ro">
<head>
<title>Aici e titlul tab-ului</title>
<meta charset="UTF-8" />
</head>
<body>
Acest text va apărea în browser
</body>
</html>
Salvează într-un fișier numit index.html, și deschide acel fișier în browser.
Tag-uri
Bucățile de text puse între <paranteze ascuțite> se numesc tag-uri.
De multe ori, un tag reprezintă un element în pagină.
Există elemente care pot conține text sau alte elemente, caz în care se folosesc două tag-uri. Știm că se încheie elementul pentru că se pune numele elementului cu slash. De exemplu </head>.
Elementului care conține alte elemente i se spune uneori „părinte”, iar elementele pe care le conține „copii”.
De exemplu: <html> este părinte pentru copiii <head> și <body> .
Unele elemente nu conțin alte elemente, deci conțin un singur tag. În cazul acestor elemente, e bine să punem slash chiar înainte de încheierea tag-ului. De exemplu: <meta />.
Elementele pot avea atribute. Acestea se pun în interiorul tag-ului de la începutul elementului. Un atribut are un nume (de exemplu charset), și o valoare ("UTF-8").
Structura unui fișier HTML
Codul dintr-un fișier HTML trebuie să aibă o anumită structură. Deși browserul încearcă să ghicească ce ai vrut să faci atunci când nu o respecți, e posibil ca alte aplicații care îți citesc codul să nu fie atât de permisive. Sau poate să te deruteze pe tine, sau pe alți programatori care citesc codul.
În continuare, am să îți prezint elementele care trebuie să apară în orice fișier HTML.Deși e util să înțelegi elementele din acest fișier, în realitate nu vei scrie aproape niciodată un asemenea document de la Zero. Uneori e deja generat, alteori poți să îl copiezi de la alte proiecte.
<!DOCTYPE html>
Codul HTML nu este singurul care folosește <paranteze ascuțite>. Aplicațiile care știu să citească un document HTML (precum browserele) pot uneori să știe să citească și alte fișiere scrise în alte limbaje.
De aceea, e o idee bună ca prima linie să spună clar că urmează un document HTML (document type – doctype). În același timp, această linie îi spune browserului că pagina noastră respectă standardele HTML moderne. Dacă lipsește, browserul poate dezactiva anumite funcționalități crezând că pagina a fost scrise pentru browsere vechi.
Să te bucuri că înveți HTML acum, și nu acum 20 de ani. Atunci, această linie era imposibil de reținut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Sau
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
Elementul <html> conține toate elementele de pe pagină, exceptând Doctype.
Nu are mereu atribute, dar e indicat să pui atributul lang, care va fi folosit de către aplicațiile text-to-speech pentru a citi în limba corectă.
Elementul HTML poate avea doar doi copii, fix în această ordine:
<head><body>
<head>
Elementul <head> conține elemente care nu sunt mereu vizibile, dar pot fi folosite de către browsere sau alte aplicații în diferite scopuri.
Nu are niciodată atribute.
<title>
<title>Aici e titlul dumneavoastră</title>
Titlul unui document HTML este afișat de obicei în fereastra browser-ului, sau ca tab. De asemenea, poate fi afișat de către motoarele de căutare precum Google.
Poate conține exclusiv text, și nu are niciodată atribute.
<meta>
Toate paginile HTML trebuie să aibă următorul tag, exact așa cum l-am scris, cât mai aproape de tagul de deschidere <head>:
<meta charset="UTF-8" />
Acesta spune browserului că documentul poate afișa caractere din standardul Unicode. Acest standard conține toate simbolurile din toate limbile din lume. Inclusiv litere cu diacritice (ăâîșț). Fără acest tag, pe unele sisteme nu vom putea folosi toate literele cu diacritice din limba română.
Elementul <meta> mai este folosit și în alte scopuri, dar este și foarte complex. Nu vom avea timp să îl explorăm în acest curs.
Este folosit pentru a defini diferite informații legate de document. Aceste informații pot fi folosite de browser sau alte aplicații care citesc codul.
În carieră, vei întâlni elementul <meta> cel mai mult atunci când lucrezi la site-uri publice, ce trebuie să apară în motoarele de căutare (ex. Google).
Folosind <meta>, cu atribute și valori specifice, ajuți motorul de căutare să înțeleagă despre ce este pagina ta, și poate o va pune mai sus în rezultate.
Această Optimizare pentru Motoare de Căutare se numește SEO (Search Engine Optimization).
<body>
În interiorul elementului <body> se pun toate elementele vizibile pe pagină.
Aproape tot ce vom face va fi acolo.
Elemente
În următoarele lecții, am să vă prezint câteva dintre cele mai folosite elemente din HTML.
Toate vor fi descendente ale elementului <body>.
Am să mă limitez la cele mai utilizate. Dacă vrei o listă completă, cea mai bună sursă este această pagină din MDN.
Un fișier corect HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
Această parte va fi văzută de useri
</body>
</html>