Limbajul HTML (II)

Hypertext Markup Language

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

• 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

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

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

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

• Atribute ale celulelor unui tabelParametrii width pentru lăţime şi height pentru înălţime pot fi folosiţi şi în cazul marcatorilor TR şiTD pentru dimensionare forţată a celulelortab7.htmlObs. 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, toptab8.html

• 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

• 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

Tabele imbricate

• tab13.html

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 ceconţ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.

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

• Structura acestei pagini este <!DOCTYPE html> <HTML>

<HEAD>…

</HEAD> <FRAMESET>…</FRAMESET> </HTML>

• fiecare cadru este introdus prin eticheta <FRAME>

O structurã de cadre se definește similarunui tabel: • se stabilesc un numãr de linii (sau de

coloane) și • pentru fiecare linie (respectiv coloanã):

– se stabilește conținutul sãu sau – o altã structurã de cadre.

atributele elementului <FRAMESET>

• ROWS = listă-dimensiuni• COLS = listă-dimensiuni• FRAMEBORDER = 1 | 0

atributele elementului <FRAME>• src • name • frameborder • marginwidth • marginheight • no resize - frame-ul nu se redimensioneaza in

functie de monitorul vizitatorului• scrolling="(yes/no)"- permite sau nu scroll-ul

intr-un framecadre1.html cadre2.html cadre3.html

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

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

Utilizarea formularelor in HTML

Formulare• Un formular este constituit din elemente

speciale, denumite elemente de control (controls), cum ar fi butoane radio, butoane de validare, câmpuri text, meniuri, prin intermediul cărora cel care vizualizează pagina Web poate transmite informaţii către serverul care găzduieşte pagina Web respectivă

O sesiune cu o pagina Web ce conţine un formular cuprinde două etape:

• Utilizatorul completează formularul şi, prin apăsarea butonului de expediere, trimite serverului datele înscrise în formular.

• O aplicaţie dedicată de pe server (un script) analizează informaţiile transmise şi, în funcţie de configuraţia scriptului, fie stochează datele într-o bază de date, fie le transmite la o adresă de mail indicată. Dacă este necesar, serverul poate expedia şi un mesaj de răspuns utilizatorului.

Inserarea formularelor in site-uri se realizeaza inmai multe etape:1.proiectarea formularului de intrare, care va fi

completat de vizitator; 2. scrierea aplicatiei care va prelucra informatiile

din formular; 3.proiectarea documentului raspuns - generat de

scriptul CGI - Common Gateway Interface, PHP – Hypertext Preprocesor sau ASP – Active Server Pages (raspuns la cererea adresata prin completarea formularului)

Crearea unui formular

<FORM> </FORM>In interiorul blocului sunt incluse:

• elementele formularului, în care vizitatorul urmează să introducă informaţii

• un buton de expediere (submit), la apăsarea căruia, datele sunt transmise către server

• opţional, un buton de anulare (reset, cancel), prin care utilizatorul poate anula datele înscrise în formular

Eticheta <FORM> are două atribute esenţiale: action și method

• action – comunică browserului unde să trimită datele introduse în formular.

• action: stabileste ce anume se va intampla cu datele scrise in formular. Ca valoare a acestui atribut se poate specifica:

o un program/script care trateaza continutul formularului ca un set de cuvinte cheie ce vor defini o cautare;

o URL-ul unui script CGI, aflat, de obicei, in directorul cgi-bin de pe serverul WWW local (cel care contine pagina respectiva)

o action="mailto:adresa_de_mail": specifica faptul ca datele din formular vor fi trimise prin posta electronica la adresa data; acestea pot fi prelucrate ulterior, eventual "manual";

• action menționează adresa scriptului (aflat pe server) care va interpreta formularul (va prelua datele și le va prelucra).

• exemplu: <FORM action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.

• method - precizează metoda utilizată de browser pentru expedierea datelor formularului.

Atributul method poate avea două valori:• post - folosită în cele mai multe cazuri. Indică serverului să furnizeze

datele direct scriptului ca date de intrare standard și sunt permise cantitati mari de date.

• get (valoarea implicită) - datele din formular sunt adăugate la adresa URL precizată de atributul action, între adresa URL şi date fiind inserat un "?". Permite trimiterea unor mici cantitati de date. Datele sunt adăugate conform sintaxei: nume_camp=valoare_camp

De exemplu:"http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1=valoare1&nume2=valoare2"

Pentru a defini elementele care fac parte dinformular se utilizează etichetele • <INPUT>• <SELECT>• <OPTION>• <TEXTAREA>

Eticheta <INPUT>- se pot introduce în formular câmpuri de

editare (casete de text), câmpuri de tip password, butoane de expediere şi anulare, butoane radio şi casete de validare

Atribute:• type - prin care se precizează tipul elementului. • name - permite ataşarea unui nume fiecărui

element al formularului. • value - permite atribuirea unei valori iniţiale unui

element al formularului.

Atributul type poate avea următoarele valori:

• text - se foloseşte pentru a introduce un câmp de editare pe o singură linie

• password – se foloseşte pentru a insera un câmp de editare în care caracterele introduse sunt înlocuite cu asteriscuri (*)

Pentru câmpurile text -atribute• size - Seteaza marimea campului.• maxlength - valoarea maxima de caractere ce pot fi

introduse

• radio – folosit pentru a insera un şir de butoane radio (elemente care se folosesc pentru a selecta dintr-o listă de opţiuni una şi numai una dintre ele)

• checkbox – folosit pentru a introduce un şir de casete de validare (elemente care se folosesc când dintr-o listă de opţiuni se poate alege mai mult de o singură variantă)

• submit – se foloseşte pentru a introduce un buton de expediere

• reset – se foloseşte pentru a introduce un buton de anulare a informaţiilor introduse în formular

• button - se foloseşte pentru a introduce în formular un buton obişnuit

• hidden - se foloseşte pentru a introduce în formular un câmp ascuns

formular1.htmlCasete de text: formular2.html

• file - permite expedierea conţinutului unui fişier a cărui adresă URL este transmisă prin intermediul atributului value sau poate fi tastată într-un câmp de editare ce apare odată cu formularul sau poate fiselectată prin intermediul unei casete de tip File Upload sau Choose File care apare la apăsarea butonului Browse din formular.

• <input type=“file" name="file">

• formular_ex_file.html

• Butoanele Radio se folosesc atunci candse doreste alegerea unei singure optiunidintr-un numar limitat de posibilitati.

• Atributul checked pentru valoare implicităExemplu:<form> <input type="radio" name="sex" value="barbat"> Barbat<br> <input type="radio" name="sex" value="femeie"> Femeie</form>formular_buton_radio.htmlformular3.html

• Casetele de selectie se folosesc atunci cand se doreste selectarea unei optiuni sau mai multoroptiuni dintr-un numar limitat de optiuni.

• Atributul checked pentru valoare implicităExemplu:<form> Imi place sa lucrez la calculator: <input type="checkbox" name="calculator" value= "Calculator“> <br>Imi place sa citesc: <input type="checkbox" name="lectura" value="Lectura"checked><br> </form>

formular_casete_selectie.html formular4.html

• Etichetele <SELECT> şi <OPTION>• Un meniu de selectie se obtine utilizand

elementul "select" • Fiecare optiune a acestui meniu se obtine

prin intermediul elementului "option" (<option> ... </option>).

formular5.html

• Eticheta <TEXTAREA>formular6.htmlformular7.html• Validarea datelor