Cursul pe care îl veţi studia acum se numeşte HTML & CSS Fundamentals.

În
spatele acestei denumiri se ascund două limbaje foarte interesante, fără de care
nu se poate imagina crearea aplicaţiilor web şi nici dezvoltarea front-end. Este
vorba de limbajele HTML şi CSS. În cursul introductiv al acestui program, am
ilustrat deja utilizarea de bază a acestor limbaje, dând un exemplu de creare a
primului document HTML. Acum a sosit momentul să vă îmbunătăţiţi
cunoştinţele prin studierea postulatelor de bază ale acestor două limbaje. Prin
urmare, prima parte a acestui curs va fi dedicată familiarizării cu limbajul HTML,
în timp ce a doua parte se va ocupa cu bazele stilizării documentelor HTML,
folosind limbajul CSS.

Ce este HTML?
HTML este prescurtarea care reprezintă acronimul de la noţiunea HyperText Markup Language,
care este un limbaj de bază, descriptiv, pentru crearea documentelor HTML. Din denumirea
acestei noţiuni putem trage concluzii semnificative despre limbajul HTML.

HyperText Markup Language, este alcătuit din două noţiuni:

● HyperText;
● Markup Language.

Noţiunea Hypertext se referă la modul în care paginile sunt reciproc conectate prin folosirea
linkurilor care direcţionează la alte documente HTML. Hypertext este noţiunea care marchează
un astfel de link, adică o astfel de legătură.

HTML este limbajul marcajelor, respectiv aşa-numitul limbaj Markup (engl. markup language),
ceea ce înseamnă că HTML se foloseşte pentru execuţia marcării documentului text prin
folosirea tagurilor, care îi comunică browserului în ce mod trebuie să afişeze conţinutul.

Care este rolul HTML-ului?

Limbajul html se foloseşte pentru definirea structurii unui document HTML. Pentru efectuarea
unei astfel de sarcini, limbajul HTML deţine un număr mare de diferite taguri folosite pentru
definirea secţiunilor din documentul HTML. Prin combinarea diferitor taguri se construieşte
structura unui document HTML, pe baza căruia programul care va parsa un astfel de document
(cel mai des browserul web), ştie modul în care trebuie să afişeze pagina.

O simplă pagină HTML are următoarea structură:

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
luctus sapien magna, eu sollicitudin augue porttitor nec. Nulla
pharetra, mi eget maximus posuere, quam quam malesuada metus, a
volutpat mauris arcu id lorem.</p>

<p>Vivamus neque felis, pharetra sed odio a, mattis lacinia neque.

Donec id urna quam. Fusce ac risus vel diam vestibulum maximus vel
sit amet erat.</p>

Analizând imaginea de mai sus, putem trage concluzia că textul din cadrul tagului h1 este
interpretat de browser într-un mod special - acesta este îngroşat şi scris cu un font mai
mare.

În cadrul codului HTML, din exemplu, sunt definite două elemente de tip paragraph, folosind
tagurile <p>. Aceste elemente sunt interpretate de browser ca paragrafe, iar în imaginea 1.1
se poate vedea că şi conţinuturile acestor taguri sunt prezentate ca paragrafe separate.
 Din cele prezentate până acum, putem trage concluzia că pe baza tagurilor HTML, browserul
efectuează parsarea documentului HTML şi creează o afişare corespunzătoare, iar acest
proces se poate vedea în imaginea de mai jos

Tagurile HTML nu sunt singurul element de bază al limbajului HTML. Pe lângă taguri, HTML este
alcătuit şi din elemente şi atribute HTML. Prin urmare, principalii factori care construiesc limbajul
HTML, şi cărora le vom dedica în continuare această lecţie, sunt:

● tagurile;
● elementele;
● atributele.

Tagurile HTML
Limbajul HTML deţine trei tipuri de taguri:

● taguri de deschidere;
● taguri de închidere;
● taguri cu autoînchidere.

Exemplul unui tag HTML ar fi următorul:

 1 <h1>

De asemenea, un tag HTML este şi:

1 </h1>

Se poate observa o anumită diferenţă dintre cele două taguri prezentate. Al doilea tag prezentat
conţine caracterul slash în faţa denumirii sale, ceea ce îl face să fie un tip special de tag, numit
tag de închidere. Tagul <h1> se numeşte tag de deschidere.

Tagul de deschidere şi cel de închidere există pentru a încadra conţinutul şi pentru a-i oferi o
semnificaţie specială. Astfel, tagurile <h1> şi </h1> definesc titlul documentului HTML. Aceste
taguri şi conţinutul lor sunt afişate în imaginea de mai jos

În imaginea 1.3 diferite părţi sunt marcate cu diferite numere şi culori. Numerele reprezintă
următoarele noţiuni:

1. tagul de deschidere: <h1>

2. conţinutul: This is heading
3. tagul de închidere: </h1>

Cu albastru sunt colorate caracterele semnelor mai mare şi mai mic (< şi >), care se folosesc
pentru marcarea începutului, respectiv sfârşitului tagului.

Cu galben sunt colorate caracterele care definesc denumirea, adică tipul de tag. În exemplul din
imaginea 1.3, tipul de tag este h1.

Cu roşu este colorat caracterul slash, care defineşte tagul de închidere.

Pe lângă tagurile de deschidere şi închidere, HTML recunoaşte şi un tip special de taguri numite
taguri cu autoînchidere. Tagurile cu autoînchidere sunt cele care încep şi se termină în acelaşi
timp. Exemplul unui tag cu autoînchidere este următorul:

1 <br>

În exemplu este prezentat tagul <br> cu autoînchidere cu care se obţine trecerea într-un rând nou
într-un document HTML.

Elementele HTML
Până acum am defini doar primul dintre cei trei factori de bază ai limbajului HTML - tagurile
HTML. Tagurile HTML, cărora le-am dedicat partea de sus din text, se folosesc pentru
construcţia elementelor HTML. Un element HTML începe cu tagul de deschidere şi se termină cu
un tag de închidere, în caz că elementul are conţinut. Astfel, un element HTML poate arăta ca în
imaginea

Tagul de deschidere în imaginea 1.4 este <h1>, iar cel de închidere este </h1>, în timp ce
<h1>This is a heading</h1> este elementul de titlu.

Există şi elemente HTML care nu trebuie închise, tocmai acestea sunt elementele HTML care se
construiesc prin utilizarea tagurilor cu autoînchidere. Un astfel de element este şi:

1 <br>

Tocmai este prezentat tagul cu autoînchidere pentru trecerea într-un rând nou în cadrul
documentului HTML. Pe lângă faptul că este vorba de un tag cu autoînchidere, este vorba şi de
un element HTML valid. În general, <br> nu este singurul tag cu autoînchidere. Limbajul HTML
recunoaşte încă multe taguri de acest tip, iar pentru toate este valabilă o regulă identică - acestea
sunt, totodată, şi taguri cu autoînchidere şi elemente HTML.
Atributele elementelor
Pe lângă elemente şi taguri, baza limbajului HTML o alcătuiesc şi atributele care pot apărea pe
elementele HTML. Fiecare element HTML poate să conţină atribute. Atributele asigură informaţii
suplimentare despre elementele HTML şi întotdeauna se definesc pe tagul corespunzător al
elementului HTML sau pe tagul cu autoînchidere, dacă elementul nu deţine conţinut. Atributele
apar, de obicei, în formă de perechi de chei şi valori, unde denumirea atributului este cheia.
Elementul HTML prezentat mai devreme, care reprezintă titlul în documentul HTML, cu un atribut
definit poate arăta astfel:

1 <h1 id="main-heading">This is a heading</h1>

Imaginea 1.5. Elementul HTML cu atribut

În imaginea 1.5, cu roşu este prezentată denumirea atributului, în timp ce cu albastru este
prezentată valoarea sa.

Denumirile atributelor nu sunt sensibile la majuscule şi minuscule. Astfel, următoarele denumiri ale
atributelor sunt complet analoage:

● id
● Id
● ID

Totuşi, organizaţia W3C recomandă ca atributele să se scrie întotdeauna cu minuscule.

Elementele HTML nu sunt limitate la un atribut cum este cazul în imaginea 1.5. Prin urmare, pe un
element HTML se poate găsi şi un număr mai mare de atribute diferite:

1 <h1 id="main-heading" class="heading" >This is a heading</h1>

De asemenea, există şi atribute obligatorii şi opţionale. Cu alte cuvinte, anumite elemente HTML
trebuie să aibă anumite atribute specifice (de exemplu, elementul img trebuie să deţină atributul
src şi alt ceea ce vom vedea într-una din viitoarele lecţii). Într-o astfel de situaţie, putem spune
că atributele alt şi src sunt atibute obligatorii pentru elementul img.
Când vine vorba de valorile atributelor, limbajul HTML nu necesită ca ele să se scrie în ghilimele
dacă nu conţin spaţii goale. Totuşi, şi aici întâlnim recomandarea organizaţiei W3C care spune că
pentru definirea valorilor atributului trebuie folosite ghilimelele duble, ca în exemplul din imaginea
1.5. Dacă valoarea atributului conţine ghilimele duble, atunci este obligatorie utilizarea ghilimelelor
simple/apostrofuri pentru definirea valorii atributelor, ca în exemplul de mai jos:

1 <p title='Mark "Torpedo" Nelson'>

Apostrofurile/ghilimelele simple sunt folosite pentru încadrarea valorii atributului, deoarece în

cadrul valorii atributului apar ghilimelele duble.

Aceeaşi regulă este valabilă şi într-o situaţie inversă - când în cadrul valorii atributului se află
ghilimelele simple/apostrofurile.

1 <p title="Mark 'Torpedo' Nelson">

De această dată, pentru definirea valorii atributului sunt folosite ghilimele duble, pentru că în cadrul
valorii atributului apar ghilimele simple/apostrofuri.

Atribute HTML globale

Diferite elemente HTML deţin un set de diferite atribute care se pot defini pe ele. Totuşi, anumite
atribute HTML pot apărea pe orice element HTML. Astfel de atribute se numesc atribute HTML
globale. În următoarele lecţii ne vom familiariza cu diferite atribute de acest tip. Oricum, cele mai
cunoscute sunt class, id, style şi title.

● class – defineşte una sau mai multe clase ale elementelor; clasele se folosesc pentru
găsirea elementelor în timpul stilizării sau manipulării programabile prin folosirea
limbajului JavaScript; mai multe elemente HTML pot fi marcate prin utilizarea aceleiaşi
clase.
● id – defineşte un identificator unic al elementului; id, la fel ca şi atributul class, se
foloseşte pentru găsirea elementelor în timpul stilizării sau manipulării prin folosirea
limbajului JavaScript; totuşi, atributul id determină în mod unic un element, ceea ce
înseamnă că în cadrul unui document HTML nu pot exista două elemente cu acelaşi id.
● style – defineşte stilizarea CSS liniară pentru element; este vorba de una dintre
modalităţile de definire a stilizării, despre care vom vorbi mai mult în următoarele lecţii
care se vor ocupa cu CSS-ul.
● title – defineşte informaţii suplimentare despre element, care se afişează deseori ca un
tooltip, care se obţine atunci când poziţionăm cursorul mouse-ului deasupra elementului.

Versiuni ale limbajului HTML

La sfârşitul acestei lecţii vom vorbi şi despre variantele, adică versiunile HTML-ului. De-a lungul
anilor se foloseau diverse versiuni ale limbajului HTML (imaginea 1.6).

img 1.6

Imaginea 1.6 ilustrează dezvoltarea aproximativă a limbajului HTML, de la apariţia sa până la

începerea utilizării oficiale a versiunii actuale cu nr. 5 a acestui limbaj.

Diferenţele dintre diferite versiuni ale limbajului HTML se reflectă, în general, asupra
disponibilităţii şi suportului diferitor taguri, respectiv elemente, dar şi în mici diferenţe de sintaxă.
Cu alte cuvinte, cu fiecare versiune nouă de HTML, este introdus un set suplimentar de noi taguri
de un scop diferit. Pe lângă aceasta, regulile sintactice pentru scrierea anumitor taguri s-au
schimbat. De exemplu, versiunile XHTML şi HTML5 au definit diferite reguli de scriere a tagurilor
cu autoînchidere. Astfel, XHTML defineşte utilizarea caracterului slash la sfârşitul denumirii
tagului, care este obligatoriu separat prin spaţiu gol de denumirea tagului:

1
<br />

Mai devreme, în această lecţie am prezentat că pe baza specificaţiei HTML5 un astfel de tag se
scrie fără spaţii şi linie slash, pur şi simplu, astfel:

1
<br>

Desigur, mai există diferenţe de acest tip şi unele similare între cele două versiuni ale limbajului
HTML. Din fericire, oricine începe astăzi să înveţe limbajul HTML, trebuie să respecte exclusiv
specificaţia HTML a acestui limbaj.

HTML5
HTML5 este standardul recomandat în momentul de faţă pentru crearea documentelor HTML.
HTML5 este implementat în ziua de astăzi în toate browserele moderne pe calculatoare,
dispozitive mobile şi alte dispozitive similare.

Prima versiune de lucru a acestui limbaj este prezentată în anul 2008, în timp ce statusul W3C
Recommendation a fost obţinut pe data de 28 octombrie 2014.

HTML5 aduce şi o sintaxă semnificativ mai îmbunătăţită a limbajului, prin prezentarea unei
mulţimi de elemente noi, dar şi un API pentru dezvoltarea aplicaţiilor web complexe. Tocmai de
aceea, în ziua de azi HTML5 se foloseşte nu doar pentru dezvoltarea paginilor web, ci şi pentru
aplicaţiile mobile pe platforme independente, pentru aplicaţiile desktop etc.

Notă

În cadrul acestui program va fi abordat exclusiv limbajul HTML5.