HTML (Hypertext Markup Language) este codul utilizat pentru a structura și a afișa o pagină web și conținutul acesteia. De exemplu, conținutul poate fi structurat într-un set de paragrafe, o listă cu puncte, sau folosind imagini și tabele de date. După cum sugerează și titlul, acest articol îți va oferi o înțelegere de bază a limbajului HTML și care este funcția sa.

Ce este HTML, de fapt?

HTML nu este un limbaj de programare; este un limbaj de marcare, și este folosit pentru a spune browserului tău cum să afișeze paginile web pe care le vizitezi. Poate fi la fel de complicat sau la fel de simplu în funcție de cum dorește designerul web. HTML este alcătuit dintr-o serie de elements, pe care le închizi sau în care încadrezi diferite părți ale conținutului pentru a face să apară într-un anumit mod sau pentru a se comporta într-un anumit fel. tags de închidere pot face dintr-un un cuvânt sau o imagine un link către un alt loc, pot italiza cuvinte, și pot face ca dimensiunea fontului să fie mai mare sau mai mică, etc. De exemplu, ia în considerare următoarea linie de conținut:

My cat is very grumpy

Dacă vrei ca linia să iasă în evidență, ai putea specifica că este un paragraf prin includerea acestuia în taguri de paragraf:

<p>My cat is very grumpy</p>

Anatomia unui element HTML

În continuare vei explora acest element paragraf un pic mai mult.

Principalele părți ale elementului nostru sunt:

  1. Tagul de deschidere: Acesta constă din numele elementului (în acest caz, p), înconjurat de paranteze unghiulare de deschidere și închidere. Acestea indică locul în care elementul începe, sau începe să aibă efect — în acest caz unde este începutul paragrafului.
  2. Tagul de închide: Acesta este aceeași cu tagul de deschidere, cu excepția faptului că include un slash înainte de numele elementului. Acesta indică locul în care elementul se termină — în acest caz unde se termină paragraful. Absența includerii unui tag de închidere este una dintre erorile comune de începător și poate duce la rezultate ciudate.
  3. Conținutul: Acesta este conținutul elementului, care în acest caz este doar text.
  4. Elementul: Tagul de deschidere plus tagul de închidere plus conținutul este egal cu elementul.

Elementele pot avea, de asemenea, atribute care arată astfel:

Atributele conțin informații suplimentare despre elementul care nu vrei să apară în conținutul real. Aici, class este numele atributului și editor-note este valoarea atributului. Atributul class îți permite să dai elementului un identificator care poate fi folosit ulterior pentru a adăuga elementului informații despre stil precum și alte lucruri.

Un atribut ar trebui să aibă întotdeauna:

  1. Un spațiu între el și numele elementului (sau atributul anterior, dacă elementul are deja unul sau mai multe atribute).
  2. Numele atributului, urmat de un semn egal.
  3. Ghilimele de deschidere și închidere înconjurând valoarea atributului.    

Imbricarea elementelor

Poți pune elemente în interiorul altor elemente — acesta se numește imbricat. Dacă dorești să afirmi că pisica este foarte morocănoasă, poți include cuvântul „foarte” într-un element <strong>, care înseamnă că cuvântul este puternic accentuat:

<p>My cat is <strong>very</strong> grumpy.</p>

Cu toate acestea, trebuie să te asiguri că elementele tale sunt imbricate corespunzător: în exemplul de mai sus am deschis mai întâi elementul <p>, apoi elementul <strong>, prin urmare trebuie să închizi mai întâi elementul <strong>, iar după elementul <p>. Ceea ce urmează nu este corect.

<p>My cat is <strong>very grumpy.</p></strong>

Elementele trebuie deschise și închise corect, astfel încât acestea să fie clar în interiorul sau exteriorul celuilalt. Dacă se suprapun ca mai sus, atunci browserul tău web va încerca să ghicească ceea ce încerci să spui, și este posibil să obții rezultate neașteptate. Așadar, să nu faci asta!

Elemente goale

Unele elemente nu au conținut, și sunt numite elemente goale. Ia elementul <img> pe care îl ai deja în HTML:

<img src="images/firefox-icon.png" alt="My test image">

Acesta conține două atribute, dar nu există un tag </img> de închidere, și nici un conținut intern. Acest lucru se datorează faptului că un element imagine nu include conținut pentru a avea un efect asupra acestuia. Scopul său este de a încorpora o imagine în pagina HTML în locul în care apare.

Anatomia unui document HTML

Acest lucru încheie elementele de bază HTML, dar acestea nu sunt utile singure. În continuare vei analiza modul în care elementele individuale sunt combinate pentru a forma o întreagă pagină HTML. Să revedem codul pe care l-am pus în exemplul index.html (pe care l-ai întâlnit pentru prima dată în articolul Gestionarea fișierelor):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Aici avem:

  • <!DOCTYPE html> — doctype. În negura timpului, când HTML era la început (aproximativ 1991/2), elementele doctype au fost menite să acționeze ca linkuri către un set de reguli pe care pagina HTML trebuia să le urmeze pentru a fi considerat codul HTML bun ceea ce ar putea înseamna verificarea automată a erorilor și alte lucruri utile. În orice caz, în zilele noastre nimănui nu-i mai pasă de ele, acestea fiind doar un artefact istoric care trebuie să fie inclus pentru ca totul să funcționeze corect. Pentru moment, asta este tot ce trebuie să știi.
  • <html></html> — elementul <html>. Acest element include tot conținutul pe întreaga pagină, și este uneori cunoscut ca elementul root.
  • <head></head> — elementul <head>. Acest element se comportă ca un container pentru toate lucrurile pe care dorești să le incluzi în pagina HTML, care nu este conținutul pe care îl afișezi vizitatorilor paginii tale. Acesta include lucruri precum keywords și o descriere a paginii care vrei să apară în rezultatele de căutare, CSS pentru a stiliza conținutul tău, declarațiile setului de caracter, și altele.
  • <body></body> — elementul <body>. Acesta conține tot conținutul care vrei să-l afișezi utilizatorilor web atunci când vizitează pagina ta, indiferent dacă acesta este text, imagini, videoclipuri, jocuri, înregistrări audio sau orice altceva.
  • <meta charset="utf-8"> — acest element stabilește setul de caractere pe care documentul tău ar trebui să-l folosească UTF-8, care include majoritatea caracterelor din marea majoritate a limbilor scrise de om. În esență, acesta poate manipula orice conținut text pe care l-ai putea introduce. Nu există niciun motiv pentru a nu seta acest lucru, și poate ajuta la evitarea unor probleme mai târziu.
  • <title></title> — elementul <title>. Acesta setează titlul paginii tale, care este titlul care apare în fila browserului în care este încărcată pagina. Este, de asemenea, folosit pentru a descrie pagina atunci când o marchezi cu stea Bookmark, sau o adaugi la favorite.

Imagini

Să ne îndreptăm atenția la elementul <img> din nou:

<img src="images/firefox-icon.png" alt="My test image">

Așa cum am spus înainte, acesta încadrează o imagine în pagina noastră în poziția în care apare. Acest lucru este realizat prin intermediul atributului src (sursă), care conține calea către fișierul nostru imagine.

Am inclus, de asemenea, un atribut alt (alternativ). În acest atribut, se specifică un text descriptiv pentru utilizatorii care nu pot vedea imaginea, posibil datorită faptului că:

  1. Au deficiențe de vedere. Utilizatorii cu deficiențe de vedere semnificative folosesc adesea instrumente numite screen readers pentru a le citi textul alt.
  2. Ceva a cauzat ca imaginea să nu fie afișată. De exemplu, încearcă să schimbi în mod deliberat calea din interiorul atributului src pentru a fi incorectă. Dacă salvezi și reîncarci pagina, în locul imaginii ar trebui să vezi ceva de genul acesta:

Cuvintele cheie despre textul alt sunt „text descriptiv”. Textul alt pe care îl scrii ar trebui să ofere cititorului suficiente informații importante pentru a avea o idee bună despre ceea ce imaginea transmite. În acest exemplu, textul nostru  „My test image” nu este deloc bun. O alternativă mai bună pentru logoul Firefox ar trebui să fie: „The Firefox logo: a flaming fox surrounding the Earth”.

Încearcă să găsești un text mai bun pentru imaginea ta.

Notă: Află mai multe despre accesibilitate accesând pagina de accesibilitate MDN.

Marcarea textului

Acestă secțiune va acoperi câteva dintre elementele HTML de bază pe care le vei folosi pentru marcarea textului.

Titluri

Elementele de titlu îți permit să specifici că anumite părți din conținutul tău sunt titluri — sau subtitluri — ale conținutului tău. În același fel în care o carte are un titlu principal, titluri pentru capitole și subtitluri, la fel și un document HTML le poate avea. HTML conține șase niveluri de titluri <h1><h6> deși în mod obișnuit vei folosi cel mult 3-4:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Acum, încearcă să adaugi un titlu adecvat pentru pagina ta HTML chiar deasupra elementului <img>.

Paragrafe

Așa cum am explicat mai sus, elementele <p> sunt folosite pentru a conține paragrafe de text; le vei folosi frecvent atunci când marchezi conținutul de text:

<p>This is a single paragraph</p>

Adaugă textul tău de probă (ar trebui să-l ai de la Cum va arăta siteul tău?) într-unul sau câteva paragrafe, sub elementul tău <img>.

Liste

O mare parte din conținutul web este format din liste, iar HTML are elemente speciale pentru acestea. Listele de marcare sunt întotdeauna compuse din cel puțin două elemente. Cele mai comune tipuri de liste sunt listele ordonate și neordonate:

  1. Listele neordonate sunt pentru listele în care ordinea elementelor nu contează, cum ar fi o listă de cumpărături. Acestea sunt înconjurate de un element <ul>.
  2. Listele ordonate sunt pentru listele în care ordinea elementelor contează, ca o rețetă. Acestea sunt înconjurate de un element <ol>.

Fiecare element din interiorul listelor este pus în interiorul unui element <li> (element de listă).

De exemplu, dacă vrei să transformi o parte din paragraful următor într-o listă:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

Poți modifica marcajul pentru a face acest lucru:

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Încearcă să adaugi o listă ordonată sau neordonată în pagina ta de exemplu.

Linkuri

Linkurile sunt foarte importante — sunt ceea ce fac ca webul să fie web! Pentru a adăuga un link, trebuie să folosești un element simplu — <a> — „a” fiind prescurtarea de la „ancoră”. Pentru a face textul din paragraful tău un link, urmează acești pași:

  1. Alege un text. Eu am ales textul „Mozilla Manifesto”.
  2. Înconjoară textul într-un element <a>, după cum urmează:
    <a>Mozilla Manifesto</a>
  3. Adaugă elementului <a> un atribut href, astfel:
    <a href="">Mozilla Manifesto</a>
  4. Completează valoarea acestui atribut cu adresa web la care vrei să ducă linkul:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

S-ar putea să obții rezultate neașteptate dacă omiți partea de început a adresei web https:// sau http:// numit protocol. După ce faci un link, fă clic pe acesta pentru a te asigura că te trimite unde dorești.

La început href ar putea părea o alegere destul de obscură pentru un nume de atribut. Dacă întâmpini probleme amintindu-l, amintește-ți că reprezintă referință hypertext.

Adaugă un link în pagina ta, dacă nu ai făcut deja acest lucru.

Concluzie

Dacă ai urmat toate instrucțiunile din acest articol, ar trebui să ai o pagină care arată ca cea de mai jos (poți să o vezi aici):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Dacă te blocezi, poți compara întotdeauna codul tău cu codul nostru de exemplu aflat pe GitHub.

Aici, am discutat o mică parte din HTML. Pentru a afla mai multe, du-te la Tema de învățare HTML.

Document Tags and Contributors

 Contributors to this page: alexandracaulea
 Last updated by: alexandracaulea,