Care e structura unei pagini web HTML? (Curs HTML pentru începători, partea 1): Mură-n Gură

Care e structura unei pagini web HTML? (Curs HTML pentru începători, partea 1)

Care e structura unei pagini web HTML? (Curs HTML pentru începători, partea 1)

În acest scurt articol îți voi arăta cum este organizată o pagină de web în HTML.

De fapt, toate paginile de web sunt până la urmă exprimate în HTML, dar de cele mai multe ori, pentru „a-ți face viața mai ușoară”, sisteme precum Wordpress sau sistemul de management conținut pe care îl folosești, sau builderul vizual, ascunde de tine codul HTML și îți oferă instrumente cu care creezi paginile, fără să fie nevoie să scrii tu cod HTML.

Din experiența de peste 15 ani în web design, am realizat că toate aceste programe și instrumente sunt utile și ușor de folosit, dar când dai de necazuri, nimic nu te salvează ca puține cunoștințe de HTML.

Există situații în care datorită unor erori (bug, eroare de sistem sau de utilizator), codul HTML devine încălecat, încurcat, incomplet, corupt sau ...lipsește cu desăvârșire. Salvezi pagina și realizezi cu stupoare că întregul tău website este căzut! 

Un alt motiv pentru care ajută enorm să știi HTML, este că în foarte multe cazuri, instrumentele pe care ți le pun la dispoziție aceste programe de construit site-uri sunt incomplete. Da, au multe „facilități” și funcții și module și pluginuri dar de multe ori descoperi că le lipsește acea „UNA” dintre funcții de care chiar ai nevoie. Și în acel caz, intri ușurel în editorul de cod și cu trei mici taguri HTML, ți-ai rezolvat problema.

Așa că, hai să nu mai tragem de timp și să învățăm puțin HașTeMeLe! Chiar nu e greu, o să vezi!

Cum este compusă o pagină web în HTML?

Iată mai jos o pagină web extrem de simplă.

Dacă introduci codul de mai jos într-un editor de text (Notepad, Notepad++ sau orice alt program care e în stare să editeze text curat - în afară de Microsoft Word!), și salvezi documentul cu extensia .html sau .htm, ai o pagină web.

    
    <!DOCTYPE html>
    <html>
        <head>
            <title>Titlul paginii care apare în browser</title>
        </head>
        <body>
            
            <h1>Titlu pagină</h1>
            
            <p>Un paragraf de text, în corpul paginii.</p>
            
            <p>Un alt paragraf de text, sub primul paragraf.</p>
            
        </body>
    </html>
    

Simplu, nu?

Un lucru pe care trebuie să îl clarificăm de la început: orice pagină web este de fapt TEXT - pur și simplu TEXT, „formatat” într-un anumit fel, folosind „tag-uri” care dau însemnătate diferită elementelor.

HTML înseamnă Hypertext Markup Language, adică „Limbaj de Descriere a Textului dinamic”. Partea dinamică (sau „hyper”) se referă în principal la link-uri, adică textul de pe pagină poate fi „activ” sau poate fi „link” ce te conectează la altă pagină. 

Hai să explicăm, tag cu tag, fiecare secțiune și la ce folosește:

    
    <!DOCTYPE html>
    

Elementul !DOCTYPE este necesar pentru fiecare pagină. Acesta comunică web browserului că aceasta este o pagină web și că ar trebui să o interpreteze ca atare.

    
    <html>
        
        ...
        
        ...
        
        
    </html>
    

Tag-urile <html></html> conțin documentul propriu-zis. Toate celelalte elemente trebuie să fie incluse între aceste două tag-uri.

De reținut:

Tag-urile HTML sunt de obicei în perechi

Observi ceva ce vei găsi de-acum înainte foarte des: tag-ul <html> deschide documentul, iar tag-ul </html> (are un slash /) îl închide. 

Majoritatea tag-urilor HTML sunt în perechi: tag-ul de deschidere și tag-ul de închidere (cu slash), iar conținutul afectat de tag este în mijloc.

Ca o paranteză, dacă vreau să fac un text bold, pun în jurul textului tag-ul <strong> și îl formatez așa:

Textul meu fără bold, iar aici <strong>textul meu bold</strong>, aici iar text fără bold.

Dacă deschizi un tag și uiți să îl închizi, tag-ul respectiv va afecta absolut TOT ce urmează după el, până întâlnește un tag de închidere pereche.

Deci este foarte important să închizi corect tag-urile, în special cele <html>, <body>, etc. Altfel, browserul nu știe unde începe și unde se încheie pagina ta web.

Secțiunea <head>

    
    <head>
        <title>Titlul paginii care apare în browser</title>
    </head>
    

Secțiunea <head> (capul documentului) conține elemente pe care nu le vezi în pagina propriu-zisă, când o deschizi în browser, dar definesc anumite proprietăți ale paginii (cum ar fi titlul acesteia - <title> - care apare în bara de sus a browserului), sau tag-uri META (<meta description=" ... "></meta>, <meta keywords=" ... "></meta> și altele.)

Tagul HTML title apare in fereastra browserului

Tot în secțiunea <head> se includ anumite elemente care asistă pagina ta web, cum ar fi stylesheet-uri CSS (pentru stilizarea paginii), scripturi JavaScript (pentru adăugarea de funcționalitate și dinamism) sau importuri de fonturi.

Secțiunea <body>: Corpul vizibil al paginii

    
    <body>
        
        <h1>Titlu pagină</h1>
        
        <p>Un paragraf de text, în corpul paginii.</p>
        
        <p>Un alt paragraf de text, sub primul paragraf.</p>
        
    </body>
    

În final, secțiunea <body> (corpul paginii) este locul unde pui conținutul propriu-zis al paginii web.

Aici incluzi toate celelalte elemente cum ar fi:

  • Titluri, subtitluri
  • Paragrafe
  • Subdiviziuni
  • Liste numerice sau cu bulleturi
  • Linkuri
  • Imagini
  • Video
  • etc.

Mergi la partea 2 unde discutăm tagurile pentru text în HTML cu exemple.

Categories