Etichete pentru definirea unui tabel într-un document .html
Etichete Descrierea etichetelor
<TABLE>
</TABLE>
Definesc un tabel. Eticheta <TABLE> poate avea atributele:
- BORDER, care adaugă un chenar tabelului şi a cărui valoare întreagă pozitivă
este grosimea în pixeli a chenarului (valoarea 1 este prestabilită, iar valoarea
0 semnifică absenţa chenarului);
- ALIGN, care stabileşte modul de aliniere a tabelului în document şi poate
avea una din valorile left, right, center;
- BGCOLOR, care specifică culoarea de fond pentru tot tabelul;
- CELLSPACING, care stabileşte distanţa în pixeli dintre două celule vecine
ale tabelului (valoarea prestabilită este 2);
- CELLPADDING, care stabileşte distanţa în pixeli dintre marginea celulei
şi conţinutul ei (valoarea prestabilită este 1);
- WIDTH şi HEIGHT, care specifică lăţimea şi înălţimea tabelului (valori
ale atributului pot fi numere întregi pozitive (număr de pixeli) sau numere
întregi pozitive mai mici decît 101 şi urmate de simbolul % (specificînd astfel
fracţiuni din lăţimea şi înălţimea paginii)).
<CAPTION>
</CAPTION>
Definesc titlul tabelului şi pot fi plasate între etichetele <TABLE> şi </TABLE>,
dar nu în interiorul etichetelor care definesc celulele sau rîndurile tabelului.
Eticheta <CAPTION> poate avea atributul ALIGN, care stabileşte poziţia
titlului faţă de tabel şi care va avea una din valorile bottom, top, left, right.
<TR>
</TR>
Specifică un rînd în tabel. Eticheta <TR> poate avea atributele:
- ALIGN pentru alinierea orizontală (cu una din valorile left, center, right);
- VALIGN pentru alinierea verticală (cu una din valorile top, middle, bottom).
<TH>
</TH>
Definesc o celulă-antet. În mod prestabilit, textul unei astfel de celule este
centrat şi îngroşat. Eticheta <TH> poate avea atributele:
- WIDTH şi HEIGHT pentru stabilirea lăţimii şi înălţimii celulei;
- ALIGN şi VALIGN;
- ROWSPAN, care unifică celula cu cîteva celule de desubtul ei (valoarea
atributului este numărul total de celule care se unifică);
- COLSPAN, care unifică celula cu cîteva celule din dreapta ei (valoarea
atributului este numărul total de celule care se unifică);
- NOWRAP, care interzice întreruperea liniei de text din celulă (deci coloana
care conţine celula poate deveni oricît de mare) şi care se scrie fără valori;
- BGCOLOR, care specifică culoarea de fond pentru celulă (culoarea textului
celulei poate fi stabilită cu ajutorul atributului Color al etichetei <Font>).
<TD>
</TD>
Definesc o celulă de date obişnuită. Eticheta <TD> poate avea oricare dintre
atributele etichetei <TH>.
139
Dacă o celulă a tabelului este vidă, atunci în mod normal ea este afişată fără
chenar. Pentru a evita acest efect, în locul conţinutului celulei se va scrie textul
sau <br>.
E x e m p lu l (fig. 12.16):
<HTML>
<Head> <T itle> E xem plul 1. T a b e le < /T itle > </Head>
<Body>
<Table border=2 width="90%" height="80%" align="center" bgcolor="lightcyan">
<Caption align="left"><Font color="Red" Size=6> Orarul l e c ţ i i l o r </font>
< /C aption>
<Tr><Th Colspan=2>Luni<Th>M arti<Th>M iercuri<Th>Joi<Th>V ineri </Tr>
<Tr align="center"><Td>1<Td>Romana<Td>Chimia<Td>Fizica
<T d>Istoria< T d>A lgebra </Tr>
<Tr align= "center"> < T d> 2< T d> E ngleza< T d> Fizica< T d> Inform atica
<Td>Rusa<Td>Biologia </Tr>
<Tr align="center"><Td>3<Td>Franceza<Td>A lgebra<Td>G eom etria
<Td>Muzica<Td> Romana </Tr>
< /T able>
</Body>
</HTML>
Fig. 12.16
Întrebări si exerciţii > >
O Pentru ce sînt utilizate tabelele?
e Numiţi atributele etichetei <TABLE> şi valorile posibile ale acestor atribute.
e Care sînt atributele etichetei <CAPTION> şi valorile posibile ale acestor atribute?
O Cum se specifică un rînd de tabel?
e Care etichete definesc o celulă antet?
© Care sînt atributele acestor etichete şi valorile lor posibile?
140
o Care etichete definesc o celulă de date? Care sînt atributele acestor etichete?
O Creaţi o pagină W eb care va afişa urm ătorul tabel:
© Creaţi un docum ent HTML care va afişa urm ătoarea pagină W eb (fig . 1 2 .1 7 a , b ) (se pot folosi
alte im agini):
a)
Fig. 12.17
b)
141
© Ce va afişa pagina Web cu următorul cod HTML?
a) <HTML>
<Head><Title>Ce afisam ?</T itle> </Head>
<Body>
<Table a lig n = c e n te r border=2 width=100>
<Tr a lig n = c e n te r>
<Td colspan=2>B</Td><Td rowspan=2>D</Td>
</Tr>
<Tr a lig n = c e n te r>
<Td>C</Td><Td>A</Td>
</Tr>
< /T able>
</Body>
</HTML>
b) <HTML>
<Head><Title>Ce afisam ?</T itle> </Head>
<Body>
<Table a lig n = c e n te r w idth=100 border=2>
<Tr a lig n = c e n te r>
<Td rowspan=2>B</Td><Td>C</Td><Td>A</Td>
</Tr>
<Tr a lig n = c e n te r>
<Td colspan=2>D</Td>
</Tr>
< /T able>
</body>
</HTML>
© Creaţi un document HTML care va afişa următorul tabel:
Tabel. Extragerea pietrelor preţioase
2010 2012 2014
Rubin 1 483 4 532 6 743
Safir 3 835 7 482
Diamant 683 238
© Creaţi un document HTML care va afişa un tabel de forma:
Animale domestice
Pot zbura Nu pot zbura
Animale sălbatice
Pot zbura Nu pot zbura
4, ■
* "
Găina
Gîsca
Iepurele
Capra
Cioara
Bufnita
Lupul
V '
Vulpea
Se
întîlnesc
pe
teritoriul
tării
noastre.
142
Raţa
fal
Calul Flamingo Elefantu
Nu se
întîlnesc
pe
teritoriul
ţării
noastre.
Prepeliţa Măgarul
V
Colibri Leul
Creăm în echipă
1. Proiectaţi structura unui site cu titlul:
a) Republica Moldova - ţară europeană;
b) Localitatea noastră de baştină;
c) Liceul nostru;
d) Republica Moldova - atracţie turistică;
e) Mănastirile Republicii Moldova;
f) Personalităţi notorii;
g) Ani de liceu;
h) Fauna Republicii Moldova;
i) Bucătăria moldovenească;
j) Cărţile mele preferate;
k) Profesii de prestigiu;
l) Enciclopedia modei;
m) Umorul - sursă de bună dispoziţie;
n) Absolvenţi de succes ai liceului nostru;
o) Produse autohtone de calitate;
p) Sportul este sănătate.
2. Utilizînd limbajul HTML şi consultînd diferite surse de informaţie, creaţi paginile web
- componente ale site-ului. Stabiliţi între ele legături de navigare. Toate paginile vor
avea acelaşi meniu principal. Testaţi site-ul cu diferite programe de navigare.
3. Creaţi şi ataşaţi site-ului:
a) o pagină w eb cu referinţe spre surse informaţionale suplimentare la tema site-ului;
b) o pagină w eb cu galerii de imagini corespunzătoare temei.
Test de evaluare
1. Stabiliţi valoarea de adevăr a propoziţiei:
a) Textul scris între etichetele <HEAD> şi </HEAD> ale unui docum ent HTML va fi afişat
pe bara de titlu a ferestrei programului de explorare în care a fost interpretat acest
document.
b) O etichetă poate avea cîteva atribute.
c) Programul de explorare va afişa din rînd nou un text, dacă acesta va fi precedat de
oricare din etichetele <P>, <BR>, <HR>.
d) Un text cuprins între etichetele <DiV> şi </DiV> este un text preformatat.
2. Selectaţi etichetele care se folosesc pentru a stabili stiluri fizice pentru un text: <B>,
</B>, <DFN>, </DFN>, <VAR>, </VAR>, <BiG>, </BiG>, <EM>, </EM>, <SUB>, </SUB>.
143
3. Scrieţi un cod HTML care, fiind interpretat de programul de explorare, va afişa următoarele liste imbricate:
• Fructe
a) Mere
b) pere
c) prune
d) Caise
• legume
1. Cartofi
2. Morcovi
3. Ceapă
• lactate
o Lapte
o Brînză
o iaurt
4. Fişierul f1.html se află în mapa A, iar fişierul f2.html se află în mapa B. Care este uRL-uI
referinţei din fişierul f1.html către fişierul f2.html, dacă:
a) mapele a şi B se află în acelaşi catalog;
b) mapa A se conţine în mapa B;
c) mapa B se conţine în mapa A;
d) mapa A se conţine în submapa C a mapei B?
5. Comentaţi semnificaţia următorului cod HTML:
<A HREF="../TEST/d1.jpg"><img src="d2.jpg" width=50 height=50></A>.
6. Scrieţi un cod HTML care, fiind interpretat de program
Etichete Descrierea etichetelor
<TABLE>
</TABLE>
Definesc un tabel. Eticheta <TABLE> poate avea atributele:
- BORDER, care adaugă un chenar tabelului şi a cărui valoare întreagă pozitivă
este grosimea în pixeli a chenarului (valoarea 1 este prestabilită, iar valoarea
0 semnifică absenţa chenarului);
- ALIGN, care stabileşte modul de aliniere a tabelului în document şi poate
avea una din valorile left, right, center;
- BGCOLOR, care specifică culoarea de fond pentru tot tabelul;
- CELLSPACING, care stabileşte distanţa în pixeli dintre două celule vecine
ale tabelului (valoarea prestabilită este 2);
- CELLPADDING, care stabileşte distanţa în pixeli dintre marginea celulei
şi conţinutul ei (valoarea prestabilită este 1);
- WIDTH şi HEIGHT, care specifică lăţimea şi înălţimea tabelului (valori
ale atributului pot fi numere întregi pozitive (număr de pixeli) sau numere
întregi pozitive mai mici decît 101 şi urmate de simbolul % (specificînd astfel
fracţiuni din lăţimea şi înălţimea paginii)).
<CAPTION>
</CAPTION>
Definesc titlul tabelului şi pot fi plasate între etichetele <TABLE> şi </TABLE>,
dar nu în interiorul etichetelor care definesc celulele sau rîndurile tabelului.
Eticheta <CAPTION> poate avea atributul ALIGN, care stabileşte poziţia
titlului faţă de tabel şi care va avea una din valorile bottom, top, left, right.
<TR>
</TR>
Specifică un rînd în tabel. Eticheta <TR> poate avea atributele:
- ALIGN pentru alinierea orizontală (cu una din valorile left, center, right);
- VALIGN pentru alinierea verticală (cu una din valorile top, middle, bottom).
<TH>
</TH>
Definesc o celulă-antet. În mod prestabilit, textul unei astfel de celule este
centrat şi îngroşat. Eticheta <TH> poate avea atributele:
- WIDTH şi HEIGHT pentru stabilirea lăţimii şi înălţimii celulei;
- ALIGN şi VALIGN;
- ROWSPAN, care unifică celula cu cîteva celule de desubtul ei (valoarea
atributului este numărul total de celule care se unifică);
- COLSPAN, care unifică celula cu cîteva celule din dreapta ei (valoarea
atributului este numărul total de celule care se unifică);
- NOWRAP, care interzice întreruperea liniei de text din celulă (deci coloana
care conţine celula poate deveni oricît de mare) şi care se scrie fără valori;
- BGCOLOR, care specifică culoarea de fond pentru celulă (culoarea textului
celulei poate fi stabilită cu ajutorul atributului Color al etichetei <Font>).
<TD>
</TD>
Definesc o celulă de date obişnuită. Eticheta <TD> poate avea oricare dintre
atributele etichetei <TH>.
139
Dacă o celulă a tabelului este vidă, atunci în mod normal ea este afişată fără
chenar. Pentru a evita acest efect, în locul conţinutului celulei se va scrie textul
sau <br>.
E x e m p lu l (fig. 12.16):
<HTML>
<Head> <T itle> E xem plul 1. T a b e le < /T itle > </Head>
<Body>
<Table border=2 width="90%" height="80%" align="center" bgcolor="lightcyan">
<Caption align="left"><Font color="Red" Size=6> Orarul l e c ţ i i l o r </font>
< /C aption>
<Tr><Th Colspan=2>Luni<Th>M arti<Th>M iercuri<Th>Joi<Th>V ineri </Tr>
<Tr align="center"><Td>1<Td>Romana<Td>Chimia<Td>Fizica
<T d>Istoria< T d>A lgebra </Tr>
<Tr align= "center"> < T d> 2< T d> E ngleza< T d> Fizica< T d> Inform atica
<Td>Rusa<Td>Biologia </Tr>
<Tr align="center"><Td>3<Td>Franceza<Td>A lgebra<Td>G eom etria
<Td>Muzica<Td> Romana </Tr>
< /T able>
</Body>
</HTML>
Fig. 12.16
Întrebări si exerciţii > >
O Pentru ce sînt utilizate tabelele?
e Numiţi atributele etichetei <TABLE> şi valorile posibile ale acestor atribute.
e Care sînt atributele etichetei <CAPTION> şi valorile posibile ale acestor atribute?
O Cum se specifică un rînd de tabel?
e Care etichete definesc o celulă antet?
© Care sînt atributele acestor etichete şi valorile lor posibile?
140
o Care etichete definesc o celulă de date? Care sînt atributele acestor etichete?
O Creaţi o pagină W eb care va afişa urm ătorul tabel:
© Creaţi un docum ent HTML care va afişa urm ătoarea pagină W eb (fig . 1 2 .1 7 a , b ) (se pot folosi
alte im agini):
a)
Fig. 12.17
b)
141
© Ce va afişa pagina Web cu următorul cod HTML?
a) <HTML>
<Head><Title>Ce afisam ?</T itle> </Head>
<Body>
<Table a lig n = c e n te r border=2 width=100>
<Tr a lig n = c e n te r>
<Td colspan=2>B</Td><Td rowspan=2>D</Td>
</Tr>
<Tr a lig n = c e n te r>
<Td>C</Td><Td>A</Td>
</Tr>
< /T able>
</Body>
</HTML>
b) <HTML>
<Head><Title>Ce afisam ?</T itle> </Head>
<Body>
<Table a lig n = c e n te r w idth=100 border=2>
<Tr a lig n = c e n te r>
<Td rowspan=2>B</Td><Td>C</Td><Td>A</Td>
</Tr>
<Tr a lig n = c e n te r>
<Td colspan=2>D</Td>
</Tr>
< /T able>
</body>
</HTML>
© Creaţi un document HTML care va afişa următorul tabel:
Tabel. Extragerea pietrelor preţioase
2010 2012 2014
Rubin 1 483 4 532 6 743
Safir 3 835 7 482
Diamant 683 238
© Creaţi un document HTML care va afişa un tabel de forma:
Animale domestice
Pot zbura Nu pot zbura
Animale sălbatice
Pot zbura Nu pot zbura
4, ■
* "
Găina
Gîsca
Iepurele
Capra
Cioara
Bufnita
Lupul
V '
Vulpea
Se
întîlnesc
pe
teritoriul
tării
noastre.
142
Raţa
fal
Calul Flamingo Elefantu
Nu se
întîlnesc
pe
teritoriul
ţării
noastre.
Prepeliţa Măgarul
V
Colibri Leul
Creăm în echipă
1. Proiectaţi structura unui site cu titlul:
a) Republica Moldova - ţară europeană;
b) Localitatea noastră de baştină;
c) Liceul nostru;
d) Republica Moldova - atracţie turistică;
e) Mănastirile Republicii Moldova;
f) Personalităţi notorii;
g) Ani de liceu;
h) Fauna Republicii Moldova;
i) Bucătăria moldovenească;
j) Cărţile mele preferate;
k) Profesii de prestigiu;
l) Enciclopedia modei;
m) Umorul - sursă de bună dispoziţie;
n) Absolvenţi de succes ai liceului nostru;
o) Produse autohtone de calitate;
p) Sportul este sănătate.
2. Utilizînd limbajul HTML şi consultînd diferite surse de informaţie, creaţi paginile web
- componente ale site-ului. Stabiliţi între ele legături de navigare. Toate paginile vor
avea acelaşi meniu principal. Testaţi site-ul cu diferite programe de navigare.
3. Creaţi şi ataşaţi site-ului:
a) o pagină w eb cu referinţe spre surse informaţionale suplimentare la tema site-ului;
b) o pagină w eb cu galerii de imagini corespunzătoare temei.
Test de evaluare
1. Stabiliţi valoarea de adevăr a propoziţiei:
a) Textul scris între etichetele <HEAD> şi </HEAD> ale unui docum ent HTML va fi afişat
pe bara de titlu a ferestrei programului de explorare în care a fost interpretat acest
document.
b) O etichetă poate avea cîteva atribute.
c) Programul de explorare va afişa din rînd nou un text, dacă acesta va fi precedat de
oricare din etichetele <P>, <BR>, <HR>.
d) Un text cuprins între etichetele <DiV> şi </DiV> este un text preformatat.
2. Selectaţi etichetele care se folosesc pentru a stabili stiluri fizice pentru un text: <B>,
</B>, <DFN>, </DFN>, <VAR>, </VAR>, <BiG>, </BiG>, <EM>, </EM>, <SUB>, </SUB>.
143
3. Scrieţi un cod HTML care, fiind interpretat de programul de explorare, va afişa următoarele liste imbricate:
• Fructe
a) Mere
b) pere
c) prune
d) Caise
• legume
1. Cartofi
2. Morcovi
3. Ceapă
• lactate
o Lapte
o Brînză
o iaurt
4. Fişierul f1.html se află în mapa A, iar fişierul f2.html se află în mapa B. Care este uRL-uI
referinţei din fişierul f1.html către fişierul f2.html, dacă:
a) mapele a şi B se află în acelaşi catalog;
b) mapa A se conţine în mapa B;
c) mapa B se conţine în mapa A;
d) mapa A se conţine în submapa C a mapei B?
5. Comentaţi semnificaţia următorului cod HTML:
<A HREF="../TEST/d1.jpg"><img src="d2.jpg" width=50 height=50></A>.
6. Scrieţi un cod HTML care, fiind interpretat de program
Niciun comentariu:
Trimiteți un comentariu