Tehnologii WEBCursul 3
Liste in HTML
n HTML exista posibilitatea ca anumite enunuri s fie numerotate sau marcate ntr-un anumit fel. O astfel de organizare poart numele de list.n HTML se pot descrie trei tipuri de liste:1. liste ordonate, n care elementele sunt numerotate2. liste neordonate, n care elementele sunt marcate de asa natura nct nu se sugereaz o anumit ordine a lor3. liste de tip definitieMai jos putei observa cele trei tipuri de liste:
1. Lista ordonatElementul OL (Ordered Lists) creeaz o list ordonat. Elementele listei sunt trecute ntre tag-urile
.Elementul LI (List Item) descrie un element al listei. Tag-ul obligatoriu este cel de nceput , iar cel de sfrit este facultativ: .Elementul OL are atributul type. Valorile pe care le poate lua acest atribut, sunt:
.Elementul UL are atributul type.Valorile pe care le poate lua acest atribut, sunt:
se insereaza un bloc de text, aceasta va fi indentat ( intocmai ca elementele unei liste).
Exemplul 1:
liste_exemplu
Un bloc de text indentat
In exemplul urmator lista de definitii are itemii si multipli.Exemplul 2:
liste_exemplu
O lista de definitii specialaprogramLuniMartiMiercuriOra 9.00.InsciereOra 11.00.AudieriOra 13.30.Raspunsuri
Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de elemente imagini si texte.Exemplul 3:
liste_exemplu
O lista personalizata
Tabele in HTML
Paginile pot conine tabele. Elementul TABLE descrie un tabel. Tabelul utilizeaz tag-urile i .Elementul TR(table row) descrie o linie a tabelului. O linie a tabelului ncepe cu i se termin atunci cnd este ntlnit un nou . Opional, se poate folosi .Elemenul TD(table data) descrie o celul a tabelului. Se utilizeaz tag-urile i, opional, .Exemplu:
Efect:
Atributele elementului TABLEBorder definete grosimea liniilor (n pixeli) care nconjoar tabelul. Alturat putei observa cum arat acelai tabel n care atributul border lipsete.Exemplu:
Efect:
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:
Efect:
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.Exemplu:
Efect:
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 tabeluluiPoate fi dat n procent fa de nlimea ferestrei browserului (height="75%") sau n pixeli (height="200").3. align - determin alinierea tabelului n paginPoate 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.Exemplu:
Efect:
Atributele elementului TRalign 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 fondExemplu:
Efect:
Atributele elementului TDwidth, 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:
Efect:
Elementele TH i CAPTIONElementul THn loc de se poate folosi . Parametrii sunt aceiai, doar c textele, implicit, sunt tiprite bold.Elementul CAPTION are rolul de a permite scrierea titlului unui tabel. Titlul se scrie ntre cele dou tag-uri i . Cele dou tag-uri trebuie s se gseasc imediat dup .Exemplu: Un titlu Elementul CAPTION are atributul align.
Gruparea liniilor i a coloanelor unui tabel
Liniile unui tabel pot fi mprite n trei categorii:1. linii de antet (primele linii ale tabelului)2. linii de corp3. liniile finale ale tabeluluiElementul THEAD are rolul de a marca liniile din antet. Se folosete tag-ul i, opional .Elementul TBODY are rolul de a marca liniile din corpul tabelului. Se folosete tag-ul i, opional .Elementul TFOOT are rolul de a marca liniile de sfritul tabelului. Se folosete tag-ul i, opional .Structura unui tabel care utilizeaz aceast facilitate este:
. ..
. . .
. . .
. . .
n continuare, prezentm cteva atribute pe care le ntlnim la oricare din aceste trei 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).Elementul COLGROUP permite gruparea coloanelor unui tabel. Se utilizeaz tag-urile i, opional .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.Exemplu:
Efect:
Tabele in HTML
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.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.Pentru structurarea unui document HTML n cadre sunt utilizate tagurile:
Organizarea documentului n cadre Tagul Un document cu cadre se realizeaz similar unui document HTML oarecare, n care tagurile , respectiv sunt nlocuite cu tagurile , respectiv :
...
Aadar, tagul permite structurarea documentului principal n cadre. n interiorul perechii nu pot exista dect elemente:
Tagul 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.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 relativObservaii: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. 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. 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.
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.
Definirea cadrelor - Tagul Tagul permite definirea unui cadru n interiorul unui set de cadre. El are sens numai atunci cnd apare n interiorul perechii .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; 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); 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.
Browserele vechi - Tagul Tagul 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 . Dac ns, browserul recunoate cadrele, el va ignora coninutul perechii .De regul, atunci cnd un browser nu recunoate un tag, nu l interpreteaz. Acest lucru se poate ntmpla i n cazul tagurilor , . Este evident c dac un browser nu recunoate tagurile i el nu va recunoate nici . ns, va interpreta tagurile pe care le recunoate, adic, n acest caz, cele cuprinse ntre i . De fapt, efectul tagului este, n cazul browserelor care recunosc cadre, acela de a ignora coninutul inclus n interiorul perechii .
Cadre in-line - Tagul (in-line frame)Tagurile sunt similare tagurilor , cu deosebirea c se includ n documente HTML obinuite (nu n documente HTML cu cadre), adic n interiorul perechii .La ora actual numai Internet Explorer accept cadre in-line. Dac un browser nu recunoate cadre, el va afia coninutul cuprins ntre i .Tagul accept aceleai atribute ca i tagul , n plus accept atribute preluate de la tagul , care controleaz modul de afiare al cadrului n interiorul documentului.Atribute acceptate:
1. preluate de la tagul : src name scrolling border bordercolor frameborder framespacing noresize marginwidth, marginheight
2. preluate de la tagul : align width, height vspace, hspace
EXEMPLE:
1. Realizarea cadrelor orizontale
Universitatea Constantin Brancusi
Universitatea Constantin BrancusiFacultatea de InginerieCatedra de Automatica si Informatica
Specializarile Facultatii de Inginerie sunt: Automatica si Informatica; Mecanica;Energetica.
Targu-Jiu, Str. Geneva3, Telefon: 0253.111.111.
2. Imbricarea cadrelor
Universitatea Constantin Brancusi
3. Cadre imbricate cu chenare colorate de diverse grosimi
Cadre imbricate