Daca dort! totusi ca browser-ul sa afiseze 0 bucata de text exact cum ati scris-o dvs. in codul HTML, respectand
‘spatile si ruperea pe randuri, atunc! folositi tag-ul
pentru a incadra acea bucata de text. Are tag
‘corespunzator de sfarsit
.
Implicit continutul une pagini HTML este alinat la stanga. Puteti efectua s! alte alinien cu urmatoarele tag-uri:
‘Tag-ul
Este folosit pentrs a alinta continut HTML fa centru, Are tag corespunzator
,
‘Tag-ul
‘Are urmatoarea structura:
..
Multe tag-uri au pe langa nume si anumite atribute. Acestea se scriu in tag-ul de inceput(ex, ALIGN) st aper In
expresii de genul atribut="voloare”, valoarea punandu-se intre ghilimele. Browser-ele mai no! valideaza si variant
fara ghilimele, dar mal bine le Folositi
In aces caz, ALIGN poste lua valovile: LEFT, CENTER sau RIGHT. LEFT este implicit,
‘exemplu: alinieres unul text la dreapta:
Este folosit pentru a incadra un citat, o fraza. Efectul consta in compactarea zonel respective sl affsarea el putin
‘mal ta dreapta fata de restul continutulu Este intr-un fel echivalentul TAB-ulu! din Word. Are tag corespuncator de
sfarsit
Sunt folosite pentru a crea titlur in pagina, titluri avand una din dimensiunile standard 1-6, Atentle, in acest caz,
‘ da dimensiunea cea mat mare, iar
cea mal mica,
exemp|
cit» ABC <>
ABC
ase
ABC
Introducerea imaginilor in paginile HTML
‘Totl ne dorim site-uri care sa arate bine, cus multe imagini, cu antmatie, etc. Pe de alta parte ne dorim ca site-ul sa
Se Incarce repede, De aceea trebule sa realizam un echilibru intre rapiditatea de incarcare si design-ul, grafica site
ulul. Un site cu multe Imagini se va incarca mult mai greu decat un site care contine mal mult text sl inal putine
Imagini.
In paginile HTML putem introduce doua tipur(formate) de imaginl: GIF s| IPG.
Fiserele GIF sunt imagini ce folosesc cel mult 256 de culort si sunt indicate pentru imaginl de dimensiuni mici(ea
dimensiune a fsierulul, nu ca suprafata) care nu necesita o adancime mare de culoare. Sunt formatul cel mal
raspandit pe web.
Fisterele JPG sunt imagin! ce folosesc pana la 16,7 milioane de culor si de aceea sunt indicate pentru imagini mai
fine, ce necesita clartate, adancime, dar aceste imagini au, de obicel, si dimenslan! mai mart si atunel se mcarca
‘mal grew.
Tag-ul <1mG>
‘Are structura:
Are structura text sau Imagine pe post de link
HREF=
Spediica fisierul care trebuie sa se incarce daca utilizatorul executa click pe acest lnk.
exemplu:
revenire la cuprins
Putet!folosi sto imagine pe post de link:
‘exemplu:
‘ text pe post de ancora
(Cream link-ul ia ancora:
Este folosit pentru a marca 0 lista neordonata. O lista neordonata este 0 lista in care elementele sunt marcate nu
prin numere(deci elementele nu sunt numerotate, de aici si numele de neardonata), cl prin cea oe vorbitoni de.
limba engleza numesc bullet-uri(punct ingrosat in forma de disc, cere sau patrat). Astfel, inceputul Recarul element
din lista va fi marcat prin prezenta unui bullet.
ieee
‘Atributul TYPE specifica tipul bullet-ulul, Poate lua valoriie: DISC, CIRCLE sau SQUARE.
Valcarea DISC este Implicita, Daca doritio lista cu bullet-urt de tip DISC nu mal trebuie sa specificati si
akributul TYPE="DISC", cl incepeti lista doar cu
.
Tag-ul ww
Marcheaza un element al une! liste. Se foloseste atat in listele ordonate cat si in cele neordonate.
exemplu:
dul de mal Jos: va genera o lista care aata asa:
SU TPE SUMED + primal element
“ primul element 4
al doilea element 7
Exemplul 2:
cadul de mal jos: vva genera o lista care arata asa:
V. —_primul element
“
primul element VI. al doliea element
al dollea element
‘Tag-ul
...
Marcheaza o lista de defini. 0 defintie este un cuplet termen-definitie, cuplet in care termenul apare tzolat pe un
‘and, iar pe rendul imediat urmator, incepand cu alineat, urmeaza definitia sa, Pentru a marca un termen de
definitie I vom incadra cu tag-ul
, iar pentru a marca o definite @ unui termen o vom incadra cu tag-ul
‘
.
‘Sa vedem un exemplu:
Ccodul de mal Jos: vva genera o lista care arata
termen 1
‘
termen 1 definitia primutut termen
‘
definitia primulul termen termen 2
termen 2
‘definitia penru termenuil 2
definitia pentru termenul 2
0L>
Observatit:
41, Ustele pot fl imbricate, adica o ista poate contine o alta lista, In felul acesta, lista incluse poate fi folosita
pe post de element al istel mari.
2. Daca dort! ca elementele une liste sa fle formatate intr-un anumit mod, trebule sa formatati fiecare
‘element In parte. De exemplu, daca dorit ca toate elementele unei liste sa fie formatate cu un anumit font
‘u puteti sa inclideti toate lista intr-un tag font deoarece acesta nu va actions asupra elementelor, ct
trebuie sa introduceti tag-ul font in lecare element al listel,
Folosirea tabelelor
Tabelele sunt elemente des folosite in paginile HTML. Rolul lor clasic este de asezare a Informatie! intr-un cadrul
format din celule. Cu toate acestea, cel mai raspandit mod de utilizare a tabelelor In HTML este cel In care se
folosesc tabele invizibile(cu border, margine, de grosime zero) pentru a aseza Informatia in zone sl direct in care
altfel cu arf posit.
De exemplu, pentru a aseza informatia dintr-o pagina in doua coloane(ca in paginile unul ziar de exemplu) trebuie
2 introduci un tabel cu border de grosime zero(invizibil pentru vizitator), tabel avand doua coloane in care se aa
{nformatia, Nu exista un tag special care sa faca acest lucru; folosirea unul astfel de tabel este singura solutie.
ser @)YET. - Notun! Fundomentaie, co Dan Citen
‘Tag-ul
...
‘Acest tag margineste intreg tabel-ul. Are numeroase atribute pe care le vor prezenta imediat, Tabelul este format
din fini, flecare linle ind impartita in celule. Oe aceea vorn avea nevole si de tag-uri care sa margineasca linille,
respect celule. Dar met intai sa analizam atributele tag-ulul general
:
Indica grosimea tabelulul. Implicit este 1.
CELLSPACING = *..."
Indica dimensiunea spatiului (in pixel!) ce trebuie lasat intre celutele tabelului.
CEULPADDING = "..."
Indica dimensiunea spatiulut (in pixel) ce trebule lasat Intra marginea unel celule si continutul ei.
WIDTH =".
Indica tungimea tabelulul. Poate fl specifica In pixell sau in procente relativ la lungimea paginl.(exemplu:
WIDTH="600" sau WIDTH ="80%")
HEIGHT
Indica inaltimea tabetului. Se poate specifica in pixell sau in procente. Nu este recamandabila folosirea
‘acestul tag. De exemplu: degeaba specificam not inaltimea tabelului sa fie 300 de pixell daca informatia
din tabel este mare si conduce la 0 inaltime de 400 de plxell. Cel mal bine este sa lasam tabelul 5a-si,
Stablleasca inaltimea in mod dinamic, in functie de continut.
ALIGN ="
‘Specifica cum sa fle aliniat tabelul in pagina sau in containerul care-t contine(de exemplu un tabel poate
‘5a contina intr-o cella @ sa un alt tabel; specificand cum sa fie aliniat tabelul mic din interior, asezarea se
va face relativ la celula tabelului mare care-I contine). Valori posibile sunt: LEFT, CENTER sau RIGHT. LEFT
este implicta..
BGCOLOR =
Indica culoarea de fundal a tabeluiu!.
BACKGROUND = *..." (functioneaza doar in internet Explorer)
Indica 0 imagine pe post de background al tabelulul,
‘BORDERCOLOR ="..." (functioneaza doar in Intemet Explorer)
Specfea culcarea border-ulul tabetulul. Merge doar in TE. In Netscape border-ele tabelelor au culoarea get,
Observatie: Toate atributele tag-ulul
sunt optionale.
entru @ marca o linkedin tabeltrebule safolosim tag-ul
, Acesta are si el mai multe atribute:
ates
‘Spectfica cum sa fie aliniat pe orizontala continutul unui rand din tabel. Valori posiblle sunt: LEFT, CENTER
s0u RIGHT. LEFT este valoarea implica.
VALIGN =." I
‘Speciica cum sa fle aliniat pe verticala continutul urwi rand din tabel, Valort posibite sunt: TOP, MIDDLE,
BOTTOM. MIDDLE este valoarea implicta,
BGCOLOR = *.."
Indica culoarea de fundal a lintel tabelutui.
BACKGROUND = "..." (functioneaza doar in Internet Explorer)
Indlea 0 imagine pe post de background al lintel tabelului.
Observatie: Toate atributele tag-ulul
sunt optionale,
Pentru a marca 9 celula din tabel trebute sa folosim tag-ul
. O celula poate sa ocupe mai multe celule
standard{(pe orizontala sau verticala). Acest tag are si el mai multe atributer
Speciea cum s Ne aliiatpeortzotala coninutu uel clue. Valor posible sunt LEFT, CENTER sou
RIGHT. LEFT este vloare imp,
vauen Sr
Spccen cum se fe ait pe verticala continu unel celle Valor posible sunt: TOP, MIDDLE, BOTTOM.
MIDDLE este vaioarea impticita. am hed oe :
AOWSPAN = es"
Specfca numeral de clue standrd pe care cella respective le ocupa relay la tape cate ln se
COLSPAN =". 1
Specca rurmarut de clue standard pe care cella respctva le ocupa relat aco ne
Speco oa joane(pe cate cloa
wioTH
‘Specific lungimea in pheell a celvlel respective,
@) spre oun te 20,
exe rin eS 22,
ser ar ah a eS eS aIML - noted Rundementl, cv Dan Cintas
BGCOLOR =..."
Indica culoarea de fundal.
BACKGROUND = *..." (functioneaza doar in Internet Explorer)
Indica 0 imagine pe post de backaround.
Exemplul
ccodul de mai jos: va genera urmatorul tabel:
‘
celval 1
td>celval 2
Exemplul 2: Observati cum celula 3 ocupa 2 randurl(doua celute standard pe verticala)
codul de mal jos: ‘va genera urmatorul tabel:
"elpaddngs > RTE
as uit
‘
3
celual 1
‘etdseaiual 2
celula 3
celula 4
<[t>
colula 5
eft
Exemplul 3: Observati cum celula 1 ocupa 2 coloane(doua celule standard pe orizontata)
‘codul de mal jos: va genera urmatorul tabel:
‘
cetula 2
‘
celula 3
>celual 1
Q
‘cit teal pate Aeon Gr pes sv @)
"rma fre atl oor
se itaran pubes 0
5
iML - Neil Fundamental, od Dan inten
Frame-uri
Folosirea frame-urilor este o tehnica des utilizata In site-urle de astazl, Ce inseamna acest lucru: in fereastra
‘browser-ulul apar concomitent mai multe pagini HTML, flecare Intr-o zona a sa. De obicel una din aceste pagini
este pe post de meniy,flnd fa, lar o alta din aceste zone constitule locul de afisare al paginllor nol, solicitate de
Viatator din meniu
‘Asadar, un frame este 0 portiune dreptunghiulara din cadrul unei ferestre de browser(si implicit a une! pagini web)
{In care'se incarca 9 pagina HTML. Pentru a folosi un astfel de cadru cu frame-ul in site-ul nostru trebule sa cream
tn fisier HTML in care sa-{ definim. atunc! cand browser-ul incarca fisierul cadru(sau frameset-ut, adica set-ul de
frame-uri, setul de pagini web) va incarca implicit fisierele HTML ce compun acest cadru, fecare fiser in zona sa,
Corespunzator impartiri pe zone facuta in fisier-ul cadru,
‘Sa analizam tag-url necesare definirli paginil HTML ce constitule frameset-ul. Vorn avea un tag general
‘Observam ca Initial fislerul este impart in doua((a fel ca ta primul exemplu), dar fumatatea din
ddreapta este la randul el impartita inca o data In doua, de data aceasta pe verticala(s-a mal
Introdus inca 0 data un tag FRAMESET care delimiteaza impartirea zonei drepte a paginii). Doct
putem folositag-uri FRAMESET imbricate pentru a creea frameset-uri complexe.
) st TID ay
ae itera pcre sts once fr fara aor out