In acest capitol vom incepe sa construim pagina unui serial fictiv si in acelasi timp sa discutam despre elemente noi.

Primul lucru care ar trebui sa existe pe orice pagina HTML este declaratia doctype. Aceasta ii spune browserului cum sa interpreteze acest document. Nu uitati ca un fisier HTML nu este altceva decat un fisier text care are extensia .html sau .htm.

Dupa acesta, primul, ultimul si singurul tag care ar trebuie sa fie direct in document fara nici un parinte este tagul <html></html>

Un lucru bine de facut (dar complet optional) este sa setam un atribut pe primul tag care precizeaza limba continutului: 

<!DOCTYPE html>
<html lang="ro">
</html>

Imediat in interiorul lui vom avea tagurile <head> si <body>. Doar aceste 2 taguri trebuie sa fie direct in <html>.

Ele trebuie sa fie prezente in aceasta ordine intodeauna cand construim o pagina noua. Aceasta structura este una dintre putinele reguli care sunt impuse asupra modului in care ar trebui sa arata un document HTML.

Elementul <head></head>

In head vom gasi informatii si resurse auxiliare paginii care nu influenteaza propriu-zis continutul din pagina.

Primul lucru din head ar trebui sa fie un tag de tip <meta /> care sa ii spuna browserului cum sunt encodate caracterele din pagina. Acesta este unul dintre acele detalii care poate parea atat de tehnic si plictisitor dar care poate cauza o experienta foarte neplacuta pentru un utilizator.

Imediat dupa tagul meta, vom alege un titlul pentru pagina. 

<!DOCTYPE html>
<html lang="ro">
    <head>
        <meta chartset="utf-8" />
        <title>Family Cat</title>
    </head>
</html>

Elementul <body></body>

In body vom avea tot continutul paginii, tot ce va fi vizibil. Si inainte de a incepe sa adaugam continut trebuie sa ne gandim cum am vrea sa arate pagina, ce structura ar trebui sa aiba.

Majoriatea paginilor de pe web au trei mari parti:

  • partea superioara: unde vom avea titlul paginii si sub el un meniu
  • partea principala: unde va fi prezent continutul propriu-zis
  • si partea inferioara: unde vom include informatiile aditionale despre serial, precum detalii despre producator, anul, drepturile de autor si altele

Pentru aceasta sectionare vom folosi 3 taguri noi:

  1. <header></header>

    Este un tag obisnuit, care se inchide si care cuprinde partea de sus a paginii.

    Acesta tag a aparut in ultimii ani odata cu HTML5. In locul lui un site folosea un <div></div>, care probabil ca avea un atribut de tipul id sau clasa cu valoarea de header.

    Am putea face si noi asta, dar daca putem sa folosim un tag modern care ne ajuta sa ne organizam continutul mai bine, eu cred ca este mai bine sa facem asta.

    Desi numele este asemanator cu cel al tagului <head></head>, el nu are nici o legatura cu acesta si in nici un caz nu ar trebui schimbate intre ele.

  2. <main></main>

    Acesta nu poate fi folosit decat o singura data pe pagina, pentru ca este un tag care cuprinde tot continutul important din pagina, continut pe care il vom putea impartii apoi folosind alte tag-uri.

    Si el este un tag nou aparut recent, ce a inlocuit o parte din functionalitatea tag-ului <div></div>.

  3. <footer></footer>

    Acest tag cuprinde de obicei partea inferioara a unei pagini. De multe ori contine informatii despre cel ce detine site-ul, cateva link-uri sau date de contact.

Către exercițiu >