Sunteți pe pagina 1din 14

Curs Programare WEB

Curs 1
Elemente de baza
Pentru inceput sa descoperim originea abrevierii HTML - Hypertext Markup
Language . Acest limbaj este folosit pentru a formata si preenta documente pe !eb .
HTML adauga tag-uri fisierelor A"#$$ astfel incat sa permita afisarea unei varietati de
fonturi % imagini sau sunete prin definirea unor elemente ca &eader % lista % paragrap&
si prin implementarea si utiliarea unor legaturi ' linkuri ( catre alte documente
publicate in internet .
Mai clar % limbajul HTML este limbajul pe care il inteleg aplicatiile de tip bro!ser
' ex) $nternet *xplorer % +etscape #ommunicator % ,pera % etc. ( folosite pentru a
naviga pe internet . -atorita acestui limbaj bro!ser-ul poate afisa ceea ce autorul
paginii !eb a dorit sa preinte .
*lementele de baa ale limbajului HTML sunt foarte simple si usor de retinut si apoi
de utiliat . cunoscand doar tag-urile de baa putem construi un intreg site fara
probleme .
TA/ 0 repreinta o comanda in cod HTML care indica modul in care va fi interpretata
informatia la care ea se refera .
TAG-uri DE BAZA
,rice pagina !eb standard trebuie sa contina 1 tag-uri de baa . Aceste tag-uri trebuie
sa apara in cadrul fiecarei pagini a unui !eb site .
Aceste tag-uri sunt preentate mai jos si ele trebuie sa apara exact in aceasta
cronologie in cadrul paginii !eb )
2HTML3
2H*A-3
2T$TL*3
24T$TL*3
24H*A-3
25,-63
245,-63
24HTML3
$nainte de a explica fiecare tag in parte mentione ca tag-urile trebuie scrise in codul
sursa exact in forma in care ele apar mai sus % intre semnele 23 . Aceste simboluri au
menirea de a transmite bro!ser-ului ca textul dintre ele trebuie recunoscut ca un tag 0
deci ca un cuvant c&eie al limbajului % o comanda care trebuie executata . Limbajul
HTML nu tine cont de litere mari sau mici in cadrul tag-ului % astfel incat 25,-63
sau 2body3 vor fi interpretate identic .
<HTML> 7 acest tag transmite bro!ser-ului ca documentul respectiv este de fapt un
document HTML % dand astfel indicatii asupra modului in care vor fi interpretate
diferite partitii ale fisierului A"#$$ .
<HEAD> 7 acest tag este in fapt tot un mesaj catre bro!ser % continand informatii
despre document 0 ca de ex. link-uri sau pagini care trebuie incarcate in prealabil .
<TITLE> 7 acest tag este folosit pentru a da o denumire paginii !eb create . acest
nume va apare in partea superioara a fereastrei bro!ser-ului identificand astfel pagina
respectiva .
<TITLE> 7 acest tag este de fapt inc&iderea celui precedent . transmite bro!ser-ului
ca textul ce trebuie considerat ca titlu al paginii s-a inc&eiat . Majoritatea tag-urilor
HTML folosesc tag-uri corespondente de inc&idere .
<HEAD> 7 tag-ul de inc&idere al tag-ului corespondent 2H*A-3
<B!D"> 7 acest tag semnaleaa desc&iderea sectiunii corespunatoare corpului
paginii !eb . Aici se vor introduce informatiile continute in pagina % textul % grafica si
elementele multimedia dorite .
<B!D"> 7 tag-ul de inc&idere care transmite bro!ser-ului ca nu se mai doreste
adaugarea de informatie in aceasta pagina .
<HTML> 7 acest tag inc&eie documentul HTML % semnaland bro!ser-ului ca nu
mai exista elemente care trebuie citite sau incarcate .
#u elementele preentate mai sus putem deja crea o pagina !eb 0 foarte simpla dar
perfect functionala 8
#odul urmator implementeaa o pagina !eb folosind doar tag-urile de baa )
2&tml3
2&ead3
2title3Pagina mea proprie24title3
24&ead3
2body3
Aceasta este o pagina de test . Acesta este un exemplu perfect pentru simplitatea
crearii unei pagini !eb 8
24body3
24&tml3
!B# $ -upa cum ati vaut tag-urile sunt folosite in general in perec&i complementare
. -aca vreti sa folositi taguri grupate fara a avea probleme atunci ele trebuie corect
grupate si nu incrucisate. Adica)
2Tag932Tag:324Tag9324Tag:3 - tag-uri incrucisate care pot genera erori.
2TA/932TA/:324TA/:324TA/93 - tag-uri grupate corect.
,data creata o prima pagina !eb functionala trebuie sa revenim la tag-uri pentru a
aprofunda capacitatile acestora .
$n cadrul sectiunii 25,-63 apar elementele de text si grafica ale paginii noastre .
Acum sa vedem ce altceva mai putem realia in aceasta sectiune .
;nul dintre elementele cele mai puternice si des utiliate care se intalnesc in cadrul
acestei sectiuni este controlul asupra culorilor % atat la nivel de text cat si de fond .
Putem configura culori diferite pentru text normal % link-uri % link-uri viitate % link-uri
active sau pentru fondul paginii noastre .
Pentru a specifica culoarea de fond tag-ul nostru se preinta astfel )
25ody bgcolor<=blue=3
#omanda anterioara face ca fondul paginii noastre sa devina albastru .
Pentru a specifica o anumita culoare ' ex. negru ( si pentru textul din cadrul paginii
folosim urmatoarea comanda )
25ody bgcolor<=blue= text<=black=3
La pasul urmator vom sc&imba culoarea link-urilor preente in pagina in galben
pentru a le diferentia mai rapid in cadrul informatiilor preentate in pagina !eb )
25ody bgcolor<=blue= text<=black= link<=yello!=3
$n caul in care in cadrul paginii avem mai multe link-uri ar fi util sa putem observa
rapid care dintre ele au fost deja viitate si care nu . Pentru a putea sublinia acest fapt
vom introduce si atributul vlink ' < visited link ( in cadrul tag-ului )
25ody bgcolor<=blue= text<=black= link<=yello!= vlink<=red=3
$n urma comenii de mai sus bro!ser-ul va afisa link-urile viitate cu rosu . #a un alt
pas putem configura o alta culoare ' ex. verde ( pentru link-urile pe care se apasa la
momentul respectiv . aceasta culoare va apare doar in momentul in care se va da click
pe link-ul respectiv iar atributul folosit va fi alink ' < active link ( )
25ody bgcolor<=blue= text<=black= link<=yello!= vlink<=red= alink<=green=3
>evenind la controlul culorilor trebuie sa mai amintesc unele detalii . #uloarea poate
fi specificata fie in limba englea ' denumirile dintr-o lista standard ( fie in cod
&exaecimal ' ex .?@@@@AA ( . Aormatul in care se transmite comanda este de tip >/5
' red green blue ( ) >>//55 . comanda de mai jos )
25ody bgcolor<=?@@@@AA=3
este ec&ivalenta cu )
25ody bgcolor<=blue=3
$n caul in care vrem ca pagina sa aiba un aspect mai personaliat putem folosi ca
fond nu doar o culoare ci o imagine ' in format /$A sau BP/ ( )
25ody background<=imagine.gif= text<=black= link<=yello!= vlink<=red=
alink<=green=3
Tag-ul anterior specifica utiliarea imaginii Cimagine.gifD ca fond al paginii noastre .
Trebuie mentionat ca indiferent de dimensiunile imaginii dorite aceasta va acoperi
intreaga suprafata a paginii .
$n continuare vom aborda utiliarea diferitelor fonturi . $n computer vom intalni o
varietate foarte mare de fonturi in ceea ce priveste forma si marimea . Trebuie sa
acordam atentie alegerii fontului utiliat in pagina noastra !eb pentru ca este posibil
ca nu toti utiliatorii care vor incerca sa accesee pagina vor dispune de fontul
respectiv . $n acest ca computerul va inlocui automat fontul nostru cu fontul default
al acelui sistem ' de obicei A>$AL sau T$M*" +*E >,MA+ ( .
#a element practic % indiferent de fontul pe care il utiliam este necesara viualiarea
paginii si folosind fonturile default cele mai raspandite .
Pentru a controla fonturile trebuie utiliat tag-ul <%!&T> % in cadrul sectiunii
25,-63 )
25ody bgcolor<=blue= text<=black= link<=yello!= vlink<=red= alink<=green=3
2Aont face<=arial=3
24Aont3
245ody3
,bservati ca si tag-ul 2A,+T3 necesita un tag de inc&idere . Acest tag ne permite sa
stabilim tipul de font % dimensiunea sa si culoarea % ca in exemplul urmator )
2Aont face<=#omic "ans M"= sie<=F= color<=green=3
Pentru a da flexibilitate utiliarii fonturilor limbajul HTML permite enumerarea in
cadrul unei liste a fonturilor ce urmeaa a fi folosite % astfel incat in caul in care
fontul pe care il utiliati nu este disponibil atunci se va incerca automat utiliarea
urmatorului font din lista )
2Aont face<=#omic "ans M"% Arial=3
Marimea fontului poate fi stabilita in cadrul a trei tipuri de plaje ) de la 9 la G % de la -9
la -H si de la I9 la IF .
$n afara acestui control al fonturilor mai exista inca sase tag-uri care pot modifica
fontul preent in pagina . Aceste comeni sunt tag-uri independente si nu apar in
cadrul tag-ului 2A,+T3 . Aceste tag-uri sunt 2&9 3 % 2&:3 % 2&H3 % 2&F3 % 2&J3 si
2&K3 % cu tag-ul 2&93 folosind dimensiunea cea mai mare de font iar 2&K3 cea mai
mica dimensiune . Aceste tag-uri sunt in general folosite la inceputul paginii pentru a
anunta un titlu sau in cadrul paginii pentru a diferentia dimensiunea unei portiuni de
text de dimensiunea standard definita prin tag-ul 2A,+T3 . Toate aceste tag-uri
necesita si complementarul de inc&idere ' ex. 24&93 ( .
$n caul in care nu se apeleaa la tag-ul 2A,+T3 se va folosi dimensiunea default de
H .
$n caul in care dorim ca in locul fontului default al bro!serului sa folosim alt font
pentru intregul document se va apela la tag-ul BA#E%!&T % integrat in sectiunea
H*A- a documentului )
2&ead3
2basefont face<D#omic "ans M"D color<=red= sie<DIHD3
24&ead3
#odul sursa de mai sus implica utiliarea ca default a noului font % cu culoarea rosie si
cu o dimensiune mai mare cu H decat a fontului default al bro!serului .
, alta observatie trebuie facuta legat de anumite caractere speciale care nu pot fi
utiliate in mod normal ca text datorita faptului ca ele repreinta cuvinte c&eie ale
limbajului HTML . Pentru a introduce aceste caractere exista posibilitatea de a folosi
codul lor sau alte definitii standardiate ale acestora 0 ca de exemplu pentru a obtine
semnul de copyrig&t )
Lcopy -3 bro!ser-ul va afisa pe ecran semnul de copyrig&t .
$n general simbolul CLD marc&eaa pentru bro!ser faptul ca incepem descrierea unui
caracter special .
;nul dintre cele mai folosite caractere speciale pentru HTML este spatiul 8 $n caul in
care in textul pe care dorim sa-l publicam in pagina noastra lasam un numar de J
spatii intre doua cuvinte bro!ser-ul va afisa doar un singur spatiu intre ele . Pentru a
putea afisa mai multe spatii trebuie introdus caracterul special Lnbsp )
2body bgcolor<=?AAAAAA=3
#evaLnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.
tareLnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.Lnbsp.
ciudat.
24body3
>eultatul acestei comeni va fi )
#eva tare ciudat.
Alte caractere speciale des utiliate ar include )
Lnbsp. ' spatiu (
Llt. ' 2 (
Lgt. ' 3 (
Lamp. ' L (
LMuot. ' = (
>ecapituland % pana in acest moment am vaut cum se poate crea o pagina utiliand
tag-urile de baa ) 2HTML3% 2Head3% 2Title3% 24Title3% 24Head3% 25ody3% 245ody3%
24HTML3 . am aflat cum sa controlam culoarea folosita pentru fodul paginii % text %
linkuri % linkuri active % linkuri viitate % cum sa folosim o imagine ca fond al paginii si
cum sa configuram fontul folosit in ceea ce priveste tipul % culoarea si dimensiunea .
$n continuare vom aborda alte tag-uri care aduc o imbunatatire controlului pe care il
avem asupra continutului si preentarii paginii noastre )
<b> s' <b> 7 tag-urile transforma textul din cadrul sau in text bold ' ingrosat ( . $n
locul acestei perec&i de tag-uri se poate folosi si perec&ea <strong> s' <strong>
<'> s' <'> 7 tag-urile transforma textul din cadrul sau in text italic ' cursiv ( . $n locul
acestei perec&i de tag-uri se poate folosi si perec&ea <em> s' <em>
<u> s' <u> 7 tag-urile transforma textul din cadrul sau in text subliniat ' underlined (
<su(> s' <su(> 7 tag-urile transforma textul in superscript
<sub> s' <sub> 7 tag-urile transforma textul in subscript
<s> s' <s> 7 tag-urile transforma textul in strike . $n locul acestei perec&i de tag-uri
se poate folosi perec&ea <str')e> si <str')e>
<(> 7 tag-ul comanda trecerea la un alt paragraf in cadrul paginii . mai exact tag-ul
comanda trecerea la linie noua si lasarea unei linii libere . Mai trebuie mentionat ca
folosirea in serie a tag-ului )
2p3 2p3 2p3
nu va duce la lasarea libera a trei linii % bro!ser-ul va interpreta tag-urile ca pe unul
singur .
Aolosit sub aceasta forma tag-ul nu necesita si complementarul de inc&idere . Nom
vedea imediat ca in caul folosirii unor atribute ale tag-ului va apare si necesitatea
utiliarii tag-ului complementar de inc&idere <(>
$n cadrul tag-ului 2p3 se pot folosi atribute pentru alinierea textului la stanga
' poitionarea default ( % la dreapta sau central .
-e exemplu )
2p align<=rig&t=3Acest text va fi aliniat la dreapta.24p3
va produce )
Acest text va fi aliniat la dreapta
<br> 7 tag-ul comanda trecerea la linie noua fara a incepe un nou paragraf ' < line
break ( . nu necesita tag de inc&idere .
$n caul in dorim trecerea la o linie noua este obligatorie folosirea tag-ului % simpla
utiliare a tastei *+T*> in cadrul codului sursa al paginii noastre nu are nici un efect
in cadrul bro!ser-ului .
Pentru obtinerea mai multor linii libere se foloseste combinatia intre caracterul special
pentru spatiu si tag-ul 2br3 )
25,-6 5/#,L,><=?AAAAAA=3
#eva tare25>3
Lnbsp.25>3
Lnbsp.25>3
Lnbsp.25>3
Lnbsp.25>3
Lnbsp.25>3
#iudat.
245,-63
"ecventa de mai sus va duce la urmatorul reultat in bro!ser )
#eva tare





#iudat.
<BL!C*+,!TE> s' <BL!C*+,!TE> 7 va pagina textul dintre tag-uri ca pe
un citat . mai explicit bro!ser-ul va crea o margine libera in stanga si in dreapta
textului )
25,-6 5/#,L,><=?AAAAAA=3
25L,#OP;,T*3
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit
pentru a ilustra paginarea cu ajutorul tagului 5L,#OP;,T* si apoi cu ajutorul
tagului de centrare a textului in cadrul liniilor .
245L,#OP;,T*3
245,-63
"ecventa de mai sus va avea ca reultat urmatoarea paginare )
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi
folosit pentru a ilustra paginarea cu ajutorul tagului 5L,#OP;,T* si apoi su
ajutorul tagului de centrare a textului in cadrul liniilor .
$n caul in care s-ar folosi tag-ul 2center3 )
2center3
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit
pentru a ilustra paginarea cu ajutorul tagului 5L,#OP;,T* si apoi su ajutorul
tagului de centrare a textului in cadrul liniilor .
24center3
s-ar obtine urmatoarea paginare )
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit
pentru a ilustra paginarea cu ajutorul tagului 5L,#OP;,T* si apoi su ajutorul
tagului de centrare a textului in cadrul liniilor .
<nb> 7 ' < non breaking space ( comanda introducerea unui spatiu in cadrul textului
fara a duce la trecerea la alta linie . +u se foloseste pentru introducerea unui spatiu in
cadrul textului ci pentru a distanta imagini aflate pe aceeasi linie . +u necesita tag de
inc&idere .
<-enter> s' <-enter> 7 tag-urile centrea textul dintre ele la nivel de linie .
!B# $ Tag-urile de formatare a textului pot fi folosite si combinat pentru a obtine
efectul dorit )
2center32b32i32u3$ kno! &o! to use HTML tags824u324i324b324center3
<.r> 7 '< &oriontal rule ( este un tag foarte folosit in cadrul paginilor !eb .
#omanda duce la trasarea unei linii oriontale de-a lungul paginii . Acest tag poate
primi mai multe atribute ce pot configura poitia % culoare % dimensiunea liniei .
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=50%>
<HR WIDTH=100>
</BODY>
Prima comanda va trasa o linie oriontala cu lungimea de J@Q din latimea paginii % de
culoare albastra si centrata . cea de-a doua instructiune va trasa o linie oriontala de
9@@ de pixeli . Tag-ul poate fi folosit si independent )
2&r3
ceea ce va duce la trasarea unei linii oriontale de lungul intregii pagini .
$n cadrul tag-ului 2H>3 se pot folosi si atributele AL$/+ % "$R* si +,"HA-* )
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15 NOSHADE>
A!"#$$% SIZE &''!(")* +!,-"('* %")"'" "*! NOSHADE .*/'
%")"* -* &'0")* -,%"&* 1
<P/E> s' <P/E> 7 dupa cum am aratat mai sus bro!ser-ul nu preinta pagina exact
sub forma sub care vedem textul in momentul realiarii codului sursa al paginii .
pentru acest neajuns exista o solutie sub forma utiliarii acestor tag-uri . "a luam
exemplu urmator )
<BODY BGCOLOR="#FFFFFF">
23/
45 56
78888,OO8888496888888888887
3 L'':"'; 3
3 .,! 3
3 <!'-"&') 3
788888888888888888,OO888887
3993993
33 33
,,O O,,
</BODY>
A/'- /,& -$!-* 0* !'=$%* &$>* *."-*!' ") $!(*,*!'*
"(*+")' ?
ST4 'U U( I----o,,----'V(-----------I T LeeNie! T T for T T President T I-----------------
o,,-----I TVVTVVT TT TT oo, ,oo
"impla introducere a urmatorului cod sursa )
<BODY BGCOLOR="#FFFFFF">
2P>*3
23/
45 56
78888,OO8888496888888888887
3 L'':"'; 3
3 .,! 3
3 <!'-"&') 3
788888888888888888,OO888887
3993993
33 33
,,O O,,
</<RE>
</BODY>
Na duce la afisarea urmatorului reultat )
23/
45 56
78888,OO8888496888888888887
3 L'':"'; 3
3 .,! 3
3 <!'-"&') 3
788888888888888888,OO888887
3993993
33 33
,,O O,,
IMAGINI
$maginea a devenit un element omnipreent in toate paginile !eb actuale . 5aat pe
faptul recunoscut ca o imagine are un impact mult mai mare asupra privitorului decat
un text precum si pe necesitatea oferirii unor informatii cat mai rapid si direct catre
utiliator imaginea s-a impus ca elementul indispensabil oricarei preentari a oricarui
subiect .
$n cadrul paginilor !eb introducerea elementelor grafice 0 la acest moment ne referim
la imaginile de tip /$A sau BP/ 0 se face cu ajutorul tag-ului <IM0> .
2$M/ ">#<=imagine.gif= E$-TH<1: H*$/HT<K13
are ca efect introducere imaginii imagine.gif in pagina noastra % cu dimensiunile
specificate in atributele E$-TH ' latime ( si H*$/HT ' inaltime ( ale tag-ului .
Atributul "># specifica sursa de unde bro!ser-ul va incarca imaginea respectiva .
aceasta locatie poate fi in sistemul respectiv ' in directorul paginii sau in orice alt
director ce va fi specificat in cale ( sau in orice alta locatie pe !eb ' ex.
&ttp)44ura.data.ro4lectii4poa9.gif ( .
$n caul in care nu se introduce o cale catre aceasta imagine ci doar numele ei atunci
bro!ser-ul va cauta in directorul curent al paginii !eb .
Atributele E$-TH si H*$/HT pot lipsi iar bro!ser-ul va recunoaste imaginea la
dimensiunile ei originale . c&iar in caul in care imaginea a fost special creat pe
dimensiunile necesare paginii noastre este de preferat folosirea celor doua atribute
care ajuta la incarcarea mai rapida a imaginii ' in ca contrar bro!ser-ul va mai pierde
timp calculand dimensiune si asearea in pagina a imaginii respective ( .
;n alt atribut care este preferabil sa fie preent este ALT . #u ajutorul acestui atribut
putem oferi o alternativa bro!ser-ului in caul in care imaginea respectiva nu a putut
fi incarcata )
2img src<=9.gif= !idt&<:@ &eig&t<:@ alt<=Text in caul lipsei poei din calea
generata=3
Tag-ul anterior va face ca in caul in care poa dorita nu este gasita bro!ser-ul sa
afisee textul atributului ALT intr-o fereastra de dimensiunile specificate pentru
imagine .
;n alt atribut al tag-ului $M/ este si 5,>-*> . cu ajutorul sau putem specifica
grosimea unui c&enar care inconjoara imaginea dorita .
Tag-ul $M/ accepta si el atributul AL$/+ % intalnit de exemplu si in cadrul tag-ului
2P3 .
25ody3
2img align<Drig&tD src<=9.gif= !idt&<:@ &eig&t<:@ alt<=Text in caul lipsei poei din
calea generata=3
Text care va apare alaturi de imagine neacoperind imaginea .
245,-63
#omanda anterioara va poitiona imaginea la dreapta liniei si va face ca textul sa
apara in stanga imaginii ' analog pentru folosirea atributului AL$/+<DleftD ( .
$n caul folosirii valorii #*+T*> pentru atributul AL$/+ se va obtine poitionare in
stanga a imaginii ' lucru default ( iar textul va incepe pe linia poitionata in dreptul
mijlocului imaginii % dupa umplerea acestei linii textul continuand pe linia urmatoare
de sub imagine 0 aceasta optiune este in general evitata .
Pentru a obtine centrarea imaginii se va apela la incadrarea tag-ului $M/ intre doua
taguri complemetare 2#*+T*>3 si 24#*+T*>3 .
Tot in cadrul atributului AL$/+ mai putem intalni alte trei valori )
CbottomD 0 aliniaa partea inferioara a imaginii pe linia curenta
CtopD 0 aliniaa partea superioara a imaginii cu cel mai inalt element de pe
linia curenta
CmiddleD 0 aliniaa mijlocul imaginii cu linia curenta
LINKURI
Mai intai sa vedem ce este un link ' sau o legatura ( . Pentru a fi cat mai simplu ) un
link repreinta cuvintele subliniate in cadrul unei pagini si pe care poti da click pentru
a naviga catre alte locatii .
Practic orice element al unei pagini !eb poate fi asociat unui link ) un text % o imagine
sau doar o portiune de imagine .
2a &ref<=&ttp)44!!!.ya&oo.com=36a&oo24a3
"ecventa anterioara repreinta introducerea unui link catre pagina 6a&oo .
<a> s' <a> 7 ' < anc&or ( tag-urile transmit bro!ser-ului faptul ca urmeaa definirea
unui link .
Adresa link-ului se incadreaa in &ref<D C . &ref vine de la Hypertext >eference si este
un atribut al tag-ului 2A3 . -upa inc&eierea tag-ului 2A3 urmeaa textul sau
imaginea care urmeaa sa faca legatura catre linkul dorit .
$n caul in care dorim realiarea unei legaturi catre o alta pagina din acelasi director
se va introduce in cadrul atributului &ref doar numele paginii )
2a &ref<=continut.&tm=3#ontinut24a3
;n alt tip comun de legatura este linkul in cadrul aceleiasi pagini . Pentru a crea un
astfel de link trebuie realiati doi pasi .
$n primul rand trebuie sa identificam sectiunea paginii unde vrem sa putem sari si apoi
sa realiam linkul .
Pentru primul pas 0 definirea onei la care dorim sa se faca legatura avem doua
posibilitati )
2a name<DdefinitieVonaD3 Text 24a3
sau
2p id<DdefinitieVonaD3 Text
Prima posibilitate este si cea mai corecta realiand o ancora legata de textul respectiv .
a doua posibilitate este de repreinta de fapt definirea unui paragraf % cu ajutorul unui
atribut al tag-ului 2p3 .
"altul propriu-is la aceasta ona definita se face prin intermediul urmatoarei linii de
cod )
2a &ref<=?definitieVona=3Acest link va duce inapoi la ona definita24a3
"altul se poate face si combinat 0 la o anumita ona definita in alta pagina % ca in
exemplul urmator )
2a &ref<=pagina:.&tml?definitieVona=3Acest link va duce inapoi la ona definita in
pagina :24a3
, alta intrebuintare foarte des intalnita a tag-ului 2a3 tine de inserarea in pagina !eb
a unei adrese de contact % mai exact o adresa de mail . ;rmatoarea linie de cod
realieaa exact acest lucru % cuvantul c&eie mailto specificand bro!ser-ului ca
urmeaa o adresa de mail iar acesta va lansa clientul de mail al viitatorului paginii cu
adresa adresaUya&oo.com gata introdusa in cadrul mesajului )
2a &ref<=mailto)adresaUya&oo.com=3"end *-Mail24a3
;n atribut folositor al tag-ului este si ";5B*#T % mail-ul trimis de viitator primind
astfel un subiect gata definit de dumneavoastra )
2a &ref<=mailto)adresaUya&oo.comWsubject<testare=3"end *-Mail24a3
Tot in problema linkurilor mai trebuie sa amintim si posibilitatea de a defini o adresa
de baa pentru linkurile din pagina noastra . $n mod normal pentru un link catre o
pagina din acelasi director se foloseste doar numele paginii . "a presupunem ca toate
linkurile din pagina noastra sunt catre pagini aflate intr-un acelasi director
-$>*#T,>V";>"* . in acest ca putem reduce textul presupus de introducerea
acestei cai in fiecare atribut H>*A in modul urmator )
2H*A-3
25A"* H>*A<&ttp)44!!!.site.com4directorVsurse3
24H*A-3
-upa utiliarea acestui cod sursa putem utilia in cadrul atributului H>*A doar
numele fisierului respectiv .
LISTE
Listele sunt un element foarte des intalnit in cadrul paginilor !eb datorita in principal
impactului viual mai ridicat decat al textului simplu .
$n general putem discuta despre doua tipuri de liste ) neordonate si ordonate . Listele
neordonate preinta elementele listei unul sub altul % cu un asa numitele bullet-uri la
stanga elementului . Listele ordonate inlocuiesc aceste bullet-uri cu numerale sau
litere in ordine crescatoare .
L$"T* +*,>-,+AT* )
2ul32li3*lement 9 2li3*lement : 2li3*lement H 24ul3
Aceasta comanda va duce la crearea unei liste neordonate )
*lement 9
*lement :
*lement H
Tag-ul 2;L3 poate folosi atributul T6P* 0 cu valorile "P;A>* % -$"# si #$>#L*
0 pentru a specifica formatul bullet-ului elementelor listei . Acelasi atribut T6P*
poate fi utiliat si in cadrul tag-ului 2L$3 pentru a specifica individual formatul bullet-
ului pentru fiecare element al listei in parte .

L$"T* ,>-,+AT*
2ol32li3*lement 92li3*lement :2li3*lement H 24ol3
Aceasta comanda va produce urmatoarea lista ordonata )
9. *lement 9
:. *lement :
H. *lement H
Tag-ul 2,L3 poseda doua atribute foarte folositoare ) "TA>T si T6P* .
Atributul "TA>T determina valoarea numarului de ordine al primului element din
lista . Atributul T6P* poate avea patru valori )
- a 7 pentru ordonare cu ajutorul literelor mici
- A 7 pentru ordonare cu ajutorul majusculelor
- $ 7 pentru ordonare cu ajutorul numeralelor romane majuscule
- $ 7 pentru ordonare cu ajutorul numeralelor romane minuscule
- 9 7 pentru ordonarea numerica ' default (
Tag-ul <LI> - care introduce un element al listei poseda si el un atribut extrem de
folositor ) NAL;* . cu ajutorul sau putem specifica o anumita valoare pentru numarul
de ordine al acelui element ' elementele urmatoare vor fi numarate incepand cu
aceasta noua valoare ( )
2,L3
2L$3 linia 9
2L$ value<DGD3 linia :
2L$3 linia H
24,L3
Na produce urmatorul efect )
9. linia 9
G. linia :
1. linia H
Tag-ul <LI> poate utilia si el atributul T6P* pentru a formata individual
numerotarea elementului respectiv al listei .
;n alt tip de lista intalnit destul de des este si tipul lista de definitie .
<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>T'!(') &' &'.")"
<DD>D'.")""* '!(')$%$"
</DL>
</BODY>
T*+8$% .,%,-" '-' <DL> 4 = &'.")"",) %"- 6 @ <DT> '-' $!(* &'
'!(')$% /' $!('*=* * ." &'.")" "*! <DD> ->'/"."/* &'.")""*
>!,>!"$8="-* * '!(')$%$" 1
OBS : I) %"(#*A$% HTBL '-' >'!("-* .,%,-"!'* comentariilor . acestea incep cu
28-- si se termina cu --3 . ,rice tag inserat intre marcajele de comentariu este ignorat de bro!ser .

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