Home - Rasfoiesc.com
Educatie Sanatate Inginerie Business Familie Hobby Legal
Doar rabdarea si perseverenta in invatare aduce rezultate bune. stiinta, numere naturale, teoreme, multimi, calcule, ecuatii, sisteme


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

1.1 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:

<img src =”nume_imagine.jpg”>

Fig. 1.1

Tag-ul img

<html>

<head>

<title>Elementul &lt;img&gt;</title>

</head>

<body>

Text anterior imaginii.

<img src='cat.jpg'>

Text dup&#462; 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 &lt;img&gt;</title>

</head>

<body>

Text anterior imaginii.

<img src='cat1.jpg'>

Text dup&#462; 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

Organization Chart

Fig. 1.3

Adresa absoluta, adresa relativa

Exemple de adrese absolute:

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

sau

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&#462;r&#462; bordur&#462;.

<img src='smiley.gif'>

Text cu bordur&#462;.

<img src='smiley.gif' border='6'>

</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):


Fig. 1.5

Inaltimea si latimea pentru o imagine in Word

Fig. 1.6

Fereastra de proprietati a unei imagini


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&#462; (335 x 250)

<img src='dog.jpg'>

Imagine &icirc;njum&#462;t&#462;&#355;it&#462;

<img src='dog.jpg' width='170'>

</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:

height (=135).

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:


Fig. 1.7

Alinierea pe verticala a imaginilor

Fig. 1.8

Tema


<html>

<head>

<title>Alinierea pe vertical&#462; 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:

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:


Fig. 1.9

Alinierea pe orizontala

Fig. 1.10

Tema


<html>

<head>

<title>Alinierea pe orizontal&#462; a imaginilor</title>

</head>

<body>

<h2>A Bit of History</h2>

<img src='sacrecr.jpg' align='right' width='200'>

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

</body>

</html>

Tema:

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:


Fig. 1.11

Spatiul alb in jurul unei imagini

Fig. 1.12

Atributul clear al tag-ului <br>


<html>

<head>

<title>Spa&#355;iul alb din jurul unei imagini</title>

</head>

<body>

Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.

Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.

<img src='bird.jpg' align='right' vspace='20' hspace='20' width='60'>

Text dup&#462; imagine. Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.

Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.

Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; 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 &lt;br&gt;</title>

</head>

<body>

Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.

Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.Text &icirc;nainte de imagine.

<img src='bird.jpg' align='right' vspace='20' hspace='20' width='100'>

<br clear='right'>

Text dup&#462; imagine. Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.

Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.

Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; imagine.Text dup&#462; 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>

<img src='cat.jpg' alt='Ce frumoas&#462; pisicu&#355;&#462; !' width='200'>

</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 &#351;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

<A HREF='sacrecr.jpg'> <IMG SRC = 'sacrecr2.gif'> </A>

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).


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.

2 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&#462; simpl&#462;</title>

</head>

<body>

Text dinainte de tabel&#462;.

<table>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

</table>

Text de dup&#462; tabel&#462;.

</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&#462; simpl&#462; cu bordur&#462;</title>

</head>

<body>

Text dinainte de tabel&#462;.

<table border>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

</table>

Text de dup&#462; tabel&#462;.

</body>

</html>

Fig. 2.2

Tabela cu bordura=1

Fig. 2.3

Tabela simpla cu bordura=7

<html>

<head>

<title>Tabel&#462; simpl&#462; cu bordur&#462; egal&#462; cu 7</title>

</head>

<body>

Text dinainte de tabel&#462;.

<table border='7'>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

</table>

Text de dup&#462; tabel&#462;.

</body>

</html>

Atributul frame al tag-ului <table>

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


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

Fig. 2.7

Tabel cu atributul rules=all

<html>

<head>

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

</head>

<body>

<table rules='all'>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

<tr>

<td>c31</td>

<td>c32</td>




<td>c33</td>

</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.

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.

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>

<table border='5' bordercolor='#0000FF'>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

<tr>

<td>c31</td>

<td>c32</td>

<td>c33</td>

</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 &#351;i bordercolorlight</title>

</head>

<body>

<table border='5' bordercolordark='green' bordercolorlight='red'>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

<tr>

<td>c31</td>

<td>c32</td>

<td>c33</td>

</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 &icirc;naintea tabelei 1

<br> Text &icirc;naintea tabelei 1

<br> Text &icirc;naintea tabelei 1

<br> Text &icirc;naintea tabelei 1

<table border='2' bordercolordark='green' bordercolorlight='red' align='center'>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

<tr>

<td>c31</td>

<td>c32</td>

<td>c33</td>

</tr>

</table>

<br> Text &icirc;nafara tabelei 1<br> Text &icirc;nafara tabelei 1

<strong><br> Text &icirc;nafara tabelei 1 </strong><br> Text &icirc;nafara tabelei 1<br> Text &icirc;nafara tabelei 1

<table border='2' bordercolordark='#0000FF' bordercolorlight='#000000' align='right'>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

<tr>

<td>c31</td>

<td>c32</td>

<td>c33</td>

</tr>

</table>

<br> Text &icirc;nafara tabelei 2<br> Text &icirc;nafara tabelei 2<br> Text &icirc;nafara tabelei 2<br> Text &icirc;nafara tabelei 2

<table border='2' bordercolordark='#FFFF00' bordercolorlight='#FF0000' align='left'>

<tr>

<td>c11</td>

<td>c12</td>

<td>c13</td>

</tr>

<tr>

<td>c21</td>

<td>c22</td>

<td>c23</td>

</tr>

<tr>

<td>c31</td>

<td>c32</td>

<td>c33</td>

</tr>

</table>

<br> Text &icirc;nafara tabelei 3<br> Text &icirc;nafara tabelei 3<br> Text &icirc;nafara tabelei 3<br> Text &icirc;nafara tabelei 3<br> Text &icirc;nafara tabelei 3<br> Text &icirc;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 &icirc;naintea tabelei.

<br> Text &icirc;naintea tabelei.

<br> Text &icirc;naintea tabelei.

<br> Text &icirc;naintea tabelei.

<table border='2' hspace='10' vspace='20' align='right'>

<tr>

<td>c11</td><td>c12</td><td>c13</td></tr>

<tr><td>c21</td><td>c22</td><td>c23</td></tr>

<tr><td>c31</td><td>c32</td><td>c33</td></tr>

</table>

Text dup&#462; tabel&#462;.Text dup&#462; tabel&#462;.Text dup&#462; tabel&#462;.Text dup&#462; tabel&#462;.

Text dup&#462; tabel&#462;.Text dup&#462; tabel&#462;.Text dup&#462; tabel&#462;.Text dup&#462; tabel&#462;.

</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:


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 &#351;i cellspacing</title>

</head>

<body>

<table border='2' cellpadding='3' cellspacing='10'>

<tr>

<td>c11</td><td>c12</td><td>c13</td></tr>

<tr><td>c21</td><td>c22</td><td>c23</td></tr>

<tr><td>c31</td><td>c32</td><td>c33</td></tr>

</table>

</body>

</html>

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&#355;imea &#351;i &icirc;n&#462;l&#355;imea unui tabel</title>

</head>

<body>

<tablewidth='60%' border='5' bordercolor='blue' cellspacing='10' cellpadding='5' align='right' height='20'>

<tr><td>c11</td><td>c12</td><td>c13</td>

</tr>

<tr>

<td>c21</td><td>c22</td><td>c23</td>

</tr>

</table>

</body>

</html>

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:

  1. elementul <td> sau <th>;
  2. elementul <tr>;
  3. elementul <table>.

Fig. 2.17

Fundal pentru tabela (celula, linie, tabela)

Fig. 2.18

Tema


Tema:

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:

  1. elementul <td> sau <th>;
  2. elementul <tr>;
  3. 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&#462;</title>

</head>

<body>

<Font color='#0000FF'>

<table border background='granite.gif'>

<tr background='Seminar411.gif'>

<td>Fundal imagine din linie</td>

<td>Fundal imagine din linie</td>

<td background='trei.gif'>Fundal imagine de la celul&#462;</td>

</tr>

<tr>

<td>Fundal imagine de la tabel&#462;</td>

<td background='images.jpg'>Fundal imagine de la celul&#462;</td>

<td>Fundal imagine de la tabel&#462;</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&#462;&#355;imea &#351;i &icirc;n&#462;l&#355;imea unei celule</title>

</head>

<body>

<table border>

<tr>

<td width='50' height='100'>c11</td>

<td width='75%'>c12</td>

<td width='30'>c13</td>

</tr>

<tr>

<td height='50'>c21</td>

<td>c22</td>

<td>c23</td>

</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&#462;</title>

</head>

<body>

<table border>

<tr height='150'>

<td valign='top' width='100'>

Aliniere top

</td>

<td valign='middle' >

Aliniere la mijloc

</td>

<td valign='bottom'>

Aliniere jos

</td>

</tr>

</table>

</body>

</html>

Fig. 2.24

Aliniere pe orizontala

<html>

<head>

<title> Aliniere pe orizontal&#462;</title>

</head>

<body>

<table border>

<tr>

<td width='250'>

Aliniere prestabilit&#462;

</td>

<td align='right' width='400'>

Aliniere la dreapta

</td>

<td align='left' width='455'>

Aliniere la st&acirc;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>

<table border>

<tr>

<td colspan='3' align='center'>Era mezozoic&#462;</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 border bgcolor='#FF0000'>

<tr ><td width='20'> 1 </td> <td width='20' rowspan='2'> 2+4 </td></tr>

<tr><td >3</td></tr>

</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>

<table border >

<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>

<tr><td>c21</td><td>c22</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 - &nbsp;).


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>

<table border bgcolor='#0000FF'>

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

<tr><td width='20'>c11</td><td width='40'>c12</td><td width='55'>c13</td></tr>

<tr> <td>c21</td><td>c22</td><td>c23</td></tr>

<tr> <td>c31</td><td>c32</td><td>c33</td></tr>

<tr></tr>

</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;

Fig. 2.37

Structura tabelei

<html>

<head>

<title> Structura tabelului</title>

</head>

<body>

<table border>

<thead bgcolor='#FF0000' align='center'>

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

</thead>

<tfoot bgcolor='#0000FF'>

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

</tfoot>

<tbody>

<tr><td>c11</td><td>c12</td></tr>

<tr><td>c21</td><td>c22</td></tr>

</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:

Fig. 2.38

Tag-urile <colgroup> si <col>

<html>

<head>

<title> Tag-ul &lt;colgroup&gt; &#351;i tag-ul &lt;col&gt;</title>

</head>

<body>

<table border>

<colgroup>

<col width='150' align='right'>

<col width='50' valign='bottom'>

</colgroup>

<tr height='100'><td>c11</td> <td>c12</td></tr>

<tr height='75'><td>c21</td> <td>c22</td></tr>

</table>

</body>

</html>


Recapitulare tabele:

1)          Tabelele se insereaza prin tag-ul <table>;

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

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

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

5)          Culoarea bordurii se stabileste prin bordercolor;

6)          Proiectarea bordurilor se face prin atributele frame si rules;

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

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

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

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

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

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

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

14)      Titlul tabelei se stabileste prin <caption>;

15)      <colgroup> stabileste proprietatile coloanelor (stiluri comune).







Politica de confidentialitate


Copyright © 2019 - Toate drepturile rezervate

Html


Access
Adobe photoshop
Autocad
Baze de date
C
Calculatoare
Corel draw
Excel
Foxpro
Html
Internet
Java
Linux
Mathcad
Matlab
Outlook
Pascal
Php
Powerpoint
Retele calculatoare
Sql
Windows
Word