TABELE

In HTML ,pe langa utilizarea clasica,tehnica tabelelor este utilizata si pentru aranjarea obiectelor in pagina.

Structura unei tabele cuprinde:

Titlul - descrie continutul tabelei(este optional);

Capetele de tabela sunt denumirile coloanelor/liniilor tabelei(sunt optionale);

Celulele tabelei sunt elementele individuale ale tabelei;o celula poate contine date uzuale sau denumiri de coloane/linii.

Principalele tag-uri folosite la realizarea tabelelor

O tabela este delimitata de tag-ul <table> . </table>.Cel mai important atribut al acestui tag este atributul border care defineste grosimea conturului tabelei.Forma generala a atributului este border="valoare" (in pixeli).

Titlul tabelei este delimitat de tag-ul <caption> . </caption>.

Fiecare linie a tabelei este delimitata de tag-ul <tr> . </tr>.

Continutul fiecarei celule a capului de tabela este delimitat de tag-ul <th> . </th>.

Datele din fiecare celula sunt delimitate de tag-ul <td> . </td>.

Observatii!

Browser-ul afiseaza cu caractere mai pronuntate capetele de tabela.

In HTML o tabela este definita linie cu linie

O celula poate contine text,legaturi,liste,formulare,imagini,alte tabele.Exista si posibilitatea ca o celula sa nu contina nimic.O celula vida se creeaza adaugand intre tag-urile de creare a celulei :

a.     codul    &nbsp

b.     </br>

c.     

Continutul unei celule poate fi extins peste continutul celulelor adiacente utilizand atributele:

a.      colspan - numarul de coloane ocupate de celula extinsa

b.     rowspan - numarul de linii ocupate de celula extinsa

Colorarea tabelelor

Pentru a schimba culoarea de fond a intregii tabele se utilizeaza atributul bgcolor in tagul de intrare <table>.

Pentru a schimba culoarea de fond a unei intregi linii a tabelei se utilizeaza atributul bgcolor in tag-ul de intrare <th> sau <td>.

Observatie!

Atunci cand schimbam culoarea de fond este posibil ca textul sa fie greu lizibil.In asemenea situatii vom schimba si culoarea fontei utilizand tag-ul <font> cu atributul color.

Pentru a schimba culoarea chenarului tabelei vom utiliza atributele bordercolor,bordercolordark si bordercolorlight ale tag-ului <table>.Atributul bordercolordark stabileste culoarea partii drepte si a celei de jos a chenarului iar atributul bordercolorlight stabileste culoarea partii din stanga si a celei de sus a chenarului.

Observatie!

Atributele bordecolordark si bordercolorlight sunt recunoscute doar de browser-ul IE.

Alinierea unei tabele

I)       Alinierea unei tabele in pagina

Pentru a alinia o tabela in pagina utilizam atributul align al tag-ului de intrare <table>.Valorile posibile pentru atributul align sunt:left,center,right.Valoarea implicita este left.

Observatie!

Daca nu se specifica nicio optiune de aliniere a tabelei in pagina atunci aceasta va fi automat aliniata la stanga iar eventualul text din pagina va fi plasat inainte sau dupa tabela.

Daca se specifica o optiune pentru alinierea tabelei atunci eventualul text din pagina va inconjura tabela.

In punctul de la care se doreste ca textul sa nu mai inconjoare tabela ci sa apara sub ea se va insera tag-ul <br> cu atributul clear.

In versiunile mai vechi ale browser-elor nu este admisa valoarea center si nu este posibila inconjurarea tabelei cu text.

II)     Alinierea continutului celulelor

Alinierea pe orizontala se poate face la stanga,dreapta sau centru cu ajutorul atributului align care poate lua una din valorile left,right sau center.Aceasta optiune se poate folosi in cadrul tag-urilor <tr>,<th> sau <td>.

Alinierea pe verticala se poate face sus,jos sau la centru cu ajutorul atributului align care va lua una din valorile top,bottom sau middle. Aceasta optiune se poate folosi in cadrul tag-urilor <tr>,<th> sau <td>.

Observatii!

Atributul align utilizat in cadrul tag-ului <tr> are efect asupra intregii linii a tabelei.Utilizat in <th> sau <td> va alinia doar continutul celulei respective.

Aceleasi atribute sunt valabile si pentru tag-ul <caption>(titlul este aliniat implicit deasupra tabelei in centru).

Pentru a stabili spatiul alb care se lasa se folosesc atributele:

a.      hspace -spatiul liber de la stanga si dreapta tabelei

b.     vspace - spatiul liber de deasupra si dedesuptul tabelei.

HARTI DE IMAGINI

ImageMap este o imagine continand zone care functioneaza ca hot-spoturi. Prin activarea unei zone se realizeaza un salt intr-un punct al unei pagini. Ansamblul zonelor se numeste harta.

Realizarea unui ImageMap presupune:

I. Definirea hartii;

II. Includerea unei imagini in pagina;

III. Asocierea imaginii cu harta.

I.Harta este definita prin succesiunea de taguri:

<map>

<area>

<area>

----- ----- ----

<area>

</map>

Fiecare zona din imagine care va functiona ca hot-spot este descrisa cu tagul area

Principalele atribute ale tagului area sunt

Atributul name al tagului map

Cu ajutorul atributului name, atribuim hartii un nume,<map name='nume' >

II.Pentru a include imaginea in pagina HTML, utilizam tagul img cu atributele cunoscute.

III. Pentru a asocia harta cu imaginea, utilizam atributul usemap in tagul img.
Scriem atributul sub forma usemap='#nume', unde nume este numele atribuit hartii.

FORMULARE

In HTML, un formular este delimitat de tagul <form></form>. Intre tagul de intrare si cel de iesire sunt inserate, in principal, controalele formularului. Un control este o forma de interactiune a utilizatorului cu formularul.Majoritatea controalelor se realizeaza cu tagul input.

Atribute ale tag-ului input

Atributul type
Atributul type permite specificarea tipului de control pe care dorim sa-l cream. Valorile posibile ale atributului sunt: text, password, radio, checkbox, submit, reset.Specificarea atributului este obligatorie.Exemplu. type='text'

Atributul name
Folosind atributul name , atribuim un nume, ales de noi fiecarui control creat, cu exceptia celor de tip submit si reset . Pentru a crea un set de controale radio mutual exclusive, este suficient sa atribuim aceeasi valoare atributului name al tagurilor input.

Atributul size

Putem modifica latimea unui control de tip text , folosind atributul size al tagului input.

Atributul maxlength

Pentru a limita numarul de caractere care pot fi tastate intr-un control text, utilizam atributul maxlength al tagului input.

Atributul value   

Daca dorim ca browser-ul sa afiseze o valoare initiala intr-un control de tip text , utilizam atributul value al tagului input . Valoarea ramane afisata pana cand utilizatorul    tasteaza propriile informatii. Pentru a schimba eticheta care apare pe buton in cazul controalelor submit si reset, utilizati atributul value al tagului input.

Atribute ale tag-ului textarea

Atributul name permite atribuirea unui nume controlului.

Daca dorim ca browser-ul sa afiseze un text initial intr-un control de tip textarea, plasam textul intre tagul de intrare si cel de iesire. Textul va ramane afisat pana cand utilizatorul va tasta propriile informatii.

Atributele rows si cols sunt utilizate pentru a fixa dimensiunea dorita pentru controlul textarea( numarul de linii si de coloane).

Atribute ale tag-ului select

Tagul <select></select> delimiteaza secventa cu care se realizeaza controlul menu

Pentru un control menu, utilizarea atributului name, in tagul select, este obligatorie.

Atributul size - derularea integrala a unei liste cu multe elemente ar putea fi incomoda. Utilizati atributul size al tagului de intrare <select>, pentru a limita numarul de elemente afisate la un moment dat.

Atributul multiple - cream un control menu cu posibilitatea de alegere multipla, specificand atributul multiple in tagul de intrare select . Utilizatorul va putea sa aleaga mai multe elemente din lista, tinand apasata tasta Control pe toata durata selectarii.

Atribute ale tag-ului option

Tagul <option></option> delimiteaza fiecare element (optiune) din meniu.

Atributul value - este o idee buna ca, impreuna cu fiecare element ales de utilizator dintr-un control menu , scriptul sa primeasca si un cod. Invizibil pentru utilizator, codul poate facilita prelucrarea raspunsurilor.Pentru a asocia un cod unui control, folosim atributul value al tagului de intrare <option>.

In controalele text, textarea si menu fontele romanesti nu sunt recunoscute de browser.

CADRE SAU SUBFERESTRE

Pana in acest moment in fereastra browser-ului era incarcat un singur document HTML. Cadrele ne permit sa definim in fereastra browser-ului subferestre in care sa fie incarcate simultan documente HTML diferite.

Observatie!   

Multe browsere mai vechi nu accepta aceasta optiune.

O multime de cadre pentru care se specifica afisarea lor pe ecran si aranjarea lor se numeste configuratie de cadre adica frameset.Cadrele sunt definite intr-un fisier HTML special, in care blocul <body> . </body> este inlocuit cu blocul <frameset> . </frameset> . In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>. Un atribut obligatoriu al etichetei <frame> este src care primeste ca valoare adresa URL a documentului HTML care va fi incarcat in acest frame.

Definirea cadrelor se face din aproape in aproape, prin impartirea ferestrelor (si a subferestrelor) in linii si coloane:

impartirea unei ferestre intr-un numar de subferestre de tip coloana se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastra;

impartirea unui ferestre intr-un numar de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastra;

valoarea atributelor cols si rows este o lista de elemente (pentru fiecare subfereastra cate un element) separate prin virgula, care descriu modul in care se face impartirea.

Elementele listei pot fi:

Un numar intreg de pixeli;

Procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %);

n*, care inseamna n parti din spatiul ramas.

Observatie!

Dimensiunea cadrelor poate fi ajustata plasand indicatorul mouse-ului pe bordura comuna pana cand acesta se transforma intr-o sageata cu doua capete dupa care executam clic si tragem bordura in noua pozitie.

Exemplul 1: "200,*,50%,* " inseamna impartirea in 4 subferestre, dintre care prima are 200 de pixeli, a treia ocupa jumatate din spatiul total disponibil, iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil.

Exemplul 2: "200, 1*,50%,2* " inseamna o impartire in 4 subferestre, dintre care prima are 200 de pixeli, a treia ocupa jumatate din spatiul total disponibil, a doua si a patra foloseste restul spatiului ramas disponibil, care se imparte in trei parti egale, a doua fereastra ocupand o parte, iar a patra fereastra 2 parti

Aplicatia1:

In aceasta aplicatie este creata o pagina web cu doua cadre orizontale,primul avand o inaltime de 100 de pixeli si al doilea ocupand restul    ferestrei browserului.

<html>

<head>

<title> Exemplu cadre orizontale</title>

</head>

<frameset rows="100,*">

<frame src='orar.html'>

<frame src='formulare.html'>

</frameset>

</html>

Aplicatia 2:

In aceasta aplicatie este creata o pagina web cu trei cadre verticale,cadrul din stanga avand o latime de 150 de pixeli,cadrul din dreapta acoperind 10% din latimea totala a ferestrei browserului iar cadrul din mijloc ocupand restul spatiului.

<html>

<head>

<title> Exemplu cadre verticale</title>

</head>

<frameset cols="150,*,10%">

<frame src='formulare2.html'>

<frame src='orar.html'>

<frame src='formulare.html'>

</frameset>

</html>

Aplicatia 3:

In exemplul urmator este creata o retea de cadre avand 3 linii si doua coloane.. Pentru a realiza acest lucru, se folosesc cele doua atribute cols si rows.Linia de sus are inaltimea de 200 de pixeli iar restul spatiului pe orizontala este impartit in trei parti egale din care linia din mijloc ocupa o treime iar linia de jos 2 treimi.Coloana din stanga va acoperi 30% din latimea ferestrei browserului iar coloana din dreapta restul .

<html>

<head>

<title>Exemplu retea de cadre</title>

</head>

<frameset rows="200,*,2*" cols="30%,*">

<frame src='p1.html'>

<frame src='p2.html'>

<frame src='p3.html'>

<frame src="p4.html'>

<frame src="p5.html">

<frame src="p6.html">

</frameset>

</html>

Observatie! Cadrele umplu reteaua de la stanga la dreapta si de sus in jos.

Atributele elementului <frameset> Atributele acceptate de elementul <frameset> descriu continutul si aspectul unui set de cadre

cols

descrie impartirea pe verticala a setului de cadre

rows

descrie impartirea pe orizontala a setului de cadre

border defineste grosimea in pixeli a bordurilor intre cadre.Valorile posibile sunt 0 si numere intregi pozitive.

Observatie ! Daca se utilizeaza valoarea 0, bordurile dintre cadre dispar.

bordercolor defineste culoarea bordurilor.

frameborder stabileste daca bordurile sunt sau nu vizibile. Valorile posibile sunt "yes" (valoare prestabilita si "no"

framespacing identic cu atributul frameborder,dar se aplica doar in Internet Explorer

Atributele elementului <frame>

Atributele elementului<frame> permit precizarea rolului si a aspectului fiecarui cadru

bordercolor defineste culoarea bordurii.Valoarea acestui atribut (daca este precizata) inlocuieste valoarea atributului bordercolor al elementului <frameset>.

frameborder stabileste daca bordurile sunt sau nu vizibile.Valorile posibile sunt "yes" (valoare prestabilita si "no". Valoarea acestui atribut (daca este precizata) inlocuieste valoarea atributului frameborder al elementului <frameset>.

marginheight defineste marimea in pixeli a spatiului alb dintre continutul cadrului si marginile de sus si de jos.Valorile posibile sunt 0 si numere intregi pozitive.

marginwidth defineste marimea in pixeli a spatiului alb dintre continutul cadrului si marginile din stanga si din dreapta.Valorile posibile sunt 0 si numere intregi pozitive.

scrolling stabileste aparitia barelor de derulare pe orizontala si pe verticala.Valorile posibile sunt:

"auto" - valoare prestabilita,barele de derulare apar doar daca sunt necesare

"yes"-barele de derulare sunt afisate permanent

"no"-barele de defilare nu apar deloc

noresize cadrul nu mai poate fi redimensionat

src defineste adresa URL a resursei Internet care va fi incarcata in cadru

name-adauga un identificator unic pentru cadru,utilizat la definirea cadrelor destinatie pentru legaturi.