This translation is incomplete. Please help translate this article from English.

În acest articol voi acoperi elementele de bază ale HTML, pentru a începe — voi defini elementele, atributele, și toți ceilalți termeni importanți pe care probabil i-ai auzit și unde se încadrează în limbaj. De asemenea, îți voi arăta cum este structurat un element HTML, modul în care este structurată o pagină HTML tipică, și îți voi explica alte caracteristici importante ale limbajului. Pe parcurs, te vei juca cu HTML, pentru ați mări interesul!

Condiții necesare: Cunoștinte de bază ale calculatorului, instalarea softwareului de bază, și cunoștințe de bază privind gestionarea fișierelor.
Obiectiv:

Pentru a te familiariza cu limbajul HTML, și a exersa scrierea câtorva elemente HTML.

Ce este HTML?

HTML (Hypertext Markup Language) nu este un limbaj de programare; este un limbaj de marcare folosit pentru a spune browserului tău cum să structureze 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 utilizezi pentru a le închide, încadrezi sau marchezi diferite părți ale conținutului pentru a face să apară sau să se comporte într-un anumit mod. tags de închidere pot face dintr-o mică parte din conținut un hyperlink, pentru a lega la o altă pagină de pe web, italiza cuvinte, 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 într-un tag de element (<p>) paragraf:

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

Anatomia unui element HTML

În continuare, să explorăm elementul nostru paragraf:

Principalele părți ale elementului sunt:

  1. Tagul de deschidere: 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: Este ca și 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: 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.

Învățare activă: crearea primului tău element HTML

Editează linia de mai jos în zona Input prin încadrarea acestuia cu tagurile <em> și </em> (pune <em> înaintea lui pentru a deschide elementul, și </em> după acesta, pentru a închide elementul) — acesta ar trebui să evidențieze linia, afișând textul cu stil cursiv! Vei putea vedea modificările în zona Output.

Dacă faci o greșeală, poți oricând să resetezi utilizând butonul Reset. Dacă te blochezi, apasă butonul Show solution pentru a vedea răspunsul.

Îmbinarea elementelor

Poți pune elemente în interiorul altor elemente — acest lucru se numește îmbinare. Dacă dorești să afirmi că pisica este foarte morocănoasă, poți include cuvântul „foarte” într-un element <strong>, ceea ce înseamnă că acest 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 să se deschidă și să se închidă 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ă ce ai încercat să spui, și este posibil să obții rezultate neașteptate. Așadar, să nu faci asta!

Elemente bloc versus inline

Există două categorii importante de elemente în HTML, pe care trebuie să le cunoști — elemente la nivel de bloc și elemente inline.

  • Elementele la nivel de bloc formează un bloc vizibil pe o pagină — vor apărea pe o linie nouă, indiferent de conținutul care fost înaintea acestora și orice conținut care urmează după acesta va apărea tot pe o nouă linie. Elementele la nivel de bloc tind să fie elemente structurale pe pagina care reprezintă de exemplu, paragrafe, liste, meniuri de navigare, subsoluri, etc. Un element la nivel de bloc nu ar fi imbricat în interiorul unui element inline, dar poate fi imbricat în interiorul altui element de nivel de bloc.
  • Elementele inline sunt acelea care sunt conținute în interiorul elementelor la nivel de bloc și care înconjoară doar părți mici ale conținutului documentului, și nu paragrafe întregi și grupări de conținut. Un element inline nu determină apariția unei noi linii în document; aceasta va apărea în interiorul unui paragraf de text, de exemplu un element <a> (hyperlink) sau un element de evidențiere cum ar fi <em> sau <strong>.

Ia în considerare următorul exemplu:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

<em> este un element inline, așa cum poți vedea mai jos, primele trei elemente stau pe aceeași linie fără spații între ele. Pe de altă parte elementul <p> este un element la nivel de bloc, și fiecare element apare pe o linie nouă, cu spațiu deasupra și dedesupt (spațiul se datorează stilului CSS implicit pe care browserul îl aplică paragrafelor). 

Notă: HTML5 a redefinit categoriile de elemente din HTML5: vezi Categoriile de conținut ale elementului. În timp ce aceste definiții sunt mai precise și mai puțin ambigue decât cele care erau înainte, acestea sunt mai dificil de înțeles decât „block” și „inline”,  așa că o să rămân la denumirea aceasta pe parcursul acestui subiect.

Notă: Poți găsi pagini cu referințe utile care includ liste de elemente bloc și inline — vezi Elemente la nivel de bloc și Elemente inline.

Elemente goale

Nu toate elementele urmează modelul de mai sus al tagului de deschidere, conținutul, tagul de închidere. Anumite elemente constau doar dintr-un singur tag, care de obicei este utilizat pentru a insera/încorpora ceva în document în locul în care este inclus. De exemplu, elementul <img> încorporează un fișier imagine pe o pagină în poziția în care este inclus:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Acesta va afișa:

Notă: Elementele goale mai sunt numite uneori elemente void.

Atribute

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

<p class="editor-note">My cat is very grumpy</p>

Atributele conțin informații suplimentare despre elementul care nu vrei să apară în conținutul real. În această situație, atributul class îți permite să dai elementului un identificator care poate fi ulterior folosit pentru a adăuga elementului informații despre stil și alte lucruri.

Un atribut ar trebui să aibă:

  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 semnul egal.
  3. Ghilimele de deschidere și închidere înconjurând valoarea atributului.  

Învățare activă: Adăugarea de atribute unui element

Un alt exemplu de element este <a> — care înseamnă ancoră şi face ca porţiunea de text pe care o înconjoară un hyperlink. Acesta poate avea un număr de atribute, dar mai multe sunt după cum urmează:

  • href: Acest atribut specifică ca valoare adresa web către care vrei ca legătura ta să indice; unde browserul navighează atunci când linkul este apăsat. De exemplu, href="https://www.mozilla.org/".
  • title: Atributultitle oferă informații suplimentare despre link, cum ar fi ce este cu pagina către care creezi legătura. De exemplu, title="The Mozilla homepage". Acesta va apărea ca o sugestie atunci plasezi mouseul asupra elementului.
  • target: Atributultarget specifică contextul de navigare care va fi utilizat pentru a afișa linkul. De exemplu, target="_blank" va afișa linkul într-un nou tab. Omite acest atribut dacă vrei ca linkul să fie afișat în fila curentă.

Editează linia de mai jos în zona Input pentru a crea un link către siteul tău preferat. Mai întâi, adaugă elementul  <a>. În al doilea rând, adaugă atributele href șititle. În cele din urmă, adaugă atributul target pentru a deschide linkul într-un nou tab. Vei putea vedea schimbările actualizate în zona Output. Ar trebui să vezi un link care atunci când treci cu mouseul deasupra afișează conținutul atributului title, iar atunci când se face clic pe acesta, navighează la adresa web a elementului href. Reține că trebuie să incluzi un spațiu între numele elementului și fiecare atribut. 

Dacă faci vreo greșeală, poți oricând să resetezi utilizând butonul Reset. Dacă te blochezi, apasă butonul Show solution pentru a vedea răspunsul.

Atribute booleene

Câteodată vei vedea atribute scrise fără valori — acest lucru este perfect permis. Acestea sunt numite atribute booleene, și pot avea o singură valoare, care este, în general, aceeași cu numele atributului. Ca exemplu, ia atributul disabled, pe care îl poți atribui elementelor de input ale formularelor dacă dorești ca acestea să fie dezactivate (cu gri) astfel încât utilizatorul să nu poată introduce date.

<input type="text" disabled="disabled">

Ca prescurtare, este permis să scrii acest lucru după cum urmează (am inclus și un element input pentru formular ca referință, pentru ați putea forma o idee despre ceea ce se întâmplă):

<input type="text" disabled>

<input type="text">

Ambele vor avea următorul rezultat:

Omiterea ghilimelelor în jurul valorii atributelor

Când te uiți pe World Wide Web, vei întâlni diferite stiluri de marcare ciudate, inclusiv valori de atribute fără ghilimele. Acest lucru este permis în anumite circumstanțe, dar va distruge marcajul în altele. De exemplu, dacă revedem exemplul legăturii noastre de mai devreme, am putea scrie o versiune de bază numai cu atributul href , ca acesta:

<a href=https://www.mozilla.org/>favourite website</a>

Cu toate acestea, de îndată ce adăugăm atributul title în acest stil, lucrurile nu vor merge bine:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

În acest moment browserul va interpreta greșit marcajul tău, considerând că atributul title este de fapt trei atribute — un atribut de titlu cu valoarea „The”, și două atribute booleene, Mozilla și homepage. Acest lucru nu este în mod evident ceea ce s-a dorit, și va provoca erori sau un comportament neașteptat în cod, așa cum se vede în exemplul de mai jos. Încearcă să treci cu mouseul peste link pentru a vedea care este titlul textului!

Sfatul nostru este să incluzi mereu ghilimelele pentru atribute — se evită astfel de probleme, și rezultă un cod mai ușor de citit.

Ghilimele simple sau duble?

În acest articol vei observa că atributele sunt incluse în interiorul unor ghilimele duble. Cu toate acestea, poți vedea ghilimele simple în codul HTML al anumitor persoane. Acesta este pur și simplu o chestiune de stil, și poți alege pe cea care o preferi. Ambele rânduri sunt echivalente:

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

Cu toate acestea, ar trebui să te asiguri că nu le amesteci. Următorul rând va merge prost!

<a href="http://www.example.com'>A link to my example.</a>

Dacă folosești un tip de ghilime în codul HTML, în interiorul acestora poți adăuga celălalt tip de ghilimele:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Dacă dorești să introduci același tip de ghilimele, va trebui să utilizezi entități HTML pentru ghilimele.

Anatomia unui document HTML

Cu acesta se î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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Aici avem:

  1. <!DOCTYPE html>: doctype. În negura timpului, când HTML era la început (aproximativ 1991/2), elementele doctype erau 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 putea înseamna verificarea automată a erorilor și alte lucruri utile. Arătau ceva asemănător cu:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Î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. <!DOCTYPE html> este cel mai scurt șir de caractere care este considerat valid; asta este tot ce trebuie să știi.
  2. <html></html>: Elementul <html>. Acest element include tot conținutul întregii pagini, și este uneori cunoscut ca elementul root.
  3. <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 cuvinte cheie, ș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. Vei învăța mai multe despre acesta în articolul următor din această serie.
  4. <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.
  5. <title></title>: Elementul <title>. Acesta setează titlul paginii tale, care este titlul care apare în fila browserului în care este încărcată pagina și care este folosit pentru a descrie pagina atunci când o marchezi cu stea Bookmark, sau o adaugi la favorite.
  6. <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.

Învățare activă: Adăugarea unor caracteristici într-un document HTML

Dacă dorești să experimentezi scrierea unor coduri HTML pe calculatorul tău local, poți:

  1. Copia exemplul paginii HTML de mai jos.
  2. Crea un nou fișier în editorul tău de text.
  3. Insera codul în fișierul nou creat.
  4. Salva fișierul ca index.html.

Notă: De asemenea poți găsi acest exemplu HTML în zona de învățare MDN pe Github.

Poți deschide acest fișier într-un browser web  pentru a vedea cum arată codul generat, și după editează codul și actualizează browserul pentru a vedea care este rezultatul. Inițial va arăta astfel:

A simple HTML page that says This is my pagePrin urmare, în acest exercițiu, poți edita codul local pe calculatorul tău, așa cum este prezentat mai sus, sau îl poți edita în zona de editare din fereastra de mai jos (în acest caz, fereastra de editare reprezintă doar conținutul elementului <body>). Ne-ar plăcea să implementezi următorii pași:

  • Chiar sub tagul de deschidere al elementului <body>, adaugă un titlu principal pentru document. Acesta ar trebui să fie în interiorul unui tag de deschidere <h1> și a unui tag de închidere </h1> .
  • Editează conținutul paragrafului pentru a include text despre ceva ce te interesează.
  • Asigură-te că oricare dintre cuvintele importante sunt evidențiate cu caractere aldine, încluzându-le în tagul de deschidere <strong> și în tagul de închidere </strong> .
  • Adaugă un link paragrafului tău, așa cum a fost explicat mai devreme în acest articol.
  • Adaudă o imagine documentului tău, sub paragraf, așa cum a fost explicat mai devreme în acest articol. Vei primi puncte bonus dacă reușești să faci legătura la o imagine diferită (fie local pe calculatorul tău, fie în alt loc pe web).

Dacă faci vreo greșeală, poți reseta oricând folosind butonul Reset. Dacă te blochezi, apasă butonul Show solution pentru a vedea soluția.

Spațiul gol HTML

În exemplele de mai sus probabil că ai observat că în codul listat sunt incluse multe spații — acest lucru nu este deloc necesar; următoarele fragmente de cod sunt echivalente:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

Indiferent cât de mult spațiu gol folosești (care poate include spațiu între caractere, dar și spații între linii), interpretor HTML îl transformă într-un singur spațiu la generarea codului. De ce să folosești atât de mult spațiu gol? Răspunsul este lizibilitate — este mult mai ușor de înțeles ce se întâmplă în codul tău dacă este frumos format, și nu doar grupat într-o mare dezordine. În codul nostru HTML , fiecare element imbricat este indentat cu două spații mai mult decât cel care se află în interior. Depinde de tine ce stil de formatare folosești (de exemplu, câte spații pentru fiecare nivel de indentare), dar ar trebui să iei în considerare utilizarea unui tip de formatare.

Referințe entități: includerea caracterelor speciale în HTML

În HTML, caracterele <, >,",' și & sunt caractere speciale. Acestea fac parte chiar din sintaxa HTML, așadar cum poți include unul dintre aceste caractere în textul tău, de exemplu dacă dorești să folosești semnul & sau semnul < , și să nu fie interpretat precum un cod așa cum fac anumite browsere?

Trebuie să folosim referințe de caractere — coduri speciale care reprezintă caractere, și care pot fi folosite în aceste circumstanțe exacte. Fiecare referință de caracter începe cu un & și se încheie cu un punct și virgulă (;).

Caracter literar Referința de caracter echivalentă
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

În exemplul de mai jos, poți vedea două paragrafe, care discută despre tehnologii web:

<p>În HTML, definești un paragraf folosind elementul <p>.</p>

<p>În HTML, definești un paragraf folosind elementul &lt;p&gt;.</p>

În exemplul de mai jos, poți vedea că primul paragraf a rezultat greșit, deoarece browserul consideră că a doua instanță a lui <p> începe un nou paragraf. Al doilea paragraf arată bine, deoarece am înlocuit parantezele unghiulare cu referințe de caractere.

Notă: Un tabel cu toate referințele entităților caracterului HTML pot fi găsite pe Wikipedia: List of XML and HTML character entity references.

Comentarii HTML

În HTML, ca și în majoritatea limbajelor de programare, există un mecanism disponibil pentru scrierea comentariilor în cod — comentariile sunt ignorate de browser și sunt invizibile utilizatorului, și scopul lor este să îți permită să incluzi comentarii în cod pentru a spune cum acesta funcționează, ce fac diferite părți de cod, etc. Acest lucru poate fi extrem de util dacă te întorci la un cod de bază la care nu ai mai lucrat de șase luni, și nu îți mai aduci aminte ce ai făcut — sau dacă dai codul altei persoane pentru a lucra la el.

Pentru a transforma o secțiune de conținut din interiorul fișierului tău HTML într-un comentariu, trebuie să-l încluzi în marcajele speciale <!-- și -->, de exemplu:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

Așa cum poți vedea mai jos, primul paragraf apare în zona output, dar al doilea nu.

Rezumat

Ai ajuns la sfărșitul articolului — sperăm că ți-a plăcut turul limbajului de bază HTML! În acest moment ar trebui să înțelegi cum arată limbajul, cum funcționează la nivel de bază, și să poți scrie câteva elemente și atribute. Acesta este locul potrivit în care să te afli acum, deoarece în articolele ulterioare din acest modul vom parcurge câteva dintre lucrurile peste care te-ai uitat deja dar mai în detaliu, și vom introduce noi caracteristici ale limbajului. Stai aproape!

Notă: În acest moment, pe măsură ce începi să afli mai multe despre HTML, poate îți dorești să explorezi elementele de bază ale Cascading Style Sheets, sau CSS. CSS este limbajul pe care îl folosești pentru a stiliza paginile tale web ( dacă de exemplu schimbi fontul sau culorile, sau modifici aspectul paginii). HTML și CSS merg foarte bine împreună, așa cum vei descoperi în curând.

Document Tags and Contributors

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