Elemente de Web design

Transcriere

1 Limbajul HTML (II) Hypertext Markup Language

2 Tabele Crearea unui tabel <TABLE> </TABLE>. Pentru a insera o linie într-un tabel se folosesc etichetele <TR> </TR> (table row) (</TR> este opţională) O celulă de date se introduce cu eticheta <TD> </TD> (table data) (</TD> este opţională) tab1.html

3 atributul border al etichetei <TABLE> tab2.html Celulele unui tabel pot conţine şi alte elemente în afară de text, de ex. imagini, legături, formulare, etc tab3.html

4 Alinierea tabelului în pagină Atributul align al etichetei <TABLE>, cu următoarele valori posibile: left (valoarea prestabilită) - textul care urmează după punctul de inserare al tabelului va fi dispus în partea dreaptă a tabelului. center - textul care urmează după punctul de inserare al tabelului va fi afişat pe toată lăţimea paginii, imediat sub tabel. right - textul care urmează după punctul de inserare al tabelului va fi dispus în partea stângă a tabelului. tab4.html

5 Dimensionarea unui tabel Dimensiunile unui tabel - lăţimea şi înălţimea - pot fi stabilite exact prin intermediul atributelor width şi height ale etichetei <TABLE> Valorile acestor atribute pot fi: 1. numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului 2. numere întregi între 1 şi 100, urmate de semnul %, reprezentând procente din lăţimea şi înălţimea totală a paginii. tab5.html Obs. Dimensiunile unui tabel includ şi valoarea dată atributului border. De exemplu, un tabel cu o singură linie şi o singură coloană, cu dimensiunile width="100", height="50" şi având atributul border setat la valoarea 10, va avea drept spaţiu util 80 de pixeli pe lăţime şi 30 de pixeli pe înălţime.

6 Spaţierea celulelor unui tabel Distanţa dintre două celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei <TABLE>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în pixeli dintre două celule vecine. Valoarea prestabilită a atributului cellspacing este de 2 pixeli. Distanţa dintre marginea unei celule şi conţinutul ei poate fi definită cu ajutorul atributului cellpadding al etichetei <TABLE>. Valorile acestui atribut pot fi numere întregi pozitive, şi reprezintă distanţa în pixeli dintre marginile celulei şi conţinutul ei. Valoarea prestabilită a atributului cellpadding este 1 pixel. tab6.html

7 Atribute ale celulelor unui tabel Parametrii width pentru lăţime şi height pentru înălţime pot fi folosiţi şi în cazul marcatorilor TR şi TD pentru dimensionare forţată a celulelor tab7.html Obs. auto-dimensionarea tabelelor este prioritară dimensionării utilizatorului Alinierea conţinutului unei celule Atributul align left, center, right Alinierea pe verticală Atributul valign bottom, middle, top tab8.html

8 Definirea culorilor pentru un tabel Atributul bgcolor poate fi atasat: întregului tabel prin eticheta <TABLE>, unei linii prin eticheta <TR> unei celule de date prin eticheta <TD> tab9.html Atributul background al etichetei <TABLE> tab10.html

9 Titlul unui tabel <CAPTION> (table caption=titlul tabelului). Această etichetă trebuie plasată în interiorul etichetelor <TABLE> </TABLE>, dar nu în interiorul etichetelor <TR> sau <TD>. tab11_0.html atributul align bottom, top tab11.html Capul de tabel <TH> (table header=cap de tabel) tab12.html In antetul de tabel poate fi aplicata procedura de concatenare <TH colspan= nr_col > <TH rowspan= nr_rand > tab12_1.html tab12_2.html

10 tab13.html Tabele imbricate

11 Utilizarea cadrelor în documente HTML O modalitate de structurare a unui document HTML este împărţirea ferestrei browserului în mai multe ferestre distincte, denumite cadre (frames). Această facilitate permite afişarea simultană, în aceeaşi fereastră a browserului, a două sau mai multe documente HTML diferite, câte unul în fiecare cadru. Pentru a realiza acest lucru sunt necesare următoarele: 1. un document de definire a cadrelor document ce conţine etichetele care stabilesc numărul, dimensiunile şi aşezarea cadrelor în pagină 2. câte un fişier HTML pentru fiecare cadru în parte, prin care se stabileşte conţinutul cadrului respectiv.

12 Cu frame-uri, puteti publica mai multe documente HTML care vor fi deschise in aceeasi fereastra a browser-ului. Fiecare document HTML deschis in fereastra browser-ului se numeste frame, iar fiecare frame se comporta independent fata de celelalte frame-uri. Dezavantajele utilizarii cadrelor sunt: - dezvoltatorul de pagini Web trebuie sa urmareasca mai multe documente HTML; - este dificil sa tiparim intreaga pagina care contine cadrele.

13 Structura acestei pagini este <!DOCTYPE html> <HTML> <HEAD> </HEAD> <FRAMESET> </FRAMESET> </HTML> fiecare cadru este introdus prin eticheta <FRAME>

14 O structurã de cadre se defineste similar unui tabel: se stabilesc un numãr de linii (sau de coloane) si pentru fiecare linie (respectiv coloanã): se stabileste continutul sãu sau o altã structurã de cadre.

15 atributele elementului <FRAMESET> ROWS = listă-dimensiuni COLS = listă-dimensiuni FRAMEBORDER = 1 0

16 src name frameborder marginwidth marginheight atributele elementului <FRAME> no resize - frame-ul nu se redimensioneaza in functie de monitorul vizitatorului scrolling="(yes/no)"- permite sau nu scroll-ul intr-un frame cadre1.html cadre2.html cadre3.html

17 Cadre imbricate <!doctype html> <html> <head> <title> Utilizarea cadrelor</title> </head> <FRAMESET ROWS="70, *"> <FRAME SRC = "titlu.html"> <FRAMESET COLS="20%, *"> <FRAME SRC = "menu.html" > <FRAME NAME="Stanga" SRC = "intro.html"> </FRAMESET> </FRAMESET> </html> cadre4.html

18 Cadre interne (in-line frames) <IFRAME> </IFRAME> - defineşte o arie rectangulară în interiorul documentului, arie în care browserul va afişa un alt document HTML, complet, inclusiv marginile şi barele de derulare - Atributele acestui element sunt: SRC, NAME, FRAMEBORDER, MARGINWIDTH, MARGINHEIGHT, SCROLLING, ALIGN, WIDTH, HEIGHT - cadre5.html cadre6.html