HTML-elemente Avansate

EDITAREA PAGINILOR WEB CU HTML -
LISTE. IMAGINI. HYPERLEGĂTURI. TABELE
6. Liste
Acestea permit ca anumite enunţuri (texte, elemente) să fie numerotate sau marcate într-un anumit
fel. O astfel de organizare poartă numele de liste. În HTML distingem:
6.1 Liste ordonate (Ordered Lists)
Sunt liste în care elementele sunt numerotate. Inserarea lor în cadrul documentului HTML se face
prin tag-urile <OL>...</OL>, elementele (itemii) lor fiind introduse între aceste două tag-uri prin
<LI>...</LI> (tag-ul de sfârşit nefiind obligatoriu).
Implicit, numerotarea se face cu numere arabe (1, 2, 3, ...). Ea poate fi modificată prin folosirea
atributului type în cadrul tag-ului OL. Acesta poate lua una dintre valorile:
a : numerotarea se va face cu litere mici (a, b, c, ...)
A : numerotarea se va face cu litere mari (A, B, C, ...)
i : numerotarea se va face cu numere romane mici (i, ii, iii, iv ...)
I : numerotarea se va face cu numere romane mari (I, II, III. IV, ...)
1 : (implicit) numerotarea se va face cu numere arabe obişnuite (1, 2, 3, ...)
■ Exemplul 11
<HTML>
<HEAD>
<TITLE>Liste</TITLE>
</HEAD>
<BODY>
<P>
Lista, cu numere romane
<OL type="i">
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</OL>
</P>
</BODY>
</HTML>
6.2 Liste neordonate (Unordered Lists)
Sunt liste în care elementele nu sunt numerotate, ci în dreptul fiecăruia este afişat un marcator.
Inserarea lor în cadrul documentului HTML se face prin tag-urile <UL>...</UL>, elementele (itemii) lor
fiind introduse între aceste două tag-uri prin <LI>...</LI>.
Implicit, marcarea lor se face prin cerculeţe pline. Ea poate fi modificată prin folosirea atributului
type în cadrul tag-ului UL. Acesta poate lua una dintre valorile:
disc : marcarea se face cu cerculeţe pline (implicit)
square : marcarea se face cu pătrăţele
circle : marcarea se face cu cerculeţe goale
7. IMAGINI
Există numeroase formate grafice, dar cele mai răspândite sunt:
 GIF (Graphics Interchange Format) introdus de Compuserve

 JPEG (Joint Photographic Expert Group)
 PNG (Portable Network Graphic – Format Grafic portabil în reţea)
Aceste formate sunt dependente de platformă. Imaginile grafice sunt construite din
pixeli, care sunt puncte distincte de informaţie de imagine. Fiecare pixel necesită un bit
de culoare. Principalele caracteristici ale formatelor de imagine sunt: numărul de culori,
compresia, transparenţa, întreţeserea şi animaţia. Asemănările şi deosebirile dintre cele
trei formate grafice sunt:
 Imaginile GIF pot utiliza doar 256 de culori, având nevoie de 8 biţi, în timp ce formatele
JPEG şi PNG pot utiliza milioane de culori, având 24 de biţi de culoare, respectiv 32 de
biţi /pixeli de culoare. Ceea ce face formatul GIF atât de utilizat nu este numai paleta mică
de culori (256), dar şi posibilitatea reducerii numărului de culori, astfel, dacă este nevoie
doar de 2 culori, se utilizează numai un bit, ceea ce reduce dimensiunea fişierului de 8 ori.
 Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile
fişierelor. Comprimarea se poate face, în mod diferit, pentru fiecare format, şi, din aceste
motive, ele pot avea dimensiuni mai mici într-un format decât în altul.
 Formatele GIF şi PNG admit culoarea transparentă, în timp ce formatul JPEG nu admite
transparenţa.
 Formatele GIF şi PNG admit animaţia, în timp ce, cu formatul JPEG, nu se poate obţine
animaţie. De exemplu, pentru a obţine animaţie pentru imagini GIF se poate folosi pentru
Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder.
 Toate cele trei formate acceptă întreţeserea. De exemplu, când se vizualizează o pagină
web, se pot observa imaginile care apar linie cu linie, de la forma brută până la redarea
finală, aceasta reprezintă întreţeserea. Deşi dimensiunea fişierelor creşte cu până la 10%, cu
ajutorul acestei întreţeseri, vizitatorul poate să-şi facă o imagine despre ceea ce se va
descărca.
Având în vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi
recomandate:
 GIF – pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc.,
datorită dimensiunii mici a fişierelor.
 JPEG pentru fotografii, când se doreşte să se redea cât mai exact culoarea reală a imaginii.
 PNG – pentru desene complexe, dar şi pentru fotografii, acesta fiind formatul care îmbină
caracteristicile celor două.
Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL (Uniform
Resource Locator) reprezintă standarde de identificare a resurselor (de exemplu, fişiere)
şi pot fi adrese URL absolute şi relative.
Adrese URL absolute

Adresele absolute identifică locaţia unui fişier imagine de pe Internet sau alte calculatoare
conectate la Internet şi au sintaxa: protocol/nume_calculator/cale/nume_fişier
Un exemplu de adresă URL absolută: http://cni-sv.ro/images/eu.jpg
unde:
 htpp:// – este protocolul Internet utilizat;

 cni-sv.ro – este numele calculatorului;
 images – este calea până la fişierul imagine dorit;
 eu.jpg – este fişierul imagine
Adrese URL relative
O adresă relativă identifică locaţia unei imagini, descriind o cale relativă la directorul
curent unde se află fişierul imagine. Adresele relative se referă la localizarea fişierului
imagine de pe calculatorul personal şi are sintaxa: cale/nume_fişier.
Referirea la:
– directorul părinte se poate face prin “../”
– directorul rădăcină se poate face prin “/”
Un exemplu de adresă URL relativă: /../../../friend.jpg sau se mai poate

scrie c:/windows/web/wallpaper/friend.jpg
Toate imaginile cu care vom lucra vor avea adresa URL exprimată în funcţie de directorul
ce conţine documentul HTML care face referire la imagine, adică adresă relativă.
Tag-ul utilizat pentru inserarea unei imagini în documentul HTML este <IMG>. Forma generală a
acestui element este <IMG atribute>. Acest tag nu are şi formă de închidere. Atributele sale sunt:
 src identifică fişierul efectiv de pe disc, ce conţine imaginea respectivă. Dacă imaginea se
află în directorul curent, se specifică doar numele şi extensia sa. Dacă se află într-un
subdirector, acesta se specifică înaintea numelui şi extensiei imaginii, separat prin
caracterul / . Imaginile recunoscute de majoritatea browser-elor internet sunt de tip
.jpg, .gif, .png.
 align specifică tipul de aliniere al imaginii în raport cu textul în cadrul căruia se află.
 atributele height şi width permit specificarea altor dimensiuni pentru imagine, decât cele
reale ale acesteia. Dacă dimensiunile nu sunt proporţionale cu cele reale, imaginea va fi
deformată. Totodată, dacă specificăm dimensiuni mai mari decât cele reale, imaginea se
va vedea mai puţin clar. Valorile pentru cele 2 atribute pot fi exprimate în pixeli sau
procentual.
 atributul border permite stabilirea grosimii unui chenar care va înconjura imaginea.
Implicit, valoarea acestui atribut este ”0”, ceea ce înseamnă că imaginea nu este
înconjurată de chenar.
■ Exemplul 12
<P>
Imaginea originala are dimensiunile 200x150: <BR>
<IMG src="dog.jpg"> <BR>
Iat-o redimensionata proportional la 100x75: <BR>
<IMG src="dog.jpg" width="100" height="75"> <BR>
Iat-o si redusă la 50% din lătime si cu chenar de grosime 2:<BR>
<IMG src="dog.jpg" width="50%" border=”2”> sau
</P>
8. BARE DE SEPARARE (HR).

Bara de separare (linia orizontală), al cărei tag este <HR> reprezintă un element decorativ. De
obicei se foloseşte pentru a separa anumite secţiuni ale paginii web.
Atributele sale sunt:
• width – permite specificarea lungimii sale. Poate fi dată în pixeli sau în procente. Dacă acest
atribut lipseşte, atunci lungimea sa va fi maximă (din marginea stângă şi până marginea dreaptă a
ferestrei);
• size – permite specificarea înălţimii barei. Se specifică în pixeli; • color – permite specificarea
culorii sale.
■ Exemplul 13
<BODY>
O linie clasica:
<HR>
<CENTER> O linie de lungime 50% </CENTER>
<HR width="50%">
<CENTER>O linie de lungime 200 de pixeli, grosime 10 pixeli, de culoare rosie</CENTER>
<HR width="200" size="10" color="red">
</BODY>
9. LEGĂTURI (LINK-URI).
Pentru acestea, vom folosi tag-ul <A>...</A>, numit şi Ancoră.
Ancore de legătură către alte pagini
Acestea permit ca un anumit element din document să conţină legătura către o altă pagină.
 Elementul care face legătura este de obicei un text sau o imagine.
 De regulă, elementul legat îşi schimbă aspectul faţă de cel clasic: textul va fi subliniat şi colorat
altfel, iar imaginea va avea un chenar colorat.
 În momentul în care ducem cursorul deasupra elementului legat, acesta capătă forma unei
mâini, indicându-ne astfel că este vorba de un link pe care îl putem utiliza.
 Printr-un simplu click, accesăm pagina către care este făcută legătura.
 Acest tip de legătură se realizează practic folosind atributul href. Atributul href primeşte
adresa completă a paginii către care dorim să facem legătura. Dacă e vorba de un fişier local,
din acelaşi director cu pagina din care facem legătura, la href este suficient să scriem numele şi
extensia (de ex: href=”pagina.htm”)
■ Exemplul 14
<p>
Prin executarea unui click
<A href="http://mail.yahoo.com"> pe acest text </A>
poti accesa direct pagina de mail yahoo.
</p>
Ancore de legătură către fişiere (pentru download)

La atributul href trebuie specificată adresa fişierului pe care îl descărcăm (dacă este în acelaşi
director cu pagina din care facem legătura, e suficient să-i scriem numele şi extensia).
■ Exemplul 15 - în cazul în care fişierul pentru download este local

Pentru download arhiva executa un click <A href="arhiva.zip">aici</A>
■ Exemplul 16 - în cazul în care fişierul fişierul pentru download se află la altă adresă:
Pentru a descarca subiectele de bacalaureat la disciplina informatica, da un click
<A href="http://subiecte2008.edu.ro/bacalaureat/subiecte/E_informatica_c.zip">aici</A>
Legăturile către fişiere de tip sunet sau film se fac absolut în acelaşi mod. În funcţie de extensia lor
(.wav, .mid, .mp3, .avi) în momentul executării unui click asupra obiectului care face legătura către
ele, acestea vor fi deschise automat către browser cu programul corespunzător.
10. TABELE
Tabelele reprezintă un element foarte important al unei pagini web. În foarte multe cazuri, tabele
cu chenare invizibile sunt folosite ca şi „schelet” al paginii, pentru a putea realiza alinieri complexe
ale elementelor acesteia.
 Tag-ul pentru descrierea unui tabel este <TABLE>...</TABLE>. În cadrul acestora trebuie
descrise liniile (rândurile) tabelului, în cadrul fiecărui rând trebuind descrise celulele
acestuia.
 Descrierea unui rând se face între tag-urile <TR>...</TR>. La rândul lor, celulele din cadrul
rândului se descriu între <TD>...</TD>. Atît tag-ul </TR> cât şi tag-ul </TD> pot fi omise.
 • Tag-ul <TH>...</TH> poate înlocui <TD>...</TD> pentru header.
Atribute ale tag-ului <TABLE>

 border=”grosime_pixeli”. Dacă acest atribut este omis, tabelul va avea un chenar invizibil. Dacă
se specifică doar atributul, omiţând grosimea, aceasta va fi luată, implicit, ca fiind 1.
 cellpadding=”nr_pixeli” permite stabilirea unui spaţiu care va fi lăsat, în fiecare celulă a
tabelului, între conţinutul celulei şi marginile acesteia. Dacă nu se specifică acest atribut, el este
în mod implicit considerat 0
 cellspacing=”nr_pixeli” permite stabilirea spaţiului care va fi lăsat între chenarele celulelor
vecine în tabel (şi inclusiv între ele şi chenarul exterior al tabelului). Dacă nu se specifică acest
atribut, el este în mod implicit considerat 2.
Atribute ale tag-ului <TR>

• align determină, pentru toate celulele de pe linie, modul alinierii conţinutului pe orizontală, în
interiorul celulelor. Poate la una dintre valorile left, right, center sau justify; • valign determină,
pentru toate celulele de pe linie, modul alinierii conţinutului pe verticală, în interiorul celulelor.
Poate la una dintre valorile top, bottom sau middle;
• bgcolor determină, pentru toate celulele de pe linia respectivă, culoarea de fundal.
Atribute ale tag-ului <TD>

• width şi height determină, pentru celula respectivă, lăţimea şi înălţimea. Poate fi dată în
procente sau pixeli. Dacă e specificată în procente, se va lua din lăţimea, respectiv înălţimea
tabelului.
 Exemplul 17
<TABLE border="1" cellspacing="0" cellpadding="5" align="left">
<TR><TH>Echipa </TH> <TH>Punctaj </TH> </TR>
<TR><TD>clasa a 9-a A </TD> <TD align="right">87 </TD> </TR>
<TR><TD>clasa a 10-a B </TD> <TD align="right">80 </TD> </TR>
<TR><TD>clasa a 12-a B </TD> <TD align="right">91 </TD> </TR>
</TABLE>

HTML-elemente Avansate

Încărcat de

Informații document

Titlu original

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

HTML-elemente Avansate

Încărcat de

Drepturi de autor:

Formate disponibile

EDITAREA PAGINILOR WEB CU HTML -

LISTE. IMAGINI. HYPERLEGĂTURI. TABELE

6.1 Liste ordonate (Ordered Lists)

6.2 Liste neordonate (Unordered Lists)

 GIF (Graphics Interchange Format) introdus de Compuserve

Adrese URL absolute

 htpp:// – este protocolul Internet utilizat;

Un exemplu de adresă URL relativă: /../../../friend.jpg sau se mai poate

8. BARE DE SEPARARE (HR).

Ancore de legătură către alte pagini

Ancore de legătură către fişiere (pentru download)

■ Exemplul 15 - în cazul în care fişierul pentru download este local

Atribute ale tag-ului <TABLE>

Atribute ale tag-ului <TR>

Atribute ale tag-ului <TD>

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