Sunteți pe pagina 1din 70

Universitatea Constantin Brncui din Trgu-Jiu Facultatea de Inginerie Departamentul de Automatic, Energie i Mediu

Tehnologii Web

Lector univ. dr. Adrian Runceanu

Curs 3

Limbajul Html (partea III)

Programare Web
6. Tabele 6.1. Atributele elementului TABLE 6.2. Atributele elementului TR 6.3. Atributele elementului TD 6.4. Elementele TH i CAPTION 6.5. Gruparea liniilor i a coloanelor unui tabel

3 Tehnologii WEB - curs

6.Tabele
Paginile pot conine tabele. Elementul TABLE descrie un tabel. Tabelul utilizeaz tag-urile <TABLE> i </TABLE>. Elementul TR(table row) descrie o linie a tabelului.

O linie a tabelului ncepe cu <TR> i se termin atunci cnd este ntlnit un nou <TR>. Opional, se poate folosi </TR>.
Se utilizeaz tag-urile <TD> i, opional, </TD>.

Elemenul TD(table data) descrie o celul a tabelului.

4 Tehnologii WEB - curs

6.Tabele
Exemplu:
<TABLE border="5"> <TR> <TD>Internet </TD> <TD>Cursul de Retele de calculatoare anul V</TD> </TR> <TR> <TD> HTML </TD> <TD> WEB</TD> </TR> </TABLE>

Efect:
5 Tehnologii WEB - curs

Programare Web
6.Tabele 6.1. Atributele elementului TABLE 6.2. Atributele elementului TR 6.3. Atributele elementului TD 6.4. Elementele TH i CAPTION 6.5. Gruparea liniilor i a coloanelor unui tabel

6 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


Border definete grosimea liniilor (n pixeli) care nconjoar tabelul. Alturat putei observa cum arat acelai tabel n care atributul border lipsete. Exemplu:
<TABLE> <TR> <TD> O noua celula</TD> <TD> Internet </TD> <TD> Cursul de Retele de calculatoare anul V </TD> </TR> <TR> <TD> HTML </TD> <TD> WEB</TD> </TR> </TABLE>
7 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


Efect:

8 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


Un tabel poate conine i una sau mai multe imagini aa cum se vede mai jos, unde imaginea este coninut de o celul a tabelului. Exemplu:
<TABLE BORDER="5"> <TR> <TD> <IMG SRC="c:\tweety.jpg"> </TD> <TD> Cursul de Retele de calculatoare anul V </TD> </TR> <TR> <TD> Text </TD> <TD>Txt </TD> </TR> </TABLE>

9 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


Efect:

10 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


Mai

mult, o celul a tabelului poate conine i imagine i text. De asemenea, tot ce am nvat n paragrafele anterioare se poate aplica i aici. De exemplu, textul poate fi organizat n paragrafe, apoi se pot folosi diverse stiluri de scriere, bold, italic, etc.

11 Tehnologii WEB - curs

6.1. Atributele elementului TABLE Exemplu:


<TABLE BORDER="5"> <TR> <TD> <IMG SRC="foto1.jpg" align="left"> <P> Iata un <BR> <B> text </B> si O <B> imagine</B> </TD> <TD> Un text! </TD> </TR> <TR> <TD> Text </TD> <TD> Txt </TD> </TR> </TABLE>
12 Tehnologii WEB - curs

6.1. Atributele elementului TABLE Efect:

13 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


1. width - limea tabelului Poate fi dat n procent fa de limea ferestrei browser-ului (width="50%") sau n pixeli (width="500"). 2. height - nlimea tabelului Poate fi dat n procent fa de nlimea ferestrei browserului (height="75%") sau n pixeli (height="200"). 3. align - determin alinierea tabelului n pagin Poate lua una din valorile: left (stnga), right (dreapta) sau center (n centru). Dac, pe lng tabel, mai scriem i text, acesta se poziioneaz fa de tabel la fel cum se poziioneaz fa de imagini.

14 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


Exemplu:
<BODY> <TABLE BORDER="4" align="left"> <TR> <TD> Cursul de Retele de calculatoare anul V </TD> <TD> Univ. Const. Brancusi </TD> </TR> <TR> <TD> Automatica si Informatica </TD> <TD> Anul V </TD> </TR> </TABLE> <P> Acesta este un text. Interesant este modul in care textul este poziionat fata de tabel, in funcie de alinierea acestuia din urma. </BODY>

15 Tehnologii WEB - curs

6.1. Atributele elementului TABLE


Efect:

16 Tehnologii WEB - curs

Programare Web
6.Tabele 6.1. Atributele elementului TABLE 6.2. Atributele elementului TR 6.3. Atributele elementului TD 6.4. Elementele TH i CAPTION 6.5. Gruparea liniilor i a coloanelor unui tabel

17 Tehnologii WEB - curs

6.2. Atributele elementului TR

align pentru toate celulele aliniaza continutul pe orizontala n cadrul celulei. Poate lua valorile: Left (aliniat stanga) Right (aliniat dreapta) Center (aliniat la centru) Justify (aliniat n ambele parti) valign - aliniaza continutul pe verticala n cadrul celulei. Poate lua valorile: Top (sus) Bottom (jos) Middle (la mijloc) bgcolor culoare de fond

18 Tehnologii WEB - curs

6.2. Atributele elementului TR


Exemplu:
<TR align=center valign=middle bgcolor=green> <TD> Cursul de Retele de calculatoare anul V </TD> <TD> Univ. Const. Brancusi </TD> </TR>

Efect:

19 Tehnologii WEB - curs

Programare Web
6.Tabele 6.1. Atributele elementului TABLE 6.2. Atributele elementului TR 6.3. Atributele elementului TD 6.4. Elementele TH i CAPTION 6.5. Gruparea liniilor i a coloanelor unui tabel

20 Tehnologii WEB - curs

6.3. Atributele elementului TD


width, height - limea i nlimea celulei (n procente din limea, respectiv nlimea tabelului.), n plus, au efecte i pentru celelalte celule, pentru ca tabelul s fie aliniat. Exemplu:
<TABLE BORDER=5 width=100% height=100% > <TR> <TD width=25%>Cursul de Retele de calculatoare </TD> <TD width=75%> Automatica si Informatica </TD> </TR> <TR> <TD> Inginerie </TD> <TD> Anul V </TD> </TR> </TABLE>

21 Tehnologii WEB - curs

6.3. Atributele elementului TD


Efect:

22 Tehnologii WEB - curs

Programare Web
6.Tabele 6.1. Atributele elementului TABLE 6.2. Atributele elementului TR 6.3. Atributele elementului TD 6.4. Elementele TH i CAPTION 6.5. Gruparea liniilor i a coloanelor unui tabel

23 Tehnologii WEB - curs

6.4. Elementele TH i CAPTION


1. Elementul TH

n loc de <TD> </TD> se poate folosi <TH> </TH>. Parametrii sunt aceiai, doar c textele, implicit, sunt tiprite bold.

2. Elementul CAPTION are rolul de a permite scrierea titlului unui tabel.


Titlul se scrie ntre cele dou tag-uri <CAPTION> i </CAPTION>. Cele dou tag-uri trebuie s se gseasc imediat dup <TABLE>.

Exemplu: <CAPTION> Un titlu </CAPTION> Elementul CAPTION are atributul align.


24 Tehnologii WEB - curs

Programare Web
6.Tabele 6.1. Atributele elementului TABLE 6.2. Atributele elementului TR 6.3. Atributele elementului TD 6.4. Elementele TH i CAPTION 6.5. Gruparea liniilor i a coloanelor unui tabel

25 Tehnologii WEB - curs

6.5. Gruparea liniilor i a coloanelor unui tabel


Liniile unui tabel pot fi mprite n trei categorii:
1.
2. 3.

linii de antet (primele linii ale tabelului) linii de corp liniile finale ale tabelului
Se

1. Elementul THEAD are rolul de a marca liniile din antet.


folosete tag-ul <THEAD> i, opional </THEAD>.

2. Elementul TBODY are rolul de a marca liniile din corpul tabelului.


Se

folosete tag-ul <TBODY> i, opional </TBODY>.

3. Elementul TFOOT are rolul de a marca liniile de sfritul tabelului.


Se
26 Tehnologii WEB - curs

folosete tag-ul <TFOOT> i, opional </TFOOT>.

6.5. Gruparea liniilor i a coloanelor unui tabel


Structura unui tabel care utilizeaz aceast "facilitate" este: <TABLE...> <CAPTION> . .. <CAPTION> <THEAD> <TR> ... </THEAD> <TFOOT> <TR> ... </TFOOT> <TBODY> <TR> ... </TBODY> </TABLE>
27 Tehnologii WEB - curs

6.5. Gruparea liniilor i a coloanelor unui tabel


n continuare, prezentm cteva atribute pe care le ntlnim la oricare din aceste 3 elemente:

Align - aliniere orizontal Poate lua valorile pe care le-am ntlnit deja. Valign - aliniere vertical
Se pot grupa i coloanele unui tabel, nu numai liniile.

28 Tehnologii WEB - curs

6.5. Gruparea liniilor i a coloanelor unui tabel


Elementul COLGROUP permite gruparea coloanelor unui tabel. Se utilizeaz tag-urile <COLGROUP atribute> i, opional </COLGROUP>. Privii tabelul urmtor. El are trei coloane. Alinierea coninutului coloanelor i spaiul ocupat de ele a fost determinat cu ajutorul a dou elemente COLGROUP. Primul element stabilete caracteristicile de afiare ale primei coloane, al doilea stabilete caracteristicile de afiare a urmtoarelor dou coloane. Observai, mai jos, cum s-a obinut acest tabel.
29 Tehnologii WEB - curs

6.5. Gruparea liniilor i a coloanelor unui tabel


<TABLE BORDER=5 width=50%> <COLGROUP span=1 width=50% align=right> <COLGROUP span=2 width=25% align=left> <TR> <TD> 12.234 </TD> <TD> A12 </TD> <TD> A13 </TD> </TR> <TR> <TD> 0.1 </TD> <TD> A22 </TD> <TD> A23 </TD> </TR> <TR> <TD> 675.345 </TD> <TD> A32 </TD> <TD> A33 </TD> </TR> </TABLE>
30 Tehnologii WEB - curs

6.5. Gruparea liniilor i a coloanelor unui tabel

31 Tehnologii WEB - curs

Tehnologii Web
7. Ferestre n HTML 7.1. Organizarea documentului n cadre - Tagul <frameset> 7.2. Definirea cadrelor - Tagul <frame> 7.3. Browserele vechi - Tagul <noframe> 7.4. Cadre in-line - Tagul <iframe> (in-line frame) 7.5. Exemple

32 Tehnologii WEB - curs

Cadrele permit mprirea unei ferestre n seciuni independente ntre ele, n fiecare dintre acestea fiind posibil ncrcarea unui document HTML.

Astfel, utilizatorul poate vizualiza simultan mai multe documente.

33 Tehnologii WEB - curs

De exemplu, putem mpri documentul n dou cadre.


n primul cadru va fi afiat o bara de navigaie.

Selectarea unui meniu al barei de navigaie va determina ncrcarea paginii corespunztoare n cel de-al doilea cadru.
Astfel, bara de meniuri va fi vizibil n orice moment al navigrii site-ului.
Tehnologii WEB - curs

34

Pentru structurarea unui document HTML n cadre sunt utilizate tagurile:


1.

2.
3. 4.

<frameset> <frame> <noframe> <iframe>

35 Tehnologii WEB - curs

Tehnologii Web
7. Ferestre n HTML 7.1. Organizarea documentului n cadre - Tagul <frameset> 7.2. Definirea cadrelor - Tagul <frame> 7.3. Browserele vechi - Tagul <noframe> 7.4. Cadre in-line - Tagul <iframe> (in-line frame) 7.5. Exemple

36 Tehnologii WEB - curs

7.1. Organizarea documentului n cadre - Tagul <frameset> Un document cu cadre se realizeaz similar unui document HTML oarecare, n care tagurile <body>, respectiv </body> sunt nlocuite cu tagurile <frameset>, respectiv </frameset>: <html> <head> ... </head> <frameset> </frameset> </html>

37 Tehnologii WEB - curs

Aadar, tagul <frameset> permite structurarea documentului principal n cadre.

1. 2. 3.

n interiorul perechii <frameset> </frameset> nu pot exista dect elemente: <frameset> <frame> <noframe>

38 Tehnologii WEB - curs

Tagul <frameset> accept urmtoarele atribute:

rows primete ca parametru o list de valori, separate prin virgul, ce reprezint nlimea cadrelor orizontale ale documentului principal.

Numrul de cadre orizontale este dat de numrul de valori din list.

39 Tehnologii WEB - curs

Valorile sunt exprimate:

fie prin numere ntregi pozitive (nlime absolut exprimat n pixeli) fie prin procente din nlimea cadrului printe (nlime relativ) fie prin caracterul de puncuaie *, care semnific o nlime relativ
Tehnologii WEB - curs

40

Observaii:

Nu se recomand ca toate valorile s fie absolute, deoarece browserele pot utiliza rezoluii diferite, ceea ce poate duce la distorsiuni ale afirii; n cazul utilizrii procentelor, suma acestora nu poate s depeasc 100%, n caz contrar, browserul va trunchia toate valorile pn ce suma va fi 100.
Tehnologii WEB - curs

41

cols permite mprirea cadrului curent n sectoare verticale. Parametrii acceptai respect aceleai reguli ca i n cazul atributului rows, numai c se refer la lungimea cadrului. border primete o valoare ntreag nenegativ, reprezentnd grosimea, exprimat n pixeli, a chenarului cadrelor. Implicit, grosimea chenarului este de 5 pixeli. Valoarea 0 a atributului border inhib afiarea chenarelor tuturor cadrelor. bordercolor permite setarea culorii chenarelor cadrelor. Culoarea poate fi specificat fie printr-un triplet hexa de forma #rrggbb, fie printr-un nume predefinit de culoare.
Tehnologii WEB - curs

42

frameborder controleaza afiarea/ascunderea chenarelor tuturor cadrelor. Atributul poate primi valorile:

yes sau 1 (se foreaz afiarea chenarelor) no sau 0 ( se foreaz ascunderea chenarelor)

framespacing permite specificarea distanei, n pixeli, de spaiu liber n jurul tuturor cadrelor.
Tehnologii WEB - curs

43

Observaie:

Ascunderea unui chenar, prin utilizarea perechii frameborder=no sau border=0, face ca acesta s nu mai fie vizibil pentru utilizator. Totui, n Internet Explorer, utilizatorul poate opta pentru redimensionarea cadrului, prin operaia Drag and Drop asupra marginii invizibile. Pentru a inhiba aceast posibilitate, ascunderea chenarului trebuie nsoit de secvena: framespacing=0.
Tehnologii WEB - curs

44

Tehnologii Web
7. Ferestre n HTML 7.1. Organizarea documentului n cadre - Tagul <frameset> 7.2. Definirea cadrelor - Tagul <frame> 7.3. Browserele vechi - Tagul <noframe> 7.4. Cadre in-line - Tagul <iframe> (in-line frame) 7.5. Exemple

45 Tehnologii WEB - curs

7.2.Definirea cadrelor - Tagul <frame>


Tagul <frame> permite definirea unui cadru n interiorul unui set de cadre. El are sens numai atunci cnd apare n interiorul perechii <frameset> </frameset>. Atribute acceptate: src specific adresa URL a documentului ce va fi ncrcat n cadrul respectiv; name specific numele cadrului, nume ce va fi utilizat pentru referirea cadrului respectiv atunci cnd se va ncrca n el un alt document HTML, prin intermediul unei hiperlegturi aflate n alt cadru. Numele este o combinaie de caractere alfanumerice;

46 Tehnologii WEB - curs

marginwidth, marginheight controleaza distana, exprimat n pixeli, ntre coninutul cadrului i chenarul su; scrolling atributul controleaz afiarea/ascunderea barelor de defilare (orizontal sau vertical). Poate primi valorile: yes se foreaz afiarea barelor de defilare; no - se foreaz ascunderea barelor de defilare; auto - barele de defilare vor fi afiate numai atunci cnd este necesar (cnd coninutul cadrului depete lungimea i/sau nlimea cadrului va fi afiat bara de defilare orizontal i/sau cea vertical);

47 Tehnologii WEB - curs

border permite setarea grosimii chenarului cadrului curent. Valoarea atributului border aflat n interiorul tagului frame este prioritar fa de valoarea aceluiai atribut aflat n tagul frameset. noresize se inhib utilizatorului posibilitatea de a redimensiona cadrele. Altfel, el are aceast posibilitate, prin operaia Drag and Drop asupra marginilor cadrelor. frameborder controleaza afiarea/ascunderea chenarului cadrului curent. Atributul poate primi valorile: yes sau 1(se afieaz chenarul), no sau 0 (se ascunde chenarul); framespacing permite specificarea distanei, n pixeli, de spaiu liber n jurul cadrului. bordercolor permite specificarea culorii chenarului cadrului respectiv.
Tehnologii WEB - curs

48

Tehnologii Web
7. Ferestre n HTML 7.1. Organizarea documentului n cadre - Tagul <frameset> 7.2. Definirea cadrelor - Tagul <frame> 7.3. Browserele vechi - Tagul <noframe> 7.4. Cadre in-line - Tagul <iframe> (in-line frame) 7.5. Exemple

49 Tehnologii WEB - curs

7.3.Browserele vechi - Tagul <noframe>

Tagul <noframe> este utilizat n cazul n care se navigheaz cu un browser mai vechi, care nu suport cadrele. n aceast situaie, browserul va afia coninutul inclus n interiorul perechii <noframe> </noframe>. Dac ns, browserul recunoate cadrele, el va ignora coninutul perechii <noframe> </noframe>.

50 Tehnologii WEB - curs

De regul, atunci cnd un browser nu recunoate un tag, nu l interpreteaz. Acest lucru se poate ntmpla i n cazul tagurilor <frameset>, <frame>. Este evident c dac un browser nu recunoate tagurile <frameset> i <frame> el nu va recunoate nici <noframe>. ns, va interpreta tagurile pe care le recunoate, adic, n acest caz, cele cuprinse ntre <noframe> i </noframe>. De fapt, efectul tagului <noframe> este, n cazul browserelor care recunosc cadre, acela de a ignora coninutul inclus n interiorul perechii <noframe> </noframe>.
Tehnologii WEB - curs

51

Tehnologii Web
7. Ferestre n HTML 7.1. Organizarea documentului n cadre - Tagul <frameset> 7.2. Definirea cadrelor - Tagul <frame> 7.3. Browserele vechi - Tagul <noframe> 7.4. Cadre in-line - Tagul <iframe> (in-line frame) 7.5. Exemple

52 Tehnologii WEB - curs

7.4. Cadre in-line - Tagul <iframe> (in-line frame)

Tagurile <iframe> sunt similare tagurilor <frame>, cu deosebirea c se includ n documente HTML obinuite (nu n documente HTML cu cadre), adic n interiorul perechii <body> </body>. La ora actual numai Internet Explorer accept cadre in-line. Dac un browser nu recunoate cadre, el va afia coninutul cuprins ntre <iframe> i </iframe>. Tagul <iframe> accept aceleai atribute ca i tagul <frame>, n plus accept atribute preluate de la tagul <img>, care controleaz modul de afiare al cadrului n interiorul documentului.
Tehnologii WEB - curs

53

Atribute acceptate:
1. preluate de la tagul <frame>: 2. preluate de la tagul <img>: align src width, height name vspace, hspace scrolling border bordercolor frameborder framespacing noresize Toate atributele menionate marginwidth, marginheight mai sus au semnificaiile i parametrii prezentai anterior.
54 Tehnologii WEB - curs

Tehnologii Web
7. Ferestre n HTML 7.1. Organizarea documentului n cadre - Tagul <frameset> 7.2. Definirea cadrelor - Tagul <frame> 7.3. Browserele vechi - Tagul <noframe> 7.4. Cadre in-line - Tagul <iframe> (in-line frame) 7.5. Exemple

55 Tehnologii WEB - curs

7.5. Exemple
Realizarea cadrelor orizontale <!--index.html-->

<html> <head> <title>Universitatea Constantin Brancusi</title> </head> <frameset rows="150,*,20%"> <frame src="antet.html"> <frame src="continut.html"> <frame src="adresa.html"> </frameset> </html>
56 Tehnologii WEB - curs

7.5. Exemple
<!--antet.html-->

<html> <head> </head> <body> <center> <h3>Universitatea Constantin Brancusi</h3> <h3>Facultatea de Inginerie</h3> <h3>Catedra de Automatica si Informatica</h3> </center> </body> </html>
57 Tehnologii WEB - curs

7.5. Exemple
<!--continut.html-->

<html> <head> </head> <body> <p>Specializarile Facultatii de Inginerie sunt: </p> <p>Automatica si Informatica; Mecanica; Energetica.</p> </body> </html>

58 Tehnologii WEB - curs

7.5. Exemple
<!--adresa.html-->

<html> <head> </head> <body> <p align="center"><b>Targu-Jiu, Str. Geneva 3, Telefon: 0253.111.111.</b></p> </body> </html>
59 Tehnologii WEB - curs

60 Tehnologii WEB - curs

7.5. Exemple
Imbricarea cadrelor <!--index.html-->

<html> <head> <title>Universitatea Constantin Brancusi</title></head> <frameset rows="120,*,20%"> <frame src="antet.html"> <frameset cols="100,*"> <frame src="meniu.html"> <frame src="desprenoi.html"> </frameset> <frame src="adresa.html"> </frameset> </html> 61
Tehnologii WEB - curs

62 Tehnologii WEB - curs

Cadre imbricate cu chenare colorate de diverse grosimi

<html> <head> <title>Cadre imbricate</title> </head>


<frameset rows="50,*,50%"> <frameset cols="25%,*" border="30" bordercolor="red"> <frame src="Pagina1.html"> <frame src="Pagina2.html"> </frameset>
63 Tehnologii WEB - curs

Cadre imbricate cu chenare colorate de diverse grosimi

<frameset cols="*,2*,3*" > <frame src="Pagina3.html" scrolling=yes> <frame src="Pagina4.html" scrolling=auto> <frame src="Pagina5.html" scrolling=no> </frameset> <frameset cols="*,100" border="15"> <frame src="Pagina6.html"> <frame src="Pagina7.html bordercolor="maroon" noresize> </frameset> </frameset> </html>
64 Tehnologii WEB - curs

65 Tehnologii WEB - curs

Chenare inactive
<!--index.html--> <html> <head> <title>Universitatea Constantin Brancusi</title> </head> <frameset rows="92,*,20%" frameborder="no" framespacing="0"> <frame src="antet.html"> <frameset cols="100,*"> <frame src="meniu.html"> <frame src="desprenoi.html"> </frameset> <frame src="adresa.html"> </frameset> </html>
66 Tehnologii WEB - curs

7.5. Exemple

67 Tehnologii WEB - curs

Cadre in-line
<html> <head> <title>Formate de Imagini</title> </head> <body> <iframe name="cadru" src="Generalitati.html" width="200" height="100" border="3" align="right">Site realizat cu cadre in-line. Browserul dvs. nu suporta!</iframe> <b>Formate de Imagini: <ul> <li><a href="bmp.html" target="cadru">BMP</a></li> <li><a href="jpeg.html" target="cadru">JPEG</a></li> <li><a href="tiff.html" target="cadru">TIFF</a></li> </ul> </b> </body> </html>
68 Tehnologii WEB - curs

7.5. Exemple

69 Tehnologii WEB - curs

ntrebri?

70