Suport Curs HTML

INSTITUTUL MULTIMEDIA ROMNO ELVETIAN
SUPORT DE CURS

HTML

REALIZATOR CURS: LAZA CRISTIAN

-DEVA-
-2006-

HTML Realizator curs: Cristian laza

Copyright 2006 : Institutul Multimedia Romno Elvetian

OBIECTIVUL CURSULUI:

Dupa studierea acestui curs, studentii vor fi capabili sa realizeze pagini web de complexitate
medie prin :

- definirea corecta a structurii unui document HTML
- introducerea unor elemente de identificare a paginii, utile mai ales pentru inscrierea la
motoarele de cautare
- stabilirea unor proprietati ale documentului, in general legate de aspectul acestuia
- impartirea documentului in sectiuni logice, formatarea acestora, precum si a unor
elemente componente
- includerea de elemente complexe de tip lista, tabel sau imagine in documentul HTML
- creare de legaturi si ancore intre documente, acestea fiind de fapt elementul esential in
realizarea unui site
- imbinarea unor elemente pentru a face pagina mai atractiva, din punct de vedere estetic
sau functional
- crearea unor documnte HTML bazate pe cadre in scopul de a structura si gestiona mai bine
cantitati mari de informatie
- includerea de formulare in vederea realizarii unor interactiuni cu utilizatorul sub forma de
feed-back

Tema finala va consta in proiectarea unui site de baza, cuprinzand o descriere a site-ului
(realizarea hartii site-ului ) si realizarea lui efectiva prin implementarea unei pagini principale
si a unei serii de alte pagini aflate pe nivele ierarhice inferioare acesteia.



CUPRINS

1. INTRODUCERE............................................................................................................ 7
1.1. Ce este WWW?...................................................................................................... 7
1.2. Navigatoare web................................................................................................... 7
1.3. Ce este de fapt HTML?........................................................................................... 7
1.4. Notiunea de eticheta (tag).................................................................................... 7
2. CREAREA UNUI DOCUMENT HTML............................................................................... 8
2.1. Structura unui document HTML............................................................................. 8
2.1.1. DOCTYPE........................................................................................................... 9
2.1.2. HTML ................................................................................................................ 9
2.2. Sectiuni................................................................................................................. 9
2.2.1. Antetul documentului HTML ................................................................................. 9
2.2.1.1. TITLE .......................................................................................................... 9
2.2.1.2. META......................................................................................................... 10
2.2.1.3. BASE......................................................................................................... 11
2.2.1.4. BASEFONT ................................................................................................. 11
2.2.1.5. LINK.......................................................................................................... 12
2.2.1.6. STYLE........................................................................................................ 12
2.2.1.7. SCRIPT ...................................................................................................... 13
2.2.2. Partea principala (corpul) documentului HTML ...................................................... 13
2.2.2.1. Atribute aditionale....................................................................................... 13
2.2.2.2. Antete (headere) ........................................................................................ 14
2.2.2.3. Paragrafe................................................................................................... 15
2.2.2.4. Linie noua .................................................................................................. 16
2.2.2.5. Desenarea unei linii ..................................................................................... 16
2.2.2.6. Citate ........................................................................................................ 17
2.2.2.7. Texte preformatate ..................................................................................... 17
2.2.2.8. Adresa....................................................................................................... 17
2.2.2.9. Entitati caracter si caractere speciale............................................................. 18
2.2.2.10. Comentarii ............................................................................................... 19
2.2.3. Divizarea corpului documentului in bucati ............................................................ 19
2.3. Etichete si atribute prezentate in acest capitol ................................................... 20
3. FORMATAREA TEXTULUI........................................................................................... 22
3.1. Formatarea logica............................................................................................... 22
3.2. Formatarea fizica................................................................................................ 23
3.3. Fonturi ................................................................................................................ 24
3.3.1. FONT .............................................................................................................. 24
3.3.2. FACE............................................................................................................... 25
3.3.3. SIZE ............................................................................................................... 26
3.3.4. COLOR ............................................................................................................ 26
4. LISTE........................................................................................................................ 28


4.1. Liste neordonate................................................................................................. 28
4.1.1. Definire si utilizare............................................................................................ 28
4.1.2. Atribute aditionale ............................................................................................ 30
4.2. Liste ordonate..................................................................................................... 31
4.3. Liste de definitii .................................................................................................. 34
5. TABELE ..................................................................................................................... 37
5.1. Definire si utilizare ............................................................................................. 37
5.2. Chenarul tabelului .............................................................................................. 39
5.3. Latimea si inaltimea tabelului ............................................................................. 39
5.4. Alinierea tabelului............................................................................................... 39
5.5. Spatierea celulelor.............................................................................................. 40
5.6. Spatierea datelor in celule .................................................................................. 40
5.7. Titlul tabelului .................................................................................................... 41
5.8. Capul de tabel ..................................................................................................... 42
5.9. Definirea celulelor tabelului................................................................................ 42
5.10. Extinderea celulelor .......................................................................................... 43
5.11. Alinierea datelor in celule ................................................................................. 43
5.12. Folosirea culorilor in tabele .............................................................................. 44
5.13. Gruparea coloanelor si liniilor.......................................................................... 45
5.13.1. Gruparea coloanelor ........................................................................................ 45
5.13.2. Gruparea liniilor (randurilor)............................................................................. 45
6. LEGATURI SI ANCORE............................................................................................... 46
6.1. Utilizarea legaturilor........................................................................................... 46
6.2. ANCHOR.............................................................................................................. 46
6.2.1. HREF............................................................................................................... 46
6.2.1.1. Legarea paginilor locale folosind cai relative ................................................... 47
6.2.1.2. Legarea paginilor locale folosind cai absolute.................................................. 48
6.2.1.3. Cai relative sau cai absolute ?....................................................................... 48
6.2.2. Legaturi la o sectiune din document (ancore denumite)......................................... 48
7. IMAGINI................................................................................................................... 50
7.1. Adaugarea imaginilor in documente HTML.......................................................... 50
7.1.1. Sursa imaginii (SRC)......................................................................................... 50
7.1.2. Alinierea (ALIGN) ............................................................................................. 50
7.1.3. Chenarul (BORDER) .......................................................................................... 51
7.1.4. Spatierea (HSPACE si VSPACE)........................................................................... 51


7.1.5. Dimensiuni (WIDTH si HEIGHT) .......................................................................... 51
7.1.6. Text alternant (ALT).......................................................................................... 51
7.2. Harti imagine (Maparea imaginilor).................................................................... 51
7.2.1. Harti pe server (server-side) .............................................................................. 52
7.2.2. Harti pentru client (client-side)........................................................................... 52
7.3. Combinarea cu alte elemente.............................................................................. 53
7.3.1. Imagini si legaturi............................................................................................. 53
7.3.2. Imagini si liste ................................................................................................. 54
7.3.3. Imagini si tabele............................................................................................... 54
7.3.4. Imagini si paragrafe.......................................................................................... 54
8. CADRE ...................................................................................................................... 56
8.1. Concept............................................................................................................... 56
8.2. Crearea unui document bazat pe cadre............................................................... 56
8.3. FRAMESET........................................................................................................... 57
8.3.1. Definirea coloanelor si a liniilor........................................................................... 57
8.3.2. Marginile si spatiul dintre cadre .......................................................................... 58
8.3.3. Alte atribute..................................................................................................... 59
8.3.4. FRAME ............................................................................................................ 59
8.3.5. NOFRAME ........................................................................................................ 61
8.4. Cadre IFRAME..................................................................................................... 61
8.4.1. Atribute........................................................................................................... 62
9. FORMULARE.............................................................................................................. 64
9.1. Elementul FORM.................................................................................................. 64
9.2. Elementul TEXTAREA .......................................................................................... 64
9.3. Elementul SELECT............................................................................................... 65
9.4. Elementul INPUT ................................................................................................ 66
9.4.1. Atribute........................................................................................................... 66
9.4.2. Valoarea TEXT.................................................................................................. 66
9.4.3. Valoarea PASSWORD ........................................................................................ 67
9.4.4. Valoarea CHECKBOX ......................................................................................... 67
9.4.5. Valoarea RADIO ............................................................................................... 67
9.4.6. Valoarea RESET................................................................................................ 68
9.4.7. Valoarea SUBMIT.............................................................................................. 68
9.4.8. Valoarea IMAGE ............................................................................................... 68
9.4.9. Valoarea BUTTON ............................................................................................. 68
9.4.10. Valoarea HIDDEN............................................................................................ 68
9.5. Elementul BUTTON.............................................................................................. 69
9.6. Elementul LABEL................................................................................................. 69
9.7. Elementul FIELDSET ........................................................................................... 69
9.8. Atribute comune ................................................................................................. 70
9.8.1. Dezactivarea.................................................................................................... 70


9.8.2. Navigarea........................................................................................................ 70
9.8.3. Taste de acces ................................................................................................. 70


1. INTRODUCERE

World Wide Web (W3) este o retea a resurselor informatizate. Web-ul se bazeaza pe trei
mecanisme in functionarea lui:

o organizare uniforma in numirea si localizarea resurselor in retea:
URI - Uniform Resources Identifier;
un protocol pentru accesul la resursele cu nume din retea;
un limbaj pentru a parcurge usor aceste resurse: HyperText.

1.1. Ce este WWW?

Informatia este stocata in pagini web. Paginile web sunt fisiere stocate in calculatoare numite
servere web. Calculatoarele care citesc pagini web sunt numite clienti web. Clientii web citesc
paginile web cu ajutorul unor programe numite browsere. Cele mai cunoscute standarde web sunt
HTML, CSS si XML.

1.2. Navigatoare web

Pentru a accesa informatiile disponibile pe anumite servere web este necesara utilizarea unui
produs software special denumit in continuare navigator.

1.3. Ce este de fapt HTML?

Ca sa publicam informatia pentru distribuire globala, este nevoie de un limbaj pe care toate
calculatoarele legate la Web, sa-l poata intelege. Limbajul de publicare a resurselor folosit in
reteaua Web este HTML. (HyperText Markup Language).

HTML ofera autorilor mijloacele :

de a publica online documente cu titluri, text, tabele , liste, fotografii;
de a primi online informatii via legaturilor hypertext, la click-ul unui buton de mouse;
de a compune formulare care sa ajute la cautarea si transmiterea de informatii;
de a include video-clipuri, sunete sau alte aplicatii in documentele publicate.

1.4. Notiunea de eticheta (tag)

Documentele contin numeroase elemente. Etichetele HTML sunt utilizate tocmai pentru a marca
aceste elemente. Ele sunt marginite de < si > si pot fi scrise atat cu litere mici cat si cu litere
mari. Se prezinta sub forma unor perechi:

<eticheta> ... </eticheta>

in care eticheta de sfarsit arata identic cu cea de inceput, cu exceptia caracterului /. Acestor
etichete le pot fi atasate atribute care vor fi specificate in cadrul etihetei de inceput.

De asemenea, in interiorul unei etichete pot fi definite alte etichete conducand astfel la realizarea
unei imbricari.

Exista desigur si exceptii cand anumite etichete nu au corespondent de sfarsit, caz in care le vom
numi etichete vide.


2. CREAREA UNUI DOCUMENT HTML

Un fisier HTML este un fisier ce contine etichete de marcare. Aceste etichete indica browserului
cum sa afiseze o pagina web.

Un document HTML trebuie sa aiba extensia .htm sau .html. Documentele HTML sunt fisiere
text construite din elemente HTML. Aceste elementele HTML sunt definite cu ajutorul etichetelor
(tag-urilor).

2.1. Structura unui document HTML

Un document HTML trebuie sa contina minim <HTML></HTML> pentru ca el sa fie recunoscut si
incarcat de navigator. Acesta reprezinta un document vid. Structura unui document HTML este:

<HTML>
<HEAD>
...
...
<TITLE> ... titlu ... </TITLE>
</HEAD>
<BODY>
...
...
</BODY>
</HTML>

Exemplul Hello World

Cand se invata un nou limbaj de programare, este traditional ca primul program creat sa fie
proiectat sa afiseze Hello World. Ei, cu toate ca HTML nu este un limbaj de programare, se
poate folosi acest exemplu pentru a afisa in fereastra navigatorului acest mesaj.

Exemplul 2.1.

<HTML>
<HEAD>
<TITLE>Pagina Hello World</TITLE>
</HEAD>
<BODY>
Hello World !
</BODY>
</HTML>

Iar pe ecran apare:

Hello World !



2.1.1. DOCTYPE

Teoretic, eticheta <!DOCTYPE> ar trebui sa fie prima eticheta intr-un document HTML, insa avand
un caracter optional poate fi omisa.
Sintaxa este:

<!DOCTYPE HTML sir>

In declartia de mai sus sir specifica versiunea HTML utilizata la crearea documentului. De
exemplu, in cazul in care s-a folosit HTML 4.0 o sa rezulte urmatoarea declaratie:

Exemplul 2.2.

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0//EN>

2.1.2. HTML

Prima eticheta dintr-un document HTML care apare imediat dupa <!DOCTYPE> este eticheta
<HTML> care face pereche cu </HTML> si care marcheaza inceputul si sfarsitul absolut al unui
fisier HTML.

<HTML> </HTML>

Recipientul HTML inglobeaza tot documentul HTML. Daca un document HTML nu contine nimic
altceva decat declaratia <HTML></HTML>, atunci rezultatul afisat in fereastra navigatorului este
o pagina vida.

2.2. Sectiuni

Elementele HEAD si BODY impart documentul in doua sectiuni: antet si partea principala (corpul)
a documentului HTML (ceea ce este vizibil in fereastra navigatorului).

2.2.1. Antetul documentului HTML

Antetul documentului HTML reprezinta sectiunea unde sunt se regasesc setarile globale, fiind
continut intre etichete <HEAD> ... </HEAD>. In cadrul portiunii de antet se pot folosi exclusiv
etichetele: TITLE, META, BASE, BASEFONT si LINK, precum si definirea foilor de stil in cascada si
a functiilor limbajului de script folosit.

Antetul are un rol important in cadrul unui document, deoarece el contine informatii legate de
titlul si continutul documentului, autorul acestuia, precum si cuvinte cheie. Protocolul HTTP ofera
posibilitatea de a descarca doar antetul unui document, aceasta facilitate fiind folosita in special
de motoarele de cautare.

2.2.1.1. TITLE



Este utilizat pentru afisarea titlului paginii web, fiind cuprins in sectiunea HEAD.

Sintaxa este:

<TITLE> titlul documentului HTML ... </TITLE>

Titlul va aparea in bara de sus a ferestrei navigatorului, nu in fereastra de afisare. El precizeaza
de obicei la ce se refera continutul documentului, lungimea sa fiind practic nelimitata. In cazul in
care intre cele doua tag-uri TITLE se gaseste un sir vid, navigatorul va utiliza ca si titlu implicit
numele fisierului HTML.

Exemplul 2.3.

<HTML>
<HEAD>
<TITLE>Aici apare titlul documentului HTML</TITLE>
</HEAD>
<BODY>
Iar aici va aparea continutul documentului.
</BODY>
</HTML>

Se observa ca in urma incarcarii fisierului de catre navigator in fereastra de afisare va aparea
textul Iar aici va aparea continutul documentului., iar pe bara de sus va fi afisat titlul Aici apare
titlul documentului HTML

2.2.1.2. META

Se regaseste tot in cadrul sectiunii HEAD, fiind util pentru introducerea unor informatii diverse
referitoare la operatiuni de indexare, identificare etc. Este utila mai ales motoarelor de cautare
care pot clasifica si indexa documentul fara a-l incarca in intregime, ci doar antetul lui.

Sintaxa este:

<META [http- equiv][name][content]>

Exemplul 2.4.

<HTML>
<HEAD>
<META NAME = Autor CONTENT = Laza Cristian>
<META NAME = Continut CONTENT = Exemplu HTML>
<META NAME = Cuvinte cheie CONTENT = HTML, HEAD, META>
<META HTTP-EQUIV = refresh CONTENT = 60>
<TITLE>Alt exemplu de document HTML</TITLE>
</HEAD>
<BODY>
... care foloseste etichete META


</BODY>
</HTML>

Dupa cum se observa eticheta META nu are corespondent de inchidere, fiind o eticheta vida si
suporta trei atribute:
NAME folosit pentru a da un nume proprietatii descrise; furnizeaza informatii despre
document (autor, ultima actualizare, cuvinte cheie etc)
CONTENT reprezinta continutul proprietatii, valoarea reala continuta in eticheta
HTTP-EQUIV inlocuieste atributul name, fiind folosita ca raspuns furnizat de server
navigatorului.

2.2.1.3. BASE

Deseori URL-urile dintr-un document fac legatura la documente aflate pe acelasi server in acelasi
director. Alta data, se face legatura la documente aflate pe acelasi server insa in alte directoare
de nivel superior sau inferior celui curent. In acest caz este bine sa se specifice URL-ul spre
directoarele sau fisierele respective pentru a se evita definirea legaturilor folosind intreaga cale,
incepand cu protocolul (http://), continuand cu numele serverului (www.numeserver.domeniu) si
terminand cu calea inspre fisierul dorit (/director/altdirector/fisier.html).

Pentru stabilirea URL-ului de baza intr-un document se foloseste eticheta BASE, care este de
sine-statatoare si care are urmatoarea sintaxa:

<BASE HREF=protocol://nume_server/cale_de_cautare/>

BASE necesita un singur atribut HREF unde se specifica URL-ul absolut folosit la definirea
legaturilor in cele mai multe cazuri.

Multe navigatoare considera URL-ul documentului ca URL de baza, asa ca toate referirile din
document sunt facute relativ la URL-ul documentului. Pentru aceste navigatoare nu este necesar
specificarea URL-ului de baza, dar este bine totusi ca aceasta sa fie inclusa.

2.2.1.4. BASEFONT

Eticheta BASEFONT este folosita pentru a stabili dimensiunea, tipul si culoarea fontului de baza in
document. Alegerile facute in eticheta BASEFONT raman aceleasi pentru tot documentul atat timp
cat ele nu vor fi inlocuite de un element FONT. Dupa eticheta de inchidere a elementului FONT se
revine la caracteristicile stabilite prin BASEFONT.

Sintaxa este:

<BASEFONT FACE=... SIZE=... COLOR=...>

Atributele din BASEFONT pot fi schimbate de alta eticheta BASEFONT oriunde in document. Ele se
folosesc la fel ca si in cazul etichetei FONT.

Exemplul 2.5.

<HTML>


<HEAD>
<TITLE>Exemplu de folosire a etichetei BASEFONT</TITLE>
</HEAD>
<BODY>
Acest text este inaintea etichetei BASEFONT.<BR>
<BASEFONT SIZE=5 FACE=Verdana>
Acest text este dupa eticheta BASEFONT.<BR>
</BODY>
</HTML>

Eticheta BASEFONT nu se comporta ca un recipient, astfel nu are nevoie de eticheta de inchidere.

2.2.1.5. LINK

Eticheta LINK este folosita pentru a crea relatii intre documente. Este o eticheta de sine
statatoare si este folosita pentru a gestiona site-uri web mari, cu multe fisiere.

Teoretic, LINK este folosit pentru a crea bare de instrumente sau meniuri specifice documentului,
insa aproape toate navigatoarele inca ignora in continuare aceasta eticheta.

LINK poate avea mai multe atribute, insa cele mai folosite sunt: HREF, REL si REV. Iata lista
atributelor si functionalitatea lor:

Atribut Functie
HREF Specifica URL-ul documentului la care se face legatura.
NAME Defineste o legatura de la o ancora sau un URL la document.
METHODS Prevede o lista de functii suportate de documentul curent.
REL Defineste o relatie intre documentul curent si documentul specificat
in HREF.
REV Defineste relatia inversa intre documentul curent si documentul
specificat in HREF. (opusul lui REV)
TITLE Specifica titlul documentului de legatura.
URN Atribuie un URN (Uniform Resource Number) documentului curent.

Acum, singura intrebuintare a etichetei LINK este aceea de a specifica foile de stil ca fiind
exterioare documentului, dupa cum se poate observa si din exemplul urmator:

Exemplul 2.6.

<HTML>
<HEAD>
<LINK HREF="mystyles.css" REL="stylesheet">
<TITLE>Exemplu de folosire a etichetei LINK</TITLE>
</HEAD>
<BODY>
In acest document LINK face referinta la un fisier care contine foile de stil in cascada.
</BODY>
</HTML>

2.2.1.6. STYLE



Elementul STYLE se introduce in document in sectiunea HEAD si este folosit pentru specificarea
diverselor proprietati si a foilor de stil in cascada.

Sintaxa este:

<STYLE> ... definire foi de stil in cascada ... </STYLE>

2.2.1.7. SCRIPT

SCRIPT este un element care de obicei contine cod de programare si care este plasat in antetul
documentului. Sintaxa este:

<SCRIPT TYPE=MIMEtype LANGUAGE=limbaj_de_script SRC=URL>
... cod program ...
</SCRIPT>

In acest element MIMEtype ia valori cum ar fi text/vbscript, limbaj_de_script poate fi JavaScript
sau VBScript, iar URL identifica o sursa exterioara pentru un script (nume de fisier).

Este bine ca tot continutul din interiorul etichetelor STYLE si SCRIPT sa fie incadrat de etichetele
de comentariu () pentru ca navigatoarele incompatibile sa ignore acest
continut si sa continue interpretarea paginii fara a genera erori.

2.2.2. Partea principala (corpul) documentului HTML

Structura BODY se utilizeaza dupa structura HEAD; tot ce se gaseste intre etichetele BODY va
aparea in fereastra navigatorului.

Sintaxa este:

<BODY background=URL bgcolor=culoare bgproprieties=valoare
text=culoare link=culoare alink=culoare vlink=culoare
topmargin=valoare leftmargin=valoare>
... continut document ...
</BODY>

2.2.2.1. Atribute aditionale

O serie de atribute pot fi adaugate la BODY. Iata lista acestora si functiile ce le indeplinesc ele:

Atribut Functie
BACKGROUND Indica URL-ul unei imagini folosite ca fundal pentru document.
BGCOLOR Defineste culoarea de fundal a documentului. Valoarea implicita este alb.
BGPROPERTIES Daca este setat ca FIXED, imaginea de fundal nu se deruleaza.
TEXT Defineste culoarea textului folosind un triplet hexazecimal RGB de forma
#rrggbb. Culoarea implicita pentru text este negru.
LINK Defineste culorile unei legaturi nevizitate. Valoarea implicita este: albastru.


ALINK Defineste culorile unei legaturi active. Valoarea implicita este: rosu.
VLINK Defineste culorile unei legaturi vizitate. Valoarea implicita este: violet.
LEFTMARGIN Fixeaza latimea marginii din stanga in pixeli.
TOPMARGIN Fixeaza latimea marginii de sus in pixeli.

2.2.2.2. Antete (headere)

Eticheta antet este un recipient si trebuie sa aiba o eticheta de inceput <H1> si o eticheta de
sfarsit </H1>. Exista sase nivele de antet: H1 (cel mai important), H2, H3, H4, H5, H6 (cel mai
putin important), pentru fiecare dintre ele fiind utilizate caractere ale aceluiasi font, dar de
dimensiuni si grosimi diferite. Fiecare dintre aceste nivele are aspectul sau pe ecranul unui
utilizator, neexistand un control direct asupra a cum apare antetul.

Pentru a marca un antet se foloseste eticheta:

<Hx>Antet</Hx>

unde x reprezinta un numar ce ia valori intre 1 si 6.

Exemplul 2.7.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML cu cele 6 nivele de antet</TITLE>
</HEAD>
<BODY>
<H1>Antet de nivel 1</H1>
</BODY>
</HTML>

Antet de nivel 1
Antet de nivel 2
Antet de nivel 3
Antet de nivel 4
Antet de nivel 5
Antet de nivel 6



Etichetele antet pot folosi atributul ALIGN, la fel ca si eticheta <P>. Acest lucru este important de
amintit deoarece nu toate navigatoarele afiseaza antetele aliniate in stanga.

Nu exista posibilitatea de a include o eticheta de antet pe aceeasi linie cu text normal, chiar daca
se inchide eticheta de antet si se continua cu text netransformat. O eticheta de antet se comporta
ca si o eticheta <P>, in sensul ca va crea o linie noua dupa terminarea lui.

Linia urmatoare:

Exemplul 2.8.

<H1>Acesta este un antet</H1> si acesta este un text normal.

va avea acelasi rezultat cu:
Exemplul 2.9.

<H1>Acesta este un antet</H1>
<P>si acesta este un text normal.</P>

In ambele cazuri navigatorul va afisa antetul si textul normal pe doua linii distincte, antetul
aparand mai mare si textul aparand la dimensiune normala.

Este important de amintit diferenta intre titlu si antet. Cele doua cuvinte sunt adesea
interschimbabile in viata de zi cu zi, dar in cazul in care vorbim despre HTML, eticheta <TITLE>
are ca efect afisarea unui text in titlul ferestrei navigatorului, iar etichetele <Hx>...</Hx> au ca
efect afisarea in pagina a unui text accentuat. Poate fi doar o eticheta <TITLE> intr-un document
si mai multe antete de diferite tipuri (<H1>, <H2>, ... <H6>).

2.2.2.3. Paragrafe

Cea mai buna cale de a imparti textul in paragrafe este folosirea etichetei de paragraf P. Prin
plasarea etichetei P la inceputul unui paragraf, navigatorul stie sa separe paragrafele adaugand
un spatiu dublu intre ele.

Eticheta de sfarsit este optionala, insa este bine de folosit pentru compatibilitatea cu versiuni mai
vechi si cu diverse navigatoare.

Sintaxa este:

<P ALIGN=VALOARE>
... paragraf ...
</P>

Pozitia textului in fereastra poate fi stabilita cu ajutorul atributului ALIGN. Valorile pe care le
poate lua sunt:

Valoare Functie
LEFT Textul din interiorul paragrafului este aliniat in stanga. (valoare implicita)
CENTER Textul din interiorul paragrafului este aliniat in centru.


RIGHT Textul din interiorul paragrafului este aliniat in dreapta.

2.2.2.4. Linie noua

Exista cazuri in care se doreste intreruperea unui rand chiar daca paragraful nu este terminat. In
acest caz se foloseste eticheta <BR>, care are ca efect trecerea textului la o linie noua (rand
nou), fara insa a determina inceputul unui nou paragraf.

Este o eticheta vida care nu necesita inchidere si are sintaxa:

<BR CLEAR=valoare>

Elementul BR suporta atributul CLEAR care este folosit pentru incadrarea imaginilor cu textul
inconjurator. Poate lua una din valorile: LEFT, RIGHT sau ALL.

2.2.2.5. Desenarea unei linii

O alta metoda de a diviza un document in sectiuni logice este linia orizontala. Linia orizontala se
creaza folosind eticheta HR si implica automat ruperea paragrafului inainte si dupa ea. Elementul
HR nu necesita eticheta de inchidere si are sintaxa:

<HR ALIGN=valoare WIDTH=valoare SIZE=valoare COLOR=culoare NOSHADE>

Elementul HR accepta o serie de atribute folosite in general pentru a schimba aspectul liniei:

Atribut Functie
ALIGN Poate lua valorile LEFT, CENTER sau RIGHT.
WIDTH Poate fi exprimata in pixeli sau in procent din latimea ferestrei.
SIZE Specifica inaltimea liniei si este exprimata in pixeli.
COLOR Specifica culoarea liniei. Se accepta atat valori RGB hexazecimale cat si
nume de culori standard.
NOSHADE Daca acest atribut este prezent, navigatorul nu afiseaza efectul de 3D
pentru linie.

Iata un exemplu de document ce contine doua paragrafe despartite printr-o linie orizontala:

Exemplul 2.10.

<HTML>
<HEAD>
<TITLE>Exemplu de document ce contine o linie orizontala</TITLE>
</HEAD>
<BODY>
<P>Primul paragraf din pagina.</P>
<HR WIDTH=50% SIZE=5 ALIGN=LEFT COLOR=RED>
<P>Al doilea paragraf situat dupa linia orizontala.</P>
</BODY>
</HTML>



2.2.2.6. Citate

Citatele sunt folosite pentru a introduce un text intr-un bloc separat in ecran. Citatele sunt
despartite de textul inconjurator, chiar daca sunt in interiorul unui pargraf (se genereaza o linie
atat inainte cat si dupa citat). In cazul in care citatele sunt mai scurte se foloseste eticheta <Q>,
iar daca textul depaseste cateva propozitii atunci se foloseste eticheta <BLOCKQUOTE>. Sintaxa
este:

<BLOCKQUOTE> ... text ... </BLOCKQUOTE>

Un citat permite si alte formatari in interiorul etichetelor sale. Daca se doreste folosirea unui citat
inlinie atunci se foloseste eticheta <Q> care nu separa citatul de restul textului inconjurator. In
acest caz, sintaxa este:

<Q> ... text ... </Q>

2.2.2.7. Texte preformatate

Metoda prin care textele apar in fereastra navigatorului exact asa cum au fost scrise este folosirea
textelor preformatate. Pentru a introduce in documentul HTML astfel de texte preformatate se
utilizeaza eticheta recipient PRE. Sintaxa este:

<PRE width=...> ... text preformatat ... </PRE>

Iata si cateva dintre avantajele folosirii textelor preformatate in locul paragrafelor combinate cu
trecere la rand nou:
Permit crearea de liste indentate pe nivele;
Permit crearea tabelelor prin alinierea precisa a coloanelor;
Permit afisarea de blocuri de cod care altfel ar fi greu de citit de catre utilizator.

Textul preformatat poate contine orice elemente de formatare fizica sau logica, legaturi sau
imagini, linii orizontale sau intreruperi de linie. Este interzisa folosirea etichetelor de antet si de
paragraf in astfel de blocuri de text preformatat. Insa cel mai important lucru este faptul ca
permite afisarea textului cu caractere monospatiate, fiind tratate toate caracterele inclusiv cele de
genul spatiilor albe sau trecerile la linie noua.

Trebuie insa facuta observatia ca in cazul folosirii caracterului TAB cursorul va fi mutat la
urmatoarea pozitie care reprezinta un intreg multiplu de 8. Se recomanda insa folosirea spatiilor
pentru diverse alinieri, deoarece caracterul TAB este interpretat diferit de navigatoare.

Optional se poate utiliza cu eticheta PRE si atributul WIDTH care specifica numarul maxim de
caractere ce pot aparea pe o linie.

2.2.2.8. Adresa



Unul dintre elementele importante intr-un document HTML este ADDRESS. Este folosit pentru
marcarea informatiilor de contact (autorul documentului, adresa si e-mail, telefon) in scopul de a
da posibilitatea utilizatorilor sa ia contact cu cel care a creat documentul. Sintaxa este:

<ADDRESS> ... specificare informatii contact ... </ADDRESS>

Eticheta se plaseaza de obicei la inceputul sau la sfarsitul documentului. Este bine de introdus in
corpul acestei etichete si data ultimei actualizari a paginii, precum si informatiile de copyright.
2.2.2.9. Entitati caracter si caractere speciale

In cea mai mare parte a documentelor HTML se utilizeaza caracterele standard care fac parte din
setul standard ACSII. Exista insa un numar de caractere speciale care nu se regasesc in setul
ASCII de baza. Acestea sunt cele folosite in alte limbi europene decat engleza, cateva simboluri
matematice, precum si o grupa de alte caractere. O mare parte din aceste caractere apar in
Alfabetul ISO Latin-1. Pentru afisarea lor se utilizeaza entitati caracter speciale (denumite si
secvente escape).

Formatul unei entitati include caracterul & urmat de numele (simbolic) al caracterului sau de un
simbol reprezentat de un numar cuprins intre 0 si 255 (acesta fiind de fapt codul caracterului) si
precedat de semnul #.

Asadar, entitatile por avea doua forme:
entitati text, simbolizate: &cod
entitati numerice, simbolizate: &#numar

In tabelul urmator sunt prezentate o serie de caractere speciale si reprezentarea lor:

Caracter Cod numeric Denumire cod Descriere
" " " apostrof
& & & si
< < < mai mic decat
> > > mai mare decat
cents ¢ ¢ cent
[sterling] £ £ pound
| ¦ ¦ or brkbar; bara verticala
SS § § semn de sectiune
© © copyright
® ® marca inregistrata
deg. ° ° grad
+/- ± ± plus sau minus
2
² ² puterea 2
3
³ ³ puterea 3
. · · punct
1
¹ ¹ puterea 1
1/4 ¼ ¼ sfert
' ½ ½ jumatate
P ¾ ¾ trei patrimi
Æ Æ AE mare
æ æ ae mic
É É E acut mare


é é e acut mic
X × Inmultire
/ ÷ Impartire
, &#184 &cedil virgula
&#160 &nbsp spatiu

2.2.2.10. Comentarii

Exista posibilitatea de a adauga comentarii in documentul HTML. Acestea vor fi plasate intre
etichetele <! si -->. Comentariul nu va aparea in fereastra navigatorului, insa el este
accesibil utilizatorului daca acesta vizualizeaza sursa documentului. Sintaxa este:



Comentariile pot fi incluse oriunde in documentul HTML. In interiorul unui comentariu pot aparea
chiar si etichete HTML, insa acest lucru nu este recomandat deoarece navigatoarele pot interpreta
gresit astfel de continut (de obicei caracterul >) si produc ca rezultat interpretarea gresita a
restului documentului HTML.

2.2.3. Divizarea corpului documentului in bucati

Eticheta <DIV> este folosita pentru a diviza un document HTML in bucati. Se comporta ca un
recipient si are urmatoarea sintaxa:

<DIV align=aliniament> ...definire bloc ... </DIV>

Dupa cum se observa, el suporta atributul ALIGN, astfel se poate centra un bloc de text si imagini
folosind valoarea center. Aceasta este identica cu folosirea etichetei <CENTER>. Valorile posibile
ale atributului ALIGN sunt: LEFT, CENTER si RIGHT.

Toate elementele continute in interiorul elementului DIV sunt aliniate in acord cu specificarea din
atributul ALIGN, exceptie fac acele elemente care au propria lor aliniere.

Exemplul 2.11.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML cu diviziuni</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=CENTER>
<H1>Antetul este centrat datorita aliniamentului folosit in DIV</H1>
<IMG SRC=imagine.gif><BR>
La fel si imaginea si textul care apare sub ea.<BR>
<P ALIGN=RIGHT>Insa acest paragraf este aliniat la dreapta datorita aliniamentului
propriu.</P>
</DIV
</BODY>
</HTML>


DIV este asemanator cu P, cu diferenta ca DIV nu genereaza pauze in document inainte si dupa
locul unde este plasat. Este folosit mai mult pentru facilitatile oferite la lucrul cu foi de stil in
cascada.

Eticheta <SPAN> se foloseste asemenator cu <DIV>, diferenta fiind ca aceasta este un element
inlinie, care nu suporta atributul ALIGN. Sintaxa este urmatoarea:

<SPAN> ... definire bloc ... </SPAN>

2.3. Etichete si atribute prezentate in acest capitol

Eticheta Atribut Functie
<HTML>...</HTML> Inglobeaza intregul document HTML.
<HEAD>...</HEAD> Antetul documentului HTML.
<TITLE>...</TITLE> Indica titlul documentului. Se foloseste in interiorul
etichetei <HEAD>.
<META> Permite introducerea unor informatii diverse.
<BASE> Specifica URL-ul spre anumite directoare sau
fisiere.
HREF=URL Specifica URL-ul absolut folosit la definirea
legaturilor.
<BASEFONT> Fixeaza dimensiunea implicita a fontului pentru
pagina web curenta.
SIZE=... Dimensiunea implicita a fontului, de la 1 la 7.
<LINK> Folosita pentru a crea relatii intre documente si
pentru a specifica diverse proprietati ale foilor de
stil in cascada.
<BODY>...</BODY> Corpul documentului HTML.
ALINK Defineste culorile unei legaturi active.
BACKGROUND Specifica URL-ul unei imagini folosite ca fundal in
document.
BGCOLOR Defineste culoarea de fundal a documentului.
BGPROPERTIES Daca este setat ca FIXED, imaginea de fundal nu
se deruleaza.
LEFTMARGIN Fixeaza latimea marginii din stanga in pixeli.
LINK Defineste culorile unei legaturi nevizitate.
TEXT Defineste culoarea textului.
TOPMARGIN Fixeaza latimea marginii de sus in pixeli.
VLINK Defineste culorile unei legaturi vizitate.
<H1>...</H1> Antet de nivel 1.
<P>...</P> Defineste un paragraf. Eticheta de inchidere </P>
este optionala.
<BR> Linie noua.


<HR> Deseneaza o linie orizontala.
<BLOCKQUOTE> ...
</BLOCKQUOTE>
Citate, secvente lungi de text intr-un bloc separat,
despartite de textul inconjurator.
<Q> ... </Q> Citate scurte inlinie.
<PRE> ... </PRE> Texte preformatate.
<ADDRESS> ...
</ADDRESS>
Specifica informatiile de contact (e-mail, adresa
completa, telefon) pentru un document.
<DIV> ... </DIV> Defineste o diviziune in document.
<ALIGN=...> Stabileste modul de aliniere a elementelor dintr-o
diviziune. Valori posibile: LEFT, CENTER sau RIGHT
<SPAN> ... </SPAN> Folosit pentru a marca un continut inlinie.



3. FORMATAREA TEXTULUI

Odata ce s-a creat un document, cea mai mare parte a muncii este facuta. Textul scris este
despartit precis in paragrafe, antetele sunt la locul lor, si diferite elemente ca de exemplu titlul si
informatiile despre autor au fost adaugate.

Etichetele pentru paragrafe sau antete afecteaza intregul text din interiorul lor, schimband fontul,
sau schimband spatierea deasupra sau dedesubtul liniei.

HTML ofera posibilitatea alegerii fontului si a aplicarii mai multor stiluri de formatare a textului in
mod particular, doar pentru o anumita sectiune a unui paragraf. In acest sens exista etichete care
schimba aspectul unui set de caractere dintr-un text, acestea fiind grupate in doua categorii:
etichete utilizate pentru formatare logica si cele utilizate pentru formatare fizica.

3.1. Formatarea logica

Una dintre ideile care au stat la baza HTML este ca documentele sa fie aranjate intr-o maniera
logica si structurata. Aceasta da utilizatorilor mai multa flexibilitate decat este posibil. Astfel, s-au
creat in HTML o serie de formatari in acord cu scopul pe care ele il deservesc. Avantajul este ca
documentele nu sunt limitate la o anumita platforma. Cu toate ca ele vor arata altfel pe diferite
platforme, continutul si contextul vor ramane la fel.

Eticheta Descriere
<CITE> ... </CITE> Este folosit pentru a specifica citate. Poate fi de asemenea folosit
pentru a indica titluri de carti sau articole. Textul este afisat
inclinat.
<CODE> ... </CODE> Este folosit pentru afisarea codurilor sursa ale programelor de
calculator mai mici. Textul este afisat cu font de dimensiune fixa.
<EM> ... </EM> Este folosit pentru evidentierea unei sectiuni de text care este
considerata semnificativa. Textul este in general afisat inclinat.
<KBD> ... </KBD> Este folosit pentru introducerea unor date de la tastatura. Textul
este afisat cu font de dimensiune fixa.
<SAMP> ... </SAMP> Este folosit pentru a identifica mai exact cateva caractere
litarale. Textul este in general afisat cu font monospatiat.
<STRONG> ... </STRONG> Este folosit pentru a evidentia o sectiune importanta dintr-un
text. Textul este in general afisat ingrosat.
<VAR> ... </VAR> Este folosit pentru a specifica numele unei variabile. Textul este
in general afisat inclinat.
<DFN> ... </DFN> Este folosit pentru a crea o subdefinitie intr-o lista de definitii.
Textul este in general afisat inclinat.

Exemplul 3.1.

<HTML>
<HEAD>
<TITLE>Exemplu care contine un paragraf cu portiuni de text formatat logic</TITLE>
</HEAD>
<BODY>
<P>Acest paragraf contine:<BR>
Text simplu fara nici un fel de formatare.<BR>
<CITE>Un citat, scris inclinat</CITE><BR>
<STRONG>Un text important, scris ingrosat.</STRONG><BR>
<SAMP>Un text, scris monospatiat.</SAMP><BR>


</P>
</BODY>
</HTML>

Pe ecran, va aparea afisat in modul urmator:

Acest paragraf contine:
Text simplu fara nici un fel de formatare.
Un citat, scris inclinat
Un text important, scris ingrosat.
Un text, scris monospatiat.

In cazul in care un text dintr-o astfel de eticheta va fi afisat normal, inseamna ca navigatorul nu
suporta acel stil logic de formatare.

3.2. Formatarea fizica

Este important ca aspectul unui document HTML sa ramana acelasi pentru utilizator (n.a. cel care
vizualizeaza pagina web), indiferent de navigatorul pe care il foloseste.

In acest sens, pe langa formatarea logica a elementelor este posibila si formatarea fizica care da
un control sporit asupra aspectului textului formatat, ea permitand creatorului paginii web (a
documentului HTML) sa preia controlul asupra mai multor detalii: stilul de caractere, dimensiunea
si culoarea lor.

Elementele de formatare fizica sunt urmatoarele:

Eticheta Descriere
<B> ... </B> Elementul este folosit pentru a afisa un text ingrosat (aldin).
<I> ... </I> Elementul este folosit pentru a afisa un text inclinat.
<U> ... </U> Elementul este folosit pentru a afisa un text subliniat.
<TT> ... </TT> Elementul este folosit pentru a afisa un text cu font monospatiat.
<STRIKE> ... </STRIKE> Elementul este folosit pentru a trasa o linie orizontala peste un
text.
<BIG> ... </BIG> Elementul este folosit pentru a afisa un text cu un font de o
dimensiune mai mare.
<SMALL> ... </SMALL> Elementul este folosit pentru a afisa un text cu un font de o
dimensiune mai mica.
<SUB> ... </SUB> Elementul este folosit pentru a muta un text mai jos decat textul
inconjurator si daca este posibil afisarea lui cu un font de o
<SUP> ... </SUP> Elementul este folosit pentru a muta un text mai sus decat textul
inconjurator si daca este posibil afisarea lui cu un font de o

Primele trei elemente (B, I, U) reprezinta un standard in aproape toate mediile de procesare a
textului, ele stabilind aspectul de baza al textului.



In cazul in care se alege un stil de formatare fizica si navigatorul nu suporta acest stil, el va fi
substituit cu un altul sau va fi ignorat.
Toate etichetele prezentate mai sus se comporta ca un recipient si necesita eticheta de sfarsit. De
asemenea ele pot fi si imbricate, un element fiind continut in intregime in alt element.

Exemplul 3.2.

<HTML>
<HEAD>
<TITLE>Document HTML care contine un paragraf cu portiuni de text formatat fizic</TITLE>
</HEAD>
<BODY>
<B>Text scris ingrosat.</B><BR>
<I>Text scris inclinat.</I><BR>
<TT>Text scris monospatiat.</TT><BR>
<U>Text scris subliniat.</U><BR>
<STRIKE>Text taiat.</STRIKE><BR>
Text normal si <SUB>exponent</SUB>, apoi text normal si <SUP>indice</SUP>.<BR>
<SUP></SUP><BR>
</BODY>
</HTML>

Pe ecran, va aparea afisat in modul urmator:

Text scris ingrosat.
Text scris inclinat.
Text scris monospatiat.
Text scris subliniat.
Text taiat.
Text normal si
indice
, apoi text normal si
exponent
.

Mai exista o eticheta folosita la formatarea textului, BLINK, care determina afisarea unui text in
alternanta cu neafisarea lui, ceea ce produce efectul de clipire.

<BLINK> ... text ... </BLINK>

Aceasta nu este recunoscuta decat de unele navigatoare, fiind uneori destul de enervanta, mai
ales in cazul in care utilizatorul uita sa aplice eticheta de sfarsit, avand ca si efect clipirea
continua a intregului text de la aplicarea etichetei pana la sfarsitul documentului.

3.3. Fonturi

Pentru creatorii documentelor HTML exista posibilitatea de a controla aspectul textului in
document. Din pacate, in momentul in care se realizeaza un document, acesta are un anume
aspect pe computerul celui care creaza documentul, deoarece fonturile folosite sunt disponibile,
iar daca acesta va fi publicat pe web pot aparea probleme serioase, deoarece nu se stie daca
cititorul are acele fonturi instalate.

3.3.1. FONT



Modalitatea prin care se poate controla aspectul textului este elementul FONT. El se comporta ca
un recipient care are eticheta de inceput si de sfarsit, inauntrul caruia se afla text.

Sintaxa este urmatoarea:

<FONT> ... </FONT>

Fara atribute atasate etichetei de inceput, utilizarea elementului FONT nu va avea nici un efect.

De asemenea, poate fi folosit in compozitia altor etichete de text, el producand modificarea
textului asupra caruia a fost aplicat.

Folosind atributele FACE, SIZE si COLOR se poate modifica simtitor aspectul textului in document.

3.3.2. FACE

Atributul FACE permite specificarea fontului cu care va fi afisat textul. Parametrul folosit pentru
acest atribut este numele fontului dorit. Numele trebuie sa fie scris exact ca si pe computerul
utilizatorului, altfel navigatorul va ignora acest atribut si va folosi fontul prestabilit de utilizator.

Exemplul 3.3.

<HTML>
<HEAD>
<TITLE>Exemplu de selectare font</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial">
Acest text este scris cu font Arial.</FONT>
</BODY>
</HTML>

Atributul FACE permite enumerarea mai multor fonturi separate prin virgula. Aceasta facilitate
este folositoare in special datorita faptului ca acelasi font poate avea nume diferite in Windows
fata de Macintosh. Fonturile vor fi analizate de la stanga la dreapta, iar primul gasit va fi si folosit.

Exemplul 3.4.

<HTML>
<HEAD>
<TITLE>Exemplu de selectare font dintr-o lista</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial", "Helvetica", "Verdana">
Acest text este scris cu unul din font-urile: "Arial", "Helvetica" sau "Verdana"<BR>
Aceasta depinde de computerul dumneavoastra, daca exista in lista fonturilor sistem.</FONT>
</BODY>
</HTML>



In acest exemplu se incearca folosirea font-ului Arial, dar mai exista ca si alternative si font-
urile Helvetica si Verdana.
Daca fontul dorit nu este disponibil, atunci navigatorul utilizatorului va afisa textul in cea mai
apropiata varianta de font.
3.3.3. SIZE

Este un atribut important deoarece stabileste dimensiunea / inaltimea caracterelor din text. Poate
fi folosit in doua moduri:
Dimensiunea poate fi stabilita in mod absolut prin specificarea unui intreg pe o scara de la
1 la 7, dimensiunea normala fiind 3. Sintaxa este: SIZE=numar
Dimensiunea poate fi stabilita in mod relativ, fiind folosita aceasta metoda atunci cand
este specificat in eticheta <BASEFONT> dimensiunea de baza. Sintaxa este:
SIZE=+numar sau SIZE=-numar

Exemplul 3.5.

<HTML>
<HEAD>
<TITLE>Exemplu de selectare dimensiune font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=2>Acest text are dimensiunea 2.</FONT><BR>
<FONT SIZE=+1>Acest text are dimensiunea fontului stabilit +1</FONT>
</BODY>
</HTML>

3.3.4. COLOR

Culoarea textului poate fi specificata cu ajutorul atributului COLOR care accepta ca valori atat
numele uneia din cele 16 culori standard, cat si un triplet hexazecimal RGB.

Exemplul 3.6.

<HTML>
<HEAD>
<TITLE>Exemplu de selectare culoare font</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">Acest text este rosu</FONT><BR>
<FONT COLOR="BLUE">Acest text este albastru</FONT><BR>
</BODY>
</HTML>


<FONT> ... </FONT> Controleaza aspectul textului.
SIZE=... Dimensiunea fontului, de la 1 la 7. Implicit este 3. Se
poate specifica de asemenea o valoare relativa la
dimensiunea curenta, de exemplu +2


COLOR=... Schimba culoarea textului
FACE=... Numele fontului folosit, daca acesta poate fi gasit in
sistem. Pot fi specificate mai multe nume de fonturi
separate prin virgula, iar primul font gasit in lista va
fi folosit.


4. LISTE

Adeseori, pentru crearea paginilor web este necesara folosirea unor liste pentru organizarea
informatiilor sub forma de termeni, obiecte, elemente sau definitii. HTML dispune de etichete care
indenteaza textul automat, care adauga numere, caractere sau simboluri in fata fiecarui element
din lista, suportand mai multe tipuri de liste, si anume:
- liste neordonate: sunt liste indentate care au un simbol in fata fiecarui element
- liste ordonate (numerotate): sunt liste indentate care au numere sau caractere in fata fiecarui
element
- liste de definitii (de termeni): sunt liste indentate fara numere sau simboluri in fata fiecarui
element

4.1. Liste neordonate

4.1.1. Definire si utilizare

Listele neordonate reprezinta o lista de obiecte care nu defineste o structura specifica si se
definesc utilizand eticheta <UL> ... definire lista neordonata </UL>. Fiecare element al listei va fi
definit folosind <LI> ... element ...</LI> si el va fi precedat de un simbol numit bullet. Eticheta
de inchidere </LI> poate fi omisa.

O lista neordonata se defineste astfel:

<UL>
<LI> Element 1</LI>
<LI> Element 2</LI>
....
<LI> Element n</LI>
</UL>

Exemplul 4.1.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine o lista neordonata</TITLE>
</HEAD>
<BODY>
<B>Culorile curcubeului sunt:</B>
<BR>
<UL>
<LI>Rosu
<LI>Orange
<LI>Galben
<LI>Verde
<LI>Albastru
<LI>Indigo
<LI>Violet
</UL>
</BODY>
</HTML>



Culorile curcubeului sunt:
1. Rosu
2. Orange
3. Galben
4. Verde
5. Albastru
6. Indigo
7. Violet

Un element al listei poate sa contina absolut orice: text simplu, paragraf, imagini, chiar si alte
liste. Navigatorul suporta si indenteaza automat sublistele. De asemenea, pentru fiecare sublista
indentata va fi atribuit alt simbol elementelor sublistei, acesta fiind diferit de celelalte.

Exemplul 4.2.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine liste neordonate imbricate</TITLE>
</HEAD>
<BODY>
<B>CUPRINS</B>
<UL>
<LI>Introducere
<LI>Capitolul 1
<UL>
<LI> Sectiunea 1.1
<LI> Sectiunea 1.2
<LI> Sectiunea 1.3
</UL>
<LI>Capitolul 2
<UL>
<LI> Sectiunea 2.1
<UL>
<LI> Subsectiunea 2.1.1
<LI> Subsectiunea 2.1.2
</UL>
<LI> Sectiunea 2.2
</UL>
<LI>Capitolul 3
<LI>Capitolul 4
<UL>
<LI> Sectiunea 4.1
<LI> Sectiunea 4.2
</UL>
<LI>Capitolul 5
</UL>
</BODY>
</HTML>


CUPRINS
Introducere
Capitolul 1
o Sectiunea 1.1
o Sectiunea 1.2
o Sectiunea 1.3
Capitolul 2
o Sectiunea 2.1
Subsectiunea 2.1.1
Subsectiunea 2.1.2
o Sectiunea 2.2
Capitolul 3
Capitolul 4
o Sectiunea 4.1
o Sectiunea 4.2
Capitolul 5

4.1.2. Atribute aditionale

Simbolul care precede fiecare element al listei poate fi stabilit manual. Aceasta extensie da mai
mult control asupra aspectului listei neordonate. Folosind atributul TYPE se poate schimba
simbolul folosit in lista. Valoarea atributului poate fi: DISC (caracterul va fi un cerc plin), CIRCLE
(caracterul va fi un cerc) sau SQUARE (caracterul va fi un patrat).

Exemplul 4.3.

<HTML>
<HEAD>
<TITLE>Exemplu de lista neordonata cu variante de afisare</TITLE>
</HEAD>
<BODY>
<UL>
<LI TYPE=DISC>Disc</LI>
<LI TYPE=CIRCLE>Cerc</LI>
<LI TYPE=SQUARE>Patrat</LI>
</UL>
</BODY>
</HTML>

Disc
o Cerc
Patrat



Daca atributul TYPE este utilizat impreuna cu eticheta <UL> sub forma <UL TYPE=...> atunci
toate elementele listei neordonate vor fi precedate de simbolul stabilit prin atributul TYPE.
4.2. Liste ordonate


O lista ordonata, denumita si lista numerotata, este folosita pentru a crea liste de elemente
numerotate. Navigatorul observa eticheta pentru lista ordonata si numeroteaza secvential fiecare
element din lista folosind numere (1, 2, 3, s.a.m.d.)

Listele numerotate incep cu eticheta <OL>, iar pentru definirea fiecarui element se foloseste
eticheta <LI>. Optional se poate crea un antet pentru lista folosind eticheta <LH>.

<OL>
<LH>Antet lista numerotata
<LI> Element numerotat 1</LI>
<LI> Element numerotat 2</LI>
....
<LI> Element numerotat n</LI>
</OL>

Aceasta eticheta prevede la inceput si la sfarsit o linie goala pentru a izola lista de textul
inconjurator, nefiind necesar ca lista sa fie precedata sau urmata de o eticheta de tip paragraf
<P>.

In exemplul urmator avem definita o lista ordonata compusa dintr-un antet si 7 elemente.

Exemplul 4.4.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine o lista ordonata</TITLE>
</HEAD>
<BODY>
<OL>
<LH>Culorile curcubeului sunt:</LH>
<LI>Rosu
<LI>Orange
<LI>Galben
<LI>Verde
<LI>Albastru
<LI>Indigo
<LI>Violet
</OL>
</BODY>
</HTML>

In fereastra de afisare a navigatorului vom observa:



Culorile curcubeului sunt:
1. Rosu
2. Orange
3. Galben
4. Verde
5. Albastru
6. Indigo
7. Violet


La fel ca si in cazul listelor neordonate putem folosi atribute care dau un control mai bun asupra
aspectului numerotarii elementelor listei.

Atributul TYPE poate lua urmatoarele valori:

Atribut Descriere
TYPE=A Numerotarea se face cu litere mari
TYPE=a Numerotarea se face cu litere mici
TYPE=I Numerotarea se face cu numere romane, caractere majuscule
TYPE=i Numerotarea se face cu numere romane, caractere mici
TYPE=1 Numerotarea se face cu numere arabe

Numerotarea elementelor din lista se face implicit crescator, incepand cu valoarea 1. Pentru a
modifica valoarea de pornire a numerotarii se va folosi atributul START in eticheta <OL>.

<OL START=...>
... definirea listei ...
</OL>

Iata un exemplu care ilustreaza folosirea acestui atribut, prin crearea a doua liste, prima
numerotata implicit de la 1, iar a doua numerotata de la o valoare stabilita:

Exemplul 4.5.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine doua liste numerotate</TITLE>
</HEAD>
<BODY>
<B>O scoala generala are:</B>
<OL>
<LH>Clasele primare</LH>
<LI>a-I-a
<LI>a-II-a
<LI>a-III-a


<LI>a-IV-a
</OL>
<OL START=5>
<LH>Clasele gimnaziale</LH>
<LI>a-V-a
<LI>a-VI-a
<LI>a-VII-a
<LI>a-VIII-a
</OL>
</BODY>
</HTML>

O scoala generala are:

Clasele primare
1. a-I-a
2. a-II-a
3. a-III-a
4. a-IV-a
Clasele gimnaziale
5. a-V-a
6. a-VI-a
7. a-VII-a
8. a-VIII-a

In cazul in care elementelor dintr-o lista ordonata li se vor atribui valori care nu sunt intr-o ordine
crescatoare, atunci se va folosi atributul VALUE prin care fiecarui element din lista i se poate
atribui un numar de ordine independent de restul listei, iar numaratoarea va continua de la
aceasta valoare.

<LI VALUE=...>
... element ...
</LI>

Exemplul 4.6.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine lista numerotata manual</TITLE>
</HEAD>
<BODY>
<B>Culorile mele preferate sunt:</B>
<OL>


<LI VALUE=6>Indigo
<LI VALUE=5>Albastru
<LI VALUE=1>Rosu
<LI>Orange
<LI>Galben
<LI>Verde
<LI VALUE=7>Violet
</OL>
</BODY>
</HTML>

Culorile mele preferate sunt:

6. Indigo
5. Albastru
1. Rosu
2. Orange
3. Galben
4. Verde
7. Violet

4.3. Liste de definitii


Listele de definitii, denumite de asemenea si liste de termeni, reprezinta un tip special de liste in
HTML. Ele au un format ca si al dictionarului, cu termen de identificare si paragraful de definitie
indentat.

Acest format este folositor in special acolo unde avem elemente cu o descriere complexa, ca de
exemplu cataloage de produse sau departamente ale unei companii.

Acest tip de lista se defineste prin eticheta <DL> care are in interiorul sau eticheta <DT> pentru
definirea termenului si eticheta <DD> pentru definitia propriu-zisa. Ambele etichete de definire
sunt etichete deschise, ceea ce inseamna ca nu necesita o eticheta de inchidere corespunzatoare
la sfarsit.

Eticheta <DL> prevede la inceput si la sfarsit o linie goala pentru a izola lista de definitii de textul
inconjurator. Elementele listei sunt aranjate astfel incat fiecarui termen i se asociaza definitia
corespunzatoare.

Eticheta <DT> ar trebui sa incapa intr-o singura linie, dar poate trece pe urmatoarea linie fara
indentare. Eticheta <DD> arata ca si un paragraf indentat continuu, poate avea orice lungime, iar
in interiorul lui poate fi plasata orice structura.

<DL>
<DT>Termen 1
<DD> Definitie 1


<DT>Termen 2
<DD> Definitie 2
....
<DT>Termen n
<DD> Definitie n
</DL>

Consideram urmatorul exemplu in care avem definiti cativa termeni informatici esentiali prin
intermediul unei liste de definitii:

Exemplul 4.7.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine lista de definitii</TITLE>
</HEAD>
<BODY>
<B>Dictionar explicativ de calculatoare</B>
<DL>
<DT><B>bit</B>
<DD>provine din prescurtarea denumirii englezesti <I>binary digit</I>. Reprezinta
elementul generic al unei multimi formata din doua elemente.
<DT><B>caption</B>
<DD>text descriptiv care este asociat unei figuri. De obicei, pentru a se distinge se
utilizeaza un alt tip de caractere.
<DT><B>file</B>
<DD>fisier: o colectie organizata de inregistrari, dispusa pe unul sau mai multe suporturi
externe, memorata sub un singur nume, fiind compusa din una sau mai multe inregistrari,
continand informatii legate intre ele. Inregistrarile pot fi sau nu secventiale.
<DT><B>increment</B>
<DD>incrementare: adunarea unei constante, de obicei 1, la valoarea unei variabile
(registru, locatie de memorie)
</DL>
</BODY>
</HTML>

In fereastra navigatorului se va afisa:

Dictionar explicativ de calculatoare

bit
provine din prescurtarea denumirii englezesti binary digit. Reprezinta elementul generic al
unei multimi formata din doua elemente.

caption
text descriptiv care este asociat unei figuri. De obicei, pentru a se distinge se utilizeaza un alt
tip de caractere.
file
fisier: o colectie organizata de inregistrari, dispusa pe unul sau mai multe suporturi externe,


memorata sub un singur nume, fiind compusa din una sau mai multe inregistrari, continand
informatii legate intre ele. Inregistrarile pot fi sau nu secventiale.
increment
incrementare: adunarea unei constante, de obicei 1, la valoarea unei variabile (registru,
locatie de memorie)


Exista optional atributul COMPACT pentru eticheta <DL>. El determina ca lista sa fie afisata
compact, adica informatia continuta in definitie sa apara pe aceeasi linie cu termenul, bineinteles
daca acest lucru este posibil.
<DL COMPACT>

In cazul in care exista termeni lungi in lista, afisarea se va face ca si in cazul listelor
necompactate.


Tag Atribut Functie
<UL> ... </UL> Lista neordonata
TYPE=... Simbol folosit pentru marcarea elementelor listei.
Valorile posibile: DISC, CIRCLE, SQUARE
<OL> ... </OL> Lista ordonata (numerotata)
TYPE=... Tipul de numeral folosit pentru marcarea elementelor
listei. Valorile posibile: A, a, I, i, 1
<LI> Element din lista. Folosit cu etichetele: <OL> sau <UL>
TYPE=... Tipul de simbol sau numeral folosit pentru marcarea
unui element. Valori posibile: DISC, CIRCLE, SQUARE,
A, a, I, i, 1
VALUE=... O valoare numerica pe care trebuie sa o aiba un
element (afecteaza doar elementele din liste <OL>)
<Dl> ... </DL> Lista de definitii
<DT> Definirea unui termen, ca parte integranta a unei liste
de definitii
<DD> Corespunde definitiei la definirea unui termen, ca parte
integranta a unei liste de definitii



5. TABELE

Tabelele reprezinta unul din cele mai importante instrumente utilizate pentru formatarea paginilor
web. Ele reprezinta o alternativa serioasa la alte moduri de vizualizare tabelara sau structurata
a datelor, cum ar fi eticheta <PRE> sau etichetele folosite pentru definirea listelor, insa
dezavantajul este aceala ca etichetele unui tabel sunt mai complicate (si in acelasi timp mai
complexe) si mai greu de folosit.

5.1. Definire si utilizare

Definirea unui tabel se realizeaza cu ajutorul etichetei:

<TABLE> ... definire tabel ... </TABLE>

Acesta se comporta ca un recipient pentru etichetele:

<CAPTION> - specifica titlul tabelului (este o eticheta optionala)
<TR> - defineste liniile tabelului (table row)
<TD> - introduce celule in liniile tabelului (table data)
<TH> - descrie celulele cap de tabel, fiind o eticheta optionala (table header)

care descriu in amanunt un tabel.

Eticheta TABLE este obligatoriu sa aiba eticheta de inchidere, pe cand la elementele TR si TD
aceasta nu este obligatorie, definirea unui nou element presupunand automat inchiderea
precedentului.

Formatul general al unui tabel este urmatorul:

<TABLE>
<CAPTION>Titlul tabelului</CAPTION>
<TH> ... Antetul tabelului ... </TH>
<TR>
<TD>linia 1 celula 1</TD>
...
<TD>linia 1 celula n</TD>
</TR>
<TR>
...
<TD>linia 2 celula n</TD>
</TR>
... alte linii ...
<TR>
<TD>linia n celula 1</TD>
<TD>linia n celula 2</TD>
...
<TD>linia n celula n</TD>
</TR>
</TABLE>


Fiecare dintre etichetele ce definesc un tabel poate fi utilizat impreuna cu anumite atribute care
modifica formatarea implicita a textului din celule. De retinut faptul ca atributele utilizate in cadrul
etichetelor <TH> si <TD> au precedenta mai mare decat cele din eticheta <TR>.

De asemenea, textul unei celule poate fi formatat si cu ajutorul etichetelor prezentate la
formatarea textului, iar in cadrul unei celule pot fi incluse orice alte elemente HTML (imagini,
liste, legaturi, componente de formulare, chiar si alte tabele).

Iata un exemplu simplu de tabel care are un titlu si este definit pe 3 randuri si 4 coloane:

Exemplul 5.1.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine un tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION>Primul meu tabel</CAPTION>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

In urma incarcarii documentului HTML in navigator se va obtine:

Primul meu tabel
linia 1 celula 1 linia 1 celula 2 linia 1 celula 3 linia 1 celula 4



5.2. Chenarul tabelului

Prin utilizarea atributului BORDER in cadrul etichetei TABLE se poate specifica faptul ca in jurul
tabelului si al fiecarei celule se va trasa un chenar. Valoarea acestui atribut poate fi fixata la un
numar de pixeli, valoarea implicita fiind 2 sau 3. In cazul in care nu se doreste afisarea
chenarului, valoarea va fi stabilita la 0.

<TABLE BORDER=0>

5.3. Latimea si inaltimea tabelului

Atributul care permite specificarea latimii unui tabel este WIDTH. Se poate exprima in pixeli sau
in procent din latimea ferestrei navigatorului.

Asemenator se foloseste atributul HEIGHT pentru specificarea inaltimii tabelului.

Ambele atribute pot fi folosite si pentru definirea latimii si inaltimii celulelor unui tabel.

De multe ori valoarea procentuala este folosita pentru a asigura compatibilitatea cu diverse
rezolutii ale ecranului, insa daca este nevoie de o latime fixa pentru afisarea diverselor continuturi
atunci se foloseste valoarea exprimata in pixeli.

5.4. Alinierea tabelului

Se realizeaza prin folosirea in eticheta TABLE a atributului ALIGN care permite controlul alinierii
tabelului intr-o pagina si care accepta una din valorile: left, right si center. Valoarea implicita este
in anumite cazuri left, iar in altele este center.

HTML 4.0 permite folosirea valorii CHAR pentru a implementa alinierea continutului la un caracter
specificat. Atributul poate lua valori ca de exemplu: punctul zecimal, doua puncte, caractere
obisnuite si se foloseste astfel:

<TR ALIGN=CHAR CHAR="."> ... </TR>

Poate fi folosit cu etichetele: COLGROUP, THEAD, TBODY, TFOOT, TR, TH, si TD.

Diferite atribute ale etichetelor HTML permit specificarea latimii acestora. De multe ori apare
valoarea ca numar fara sufix, ceea ce inseamna ca ea este exprimata in pixeli.

Lista sufixelor acceptate pentru definirea latimii in etichete HTML este urmatoarea:

Sufix Valoare
px, [nimic] Pixeli
pt Puncte
pi Picas
in Inci
cm Centimetri
mm Millimetri
em Unitati em
% procent din latimea ecranului


5.5. Spatierea celulelor

Prin folosirea atributului CELLSPACING se poate stabili spatiul dintre celulele tabelului. Valoarea
se exprima in pixeli, implicit fiind considerata egala cu 1.

5.6. Spatierea datelor in celule

Asemanator spatierii intre celule se poate stabili si distanta dintre marginea celulei si informatia
continuta in celula respectiva. Acest lucru se realizeaza cu atributul CELLPADING care poate lua
valori exprimate in pixeli si care implicit este stabilit la valoarea 1.

Exemplul 5.2.

<HTML>
<HEAD>
<TITLE>Exemplu care contine trei tabele cu spatieri diferite</TITLE>
</HEAD>
<BODY>
<P>Tabel cu spatiu intre celule stabilit la valoarea 10</P>
<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>celula 1.1</TD>
<TD>celula 1.2</TD>
<TD>celula 1.3</TD>
</TR>
<TR>
<TD>celula 2.1</TD>
<TD>celula 2.2</TD>
<TD>celula 2.3</TD>
</TR>
</TABLE>
<P>Tabel cu spatiu in interiorul celulelor stabilit la valoarea 10</P>
<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>celula 1.1</TD>
<TD>celula 1.2</TD>
<TD>celula 1.3</TD>
</TR>
<TR>
<TD>celula 2.1</TD>
<TD>celula 2.2</TD>
<TD>celula 2.3</TD>
</TR>
</TABLE>
<P>Tabel cu spatiu intre celule stabilit la valoarea 10 si spatiul intre celule la valoarea 10</P>
<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD>celula 1.1</TD>
<TD>celula 1.2</TD>
<TD>celula 1.3</TD>
</TR>


<TR>
<TD>celula 2.1</TD>
<TD>celula 2.2</TD>
<TD>celula 2.3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

In fereastra navigatorului avem urmatorul rezultat:

Tabel cu spatiu intre celule stabilit la valoarea 10
celula 1.1 Celula 1.2 celula 1.3
celula 2.1 Celula 2.2 celula 2.3
Tabel cu spatiu in interiorul celulelor stabilit la valoarea 10
celula 1.1 celula 1.2 celula 1.3
Tabel cu spatiu intre celule stabilit la valoarea 10 si spatiul intre celule la valoarea 10

5.7. Titlul tabelului

Printre elementele care definesc un tabel se afla si titlul, care contine informatii descriptive despre
continutul tabelului, usurand identificarea lui. Are caracter optional si va aparea deasupra sau
dedesubtul tabelului:

...
<TABLE>
<CAPTION ALIGN=aliniament> ... titlul tabelului ... </CAPTION>
... definire continut tabel ...
</TABLE>
...


Pozitia implicita pentru titlu este inaintea tabelului (TOP). In cazul in care atributul ALIGN ia
valoarea BOTTOM, atunci titlul apare dupa tabel. Alte valori posibile ale atributului ALIGN sunt:
left sau right.
In cazul in care este inclusa in elementul TABLE, eticheta CAPTION trebuie sa apara imediat dupa
eticheta de definire a tabelului TABLE, inainte de orice definire a unui rand sau celula a tabelului.

5.8. Capul de tabel

O celula antet a unui tabel este definita folosind perechea de etichete <TD> ... </TD>. Continutul
unei astfel de celule este automat centrat si scris pronuntat, insa aceasta formatare poate fi
modificata. Eticheta de inchidere este optionala. Intr-un tabel obisnuit antetul este cuprins de
obicei in prima linie/coloana, astfel ca intr-un tabel de n linii si m coloane avem:

<TABLE>
<TR>
<TH>Antet 1</TH>
<TH> Antet 2</TH>
...
<TH> Antet m</TH>
</TR>
<TR> ... linia 2 </TR>
...
<TR> ... linia n </TR>
</TABLE>

5.9. Definirea celulelor tabelului

Celulele unui tabel se definesc utilizand perechi de etichete <TD> ... </TD> in cadrul recipientului
TABLE. Continutul din celule este aliniat automat la stanga si este afisat cu caractere normale.
Orice formatare speciala se realizeaza incluzand etichete in interiorul etichetei TD.

<TABLE>
<TR>
<TH>Antet 1</TH>
<TH> Antet 2</TH>
...
<TH> Antet m</TH>
</TR>
<TR>
<TD>Celula 1</TD>
<TD>Celula 2</TD>
...
<TD>Celula m</TD>
</TR>
...
<TR>
<TD>Celula 1</TD>


...
<TD>Celula m</TD>
</TR>
</TABLE>

5.10. Extinderea celulelor

Liniile si coloanele pot fi combinate cu cele alaturate, astfel rezultand celule mai mari. Extinderea
se realizeaza cu ajutorul atributelor ROWSPAN (folosit pentru linii) si COLSPAN (folosit pentru
coloane).

Pentru a combina n celule alaturate dintr-o linie se foloseste atributul ROWSPAN in eticheta TD
sau TH astfel:

<TD ROWSPAN=n>

Pentru a combina n celule alaturate dintr-o coloana se foloseste atributul COLSPAN in eticheta TD
sau TH astfel:

<TD COLSPAN=n>

In HTML 4.0 mai exista un atribut aditional: NOWRAP. Exista cazuri in care continutul unei celule
este mai mare decat lungimea acesteia, astfel ca el va fi automat continuat pe linia urmatoare.
Prezenta atributului NOWRAP in cadrul etichetei TD inhiba ruperea automata a textului in celula
respectiva (forteaza ramanerea lui pe un singur rand).

5.11. Alinierea datelor in celule

Alinierea continutului unei celule se realizeaza cu ajutorul atributelor ALIGN si VALIGN. Sintaxa
este urmatoarea:

<TD align=left|center|right valign=top|middle|bottom>

Se observa ca atributul ALIGN controleaza alinierea pe orizontala, iar atributul VALIGN
controleaza alinierea pe verticala. Cele doua atribute se pot aplica si asupra etichetei TR, insa
aplicate asupra lui TD au o prioritate mai mare.

Exemplul 5.3.

<HTML>
<HEAD>
<TITLE>Exemplu care contine un tabel cu alinieri diferite</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=750>
<TR HEIGHT=50>
<TD ALIGN=LEFT VALIGN=TOP>celula 1.1, aliniere: stanga sus</TD>
<TD ALIGN=CENTER VALIGN=TOP>celula 1.1, aliniere: centru sus</TD>
<TD ALIGN=RIGHT VALIGN=TOP>celula 1.1, aliniere: dreapta sus</TD>
</TR>
<TR HEIGHT=50>
<TD ALIGN=LEFT VALIGN=MIDDLE>celula 2.1, aliniere: stanga mijloc</TD>
<TD ALIGN=CENTER VALIGN=MIDDLE>celula 2.1, aliniere: centru mijloc</TD>


<TD ALIGN=RIGHT VALIGN=MIDDLE>celula 2.1, aliniere: dreapta mijloc</TD>
</TR>
<TR HEIGHT=50>
<TD ALIGN=LEFT VALIGN=BOTTOM>celula 3.1, aliniere: stanga jos</TD>
<TD ALIGN=CENTER VALIGN=BOTTOM>celula 3.1, aliniere: centru jos</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>celula 3.1, aliniere: dreapta jos</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Dupa cum se poate observa efectul produs este urmatorul:

celula 1.1, aliniere: stanga sus celula 1.1, aliniere: centru sus celula 1.1, aliniere: dreapta sus
celula 2.1, aliniere: stanga mijloc celula 2.1, aliniere: centru mijloc celula 2.1, aliniere: dreapta mijloc
celula 3.1, aliniere: stanga jos celula 3.1, aliniere: centru jos celula 3.1, aliniere: dreapta jos

5.12. Folosirea culorilor in tabele

HTML ofera posibilitatea de a stabili culoarea pentru tabel sau celule. Folosind atributul BGCOLOR
se poate schimba culoarea de fundal, iar prin folosirea atributului BORDERCOLOR se poate
schimba chenarul din jurul celulei.

Etichetele <TABLE>,<TD>,<TH> si <TR> suporta toate atributele BGCOLOR si BORDERCOLOR.
Cu atat mai mult, se poate aplica culoarea asupra intregului tabel, asupra unei celule sau asupra
unei linii a tabelului.

In HTML sunt definite urmatoarele culori, care au valori corespondente in RGB hexazecimal astfel:

Culoare Valoarea hexazecimala RGB
BLACK #000000
SILVER #C0C0C0
GRAY #808080
WHITE #FFFFFF
MAROON #800000
RED #FF0000
PURPLE #800080
FUCHSIA #FF00FF
GREEN #008000


LIME #00FF00
OLIVE #808000
YELLOW #FFFF00
NAVY #000080
BLUE #0000FF
TEAL #008080
AQUA #00FFFF
5.13. Gruparea coloanelor si liniilor

HTML 4.0 include a serie de etichete pentru gruparea liniilor si a coloanelor in scopul unei definiri
mai clare a tabelului.

5.13.1. Gruparea coloanelor

Etichetele COLGROUP si COL dau posibilitatea definirii unui grup de coloane. Sintaxa pentru
eticheta de grup de coloane este urmatoarea:

<COL span=... width=... [aliniament]>

Asemanator se defineste si COLGROUP.

Atributul SPAN specifica cate coloane alaturate sunt intr-un grup. Daca nu este inclus, valoarea sa
implicita este egala cu 1.

5.13.2. Gruparea liniilor (randurilor)

Etichetele TBODY, THEAD si TFOOT au functii similare cu COLGROUP, insa ele grupeaza linii nu
coloane. THEAD si TFOOT definesc un grup de linii pentru antetul si subsolul tabelului, iar TBODY
este folosit pentru definirea unui grup de linii in corpul tabelului. Fiecare se comporta ca un
recipient, insa etichetele de sfarsit sunt optionale.

Iata sintaxa pentru folosirea celor trei etichete:

...
<TABLE>
<THEAD>
... definire linii si celule ...
</THEAD>
<TFOOT>
</TFOOT>
<TBODY>
</TBODY>
</TABLE>
...

Eticheta TFOOT trebuie sa preceada TBODY, deoarece navigatorul insereaza subsolul cand este
nevoie. Toate cele trei etichete au atribute asemanatoare cu COLGROUP.



6. LEGATURI SI ANCORE

Cea mai importanta caracteristica a HTML-ului o reprezinta fara indoiala hyperlegaturile. Fara
acestea webul nu ar fi nimic altceva decat niste fisiere seperate, fara legatura unul cu celalalt.

6.1. Utilizarea legaturilor

Aceste hyperlegaturi (denumite si legaturi hypertext) permit imbinarea documentelor in diverse
moduri, fiind folosite in feluri diferite pentru:
Conectarea cu alte pagini web (documente HTML) care fac parte din acelasi site sau dintr-
unul diferit. Acest tip de legatura de realizeaza prin folosirea elementului ANCHOR
Inserarea obiectelor, cum ar fi imagini, sunete, animatii, intr-o pagina HTML
Conectarea la alte resurse non-HTML

Pentru a crea o legatura este nevoie de doua lucruri, si anume:
numele fisierului (sau URL-ul fisierului) unde se doresrte realizarea legaturii si
un text sau o imagine care va servi ca element vizual in navigator, unde utilizatorul poate
selecta sa urmeze legatura.

Doar a doua parte este vizibila in pagina web. Cand utilizatorul selecteaza elementul vizual care
puncteaza spre legatura, navigatorul va folosi prima parte ca locatie unde sa sara.

6.2. ANCHOR

Legaturile se realizeaza prin intermediul etichetei A (ANCHOR). Elementul A necesita atat eticheta
de deschidere cat si cea de inchidere si are urmatoarea sintaxa:

<A> ... text ... </A>

Chiar daca in cadrul etichetei se afla un spatiu gol, ancora va fi valabila, insa efectul ei va fi nul.
Pentru a exista cu adevarat o hyperlegatura este absolut necesara prezenta atributului HREF in
elementul ANCHOR.

6.2.1. HREF

Atributul HREF indica URL-ul destinatie. Adresa URL poate fi o adresa completa sau una relativa si
trebuie introdusa intre ghilimele. Un element A fara acest atribut nu reprezinta nimic. Odata
adaugat atributul HREF, ancora devine functionala.

Se foloseste in urmatorul mod:

Exemplul 6.1.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine o legatura la un alt document</TITLE>
</HEAD>
<BODY>
<A HREF=http://www.iim.ro/contact.html>Legatura spre pagina Contact a IIM</A>
</BODY>
</HTML>


sau pur si simplu daca este o legatura locala se va inlocui linia 6 din exemplul precedent cu:

<A HREF=contact.html>Legatura spre pagina Contact a IIM</A>

Textul sau imaginea din interiorul etichetei A este evidentiata intr-un anume fel intr-un navigator
fata de restul documentului, textul fiind colorat albastru si subliniat, iar imaginea scoasa in
evidenta printr-un chenar albastru. Bineinteles, aceste formatari pot fi schimbate prin folosirea
foilor de stil.

Adresa fisierului destinatie este cunoscuta sub numele de URL (Uniform Resource Locator).
Pentru a specifica locatia unui fisier aflat intr-un alt director sau pe un alt server, formatul
standard este:

protocol://adresa

unde adresa reprezinta server-ul si calea inspre fisierul cu care se face legatura, iar protocol
precizeaza tipul de legatura care va fi stabilit si poate lua una din valorile:
ftp (File Transfer Protocol) acceseaza fisiere pe un server FTP;
http (Hypertext Transfer Protocol) realizeaza o legatura la o pagina web.

Exista si posibilitatea trimiterii unui mesaj prin posta electronica la o anumita adresa. Pentru
aceasta se foloste acelasi atribut HREF impreuna cu mailto astfel:

<A HREF=mailto:adresa_email>... text de legatura ...</A>

Astfel urmatoarea secventa:

Exemplul 6.2.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine o legatura ce permite trimiterea unui e-
mail</TITLE>
</HEAD>
<BODY>
<A HREF=mailto:webadmin@iim.ro>Sugestii, comentarii si observatii la WebAdmin IIM</A>
</BODY>
</HTML>

va genera crearea unei ferestre de e-mail, care este deja configurata (la sectiunea To este
scrisa adresa de e-mail) pentru transmiterea unui mesaj.

6.2.1.1. Legarea paginilor locale folosind cai relative

Cand se specifica calea unui fisier intre ghilimele (cum s-a vazut in exemplul precedent),
navigatorul cauta implicit fisierul in acelasi director cu fisierul HTML curent. Acest caz este cel mai
simplu, cand ambele fisiere se gasesc pe acelasi sever si sunt continute in acelasi director.
Pentru a specifica cai relative in legaturi se tine seama se o serie de reguli:
numele directoarelor sunt separate de caracterul / (slash)
pentru a face referinta la directorul superior se folosesc .. (doua puncte)



In tabelul urmator exista cateva exemple de cai relative cu explicatiile aferente.

Cale Ce inseamna
HREF=fisier.html fisier.html este localizat in directorul curent.
HREF=undirector/fisier.html fisier.html este localizat in directorul cu numele
undirector, iar acest director se afla in directorul
curent.
HREF=undirector/altdirector/fisier.html fisier.html este localizat in directorul cu numele
altdirector, care este localizat in directorul
undirector, iar acest director se afla in directorul
curent.
HREF=../fisier.html fisier.html este localizat in directorul parinte al
directorul curent.
HREF=../../undirector/fisier.html fisier.html este localizat cu doua nivele de
directoare mai sus, in directorul cu numele
undirector.

6.2.1.2. Legarea paginilor locale folosind cai absolute

Se pot de asemenea specifica legaturi la o alta pagina pe un sistem local folosind cai absolute.
Caile relative puncteaza inspre o pagina unde se realizeaza legatura considerand locatia relativ la
pagina curenta. Caile absolute, pe de alta parte, puncteaza inspre o pagina incepand cu nivelul
cel mai de sus din ierarhia directoarelor, parcurgand in jos toate directoarele pana sa ajunga la
fisier. Caile absolute incep intotdeauna cu /, acest lucru diferentiindu-le de caile relative.

In tabelul urmator exista cateva exemple de cai relative cu explicatiile aferente.

Cale Ce inseamna
HREF=/undirector/altdirector/fisier.html fisier.html este localizat in directorul specificat in
calea: /undirector/altdirector.
HREF=C|/undirector/fisier.html fisier.html este localizat pe discul C:, in directorul
cu numele undirector.

6.2.1.3. Cai relative sau cai absolute ?

Pentru a crea o legatura intre doua pagini, de cele mai multe ori se folosesc caile relative in locul
cailor absolute. Folosirea cailor absolute poate parea mai usoara in cazul legaturilor complicate,
insa dezavantajul este ca acestea nu sunt portabile.

In cazul in care este specificata legatura printr-o cale absoluta, iar apoi fisierul este mutat
altundeva pe disc sau redenumit vreun director din calea absoluta, toate legaturile vor fi
distruse si va trebui depus un efort suplimentar pentru editarea tuturor documentelor HTML si
remedierea legaturilor.

Prin specificarea legaturilor relative, se pot muta paginile web oriunde pe acelasi sistem sau pe
altul, si cu mici modificari refacerea legaturilor se remediaza mult mai usor. De aceea, este mult
mai usor de intretinut pagini web care contin cai relative, deoarece o munca mai multa la inceput
scuteste adesea un intreg efort depus dupa aceea.

6.2.2. Legaturi la o sectiune din document (ancore denumite)

Exista si situatii in care un document HTML este de dimensiuni mai mari si atunci se impune
realizarea unor legaturi la o anumita sectiune a documentului din acelasi document sau din altul.


Ancorele denumite sunt acele elemente ca fie contin o eticheta <A> cu un atribut name, fie orice
alt element cu un id atribuit.
Primul pas in realizarea unor astfel de legaturi este crearea ancorei in documentul HTML care sa
indice locatia unde se face legatura.

Dupa crearea ancorei cu nume, se va crea legatura la ea. Este folosita o notatie speciala pentru
legatura la o astfel de ancora. Locul URL-ului din atributul HREF este luat de numele ancorei
precedat de semnul #.

Exemplul 6.3.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine o ancora</TITLE>
</HEAD>
<BODY>
<B>CUPRINS</B>
<P><A HREF=#CAP1>Capitolul 1</A></P>
...
...
<H1 id=CAP1>Capitolul 1. INTRODUCERE</H1>
...
<H1 id=CAP2>Capitolul 2. CREAREA PAGINILOR WEB</H1>
...
...
<H1 id=CAP6>Capitolul 6. LEGATURI IN PAGINI WEB</H1>
...
...
</BODY>
</HTML>

Dupa cum se observa in exemplul anterior, ancorele denumite nu au fost realizate cu elementul
ANCHOR si atributul name, ci cu atributul id si elementul H1.

Ancorele denumite pot fi folosite si pentru stabilirea de legaturi intre documente.

<A HREF=http://www.iim.ro/evenimente.html#ev5>Evenimentul 5</A>

Prin selectarea acestei legaturi se poate accesa pagina referita. Afisajul incepe cu pagina deja
derulata in locul unde este definita ancora ev1, in loc sa fie afisata de la inceput, cum ar fi
normal.

Totodata un element ANCHOR poate indeplini simultan functia de sursa de legatura si destinatie a
ancorei denumite respective, prin folosirea ambelor atribute HREF si NAME.



7. IMAGINI

Imaginile inlinie sunt cele care apar in cadrul paginii web cand aceasta este incarcata in fereastra
navigatorului. Ele contribuie la crearea aspectului paginii si sunt stocate ca fisiere distincte de
documentul HTML, in diverse tipuri. Cele mai utilizate tipuri de fisier grafic sunt GIF si JPG.

Fisierele gif prezinta avantaje ca:
intretesere (interlaced) prin care se mareste viteza aparenta de afisare a imaginii.
transparenta (transparency) care da posibilitatea ca una sau mai multe culori sa fie
transparente (nu se vad in pagina web) si ca atare se va vedea ceea ce este sub imagine.
insa au dezavantajul ca sunt limitate la 256 de culori (sau 256 de nuante de gri in cazul
imaginilor alb-negru).

In cazul in care se doreste afisarea imaginilor in mai mult de 256 de culori su nuante de gri, se
foloseste formatul jpeg. Acesta suporta 16 biti (65.000 de culori) sau 24 biti (16 milioane de
culori), insa ocupa un spatiu mai mare decat cele pe 8 biti.

Imaginile pot fi create prin desenare, scanare sau fotografiere sau pot fi obtinute prin convertire
sau din clip art-uri. Un aspect important este tipul fisierului, dimensiunea precum si alti factori.

7.1. Adaugarea imaginilor in documente HTML

Introducerea unei imagini intr-un document HTML este un lucru relativ simplu, realizabil cu
ajutorul etichetei IMG. Aceasta este o eticheta vida care folosita fara atribute nu are nici un efect.
Sintaxa este:

<IMG SRC=URL ALT=text_alternativ ALIGN=aliniere BORDER=valoare
HSPACE=valoare VSPACE=valoare WIDTH=valoare HEIGHT=valoare>

7.1.1. Sursa imaginii (SRC)

Pentru a fi afisata imaginea in document, eticheta IMG trebuie sa contina obligatoriu atributul
SRC. Acesta specifica URL-ul imaginii (calea de acces inspre imagine si numele fisierului imagine)
si poate fi relativ sau absolut. In cazul in care fisierul ce contine imaginea nu este gasit la locatia
respectiva, atunci navigatorul afiseaza un mesaj de eroare.

7.1.2. Alinierea (ALIGN)

Implicit, in momentul inserarii unei imagini, aceasta va fi in linie cu textul. Astfel, textul este
afisat incepand din partea de jos a imaginii si astfel se produce un spatiu liber care de multe ori
face ca aspectul paginii sa nu fie cel dorit. In acest sens, atributul ALIGN rezolva o buna parte din
posibilitatile de aliniere a textului in raport cu o imagine. Valorile posibile sunt:

Valoare Descriere
TOP Aliniaza textul incepand cu partea de sus a imaginii.
MIDDLE Aliniaza textul incepand din partea din mijloc a imaginii.
BOTTOM Aliniaza textul incepand cu partea de jos a imaginii. (valoare implicita)



Imaginea inserata in document apare imediat in dreapta continutului anterior. Ea poate fi afisata
in stanga sau in dreapta paginii iar continutul o inconjoara. In acest sens atributul ALIGN poate
lua una din valorile:

Valoare Descriere
LEFT Afiseaza imaginea in stanga si continutul in jurul imaginii.
RIGHT Afiseaza imaginea in dreapta ferestrei si continutul in jurul imaginii.

7.1.3. Chenarul (BORDER)

Implicit, navigatorul afiseaza un chenar in jurul imaginii daca peste aceasta este definita intr-o
legatura. Cu ajutorul atributului BORDER se poate stabili latimea in pixeli a chenarului. Daca
aceasta ia valoarea 0 atunci chenarul din jurul imaginii nu va fi afisat.

7.1.4. Spatierea (HSPACE si VSPACE)

Atributele HSPACE si VSPACE creaza un spatiu in jurul imaginii pentru a o distanta de continut.
Valorile sunt exprimate in pixeli iar spatiul va fi adaugat in ambele parti ale imaginii.

7.1.5. Dimensiuni (WIDTH si HEIGHT)

Pentru stabilirea dimensiunii de afisare in fereastra navigatorului a unei imagini se pot utiliza
atributele WIDTH si HEIGHT. Valorile lor sunt exprimate in pixeli si ele au ca efect rezervarea in
fereastra a unei portiuni pentru afisarea imaginii.

Dimensiunile pot fi stabilite exact ci si cele reale si atunci imaginea va fi afisata la scara de 1:1,
sau pot fi diferite si atunci intervine factorul de scalabilitate. In cel de-al doilea caz imaginea va fi
marita sau micsorata proportional cu dimensiunea ei reala sau poate fi denaturata (deformata)
prin specificarea explicita a inaltimii si latimii imaginii.

7.1.6. Text alternant (ALT)

Exista cazuri in care navigatorul este setat sa nu afiseze imaginile sau nu suporta modul grafic
(nu poate afisa imagini). Atunci, in loc sa fie afisata sursa imaginii (calea inspre fisierul imagine si
numele acestuia), se poate afisa un text explicativ numit text alternant prin intermediul
atributului ALT.

In cazul in care navigatorul incarca imaginea in fereastra, textul alternant apare intr-o casuta in
momentul in care mouse-ul este pozitionat deasupra imaginii respective.

7.2. Harti imagine (Maparea imaginilor)

O imagine poate reprezenta sursa unei legaturi. Exista insa posibilitatea ca o imagine sa contina
mai multe legaturi prin folosirea asa numitelor imagini-harta.

O imagine-harta poate fi conceputa pentru a sta pe un server si a fi prelucrata de un script CGI
rulat pe server sau poate fi codificata in fisierul HTML si este rulata de navigator (client).
Indiferent de tipul folosit, pentru a defini o harta-imagine se procedeaza astfel:
se alege imaginea;
se imparte imaginea in zone si se stabileste un URL pentru fiecare zona in parte;
se determina coordonatele fiecarei zone.



7.2.1. Harti pe server (server-side)

Atributul ismap identifica imaginea ca fiind o imagine harta folosita pentru a asocia mai multe
legaturi din imaginea respectiva catre alte documente.
O imagine harta pe server este definita astfel:

<A HREF=URL_fisier_definire_harta><IMG SRC=fisier_imagine ISMAP></A>

In momentul in care utilizatorul executa click pe imagine atributul ismap transmite serverului
coordonatele x si y unde a avut loc evenimentul prin adaugarea unui semn de intrebare urmat de
valorile coordonatelor x si y separate prin virgula, la adresa URL specificata in ancora A.

Fisierul cu definitia hartii este stocat pe server, are extensia .map, si contine cate o linie pentru
fiecare zona definita. In fiecare linie sunt incluse:
denumirea formei pe care o are zona (rectangle, polygon, circle)
coordonatele zonei (perechi x,y ale colturilor zonei)
URL-ul referit de acea zona

Este benefica introducerea unor indicii grafice pentru a informa utilizatorul asupra faptului ca
imaginea este o harta si nu o imagine cu o simpla legatura.

7.2.2. Harti pentru client (client-side)

Navigatoarele au capacitatea de a interpreta o harta si fara ajutorul serverului. Aceste harti
imagine pentru client includ informatiile necesare pentru procesare fara a comunica cu serverul.
Ele au avantajul ca fisierul harta nu este stocat pe server, nu trebuie sa ruleze scripturi de
prelucrare, insa au dezavantajul ca ruleaza doar daca navigatorul cunoaste extensiile pentru ele.

Acest tip de harta-imagine se realizeaza prin intermediul atributului USEMAP, care marcheaza o
imagine ca fiind imagine harta pentru client folosita si care se foloseste in combinatie cu MAP:

<IMG SRC=fisier_imagine USEMAP=fisier.html#nume_harta>

Elementul MAP defineste harta cu toate informatiile referitoare la tip, coordonate si legaturi, si
poate fi stocat intr-un fisier separat sau poate fi chiar inclus in documentul HTML.

Eticheta MAP are un singur atribut, si anume NAME, prin care se identifica, iar in interiorul sau
permite folosirea doar a etichetei AREA pentru definirea zonelor active din imagine:

<MAP>
<AREA SHAPE=rect|circle|poly COORDS=perechi_coordonate HREF=URL>
</MAP>

in care atributele reprezinta urmatoarele:

Atribut Descriere
SHAPE Precizeaza tipul zonei active


COORDS Precizeaza coordonatele zonei sub forma de perechi, exprimate in pixeli, relative la
coltul din stanga-sus. Pentru dreptunghiuri se specifica coltul din stanga-sus si
dreapta-jos, pentru poligoane puncte de-a lungul marginilor, iar pentru cercuri o
perece ce furnizeaza coordonatele centrului si o valoare pentru raza cercului.
HREF Indica fisierul la care se face legatura in momentul selectarii zonei.
Cum se defineste o imagine harta pentru client: se include imagine in documentul HTML prin
specificarea in atributul SRC a fisierului imagine si in atributul USEMAP numele hartii care
precizeaza harta atasata ce contine informatiile necesare definirii zonelor active din imagine,
astfel:
Exemplul 7.1.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML cu imagine harta pentru client</TITLE>
</HEAD>
<BODY>
<MAP NAME="harta1">
<AREA SHAPE="rect" COORDS="25,50,200,150" HREF="dreptunghi.html">
<AREA SHAPE="circle" COORDS="400,100,50" HREF="cerc.html">
</MAP>
<IMG SRC="imagine.gif" WIDTH="500" HEIGHT="200" BORDER="0"
ALT="Imagine mapata" USEMAP="#harta1">
<P>
Harta imagine de mai sus are definite doua zone active, una in forma dreptunghiulara si alta in
forma de cerc.
</P>
</BODY>
</HTML>

7.3. Combinarea cu alte elemente

Imaginile pot fi combinate si cu alte elemente, dand astfel o nota aparte documentului HTML. Ele
se folosesc in cazul in care se definesc legaturi inspre alte documente, se vrea particularizarea
unor liste, alinierea unor imagini folosind tehnica tabelara sau pur si simplu prin alaturarea de
text si imagine.

7.3.1. Imagini si legaturi

De multe ori pentru definirea unei legaturi nu se foloseste un text ca baza vizuala ci o imagine.
Efectul vizual care se obtine este mult mai spectaculos decat cel obtinut prin plasarea unui text,
fie el si formatat. Pentru aceasta se combina eticheta ancora A cu eticheta de imagine IMG in
sensul ca IMG va fi continut in A, dupa cum se poate observa:

<A><IMG SRC=fisier_imagine></A>

Definirea unei legaturi printr-o imagine genereaza un chenar acesteia (imaginii) in mod automat.
Daca nu se doreste, in eticheta IMG se va specifica explicit acest lucru prin utilizarea atributului
BORDER cu valoarea 0.



7.3.2. Imagini si liste

In cadrul listelor, imaginile se pot utiliza pentru a crea un aspect vizual mai atragator prin
inlocuirea simbolurilor din fata elementelor listei sau chiar prin introducerea lor in cadrul
elementelor listei. Se pot folosi atat in combinatie cu liste neordonate cat si cu liste ordonate sau
liste de definitii.
7.3.3. Imagini si tabele

Se pot introduce imagini si in tabele prin folosirea etichetei IMG in cadrul etichetei TABEL, mai
exact in definirea unei celule TD. Se foloseste mai ales in cazul in care se doreste o mai buna
aliniere a mai multor imagini pe orizontala sau verticala sau pentru definirea unor liste de tipul:
text si imagine corespondenta.

7.3.4. Imagini si paragrafe

Imaginile pot intra si in alcatuirea paragrafelor, ele stand alaturi de text si putand fi pozitionate in
raport cu acesta prin specificarea atributului ALIGN.

Exemplul 7.2.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML cu imagine combinata cu alte elemente</TITLE>
</HEAD>
<BODY>
<P>
Acest paragraf reflecta exemplul de combinare a textului cu imaginea
<IMG SRC="imagine.gif" WIDTH="200" HEIGHT="50" BORDER="1" ALIGN="MIDDLE">
specificand totodata si modul de aliniere in raport cu aceasta.
</P>
<P>In acelasi timp, imaginile pot fi filosite ca simboluri pentru elementele unei liste</P>
<UL IMAGESRC="bulet.gif">
<LI>Primul element
<LI>Al doilea element
<LI>Al treilea element
</UL>
<P>Utila prezentarilor de produse este combinarea imaginilor cu tabele pentru structurarea
informatiei</P>
<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0" BORDERCOLOR="#000000"
WIDTH="100%">
<TR>
<TH WIDTH="75%" BGCOLOR="#FFFF00">Denumire</TD>
<TH WIDTH="25%" BGCOLOR="#FFFF00">Imagine</TD>
</TR>
<TR>
<TD WIDTH="75%">Primul produs</TD>
<TD WIDTH="25%"><IMG SRC="produs1.gif" BORDER="0"></TD>
</TR>
<TR>
<TD WIDTH="75%">Al doilea produs</TD>
<TD WIDTH="25%"><IMG SRC="produs2.gif" BORDER="0"></TD>
</TR>
</TABLE>


<P>Insa una din cele mai spectaculoase combinatii o reprezinta folosirea unei imagini ca suport
pentru legaturi</P>
<A HREF="legatura.html"><IMG SRC="legatura.gif"></A>
</BODY>
</HTML>



8. CADRE

O limitare majora a versiunilor mai vechi de HTML a fost aceea ca se putea vedea in fereasra
navigatorului doar o singura pagina la un moment dat.

Cadrele reprezinta implementarea unui concept introdus mai intai in 1995, care dupa multe
dezbateri W3C a decis sa-l introduca in standardul HTML 4.0.

8.1. Concept

Cadrele au venit peste aceasta limitare divizand fereastra navigatorului in mai multe documente
HTML. La fel ca si tabelele, cadrele permit aranjarea textului si a imaginilor in linii si coloane. Ele
sunt similare cu tabelele din multe puncte de vedere, insa nu au scopul de a organiza date, ci
despart fereastra in cadre.

Fiecare cadru are propriul sau fisier HTML atasat, iar continutul sau poate fi derulat sau schimbat
independent de celelalte (orice cadru poate contine legaturi care schimba continutul altui cadru
sau chiar al sau). Intr-un fel, este ca si cum fiecare cadru devine propriul sau navigator. Cadrele
pot interactiona intre ele, actiunile de pe o pagina dintr-un cadru afectand continutul unui alt
cadru.

8.2. Crearea unui document bazat pe cadre

Pentru a crea un astfel de document, mai intai trebuie creat continutul fiecarui cadru ca si pagina
(document) HTML obisnuita. Aceste pagini HTML contin etichete prezentate in capitolele
anterioare si se supun regulilor de compunere a documentelor HTML (au cele doua sectiuni HEAD
si BODY).

Pentru a le pune impreuna, se foloseste un tip special denumit document bazat pe cadre. Acest
tip de document nu are in realitate un continut. El doar spune navigatorului ce pagini sa incarce si
cum sa le aranjeze.

Iata un exemplu de document bazat pe cadre, de complexitate medie:

Exemplul 8.1.

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Navigatorul dumneavoastra nu poate afisa cadre.
</NOFRAMES>
</HTML>


Acest exemplu are ca efect afisarea a patru cadre in fereastra navigatorului. Primul cadru apare in
partea de sus ca si antet, la centru sunt doua cadre, unul pentru eticheta in stanga si ocupa 25%
din latimea ecranului, iar altul pentru informatii in dreapta, care ocupa restul spatiului. Alt cadru
se intinde pe intreaga latime din partea de jos a ecranului si contine un subsol.

8.3. FRAMESET

Cadrele sunt continute intr-o structura numita FRAMESET, aceasta structura luand locul etichetei
BODY intr-un document bazat pe cadre. Un document HTML care contine eticheta FRAMESET nu
poate avea sectiunea BODY in cadrul sau, iar o pagina care are sectiunea BODY nu poate utiliza
eticheta FRAMESET.

<FRAMESET ROWS=... COLS=...>
... definire cadre ...
</FRAMESET>

In cazul navigatoarelor care accepta cadre continutul va fi analizat, interpretat si afisat in
consecinta, in caz contrar rezultatul va fi sau o pagina goala sau una din eticheta <NOFRAMES>.

O eticheta FRAMESET poate include doar etichete FRAME sau etichete aditionale FRAMESET
incapsulate care permit crearea unor machete de cadre mult mai complexe.

8.3.1. Definirea coloanelor si a liniilor

Eticheta FRAMESET are doua atribute importante: ROWS si COLS. Acestea se folosesc in contextul
urmator:

<FRAMESET ROWS="valori_tip_lista" COLS=" valori_tip_lista ">
</FRAMESET>

Se pot defini un numar rezonabil de linii sau coloane, sau de ambele tipuri, insa trebuie definita
cel putin una din ele. Daca nu se defineste mai mult de o linie sau o coloana, navigatorul ignora
eticheta FRAMESET complet, iar fereastra va ramane goala.

Valori_tip_lista reprezinta o lista de valori separate prin virgula, care pot fi exprimate in pixeli, in
procente, sau valori la o scara relativa. Numarul de randuri sau coloane este fixat automat la
numarul de valori din lista respectiva.

Urmatorul exemplu:

<FRAMESET ROWS="100,250,150">

defineste un set de cadre cu 3 linii. Valorile sunt absolute, exprimate in pixeli. Prima linie are 100
pixeli, a doua are 250 pixeli, iar ultima (a treia) are 150 pixeli.

Fixarea dimensiunii liniilor sau coloanelor in valori absolute nu reprezinta cea mai buna
procedura, de aceea este mai bine sa se defineasca valorile procentual sau relativ, astfel:


<FRAMESET ROWS="25%,50%,25%">
Prin acest exemplu se creaza trei cadre aranjate ca si linii, primul ocupand 25% din fereastra, al
doilea 50% si cel de jos 25%.

In cazul in care procentele introduse pentru definirea liniilor sau a coloanelor nu ajunge la 100%,
atunci ele vor fi redimensionate in sus sau in jos proportional pana la atingerea valorii de 100%.

Definirea coloanelor prin valori proportionale se face astfel:

<FRAMESET COLS=*,2*,3*>

Simbolul * este folosit pentru a defini o diviziune din spatiu. Fiecare * reprezinta o bucata
dintr-un intreg. In exemplul anterior intregul are 6 parti, deci rezulta ca prima coloana are 1/6 din
latimea totala a ferestrei, a doua coloana are 2/6 (1/3) si ultima coloana are 3/6 (1/2).

Iata un exemplu care foloseste toate cele trei tipuri de declarare a valorilor:

<FRAMESET COLS=100,25%,*,2*>

In acest exemplu primei coloane ii este atribuita o valoare absoluta de 100 pixeli. A doua coloana
reprezinta 25% din intreaga latime a ferestrei, oricare ar fi aceasta. A treia coloana ia 1/3 din
ceea ce ramane si in final coloana a patra ia cealalta parte de 2/3

Spatiul din fereastra este alocat prioritar astfel:
valorile absolute exprimate in pixeli sunt totdeauna luate in considerare primele, de la
stanga la dreapta
apoi urmeaza cela procentuale, raportate la intregul spatiu ramas
in final, valorile proportionale sunt divizate avand la baza spatiul ramas.

8.3.2. Marginile si spatiul dintre cadre

Pentru stabilirea aspectului si a marginilor unui set de cadre se folosesc atributele BORDER,
FRAMEBORDER si BORDERCOLOR.

Atributul BORDER este folosit doar cu eticheta FRAMESET, fiind folosit la stabilirea grosimii
marginilor intr-un set de cadre. Are atribuita o valoare exprimata in pixeli, astfel:

<FRAMESET BORDER=5>

Atributul poate lua si valoarea 0, caz in care toate cadrele din set vor fi fara margini.

Un alt atribut optional este FRAMEBORDER, care permite fixarea grosimii marginii intre cadre.
Poate fi folosit atat cu FRAMESET cat si cu FRAME, luand una din valorile: YES sau NO.
Valoarea implicita pentru FRAMEBORDER este YES, ceea ce inseamna ca navigatorul afiseaza
cadrele cu margine, cu aspect 3-D

Marginea unui cadru va fi invizibila (de fapt este afisata in culoarea de fundat a navigatorului)
doar atunci cand FRAMEBORDER=NO este stabilit pentru toate cadrele inconjuratoare. Pentru a
crea un set de cadre fara margini trebuie stabilit atat FRAMEBORDER=NO, cat si BORDER=0
in eticheta FRAMESET.



Atributul BORDERCOLOR poate fi folosit atat cu eticheta FRAMESET cat si cu eticheta FRAME,
primind ca valoare numele unei culori (in general exista 16 denumiri de culori folosite: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,
yellow) sau o valoare RGB hexazecimala (sunt cu mult mai precise, dar neclare. De ex. Ce culoare
reprezinta #2C0080?).

8.3.3. Alte atribute

Unele navigatoare suporta si atributul FRAMESPACING pentru eticheta FRAMESET. El este
destinat definirii spatiului dintre cadre si poate lua valori exprimate in pixeli.

8.3.4. FRAME

Folosirea etichetei <FRAMESET> reprezinta doar inceputul crearii unui document bazat pe cadre.
Odata impartita fereastra navigatorului in regiuni, acestea trebuie umplute cu un continut. Acest
lucru se realizeaza cu eticheta <FRAME> si numeroasele sale atribute.

Eticheta FRAME defineste un cadru, fiind continuta in recipientul FRAMESET, avand sintaxa:

<FRAME SRC="url" NAME="nume_fereastra" SCROLLING=YES|NO|AUTO
MARGINWIDTH="valoare" MARGINHEIGHT="valoare" NORESIZE>

Elementul FRAME nu are etichetade sfarsit, de asemenea pot exista mai multe definitii de cadre in
interiorul aceluiasi FRAMESET.

FRAME are sase atribute asociate: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING,
and NORESIZE.

Sursa

Cel mai important atribut al etichetei FRAME este SRC, care indica navigatorului URL-ul
documentului ce trebuie incarcat in cadru:

<FRAME SRC="url">

unde :URL reprezinta de obicei un fisier in format HTML. Documentul HTML trebuie sa fie complet,
nu se accepta fragmente de document. Asta inseamna ca el trebuie sa contina etichetele HTML.
HEAD si BODY, precum si alte etichete ce pot aparea in interiorul acestora.

Daca se specifica un URL pe care navigatorul nu-l gaseste, atunci este alocat spatiul pentru cadru,
insa aici va fi afisat un mesaj de eroare de la navigator.

Margini

Atributele MARGINWIDTH si MARGINHEIGHT dau un control sporit asupra grosimii marginilor din
interiorul cadrului. Ele permit specificare marginilor din stanga si dreapta MARGINWIDTH,
respectiv a celor de sus si jos MARGINHEIGHT, pentru fiecare cadru. Se declara astfel:

MARGINWIDTH=valoare si MARGINHEIGHT=valoare

unde valoare este totdeauna un numar ce reprezinta o valoare absoluta in pixeli


Atentie, este vorba despre marginile din interior, nu despre chenar. Aceste atribute definesc un
spatiu inauntrul cadrului, unde continutul nu va aparea.

Bare de navigare

Cadrele au implicit bare de navigare daca continutul lor este prea mare si nu incape in cadru.
Uneori este necesar un control mai mare asupra lor. Acest lucr este realizabil cu ajutorul
atributului SCROLLING al etichetei FRAME. Iata si formatul atributului:

<FRAME SCROLLING=yes|no|auto>

Cele trei valori valide pentru SCROLLING sunt:
auto este valoarea implicita a atributului, chiar daca atributul nu se regaseste in eticheta
FRAME. In acest caz navigatorul plaseaza bare de navigare doar daca este cazul.
yes afiseaza bara orizontala si cea verticala de navigare fortat.
no se utilizeaza atunci cand nu se doreste afisarea barelor de navigare. Aceasta valoare
se foloseste doar atunci cand este sigur faptul ca tot continutul cadrului este vizibil. Altfel,
utilizatorul se va gasi in postura in care nu poate derula fereastra pentru a vizualiza tot
continutul.

Redimensionare

Utilizatorul poate schimba dimensiunea unui cadru prin efectuarea un click pe chenarul cadrului si
apoi tragerea lui intr-o pozitie noua. Daca se foloseste atributul NORESIZE in eticheta FRAME
atunci redimensionarea cadrelor va fi inhibata. NORESIZE este un atribut boolean, nu necesita
specificarea unei valori si are urmatoarea sintaxa:

<FRAME NORESIZE>

Comunicarea intre cadre

Dupa stabilirea comportamentului e baza si aspectul cadrelor, trebuie sa vedem in ce mod
interactioneaza cadrele unul cu celalalt.

Metoda principala de a permite unui cadru sa comunicecu altul este prin folosirea atributului
TARGET. Acest atribut este disponibil pentru etichete care afecteaza legaturile (A sau LINK).

De asemenea, cadrele trebuie denumite pentru a putea lucra ca tinta unei hyperlegaturi.

Atributul NAME desemneaza un nume la un cadru si poate fi folosit pentru a face legatura la
cadrul respectiv din alte cadre.

<FRAME NAME=nume_cadru>

Daca nu se creaza un nume explicit pentru cadru, atunci el pur si simplu nu va avea nume si ca
atare nu exista posibilitatea de a folosi legaturi intr-un cadru care sa deschida documente in alt
cadru.

Iata un exemplu:

<FRAME SRC="index.html" NAME="Meniu">



prin care se creaza un cadru numit Meniu" si care poate fi referit prin intermediul unei legaturi
simple cum ar fi:

<A HREF="index.html" TARGET="Meniu">Click pentru salt la MENIU</A>

Toate numele cadrelor trebuie sa inceapa cu un caracter alfanumeric. Nu folositi caracterul _ ca
prima litera in numele unui cadru. Oricum, exista patru nume implicite rezervate in HTML, si toate
dintre ele incep cu _. Acestea sunt prezentate in tabelul urmator. Toate celelalte nume care
incep cu _ vor fi ignorate.

Nume Scop
_blank Incarca continutul intr-o fereastra noua fara nume. Este folosit in
scopul de a parasi setul curent de cadre si de a incepe cu o
fereastra noua.
_self Incarca continutul in cadrul din care se apeleaza.
_parent Incarca continutul in fereastra parinte a setului de cadre. Daca nu
este definit un set de cadre atunci rezultatul este acelasi ca si in
cazul in care avem _self.
_top Incarca continutul infereastra originala, renuntand la celelalte
cadre.

8.3.5. NOFRAME

Dupa cum spuneam, exista navigatoare care nu se descurca cu documente bazate pe cadre,
astfel ca se pune problema instroducerii unui continut alternativ setului de cadre. Acest deziderat
se realizeaza prin utilizarea etichetei NOFRAMES, care se comporta ca un recipient pentru o
structura de pagina HTML normala.

Sintaxa etichetei este urmatoarea:

<NOFRAMES>
... continutul HTML alternativ ...
</NOFRAMES>

iar tot ceea ce este plasat in interiorul etichetei NOFRAMES apare in refeastra navigatoarelor care
nu suporta cadre.

NOFRAMES trebuie plasat dupa ultima declaratie FRAMES si in interiorul sau poate fi inserat orice
cod HTML valid.

8.4. Cadre IFRAME

Cadrele inlinie reprezinta o noutate, ele in esenta sunt tratate ca si o imagine sau ca un obiect.

Sintaxa pentru un cadru inlinie este aceasta:

<IFRAME name=nume_cadru src=url frameborder=1|0
marginwidth=valoare marginheight=valoare scrolling=yes|no
align=vertical|horizontal height=valoare width=valoare>


...
</IFRAME>

Cadrele inlinie ocupa un spatiu in doument si insereaza un continut specializat (posibil o alta
pagina web).
8.4.1. Atribute

Name este folosit pentru a da un nume cadrului.

Src este adresa url a paginii care va umple cadrul.

Align poate lua una din valorile: bottom, middle, top, left sau right. Valoarea prestabilita este
bottom.

Height si wigth stabilesc dimensiunile cadrului. Se pot mentiona valori folosind una din cele trei
metode de referire standard: pixeli, procente sau raport.

Daca nu sunt acceptate cadrele inlinie, atunci navigatorul ignora eticheta IFRAME si afiseaza
legatura pentru continut.

...
<IFRAME SRC=detaliitehnice.html WIDTH=50% HEIGHT=250 SCROLLING=auto
ALIGN=left FRAMEBORDER=1>
<A HREF=detaliitehnice.html>Click pentru detalii tehnice</A>
</IFRAME>
...


<FRAMESET>...
</FRAMESET>

Imparte fereastra principala intr-un set de cadre
care fiecare poate afisa separate un document
HTML.
ROWS="..."
Imparte fereastra sau setul de cadre pe verticala,
intr-un numar de linii specificate. Specificarea se
face printr-un numar, prin procent din latimea
totala a ferestrei sau printr-un * care indica
faptul ca cadrul ocupa restul spatiului sau imparte
spatiul ramas intre cadre (daca sunt definite mai
multe cadre cu *).
COLS="..."
Se comporta similar cu ROWS, cu exceptia faptului
ca fereastra sau setul de cadre este inpartit pe
orizontala in coloane.
FRAMESPACING="..." Spatiul dintre cadre, in pixeli.
FRAMEBORDER="..."
Specifica daca marginea cadrului sa fie afisata sau
nu. Optiunile disponibile sunt YES and NO.
BORDER="..."
Dimensiunea marginilor cadrului exprimate in
pixeli.
<FRAME> Defineste un cadru intr-un <FRAMESET>.


SRC="..." URL-ul unui document afisat in cadru.
NAME="..."
Un nume care este folosit pentru a face legatura la
cadru printr-un atribut target dintr-o eticheta A.
MARGINWIDTH="..."
Spatiul (exprimat in pixeli) lasat in partea stanga
si dreapta a documentului dintr-un cadru.
MARGINHEIGHT="..."
Spatiul (exprimat in pixeli) lasat deasupra si
dedesubtul documentului dintr-un cadru.
SCROLLING="..."
Controleaza folosirea barelor de defilare pe cadru.
Valori posible: YES, NO sau AUTO.
NORESIZE
Opreste utilizatorul de la redimensionarea cadrelor
folosind mouse-ul.
<NOFRAME>...
</NOFRAME>

Stipuleaza un continut alternativ in documente
bazate pe cadre pentru navigatoarele care nu
suporta cadre (de obicei includ declaratia <BODY>
... </BODY>).
<IFRAME>...
</IFRAME>

Insereaza un continut in pagina web, asemenator
cu o imagine sau un obiect.
NAME="..." Numele atribuit unui cadru inlinie.
SRC="..." URL-ul unui document care va umple cadrul inlinie.
WIDTH="..."
Latimea cadrului inlinie. Poate fi specificata in:
pixeli, procente sau raport.
HEIGHT="..."
Inaltimea cadrului inlinie. Poate fi specificata in:
pixeli, procente sau raport.
SCROLLING="..."
Controleaza folosirea barelor de defilare pe cadru.
Valori posible: YES, NO sau AUTO.
ALIGN="..."
Precizeaza modul de aliniere a cadrului inlinie fata
de text. Poate lua una din valorile: bottom,
middle, top, left sau right



9. FORMULARE

Modalitatea prin care se poate interactiona cu utilizatorul o reprezinta formularele. Acestea permit
vizitatorilor sa introduca date care vor fi procesate pe serverul web prin intermediul scripturilor.
Prin folosirea formularelor se poate cere vizitatorilor sa raspunda la anumite intrebari, sa
completeze formulare de feedback, sa faca sugestii, observatii, reclamatii referitoare la pagina
web, sa faca inscrieri intr-o carte de oaspeti sau diverse alte actiuni.

In acest sens exista cateva etichete prin care este posibila definirea de campuri pentru
introducerea informatiilor si care vor fi plasate in cadrul elementului FORM.

9.1. Elementul FORM

Intr-un document HTML formularele sunt definite prin eticheta FORM. Aceasta se comporta ca un
recipient si totodata in eticheta de inceput trebuie specificate sciptul si modalitatea de transmitere
a datelor din formular, asa cum se arata si mai jos:

<FORM METHOD="modalitate" ACTION="URL_script">
... definire elemente formular ...
</FORM>

Elementul FORM are doua atribute principale:

ACTION specifica URL-ul pentru un script care va procesa datele din formular si care se
gaseste de obicei pe serverul web. In cazul in care nu se specifica nici un URL, datele vor fi
intoarse in pagina de unde au venit.

METHOD specifica modalitatea de transmitere a datelor. Accepta valorile POST si GET.
POST este metoda recomandata, ea trimitand informatiile din formular separat de URL,
intr-o sectiune diferita numita corp entitate. GET ataseaza informatiile din formular la
sfarsitul URL-ului, ca un adaos al adresei propriu-zise.

Un document HTML poate contine unul sau mai multe formulare, insa in cazul in care acestea
sunt mai multe, ele nu pot fi imbricate. Daca exista cazuri in care eticheta de inceput <FORM> a
celui de-al doilea formular apare inaintea etichetei de sfarsit </FORM> a primului formular, atunci
eticheta va fi ignorata si elementele celui de-al doilea formular vor fi atribuite primului formular.

9.2. Elementul TEXTAREA

In multe cazuri se impune ca utilizatorii sa introduca mai mult decat o singura linie de text. Acest
caz apare atunci cand este vorba de raportarea unor erori sau de feedback si el poate fi rezolvat
folosind etichete TEXTAREA in cadrul formularului.

Sintaxa este:

<TEXTAREA NAME=nume ROWS=valoare COLS=valoare DISABLED READONLY>
... text implicit ...
</TEXTAREA>


Implicit elementul TEXTAREA afiseaza un camp gol inalt de patru randuri si lat de 40 de
caractere. Aceasta dimensiune se poate insa schimba prin folosirea atributelor ROWS si COLS.

De asemenea, poate fi specificat si un text imlicit care sa arate utilizatorului ce trebuie introdus.
Etichetele <TEXTAREA> si </TEXTAREA> se comporta ca un recipient pentru a defini textul
implicit. El apare exact asa cum a fost introdus, la fel cu textele preformatate cu eticheta PRE,
orice spatii sau treceri la linie noua fiind afisate. Exista insa un atribut care poate determina unele
modificari in modul de afisare a textului in fereastra navigatorului. Acesta este WRAP care poate
lua urmatoarele valori:

Valoare Descriere
OFF Valoarea implicita, nu determina ruperea textului.
VIRTUAL Face ca textul sa apara cu ruperi de linie, insa trimite textul la serverul web asa
cum el a fost introdus.
PHYSICAL Forteaza includerea ruperilor de linie in momentul in care navigatorul trimite
datele catre serverul web

Daca este specificat atributul readonly atunci continutul initial nu poate fi modificat de catre
utilizator.

Atributul NAME este solicitat deoarece ia ca valoare numele variabilei atasata sirului de caractere
si ajuta la procesarea datelor de catre script pe serverul web.

9.3. Elementul SELECT

Elementul SELECT creaza o lista de optiuni sub forma de meniu sau lista derulanta. Optiunile din
lista se definesc intre etichetele <SELECT> si </SELECT> prin intermediul unui alt element si
anume OPTION, astfel:

<SELECT NAME=nume SIZE=valoare MULTIPLE DISABLED>
<OPTION VALUE=valoare SELECTED DISABLED> optiune
...
</SELECT>

Atributele elementului SELECT sunt urmatoarele:

Atribut Descriere
NAME Este necesar. Defineste numele controlului.
SIZE Determina cate optiuni sa fie afisate. Daca este omis sau daca ia valoarea 1
atunci optiunile sunt afisate intr-o lista de selectie. Daca ia valoarea 2 sau mai
mare, optiunile sunt afisate intr-o lista derulanta.
MULTIPLE Permite selectarea mai multor optiuni. In cazul in care este specificat, forteaza
afisarea intregului meniu, netinand cont de atributul SIZE.

Atributele elementului OPTION sunt urmatoarele:

Atribut Descriere
VALUE Reprezinta valoarea atribuita optiunii, care este trimisa inapoi la serverul web si
nu trebuie sa aiba aceeasi valoare cu ce este afisat in fereastra pentru utilizator.


SELECTED Indica daca optiunea este selectata in mod implicit.

Eticheta de inchidere a elementului OPTION este optionala. In cazul in care nu este folosita
elementul definit se termina automat la gasirea etichetei de inceput a urmatorului element
OPTION sau la sfarsitul elementului SELECT care il contine.

9.4. Elementul INPUT

Elementul INPUT este cel mai important in construirea formularelor. Multitudinea de tipuri pe care
o poate lua permite crearea formularelor fara a utiliza alte elemente, ci doar specificand tipul
elementului INPUT. Are urmatorul format:

<INPUT TYPE="tip" NAME="nume_control" SIZE="valoare" MAXLENGTH="valoare">

Singurele atribute solicitate sunt NAME si TYPE. NAME specifica numele controlului iar TYPE este
folosit pentru a defini o gama larga de controale si poate lua una din valorile:

Valoare Control asociat
TEXT Caseta de introducere a textului
PASSWORD Caseta de introducere a parolei
CHECKBOX Caseta de validare
RADIO Buton de selectie
RESET Buton Reset
SUBMIT Buton Submit
IMAGE Imagine
BUTTON Buton personalizat
HIDDEN Element ascuns

9.4.1. Atribute

Atributele elementului INPUT sunt urmatoarele:

Atribut Functie
NAME Defineste numele controlului. Este solicitat la toate tipurile, exceptie fac submit
si reset.
SIZE Marimea campului exprimata in caractere. Se utilizeaza cu text si password.
MAXLENGTH Specifica maximul de caractere permis a se introduce pentru campuri de tip
text sau password.
VALUE - pentru campuri text sau password, defineste textul implicit afisat;
- pentru casete de validare sau butoane radio, specifica valoarea returnata
serverului in cazul in care este selectat;
- pentru butoane Submit si Reset, defineste textul din interiorul butonului.
CHECKED Folosit doar cu casete de validare si butoane radio pentru selectare implicita.
TYPE Stabileste tipul elementului INPUT care va fi afisat.

9.4.2. Valoarea TEXT

TEXT este valoarea implicita pentru elementul INPUT si creaza o caseta de introducere a textului
de lungime specificata.



Trebuie retinut faptul ca lungimea casetei si lungimea sirului de caractere introdus de utilizator
sunt notiuni distincte si pot fi stabilite fiecare in mod separat.

<INPUT TYPE="TEXT" NAME="nume" SIZE="valoare" MAXLENGTH="valoare">

Pot fi folosite atributele:
NAME (este soliciat) pentru specificarea numelui controlului,
SIZE pentru specificarea lungimii controlului,
MAXLENGTH pentru specificarea numarului maxim de caractere ce poate fi introdus si
VALUE pentru a afisa un text implicit.

9.4.3. Valoarea PASSWORD

Optiunea PASSWORD este aproape identica cu TEXT cu exceptia faptului ca in loc sa fie afisat in
caseta caracterul tiparit este afisat un marcator pentru a preveni citirea lor de care persoane
neautorizate. O caseta de introducere parola se creaza astfel:

<INPUT TYPE="PASSWORD" NAME="nume" SIZE="valoare" MAXLENGTH="valoare">

Atributele posibil de inclus in tipul PASSWORD sunt:
NAME (solicitat),
SIZE dimensiunea,
MAXLENGTH lungimea maxima a sirului de caractere introdus si
VALUE valoarea implicita.

9.4.4. Valoarea CHECKBOX

Determina crearea unei casete de validare si este folosita atunci cand valorile posibile sunt de tip
boolean DA/NU (caseta poate fi bifata sau poate ramane libera).

<INPUT TYPE="CHECKBOX" NAME="nume" VALUE="valoare" CHECKED>

Atributele posibile sunt: NAME (soliciat), VALUE valoarea returnata serverului, CHECKED
defineste caseta ca selectata implicit.

9.4.5. Valoarea RADIO

Valoarea RADIO este asemanatoare cu CHECKBOX, insa cu ceva mai complexa. Butoanele radio
pot fi grupate prin folosirea aceluiasi nume la atributul NAME, astfel va fi acceptat un singur
raspuns dintre toate optiunile posibile.

<INPUT TYPE="RADIO" NAME="nume" VALUE="valoare" CHECKED>

RADIO necesita folosirea atributului VALUE pentru a face diferenta intre optiuni, precum si
atributul NAME pentru crearea unui grup de optiuni.


Pentru butoanele radio este important sa fie atribuita o valoare initiala implicita prin folosirea
atributului CHECKED, deoarece exista posibilitatea ca utilizatorul sa nu selecteze nici o optiune din
cele puse la dispozitie.
9.4.6. Valoarea RESET

Folosirea valorii RESET pentru atributul TYPE determina afisarea unui buton care are functia de a
sterge datele din elementele formularului si aducerea lor la valorile initiale.

<INPUT TYPE="RESET" VALUE="valoare">

9.4.7. Valoarea SUBMIT

SUBMIT afiseaza un buton cu functia predefinita de a trimite datele din formular la serverul web
pentru a fi procesate.

<INPUT TYPE="SUBMIT" VALUE="valoare">

Se poate folosi atributul VALUE pentru a redenumi butonul (stipuleaza textul ce apare pe buton
altul decat cel implicit Submit Query).

9.4.8. Valoarea IMAGE

Valoarea IMAGE a atributului type prezinta o singura diferenta fata de SUBMIT: inlocuieste
butonul cu o imagine specificata. Altfel, indeplineste aceeasi functie. Declararea se face astfel:

<INPUT TYPE="IMAGE" SRC="nume_fisier_imagine">

9.4.9. Valoarea BUTTON

Daca butoanele definite prin SUBMIT si RESET au actiuni predefinite, butoanele definite prin
BUTTON indeplinesc functii specificate de utilizator printr-un script. Declararea unui buton se face
in felul urmator:

<INPUT TYPE=BUTTON NAME=nume VALUE=valoare onClik=script>

unde name specifica numele conrolului, value este textul care afisat pe buton, iar la evenimentul
onClick precizeaza scriptul care se ruleaza la apasarea butonului.

9.4.10. Valoarea HIDDEN

Acest tip de element INPUT inhiba introducerea unei valori, fiind in general folosit pentru a
transmite la serverul web siruri de caractere invizibile utilizatorului.



<INPUT TYPE=hidden NAME=nume VALUE=valoare>

Are ca efect trimiterea unor perechi nume/valoare impreuna cu restul informatiei din formular.

9.5. Elementul BUTTON

Crearea butoanelor in formulare se realizeaza in doua moduri:

prin precizarea valorilor submit, reset sau button in atributul type din elementul INPUT
prin folosirea elementului BUTTON.

Ele au acelasi rol, singura diferenta este sintaxa care in cazul elementului BUTOON are forma:

<BUTTON NAME=nume VALUE=valoare TYPE=button|submit|reset DISABLED
TABINDEX=valoare ONFOCUS=script ONBLUR=script>text</BUTTON>

Cele trei valori ale atributului type au ca efect:

submit: trimite datele din formular la serverul web
reset: reseteaza datele din controalele formularului
button: creaza un buton a carui actiune este definita printr-un script

9.6. Elementul LABEL

LABEL este o eticheta noua in HTML care specifica textul care eticheteaza un control. Spre
deosebire de textul normal, eticheta si controlul asociat impart aceeasi focalizare.

<LABEL FOR=nume_control DISABLED ACCESSKEY=cheie
ONFOCUS=script ONBLUR=script>
...
</LABEL>

Etichetele se asociaza controalelor prin doua metode:

implicita: elementul asociat este continut in LABEL
explicit: eticheta este legata de control prin specificarea id-ului acestuia in atributul FOR

9.7. Elementul FIELDSET

FIELDSET este o eticheta noua in HTML care creaza o caseta in jurul unui grupa de controale.
Impreuna cu FIELDSET se foloseste elementul LEGEND prin care se poate preciza o eticheta (un
titlu) pentru setul de campuri. Definirea se face astfel:

<FIELDSET>
<LEGEND ALIGN=top|bottom|right|left>
... definire campuri ...


</LEGEND>
</FIELDSET>

Ambele elemente necesita si eticheta de sfarsit, ia alinierea se face in raport cu setul de campuri,
nu cu pagina.

9.8. Atribute comune

Exista o serie de atribute care sunt comune elementelor ce intra in componenta formularelor.
Printre acestea se numara: disabled, tabindex si accesskey.

9.8.1. Dezactivarea

Atributul DISABLED permite dezactivarea unui element. Daca elementul este dezactivat, atunci
continutul sau este imposibil de folosit, fiind scos si din ordinea de tabulare (perechile
nume/valoare nu sunt incluse in datele transmise serverului web). In cazul in care elementul
dezactivat este un buton, starea de dezactivare poate fi schimbata doar prin intermediul unui
script.

9.8.2. Navigarea

Atributul TABINDEX este folosit pentru navigarea intre elementele unui formular cu ajutorul tastei
TAB. Daca atributul nu este specificat, atunci ordinea de parcurgere este ordinea in care apar
elementele in cadrul formularului.

Pentru a stabili ordinea de navigare, atributului i se atribuie valori intregi, astfel parcurgerea se
va face in ordinea crescatoare a valorilor. Nu este necesar ca aceste valori sa fie consecutive, din
contra este bine sa se lase valori libere pentru cazul in care vor fi introduse controale noi ulterior.

Pentru a inlatura un element din ordinea de navigare, fara a-l dezactiva, trebuie ca valoarea
atributului tabindex sa fie negativa.

9.8.3. Taste de acces

Pentru accesul direct la un element din formular, acestuia se atribuie un hot-key format prin
combinatia ALT+tasta_asociata. Folosind atributul ACCESSKEY se stabileste o tasta de acces la un
element. Este frecvent folosita pentru selectarea optiunilor din meniuri, dar si in multe alte
scopuri.

Exemplul 9.1.

<HTML>
<HEAD>
<TITLE>Exemplu de document HTML care contine un formular de guestbook</TITLE>
</HEAD>
<BODY>
<P>Introduceti datele personale si expediati-le</P>
<FORM METHOD="POST" ACTION="mailto:webmaster@iim.ro">
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="100%">
<TR>
<TD WIDTH="15%">Nume</TD>
<TD WIDTH="85%"><INPUT TYPE="text" NAME="Nume" SIZE="20"></TD>


</TR>
<TR>
<TD WIDTH="15%">Prenume</TD>
<TD WIDTH="85%"><INPUT TYPE="text" NAME="Prenume" SIZE="20"></TD>
</TR>
<TR>
<TD WIDTH="15%">Varsta</TD>
<TD WIDTH="85%"><SELECT SIZE="1" NAME="Varsta">
<OPTION SELECTED>18-23</OPTION>
<OPTION>24-35</OPTION>
<OPTION>36-50</OPTION>
</SELECT></TD>
</TR>
<TR>
<TD WIDTH="15%">Sex</TD>
<TD WIDTH="85%"><INPUT TYPE="radio" VALUE="M" CHECKED NAME="Sex">m
<INPUT TYPE="radio" NAME="Sex" VALUE="F">f</TD>
</TR>
<TR>
<TD WIDTH="15%">E-mail</TD>
<TD WIDTH="85%"><INPUT TYPE="text" NAME="Mail" SIZE="40"></TD>
</TR>
<TR>
<TD WIDTH="15%">Comentarii</TD>
<TD WIDTH="85%"><textarea rows="4" NAME="Coment" cols="40"></textarea></TD>
</TR>
</TABLE>
<p><INPUT TYPE="submit" VALUE="Trimite" NAME="Trimite">
<INPUT TYPE="reset" VALUE="Renunta" NAME="Renunta"></p>
</FORM>
</BODY>
</HTML>

Suport Curs HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Suport Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

INSTITUTUL MULTIMEDIA ROMNO ELVETIAN

S-ar putea să vă placă și