	Biologie	Chimie	Didactica	Fizica	Geografie	Informatica
	Istorie	Literatura	Matematica	Psihologie

Html

Index » educatie » » informatica » Html
» Imagini in HTML

Imagini in HTML

Imagini

Formate de imagine

Tag-ul <img>

Adresa URL absoluta, adresa URL relativa

Chenarul unei imagini

Atributele width si height ale unei imagini

Alinierea pe verticala a imaginilor

Alinierea pe orizontala a imaginilor

Spatiul alb in jurul unei imagini

Atributul clear al etichetei <br>

Atributul alt

Atributul lowsrc

Utilizarea imaginilor la crearea listelor particularizate

Utilizarea imaginilor pentru legaturi

Formate de imagine

Inainte de a discuta despre marcajul HTML in sine,este important sa acordam putin spatiu formatelor grafice acceptabile, aceasta deoarece exista sute de formate diferite, dintre care numai cinci sunt intelese de software-ul de navigare Web. Cele cinci formate sunt:

- GIF (Graphic Interchange Format) are extensia *.gif;

- JPEG (Joint Photographic Experts Group) are extensia *.jpg sau *.jpeg;

- PNG (Portable Network Graphics) are extensia *.png;

- TIFF (Tagged Image File Format) are extensia *.tif sau *.tiff;

- BMP (BitMaP format) are extensia *.bmp.

Dintre acestea formatele GIF, JPEG si PNG sunt acceptate de majoritatea browserelor. Formatul BMP este acceptat de browserul Internet Explorer. Formatul TIFF este afisat corect numai daca browserul are un program de completare sau o aplicatie ajutatoare dedicata. Unele browsere permit doar formatul GIF.

Comparatia performantelor formatelor GIF si JPEG consta in faptul ca imaginile GIF pot utiliza doar 256 de culori, pe cand JPEG permite milioane de culori distincte intr-o imagine. Ambele formate grafice comprima imaginile pentru a reduce dimensiunea fisierelor dar, deoarece comprimarea se face in mod diferit, unele imagini vor avea dimensiuni mult mai mici intr-un format decat in celalalt.

Motivul principal pentru care formatul de imagine GIF este atat de atractiv nu este paleta mica de culori, ci faptul ca se poate reduce paleta de culori pana la minimul necesar pentru o imagine specifica, ceea ce conduce la o scadere dramatica a dimensiunii fisierului si a timpului necesar pentru incarcarea respectivei pagini de Web cu acea imagine de catre un browser.

Imaginile grafice sunt construite din pixeli: puncte distincte de informatie din imagine. In cazul unei imagini GIF, fiecare pixel poate avea una din cele maxim 256 de culori distincte.

GIF-urile sunt reprezentate pe 8biti/pixel, li se poate stabili transparenta, se pot stabili elemente de animatie acestora si sunt recomandate mai ales pentru desene. JPEG-urile sunt reprezentate pe 24 biti/pixel, nu au capacitatea de transparenta, nu au capacitate de animatie si sunt recomandate a fi utilizate mai ales pentru fotografii. Cele mai avansate dar si cele mai mari ca si dimensiune (32 biti/pixel) sunt imaginile de tip PNG. Ele au toate caracteristicile mai sus precizate (transparenta, animatie) si pot fi folosite atat la desene cat si la poze.

1.2 Tag-ul <img>

Tag-ul necesar lucrului cu imagini este <img>. Printre caracteristicile acestuia amintim:

este un tag de tip inline, adica se poate insera acest tag (si deci imaginea) oriunde in blocul de text, intr-o celula de tabel, ca bulet de lista, etc.;

nu necesita element de inchidere;

atributul care defineste numele si locatia fisierului imagine este src (fiind cel mai frecvent utilizat atribut al etichetei <img> si deci obligatoriu pentru inserarea unei imagini).

Formatul general este:

Fig. 1.1

Tag-ul img

<html>

<head>

<title>Elementul <img></title>

</head>

<body>

Text anterior imaginii.

Text dupǎ imagine.

</body>

</html>

Obs: Pentru ca acest exemplu sa functioneze corect, ambele fisiere, 1.2_img.html si cat.jpg, trebuie sa fie in acelasi director. De asemenea, si numele fisierului trebuie sa fie scris corect, in caz contrar, va apare ceva de genul:

Fig. 1.2

Nume de fisier scris gresit la src

<html>

<head>

<title>Elementul <img></title>

</head>

<body>

Text anterior imaginii.

Text dupǎ imagine.

</body>

</html>

Caseta mica din figura 1.2 care contine un x rosu in interior, nu este imaginea ce s-a dorit inclusa ci o indicatie din partea browserului ca s-a specificat o imagine grafica prin marcajul <IMG> care nu a fost incarcata. In acest caz, imaginea nu a fost incarcata deoarece s-a scris gresit numele fisierului grafic, specificand cat1.jpg in loc de cat1.jpg. O greseala de acest gen este un alt motiv intemeiat pentru a testa in mod extensiv paginile de Web, inainte ca alti utilizatori sa le viziteze.

1.3 Adresa URL absoluta, adresa URL relativa

Fig. 1.3

Adresa absoluta, adresa relativa

Exemple de adrese absolute:

https://umbra.nascom.nasa.gov/images/latest_eit_28gif

file:///c:/Student/Ciprian/Seminar4/Seminar41/Seminar411/Seminar411.gif

Sa presupunem ca avem structura de directoare prezentata in figura 1.3. Din pagina "adresa.html" putem accesa celelalte imagini, folosind referinte relative cu urmatoarea sintaxa:

/c.gif

../../student.gif

../../Vasile/Vasile.gif

../../Vasile/Seminar4/vasile1.gif

Seminar41/seminar41.jpg

Seminar42/seminar41.jpg

Seminar43/seminar43.jpg

Seminargif

Seminar41/Seminar411/seminar411.gif

Seminar41/Seminar412/seminar412.gif

Fig. 1.3

Tema

Tema:

1 Sa se creeze structura de directoare din figura 1.2 si sa se copieze fisierele imagine la destinatiile potrivite din imagine.

2 Sa se scrie codul sursa HTML aferent figurii 1.4 (adresa.html - vezi si figura 1.3) si sa se vizualizeze intr-un browser. Pentru a deplasa textul la dreapta, se foloseste simbolul spatiu (vezi seminar 3). De asemenea, se folosesc diacriticele.

1.4 Chenarul unei imagini

Prin definitie, browser-ul va afisa o imagine fara chenar sau bordura. Pentru a adauga un chenar negru la o imagine, atribuiti o valoare atributului border al etichetei <img>. Valorile posibile sunt 0 (valoare implicita) si orice numar intreg pozitiv, care reprezinta grosimea chenarului in pixeli.

Fig. 1.4

Bordura unei imagini

<html>

<head>

<title>Bordura (chenarul) unei imagini</title>

</head>

<body>

Text fǎrǎ bordurǎ.

Text cu bordurǎ.

</body>

</html>

1.5 Atributele width si height ale unei imagini

Prin definitie, browserul afiseaza imaginile cu latimile si inaltimile lor reale. Daca doriti sa scalati o imagine la o alta latime sau inaltime, stabiliti valorile atributelor width si/sau height ale elementului <img>. Valorile posibile sunt (fig. 1.5):

numere intregi pozitive (reprezentand marimea in pixeli);

procentaje (reprezentand o fractiune din latimea sau inaltimea imaginii initiale - fig. 1.5).

Fig. 1.5

Inaltimea si latimea pentru o imagine in Word

Fig. 1.6

Fereastra de proprietati a unei imagini

Pentru a vizualiza inaltimea si respectiv latimea unei imagini, in browser, se executa un clic dreapta pe imagine si se selecteaza optiunea Properties din meniul contextual afisat (fig. 1.6). Daca aceste atribute nu sunt precizate, imaginea se incarca avand dimensiunile proprii, dar aceasta presupune schimbarea aspectului paginii si acest lucru poate fi suparator pentru utilizator. Practic, atributele width si height nu trebuie sa lipseasca atunci cand folosim imagini.

Fig. 1.7

Injumatatirea proportionala a imaginii

<html>

<head>

<title>Bordura (chenarul) unei imagini</title>

</head>

<body>

Imagine actualǎ (335 x 250)

Imagine înjumǎtǎţitǎ

</body>

</html>

Pentru a modifica dimensiunea unei imagini este suficient sa modificati doar o dimensiune, iar browserul va calcula proportional si cealalta dimensiune (in cazul nostru, s-a modificat latimea). Daca se precizeaza ambele valori pentru width si height, imaginea va fi afisata disproportionat si, prin urmare, deformata.

Tema:

3 Sa se scrie codul sursa al unui fisier HTML (4_3.htm) in care sa se obtine acelasi efect ca in figura 1.7 doar ca prin modificarea atributului height

4 Sa se scrie codul sursa HTML astfel incat imaginea de mai sus (dog.jpg) sa fie afisata disproportinat in paralel cu imaginea normala.

1.6 Alinierea pe verticala a imaginilor

Alinierea unei imagini relativ la alte elemente inline dintr-o pagina Web (in special text) poate fi stabilita utilizand atributul align al etichetei <img>. Valorile posibile sunt:

top

texttop (doar Netscape)

middle

mbsmiddle

center

bottom (valoare prestabilita)

baseline

absbottom

Fig. 1.7

Alinierea pe verticala a imaginilor

Fig. 1.8

Tema

<html>

<head>

<title>Alinierea pe verticalǎ a imaginilor</title>

</head>

<BODY >

<img src='button.gif' Align='top' BORDER='0'> Sus

<hr>

<img src='button.gif' ALIGN='middle' BORDER='0'> La mijloc

<hr>

<img src='button.gif' ALIGN='bottom' BORDER='0'> Jos

</BODY>

</html>

Diferite browsere ar putea alinia imaginile astfel decat s-a prezentat aici.

Tema:

5 Sa se scrie codul sursa al unui fisier HTML aferent figurii 1.8 si sa se vizualizeze in browser (cat.jpg).

1.7 Alinierea pe orizontala a imaginilor

Pentru a stabili alinierea pe orizontala a unei imagini utilizati atributul align al etichetei <img>, care are urmatoarele valorile posibile:

left;

right;

Fig. 1.9

Alinierea pe orizontala

Fig. 1.10

Tema

<html>

<head>

<title>Alinierea pe orizontalǎ a imaginilor</title>

</head>

<body>

<h2>A Bit of History</h2>

<p align='justify'>Orizontala.txt </p>

</body>

</html>

Tema:

6 Pentru aceeasi imagine, realizati o aliniere a imaginii la dreapta si una centrala.

1.8 Spatiul alb in jurul unei imagini

Exista doua atribute care definesc dimensiunile spatiului alb dintre o imagine si alt continut al unei pagini: hspace si vspace. Atributele vspace si hspace precizeaza intervalul liber (in pixeli) lasat intre imagine si text pe verticala, respectiv pe orizontala. Aceste atribute sunt extrem de utile, iar valorile posibile pentru aceste atribute sunt:

numere intregi pozitive (reprezentand marimea in pixeli a spatiului alb);

procentaje din marimea blocului parinte.

Fig. 1.11

Spatiul alb in jurul unei imagini

Fig. 1.12

Atributul clear al tag-ului <br>

<html>

<head>

<title>Spaţiul alb din jurul unei imagini</title>

</head>

<body>

Text înainte de imagine.Text înainte de imagine.

Text înainte de imagine.Text înainte de imagine.Text înainte de imagine.Text înainte de imagine.

Text dupǎ imagine. Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.

Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.

</body>

</html>

1.9 Atributul clear al etichetei <br>

Pentru a elimina textul din dreapta sau din stanga unei imagini, utilizam tag-ul <br> al carui element clear are una din valorile:

- all;

- left;

- none;

- right.

Codul sursa al figurii 1.12 este:

<html>

<head>

<title>Atributul clear al tag-ului <br></title>

</head>

<body>

Text înainte de imagine.Text înainte de imagine.

Text înainte de imagine.Text înainte de imagine.Text înainte de imagine.Text înainte de imagine.

Text dupǎ imagine. Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.

Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.Text dupǎ imagine.

</body>

</html>

1.10 Atributul alt

Desi nu este obligatoriu, se recomanda sa adaugati atributul alt la elementul <img>. Atributul alt va permite sa atasati o descriere la o imagine (tooltip) care se activeaza atunci cand se plaseaza cursorul mouse-ului peste respectiva imagine. Valoarea atributului alt poate fi orice sir de caractere intre ghilimele care are maxim 1.024 de caractere. In cazul in care, din diverse motive, browserul nu reuseste sa afiseze imaginea, el va afisa totusi valoarea atributului alt. Pentru descrieri cu mai mult de 1.24 de caractere, utilizati atributul longdesc

Fig. 1.13

Atributul alt

<html>

<head>

<title>Atributul alt</title>

</head>

<body>

</body>

</html>

1.11 Atributul lowsrc

Utilizand atributul lowsrc, puteti atasa o a doua adresa URL la un element <img>. Aceasta adresa URL identifica o imagine similara celei indicate de atributul src, dar in format cu rezolutie scazuta. Imaginile indicate de atributele src si lowsrc pot fi imagini diferite. Imaginea cu rezolutie scazuta va fi descarcata prima, iar imaginea propriuzisa (indicata de atributul src) va fi descarcata ulterior (mai ales pentru conexiunile lente). Este recomandat sa utilizati aceleasi dimensiuni pentru ambele imagini, astfel incat browserul sa nu fie obligat sa afiseze din nou pagina Web, dupa ce a descarcat si imaginea cu rezolutie inalta.

Fig. 1.14

Atributul lowsrc

Tema:

7 Pentru figura 1.14, scrieti codul HTML. Se vor folosi imaginile sacrecr2.gif si sacrecr.jpg

1.12 Utilizarea imaginilor la crearea listelor particularizate

Prin aceasta metoda se vor inlocui buletele de la fiecare inceput de lista cu o imagine. Prin aceasta metoda, practic, permite inlocuirea tag-ului <li> cu acela al tag-ului <img>. De fapt, nu este decat un ansamblu de imagini insotite de text si formatate cu elemente <br>.

<html>

<head>

<title>Liste neordonate cu imagini ca şi buline</title>

</head>

<body>

<ul>

<img src='smiley.gif'> Primul element al listei. <br>

<img src='app-icon.gif'> Al doilea element al listei. <br>

<img src='capf.gif' width='10'> Al treilea element al listei. <br>

<img src='cat.jpg' width='20'> Al patrulea element al listei. <br>

<img src='1.gif' width='10'> Al cincilea element al listei. <br>

</ul>

</body>

</html>

Fig. 1.15

Utilizarea imaginilor la liste

1.13 Utilizarea imaginilor pentru legaturi

Imaginile pot fi folosite si pe post de legatura. Legatura poate fi realizata la un alt fisier HTML dar, cea mai folosita posibilitate este aceea in care initial se deschide o imagine mai mica (sau cu rezolutie mai slaba) si, daca se doreste, se poate vizualiza imaginea cu rezolutie mai buna. In exemplul de mai jos, imaginea a fost inclusa cu rol de legatura intre cele doua pagini (fig. 1.16 si 1.17):

Prin atributul Href din ancora se specifica fisierul HTML (sau o alta imagine) catre care se va genera legatura hipertext, plecand de la imaginea setata prin tag-ul IMG (activarea hyperlink-ului se realizeaza prin executarea unui clic in orice locatie a imaginii).

Ca urmare, daca folosim un browser care suporta imagini, initial, pe ecran, va apare o imagine mai mica. Aceasta face legatura cu aceeasi imagine, dar care este mult mai pretentioasa ca rezolutie si dimensiune. Evident ca se pot introduce imagini diferite dar, in exemplul de mai jos, legatura este o aceeasi imagine dar cu o rezolutie mai buna (din gif, prin legatura, se deschide o imagine de tip jpg).

Fig. 1.16

Utilizarea imaginilor la legaturi

Fig. 1.17

Imaginea cu rezolutie marita

Tema:

8 Pentru figurile 1.16 si 1.17 scrieti codul HTML al fisierului Legatura.htm. Se vor folosi imaginile sacrecr2.gif si sacrecr.jpg.

Tabele

Bordurile unui tabel

Alinierea tabelelor

Spatiul alb din jurul unui tabel

Atributele cellpadding si cellspacing

Latimea si inaltimea unui tabel

Culoarea de fundal

Eticheta <th>

Latimea si inaltimea unei celule

Alinierea continutului celulei

Atributele colspan si rowspan

Atributul nowrap

Celule goale

Tag-ul <caption>

Structura unui tabel

Elementul <colgroup>

In limbajul HTML, elementul <table> . </table> este unul din cele mai folosit si cu cea mai mare complexitate. Ele este folosit atat pentru pozitionarea altor elemente (macheta) cat si pentru pozitionarea informatiei in celule (linii si coloane) si, de aici, in pagina.

Orice tabela, in HTML, este compusa din:

- eticheta <table> . </table>;

- eticheta <tr> (table row) prin care se defineste o linie (</tr> este optionala in HTML dar obligatorie in XHTML);

- eticheta <td> (table data) prin care se defineste o celula (</td> este optionala in HTML dar obligatorie in XHTML).

Fig. 2.1

Tabela simpla

<html>

<head>

<title>Tabelǎ simplǎ</title>

</head>

<body>

Text dinainte de tabelǎ.

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Text de dupǎ tabelǎ.

</body>

</html>

2.1 Bordurile unui tabel

Exemplul anterior contine un tabel fara borduri (adica bordura este egala cu zero). Daca dorim sa adaugam marginile sale (bordurile), vom folosi atributul border. Atributul border precizeaza grosimea chenarului de incadrare a tabelului.

<html>

<head>

<title>Tabelǎ simplǎ cu bordurǎ</title>

</head>

<body>

Text dinainte de tabelǎ.

<tr>

</tr>

<tr>

</tr>

</table>

Text de dupǎ tabelǎ.

</body>

</html>

Fig. 2.2

Tabela cu bordura=1

Daca nu se precizeaza nici o valoare (ca in exemplul de mai sus), atunci grosimea bordurii va fi prestabilita, adica egala cu 1 (1 pixel). Deci, atributul border este similar cu border=1.

Daca se doreste ingrosarea bordurii atunci se va preciza intre ghilimele valoarea dorita:

Fig. 2.3

Tabela simpla cu bordura=7

<html>

<head>

<title>Tabelǎ simplǎ cu bordurǎ egalǎ cu 7</title>

</head>

<body>

Text dinainte de tabelǎ.

<tr>

</tr>

<tr>

</tr>

</table>

Text de dupǎ tabelǎ.

</body>

</html>

Atributul frame al tag-ului <table>

Atributul frame al elementului <table> ne permite sa precizam ce parti din bordura vor fi afisate. Valorile posibile pentru frame sunt (fig. 2.5):

void;

above;

below;

hsides;

lhs;

vsides;

box;

border.

Void - elimina toate liniile exterioare ale tabelului;

Above - afiseaza o linie in partea superioara a cadrului tabelului;

Below - afiseaza o linie inferioara a cadrului tabelului

Hsides - afiseaza cate o linie in partea superioara si inferioara a cadrului tabelului;

Lhs - afiseaza cate o linie in partea din stanga a cadrului tabelului;

RHS - afiseaza cate o linie in partea din dreapta a cadrului tabelului;

Vsides - afiseaza cate o linie in partea din stanga si din dreapta a cadrului tabelului;

Box - afiseaza cate o linie pe toate laturile cadrului tabelei;

Border - afiseaza cate o linie pe toate laturile cadrului tabelei.

Tema:

9 Sa se scrie codul sursa HTML al figurii 2.4 si sa se vizualizeze in browser.

10 Pentru figura 2.5 de mai jos, realizati cate un fisier HTML cu cate un tabel pentru fiecare valoare posibila al atributului frame (9 tabele notate cu 10_Void.html, 10_Above.html, 10_Below.html, etc.).

Fig. 2.4

Tabela cu frame="box"

Fig. 2.5

Valorile atributului frame

Atributul rules al etichetei <table>

Atributul rules al tag-ului <table> ne permite sa precizam modul in care vor fi afisate bordurile pentru celulele tabelei. Valorile posibile pentru acest atribut sunt:

none;

groups;

rows;

cols;

all.

None - elimina toate liniile interioare ale tabelei;

Groups - afiseaza linii orizontale intre toate grupurile din tabel. Grupurile sunt specificate prin elemente THEAD, TBODY, TFOOT si COLGROUP;

Rows - afiseaza linii orizontale intre toate liniile tabelului;

Cols - afiseaza linii verticale intre toate coloanele tabelului;

All - afiseaza linii intre toate liniile si coloanele tabelei.

Fig. 2.6

Valorile atributului rules

Tema:

11 Pentru figura 2.6 de mai sus, realizati cate un fisier HTML cu cate un tabel pentru fiecare valoare posibila al atributului rules (4 tabele notate cu 11_None.html, 11_Groups.html, 11_Rows.html si 11_Cols.html).

Fig. 2.7

Tabel cu atributul rules=all

<html>

<head>

<title>Atributul rules='all'</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Aceste doua atribute combinate au ca efect un nivel remarcabil de control asupra marginilor exterioare si liniilor interioare dintr-un tabel HTML, fiind insa destul de complexe.

Observatie: O celula a unui tabel poate contine text, imagini dar mai ales un alt tabel care, la randul lui, poate contine si el un alt tabel, etc.

Tema (facultativa):

12 Pe baza observatiei de mai sus si cu ajutorul atributelor cellpadding si cellspacing (punctul 2.4), pentru figura 2.5 de mai sus, realizati un singur fisier HTML care contine toate tabelele de mai sus (fiecare tabel al imaginii va fi continut intr-o celula a unui tabel mai mare). Dati-i numele 12_Frame.html si vizualizati-l in browser.

13 Analog pentru figura 2.6 (un tabel mare cu 5 celule ! - 13_Rules.html).

Culoarea bordurii unui tabel

Culoarea bordurii unui tabel se stabileste prin atributul bordercolor. Valorile posibile sunt:

- un nume de culoare (de exemplu "#aqua");

- o tripleta RGB (de exemplu "#ff0056").

Fig. 2.8

Culoarea bordurii (colorborder) prin Internet Explorer

Fig. 2.9

Culoarea bordurii (colorborder) prin Netscape Navigator

<html>

<head>

<title>Culoarea bordurii unui tabel</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Observatii:

1) Browser-ul Netscape Navigator afiseaza bordura de tabel in stil 3-D si pastreaza nemodificata culoarea bordurilor de celule (negru);

2) Browserul Internet Explorer afiseaza color atat bordura de tabel cat si bordurile de celule, iar bordura de tabel o afiseaza intr-un stil plan (nu 3-D - vezi figurile 2.8 si 2.9);

3) Pentru a pastra stilul 3-D de bordura in browser-ul Internet Explorer, trebuie sa folosim atributele:

- bordercolordark;

- bordercolorlight.

Bordercolordark=culoare - prin acest atribut se precizeaza culoarea inchisa dintre cele doua culori specificate (RGB sau nume de culoare);

Bordercolorlight=culoare - prin acest atribut se precizeaza culoarea deschisa dintre cele doua culori specificate (RGB sau nume de culoare).

<html>

<head>

<title>Culoarea bordurii unui tabel prin bordercolordark şi bordercolorlight</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Fig. 2.10

Culoarea bordurii (colorborderdark si colorborderlight) prin Internet Explorer

Fig. 2.11

Culoarea bordurii (colorborderdark si colorborderlight) prin Netscape Navigator

2.2 Alinierea tabelelor

Se utilizeaza atributul <align>. Valorile posibile sunt:

- left (valoare implicita);

- center;

- right.

Fig. 2.12

Alinierea tabelelor

<html>

<head>

<title>Alinierea unui tabel</title>

</head>

<body>

<br> Text înaintea tabelei 1

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br> Text înafara tabelei 1<br> Text înafara tabelei 1

<strong><br> Text înafara tabelei 1 </strong><br> Text înafara tabelei 1 <br> Text înafara tabelei 1

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br> Text înafara tabelei 2<br> Text înafara tabelei 2 <br> Text înafara tabelei 2<br> Text înafara tabelei 2

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br> Text înafara tabelei 3<br> Text înafara tabelei 3<br> Text înafara tabelei 3<br> Text înafara tabelei 3<br> Text înafara tabelei 3 <br> Text înafara tabelei 3

</body>

</html>

2.3 Spatiul alb din jurul unui tabel

Se stabileste cu atributele:

- hspace;

- vspace.

Valorile posibile pentru aceste atribute sunt numere intregi pozitive (dimensiunea spatiului alb in pixeli).

Fig. 2.13

Spatiul alb din jurul unui tabel

<html>

<head>

<title>Alinierea unui tabel</title>

</head>

<body>

<br> Text înaintea tabelei.

<tr>

</table>

Text dupǎ tabelǎ.Text dupǎ tabelǎ.Text dupǎ tabelǎ.Text dupǎ tabelǎ.

</body>

</html>

2.4 Atributele cellpadding si cellspacing

Atributul cellpadding al tag-ului <table> stabileste spatiul dintre continutul unei celule si marginea celulei. Valoarea implicita este 0.

Atributul cellspacing al tag-ului <table> defineste spatiul alb dintre marginile celulelor adiacente. Valoarea prestabilita este 0 (pentru tabele fara borduri) si 2 (pentru tabele cu borduri).

Valorile pentru aceste doua atribute pot fi:

numere intregi pozitive, inclusiv 0 (dimensiunea in pixeli);

procentaje (reprezentand un procentaj din dimensiunea tabelei).

Fig. 2.14

Tabel fara atributele cellpadding si cellspacing

Fig. 2.15

Tabel cu atributele cellpadding si cellspacing

Codul HTML pentru figura 2.15 este:

<html>

<head>

<title>Atributele cellpadding şi cellspacing</title>

</head>

<body>

<tr>

</table>

</body>

</html>

Tema:

14 Sa se modifice codul sursa de mai sus astfel incat distanta de la text la marginea celulei sa fie de 25 iar distanta dintre bordurile celulelor tabelei sa fie de 25. Sa se vizualizeze prin browser.

15 Pentru figura 2.14 sa se scrie codul HTML aferent.

2.5 Latimea si inaltimea unui tabel

Prin definitie, browser-ul calculeaza latimea si inaltimea unui tabel astfel incat continutul fiecarei celule sa fie afisat corect. Se pot defini dimensiunile unui tabel utilizand atributele width si height

Valorile posibile pentru aceste doua atribute sunt:

- numere intregi pozitive (dimensiunea in pixeli);

- procentajul (din latimea sau inaltimea blocului parinte).

Width specifica, in procente, cat la suta din suprafata ferestrei o ocupa tabelul.

Observatie: Atributul height nu mai este inclus in specificatiile HTML 01 astfel ca, daca este necesar, browser-ul va redefini dimensiunile precizate pentru table.

Fig. 2.16

Latimea si inaltimea unui tabel

<html>

<head>

<title>Laţimea şi înǎlţimea unui tabel</title>

</head>

<body>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Efect: aparitia ( dupa completarea codului ) a unui tabel cu un chenar albastru avand grosimea de 5 pixeli. Tabelul va fi plasat in dreapta paginii; distanta dintre celule va fi de 10 pixeli, iar distanta dintre text si marginea celulei de 5 pixeli. Inaltimea tabelului ar trebui sa fie de 20 de pixeli, dar browserele rareori tin seama de atributul height.

2.6 Culoarea de fundal pentru tabela

Se stabileste prin folosirea atributului bgcolor. Acest atribut poate fi aplicat intregului tabel (in interiorul tag-ului <table>) sau unei linii (in interiorul tag-ului <tr>) sau chiar unei singure celule (in interiorul etichetei <td>). Vom vedea ulterior ca bgcolor se poate aplica si tag-ului <th> (vezi mai jos).

Daca exista mai multe atribute bgcolor intr-un tabel, prioritatea lor este urmatoare:

elementul <td> sau <th>;
elementul <tr>;
elementul <table>.

Fig. 2.17

Fundal pentru tabela (celula, linie, tabela)

Fig. 2.18

Tema

Tema:

16 Pentru figura 2.17, sa se scrie codul HTML aferent si sa se vizualizeze prin browser.

Obs: Pentru ca vizitatorul sa poata citi fara probleme textul introdus in tabel, fundalul celulelor trebuie sa fie nu o imagine, ci o culoare odihnitoare si aflata in bun contrast cu fontul textului.

Imagine de fundal pentru tabela

Imaginea de fundal pentru o tabela se stabileste cu acelasi atribut cu care se stabileste imaginea de fundal pentru intreaga pagina: background, dar acest atribut se aplica asupra tag-ului <table>.

Daca exista mai multe atribute background intr-un tabel, prioritatea lor este urmatoare:

elementul <td> sau <th>;
elementul <tr>;
elementul <table>.

Obs: Atributul background nu este definit pentru elementul <tr> (linie) in standardul HTML 01 si nu este implementat de catre browserul Internet Explorer.

<html>

<head>

<title>Imagine de fundal pentru tabelǎ</title>

</head>

<body>

<td>Fundal imagine din linie</td>

<td background='trei.gif'>Fundal imagine de la celulǎ</td>

</tr>

<tr>

<td>Fundal imagine de la tabelǎ</td>

<td background='images.jpg'>Fundal imagine de la celulǎ</td>

<td>Fundal imagine de la tabelǎ</td>

</tr>

</table>

</Font>

</body>

</html>

Observatia de mai sus se aplica asupra acestui cod sursa HTML. Se observa usor diferenta de vizualizare dintre cele doua browsere.

Fig. 2.19

Imagine de fundal prin browser-ul Opera

Fig. 2.20

Imagine de fundal prin browser-ul Internet Explorer

2.7 Eticheta <th>

<th> este similar lui <td> cu diferenta ca stilul textului din aceasta eticheta se seteaza automat la aldin (boldat sau ingrosat). <th> este utilizat in special pentru crearea anteturilor de tabel unde aceste boldari sunt necesare.

Fig. 2.21

Eticheta <th>

Fig. 2.22

Tema

Tema:

17 Pentru figura 2.22, sa se scrie codul HTML aferent si sa se vizualizeze prin browser.

2.8 Latimea si inaltimea unei celule

Prin definitie, browser-ul calculeaza latimea si inaltimea fiecarei celule dintr-un tabel astfel incat tot continutul sa fie afisat corect. Se utilizeaza atributele width si height ale tag-urilor <td> sau <th>. Valorile posibile sunt:

- numere intregi pozitive (dimensiunea in pixeli);

- procentajul (din latimea sau inaltimea blocului parinte).

Obs: Schimbarea inaltimii unei celule modifica automat inaltimea tuturor celorlalte celule din linie. In mod similar, schimbarea latimii unei celule, modifica automat latimea tuturor celulelor din acea coloana.

Fig. 2.22

Latimea si inaltimea unei celule

<html>

<head>

<title>Lǎţimea şi înǎlţimea unei celule</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

2.9 Alinierea continutului celulei

Alinierea continutului unei celule se poate face prin intermediul a doua atribute:

a) align - care are valorile posibile: left (implicit), center, right, justify si char;

b) valign - cu valorile: top, middle (prestabilit), bottom si baseline.

Align realizeaza alinierea textului unei celule fata de marginile stanga-dreapta (bordurile verticale) ale celulei in timp ce valign realizeaza alinierea textului fata de marginile sus-jos (bordurile verticale) ale celulei.

Fig. 2.23

Aliniere verticala

<html>

<head>

<title> Aliniere verticalǎ</title>

</head>

<body>

Aliniere top

</td>

Aliniere la mijloc

</td>

Aliniere jos

</td>

</tr>

</table>

</body>

</html>

Fig. 2.24

Aliniere pe orizontala

<html>

<head>

<title> Aliniere pe orizontalǎ</title>

</head>

<body>

<tr>

Aliniere prestabilitǎ

</td>

Aliniere la dreapta

</td>

Aliniere la stânga

</td>

</tr>

</table>

</body>

</html>

Fig. 2.25

Aliniere pe orizontala

Tema:

18 Pentru figura 2.25, sa se scrie codul HTML aferent si sa se vizualizeze prin browser.

2.10 Atributele colspan si rowspan

Aceste atribute permit extinderea textului pe mai multe randuri sau coloane. Ele se aplica elementelor de celula (<td> sau <th>). Valorile posibile pentru atributele colspan si rowspan sunt numere intregi pozitive, care reprezinta numarul de coloane sau de linii ocupate de celula extinsa.

Fig. 2.26

Tabela inainte de aplicarea atributului colspan

Fig. 2.27

Tabela dupa aplicarea atributului colspan

Codul sursa HTML va fi:

<html>

<head>

<title> Atributul colspan</title>

</head>

<body>

<tr>

<td colspan='3' align='center'>Era mezozoicǎ</td>

</tr>

<tr>

<td>Triasic</td>

<td>Jurasic</td>

<td>Cretacic</td>

</tr>

</table>

</body>

</html>

Fig. 2.28

Tema

Fig. 2.29

Tema

Tema:

19 Pentru figura 2.28, sa se scrie codul HTML aferent si sa se vizualizeze prin browser (atributul colspan).

20 Analog pentru figura 2.29.

Atributul rowspan

Fig. 2.30

Tabela inainte de aplicarea atributului rowspan

Fig. 2.31

Tabela dupa aplicarea atributului rowspan

Codul sursa al rezolvarii este:

<html>

<head>

<title> Atributul rowspan</title>

</head>

<body>

</table>

</body>

</html>

Fig. 2.32

Tema

Fig. 2.33

Tema

Tema:

21 Pentru figura 2.32, sa se scrie codul HTML aferent si sa se vizualizeze prin browser (atributul colspan si rowspan).

22 Analog, pentru figura 2.33.

2.11 Atributul nowrap

Pentru a afisa pe un singur rand textul intr-o celula, se utilizeaza atributul al elementului <td> sau <th>

<html>

<head>

<title> Atributul</title>

</head>

<body>

<tr> <td>c11</td> <td> Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.Text foarte lung.</td></tr>

</table>

</body>

</html>

Fig. 2.34

Atributul nowrap

2.12 Celule goale

Pentru a adauga o celula goala (fara text) se aplica asupra etichetei <th> sau <td>, simbolul space (spatiu -  

Fig. 2.35

Spatiu gol

Fig. 2.36

Titlul tabelei

2.13 Tag-ul <caption> (titlul tabelului)

Pentru a adauga un titlu unui tabel, introduceti un element <caption> . </caption> in interiorul tag-ului <table> . </table>, imediat dupa eticheta de deschidere a tabelei (<table>).

Titlul tabelului poate fi aliniat prin intermediul atributului align al etichetei <caption>, iar valorile posibile sunt:

- bottom;

- center;

- top;

- left;

- right.

Codul sursa al figurii 2.36 este:

<html>

<head>

<title> Titlul tabelului</title>

</head>

<body>

<caption align='center'>Titlul tabelului</caption>

</table>

</body>

</html>

2.14 Structura unui tabel

Continutul unui tabel poate fi impartit in 3 sectiuni: o parte de antet, o parte de corp de tabel si o parte de final. Aceste sectiuni sunt:

1) <thead> - defineste sectiunea de antet;

2) <tfoot> - defineste partea de final a tabelei.

3) <tbody> - defineste corpul tabelului;

Toate cele trei tag-uri sunt tag-uri incluse in blocul <table>. Ele, practic, impart corpul <table> in 3 parti, sectiuni. Fiecare tag, dintre cele mai sus mentionate, accepta tag-uri de linie (<tr>) si respectiv atribute incluse in corpul lor (align, bgcolor, valign, etc.). Ordinea de scriere a lor este cea precizata mai sus: <tbody> este ultimul, <tfoot> urmeaza dupa <thead>.

Fig. 2.37

Structura tabelei

<html>

<head>

<title> Structura tabelului</title>

</head>

<body>

<tr><td>antet1</td> <td>antet2</td></tr>

</thead>

<tr><td>subsol1</td><td>subsol2</td></tr>

</tfoot>

<tbody>

</tbody>

</table>

</body>

</html>

2.15 Elementul <colgroup>

Se foloseste pentru a stabili un stil comun pentru toate celulele unei coloane. In interiorul blocului <colgroup> se introduce elementul <col> prin care se descrie fiecare coloana a grupului.

Ambele tag-uri accepta urmatoarele atribute pentru descrierea stilului:

a) align;

b) valign;

c) width.

Fig. 2.38

Tag-urile <colgroup> si <col>

<html>

<head>

</head>

<body>

</colgroup>

</table>

</body>

</html>

Recapitulare tabele:

Tabelele se insereaza prin tag-ul <table>;

Tabela se poate imparti in 3 sectiuni: thead, tbody si tfoot;

O tabela este compusa din linii (<tr>) si celule (<td>);

Adaugarea unei borduri se face prin atributul border al tag-ului <table>;

Culoarea bordurii se stabileste prin bordercolor;

Proiectarea bordurilor se face prin atributele frame si rules;

Alinierea tabelului fata de pagina Web se face prin atributul align; alinierea datelor din celule se face prin align si valign;

Spatiul alb din jurul tabelei se stabileste prin hspace si vspace;

Distanta dintre celule se stabileste prin cellspacing; distanta dintre continut si marginea celulei prin cellpadding;

Atributele width si height stabilesc latimea si inaltimea tabelei (celulei sau liniei);

Prin bgcolor se stabileste fundalul (la tabela, linie, celula); background stabileste o imagine de fundal;

Antetul unui tabel se defineste prin tag-ul <th>;

Fuzionarea mai multor celule adiacente intr-una singura se face prin colspan sau rowspan;

Titlul tabelei se stabileste prin <caption>;

<colgroup> stabileste proprietatile coloanelor (stiluri comune).

Politica de confidentialitate