HTML pentru începători: Elemente și structură de bază
Azi, în sfârșit, începem să codăm în HTML! Îți voi prezenta noțiunile esențiale despre HTML și îți voi arăta exact cum funcționează. Ești gata? Hai să-ncepem!
Cum arată un tag HTML
Chiar dacă abia acum afli cum arată HTML-ul, sau dacă ai aflat între timp, e bine să-ți reîmprospătezi memoria.
Textul în HTML se scrie direct, ca orice text din Word. Dar în momentul în care scrii Hyper Text de Markup, adică în momentul în care descrii structura și sensul textului din documentul tău pentru a-l pregăti să fie afișat într-o pagină web, atunci ai nevoie de ceea ce se numește „tag” sau „element”.
Tag-ul e compus dintr-un simbol „mai mic” – < – și unul „mai mare” – > – tot ce e între e un tag.
Numele tag-ului e reprezentat de primul cuvânt din interiorul simbolurilor ăstora: <tag>.
De obicei, tag-urile sunt folosite să încapsuleze conținut, și din cauza asta multe tag-uri au o bucată de început și una de sfârșit. Spre exemplu, dacă vrei să definești ca titlu principal al unei pagini HTML fraza „Despre mine”, va trebui să pui un tag de deschidere la început
<h1>Despre mine
și apoi un tag de închidere la final
<h1>Despre mine</h1>
Sau pe caz general:
<numeletagului>conținutul tag-ului</numeletagului>
Tehnica asta se numește ÎNCAPSULARE.
Diferența dintre tag-ul de deschidere și cel de închidere este slash-ul care precede numelui tag-ului din cel de închidere: </h1>
În cazul ăsta, numele tag-ului este h1, care conferă textului pe care-l încapsulează sensul de titlu principal al paginii.
Așadar, tot ce este între <h1> și </h1> reprezintă acum textul titlului principal al paginii.
v– text -v
<h1>Despre mine</h1>
^——- hypertext ——-^
Această încapsulare poate fi multiplă: în interiorul unui tag poți introduce alt tag, spre exemplu:
<h1>De ce e încă nevoie <strong>să porți mască</strong> în locuri aglomerate?</h1>
În exemplul ăsta, ai două tag-uri: acel h1 pe care l-am folosit adineauri, care semnifică, sau are valoarea semantică de titlul principal al paginii, și al doilea tag, numit strong care vine ad literam din engleză și înseamnă „puternic” – în cazul unui text, apare ca bold, important.
Tag-ul h1 conține atât text, cât și al doilea tag, strong. Asta e o practică destul de comună în momentul în care scrii HTML și va trebui să te obișnuiești cu ea.
Mai există și tag-uri HTML care nu încapsulează un text sau alte tag-uri, așa cum am văzut mai sus. Aceste tag-uri mai rare, mai speciale, se numesc tag-uri „self-closing”, care în engleză înseamnă că se „auto-închid”. Spre exemplu:
<br />
Tag-ul br, are valoarea semantică, adică sensul, de break, sau line break, care-nseamnă că orice ai înainte și orice ai după vor fi separate de o trecere pe un rând nou, de un spațiu. În principiu, tag-ul ăsta ar fi putut fi scris așa:
<br></br>
dar între tag-ul de deschidere și cel de închidere nu ar putea exista niciodată nimic. Așa că standardele sugerează să prescurtezi tag-ul în varianta în care incluzi numele din tag-ul de deschidere și slash-ul din tag-ul de închidere, cu un spațiu între ele, așa cum am arătat mai sus:
<br />
Genul ăsta de tag-uri se mai numesc și tag-uri „goale”.
Tag-urile folosite de sine stătător sunt foarte valoroase. Ele dau structură și sens textului pe care-l încapsulează. Dar în multe cazuri au nevoie de niște nuanțe și de niște informații adiționale pe care web developer-ul, adică tu, le poate da fiecărui tag în parte pentru a-l îmbogăți de și mai mult sens.
Atribute ale elementelor HTML
Hai să vorbim despre proprietăți sau atribute ale tag-urilor HTML.
Un exemplu simplu ar fi tag-ul <img />
Acest tag e folosit atunci când vrei să introduci o imagine într-un document, așa cum cred că intuiai și tu după nume. Să presupunem că vreau să includ imaginea cu numele imagine.jpg în interiorul unei pagini web. Dacă imaginea e în același loc cu fișierul HTML, singurul mod prin care pot convinge tag-ul <img /> să afișeze această imagine e dacă-i dau o proprietate, care reprezintă sursa imaginii, deci se notează cu src:
<img src="imagine.jpg" />
O să vezi că tag-ul a făcut loc în interiorul lui acestei proprietăți. Numele tag-ului rămâne întotdeauna primul, deci img definește tipul tag-ului, însă imediat după, separat de un spațiu, apare primul atribut: src="imagine.jpg"
Dacă observi, conținutul atributului sau proprietății HTML numită src, de la sursa imaginii, este la rândul lui încapsulat în niște ghilimele (pot fi simple sau duble). Și ca să atribui valoarea, se folosește semnul egal, așadar:
atribut="valoare"
pe caz general.
Un tag poate avea mai multe atribute, deci dacă ar fi să generalizăm felul cum arată un tag, ar fi:
<tag atribut1="valoare1" atribut2="valoare2" />
Unele atribute, mai nou, pot doar să „existe” fără să aibă neapărat o valoare (însăși existența lor reprezentând o valoare de adevăr care schimbă comportamentul acelui tag). spre exemplu:
<button>Fă ceva!</button> – pe ăsta vei putea da click
<button disabled>Fă altceva!</button> – pe ăsta NU vei putea da click
Scrierea asta e echivalentă cu a scrie:
<button disabled="disabled">Fă altceva!</button> – pe ăsta NU vei putea da click
Există foarte multe feluri de atribute sau proprietăți ale elementelor HTML. Două din cele mai importante, care ajută la identificarea elementelor, sunt clasele și identificatorii, adică:
<p class="ParagrafPrincipal">Acesta e paragraful principal.</p>
<p id="paragraf-2">Acesta e al doilea paragraf.</p>
Identificatorii sunt foarte utili în momentul în care vrei să distingi între mai multe elemente de același fel, în același context sau în contexte diferite. Clasele sunt folosite cu preponderență în CSS pentru a stiliza elementele într-un anume fel, iar ID-urile pot fi folosite și în CSS (deși nu e recomandat), însă sunt foarte utile în JavaScript pentru a adăuga funcționalitate specială unor elemente din HTML.
Există câteva reguli de reținut când discutăm de clase și ID-uri.
În primul rând, nici clasele nici ID-urile nu se pot scrie folosind spații, simboluri mai mic sau mai mare, egal-uri, alt fel de ghilimele decât cele folosite de proprietate. În plus, nici clasele nici ID-urile nu pot începe cu o cifră, doar cu litere mari sau mici. Asta înseamnă că dacă vrei să transformi fraza „Buton principal activ” într-o clasă sau un ID, există câteva convenții care te ajută să faci asta:
ButonPrincipalActivse numește Pascal Case și elimină transformă toate simbolurile non-alfanumerice, iar separarea între cuvinte se face prin majuscule, cu prima literă mare.butonPrincipalActivse numește Camel Case, și e identic cu Pascal Case, cu excepția faptului că prima literă e mică.buton-principal-activse numește Snake Case și transformă simbolurile non-alfanumerice în liniuțe, iar separarea între cuvinte se face prin aceste liniuțe, exclusiv cu litere mici.
Apoi, clasele pot fi puse pe oricâte elemente fără probleme, și pot exista mai mult de o clasă pe fiecare element. Când le scrii, le separi prin spațiu, așa:
<p class="ParagrafPrincipal ClasaDoi ClasaTrei">Acesta e paragraful principal.</p>
Asta înseamnă că proprietatea class este de fapt o listă de clase pe care le poți aplica unui element, care poate avea un singur element, adică o singură clasă, sau mai multe.
În schimb, ID-ul este tot timpul UNIC în document. Elementele nu pot avea mai mult de un ID, și niciun alt element nu poate avea exact același ID, ca să fie unic.
Nu în ultimul rând, ca developer ai datoria să te asiguri că toate clasele și ID-urile pe care le scrii au un sens ușor de dedus din context. O clasă abstractă de genul „x729Ap-” nu are niciun sens și ar fi ideal să nu existe în HTML-ul scris de tine.
Acum că ai aflat care sunt atomii, elementele cele mai des întâlnite în momentul în care scrii HTML, mai exact tag-urile, și fiindcă ai aflat și care e anatomia oricărui tag, inclusiv partea de proprietăți sau atribute, hai să vorbim puțin de pagina HTML, de fișierul HTML pe care-l edităm împreună aici în VSCode.
Structura și formatarea unui document HTML
Partea interesantă a HTML-ului este că el nu se vede cu ochiul liber de cineva care accesează o pagină web, îl vezi doar tu, persoana care-l codează. Poți testa și tu această teorie chiar acum. Deschide folder-ul de pe desktop pe care l-am făcut în video-ul trecut și dă dublu click pe fișierul HTML pe care l-am creat atunci. Vei vedea ce văd și eu acum pe ecran: o pagină albă cu text negru care conține textul, content-ul fișierului, dar nu și tag-urile. Tag-urile sunt invizibile pentru ochiul uman, dar ajută browser-ul să dea sens și uneori chiar să schimbe design-ul unor elemente.
Din câte vezi, există diferențe între felul cum arată conținutul tag-ului h1 de conținutul tag-ului p, care este un simplu paragraf de text, pentru că browser-ul are în baza lui de date internă o modalitate standardizată de a afișa vizual unele tag-uri, cum este h1, care apare ca fiind mai mare și bold față de paragraf. Aspectul vizual se poate modifica oricând din CSS, dar despre asta vorbim în modulul următor. Momentan, hai să ne concentrăm pe cum ar trebui să fie structurată o pagină web din punctul de vedere al HTML-ului.
Înainte de a începe să discutăm de structură, voi face în VSCode un fișier nou HTML, pe care-l voi denumi structura.html și-l voi salva în același folder în care am salvat și fișierul creat în proiectul de GIT făcut împreună în video-ul anterior, ca să putem folosi în continuare GIT să controlăm modificările și să validăm temele.
Așadar, primul tag pe care ar trebui să-l găsești într-o pagină HTML este tag-ul care definește faptul că pagina pe care o construiești este de tipul HTML5, care e cea mai nouă variantă de HTML. El arată așa:
<!DOCTYPE html>
Vei observa că acest tag e mai special, pentru că numele lui începe cu semnul exclamării, și se scrie cu litere mari – spun asta pentru că e singura excepție de tag care se scrie cu majuscule, restul, fără excepție, se scriu cu litere mici și atât. !DOCTYPE e un tag special, folosit doar în anumite cazuri. În contextul ăsta, e vorba de un soi de preambul al HTML-ului, un mesaj pentru browser, o directivă care să-i spună că documentul curent este de tip HTML5. Asta se întâmplă prin atributul simplu html.
Acest !DOCTYPE în teorie ar trebui să lipsească (pentru că prin definiție toate paginile făcute acum sunt HTML5), dar fiindcă HTML este compatibil cu versiunile anterioare, trebuie să suporte și convențiile anterioare – în trecut, fără !DOCTYPE nu se randa corect pagina HTML, așadar îl folosim și noi astăzi.
Apoi, dacă ții minte principiul de încapsulare, tot ce urmează în documentul HTML este încapsulat în tag-ul foarte logic și ușor de înțeles, numit… HTML:
<!DOCTYPE html>
<html></html>Acesta este elementul principal al paginii HTML, în mod evident. El se mai numește și elementul principal sau rădăcină (adică „root” în engleză). Ține minte aspectul ăsta, o să te ajute în viitor.
Despre nesting sau relații de familie în HTML
Practic, tot conținutul paginii noastre va fi introdus între tag-ul de început și cel de sfârșit numit html. E momentul să vorbim despre conceptul de tag descendent, sau tag copil. În momentul în care încapsulezi un element direct în alt element, acesta devine copilul și tag-ul original devine părinte. Tehnica asta se numește „nesting”, și vine din engleză de la cuvântul „nest” care înseamnă „cuib”. Deci încapsularea e ca și cum ai „cuibări” un element în altul. Spre exemplu:
<h1>De ce e încă nevoie <strong>să porți mască</strong> în locuri aglomerate?</h1>
Aici, tag-ul <h1> este părintele tag-ului <strong>, iar tag-ul <strong> este copilul tag-ului <h1>.
Dar dacă ar fi să mai încapsulăm un cuvânt în alt tag? Spre exemplu:
<h1>De ce e încă nevoie <strong>să porți mască</strong> în <em>locuri aglomerate</em>?</h1>
În cazul ăsta, tag-ul <em> este și el copilul lui <h1>, la fel ca <strong>. Asta-nseamnă că <em> și <strong> au devenit frați (sau siblings, în engleză). Dar dacă mai avem un tag în exemplul ăsta?
<h1>De ce e încă nevoie <strong>să <span>porți</span> mască</strong> în <em>locuri aglomerate</em>?</h1>
În cazul ăsta, structura a devenit următoarea:
<h1> este părintele tag-urilor:
|--- <strong> iar acest tag are la rândul lui un copil:
|------- <span>
|--- <em>
Tag-ul <span> este deci copilul lui <strong>, care este la rândul lui copilul lui <h1>. În cazul ăsta, <h1> este strămoșul lui <span>, iar <span> este descendentul lui <h1>.
Felicitări, ai învățat un concept de bază din HTML, numit descendență. O să-l vezi de acum încolo peste tot, în toate fișierele HTML la care vei lucra. Și vorbind de fișiere, să ne întoarcem la documentul nostru HTML și la structura lui de bază:
<!DOCTYPE html><html></html>
Sau în scrierea alternativă:
<!DOCTYPE html>
<html>
</html>Vei observa că în cazul ăsta am pus tag-ul de deschidere și cel de închidere al HTML-ului pe rânduri diferite, ceea ce e perfect OK. Nu toate tag-urile trebuiesc scrise pe același rând, unele pot fi despărțite de unul sau mai multe rânduri între ele, așa cum vei vedea imediat.
Indentarea documentelor HTML
Mai mult decât atât, dacă un tag are copii sau descendenți, dacă decizi să îi scrii pe rânduri diferite, poți adăuga niște spațiu la începutul rândului, pentru a semnala faptul că un tag este descendentul altuia. Tehnica asta se numește „indentare” și e foarte importantă pentru a putea citi ușor documentul HTML și a-l păstra cât mai arătos și ușor de scanat de ochiul tău și al altor programatori web cu care vei lucra în viitor.
Revenind, tag-ul <html> are tot timpul exact doi descendenți, doi copii, adică două tag-uri încapsulate imediat sub tag-ul curent. Nici mai mult, nici mai puțin. Copii sunt <head> – de la cap, și <body> – de la corp:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>Despre „capul” și „corpul” documentelor HTML
Așa cum sunt așezate și în corpul omului, capul vine întotdeauna înaintea corpului dacă te uiți de sus în jos, și deci ordinea tag-urilor contează în acest context, iar <head> va fi întotdeauna înainte de <body>. Și cum ziceam și mai sus, am adăugat 4 spații la începutul rândului unde le-am scris pe ambele ca să simbolizez faptul că <head> și <body> sunt copii ai lui <html>, care are 0 spații de indentare. Aceste 4 spații sunt o convenție, unii folosesc doar 2 spații, unii folosesc simbolul tab, etc.
Tag-ul <head> differă de <body> prin natura conținutului lor, prin semantica lor. În <head> vom lista atribute globale ale întregului document, cum este titlul acestuia:
<!DOCTYPE html>
<html>
<head>
<title>Titlul documentului HTML curent</title>
</head>
<body></body>
</html>În <body> trebuie introdus conținutul care se vede cu ochiul liber al documentului. Dacă e să ne luăm după exemplul de mai devreme, putem pune în <body> un titlu principal și un paragraf de text, plus o imagine.
Fac o mică paranteză aici pentru că vreau să-ți spun că vom vorbi foarte în detaliu despre fiecare din tag-urile pe care le folosesc în exemplele astea în lecțiile viitoare, pentru că avem mai multe lucruri de explorat la fiecare în parte, dar pentru moment, hai să creăm restul documentului HTML cu structura la care ne-am decis:
<!DOCTYPE html>
<html>
<head>
<title>Curs de HTML, partea introductivă</title>
</head>
<body>
<h1>Ce este HTML-ul?</h1>
<p>Pe scurt, un limbaj de marcaj, o tehnologie web și un standard. În contextul unui website, HTML-ul reprezintă conținutul, structura conținutului și sensul conținutului, cum ziceam și în video-ul general despre tehnologii web.</p>
<img src="https://i.ytimg.com/vi/WXf89BGC-kk/maxresdefault.jpg" width="320" height="180" alt="Thumbnail de la video-ul despre GIT" />
</body>
</html>Asta e structura ideală recomandată pentru un document HTML. Un aspect interesant al HTML-ului însă e că dacă nu ai deloc structura asta implementată și scrii direct tag-uri HTML într-un fișier, ele vor fi tratate ca și cum ar face parte din <body> și vor fi randate de browser fără probleme. Dar dacă există niște standarde, hai să ne ținem de ele, nu? :)
Tot legat de standarde, din ce-am scris adineauri lipsesc două elemente importante pe care mulți le omit. Eu o să mă asigur că tu n-o s-o faci.
Primul element este definiția limbii în care e scris documentul curent. Asta se traduce prin atributul lang pus în interiorul tag-ului de deschidere al HTML-ului:
<!DOCTYPE html>
<html lang="ro">
<head>
<title>Curs de HTML, partea introductivă</title>
</head>
<body>
<h1>Ce este HTML-ul?</h1>
<p>Pe scurt, un limbaj de marcaj, o tehnologie web și un standard. În contextul unui website, HTML-ul reprezintă conținutul, structura conținutului și sensul conținutului, cum ziceam și în video-ul general despre tehnologii web.</p>
<img src="https://i.ytimg.com/vi/WXf89BGC-kk/maxresdefault.jpg" width="320" height="180" alt="Thumbnail de la video-ul despre GIT" />
</body>
</html>Al doilea lucru de care să ținem cont este definiția setului de caractere folosit de pagină în interiorul conținutului (deci nu doar în fișier – asta am definit deja în VSCode), ca o instrucțiune, o directivă pentru browser să știe cum interpretează simbolurile din fișier. Așa cum am stabilit deja, setul ideal de caractere este UTF-8, și acesta se definește în felul următor:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<title>Curs de HTML, partea introductivă</title>
</head>
<body>
<h1>Ce este HTML-ul?</h1>
<p>Pe scurt, un limbaj de marcaj, o tehnologie web și un standard. În contextul unui website, HTML-ul reprezintă conținutul, structura conținutului și sensul conținutului, cum ziceam și în video-ul general despre tehnologii web.</p>
<img src="https://i.ytimg.com/vi/WXf89BGC-kk/maxresdefault.jpg" width="320" height="180" alt="Thumbnail de la video-ul despre GIT" />
</body>
</html>Gata, asta e structura completă și corectă a unei pagini HTML.
Și acum să vedem cum arată varianta paginii create de noi pe care o vede un vizitator al site-ului pe care va exista acea pagină. Așa cum ziceam, am creat documentul curent în același folder în care am salvat documentul anterior, pentru că la final îl vom adăuga și pe ăsta în proiectul nostru din GIT (opțional). Îl voi salva apăsând Ctrl + S, iar apoi voi deschide folder-ul cu Windows Explorer și voi da dublu click pe el, ca să-l deschid cu Chrome. Dacă nu se deschide cu Chrome, dă click dreapta pe el, Open With și selectează Google Chrome din listă. Și iată, odată deschis în browser, documentul nostru are elementele pe care le-am adăugat mai devreme: un titlu, un paragraf și o imagine. Conținutul din <head> nu se vede cu ochiul liber. Tag-ul <title> este o excepție, pentru că browser-ul folosește textul de aici ca să dea nume tab-ului în care ne aflăm. Iată, dacă dai hover peste tab, vei vedea textul pe care l-am scris în <title>.
Vom vorbi mai târziu despre rolul și importanța <head>-ului în HTML, dar pe scurt, ce e în <head> nu se vede direct, dar are implicații majore și globale asupra documentului, iar ce e în <body> se vede direct.
Adăugarea fișierului curent în GIT-ul personal din GitHub
Felicitări, ai făcut al doilea fișier HTML din acest curs! Pasul următor e complet opțional, dar hai să-l adugăm și-n GIT. Deschide terminalul cu Ctrl + Shift + Tildă (~) și tastează tradiționalul:
git status
O să vezi că ai un fișier neadăugat în GIT, așa cum e și normal. E vorba chiar de fișierul pe care l-am făcut acum. Îl adăugăm în GIT folosind comanda:
git add .
Și apoi facem un commit special pentru acest fișier:
git commit -m "feat: fisier de structura"
Și nu în ultimul rând, împingem modificările noastre pe serverul de GIT:
git push
Acum ca să validăm că e totul în regulă, mai dăm o dată comanda:
git status
Ar trebui să primim mesajul că suntem „up to date”, adică la zi cu ce e în GitHub.
Recapitulare și temă
Felicitări, ai mai parcurs un video din curs! Azi am învățat despre HTML: ce este, de când există și la ce folosește. Apoi am explorat cele mai de bază componente ale unui document HTML: tag-urile, și am văzut cum se structurează corect un document HTML.
Ăsta e momentul perfect să îți dau o temă pentru acasă.
- Creează un document nou HTML în care să scrii poezia ta preferată.
- Folosește doar tag-urile
<h1>pentru titlu,<p>pentru paragraf sau strofă și<br />pentru rând nou în interiorul unui paragraf, sau vers. - Bagă-l în structura standard HTML despre care am discutat în video.
- Apoi adaugă-l în repository-ul tău și dă-mi în comentarii numele repository-ului folosind regula discutată în video-ul trecut: fără
https://github.com/
Resurse adiționale
Dacă vrei să aprofundezi noțiunile prezentate în articolul curent, poți citi următoarele resurse utile (în engleză):
- Bazele HTML-ului de la Mozilla Developer Network
- Definiția HTML-ului de la freeCodeCamp
- Despre standardul HTML de la World Wide Web Consortium
Toate cursurile de Front End Development pentru începători pe care le-am scris până acum
- Modulul 1: Noțiuni introductive
- Modulul 2: HTML pentru începători
- Introducere și istoria HTML-ului
- Elemente și structură de bază (articolul curent)
- Block vs inline, link-uri și semantica textului
- Istoria imaginilor digitale, formate de imagini și imagini responsive
- Decoratori și elemente de design
- Mai multe în curând…
- Modulul 3: CSS pentru începători
- În curând…
- Modulul 4: HTML pentru avansați
- În curând…
- Modulul 5: CSS pentru avansați
- În curând…
- Modulul 6: JavaScript pentru începători
- În curând…
- Modulul 7: Alte noțiuni utile
- În curând…
Scrie-mi mai jos în comentarii cum ți se pare cursul până acum și ce alte module ai vrea să mai adaug pe viitor!
