Capitolul 2

Capitolul 2Structura unui document HTML

1. Ce este un document HTML?Un document HTML nu este altceva dect un fiier text care, pe lng textul propriu-zis ce va aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje (tags, n limba englez).

Not

Toate celelalte elemente, de tip multimedia, care nsoesc documentul HTML, cum sunt sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referine la aceste elemente, prin intermediul unor etichete speciale, care indic browserului modul n care ele vor fi ncrcate i integrate n pagina Web.

Etichetele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse, privind aspectul textului, al fonturilor (tipurilor de caractere) i n general, al tuturor elementelor prezente n pagin. Etichetele sunt delimitate de perechi de paranteze unghiulare "< >".Unele etichete permit precizarea anumitor caracteristici ale elementului pe care l introduc n document prin intermediul unor perechi caracteristic - valoare numite atribute. Exist atribute specifice doar anumitor elemente i atribute ce sunt utilizate n asociere cu mai multe etichete. O etichet poate avea unul, nici unul, sau mai multe atribute. La rndul lor, atributelor li se pot atribui valori diferite.

Att etichetele ct i atributele sunt case-insensitive, ca atare nu va exista nici o diferen de aciune ntre, s spunem, , , , sau chiar . Ele sunt echivalente. Pe de alt parte, valoarea unui atribut poate fi case-sensitive, cum, n principiu, este cazul locaiilor fiierelor i adreselor URL.Regulile de folosire a etichetelor, atributelor i valorilor acestora reprezint sintaxa limbajului HTML. Similar limbajelor de programare, n HTML respectarea sintaxei limbajului este determinant pentru o bun funcionare a documentului.

Spre deosebire de limbajele compilate cum ar fi limbajul C, n care programele trec nainte de execuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de sintax, la documentele HTML nu se ntmpl acest lucru. Documentele HTML sunt interpretate de browser exact aa cum au fost ele scrise. Prin urmare, orice greeal de sintax se va reflecta direct n aspectul paginii Web, conducnd, de cele mai multe ori, la o funcionare defectuoas a acesteia.

Dac la vizualizarea paginii dumneavoastr cu browserul constatai c anumite secvene ale paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate, revenii asupra documentului HTML i verificai nc o dat sintaxa acestor elemente.

HTML lucreaz ntr-o manier foarte uor de neles. n esen trebuie s scriei textul i s precizai elementele care dorii s apar n pagin i s le includei ntre anumite etichete specifice. De exemplu, dac dorim s afim o propoziie cu caractere ngroate (bold), vom marca nceputul acesteia folosind eticheta iar pentru marcarea sfritului propoziiei eticheta .

Acesta este un text scris cu litere aldine Atenie!

Browserul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu-se invariabil cu un singur spaiu. De asemenea, nu se poate preciza mrimea liniilor de text, acestea fiind de mrimea ferestrei browserului (prin redimensionarea ferestrei se vor rearanja i liniile de text).

Dup cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd i cum se poate alinia un text n pagin.

Etichetele HTML sunt de dou tipuri:

etichete container (container tags)

etichete vide (empty tags)

Etichetele container sunt de forma:

bloc de text unde: - marcheaz nceputul unui bloc - marcheaz sfritul blocului Etichetele specific formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul unora dintre ele, prezena etichetei de nchidere () este opional. Pe parcursul capitolelor care vor urma, vom preciza explicit care anume sunt etichetele care au aceast proprietate.Etichetele vide au forma:

Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii browserului despre ce element este vorba i despre cum s afieze acel element.

Etichetele vide nu au etichet de nchidere.

2. Etichete de structurOrice document HTML conine dou seciuni:

antetul (head) corpul documentului (body)

Structura general a unui document HTML este urmtoarea:

Documentul este delimitat de etichetele i este format din cele dou pri: antet (head) - este delimitat de etichetele i conine titlul documentului precum i alte informaii privind documentul. n antetul documentului se mai insereaz i anumite secvene de program (script-uri), care se execut la ncrcarea documentului n browser. corp (body) - care delimiteaz coninutul propriu-zis al documentului i este inclus ntre etichetele

Iat acum i semnificaia etichetelor menionate i care fac parte din structura oricrui document HTML:

ntre aceste etichete este inclus ntregul document HTML. Ele comunic browserului unde ncepe i unde se termin documentul.

ntre aceste etichete sunt incluse titlul, deja menionat, precum i alte informaii despre documentul HTML. Aceste elemente, numite metatag-uri sunt deosebit de importante pentru ca pagina s fie ct mai bine cotat de ctre motoarele de cutare. Ele vor face obiectul unui capitol separat.

Metatag-urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina Web. Totui, la fel ca ntreg codul HTML al paginii, antetul poate fi vizualizat selectnd din meniul browserului opiunea View > Source.

Stabilete titlul documentului HTML. Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de motoarele de cutare pentru indexarea paginii. Prin urmare, strduii-v s gsii un titlu care s descrie ct mai corect i complet coninutul paginii dumneavoastr.

Atenie!

Eticheta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare obinuit n bara de titlu a browserului.

Conine descrierea textului i elementelor paginii. n corpul documentului se stabilesc, deci, aspectul i coninutul paginii Web. Elementele coninute n aceast seciune sunt vizibile n pagin.

Poate nu v vine s credei, dar acum avei deja posibilitatea de a crea o pagin foarte simpl de text. Avei Notepad-ul deschis? Dac nu, deschidei-l acum i scriei exemplul urmtor:

Exemplul 2. 1 Pagina mea Am reusit sa scriu prima mea pagina de Web. Urmatoarea va fi cu mult mai buna.

Salvai fiierul cu numele primapagina.html. Apoi deschidei browserul pe care l folosii (Internet Explorer sau Netscape), selectai meniul File > Open > Browse, cutai folderul n care ai salvat fiierul, deschidei-l i v vei afla n faa primului dumneavoastr document HTML : Figura 2.1Dac dorii s scriei un text pe mai multe linii n pagin, va trebui s folosii eticheta
(de la line break), care face trecerea pe o linie noua. Eticheta
este de tip empty, deci nu are etichet de nchidere. ncercai exemplul de mai jos, n care afiarea textului documentului se va face pe dou rnduri.Exemplul 2. 2

Pagina mea

Am reusit sa scriu prima mea pagina de Web.
Urmatoarea va fi cu mult mai buna.

Acum, documentul dumneavoastr va arta ca n Figura 2.2

Deoarece structura documentelor HTML obinuite este n realitate mult mai complex, este recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n text pentru a face aceast structur ct mai explicit. Comentariile nu sunt vizibile pentru browser, ele servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului HTML.

Comentariile constau n scurte informaii, explicaii la elementele de cod utilizate, etc., fiind deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului.

Comentariile se introduc prin includerea textului ntre etichetele de mai jos.

Iat dou exemple:

pe mai multe randuricare ia sfarsit aici -->3. Folosirea corect a etichetelor Etichetele container se compun, aa cum am vzut mai devreme, din perechi de etichete: etichet de deschidere i de nchidere . La construirea unei pagini Web complexe vei fi pus adesea n situaia de a folosi mai multe etichete pentru aceeai secven de text.

De pild, vei dori s atribuii unui text dou proprieti: litere aldine sau ngroate (bold) i text centrat n pagin. Pentru aceasta va trebui s utilizai dou perechi de etichete, care descriu cele dou proprieti, n mod simultan, metod numit imbricarea etichetelor (nested tags), ca n exemplul de mai jos:

Text cu aldine si centratEste foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie plasate n mod corect.

n aceast situaie, principiul de utilizare este: "Last In - First Out" (LIFO). Acest lucru nseamn c ultima etichet deschis trebuie s fie prima care se nchide.

Atenie!

Trebuie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul LIFO. n caz contrar, secvena de cod din pagin nu va funciona corect.

Iat un exemplu generic de folosire corect a dou etichete:

Etichete utilizate corecti un altul de folosire incorect:

Etichete utilizate incorect4. RezumatUn document HTML este un fiier text care conine textul care va aprea n pagin i etichete. Acestea au rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse ntre ele.

Etichetele sunt nsoite de atribute care sunt perechi caracteristic - valoare i care au rolul de a stabili diverse caracteristici ale etichetei. Etichetele pot fi de dou tipuri: etichete container i etichete vide. Etichetele container necesit eticheta de nchidere n timp ce etichetele vide nu trebuie nchise.

Un document HTML este format din antet i corp. Etichetele de structur ale documentului sunt:

care delimiteaz documentul

care delimiteaz antetul

care delimiteaz titlul documentului

care delimiteaz corpul documentului.

ntr-un document HTML se pot introduce comentarii prin introducerea textului ntre etichetele Imbricarea etichetelor respect regula LIFO: prima etichet deschis este ultima care se nchide.

5. Test 1. HTML este un acronim de la:

a) Hyper Text Marker Line

b) Hyper Text Markup Language

c) Hyper Technical Method Library

2. Etichetele HTML sunt incluse ntre:

a) [ i ]b) ( i )c) < i >3. Etichetele i textul care nu sunt vizibile n pagin sunt plasate n blocul:

a) Bodyb) Headc) Table4. Ce fel de program este necesar pentru a scrie HTML?

a) un editor de text

b) un editor grafic

c) HTML Development 4.0

5. O pagina Web este format din dou pri:

a) Top i Bottomb) Body i Framesetc) Head i Body6. Care etichete i comunica browserului unde ncepe i unde se termin pagina?

a) b) c) 7. Care dintre urmtoarele elemente nu poate fi gsit n seciunea Head?a) Titleb) Tablec) Metatag8. n construcia urmtoare:

Pagina mea Pagina mea reprezint:

a) Numele fiierului HTML

b) Titlul care va aprea n pagina Web

c) Titlul care va aprea n bara de titlu a ferestrei browserului

9. Care dintre urmtoarele fiiere nu este un fiier HTML?

a) mypage.htm

b) mypage.txt

c) mypage.html

10. Iat exemplul de mai jos:

TextTextTextText

Este un exemplu de folosire corect a etichetelor?

a) Nu, deoarece nchiderea etichetelor nu respect regula LIFO.

b) Nu, deoarece nu avem voie s folosim mai mult de dou etichete imbricate

c) Da, deoarece etichetele se nchid corect.

| Capitolul anterior |Cuprins |Rspunsuri |Capitolul urmtor

Copyright 2003 - 2007 Softpage Internet. Reproducerea neautorizata si/sau fara specificarea susrsei va fi urmarita si sanctionata conform legilor in vigoare.