3 cursul 3

Upload: octavian-enache

Post on 07-Oct-2015

222 views

Category:

Documents


0 download

DESCRIPTION

asdwae

TRANSCRIPT

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

  1. i

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

          1. Exemplu:Efect:2. Lista neordonatElementul UL (Unordered Lists) descrie o list neordonat. Elementele listei sunt cuprinse ntre tag-urile
  • i

.Elementul UL are atributul type.Valorile pe care le poate lua acest atribut, sunt:

      • Exemplu:Efect:Se pot construi si liste imbricate, dupa cum urmeaza din exemplul urmator:Exemplu:Efect:3. Lista de tip definitieElementul DL (Definition Lists) are rolul de a descrie o list de definiii. El folosete tag-urile si .Elementul DT (Definition Term) definete termenul din list care trebuie descris. El utilizeaz tag-ul .Elementul DD (Definition Description) are rolul de a reine descrierea termenului. El utilizeaz tag-ul .Exemplu:Efect:Utilizari speciale ale listelorDaca intr-o lista, in loc de elementele acesteia introduse prin
      • se insereaza un bloc de text, aceasta va fi indentat ( intocmai ca elementele unei liste).

        Exemplul 1:

        liste_exemplu

        Un bloc de text indentat

        1. Un bloc de text indentat. Un bloc de text indentat. Unbloc de text indentat. Un bloc de text indentat. Un bloc detext indentat. Un bloc de text indentat. Un bloc de textindentat. Un bloc de text indentat. Un bloc de textindentat.

        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

        • Tipuri de masini Volkswagen sunt:
        • Golf
        • Jetta
        • Passat
        • Bora
        • Corrado
        • Transporter

        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