Bazele limbajului HTML
Ce este limbajul HTML?
Problema schimbului de informatie intre doua sau mai
multe calculatoare este o problema extrem de complexa. Rezolvarea acestei
probleme implica existenta unor "reguli de comunicare" pe care
calculatoarele sa le respecte. O comunicare reala intre doua parti - fie ele
calculatoare sau nu - se bazeaza pe faptul ca informatia oferita de una dintre
parti poate fi preluata si mai apoi inteleasa de catre cealalta.
Regulile dupa care doua
calculatoare care ruleaza sub diferite sisteme de operare comunica sunt
stabilite de catre protocoale. Despre acestea am vorbit pe scurt in capitolul
precedent. Dar in afara acestor reguli mai apare nevoia existentei unui
"limbaj" pe care ambele calculatoare sa-l inteleaga. In WWW acesta este limbajul HTML.
Redus la esenta, HTML (Limbajul de Marcare HiperText) este alcatuit dintr-un set de marcaje, coduri speciale inserate in continutul unui text, care ofera unui program numit interpretor de HTML informatii despre modul de formatare a continutului unui document si despre legaturile acestuia cu alte fisiere.
Elementele limbajului HTML
Elemente de marcare
Elementele de marcare sunt principalele componente ale limbajului HTML. Ele apar in document sub forma de etichete (tag-uri) sau controale HTML. Numele elementului apare in controlul de inceput (sub forma <nume-element>) si in cel de sfarsit (sub forma </nume-element>). Exemplu:
<BODY> si </BODY>
Portiunea din document incadrata de controalele HTML se mai numeste
continutul elementului marcat si este partea de document asupra caruia
actioneaza respectivul mod de formatare.
Anumite elemente nu necesita etichete de sfarsit (Ex: P), iar altele nu
au etichete de sfarsit, in general pentru ca nu au un continut pe care sa-l
incadreze (Ex: BR). Exista, de asemenea, elemente prezente in document
care pot sa nu fie marcate cu ajutorul etichetelor, prezenta lor in cadrul
documentului fiind implicita (Ex: BODY).
Limbajul HTML nu face distinctie intre literele mari si literele mici ale
alfabetului. De aceea formularile <BR>, <br> sau <Br> desemneaza
acelasi control.
Atribute
Atributele reprezinta proprietati ale elementelor de marcare scrise sub forma unor perechi de nume si valori in interiorul etichetei de inceput, dupa numele elementului referit. Exemplu:
<H1 id = "Paragraful 1" color = "blue">
Prezenta ghilimelelor la valorile atributelor este optionala.
Fiecare control HTML are anumite atribute cu valori presetate care pot fi
modificate de catre creatorul documentului conform dorintei acestuia. Ele pot
fi, de asemenea, modificate dinamic, in timpul interactiunii cu utilizatorul,
cu ajutorul scripturilor. Dar despre ele, mai tarziu...
Atributele ale caror
valori sunt de tip boolean (adica adevarat sau fals) sunt setate
in felul urmator:
Exemplu:
Formularea
<option selected = "selected">
sau
<option selected>
marcheaza atribuirea valorii true atributului selected, atribut al elementului option.
Daca valoarea unui atribut nu este una valida ea va fi ignorata.
Referinte de entitati
Pentru a introduce in continutul documentelor HTML unele
caractere care nu fac parte din alfabetul limbii engleze, numite si caractere
speciale, (cum ar fi è, ß sau ®) se folosesc marcaje speciale numite referinte
de entitati sau referinte de caracter. Spre deosebire de controalele
de marcaj despre care am vorbit in sectiunile anterioare, referintele de
entitate nu sunt incadrate de caracterele "<" si ">".
Ele incep intotdeauna cu caracterul ampresand "&" urmat de
un text in stransa legatura cu caracterul pe care il reprezinta sau un cod
numeric si se termina cu caracterul ";".
De asemenea, caracterele folosite in marcajele HTML (<, >, &)
se pot insera in cadrul documentului numai cu ajutorul referintelor de
entitate.
Iata cateva din caracterele speciale, impreuna cu marcajele care le reprezinta:
|
Caracter |
Referinta de entitate |
|
& |
& sau   |
|
< |
< sau < |
|
> |
> sau > |
|
" |
" sau " |
|
® |
|
|
à |
|
|
ß |
|
|
å sau å |
Comentariile
Reprezinta texte care apar in fisierul sursa HTML, dar 24224n135y
care nu vor fi afisate de catre browser catre utilizator. Ele au rolul de a
expune diferite aspecte legate de document in vederea realizarii unui fisier
sursa cat mai clar si mai usor de inteles si corectat. Comentariile sunt
incadrate de marcajele "<!--" si "-->".
E foarte important ca in interiorul comentariului sa nu existe secventa de
caractere "--" deoarece aceasta genereaza confuzie.
Exemplu:
<-- Acesta este un comentariu
care ocupa doua linii de text. -->
Redactarea valorilor atributelor
Cateva precizari despre atribute
In incheierea capitolului de fata vom discuta despre prezentarea atributelor elementelor HTML. Nu vom studia aici toate atributele care se pot referi la un anumit element, ci mai degraba modul in care unele din ele - cele intalnite la majoritatea elementelor - trebuiesc redactate pentru a fi corect interpretate de catre programul de navigare Web.
Alinierea pe orizontala si pe verticala
Pentru a specifica modul in care un element (antet,imagine,tabel,etc) va fi pozitionat pe orizontala relativ la elementul "container " care il contine se foloseste atributul align. Valorile acordate acestui atribut pot fi:
Implicit, alinierea se realizeaza la stanga, cu exceptia cazului in care elementul de pozitionat contine text a carui directie de scriere este de la dreapta la stanga, optiune realizata prin setarea in interiorul controlului a atributului dir la valoarea "rtl" (Right-To-Left). In acest caz alinierea implicita este la dreapta.
Pentru a determina alinierea pe verticala a unui element in cadrul elementului container se foloseste atributul valign cu urmatoarele valori posibile:
Culorile
Valorile atributelor referitoare la culorile textului,
fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al
culorii respective, fie prin numele uneia dintre cele 16 culori
"sigure", adica acele culori care vor fi recunoscute si afisate de
majoritatea calculatoarelor.
Exprimarea numerica se realizeaza prin codul RGB (
adica RED-GREEN-BLUE ) al culorii.Codul este alcatuit din 3
numere cuprinse intre 0 si 255 scrise in baza 16, fiecare exprimand prezenta cantitativa
a uneia dintre cele trei nuante care definesc codul culorii respective.
Exemplu:
<P style="color:#ff00cc">
Lectia urmatoare
In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator al materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit. Exemplul oferit aici incearca sa surprinda toate elementele ce urmeaza a fi mentionate.
Exemplu: Aspectul unui document HTML [sursa] [vizualizare]
In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator al materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit. Exemplul oferit aici incearca sa surprinda toate elementele ce urmeaza a fi mentionate.
Exemplu: Aspectul unui document HTML [sursa] [vizualizare]
|
Aqua |
Black |
Blue |
Fuchsia |
Gray |
Green |
Lime |
Maroon |
|
Navy |
Olive |
Purple |
Red |
Silver |
Teal |
White |
Yello |
Este de preferat ca atunci cand utilizati culori sa apelati la una din cele 16 culori numite "sigure". Iata un tabel cu numele si codul lor:
Dimensiunile
Dimensiunile unor elemente prezente in documentul HTML se pot preciza in trei moduri:
1.Dimensiunea absoluta
este referita in pixeli. De exemplu o exprimare de forma "width = 300" denota ca un anumit element are latimea de 300 pixeli
2.Dimensiunea relativa (procentuala)
este referita in procente. Astfel textul "width = 50%" exprima faptul ca elementul referit va avea ca latime jumatate din latimea disponibila a elementului in care este incadrat.
3.Dimensiunea proportionala (multidimensiunea)
este folosita atunci cand doua sau mai multe elemente impart un anumit numar de pixeli disponibili. Ea se exprima sub forma "i*", unde i este un numar care arata cate "parti" din total sunt revendicate. De exemplu, pe un spatiu de 60 de pixeli disponibili, dimensiunile notate 1*, 2*, 3* insumeaza 6 unitati in care spatiul disponibil va fi impartit. Fiecare unitate contine 10 pixeli. Astfel ca cele trei dimensiuni exprimate mai sus reprezinta 10 pixeli, 20 pixeli si, respectiv, 30 pixeli.
ensiunile unor elemente prezente in documentul HTML se pot preciza in trei moduri:
1.Dimensiunea absoluta
este referita in pixeli. De exemplu o exprimare de forma "width = 300" denota ca un anumit element are latimea de 300 pixeli
2.Dimensiunea relativa (procentuala)
este referita in procente. Astfel textul "width = 50%" exprima faptul ca elementul referit va avea ca latime jumatate din latimea disponibila a elementului in care este incadrat.
3.Dimensiunea proportionala (multidimensiunea)
este folosita atunci cand doua sau mai multe elemente impart un anumit numar de pixeli disponibili. Ea se exprima sub forma "i*", unde i este un numar care arata cate "parti" din total sunt revendicate. De exemplu, pe un spatiu de 60 de pixeli disponibili, dimensiunile notate 1*, 2*, 3* insumeaza 6 unitati in care spatiul disponibil va fi impartit. Fiecare unitate contine 10 pixeli. Astfel ca cele trei dimensiuni exprimate mai sus reprezinta 10 pixeli, 20 pixeli si, respectiv, 30 pixeli.
Valori data-ora
Formatul pentru scrierea acestor valori este :
YYYY-MM-DDThh:mm:ssTZD
unde
Coduri de limabje
Pentru a specifica limba in care un anumit text este scris se foloseste atributul lang a carui valoare este codul de limbaj al tarii respective. Codul de limbaj este alcatuit din doua parti:
Cele doua componente vor fi separate de cracterul "-". Iata cateva exemple:
Pentru a specifica limba in care un anumit text este scris se foloseste atributul lang a carui valoare este codul de limbaj al tarii respective. Codul de limbaj este alcatuit din doua parti:
Cele doua componente vor fi separate de cracterul "-". Iata cateva exemple:
Structura unui document HTML
Sectiunile unui document HTML
Un document HTML este impartit in trei sectiuni:
Controalele <HTML> si <HTML> incadreaza antetul si corpul documentului .Ele comunica interpretorului HTML ca blocul de text cuprins intre ele este scris si formatat in limbajul HTML standard. Prezenta acestor etichete in document este optionala
Sectiunea de informatii
Sectiunea de informatii HTML ofera informatii asupra
versiunii limbajului HTML folosit. Multe editoare de HTML insereaza automat
textul necesar la inceputul documentului
Exemplu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Antetul documentului
Sectiunea de antet a documentului este incadrata de
controalele <HEAD> si </HEAD>. Prezenta celor doua controale in
document este optionala, insa ea ajuta la o impartire mai clara a documentului
pe sectiuni.
Antetul documentului cuprinde, in general, informatii precum titlul
documentului (pentru a fi afisat pa baza de sus a a ferestrei programului de
navigare sau pentru ca documentul sa poata fi mai usor identificat de catre
utilizator), cuvinte-cheie care folosesc motoarelor de cautare de documente,
precum si alte informatii legate de documentul creat. Informatiile folosite in
aceasta sectiune nu sunt afisate de catre browser, ele avand doar rol
informativ. Astfel:
<TITLE>
indica titlul documentului. Textul aflat aici va fi - de obicei- afisat pe bara de titlu al programului de exporare sau va putea fi folosit de utilizatori pentru pastrarea documentului in listele specifice ale acestui program.
<META> si <LINK>
ofera
asa-numitele meta-informatii despre document declarand anumite proprietati
impreuna cu valorile acelor proprietati. Daca valoarea unei proprietati este
definita intern se va folosi controlul <META>,
iar daca valoarea va fi luata dintr-o locatie oarecare din exterior se va
folosi controlul <LINK>. Succesul
folosirii acestor doua controale depinde in mare masura de interpretorul de
HTML utilizat de catre utilizator.
De exemplu, cu ajutorul elementului META se pot
preciza informatiile care vor fi trimise in "header-ul" documentului,
adica informatii specifice protocolului HTTP si pe care browserul le
"citeste" pentru a pregati afisarea documentului.Se folosesc
formularile:
http-equiv= pentru numele informatiei meta
content= pentru continutul (valoarea) informatiei respective.
In exemplul de mai jos se foloseste informatia meta Content-Type pentru a preciza:
tipul documentului
setul de caractere folosit
Tipul documentului este - pentru
un document HTML - "text/html".
Setul de caractere reprezinta o multime de caractere folosite in alfabetul
diferitelor limbi, caractere identificate printr-un numar de cod. De aceea,
pentru ca browserul sa poata descifra corect informatia pe care o primeste este
recomandabil ca acest atribut sa fie specificat in antetul fiecarui document.
Seturile de caractere sunt niste standarde stabilite de catre ISO (Organizatia
Internationala pentru Standardizare) si reprezinta reguli de codificare a
caracterelor.
Printre cele mai
folosite astfel de seturi aminitim:
ISO 8859-1 - ( sau ISO Latin-1) reprezinta setul care contine cele mai raspandite extensii ale alfabetului latinsi este cel mai des intalnit
ISO 8859-5 - alfabetul chirilic
ISO 8859-6 - alfabetul arab
ISO 646 - codificarea ASCII restransa (pe 7 biti, adica 128 de caractere)
Exemplu:
<
Pentru alte tipuri de informatii meta cuprinse in
antet se va utiliza formularea
<META name="[nume proprietate]"
content="[valoare proprietate]">
In acest mod se pot specifica informnatii privind autorul paginii respective,
sau informatii in scopuri de indexare a paginii de catre paianjeni sau motoare
de cautare Web.
Exemplu:
<META name="author" content="Superman">
<
Despre elementul LINK vom vorbi intr-unul din capitolele urmatoare.
Corpul documentului
Corpul documentului este locul unde se plaseaza
continutul efectiv al documentului si este incadrat de controalele <BODY> si </BODY>.
Chiar daca marcarea corpului documentului cu cele doua etichete este optionala,
folosirea lor va determina o mai mare claritate in impartirea documentului pe
sectiuni.
Controlul <BODY> poate sa contina
atribute referitoare la fondul si marginile documentului sau culoarea textului.
Astfel:
In cazul in care ambele sunt prezente, browserul cauta fisierul mentionat ca imagine de fond. Daca acesta exista, el va fi afisat si multiplicat pentru a acoperi intreaga suprafata a documentului, culoarea de fond fiind vizibila numai daca fondul imagini este transparent. Daca nu, fondul documentului va fi dat de culoarea setata de catre bgcolor.
Despre aspectul unui document HTML
Generalitati
In capitolul de fata vom vorbi despre controalele folosite in dispunerea fizica si logica a elementelor care constitue documentul HTML. Trebuie subliniat faptul ca aspectul cat mai atragator al materialului prezentat trebuie insotit si de o prezentare a informatiei cat mai logica si usor de urmarit. Exemplul oferit aici incearca sa surprinda toate elementele ce urmeaza a fi mentionate.
Impartirea documentului in linii si paragrafe
Programele de explorare Web ignora caracterele Enter, taburile si spatiile multiple. Astfel, aspectul documentului afisat utilizatorului nu coincide cu aspectul fisierului sursa.
Pentru a obtine asezarea dorita a componentelor documentului in fereastra programului de navigare, se folosesc controalele de separare <BR> si <P> care determina desfasurarea continutului pe linii si paragrafe. Astfel, pentru a marca trecerea la un nou paragraf folositi controlul <P>, iar pentru a marca trecerea la o linie noua folositi controlul <BR>. Aceste doua controale nu necesita marcaj de inchidere (terminare).
Pentru a insera in document un numar oarecare de spatii libere se foloseste
caracterul special (NonBreakingSpace).
Spatiile astfel inserate au proprietatea de a nu permite browserului trecerea
la linie noua.
Pentru a forta afisarea unei parti de text mai lunga pe o singura linie se mai
pot folosi controalele <NOBR> si </NOBR> cu rolul de a marca inceputul si
sfarsitul sectiunii de text care va fi afisata pe o singura linie. Nu toate
browserele recunosc aceste controale, asa ca - daca se poate - evitati sa le
folositi!
Antetele de sectiune
In cazul in
care informatia prezentata trebuie impartita in sectiuni si sub-sectiuni,
alegerea cea mai naturala este folosirea marcajelor de
formatare a subtitlurilor.
Titlurile si subtitlurile sectiunilor documentului se vor marca folosind
elementele de la H1 la H6,
in ordine descrescatoare a importantei, dimensiunea fontului folosit
descrescand si ea. La afisare, programul de navigare va lasa linii goale
inainte si dupa fiecare marcaj pentru titlu si subtitlu.
Rigla orizontala
Pentru o mai vizibila impartire a corpului documentului
se voloseste rigla orizontala marcata cu controlul <HR>.
Prezenta acestui control produce desenarea unei linii orizontale subtiri pe
toata latimea documentului.
Dimensiunile riglei pot fi controlate cu ajutorul atributelor width si size, care
seteaza dimensiunile pe orizontala si, respectiv, pe vericala a liniei in
pagina. Pentru a elimina aspectul tridimensiunal al riglei se poate utiliza
optiunea noshade care elimina efectul de
"umbrire" a riglei.
Controlul <Address>
Acest control este folosit de obicei la sfarsitul documentului pentru a plasa informatii utile utilizatorului pentru a contacta autorul paginii sau informatii de copyright.
Controalele <DIV> si <SPAN>
Controlul <DIV>
este folosit in document pentru a grupa intr-un bloc "logic" o parte
din continutul documentului in vederea atribuirii unitare a caracteristicilor
legate de stilul de prezentare, sau pentru a identifica respectivul bloc de
continut in vederea utilizarii lui de catre scripturile prezente in document.
Browserul va trece la line noua inainte si dupa terminarea acestui marcaj.
De asemenea acest controle se mai poate folosi alaturi de proprietatile de stil
pentru pozitionare pentru a creea in cadrul documentului "straturi"
de dimensiuni variabile ce pot fi pozitionate in diferite locatii ale
documentului, suprapuse, ascunse sau expuse, in functie de necesitatile
designer-ului.
Controlul <SPAN>are rolul de a "extrage" o portiune de document - de obicei inclusa intr-un bloc marcat de controale HTML si care, eventual, are specificate un anumit numar de atribute - pentru a o identifica sau apentru a-i oferi un format de afisare diferit de restul blocului din care face parte.
Folosirea atributului style
Ultimele versiuni ale limbajului HTML au optat in mod
categorig pentru despartirea continutului unui document HTML de forma in care
este el prezentat. Acest lucru este posibil prin utilizarea foilor de stil, a stilurilor definite in
antetele documentului, sau prin gruparea proprietatilor legate de forma de
prezentare in cadrul unui singur atribut: style.
Utilizarea acestuia in interiorul unui control HTML - aproape toate care se pot
gasi in interiorul corpului documentului, cu putine exceptii (<Script> sau <Basefont>)
se face respectand urmatorul tipar de scriere:
<element style ="proprietate:valoare ; proprietate:valoare;..."
unde
Creatorii de documente HTML sunt puternic incurajati sa foloseasca proprietatile de stil in locul setarii individuale a fiecarii proprietati in cadrul marcajelor. Trebuie stiut, insa, ca versiunile mai vechi ale programelor de explorare Web nu recunosc nici atributul style, nici marcajul STYLE si nici referintele catre modelele de stil. De aceea, inainte de a folosi una sau alta dintre variante trebuie sa faceti un calcul exact al avantajelor si dezavantajelor pe care fiecare le implica.
Despre proprietati de stil vom discuta pe larg in capitolul dedicat lor.
Lectia anterioara
Informatii "tool-tip"
Cea mai simpla forma de interactiune a documentului cu utilizatorul o
reprezinta afisarea unor informatii foarte scurte despre elementele
documentului atunci cand utilizatorul pozitioneaza mouse-ul in spatiul ocupat
de elementele respective.
Pentru a realiza acest lucru se foloseste proprietatea de stil title, valoarea ecestei proprietati fiind textul
informativ afisat in dreptul cursorului odata cu pozitionarea mouse-ului pe
elementul care are setata aceasta proprietate.
Stiluri de text
Lectia urmatoare
Introducere
In documentele pe care la veti creea veti folosi diferite stiluri de text pentru a pune in evidenta anumite cuvinte sau pentru a le acorda o seminficatie dorita (citate, nume, etc). Pentru aceasta veti specifica explicit valori pentru unele din atributele ale unui font:
Lectia anterioara Lectia urmatoare
Controale pentru stilul fontului
Cel mai usor mod de a marca un anumit stil corespunzator unui text in documentul dumneavoastra este de a folosi controalele care modifica stilul fontului dupa cum urmeaza:
<B>
se foloseste pentru scrierea cu caractere ingrosate (Bold).
<I>
se folooseste pentru scrierea cu caractere inclinate (Italics).
<U>
este folosit atunci cand se doreste ca un anumit pasaj din text sa fie subliniat.
<TT>
indica folosirea fontului monospatiu, adica acea forma de scriere in care fiecare caracter ocupa pe latime acelasi spatiu. Acest tip de font este asemanator cu cel utilizat se catre masinile de scris.
<SUB>
se foloseste pentru scrierea indicilor inferiori.
<SUP>
se foloseste pentru scrierea indicilor superiori.
<STRIKE>
este folosit pentru scriere unui text "taiat" cu o linie orizontala.
Este obligatorie prezenta etichetelor de sfarsit a controalelor mai sus mentionate pentru a putea delimita portiunea de text asaupra careia se aplica stilul de font dorit.
Lectia anterioara Lectia urmatoare
Controlul <FONT>
Acest control permite specificare atributelor care privesc tipul caracterelor, dimensiunea si culoarea lor. El se aplica pentru a formata un bloc de text in vedrea afisarii lui cu anumite caracteristici dorite de catre creatorul documentului. Atributele pe care le avem la indemana sunt:
Face
folosit pentru
alegerea corpului de litera utilizat. Valoarea atribuita acestei proprietati
trebuie sa fie un nume de font valid. Este recomandabil sa folositi fonturile
"clasice" pentru a va asigura ca browserul va rcunoaste tipul de font
specificat.
Exemplu:
<FONT Face="Arial">
Deoarece diferitele sisteme (Windows, Machintosh, etc) nu recunosc aceleasi fonturi, se pot atribui proprietatii Face una sau mai multe valori separate prin virgula. Astfel sistemul va alege primul font valid gasit in lista.
<FONT Face="Arial,
Size
folosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de la 1 la 7. Valoare atribuita dimensiunii fontului poate fi de doua tipuri:
absoluta
- specifica dimensiunea exacta a
fontului.
Exemplu:
<FONT Size = 5>
relativa
- specifica dimensiunea fontului
fata de cea a fontului actual.
Exemplu:
<FONT Size = +1>
In exemplul de mai sus dimensiunea fontului este majorata cu o unitate.
In cazul in care valoarea
specificata este mai mica decat 1 sau mai mare decat 7, interpretorul HTML va
va lua ca dimensiune valida pe 1, respectiv 7.
Valoarea imlicita a dimensiunii fontului este, de obicei, 3.
Color
este
atributul cu ajutorul caruia se poate stabili culoarea textului marcat.
Valorile acestei proprietati se pot scrie fie cu ajutorul codului hexazecimal
al culorii, fie cu ajutorul numelui celor 16 culori de baza.
Exemplu:
<Font Color = red>
<Font Color = #ff0000>
Utilizarea culorilor in text nu trebuie sa genereze situatii ambigue. Astfel, un text afisat cu culoare albastra va avea acelasi aspect cu cel al unei legaturi catre un alt fisier. De asemenea, folosirea in exces culorilor poate da documentului un aspect neplacut si obositor
Exemplu: Utilizarea atributelor fontului.[sursa] [vizualizare]
Controlul <BASEFONT>
Daca dorim sa alegem un anumit tip de font, o anumita
dimensiune sau culoare a fontului care sa fie valabile pe intreg continutul
documentului, se va utiliza marcajul BASEFONT.
Exemplu:
<body>
<basefont color=blue size=5>
...
</body>
Astfel textul continut in documentul de mai sus va fi afisat cu culoarea albastra si va avea dimensiunea de 5 unitati. Exceptie fac doar tabelele si acele pasaje de text care au controale HTML de formatare a textului care impun alte atribute de afisare.
Observatie!
Controalele <Font> si <Basefont> nu mai sunt necesare in versiunea
HTML 4.0. Setarea optiunilor de afisare a textului se face cu ajutorul
atributului style corespunzator elementului
vizat. Versiunile mai vechi ale programelor de explorare nu recunosc, insa,
acest atribut. De aceea decizia de a folosi una sau alta dintre variante
trebuie sa ia in considerare toate avantajele si dezavantajele posibile.
Stiluri logice de formatare a textului
Exista cateva stiluri predefinite de punere in evidenta a unui text:
<Strong>
- pentru evidentiere puternica
<Em>
- pentru scriere cu caractere italice
<Cite>
- pentru inserare de citate
<Code>
- pentru listing de program
<Dfn>
- pentru definitie de cuvant
<Blockquote>
- pentru a pune in evidenta un bloc de text. Blocul de textul va fi indentat spre dreapta fata de marginea stanga a elementului care il contine.
<Pre>
- folosit pentru afisarea textului "preformatat". Textul marcat de etichetele de inceput si sfarsit ale acestui control va fi afisat de catre browser intr-o forma aproape identica cu aceea in care a fost scris in sursa documentului HTML. Astfel, se vor respecta spatiile libere si trecerea la linie noua, dar caracterele vor fi afisate cu font de tip monospatiu.
Mai trebuie sa amintim aici si posibilitatea de a marca modificarile aparute in versiunile ulterioare ale documentului cu ajutorul controalelor <Ins> si <Del>. Dar despre ele nu putem spune ca aplica un stil predefinit textului pe care il marcheaza, deoarece modalitatea in care acesta este afisat in fereastra programului de explorare Web difera foarte mult de la program la program. De obicei aceste marcaje contin atributul datetime pentru a informa despre data de la care sunt valabile modificarile pe care aceste controale le notifica.
Exemplu: Utilizarea stilurilor logice pentru text [sursa] [vizualizare]
Liste
Introducere
De multe ori, in redactarea unor documente ajungem in punctul in care trebuie sa enumeram un set de elemente care formeaza, din punct de vedere logic, o multime. Prezentarea acestora trebuie realizata in asa fel incat relatiile dintre ele, sau dintre ele si eventualiele "subelemente" sa fie cat mai clar exprimate din punct de vedere vizual. Pentru aceasta se folosesc diferitele tipuri de liste.
Liste neordonate
Probabil cele mai intalnite liste in cadrul documentelor HTML sunt cele neordonate. Pentru a marca inceputul si sfarsitul unei liste neordonate se foloseste elementul UL. Fiecare lista contine un set de elemente numite "itemi", prezenta unui item in cadrul unei liste marcandu-se cu ajutorul elementului LI.
Exemplu: Prezentarea informatiei sub forma de lista neordonata [sursa] [vizualizare]
Fiecare element al listei este indentat fata de marginea din stanga (sau dreapta, daca directia de scriere este de la drapta la stanga) listei; astfel, prezentarea ei devine foarte clara si atractiva. Mai mult, ficare item al listei va avea un marcaj in fata sa, corespunzator nivelului de subordonare al listei. Acest marcaj poate fi ales cu ajutorul atributului Type, iar valorile posibile sunt:
Implicit, prgramele de explorare Web folosesc tipul disc pentru primul nivel de subordonare (si, respectiv, de indentare), circle pentru al doilea nivel si square pentru urmatoarele nivele.
Eticheta de sfarsit a unui element al listei(</li>) nu este obligatorie, elementul respectiv considerandu-se incheiat in momentul aparitiei unei noi etichete <li> sau a etichetei care incheie lista.
Elementul UL inlocuieste elementele DIR si MENU din versiunile mai vechi ale limbajului HTML.
Liste ordonate
Listele
ordonate se aseamana foarte mult cu cele neordonate, diferenta majora constand
in faptul ca listele ordonate atribuie ca marcaj fiecarui item un element (numar, litera) prin care se evidentiaza ordinea
sa in cadrul listei. Listele ordonate sunt marcate in
interiorul documentului cu ajutorul elementului OL.
Pentru a stabili care va fi marcajul de ordonare in
lista al fiecarui item se foloseste atributul Type.
Valorile acestuia pot fi:
Exemplu: Folosirea listelor ordonate [sursa] [vizualizare]
Se pot folosi si marcajele aplicate itemilor listelor neordonate, dar in
felul acesta notiunea de "lista ordonata" isi pierde sensul.
In mod implicit valoarea marcajului de ordine al elementelor listei incepe de
la "1"(sau "a") si creste cu o unitate la fiecare item
adaugat. Pentru a
modifica valoarea de start a numerotarii elementelor listei se foloseste
atributul Start asociat elementului OL. Astfel, formularea
<OL start = "2" >
are ca
rezultat faptul ca primul element al listei va avea marcajul de ordine
"2" ("b", "ii",etc), celelalte continuand in mod
normal, prin adaugarea cate unei unitati. Pentru a forta marcarea unei alte
valoari in dreptul unui item se foloseste atributul Value
asociat elementului LI. Valoarea acordata
acestui atribut va fi numarul (sau ordinea
caracterului) scris in fata elementului respectiv.
Trebuie mentionat faptul ca numerotarea elementelor unei
liste ordonate nu tine cont de prezenta itemilor din listele subordonate,
numerotarea facandu-se separat pe fiecare nivel de subordonare.
Liste de definitii
Asa cum foarte clar este sugerat prin numele sau, lista
de definitii este folosita pentru a prezenta si "defini" (a da
informatii despre) un anumit numar de elemente numite termenii listei.
Prezenta listei de definitii este marcata prin perechea de controale <DL> si </DL>.
In cadrul listei, o definitie este alcatuita din doua parti:
Termenii definiti vor avea definitiile indentate uniform
fata de marginea stanga (dreapta) a elementului container pentru o cat mai
clara oferta a informatiei. De obicei stilul de scriere a termenilor definiti
va trebui sa scoata in evidenta (de exemplu prin folosirea caracterelor
ingrosate) importanta acestor elemente. Implicit browserele nu realizeaza acest
lucru, de aceea este de datoria realizatorului documentului sa ia in
considerare si acest aspect.
Este posibil ca enumerarea termenilor impreuna cu definitiile corespunzatoare
sa se realizeze si fara a fi incadrate intre controalele de marcare a listei de
definitii (<DL>), dar in acest caz
prezentarea vizuala a corpului definitiei poate sa nu mai fie cea pe care o
doriti. De aceea este preferabil sa folositi marcajele de inceput si sfarsit
ale listei.
De asemenea, in absenta etichetei </dt> se considera ca elementul dt se incheie acolo unde apare eticheta <dd>.
O alta utilizare a listei de definitii este cea de introducere a dialogurilor in pagini. Astfel, termenul definit marcheaza personajul care se exprima, iar descriere definitiei prezinta spusele acestuia.
Exemplu: Lista de definitii [sursa] [vizualizare]
Legaturi si referinte
Introducere
Aspectele prezentate pana acum certifica faptul ca un document HTML prezinta proprietati de formatare si structurare care sa permita prezentarea informatiei de tip text intr-o forma cat mai logica si reusita din punct de vedere vizual-estetic.Insa caracteristica cea mai importanta a documentelor HTML este aceea de a putea contine in interiorul lor legaturi catre alte documente (sau programe) care se pot gasi pe acelasi calculator sau pe unul dintre calculatoarele din imensa retea a Web-ului. Mai mult, exista posibilitatea ca un anumit element din continutul documentului sa contina o legatura catre un alt element din cadrul aceluiasi document. Despre toate acestea in cele ce urmeaza.
Lectia anterioara Lectia urmatoare
Referinte externe
Sunt sigur ca ati intilnit situatii in care, intr-o carte, atunci cand autorul face referire la un citat sa o informatie dintr-o alta carte sau un dintr-un alt document acesta insereaza intr-o paranteza numele lucrarii referite, eventual pagina sau sectiunea referita. Daca informatia respectiva prezinta interes pentru utilizator, acesta nu are decat sa caute in rafturile bibliotecii sale (in cazul cel mai fericit) sau ale altor biblioteci, materialul amintit. Aceasta maniera fragmentata de a primi informatia este singura posibila in cazul textelor obisnuite a caror expunere se realizeaza pe cele doua dimensiuni ale suprafetei plane reprezentate de foaia de hartie.
Limbajul HTML rezolva aceasta problema prin introducerea notiunii de hipertext. Hiper-textul difera de textul obisnuit prin introducere in interiorul documentului a unor elemente de legatura cu alte documente existente in Web. Prin activarea acestor elemente cu ajutorul mouse-ului sau tastaturii se realizeaza trecerea instantanee de la documentul initial (documentul sursa) la cel vizat (documentul destinatie), fiind oricand posibila revenirea la documentul initial. Orice legatura are doua capete numite ancore si un sens. Primul capat (elementul care refera) este ancora sursa, iar al doilea capat (elementul referit) este ancora destinatie. Ancora sursa se numeste referinta si ea poate fi externa sau interna, dupa cum ancora destinatie se gaseste in afara sau in interiorul documentului care contine referinta.
Prezenta unei referinte in interiorul documentului se marcheaza
URL-uri relative
Despre URL-uri am vorbit in introducerea acestei documentatii. Insa acum, inainte de a trece la cateva exemple simple, e cazul sa vorbim despre URL-uri relative.
Daca informatia pe care o puneti la dispozitia utilizatorilor in Web este
alcatuita din mai multe documente corelate, ea trebuie structurata
corespunzator intr-o formula de directoare si subdirectoare care sa va ofere o
distribuire cat mai logica a materialelor. Aceasta structura formeaza un
"site".
Sa presupunem ca directorul radacina al site-ului se numeste
"Radacina". El contine directoarele "Produse" si
"Informatii" si documentul "index.html". In interiorul
directorului "Produse" se gasesc documentele "Carti.html"
si "Muzica.html", iar in directorul "Informatii" se gaseste
documentul "Preturi.html". Un URL relativ este URL-ul in care nu se
trece decat calea de la fisierul curent la fisierul destinatie. Calculatorul va
completa automat calea catre documentul curent, construind astfel URL-ul
complet. In cazul trecerii catre directorul parinte se foloseste expresia
"..". Exemplu:
Daca fisierul curent este "index.html", pentru a referii documentul
"Carti.html" se foloseste expresia "Produse/Carti.html".
Daca fisierul curent este "Carti.html", pentru a referi documentul
"Muzica.html" de foloseste expresia "Muzica.html"
Daca fisierul curent este "Carti.html", pentru a referi documentul
"index.html" de foloseste expresia " /index.html"
Daca fisierul curent este "Carti.html", pentru a referi documentul
"Preturi.html" de foloseste expresia " /Informatii/Preturi.html"
Iata schema site-ului. Alegeti documentul pe care il doriti prezentat ca exemplu in folosirea ancorelor si a URL-urilor relative:
----- ----- ----
| Radacina |
----- ----- ----
|
-------- ----- ------ --------
| | |
----------- ----------- ------------
| index.html | | Produse | | Informatii |
----------- ----------- ------------
| |
----------- ----- ----- ----
| | | Preturi.html |
------------ ------------ ------------
| Carti.html | | Muzica.html |
------------ ------------
Folosirea URL-urilor relative este foarte convenabila deoarece, atunci cand site-ul este publicat, locatia sa pe server poate fi schimbata de catre administratorul calculatorului, aceasta modificare afectand doar calea catre radacina site-ului, si nicidecum relatiile si legaturile din interiorul site-ului. Exista posibilitatea de a fixa un URL de baza relativ la care sa se calculeze toate URL-urile relative intr-un document. Acest lucru este posibil prin folosirea in sectiunea de antet a documentului a controlului de marcaj <Base>, al carui atribut href fixeaza baza de formare a documentului. De exemplu, daca in in documentul "Carti.html" se fixeaza
<Base href = "https://www.CalculatorulMeu.com/Radacina/index.html">
inseamna ca toate URL-urile relative se calculeaza fata de documentul "index.html", o referinta catre documentul "Preturi.html" avind forma:
<A href = "Informatii/Preturi.html">Preturile</A> sunt urmatoarele...
Folosirea acestei optiuni trebuie facuta doar daca dumneavoastra controlati schimbarile efectuate in amplasarea site-ului pe server. Altfel, documentele referite nu vor mai fi gasite, iar in fereastra va fi afisata o pagina continand mesajul de eroare corespunzator.
Inapoi la referinte
In interiorul documentului, textul elementului referinta (interna sau externa) este scris de obicei cu culoare albastra si subliniat. Pentru a alege culoarea de prezentare a referintelor intr-o pagina se folosesc urmatoarele atribute ale elementului Body:
In momentul in care activam
o referinta catre un document HTML, acesta va fi
afisat in fereastra programului de explorare Web, in locul documentului
initial.
Daca vrem sa controlam fereastra in care va fi afisat
noul document putem sa folosim atributul target a
elementului ancora. Valorile posibile ale acestui atribut sunt:
Exemplu: Exemplu de document cu setari de culoare si ferestre "tinta" pentru legaturi [sursa] [vizualizare]
Referinte interne
Activarea unei referinte catre un documet face ca acel
document sa fie afisat in fereastra programului de explorare. Dar daca apare
situatia in care din documentul referit ne intereseaza un anumit element si
vrem ca acesta sa fie afisat incepand cu prima linie a ferestrei? In acest caz
trebuie sa definim in acel document o ancora destinatie numit
"tinta".
O tinta se marcheaza cu ajutorul elementului ancora (A)
caruia i se atribuie un nume de identificare cu ajutorul atributului Name sau Id.
Exemplu:
<A name = "intro"><H2>Introducere</H2></A>
Pentru a creea in acelasi document o referinta catre
tinta definita mai sus nu ramane decat sa scriem corect atributul de referinta
hipertext.
Exemplu:
<A href = "#intro">Partea 1.Introducere </A>
Daca referinta este creata in alt document ea trebuie sa contina URL-ul documentului care contine tinta si numele de identificare a tintei. Exemplu:
<A href = "www.Calculator.com/Documente/Document1.html#intro">Partea 1.Introducere </A>
Este foarte important ca numele de identificare a unei tinte sa fie unic in cadrul unui document. In caz contrar destinatia referintei nu mai este valida.
Exemplu: Folosirea referintelor catre tinte interne [sursa] [vizualizare]
Specificare unei relatii intre documente
Elementul LINK este folosit in antetul documentului pentru a specifica o relatie intre documentul curent si alte documente sau programe din Web. Elementul LINK nu are continut si nu va fi afisat in interiorul documentului, dar el este folosit de catre programele de navigare Web in diverse scopuri, depinzand de valoarea atributul rel, valoare ce defineste relatia cu documentul referit. Iata cateva dintre valorile posibile ale acestui atribut:
Alternate
defineste o alternativa la documentul curent si este folosita de obicei impreuna cu atributul hreflang pentru a specifica limba in care este scris documentul. Exemplu:
<HEAD>
<TITLE>The manual in English</TITLE>
<LINK title="Manualul in limba engleza"
type="text/html"
rel="alternate"
hreflang="fr"
href="https://Calculator.com/manual/franceza.html">
Stylesheet
defineste o legatura cu un document de tip "foaie de stil", despre care vom vorbi mai tarziu
Start
defineste primul document dintr-o colectie de documente
Next si Previous
definesc care sunt urmatorul si, respectiv, precedentul document intr-o ordonare liniara a colectiei de documente
Contents, Index, si Glosary
definsesc
documente de tipul "Cuprins" , "Index" si
"Glosar".
Exemplu:
<HEAD>
<TITLE>Capitolul 4</TITLE>
<LINK rel="Contents" href=" /toc.html">
<LINK rel="Index" href=" /index.html">
<LINK rel="Next" href="Capitolul5.html">
<LINK rel="Prev" href="Capitolul3.html">
</HEAD>
Modul in care informatia oferita de elementul Link este folosita depinde foarte mult de
programul de navigare si motoarele de cautare in Web.
Utilizarea imaginilor
Introducere
In lectia precedenta ati invatat cum sa folositi elementul esential al unui document HTML: legatura cu alte documente sau programe. Insa va lipseste posibilitatea de a da documentului un aspect cat mai atractiv pentru cei ce il viziteaza. Pentru a realiza acest lucru va trebui sa "impodobiti" documentul cu imagini, fie ele statice sau dinamice. Trebuie stiut insa faptul ca incarcarea imaginilor in document este o operatiune care costa timp - fara sa mai vorbim ca exista programe de explorare Web care nu lucreaza cu imagini! - si de aceea va trebui sa faceti o alegere echilibrata intre numarul si dimensiunea imaginilor -pe de o parte - si timpul de incarcare a documentului - pe de-alta parte.
Inserarea unei imagini
Pentru a marca prezenta unei imagini in document se
foloseste elementul IMG, al carui atribut Src este URL-ul fisierului imagine. Tipurile de
fisiere-imagine compatibile cu HTML sunt GIF, JPEG si PNG.
Exemplu:
<IMG src = "Imagini/Peisaj.gif">
Elementul IMG nu are eticheta de incheiere deoarece elementul nu are continut pe care sa-l includa.
Ar fi bine ca atunci cand inserati o imagine sa folositi si atributul Alt care specifica un text care va fi afisat in locul imaginii in cazul in care browser-ul nu lucreaza decat in mod text sau in cazul in care utilizatorul decide sa renunte la incarcarea imaginilor (optiune oferita de programele de navigare Web). Daca imaginea este afisata, valoarea atributului Alt va fi folosita ca mesaj "tool-tip" .
In cazul in care doriti sa prezentati in cadrul documentului un anumit
numar de imagini a caror dimensiune ar afecta dramatic timpul de incarcare al
documentului in fereastra programului de explorare se poate aplica urmatoarea
tehnica:
Se creeaza copii de dimensiuni mici ale acestor imagini. Aceste copii vor fi
incarcate in document si vor avea rolul unor legaturi catre fisierele ce contin
imaginile in dimensiunea lor initiala. Atunci cand utilizatorul va activa una
dintre aceste legaturi in fereastra se va incarca fisierul imagine dorit
Pentru a aranja imaginea in raport cu textul din vecinatatea sa se foloseste atributul align. Valorile posibile sunt:
bottom
pentru alinierea textului la baza inferioara a imaginii (valoare implicita)
middle sau center
pentru alinierea textului pe centrul imaginii
top
pentru alinerea textului la baza superioara a imaginii
left
pentru a plasa imaginea in extremitatea stanga a elementului container, iar blocul de text eventual existent dupa marcajul imaginii respective ocupand spatiul liber din dreapta si de sub ea.
right
pentru a plasa imaginea in extremitatea dreapta a elementului container, iar blocul de text eventual existent dupa marcajul imaginii respective ocupand spatiul liber din stanga si de sub ea.
In cazul ultimelor doua valori poate aparea situatia in care un bloc de text trebuie "fortat sa coboare" pe prima linie de sub imagine. In acest caz se foloseste atributul clear al elementului BR care apare inaintea blocului de text pe care vrem sa il translatam. Valorile acestui atribut pot fi:
left
pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din stanga este libera
right
pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din dreapta este libera
all
pentru ca textul sa fie deplasat in jos pana in pozitia in care ambele margini sunt libere
Exemplu: Folosirea imaginilor in document [sursa] [vizualizare]
Pentru a controla spatiul vertical sau orizontal din jurul imaginii inserate in document se folosesc atributele vspace si hspace . Valorile atribuite desemneaza numarul de pixeli care vor distanta imaginea de elementele adiacente ei in cadrul documentului
Atributele width si height stabilesc dimensiunile suprafetei din document care va fi ocupata de imagine. Precizarea acestor atribute determina o mai rapida incarcare a documentului in fereastra programului de explorare, dar in cazul precizarii unor dimensiuni care nu corespund dimensiunilor reale ale imaginii aceasta va fi deformata pentu a acoperii exact suprafata precizata.
Folosirea atributului border determina afisarea unui chenar care va incadra imaginea. Valoarea acestui atribut va reprezenta grosimea chenarului, o valoare egala cu 0 (valoare implicita) determinand afisarea imaginii fara chenar.
Exemplu: Precizare atributelor pentru dimensiunile, bordura si spatiul din jurul imaginii [sursa] [vizualizare]
Folosirea imaginilor ca elemente "ancora"
In documentele HTML se folosesc frecvent imaginile pe post de ancore, adica legaturi catre alte documente sau programe. Acest lucru se poate realiza foarte usor prin plasarea imaginii in interiorul unui element ancora (A). Exemplu:
<a href = "pagina1.html"><img src = "imaginea1.gif" alt = "pagina1"></a>
Observati introducerea textului alternativ care devine obligatoriu in cazul
in care imaginea nu poate fi afisata de catre browser.
In momentul incadrarii elementului imagine intre controalele <a> si </a>,
browserele adauga imaginii o bordura. Pentru a evita aparitia ei folositi
atributul border cu o valoare atribuita egala
cu 0.
Exista insa si posibilitatea ca aceea si imagine sa fie ancora pentru mai multe legaturi prin definirea unei harti de imagine.
O harta de imagine este un element grafic (imagine) care dispune de una sau
mai multe regiuni reprezentand legaturi cu alte document sau programe din Web.
Daca vreti, se poate spune ca o harta de imagine aste asemanatoare unei liste
in care fiecare item reprezinta o legatura hipertext.
Exista doua tipuri de harti de imagine. Primul, harta de imagine pe server,
este veche si neconvenabila datorita necesitatii schimbului de informatii cu
serverul, procedura care trebuie - pe cat posibil- evitata.
Al doilea tip de harta este harta de imagine la client, denumita astfel
deoarece legaturile hartii cu alte documente sau programe sunt expuse in cadrul
documentului si gestionate de catre programul de explorare Web utilizat de
client. Despre aceasta ne vom ocupa in cele ce urmeaza.
Pentru ca o imagine sa devina harta de imagine, ea
trebuie pusa in legatura cu un element de marcaj HTML numit MAP.
Acest element va contine, de fapt, lista regiunilor senzitive din cadrul
imaginii. Fiecarea regiune este marcata la randul ei de marcajul AREA.
Exemplu: Ancore si harti de imagine [sursa] [vizualizare]
Atributele care insotesc o astfel de regiune sunt:
shape
defineste forma regiunii respective. Valorile posibile sunt:
rect pentru dreptunghi
circle pentru cerc
poly pentru un poligon oarecare
coords
specifica coordonatele figurii respective. Numarul si semnificatia lor difera in functie de forma aleasa :
rect:x1,y1,x2,y2 - unde x1,y1 sunt coordonatele coltului din stanga sus, iar x2,y2 sunt coordonatele coltului din dreapta jos
circ:x,y,r - unde x,y sunt coordonatele centrului, iar r este raza cercului
poly:x1,y1,x2,y2,....,xn,yn - unde fiecare pereche de forma xi,yi reprezinta coordonatele unui varf al poligonului
href
reprezinta referinta hipertext catre documentul sau programul dorit
nohref
specifica faptul ca regiunea nu reprezinta o legatura in Web
alt
specifica textul de afisat ca alternativa la imagine
Un element MAP trebuie sa aiba un atribut de identificare name a carui valoare va fi numele hartii. El este folosit pentru a transforma o imagine intr-o harta. Astfel, se va folosi atributul usemap al elementului IMG a carui valoare desemneaza harta folosita pe imaginea respectiva.
Folosirea clipurilor video in Internet Explorer
Internet Explorer permite inserarea foarte simpla a fisierelor de tip "imagine dinamica" (clipuri video) in acelasi mod in care se insereaza o imagine statica. Astfel, pentru elementul IMG se folosesc atributele:
Pentru a insera in document un clip video sau audio care sa poata fi redat si de alte browsere se poate folosi elementul embed cu atributele:
Reusita inserarii unui astfel de clip depinde ded extensia fisierului folosit si de versiunea browserului. Pentru fisierele video e preferabil sa folositi extensiile "mpg" sau "mov" , iar pentru cele audio formatul "mp3".
Exemplu: Inserarea unui clip video in document [sursa] [vizualizare]
Tabele
Introducere
In capitolul dedicat listelor am prezentat una dintre posibilitatile pe care le aveti de a prezenta in interiorul documentului informatia structurata. Insa folosirea listelor este utila doar atunci cand structura informatiei nu prezinta un grad mare de complexitate. De aceea apare necesitatea unui instrument care sa poata rezolva aceasta problema. Insa, asa cum veti vedea in cadrul acestui capitol, tabelele au si alte utilizari, jucand un rol foarte important printre instrumentele pe care le au la indemana relizatorii paginilor Web.
Marcarea unui tabel
Un tabel este marcat in document de perechea de controale
<TABLE> si </TABLE>.
Pentru a specifica principalele proprietati ale tabelului se folosesc
urmatoarele atribute:
width si height
Stabilesc dimensiunile tabelului si pot fi exprimate in mod absolut sau in mod relativ. Dimensiunile pe care tabelul le va avea in cadrul documentului vor fi calculate de catre programul de explorare Web tinand cont de optiunile specificate prin cele doua atribute, dar si de dimensiunile elementelor din interiorul tabelului in asa fel incat acestea sa fie vizibile.
align
Determina pozitionarea pe orizontala a tabelului in cadrul documentului. Optiunile posibile au fost prezentate in capitolul al II-lea
border
Stabileste grosimea in pixeli a chenarului care inconjoara tabelul. In cazul in care s-a ales valoarea 0 tabelul nu va afisa nici chenar, nici linii de demarcare in interiorul sau.
frame
Stabileste care laturi ale chenarului care incadreaza tabelul vor fi vizibile. Optiunile posibile sunt:
void - nici o latura
above - latura de sus
below - latura de jos
hsides - laturile de sus si de jos
vsides - laturile din stanga si din dreapta
lhs - latura din stanga
rhs - latura din dreapta
box - toate laturile
border - toate laturile
rules
determina care dintre liniile de demarcare dintre celulele tabelului vor fi vizibile. Optiunile posibile sunt:
none - nici o linie
groups - liniile dintre grupurile definite ale tabelului. Cum de defineste un grup vom vedea putin mai tarziu.
rows - liniile orizontale
cols - liniile vericale
all - toate liniile
cellspacing
stabileste spatiul (in pixeli) dintre doua celule vecine ale unui tabel precum si spatiul dintre marginile tabelului si celulele din apropiere.
cellpading
stabileste spatiul dintre marginile unei celule si continutul acesteia.
bgcolor
stabileste culoarea de fond a tabelului.
background
stabileste imaginea de fond a tabelului.
Elementele care constitue un tabel sunt:
De fiecare dintre acestea ne vom ocupa in cele ce urmeaza.
Corpul tabelului
Corpul tabelului este partea cea mai importanta, el
continand informatia propriu-zisa afisata in tabel. Se marcheaza cu ajutorul
controalelor <TBODY> si </TBODY>. Pentru a avea consistenta, acesta
trebuie sa contina cel putin o linie din tabel.
Marcarea corpului tabelului nu este obligatorie, prezenta sa fiind implicita in
cadrul tabelului in momentul marcarii primei linii a lui.
O linie in tabel se marcheaza cu ajutorul controalelor <TR>
si </TR>. Ea contine una sau mai mule
celule marcate prin controalele <TD> si </TD>. Nu este obligatoriu ca toate liniile sa
contina acelasi numar de celule. Numarul de coloane ale unui tabel se considera
a fi numarul maxim de celule a liniilor tabelului. Pe o linie celulule sunt
dispuse de la stanga la dreapta in ordinea in care au fost introduse in codul
sursa al documentului, exceptie facand cazul in care directia de scriere in
tabel a fost stabilita de la dreapta la stanga cu ajutorul atributului dir, caz in care dispunerea lor se va face de la
dreapta la stanga.
Intr-un tabel pot exista mai multe corpuri de tabel, aceasta optiune putandu-se
pune in practica atunci cand se doreste gruparea liniilor unui tabel conform
unor regului stabilite.
Exemplu: Doua tabele simple [sursa] [vizualizare]
Corpul unui tabel poata sa contina atribute care determina formatarea elementelor pe care acesta le contine:
bgcolor
seteaza culoarea de fond a celulelor din interiorul sau. Acest atribut nu este implementat in varianta 4.7 a lui Netscape Navigator
align
determina pozitionarea pe orizontala a continutului in cadrul unei celule
valign
determina pozitionarea pe vericala a continutului unei celule. Optiunile posibile sunt:
top - alinierea se face la baza superioara a celulei.
middle - pozitionare centrata in celula.
bottom - alinierea se face la baza inferioara a celulei.
Elementul TR marcheaza prezenta unei linii de date intr-un tabel si reprezinta elementul container al celulelor care contin informatia propriu-zisa a tabelului. Lui i se pot atasa, de asemenea, atributele care se refera la culoarea de fond a celulelor pe care le contine sau la pozitionarea elementelor in interiorul acestor celule.
Celulele unui tabel pot sa contina in interiorul lor text, imagini, ancore de legaturi, sau chiar alte tabele. In afara proprietatilor mentionate la liniile tabelului, celulele au doua atribute foarte importante care permit formatarea si structurarea informatiei in interiorul tabelului:
colspan
determina numarul de coloane ocupate de celula. Valoarea implicita este "1".
rowspan
determina
numarul de linii ocupate de celula. Valoarea implicita este "1".
Atunci cand intr-un tabel se fac extinderi ale celulelor pe linii si coloane
trebuie avut in vedere ca nu cumva doua celule diferite sa pretinda spatiul
unei aceleasi celule.
width si height
recomanda programului de explorare web dimensiunile celulei. Nu uitati ca dimensiunile afisate ale celulelor se fac atat in functie de optiunile exprimate prin atributele specifice, cat si tinand seama de dimensiunile elementelor care constitue continutul acestor celule.
Exemplu: Specificarea proprietatilor de dimensionare ale celulelor [sursa] [vizualizare]
Aceste atribute sunt folosite si atunci cand tabelul este folosit pentru pozitionarea elementelor in cadrul documentului.
Exemplu: Aranjarea elementelor unui document cu ajutorul tabelului [sursa] [vizualizare]
Exemplu: Tabele imbricate [sursa] [vizualizare]
Eticheta de tabel
Eticheta de tabel este folosita pentru a afisa deasupra
tabelului un text scurt care - de obicei - informeaza despre datele continute
in tabel. Ea se marcheaza cu ajutorul controalelor <CAPTION>
si </CAPTION>. Ecest element trebuie sa
apara imediat dupa controlul de inceput care marcheaza tabelul. Un tabel nu
poate avea decat o singura eticheta.
Cel mai important atribut al etichetei de tabel este align.
Acesta determina pozitionarea etichetei fata de tabel si are urmatoarele valori
posibile:
Exemplu: Tabel cu eticheta [sursa] [vizualizare]
Lectia anterioara Lectia urmatoare
Antetul si subsoulul tabelului
Antetul si subsolul tabelului sunt componente ale tabelului care contin in general informatii despre datele prezentate, spre deosebire de corpul tabelului care contine respectivele date. Antetul si subsolul sunt formate din una sau mai multe linii, linii care, la randul lor, contin una sau mai multe celule.
Antetul este marcat de controalele <THEAD>
si </THEAD>, iar subsolul tabelului este
marcat de controalele <TFOOT> si </TFOOT>. Aceste controale trebuie sa apara
inaintea controlului de inceput care marcheaza corpul tabelului In Netscape 4.7 subsoloul tabelului trebuie pozitionat
dupa corpul acelui tabel.)
In
mod normal, THEAD, TBODY
si TFOOT contin acelasi numar de coloane.
Antetul si subsolul unui tabel trebuie sa contina cel putin o linie de tabel marcata cu ajutorul elementului TR. Celulele care intra in componenta antetului sau a subsolului tabelului se marcheaza de obicei cu controalele <TH> si </TH>, dar este posibila si folosirea marcajelor pentru celulele folosite in corpul tabelului, deoarece, in mare masura, cele doua elemente sunt echivalente.
Atributele cele mai importante ale antetului si subsolului tabelului sunt cele legate de pozitionare, dimensionare sau fond si au fost prezentate in sectiunea dedicata corpului tabelului.
Exemplu: Tabel cu eticheta,antet si subsol [sursa] [vizualizare]
Lectia anterioara
Grupuri de coloane
Antetul corpul si subsolul tabelului reprezinta modalitati de a grupa pe orizontala informatia prezentata intr-un tabel. Exista si posibilitatea de a grupa coloanele unui tabel prin definirea unuia sau mai multor grupuri de coloane. Un grup de coloane se marcheaza prin controalele <COLGROUP> si </COLGROUP> , marcajul de inchidere putand sa lipseasca. Pentru a specifica numarul de coloane incluse in grup se pot folosi doua modalitati:
In cazul in care nici una dintre aceste doua optiuni nu este prezenta se considera ca grupul de coloane contine o singura coloana.
Grupurile de coloane se introduc in document inaintea antetului sau a
corpului tabelului si ele pot contine atribute referitoare la pozitionarea
continutului in interiorul celulelor sau la dimensiunea coloanelor pe care
acestea le contin. Astfel, atributul width
recomanda latimea pe care ar trebui sa o aiba toate coloanele grupului.
Valoarea "0*" determina alocarea fiecarei coloane a grupului a
unui spatiu minim pe orizontala astfel incat continutul celulelor sa fie vizibil.
De asemenea, in cazul in care grupul de coloane se construieste prin
specificarea separata a elementului COL pentru
fiecare coloana acest element poate sa contina atributele referitoare la
dimensionarea fiecarei coloane in parte sau la pozitionarea continutului in
interiorul celulelor. Trebuie stiut ca, in mod implicit, programul de explorare
calculeaza dimensiunile coloanelor la valori minime necesare pentru ca
elementele din interiorul celulelor sa fie vizibile.
Exemplu: Utilizarea grupurilor de coloane[sursa] [vizualizare]
Pagina de cadre si cadre in pagina
Introducere
In lectia dedicata referintelor si legaturilor am vazut ca atunci cand se
activeaza o ancora de legatura cu un alt document, acesta din urma (documentul
destinatie) este incarcat de catre programul de explorare Web in fereastra
documentului sursa sau intr-o fereastra noua. Ambele optiuni prezinta neajunsul
de a nu putea avea ambele documente deschise simultan in aceeasi fereastra
pentru a putea avea acces cu usurinta la fiecare dintre ele.
Elementele
introduse in aceasta lectie rezolva in mod foarte elegant aceasta problema.
Lectia anterioara Lectia urmatoare
Pagina de cadre
O pagina de cadre este un document HTML care va permite
sa vizualizati in ceeasi fereastra mai multe documente, fiecare asezat in
propriul cadru, cadru care este de fapt o fereastra de sine-statatoare si care
permite derularea documentului sau incarcarea unui alt document. Intr-o pagina
de cadre lipseste elementul BODY, continutul
paginii fiind marcat cu ajutorul controalelor <FRAMESET>
si </FRAMESET>.
Ficare cadru din interiorul documentului este marcat cu ajutorul controalelor <FRAME> si </FRAME>.
Pentru a da informatii despre asezarea si dimensiunea cadrelor continute se folosesc urmatoarele atribute ale elementului FRAMESET:
rows
determina
spatiul pe verticala pus la dispozitia fiecarui cadru si are forma unei liste
de valori absolute, relative sau proportionale ale inaltimii fiecarui cadru.
Caracterul "*" in cadrul listei acorda cadrului corespunzator
spatiul liber ramas.
De exemplu, formularea
<FRAMESET rows = "60%,*">
determina impartirea documentului pe vericala in doua cadre, primul avind inaltimea de 60% din spatiul vertical disponibil in fereastra, iar al doilea de 40% din acelasi spatiu.
cols
determina spatiul pe orizontala pus la dispozitia fiecarui cadru si are forma unei liste de valori absolute, relative sau proportionale ale latimii fiecarui cadru.
Numarul valorilor separate de virgula trebuie sa fie acelasi cu numarul cadrelor care impart pe verticala sau pe orizontala documentul. In cazul in care se specifica valori pentru ambele atribute documentul va fi impartit atat pe orizontala cat si pe verticala, ordinea in care vor fi asezate cadrele in pagina fiind determinata de ordinea atributelor rows si cols si de ordinea elementelor FRAME in cadrul elementului FRAMESET.
Exemplu: Cadre pe orizontala [sursa] [vizualizare]
Exemplu: Cadre pe verticala [sursa] [vizualizare]
Exemplu: Cadre pe orizontala si verticala [sursa] [vizualizare]
In cazul in care se doreste structurarea mai pretentioasa a cadrelor in document se pot folosi cadrele imbricate, adica acele cadre care contin la randul lor alte cadre.
Exemplu: Pagina cu cadre imbricate [sursa] [vizualizare]
Iata si codul sursa al paginii de "cuprins", pagina ce continea tintele definite ale legaturilor din exemplul precedent:
Exemplu: Legaturi cu tinte definite [sursa]
Deoarece cadrele sunt elemente relativ noi in limbajul HTML, exista posibilitatea ca unele programe de explorare Web sa nu le poata afisa. De aceea e bine ca o pagina cu cadre sa contina si informatie alternativa, informatie care va fi afisata de aceste programe. Pentru aceasta se folosesc marcajele <NOFRAMES> si </NOFRAMES>, dupa modelul prezentat in exemplele anterioare.
Elementul cadru
Pentru a marca un cadru intr-o pagina de cadre se folosesc controalele <FRAME> si </FRAME>. Atributele care specifica modul de afisare a unui cadru sunt:
name
identifica un
cadru pentru a putea fi folosit ca valoare a atributului target a unei ancore sursa.
Exista si posibilitatea de a predefini tintele referintelor la nivel de
document cu ajutorul aceluiasi atribut aplicat elementului BASE. Astfel, o formulare de genul:
<BASE target = "cadruA">
face ca
toate ancorele prezente in documentul respectiv sa aiba ca tinta cadrul
"cadruA", cu exceptia celor care specifica ele insele o alta tinta.
Pentru a afisa un document in fereastra mare, nedivizata in cadre, folositi
valorile "_parent" sau _top pentru atributul target al elementului ancora.
src
specifica URL-ul documentului care va fi afisat in cadru la incarcarea paginii de cadre in fereastra.
noresize
reprezinta un atribut e tip boolean care, prin prezenta sa, impune imposibilitatea de a redimensiona cadrul.
scrolling
determina afisarea sau nefisarea barelor de defilare pe mariginea cadrului. Urmatoarele optiuni sunt posibile:
auto
determina aparitia barelor de defilare doar in momentul in care o parte din document nu este vizibila in cadru (optiune implicita)
yes
determina afisarea cadrului cu bare de defilare, indiferent de dimensiune documentului continut
no
determina afisarea cadrului fara bare de defilare, indiferent de dimensiune documentului continut
frameborder
determina afisrea sau neafisarea unei borduri de demarcare intre cadre adiacente. Optiunile posibile sunt:
determina afisarea bordurii (valoare implicita).
determina neafisarea bordurii.
marginwidth si marginheight
stabilesc spatiul pe orizontala si, respectiv, pe verticala lasat liber intre marginile cadrului si continutul sau.
Exemplu: Cadre pe orizontala [sursa] [vizualizare]
Exemplu: Cadre pe verticala [sursa] [vizualizare]
Exemplu: Cadre pe orizontala si verticala [sursa] [vizualizare]
Cadre in interiorul unui document obisnuit
Exista si posibilitatea de a afisa in interiorul unei pagini HTML uzuale o fereastra care sa contina un alt document. Acest lucru se realizeaza prin folosirea elementului numit "fereastra interna" si marcat cu ajutorul controalelor <IFRAME> si </IFRAME>.
Exemplu: Document cu fereastra interna[sursa] [vizualizare]
In afara atributelor prezentate in paragraful precedent, elementul IFRAME mai dispune de cateva specifice:
width si heiht
determina dimensiunile pe orizontala si verticala ale ferestrei.
align
determina pozitionarea ferestrei in document in raport cu elementele adiacente . Valorile si modul de pozitionare sunt analoage celor descrise la alinierea imaginilor.
Ferestrele interne nu pot fi redimensionate si de aceea ele nu poseda atributul noresize.
O alta modalitate de a insera un document HTML sau un alt tip de document,
o imagine sau un applet intr-o pagina Web este folosirea elementului OBJECT.
Atributul data reprezinta URL-ul fisierului de
incarcat in cazul documentelor sau al imaginilor, iar width
si height determina dimensiunile alocate
obiectului in pagina.
Exemplu: Inserarea unui document intr-o pagina [sursa] [vizualizare]
Formulare HTML
Introducere
Sunt sigur ca ati intalnit in Web pagini in care nu vi se ofera ci vi se cere informatie. Pagini in care ati fost rugati politicos sa va introduceti numele, varsta, adresa sau o parola. Toate aceste date erau "colectionate" de catre un calculator numit "server" si mai apoi procesate, utilizatorul primind ca raspuns - in general - o pagina de confirmare sau una care semnaleaza prezenta erorilor in receptionarea acestor date sau erori legate de valorile introduse de utilizator.
Deoarece folosirea acestui tip de comunicare necesita publicarea documentelor pe un server Web si folosirea unor tipuri de programe care depasesc scopul acestei documentatii, exemplele prezentate nu sunt functionale. Ele se pot folosi doar pentru studierea documentului sursa si pentru a avea o imagine generala asupra folosirii formularelor.
|
