LIMBAJUL HTML

Generaliti

Unul dintre cei mai utilizai termeni astzi este Internetul. O definiie a acestuia a fost dat

de abia n 1995 de ctre Federal Networking Council ca fiind:

- Un sistem informaional care utilizeaz n mod unitar acelai spaiu de adrese bazat pe

IP sau pe viitoarele sale extensii;

- Este capabil s asigure comunicarea prin suita de protocoale TCP/IP sau prin viitoarele

sale extensii;

- Ofer acces privat la serviciile de comunicaii de nivel nalt.

Exist mai multe metode de acces la informaia stocat pe un calculator prin intermediul

reelei de internet:

- FTP (File Transfer Protocol) - serviciul pentru transfer fiiere;

- Telnet - serviciul pentru acces la distan;

- Electronic Mail - serviciul de mesagerie electronic;

- News - serviciul de tiri;

- World Wide Web - alt metod de acces la informaia stocat pe un calculator aflat

oriunde n lume.

Despre limbajul HTML

Ce este HTML ?

Unul din primele elemente, fundamentale de altfel, ale WWW (World Wide Web) este

HTML (HyperText Markup Language), standard ce descrie formatul primar n care documentele

sunt distribuite i vzute pe Web.

Multe din trsturile lui, cum ar fi independena fa de platform, structurarea formatrii

i legturile hipertext, fac din el un foarte bun format pentru documentele Internet si Web. Primele

specificaii de baz ale Web-ului au fost HTML, HTTP si URL.

HTML a fost dezvoltat iniial de Tim Berners-Lee la CERN in 1989. HTML este un limbaj

bazat pe SGML (Standard Generalized Markup Language), o aa-numit aplicaie a acestuia.

SGML este un standard internaional (ISO-8879) aprobat n 1986. HTML a fost iniial vzut ca o

posibilitate pentru fizicienii care utilizeaz computere diferite s schimbe ntre ei informaii prin

mijlocirea Internetului.

Erau prin urmare necesare cteva condiii eseniale: independena de platform, posibiliti

hipertext i structurarea documentelor. Independena de platform semnific faptul c un document

poate fi afiat n mod asemntor (sau aproape identic) de computere diferite (deci cu font, grafic

i culori la fel), lucru vital pentru o audien numeroas i extrem de variat.

Hipertext se traduce prin faptul c orice cuvnt, fraz, imagine sau element al

documentului vzut de un utilizator (client) poate face referin la un alt document sau chiar la

paragrafe din interiorul aceluiai document, ceea ce uureaz mult navigarea ntre prile

componente ale unui document sau ntre multiple documente. Structurarea riguroas a

documentelor permite convertirea acestora dintr-un format n altul precum i interogarea unor baze

de date nglobnd aceste documente.

Limbajul HTML d proiectanilor de pagini web posibilitatea:

s publice documente cu headere, texte, tabele, liste, fotografii, etc...

s regseasc on-line informaii prin intermediul hiperlink-urilor accesate printr-un

simplu click de mouse

s proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la distan,

pentru cutri de informaii sau pentru activitii specifice comerului

s includ foi de calcul tabelar, clipuri video, sunete i alte aplicaii direct n

documente

Elementul esenial diferit adus de versiunea 4.0 i mai ales 4.01 fa de versiunea 3.2 este

posibilitatea separrii structurii unui document de prezentarea lui prin introducerea stilurilor de

documente (style sheet).

Utiliznd limbajul HTML pentru structurarea unui document i style sheet-urile pentru a

stiliza prezentarea acestuia, proiectanii pot obine mult mai uor independena de periferic/

computer/ platform hard-soft, lucru care a fcut HTML-ul att de popular.

Un document cu o structur complex poate fi prezentat n diferite moduri pe medii

diferite, permind documentului nsui s se adapteze mai uor noilor tehnologii.

n plus, separarea coninutului de partea de prezentare permite modificarea nfirii chiar

a unui ntreg site doar prin modificarea unui style-sheet (a unui document care descrie stilul).

Experiena a demonstrat c o astfel de abordare poate reduce dramatic costurile de

deservire a unui spectru larg de platforme i probleme, facilitnd i o ntreinere ulterioar i

modificri mult mai uoare.

3

Proiectare Site i Web Design - Standardul HTML

Fundamente HTML

Orice document HTML ncepe cu notaia i se termin cu notaia .

Astfel de perechi de marcaje sau etichete (acolo unde sunt perechi) se numesc n literatura

de specialitate TAG-uri.

Prin convenie, toate marcajele HTML ncep cu o parantez unghiulara deschis "". Marcajele dintre aceste paranteze transmit comenzi

ctre browser pentru a afia pagina ntr-un anumit mod.

Unele blocuri prezint delimitator de sfrit de bloc, n timp ce pentru alte blocuri acest

delimitator este opional sau chiar interzis.

ntre cele dou marcaje si vom introduce dou seciuni:

- seciunea de antet: ...

- corpul documentului: ...

Blocul ... cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce

va fi afiat n fereastra browser-ului.

Un marcaj poate fi scris att cu litere mici, ct i cu litere mari. De exemplu =

= .

Caracterele "spaiu" si "CR/LF" ce apar ntre tag-uri sunt ignorate de ctre browser.

Un prim document HTML ar fi ceva de genul acesta:

Titlul unei pagini se obine insernd n seciunea ... urmtoarea linie:Aceasta este titlul primei mele pagini de Web

n plus, n seciunea ... putem scrie texte ct dorim. Dac nu ntlnim nici

un marcaj "", atunci interpretorul HTML le va lua ca texte simple i le va afia pe ecran.

S vedem o noua versiune a paginii noastre:

Aceasta este prima mea pagina de Web

4

Bine ati venit in pagina mea de Web!

Coninutul blocului ... va aprea n bara de titlu a ferestrei browser-ului. Daca

acest bloc lipsete ntr-o pagin HTML, atunci n bara de titlu a ferestrei browser-ului va aprea

numele fiierului.

Trecerea pe o linie nou - se face n HTML cu o comanda explicit, care trebuie s apar n

codul surs html. Aceast comand este marcajul (de la "line break" - ntrerupere de linie).

Folosind aceleai operaii ca mai sus, vizualizai noua pagina.

Vei vedea textul ce apare n fereastra browserului. n plus, pagina dvs. va avea un titlu

nou, cel introdus de dvs.. Ex.:

titlul paginii

Bine ati venit in pagina mea de Web!

O culoare poate fi precizat n dou moduri:

1. Printr-un nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black,

fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

2. Prin construcia "#RRGGBB" unde R(red), G(green), sau B(blue) sunt cifre

hexazecimale i pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot

defini astfel 65536 de culori.

Culoarea fundalului unei pagini se precizeaz prin intermediul unui atribut al tagului

BODY, mai exact cu atributul "bgcolor" din cadrul etichetei . De exemplu: .

Culoarea textului se seteaz prin intermediul atributului "text" al tagului BODY, dup

sintaxa . n urmtorul exemplu textul are culoarea roie:

culoare textului

5

Un text de culoare rosie.

Textul afiat este caracterizat de urmtoarele atribute: Mrime (font size) - aici implicit,

Culoare (font color) - aici implicit, Font (font family) - aici implicit.

Poziionarea coninutului paginii Web fa de marginile ferestrei browserului se poate face

cu ajutorul a dou atribute ale etichetei :

1. "Leftmargin" (stabilete distana dintre marginea stng a ferestrei browserului i

marginea stng a coninutului paginii);

2. "Topmargin" (stabilete distana dintre marginea de sus a ferestrei browserului i

marginea de sus a coninutului paginii);

Configurarea textului si stabilirea marginii

Textul are atribute implicite.

Textul este scris cu fontul "Arial", culoare albastru i mrime 6.

Pentru ca un bloc de text s apar n pagin evideniat (cu caractere aldine), trebuie inclus

ntre tagurile ... (b vine de la "bold").

Pentru ca un text s fie scris cu caractere cursive acesta trebuie inclus ntr-un bloc

delimitat de tagurile ... (i vine de la "italic").

Pentru a insera secvene de text ca indice (sub-script) sau ca exponent (super-script), aceste

fragmente trebuie delimitate de tagurile ..., respectiv ....

Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele ... (u vine de

la "underline").

Fonturi in HTML

Un font este un text caracterizat de urmtoarele atribute:

1. Culoare (stabilit prin atributul "color");

2. Tipul sau stilul (stabilit prin atributul "face");

3. Mrimea (definit prin atributul "size");

4. Mrimea n puncte tipografice (stabilit prin atributul "point-size");

5. Grosime (definit prin atributul "weight").

6

Toate aceste atribute aparin etichetei , care permite inserarea de blocuri de texte

personalizate.

O culoare poate fi precizat n dou moduri:

1. printr-un nume de culoare.

2. printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de

constant se formeaz astfel: #rrggbb, unde r, g i b sunt cifre hexazecimale.

Pentru a scrie un fragment de text cu caractere de o anumit culoare, se ncadreaz acest

fragment ntre marcajele de font, avnd stabilit atributul color la valoarea dorita.

Pentru a scrie un text ntr-o pagin pot fi folosite mai multe fonturi (stiluri de caractere).

Exista cinci familii generice de fonturi care sunt de regul disponibile pe toate calculatoarele

utilizatorilor: "serif", "sans serif", "cursive", "monospace" si "fantasy".

Tipul de font necesar poate fi stabilit prin atributul "face" al etichetei. Pot fi introduse mai

multe fonturi separate prin virgul. In acest caz browserul va utiliza primul font pe care l

cunoate.

Pentru a stabili mrimea unui font se utilizeaz atributul size al tag-ului. Valorile acestui

atribut pot fi:

1. 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font i respectiv 7 pentru cel mai mare);

2. +1, +2, etc. pentru a mri dimensiunea fontului cu 1, 2, etc. fa de valoarea curent;

3. -1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fa de valoarea curent.

Lucrul cu Imagini

Imaginile sunt stocate n fiiere cu diverse formate. Formatele acceptate de browsere pentru

fiierele imagine sunt:

1. GIF (Graphics Interchange Format) cu extensia .gif;

2. JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;

3. XPM (X PixMap) cu extensia .xmp;

4. XBM (X BitMap) cu extensia .xbm;

5. BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);

6. TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 culori posibile) i JPEG

(24 bii pentru o culoare, 16777216 de culori posibile).

URL ("Uniform Resource Locator" = identificator unic al resursei) este un standard folosit

n identificarea unica a unei resurse n Internet. Toate imaginile cu care vom lucra vor avea adresa

URL exprimata n funcie de directorul ce conine documentul HTML care face referire la imagine.

7

Pentru a insera o imagine ntr-o pagin, se utilizeaz eticheta (de la "image"=

imagine).

Pentru a putea identifica imaginea care va fi inserat se utilizeaz un atribut al etichetei

, i anume "src" (de la "source"= sursa).

Dac imaginea se afla n acelai director cu fiierul HTML care face referire la imagine,

atunci adresa URL a imaginii este format numai din numele imaginii, inclusiv extensia.

Dac imaginea se afla ntr-un subdirector al directorului paginii HTML din care este apelata, s

spunem "images", atunci aceasta este apelata cu URL-ul: "/images/imagine1.jpg". n schimb, dac

fiierul imagine este situat ntr-un director "images" dintr-un super director al directorului paginii

HTML apelante, referirea se face cu URL-ul: "../images/imagine1.jpg".

Dac dorii s adugai un chenar n jurul imaginii, folosii atributul "border" al etichetei

. Valorile acestui atribut sunt numere ntregi pozitive i reprezint grosimea bordurii.

O imagine are anumite dimensiuni pe orizontal i vertical, stabilite n momentul crerii

ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate n momentul afirii ei n browser, n

cadrul paginii web. Dimensiunile prestabilite ale unei imagini pot fi modificate la afiarea n

browser prin intermediul atributelor "width" si "height" setate de proiectant n codul HTML al

paginii la valorile dorite. Spre exemplu:

Imagine cu chenar si marit

O imagine cu chenar si de 200 pixeli X 15 %

Text dupa imagine.

Alinierea unei imagini se poate face prin intermediul atributului "align" care poate lua

urmtoarele valori:

1. "left" - aliniere la stnga; celelalte componente sunt dispuse pe partea dreapta;

2. "right" - aliniere la dreapta; celelalte componente sunt dispuse pe partea stnga;

3. "top" - aliniere deasupra; partea de sus a imaginii se aliniaz cu partea de sus a textului

ce precede imaginea;

4. "middle " - aliniere la mijloc; mijlocul imaginii se aliniaz cu linia de baz a textului ce

precede imaginea.

5. "bottom" - aliniere la baz; partea de jos a imaginii se aliniaz cu linia de baza a textului.

8

Atributele "hspace" si "vspace" precizeaz distana n pixeli pe orizontal, respectiv pe

vertical, dintre imagine i restul elementelor din pagin.

Atributul "alt" admite ca valoare un text care va fi afiat n locul imaginii, n funcie de

setrile browserului utilizatorului:

Alinierea textului

Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.

Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text

inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.

Text dupa imagine.Text dupa imagine.Text

dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text

dupa imagine.Text dupa imagine.

O imagine poate fi utilizat pe post de fundal al unei pagini Web. n acest scop se folosete

atributul "background" al etichetei , avnd ca valoare adresa URL a imaginii.

Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran.

De exemplu:

Pagina cu imagine de fond

1234 5678 9

O legtur (link) introduce n pagin Web o zona activ. Efectund click cu butonul mouse-

ului pe aceast zon, n browser se va ncrca o alt pagin.

Pentru a utiliza imaginea "legatura.jpg" drept legtur ctre pagina index.html utilizm

sintaxa:

n mod prestabilit, imaginea utilizat pe post de zona activ este nconjurat de un chenar

avnd culoarea unei legturi. Dac stabilim pentru atributul "border" al etichetei la 0, acest

chenar dispare. Exemplu:

9

Imagini folosite ca legaturi

Blocuri de titlu

ntr-un text, titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor ,

, , , , . Toate aceste etichete se refer la un bloc de text i trebuie nsoite

de o etichet de ncheiere similar.

Aceste etichete accept atributul "align" pentru alinierea titlului blocului de text la stnga

(n mod prestabilit), la centru i la dreapta. Tag-ul "H1" permite scrierea unui titlu cu caractere mai

mari i aldine, pe cnd folosete caracterele cele mai mici.

Exemplu:

Blocuri de titlu

Titlu de marime 1 aliniat in centru

Titlu de marime 2 aliniat la dreapta.

Titlu de marime 4 aliniat la stanga (implicit)

ntr-o pagin Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei

. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei :

1. "align" ce permite alinierea orizontal a liniei. Valorile posibile sunt "left", "center" i

"right";

2. "width" permite alegerea lungimii liniei;

3. "size" permite alegerea grosimii liniei;

4. "noshade" cnd este prezent definete o linie fr umbr;

5. "color" permite definirea culorii liniei.

Exemplu:

Linii orizontale

11

Tipuri de linii orizontale O linie implicita, aliniere stanga, latime 100%, grosime 2 cu

umbra.

Urmeaza o linie aliniata in centru, de latime 50%, grosime 5 pixeli, fara umbra.

Urmeaza o linie aliniata la dreapta, de latime 150 de pixeli,

grosime 12 pixeli, de culoare rosie.

Blocul CENTER

Blocul introdus ntre etichetele ... aliniaz centrat toate elementele pe

care le conine.

Exemplu:

Linii orizontale

Blocuri DIV

Modalitatea cea mai eficient de delimitare i de formatore a unui bloc de text este

folosirea delimitatorilor ....

Un parametru foarte util pentru stabilirea caracteristicilor unui bloc (diviziune) este

"align" (aliniere). Valorile posibile ale acestui parametru sunt:

1. "left" (aliniere la stnga);

2. "center" (aliniere central);

3. "right" (aliniere la dreapt).

Un bloc ... poate include alte subblocuri. n acest caz, alinierea precizat de

atributul align al blocului are efect asupra tuturor subblocurilor incluse n blocul .

Un bloc ... admite atributul "nowrap" care interzice ntreruperea rndurilor de

ctre browser la afiare.

Exemplu de utilizare a tagului DIV:

12

Blocul DIV

Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.

O singura linie.O singura linie.O singura linie.O singura linie.

O singura linie.O singura linie.O singura linie.O singura linie.

O singura linie.O singura linie.O singura linie.O singura linie.

Bloc aliniat pe centru.Bloc aliniat pe centru.

Bloc aliniat pe centru.Bloc aliniat pe centru.

Bloc aliniat pe centru.Bloc aliniat pe centru.

Legturi n HTML

Legturile (link-urile) reprezint partea cea mai important a unei pagini Web. Ele

transform un text obinuit n hipertext sau hiperlegtur, care permite trecerea rapid de la o

informaie aflat pe un anumit server la alt informaie memorat pe un alt server aflat oriunde n

lume.

Legturile sunt zone active ntr-o pagin Web, adic zone de pe ecran sensibile la apsarea

butonului stng al mouse-ului.

Legturi ntre pagini aflate n acelai director:

O legtur de pe o pagin ctre o alta aflat n acelai director se formeaz cu ajutorul

etichetei (de la "anchor"= ancora).

Pentru a preciza pagina indicat de legtur se utilizeaz un atribut al etichetei numit

"href", care ia ca valoare numele fiierului HTML aflat n acelai director.

Zona activ care devine sensibil la apsarea butonului stng al mouse-ului este format

din textul cuprins ntre etichetele si . Prezena etichetetei de sfrit este obligatorie.

Exemplu:

Comutarea intre doua pagini

13

Pagina 1

Link catre pagina 2

O legtura ctre un site particular:

n exemplul urmtor se utilizeaz adresa URL www.google.com care ncarc pagina de

start din site-ul firmei Google:

Link catre site-ul firmei Google

Link catre site-ul firmei Google

GOOGLE

Legturi ctre fiiere oarecare:

O pagin Web poate conine legturi ctre orice tip de fiiere aflate pe orice servere din

Internet. Pentru aceasta se utilizeaz eticheta avnd valoarea atributului "href" egal cu adresa

URL a fiierului destinaie.

Atunci cnd se efectueaz clic pe legtura din exemplul urmtor, browserul deschide o

caseta de dialog ntitulat "File download" care permite:

1. s salvai fiierul pe discul local;

2. s lansai n execuie aplicaia capabil s interpreteze corect fiierele de tipul respectiv.

Liste in HTML

Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de

definiii, referine sau indexuri.

Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic,

urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi

gestionat printr-o list de definiii care este inclus ntr-o pereche de marcaje de tip list de

definiii: ... (de la "definition list" = list de definiii).

14

Observaii:

- Un termen al listei este marcat de eticheta (de la "definition term"= termen definit);

- Definiia unui termen este iniiat de eticheta (de la "definition description"=

descrierea definiiei);

- Definiia unui termen ncepe pe o linie nou i este indentat;

Exemplu:

listex_1

O lista de definitii

Glosar de termeni de World Wide Web

hypertext

- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt

punct din document sau catre un alt document

date

Liste neordonate

O list neordonat este un bloc de text delimitat de etichetele ... ("ul" vine de la

"unordered list"= list neordonat). Fiecare element al listei este iniiat de eticheta (list item).

Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou.

Exemplu:

listex_2

O lista neordonata

Glosar de termeni World Wide Web

Culori uzuale disponibile prin nume

Black White Red Green Blue Yellow Purple Aqua

Tag-urile si pot avea un atribut " type" care stabilete caracterul afiat n faa

fiecrui element al listei. Valorile posibile ale acestui atribut sunt:

1. "circle" (cerc);

2. "disc" (disc plin) - valoarea implicit;

3. "square" (ptrat);

Liste ordonate

15

O lista ordonat de elemente este un bloc de text delimitat de etichetele corespondente

... ("ol" vine de la "ordered list"= list ordonata).

Fiecare element al listei este iniiat de eticheta (list item). Lista va fi indentat fa de

restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Exemplu:

listex_4

O lista ordonata

Culori uzuale disponibile prin nume

Black White Red Green Blue Yellow Purple Aqua

Tag-urile si pot avea un atribut " type" care stabilete tipul de caractere utilizate

pentru ordonarea listei. Valorile posibile sunt:

1. "A" pentru ordonare de tipul A, B, C, D, etc. (litere mari);

2. "a" pentru ordonare de tipul a, b, c, d, etc. (litere mici);

3. "I" pentru ordonare de tipul I, II, III, IV, etc. (cifre romane mari);

4. "i" pentru ordonare de tipul i, ii, iii, iv, etc. (cifre romane mici);

5. "1" pentru ordonare de tipul 1, 2, 3, 4, etc. (cifre arabe - opiune prestabilit);

Tag-ul poate avea un atribut start care stabilete valoarea iniial a secvenei de ordonare.

Valoarea acestui atribut trebuie sa fie un numr ntreg pozitiv.

Urmtorul exemplu este o lista ordonat cu litere mari, ncepnd cu valoarea C.

listex_6

O lista ordonata cu litere mari, incepand de la valoarea C

Culori uzuale disponibile prin nume

Red Green Blue Yellow Purple Aqua

Listele ordonate pot fi imbricate ntre ele sau cu liste neordonate, ca n exemplul urmtor:

listex_8

O lista ordonata de liste ordonate si neordonate

Un sistem informatic include:

16

Hardware:

placa de baza

procesor

memorie

harddisk

Software:

Linux

Windows

OS/2

Unix

Software de aplicatie:

VisualC++

Java

SQL

CorelDraw

Tabele in HTML

Tabelele ne permit s crem o reea dreptunghiular de zone, fiecare zon avnd propriile

opiuni pentru culoarea fondului, culoarea textului, alinierea textului, etc.

Pentru a insera un tabel se folosesc etichetele .... Un tabel este format

din rnduri. Pentru a insera un rnd ntr-un tabel se folosesc etichetele ... (de la "table

row" = rnd de tabel ). Un rnd este format din mai multe celule ce conin date. O celul se

introduce cu etichetele ....

n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se

utilizeaz un atribut al etichetei numit "border". Acest atribut poate primi ca valoare orice numr

ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului. Dac atributul "border"

nu este urmat de o valoare, atunci tabelul va avea o grosime prestabilit egal cu 1 pixel. O valoare

egal cu 0 a grosimii semnific absena chenarului. Cnd atributul "border" are o valoare nenul,

chenarul unui tabel are un aspect tridimensional.

17

Alinierea tabelului

Pentru a alinia un tabel ntr-o pagin Web se utilizeaz atributul "align" al etichetei

, cu urmtoarele valori posibile: "left" (valoarea prestabilit), "center" si "right ".

Alinierea este important pentru textul ce nconjoar tabelul. Astfel:

- dac tabelul este aliniat stnga, atunci textul care urmeaz dup punctul de inserare al tabelului va

fi dispus n partea dreapt a tabelului.

- dac tabelul este aliniat dreapta, atunci textul care urmeaz dup punctul de inserare al tabelului

va fi dispus n partea stnga a tabelului.

- dac tabelul este aliniat pe centru, atunci textul care urmeaz dup punctul de inserare al tabelului

va fi afiat pe toat limea paginii, imediat sub tabel.

Culoarea de fond se stabilete cu ajutorul atributului "bgcolor", care poate fi atasat

ntregului tabel prin specificarea in cadrul etichetei sau numai celulelor de date prin

specificarea sa in etichetele de celula (). Valorile pe care le poate primi atributul "bgcolor"

sunt cele cunoscute pentru o culoare.

Dimensionarea celulei unui tabel

Distana dintre dou celule vecine se definete cu ajutorul atributului "cellspacing" al

etichetei . Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint

distana n pixeli dintre dou celule vecine. Valoarea prestabilit a atributului "cellspacing" este 2.

Distana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului

"cellpadding" al etichetei . Valorile acestui atribut pot fi numere ntregi pozitive i

reprezint distana n pixeli dintre bordurile celulelor i coninutul lor. Valoarea prestabilit a

atributului "cellpadding" este 1.

Dimensionarea unui tabel

Dimensiunile unui tabel - limea i nlimea - pot fi stabilite exact prin intermediul a dou

atribute - "width" si "height" - ale etichetei . Valorile acestor atribute pot fi:

1. numere ntregi pozitive reprezentnd limea respectiv nlimea n pixeli a tabelului;

2. numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd procentul din limea i

respectiv nlimea total a paginii.

Alinierea coninutului unei celule

18

Alinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului "align" care

poate lua valorile:

1. "left" (la stnga);

1. "center" (centrat) - valoarea prestabilit;

3. "right" (la dreapta);

4. "char" (alinierea se face fa de un caracter).

Alinierea pe vertical a coninutului unei celule se face cu ajutorul atributului "valign" care

poate lua valorile:

1. "baseline" (la baz);

2. "bottom" (jos);

3. "middle" (la mijloc, valoarea prestabilit);

4. "top" (sus).

Exemplu de tabel reunind toate elementele descrise pn acum:

Tabel

data data data

data data data

data data data

data data data

data data data

data data data

data data data

data data data

data data data

Tabele cu forme oarecare

19

Un tabel trebuie privit ca o reea dreptunghiular de celule. Cu ajutorul a dou atribute ale

etichetelor si , o celul se poate extinde peste celule vecine. Astfel:

1. extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului "colspan", a

crui valoare determin numrul de celule care se unific.

2. extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului "rowspan", a crui

valoare determin numrul de celule care se unific.

Sunt posibile extinderi simultane ale unei celule pe orizontal i pe vertical. n acest caz,

n etichete vor fi prezente ambele atribute "colspan" si "rowspan".

Exemplu:

Tabel

data data data

data data data

data data data

data data data

data data data

data data data

Formulare in HTML

Un formular este un ansamblu de zone active alctuit din butoane, casete de selecie,

cmpuri de editare, etc. Formularele asigur construirea unor pagini Web care s permit

utilizatorilor s introduc efectiv informaii i s le transmit serverului. Formularele pot varia de

la o simpl caseta de text, pentru introducerea unui sir de caractere pe post de cheie de cutare -

element caracteristic tuturor motoarelor de cutare din Web, pn la o structur complex, cu

multiple seciuni, care ofer faciliti puternice de transmisie a datelor. O sesiune cu o pagina web

ce conine un formular cuprinde urmtoarele etape:

1. Utilizatorul completeaz formularul i l expediaz unui server.

20

2. O aplicaie dedicat de pe server analizeaz formularul completat i (daca este necesar)

stocheaz datele ntr-o baz de date.

3. Daca este necesar serverul expediaz un rspuns utilizatorului.

Un formular este definit ntr-un bloc delimitat de etichetele corespondente i

.

Exist dou atribute eseniale ale tag-ului :

1. Atributul "Action" care precizeaz ce se va ntmpla cu datele formularului odat ce acestea

ajung la destinaie. De regul, valoarea atributului "Action" este adresa URL a unui script aflat pe

un server care primete datele formularului, efectueaz o prelucrare a lor i expediaz ctre

utilizator un rspuns. Exemplu:

.

Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell, Java.

2. Atributul "Method" precizeaz metoda utilizat de browser pentru expedierea datelor

formularului. Sunt posibile urmtoarele valori:

2.1. "Get" (valoarea implicita). n acest caz, datele din formular sunt adugate la adresa URL

precizata de atributul "Action". Atenie ns:

- nu sunt permise cantiti mari de date (maxim 1 Kb)

- ntre adresa URL i date este inserat un "?"

- datele sunt vizibile n bara de adres a browserului.

Datele sunt adugate conform sintaxei: "nume_camp = valoare_camp". ntre diferite seturi de date

este introdus un "&". Exemplu:

http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2

2.2. "Post". n acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (de

ordinul MB).

Pentru ca un formular s fie funcional trebuie precizat ce se va ntmpla cu el dup

completarea i expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia

prin pota electronic (e-mail). Pentru aceasta se folosete un atribut al etichetei i anume

"Action" care primete ca valoare "mailto:" concatenat cu o adresa valid de e-mail ctre care se va

expedia formularul completat.

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei . Pentru a

preciza tipul elementului se folosete atributul " type" al etichetei . Pentru un cmp de

editare, acest atribut primete valoarea "text". Alte atribute pentru un element sunt:

1. Atributul "name" permite ataarea unui nume fiecrui element al formularului.

21

2. Atributul "value" permite atribuirea unei valori iniiale unui element al formularului.

Un buton de expediere al unui formular se introduce cu ajutorul etichetei , n care

atributul " type" este configurat la valoarea "submit". Acest element poate primi un nume prin

atributul "name". Pe buton apare scris implicit "Submit Query" sau explicit valoarea atributului

"value", daca aceasta valoare a fost stabilit. Exemplu:

formEx_1

Un formular cu un camp de editare si un buton de expediere

Numele:

Pentru elementul de tipul cmp de editare (type= "text"), alte dou atribute pot fi

utile:

1. Atributul "size" ce specific limea cmpului de editare. Dac textul introdus n cmp de

utilizator depete aceasta lime, atunci se executa automat o derulare a coninutului acestui

cmp;

2. Atributul "maxlength" ce specific numrul maxim de caractere pe care le poate primi un cmp

de editare; caracterele tastate peste numrul maxim sunt ignorate.

Butoanele radio permit alegerea, la un moment dat, a unei singure variante de rspuns din

mai multe posibile. Butoanele radio se introduc prin eticheta cu atributul " type" avnd

valoarea "radio". Exemplu:

formex_4

Un formular cu butoane radio

Alegeti sexul:

Femeiesc:

La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", n

funcie de alegerea fcut de utilizator.

22

O caset de validare (checkbox) permite selectarea sau deselectarea unei opiuni. Pentru

inserarea unei casete de validare se utilizeaz eticheta cu atributul " type" configurat la

valoarea "checkbox". Observaii:

- fiecare caset poate avea un nume definit prin atributul "name".

- fiecare caset poate avea valoarea prestabilita "selectat" definit prin atributul "checked".

Exemplu:

formex_5

Un formular cu casete checkbox

Alegeti meniul:

Pizza

Nectar

Bere

Cafea

Un formular de selecie permite utilizatorului s aleag unul sau mai multe elemente dintr-o

list finit. Lista de selecie este inclus n formular cu ajutorul etichetelor corespondente

si . O list de selecie poate avea urmtoarele atribute:

1. Atributul "name", care ataeaz listei un nume (utilizat n perechile "name=value" expediate

serverului);

2. Atributul "size", care precizeaz (printr-un numr ntreg pozitiv, valoarea prestabilit fiind 1)

cte elemente din list sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin

acionarea barei de derulare ataate automat listei).

Elementele unei liste de selecie sunt incluse n list cu ajutorul etichetei . Dou

atribute ale etichetei option se dovedesc utile:

1. Atributul "value" ce primete ca valoare un text care va fi expediat server-ului n perechea

"name=value"; dac acest atribut lipsete, atunci ctre server va fi expediat textul ce urmeaz dup

;

2. Atributul "selected" (fr alte valori) ce permite selectarea prestabilit a unui element al listei.

Exemplu:

formex_7

Un formular cu o lista de selectie

23

Universitatea absolvita:

Universitatea din Cluj

Universitatea de Nord Baia Mare

Universitatea Technica din Timisoara

Universitatea Technica din Brasov

ntr-un formular, cmpurile de editare multilinie pot fi incluse cu ajutorul etichetei

. Eticheta are urmtoarele atribute:

1. Atributul "cols", care specific numrul de caractere afiate ntr-o linie;

2. Atributul "rows", care specific numrul de linii afiate simultan;

3. Atributul "name", care permite ataarea unui nume cmpului de editare multilinie;

4. Atributul "wrap", (de la "word wrap"= trecerea cuvintelor pe rndul urmtor), care determin

comportamentul cmpului de editare fa de sfritul de linie.

Acest atribut ("wrap") poate primi urmtoarele valori:

a) "off"; in acest caz:

- ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd dorete

utilizatorul;

- caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul;

b) "hard"; n acest caz:

- se produce ntreruperea cuvintelor la marginea dreapta a editorului;

- caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul;

c) "soft"; n acest caz:

- se produce ntreruperea cuvintelor la marginea dreapta a editorului;

- nu se include caracterul de sfrit de linie n textul transmis serverului odat cu formularul;

Cadre in HTML

Ferestrele sau (cadrele) ne permit s definim n fereastra browserului sub-ferestre n care s

putem ncadra documente noi HTML. Sub-ferestrele sunt definite ntr-un fiier HTML special, n

care blocul ... este nlocuit de blocul .... n interiorul

acestui bloc, fiecare cadru este introdus prin eticheta .

24

Un atribut obligatoriu al etichetei este "src", ce primete ca valoare adresa URL a

documentului HTML care va fi ncrcat n acel frame. Definirea cadrelor se face prin mprirea

ferestrei ecran (i a subferestrelor) n linii i coloane:

1. mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu ajutorul

atributului "cols" al etichetei ce descrie acea fereastr;

2. mprirea unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul atributului

"rows" al etichetei ce descrie acea fereastr;

3. valoare atributelor "cols" si "rows" este o list de elemente separate prin virgul, care descriu

modul n care se face mprirea. Elementele listei pot fi:

3.1. un numr ntreg de pixeli;

3.2. procente din dimensiunea ferestrei (numr ntre 1 i 99 terminat cu %);

3.3. n* care nseamn n pri din spaiul rmas;

Exemplu 1: "cols=200,*,50%,*" nseamn o mprire n 4 subferestre, dintre care prima are 200

pixeli lime, a treia ocupa jumtate din spaiul total disponibil iar a doua i a patra ocup n mod

egal restul de spaiu rmas disponibil.

Exemplu 2: "cols=200,1*,50%,2*" nseamn o mprire n 4 subferestre, dintre care prima are 200

pixeli lime, a treia ocupa jumtate din spaiul total disponibil iar a doua i a patra ocupa n mod

egal restul de spaiu rmas disponibil, care se mparte n trei pri egale, a doua fereastr ocupnd o

parte iar a patra ocupnd 2 pri.

Observaii:

- dac mai multe elemente din list sunt configurate cu *, atunci spaiul disponibil rmas pentru ele

se va mpri n mod egal.

- o subfereastra poate fi un singur cadru (folosind ) - n care se va ncrca un document

HTML - sau poate fi mprit la rndul ei la alte subfereste constituind cadre noi (folosind

).

Exemplu:

ferex_1

n exemplul urmtor este creat o pagina Web cu trei cadre mixte. Pentru a o crea se

procedeaz din aproape n aproape.

25

ferex_4

Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul "bordercolor". Acest

atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul

de culoare RGB. Atributul bordercolor poate fi ataat att etichetei pentru a stabili

culoarea tuturor chenarelor cadrelor incluse, ct i etichetei pentru a stabili culoarea

chenarului pentru un cadru individual.

Atributul "border" al etichetei permite configurarea limii chenarelor tuturor

cadrelor la un numr dorit de pixeli. Valoarea prestabilit a atributului "border" este de 5 pixeli. O

valoare de 0 pixeli va defini un cadru fr chenar.

Exemplu:

ferex_5

n mod prestabilit, chenarul afiat al unui cadru are aspect tridimensional. Afiarea

chenarului unui cadru poate fi dezactivat dac se utilizeaz atributul "frameborder" cu valoarea

"no". Acest atribut poate fi ataat att etichetei (dezactivarea fiind valabil pentru toate

cadrele incluse) ct i etichetei (dezactivarea fiind valabil numai pentru un singur cadru).

Atributul "scrolling" al etichetei este utilizat pentru a aduga unui cadru o bar de

derulare care permite navigarea n interiorul documentului afiat n interiorul cadrului. Valorile

posibile sunt:

1. "yes" - barele de derulare sunt adugate ntotdeauna;

2. "no" - barele de derulare nu sunt utilizabile;

26

3. "auto" - barele de derulare sunt vizibile atunci cnd este necesar

Exemplu:

ferex_6

Atributul "noresize" al etichetei (fr nici o valoare suplimentara) dac este

prezent, inhiba utilizatorului posibilitatea de a redimensiona cadrul cu ajutorul mouse-ului.

Atributele "marginheight" si "marginwidth" ale etichetei permit stabilirea distanei

n pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului.

Valori posibile: numr de pixeli, procent din limea, respectiv din nlimea cadrului;

Exist browsere care nu suporta cadre. Pentru aceasta se utilizeaz n interiorul blocului

eticheta . Daca programul de navigare tie s interpreteze cadre, va ignora

ce se gsete n aceasta poriune, iar dac nu, materialul cuprins n zona ...

va fi singurul care va fi neles i afiat. De precizat este faptul c ntre ...

se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

27

GeneralitiDespre limbajul HTMLCe este HTML ?

Proiectare Site i Web Design - Standardul HTMLFundamente HTML