Despre elemente si tag-uri

Despre elemente si tag-uri

Asa cum ai vazut in introducere, structura unui document poate contine mai multe elemente cum ar fi: un titlu sau antet, unu sau mai multe paragrafe, un tabel, un citat, etc. In cazul HTML exista echivalentul acestor elemente si care poarta tot denumirea de elemente. Denumirea acestor elemente reprezinta, de regula, prescurtarea (in unele cazuri doar initialele) de la forma in limba engleza a elementului respectiv. De exemplu, elementul P (paragraph) indica un paragraf, elementul TABLE indica un tabel, elementul UL (unordered list) indica o lista neordonata, etc. Sa privim putin la exemplul urmator:

Asa cum se vede din exemplul de mai sus, pentru a indica ca o anumita portiune din text trebuie sa fie afisata ca un paragraf folosim elementul P, element ce este format din 2 tag-uri. Primul tag, care este si tagul de inceput, este format din doua paranteze unghiulare (<) si (>) intre care se pune elementul dorit (in cazul nostru P). Tagul de sfirsit are in plus fata de tag-ul de inceput si un backslash (/) dupa prima paranteza unghiulara (</P>). Tag-ul de inceput indica browser-ului unde incepe elementul respectiv si tag-ul de sfirsit unde se termina acel element. De regula, elementele sunt formate din aceasta pereche de tag-uri, dar exista si elemente care nu au decit un singur tag. Arunca o privire asupra exemplului de mai jos:

Tag-ul <BR> indica intreruperea continuitatii unei expresii, adica ceea ce se afla scris dupa acest element va fi scris pe rindul imediat urmator. A nu se confunda rezultatele actiunii tag-ului <BR> cu cele ale tag-ului <P>, la acesta din urma scrierea textului incepind la un rind distanta fata de ultimul paragraf. Intrucit nu exista nici o logica pentru care ar exista un tag de inceput si unul de sfirsit in cazul elementului BR, acesta este format dintr-un singur tag (nu am putea cuprinde un cuvint sau o expresie intre cele doua taguri intrucit nu are sens). Asemenea elementului <BR> mai exista alte elemente dar le vei descoperi pe parcurs.

Cateva consideratii asupra elementelor

• Numele elementului nu este case-sensitive adica, chiar daca utilizam majuscule sau caractere obisnuite, rezultatul este acelasi. De exemplu <EM> este echivalent cu <Em> sau <em>.
• De multe ori este permis ca in cazul unor elemente tag-ul de sfirsit sa fie omis. Acest lucru nu este indicat dar nici nu constituie o greseala daca se utilizeaza aceasta practica numai la elementele care permit acest lucru. Exemplul de mai jos ilustreaza acest lucru.

De notat ca prezenta tag-ului de sfirsit </UL> este obligatorie, regula aplicanduse numai pentru elementul LI.

• Sunt elemente care pot contine alte elemente dar este interzis ca tagurile elementelor sa fie inlantuite. Pentru a intelege mai bine am dat un exemplu in care am utilizat trei elemente teoretice.

Cele trei perechi de tag-uri au efect asupra modului de afisare al cuvintului EXEMPLU. Nu conteaza care este primul tag folosit. Constructia din exemplul anterior are acelasi efect cu cea de mai jos. Asadar nu conteaza ordinea de aparitie a tagurilor. Ceea ce conteaza este pastrarea simetriei tag-urilor fata de textul aflat intre ele.

Daca cele doua exemple reprezentau o construcsie corecta, mai jos este prezentata o constructie cu tag-uri inlantuite.

Mai jos am prezentat un alt exemplu.

In exemplul de mai sus, elementul B (cand spun elementul B ma refer la cele doua tag-uri ale acestui element, iar acest lucru este valabil pentru fiecare element in parte) poate fi continut de elementul P dar este interzisa o constructie in care elementul B sa ramina in afara elementului P. Daca unele browsere ar reusi totusi sa citeasca o asemenea constructie incorecta, in alte cazuri se poate ca rezultatele sa fie imprevizibile si prin urmare pagina cu o astfel de constructie sa fie afisata incorect. Acesta este doar un exemplu prin urmare, regula nu se limiteaza doar la elementele prezentate mai sus.

Atributele unui element

Atributele unui elemenent definesc diferite proprietati pentru elementul in cauza. Un element poate avea mai multe atribute iar acestea trebuie mentionate numai in tag-ul de inceput al elementului. Sa luam drept exemplu elementul HR cu ajutorul caruia se realizeaza trasarea unei linii. Acest element are mai multe atribute cum ar fi:

• ALIGN - defineste pozitionarea in pagina a liniei
• SIZE    - indica grosimea liniei
• WIDTH - indica lungimea acesteia (WIDTH=lungime, intindere dar, la elementul HR, cea mai buna interpretare este de 'lungime')

De exemplu o expresie de forma :

va duce la realizarea unei linii pozitionate in centrul documentului iar cu ajutorul atributului WIDTH='50%' am specificat ca aceasta linie va fi trasata doar pe jumatate (50%) din latimea documentului, asa cum se poate vedea si mai jos.

Daca se omite precizarea acestor atribute atunci browser-ul va lua in considerate niste valori implicite. Pentru cazul particular analizat aici, atributul ALIGN va avea ca valoare implicita valoarea RIGHT, iar atributul WIDTH va avea valoarea 100%. Pentru exemplificare am prezentat mai jos cele spuse pina acum.

<HR>

Daca te uiti cu atentie la modul cum a fost trasata aceasta linie vei vedea ca, desi are o valoare de 100%, ea nu a fost trasata pe toata lungimea ecranului. Acest lucru se datoreaza faptului ca linia in cauza a fost incadrata intr-un tabel. Daca vei incerca si tu acest exemplu vei vedea ca linia va fi trasata pe toata latimea ecranului. In ceea ce priveste tabele, despre ele voi vorbi ceva mai tarziu.

Consideratii asupra atributelor

• Valorile atributelor pot fi prezentate sub mai multe forme. In cazul atributului WIDTH din exemplul precedent acesta are valoarea 100% care, de fapt, este o valoare relativa. Acelasi atribut poate avea o valoare fixa exprimata in pixeli. Acest lucru se intampla pentru unele atribute care definesc proprietati cum ar fi, de exempu, lungimea unui element. Pentru alte elemente exista alte atribute cum ar fi atributul COLOR ce defineste culoarea unui element sau a unui font si in acest caz i se poate atribui ca valoare numele unei culori (yellow, green, red, etc) sau valoarea hexazecimala a acelei culori. Mai jos sunt cateva exemple de atribute (atributele sunt colorate in rosu si valorile atribuite sunt colorate in verde)

• Valoarea atributului trebuie cuprinsa intre ghilimele simple sau duble. Utilizarea ghilimelelor poate fi omisa daca valoarea atribuita atributului in cauza este formata dintr-un grup de litere de forma A-Z, sau a-z, semnul minus ( - ) sau un punct ( . ). Aceasta regula este valabila in cazul utilizarii alfabetului Englez. Chiar daca incadrarea in ghilimele a valorii acestor atribute nu este obligatorie, utilizarea acestora este o practica des intilnita in rindul realizatorilor de pagini HTML. Prin incadrarea in ghilimele a valorii atributelor ne va fi mai usor atunci cand vom dori sa modificam o pagina HTML cu un continut ceva mai stufos.
• Intrucat am prezentat cateva aspecte ale atributelor, este cazul sa mai spun ca nu este necesara specificarea tuturor atributelor. Atunci cand utilizam un element putem specifica doar atributele care duc la modificarea valorilor initiale, urmand ca restul atributelor sa aiba valoarea implicita. Chiar daca nu ai cum sa cunosti toate aceste valori cu timpul le vei retine, mai ales ca multe dintre acestea au o valoare usor de intuit.

In loc de rezumat

Poate ti se pare prea greu sau poate inutil sa parcurgi, si mai ales sa inveti, un asemenea tutorial. Daca esti pe cale sa renunti este cazul sa-ti amintesc ca orice inceput e greu. Si mie mi s-a parut cam ciudat la inceput dar, odata cu realizarea primei pagini de web, mi-am dat seama ca efortul nu a fost zadarnic. Ca o parere personala, cred ca HTML este o joaca fata de un limbaj de programare, ceea ce ma face sa cred ca HTML nu poate fi considerat prea complicat. Oricum, din moment ce ai ajuns la sfarsitul acestei pagini, nu cred ca vei renunta ci vei parcurge in continuare acest tutorial.