...

O lista neordonata

Culori uzuale disponibile prin nume
• Black
• White
• Red

...

şi
1. pot avea un atribut type care stabileşte tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt: - " A " pentru ordonare de tipul A , B , C , D etc.; - " a " pentru ordonare de tipul a , b , c , d etc.; - " I " pentru ordonare de tipul I , II , III , IV etc.; - " i " pentru ordonare de tipul i , ii , iii , iv etc.; - " 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc Următorul exemplu este o lista ordonata cu cifre romane :

   O lista ordonata cu cifre romane

   ---

   Culori uzuale disponibile prin nume
   1. Black
   2. White
   3. Red
   4. Green
   5. Blue
   6. Yellow
   7. Purple
   8. Aqua
   
   
   Listă ordonată
   
   Tag-ul
   poate avea un atribut start care stabileşte valoarea iniţiala a secvenţei de ordonare. Valoarea acestui atribut trebuie sa fie un număr întreg pozitiv. Legături Legaturile (link-urile) reprezintă partea cea mai importantă a unei pagini Web. Ele transformă un text obişnuit în hipertext sau hiperlegatura, care permite trecerea rapida de la o informaţie aflata pe un anumit server la altă informaţie memorată pe un alt server aflat oriunde în lume. Legăturile sunt zone active într-o pagină Web, adică zone de pe ecran sensibile la apăsarea butonului stâng al mouse-ului. O legatura catre o pagina aflata în acelaşi director O legătură către o pagina aflata în acelaşi director se formează cu ajutorul etichetei (de la "anchor"=ancora). Pentru a preciza pagina indicata de legătură se utilizează un atribut al etichetei numit href, care ia valoare numele fişierului HTML aflat în acelaşi director. Zona activă care devine sensibilă la apăsarea butonului stâng al mouse-ului este formata din textul cuprins intre etichetele .... Prezenta etichetei de sfârşit este obligatorie.
   
   9
   
   

   Pagina 1

   Link catre pagina 2 O legătură către o pagina aflata pe acelaşi disc local Daca pagina referită se afla pe acelaşi disc local, dar într-un alt director atunci pentru a preciza poziţia ei în structura de directoare se poate folosi adresarea relativă plecând de la directorul curent .
   
   Legături prin adresare relativă
   
   Ancore Într-o pagină foarte lungă pot exista puncte de reper către care se definesc legături. O ancora se defineşte de asemenea prin eticheta . Pentru a defini ancora se utilizează atributul name care primeşte ca valoare un nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legătură catre "leg1" definită în aceeaşi pagina se utilizează eticheta având atributul href de valoare "#leg1". Pentru a introduce o legătură către o ancoră definită în alt document (altă pagină) aflat în acelaşi director, atributul href primeşte o valoare de forma "nume_fisier.html#nume_ancora".

   Ancore definite în acelasi document si în alt document

   Link catre ancora 1 Link catre o ancora din alt document
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   < br>
   
   
   
   
   
   
   ancora 1 Alegerea culorilor pentru legaturi În mod prestabilit se utilizează trei culori pentru legaturi: - o culoare pentru legaturile nevizitate (nu s-a efectuat nici un clic pe ele) - o culoare pentru legaturile vizitate (s-a efectuat cel puţin un clic pe ele) - o culoare pentru legaturile active (când se execută clic şi se ţine apăsat). Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei : • link pentru legaturile nevizitate; • vlink pentru legaturile vizitate; • alink pentru legaturile active. Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RGB. 10
   
   

   Setarea culorilor pentru link-uri:
   rosu pentru legaturi active, verde pentru legaturi vizitate si albastru pentru legaturi nevizitate

   Link catre pagina 1
   Link catre pagina 2
   Link catre pagina 11 Utilizarea poştei electronice Intr-o pagina Web se poate afla legaturi care permit lansarea în execuţie a aplicaţiei de expediere a mesajelor electronice. Pentru aceasta se utilizează în construcţia adresei URL cuvântul mailto: urmat de o adresa e-mail valida. Pentru ca exemplul următor sa funcţioneze trebuie ca: - pe calculator sa fie instalat o aplicaţie de expediere a mesajelor electronice (Outlook Express, Microsoft Outlook etc.) - adresa sa fie valida şi calculatorul sa fie conectat la Internet.

   Expediere de mesaje electronice

   
   Mesaje catre autorul paginii Legaturi către fişiere oarecare O pagina Web poate conţine legaturi către orice tip de fişiere aflate pe orice servere din Internet. Pentru aceasta se utilizează eticheta având valoarea atributului href egala cu adresa URL a fişierului destinaţie. Atunci când se efectuează clic pe legătura din exemplul următor browserul va deschide o caseta de dialog - File download - care va permite: - sa salvaţi pe discul local fişierul - sa lansaţi în execuţie aplicaţia capabila sa interpreteze corect fişierele de tipul respectiv

   Legaturi catre fisiere oarecare

   
   Link catre fisierul fisier.zip Atributul target Dacă dorim ca pagina solicitată să fie încărcată într-o altă fereastră decât cea curentă, atunci trebuie lansată în execuţie o nouă instanţă a browserului care va conţine noua pagină. Acest lucru se
   
   11
   
   realizează folosind atributul target al etichetei , care primeşte ca valoare un nume. Numele ferestrei poate fi folosit ca valoare pentru atributul target şi pentru alte legături caz în care paginile respective vor fi încărcate în aceeaşi fereastră. Atributul target acceptă şi alte valori cum ar fi _blank caz în care pagina se va încărca într-o fereastră nouă, anonimă (nu poate fi folosită pentru încărcarea altor pagini).

   Atributul target

   
   legatura 1
   legatura 2 Imagini Imaginile sunt stocate în fisiere cu diverse formate. Formatele acceptate de browsere pentru fişierele imagine sunt: - GIF (Graphics Interchange Format) cu extensia .gif; - JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; - XPM (X PixMap) cu extensia .xmp; - XBM (X BitMap) cu extensia .xbm; - BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); - TIFF (Tagged Image File Format) cu extensia .tif sau .tiff; Daca imaginea se afla în acelaşi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia. < img src=”imagine.gif”> Atributul alt permite afişarea unui text alternativ în locul imaginii dacă aceasta nu este încărcată sau lângă mouse atunci când acesta este plasat peste imagine. O pagina care contine o imagine
   
   Text dupa imagine Chenarul şi dimensionarea unei imagini Daca doriţi sa adăugaţi un chenar în jurul imaginii, folosiţi atributul border al etichetei . Valorile acestor atribute sunt numere întregi pozitive. O imagine are anumite dimensiuni pe orizontală şi verticală, stabilite în momentul creării ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate în momentul afişării ei în pagina Web. Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width şi height. Ca valori, cele două atribute, pot primi un număr de pixeli sau procente din lăţimea şi respectiv înălţimea ferestrei
   
   12
   
   O imagine cu chenar şi dimensiuni de 200 pixeli X 15 %
   
   Text dupa imagine.
   
   Alinierea unei imagini Alinierea unei imagini se poate face prin intermediul atributului valori:
   
   align care poate lua următoarele
   
   - "left" - aliniere la stânga; celelalte componente sunt dispuse pe în partea dreapta; - "right" - aliniere la dreapta; celelalte componente sunt dispuse pe în partea stânga; - "top" - aliniere deasupra; partea de sus a imaginii se aliniază cu partea de sus a textului ce precede imaginea; - "middle" - aliniere la mijloc; mijlocul imaginii se aliniază cu linia de bază a textului ce precede imaginea. - "bottom" - aliniere la baza; partea de jos a imaginii se aliniază cu linia de bază a textului Alinieri pe verticala:
   
   
   
   
   Sus
   
   
   La mijloc:
   
   
   Jos: Alinierea textului în jurul imaginii
   
   Atributele hspace şi vspace precizează distanta în pixeli pe orizontală, respectiv pe verticală,
   
   13
   
   dintre imagine şi restul elementelor din pagina.

   Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.

   Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Imagini pentru fondul unei pagini O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. În acest scop se foloseşte atributul background al etichetei , având ca valoare adresa URL a imaginii. Imaginea se multiplica pe orizontala şi pe verticala până umple întregul ecran.
   
   Atributul bgproperties=”fixed” menţine imaginea fixă la realizarea unei defilări în pagină. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Imagini folosite ca legături Pentru a utiliza imaginea "poza.jpg" drept legatura catre pagina ex_1.1.html utilizam sintaxa:
   
   În mod prestabilit, imaginea utilizată pe post de zonă activă este înconjurată de un chenar având culoarea unei legaturi. Daca stabilim pentru atributul border al etichetei valoare „0” acest chenar dispare. Tabele Tabelele ne permit sa creăm o reţea dreptunghiulară de domenii, fiecare domeniu având propriile opţiuni pentru culoarea fondului, culoarea textului, alinierea textului etc. Pentru a insera un tabel se folosesc etichetele corespondente 14
   
   

   … Un tabel este format din rânduri. Pentru a insera un rând într-un tabel se folosesc etichetele …("table row"= rând de tabel). Folosirea etichetei de sfârşit este opţională. Un rând este format din mai multe celule ce conţin date. O celulă de date se introduce cu eticheta .

   Un tabel simplu format din 4 linii si 2 coloane

   ---

   cell 11	cell 12
   cell 21	cell 22
   cell 31	cell 32
   cell 41	cell 42

   
   
   În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează atributul border. Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezintă grosimea în pixeli a chenarului tabelului. Dacă atributul border nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egală cu 1 pixel, o valoare egală cu 0 semnifică absenţa chenarului. Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional. Alinierea tabelului Pentru a alinia un tabel intr-o pagina Web se utilizează atributul align al etichetei table cu următoarele valori posibile: "left" (valoarea prestabilita), "center", "right". Definirea culorilor de fond pentru un tabel Culoarea de fond se stabileşte cu ajutorul atributului bgcolor, care poate fi ataşat întregului tabel prin eticheta table, unei linii prin eticheta tr sau celule de date prin eticheta td. Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. Dacă în tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este următoarea: celulă, linie, tabel.

   Un tabel simplu colorat

   ---

   verde 11	rosu 11
   albastru 21	galben 22
   cell 31	cell 32
   cell 41	cell 42

   
   
   15
   
   Culoarea unui table
   
   Dimensionarea celulei 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 prestabilita a atributului cellspacing este 2. 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. Valoarea prestabilita a atributului cellpadding este 1 .

   Un tabel cu distanţa între celule de 10 pixeli iar distanţa între celule şi continut de 20 pixeli

   ---

   11	12
   21	22

   
   
   Distanţa între celule şi conţinut
   
   Dimensionarea unui tabel Dimensiunile unui tabel - lăţimea şi înălţimea - pot fi stabilite exact prin intermediul a două atribute, width şi height, ale etichetei table. Valorile acestor atribute pot fi: - numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului; - numere întregi între 1 şi 100, urmate de semnul %, reprezentând fracţiunea din lăţimea şi înălţimea totală a paginii. În exemplul următor se utilizează un truc care permite afişarea intr-o pagina Web a unui text poziţionat în centrul paginii.

   16 Text centrat.

   Alinierea conţinutului unei celule Alinierea pe orizontala a conţinutului unei celule se face cu ajutorul atributului align care poate lua valorile: "left" (la stânga),"center" (centrat , valoarea prestabilita ), "right" (la dreapta). Alinierea pe verticala a conţinutului unei celule se face cu ajutorul atributului valign care poate lua valorile: "bottom" (jos), "middle" (la mijloc, valoarea prestabilita), "top" (sus). Aceste atribute pot fi ataşate atât etichetei tr pentru a defini tuturor elementelor celulelor unui rând, cât şi etichetelor td pentru a stabili alinierea textului într-o singură celulă.

   Un tabel avand continutul celulelor aliniate

   Aici	alinierea	este centru	dreapta
   stanga	centru	sus	jos
   aici	alinierea	este centru	stanga (implicita)

   Dimensionarea exacta a celulelor unui tabel Dimensiunea unei celule poate fi stabilită exact cu ajutorul a doua atribute ale acestor etichete: width pentru lăţime şi height pentru înălţime. Valorile posibile ale acestor atribute sunt: - numere întregi pozitive (inclusiv 0) reprezentând dimensiunea în pixeli a lăţimii, respectiv a înălţimii unei celule; - procente din lăţimea , respectiv înălţimea tabelului. Tabele de forme oarecare Un tabel trebuie privit ca o reţea dreptunghiulară de celule. Cu ajutorul a doua atribute ale etichetelor td o celulă se poate extinde peste celule vecine. Astfel: - extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a cărui valoare determina numărul de celule care se unifică. - extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a cărui valoare determina numărul de celule care se unifica. Sunt posibile extinderi simultane ale unei celule pe orizontala şi pe verticala. Celule vide ale unui tabel Daca un tabel are celule vide, atunci aceste celule vor apărea în tabel fara un chenar de delimitare. În scopul de a afişa un chenar pentru celule vide se utilizează urmatoarele trucuri: - dupa td se pune   - dupa td se pune
   . Atribute Internet Explorer pentru tabele Următoarele atribute ale etichetei table funcţionează cu Internet Explorer - background permite stabilirea unei imagini pentru fondul unui tabel. Primeşte ca valoare adresa URL a imaginii folosite pentru fond; - bordercolor permite stabilirea culorii pentru chenarul unui tabel; - bordercolorlight permite stabilirea culorii feţei luminate pentru chenarul 3D al unui tabel; - bordercolordark permite stabilirea culorii feţei întunecate pentru chenarul 3D al unui tabel; Atributele frame şi rules Atributul frame al etichetei table permite specificarea părţilor din chenarul unui tabel care vor fi afişate. Valorile posibile sunt:
   
   17
   
   - void - elimina toate muchiile exterioare ale tabelului; - above - afişează o muchie în partea superioara a cadrului tabelului; - below - afişează o muchie în partea inferioara a cadrului tabelului; - hsides - afişează cate o muchie în partea superioara şi inferioara cadrului tabelului; - lhs - afişează o muchie în partea din stânga a cadrului tabelului; - rhs - afişează o muchie în partea din dreapta a cadrului tabelului; - vsides - afişează o muchie în partea din stânga şi din dreapta a cadrului tabelului; - box - afişează o muchie pe toate laturile cadrului tabelului; - border - afişează o muchie pe toate laturile cadrului tabelului; Atributul rules permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt: - none - elimina toate muchiile interioare ale tabelului; - rows - afişează muchii orizontale intre toate liniile tabelului; - cols - afişează muchii verticale intre toate coloanele tabelului; - all - afişează muchii intre toate liniile şi coloanele;

   Atributele frames si rules

   cell 11	cell 12	cell 13
   cell 21	cell 22	cell 23

   
   
   Atribute frames şi rules pentru un tabel
   
   Cadre în HTML (frames) Cadrele ne permit să definim în fereastra browserului zone în care sa fie încărcate documente HTML diferite. Cadrele sunt definite într-un fişier HTML special, în care blocul ... este înlocuit de blocul .... În interiorul acestui bloc, fiecare cadru este introdus prin eticheta . Un atribut obligatoriu al etichetei este src, care primeşte ca valoare adresa URL a documentului HTML care va fi încărcat în acel cadru. Definirea cadrelor se face prin împărţirea ferestrei pe orizontală sau pe verticală. - împărţirea unei ferestre într-un număr de cadre pe verticală se face cu ajutorul atributului cols al etichetei ; - împărţirea unei ferestre într-un număr de cadre pe orizontală se face cu ajutorul atributului rows al etichetei ; Valoarea atributelor cols şi rows este o listă de elemente separate prin virgulă, care descriu modul în care se face împărţirea. 18
   
   Elementele listei pot fi: - un număr întreg de pixeli; - procente din dimensiunea ferestrei (număr intre 1 şi 99 terminat cu %); - n* care înseamnă n părţi din spaţiul rămas; Exemplul înseamnă o împărţire în 4 cadre pe verticală, dintre care primul are 200 pixeli, al treilea ocupă jumătate din spaţiul total disponibil, iar al doilea şi al patrulea ocupă în mod egal restul de spaţiu rămas disponibil. Exemplu înseamnă o împărţire în 4 cadre, dintre care primul are 200 pixeli , al treilea ocupă jumătate din spaţiul total disponibil, iar al doilea şi al patrulea ocupă în mod egal restul de spaţiu rămas disponibil, care se împarte în trei părţi egale, al doilea cadru ocupând o parte , iar al patrulea ocupând 2 părţi. Observatii: - dacă mai multe elemente din listă sunt configurate cu * , atunci spaţiul disponibil rămas pentru ele se va împărţi în mod egal. - Într-un cadru se poate încărca un document HTML sau poate fi împărţit la rândul său în alte cadre (folosind ). În exemplul următor este creată o pagina Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini În exemplul următor este creată o pagina Web cu trei cadre mixte. Pentru a o crea se procedează din aproape în aproape. Mai întâi, pagina este împărţită în două cadre de tip coloană, după care al doilea cadru este împărţită în doua cadre de tip linie.
   
   19
   
   Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru Pentru a stabili culoarea chenarului unui cadru se utilizează atributul bordercolor. Acest atribut primeşte ca valoare un nume de culoare sau o culoare definită în conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi ataşat atât etichetei pentru a stabili culoarea tuturor chenarelor cadrelor incluse, cât şi etichetei pentru a stabili culoarea chenarului pentru un cadru individual. Atributul border al etichetei permite configurarea lăţimii chenarelor tuturor cadrelor la un număr dorit de pixeli. Valoarea prestabilita a atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fără chenar. În mod prestabilit, chenarul unui cadru este afişat şi are aspect tridimensional. Afişarea chenarului unui cadru se poate dezactivata dacă se utilizează atributul frameborder cu valoare "no". Acest atribut poate fi ataşat atât etichetei (dezactivarea fiind valabila pentru toate cadrele incluse) cât şi etichetei (dezactivarea fiind valabilă numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt: "yes" - echivalent cu 1; "no" - echivalent cu 0; Bare de defilare Atributul scrolling al etichetei este utilizat pentru a adăuga unui cadru o bară de derulare care permite navigarea în interiorul documentului afişat în interiorul cadrului. Valorile posibile sunt: - "yes" - barele de derulare sunt adăugate întotdeauna; - "no" - barele de derulare nu sunt utilizabile; - "auto" - barele de derulare sunt vizibile atunci când este necesar Atributul noresize al etichetei (fără nici o valoare suplimentară) dacă este prezent, inhibă posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului. Poziţionarea documentului într-un cadru Atributele marginheight şi marginwidth ale etichetei permit stabilirea distanţei în pixeli dintre conţinutul unui cadru şi marginile verticale, respectiv orizontale ale cadrului. Valori posibile: - număr de pixeli; - procent din lăţimea, respectiv din înălţimea cadrului; 20
   
   
   
   Poziţionarea documentelor în cadre
   
   Cadre interne (în-line) Un cadru intern este specificat prin intermediul blocului <iframe>.... Un cadru intern se introduce într-o pagina Web în mod asemănător cu o imagine aşa cum rezulta din următorul exemplu: <iframe src="ex_3.1.html" height=40% width=50%> În acest caz, am specificat un cadru intern care are 40% din înălţimea şi 50% din lăţimea paginii curente. Atributele acceptate de eticheta <iframe> sunt în parte preluate de la etichetele şi , cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name, noresize; sau de la eticheta vspace, hspace, align, width, height; Fisierul1
   Fisierul2
   <iframe width="60%" height="50%" border=2 bordercolor=red name="icadru" src="p1.html">
   
   21
   
   Cadre interne
   
   Ţinte pentru legaturi În mod prestabilit, la efectuarea unui clic pe o legătura noua pagină (către care indică legătura) o înlocuieşte pe cea curentă în aceeaşi fereastră (acelaşi cadru). Acest comportament se poate schimba în doua moduri: - prin plasarea în blocul ... a unui element care precizează, prin atributul target numele ferestrei (cadrului) în care se vor încărca toate paginile noi referite de legaturile din pagina curenta conform sintaxei: - prin plasarea în eticheta a atributului target, care precizează numele ferestrei (cadrului) în care se va încărca pagina nou referită de legătură, conform sintaxei: ... Valori pentru atributul target Atributul target al etichetei accepta anumite valori predefinite de o valoare deosebita pentru creatorii de pagini Web. Aceste valori sunt: • "_self" (încărcarea noii pagini are loc în cadrul curent); • "_blank" (încărcarea noii pagini are loc intr-o fereastra noua anonima); • "_parent" (încărcarea noii pagini are loc în cadrul parinte al cadrului curent daca acesta exista, altfel are loc în fereastra browserului curent); • "_top" (încărcarea noii pagini are loc în fereastra browserului ce contine cadrul curent) Formulare Un formular este un ansamblu de zone active alcătuit din butoane, casete de selecţie, câmpuri de editare etc. Formularele sunt utilizate pentru construirea unor pagini Web care permit utilizatorilor să introducă efectiv informaţii şi să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru introducerea unui şir de caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor de căutare din Web - până la o structură complexă, cu multiple secţiuni, care oferă facilităţi puternice de transmisie a datelor. O sesiune cu o pagina web ce conţine un formular cuprinde următoarele etape: - utilizatorul completează formularul şi îl expediază unui server. - o aplicaţie dedicată de pe server analizează formularul completat şi (dacă este necesar) stochează datele într-o bază de date. - dacă este necesar serverul expediază un răspuns utilizatorului. Un formular este definit intr-un bloc delimitat de etichetele corespondente
   şi
   . Atribute esenţiale ale elementului
   - atributul action precizează ce se va întâmpla cu datele formularului odată ce acestea ajung la destinaţie. De regulă, valoarea atributului action este adresa URL a unui script aflat pe un server WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediază către utilizator un raspuns. . Script-urile pot fi scrise în limbajele CGI, Perl, C, PHP, Unix shell etc. - atributul method precizează metoda utilizata de browser pentru expedierea datelor formularului. Sunt posibile următoarele valori: - get (valoarea implicita). În acest caz ,datele din formular sunt adăugate la adresa URL precizata de atributul action; nu sunt permise cantităţi mari de date (maxim 1 Kb)- intre adresa URL şi date este inserat un "?". Datele sunt adăugate conform sintaxei: nume_camp = valoare_camp. Între diferite seturi de date este introdus un "&". Exemplu: "http://www.yahoo.com/cgibin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2"; - post. În acest caz datele sunt expediate separat. Sunt permise cantităţi mari de date (ordinul MB) Pentru ca un formular sa fie funcţional, trebuie precizat ce se va întâmpla cu el după completare şi expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (e-mail). Pentru aceasta se foloseşte atributul action care primeşte ca valoare "mailto:adresa e-mail". 22
   
   Formular cu câmp de editare şi buton de expediere Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei . Pentru a preciza tipul elementului se foloseşte atributul type al etichetei . Pentru un câmp de editare, acest atribut primeşte valoarea "text". Alte atribute pentru un element sunt: - atributul name ,permite ataşarea unui nume fiecărui element al formularului. - atributul value ,care permite atribuirea unei valori iniţiale unui element al formularului. Un buton de expediere al unui formular se introduce cu ajutorul etichetei , în care atributul type este configurat la valoarea "submit". Acest element poate primi un nume prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value , dacă aceasta valoare a fost stabilită.
   Un formular cu un camp de editare şi un buton de expediere
   ---
   Numele:
   
   
   
   Formular cu casetă text şi buton de expediere
   
   Pentru elementul de tipul câmp de editare (type = "text") , alte doua atribute pot fi utile: - atributul size specifica lăţimea câmpului de editare; - atributul maxlength specifica numărul maxim de caractere pe care le poate primi un câmp de editare; Observaţii: - daca atributul type lipseşte intr-un element , atunci câmpul respectiv este considerat în mod prestabilit ca fiind de tip "text". - formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat după completarea şi apăsarea tastei ENTER. Butoane Butonul Reset Daca un element de tip are atributul type configurat la valoarea "reset", atunci în formular se introduce un buton pe care scrie "Reset". La apăsarea acestui buton, toate elementele din formular primesc valorile prestabilite (definite odată cu formularul ), chiar dacă aceste valori au fost modificate de utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name şi o valoare printr-un atribut value. Un asemenea buton afişează textul "Reset" dacă atributul value lipseşte, respectiv valoarea acestui atribut în caz contrar.

   Un formular cu un buton reset

   ---

   Introduceti numele:
   23
   
   Introduceti prenumele:
   
   
   
   Câmp de editare de tip "password" Daca se utilizează eticheta având atributul type configurat la valoarea "password", atunci în formular se introduce un element asemănător cu un câmp de editare obişnuit (introdus prin type="text"). Toate atributele unui câmp de editare rămân valabile. Singura deosebire constă în faptul că acest câmp de editare nu afişează caracterele în clar.

   Un formular cu un camp de parola

   ---

   Nume:
   Prenume:
   Password:
   
   
   
   Butoane radio Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se introduc ca familii de butoane prin eticheta cu atributul type avand valoarea "radio", iar atributul name trebuie să primească aceeaşi valoare pentru fiecare buton dintro familie. 24
   
   

   Un formular cu butoane radio

   ---

   Alegeti sexul:
   masculin
   feminin
   
   
   
   Butoane radio
   
   La expedierea formularului se va transmite una dintre perechile "sex=m" sau "sex=f", în funcţie de alegerea făcută de utilizator. Casete de validare O caseta de validare (checkbox) permite selectarea sau deselectarea unei opţiuni. - Pentru inserarea unei casete de validare se utilizeaza eticheta cu atributul type configurat la valoarea "checkbox" . Observatii: - fiecare caseta poate avea un nume definit prin atributul name. - fiecare caseta, ca şi un buton radio, poate avea valoarea prestabilita "selectat" definita prin atributul checked.

   Un formular cu casete checkbox

   ---

   Alegeti meniul:
   Pizza
   Nectar
   Bere
   Cafea
   
   
   
   25
   
   Casete de validare
   
   Casete de fişiere Intr-o pereche "name = value" a unui formular se poate folosi întregul conţinut al unui fişier pe post de valoare. Pentru aceasta se inserează un element intr-un formular , cu atributul având valoarea "file" (fişier). Atributele pentru un element de tip caseta de fisiere: - atributul name permite ataşarea unui nume - atributul value primeşte ca valoare adresa URL a fişierului care va fi expediat o data cu formularul. Aceasta valoare poate fi atribuita direct atributului value, poate fi tastata intr-un câmp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete de tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular.

   Un formular cu caseta de fisiere

   ---

   Alegeti fisierul:
   
   
   
   Caseta de fişiere
   
   Liste de selectie O lista de selectie permite utilizatorului sa aleagă unul sau mai multe elemente dintr-o listă finită. Lista de selecţie este inclusă în formular cu ajutorul etichetelor corespondente <select> şi . O listă de selecţie poate avea următoarele atribute: - atributul name, care ataşează listei un nume (utilizat în perechile "name=value" expediat serverului); - atributul size, care precizează (printr-un număr întreg pozitiv , valoarea prestabilita fiind 1) câte elemente din listă sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin acţionarea barei de derulare ataşate automat listei). 26
   
   Elementele unei liste de selecţie sunt incluse în lista cu ajutorul etichetei . Doua atribute ale etichetei option se dovedesc utile: - atributul value primeste ca valoare un text care va fi expediat server-ului în perechea "name=value"; dacă acest atribut lipseşte , atunci către server va fi expediat textul ce urmează după ; - atributul selected (fără alte valori) permite selectarea prestabilita a unui element al listei .

   Un formular cu o lista de selectie

   ---

   Universitatea absolvita:
   
   <select name="universitate" size="3"> Universitatea din Cluj Universitatea de Nord Baia Mare Universitatea Technica din Timisoara Universitatea Technica din Brasov
   
   
   Câmpuri de editare multilinie Intr-un formular câmpuri de editare multilinie pot fi incluse cu ajutorul etichetei . Eticheta are următoarele atribute: - atributul cols, care specifica numărul de caractere afişate intr-o linie; - atributul rows, care specifica numărul de linii afişate simultan; - atributul name, care permite ataşarea unui nume câmpului de editare multilinie; - atributul wrap, care determină comportamentul câmpului de editare faţă de sfârşitul de linie. Acest atribut poate primi următoarele valori: a) " off "; în acest caz: întreruperea cuvintelor la marginea dreaptă a editorului se produce numai când doreşte utilizatorul; caracterul de sfârşit de linie este inclus în textul transmis serverului o data cu formularul; b) " hard "; în acest caz: se produce întreruperea cuvintelor la marginea dreapta a editorului ; caracterul de sfârşit de linie este inclus în textul transmis serverului o data cu formularul; c) " soft "; în acest caz: se produce întreruperea cuvintelor la marginea dreapta a editorului; nu se include caracterul de sfârşit de linie în textul transmis serverului o data cu formularul . <html> <head><title>formex_9</title></head> <body><h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial. A doua linie din textul initial.
   
   27
   
   Câmp de editare multilinie
   
   Intr-un formular pot fi afişate butoane fără un rol prestabilit. Când utilizatorul apasă un buton, se lansează în execuţie o funcţie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcţii (acest lucru este posibil daca se utilizează limbaje de scriptare precum JavaScript, VBScript). Pentru a insera un buton intr-un formular , se utilizează eticheta avand atributul type configurat la valoarea "button". Alte doua atribute ale elementului "button" sunt: - atributul name, care permite ataşarea unui nume butonului - atributul value, care primeşte ca valoare textul ce va fi afisat pe buton.

   Butoane

   ---

   Stiluri Stilurile pun la dispoziţia creatorilor de site-uri noi posibilităţi de personalizare a paginilor Web. Un stil reprezintă un mod de a scrie un bloc de text (adică anumite valori pentru font, mărime, culoare, aliniere, distanţe faţă de margini etc). Exista doua modalităţi de a defini un stil: - sintaxa CSS (Cascading Style Sheets) prezentată în continuare; - sintaxa Javascript. Stilurile sunt introduse în doi paşi: - definirea stilului; - precizarea domeniului de aplicare a stilului. Stilurile sunt de finite în cadrul blocului … între etichetele <style>…. În funcţie de modul de definire, putem avea: Stiluri dedicate Aceste stiluri se aplica blocurilor de text pentru care sunt definite. De exemplu: <style> h1 {text-align:center; color:red;} Toate titlurile care apar în pagina ca fiind de mărime 1 vor fi de culoare roşie şi centrate. Daca dorim ca acelaşi stil să fie utilizat de către mai multe elemente (de ex. "h1", "h2", şi "p") atunci se utilizează o lista acestor elemente, separate prin virgula: 28
   
   <style> h1, h2, p {text-align:center; color:red;} Clase de stiluri Aceste stiluri permit definirea unui stil general şi folosirea lui oriunde este necesar. Exemplu: Definim o clasă de stiluri "ac" (albastru şi centrat) în interiorul blocului <style>..., aflat la rândul lui în blocul ...: <style> .ac {text-align:center; color:blue;} Dacă dorim ca un titlu de mărimea 2 sa folosească clasa de stiluri "ac" atunci scriem:

   Acesta este un header de marime 2 albastru si centrat

   Stiluri "identificate" Toate elementele unui document admite un atribut universal numit id. Atributul id poate identifica stilul utilizat de un element. Pentru a utiliza un stil "identificat" procedaţi astfel: - în blocul <style>... introduceţi definiţia stilului conform sintaxei: <style> #verde { color: green } - în elementul în care se doreşte utilizarea locală a acestui stil, folosiţi atributul id care primeşte valoare numele stilului definit anterior.

   Acesta este un header de marime 3 verde

   <style> p {color:red; text-align:right} .ac {text-align:center; color:blue;} #verde { color: green }

   paragraf rosu aliniat dreapta
   

   Acesta este un paragraf albastru si centrat

   Acesta este un header de marime 3 verde

   
   
   Siluri
   
   Stiluri în-line Stilurile în-line sunt definite chiar în eticheta ce iniţiază blocul în care dorim să se aplice aceste stiluri. Pentru aceasta se utilizează atributul universal style (comun practic tuturor etichetelor ce 29
   
   apar intr-un document HTML).Valoarea data atributului style este tocmai descrierea stilului, cuprinsă nu intre acolade {..} ci intre ghilimele "...". De exemplu:

   Acest header de marimea 2 este de culoare rosie si este centrat.

   Daca dorim utilizarea unui anumit style pentru un fragment de text, atunci includem acest text intrun bloc cu ajutorul delimitatorilor <span>..., după care utilizam atributul style pentru eticheta <span>. Stiluri definite în fişiere externe Stilurile definite în interiorul unui bloc <style>... pot fi transferate într-un fişier extern existând astfel posibilitatea utilizării lor în mai multe fişiere HTML. Pentru a utiliza un stil definit intr-un fişier extern se procedează astfel: - se creează un fişier care sa conţină numai descrierea stilurilor şi se salvează cu extensia .css sau .html. Continutul acestui fişier coincide cu conţinutul unui bloc <style>... , fără ca aceşti delimitatori sa fie incluşi. - În fişierul HTML care utilizează stilurile definite la pasul anterior, se include în blocul ... o eticheta având trei atribute. - atributul rel cu valoarea "stylesheet" - atributul href având ca valoare adresa URL a fişierului creat la punctul 1 ; - atributul type cu valoarea "text/css". Se utilizează titlurile definite în fişierul extern ca şi cum ar fi definite în fişierul HTML curent intrun bloc <style>.... Pseudoclase. Pseudoclasele se utilizează pentru personalizarea legăturilor. Ele se definesc în blocul <style>... sau într-un fişier extern, conform sintaxei: a: link {color: black; font-size: 20pt} a: active {color: blue; font-style: italic} a: visited {color: cyan; text-decoration: none} Pentru ca numai anumite legaturi sa utilizeze un stil se pot folosi următoarele doua metode: - a: link.CLASA1 {...} combinat cu ... - a: link#ID1 {...} combinat cu ... Configurarea fontului folosind stilurile Mărimea fontului este stabilită prin atributul font-size. Valori posibile: - predefinite: xx-small, x-small, small, medium, large, x-large, xx-large - număr urmat de unitate de măsură (pt, px, în, mm, cm) Tipul fontului este stabilită prin atributul font-family: listă de fonturi separate prin virgula. Se pot utiliza cele 5 familii generice: serif, sans-serif, cursive, monospace, fantasy. Grosimea fontului - font-weight: valori posibile: - normal, bold, bolder, lighter. - numere intre 100 (cel mai subtire) şi 900 (cel mai gros) Stilul fontului - font-style: normal, italic, oblique Setarea textului Culoarea textului este stabilită prin atributul color: valori posibile: - nume culoare - construcţie în hexazecimal #rrggbb - apelul funcţiei rgb(r,g,b) sau rgb(%r,%g,%b) Culoarea fondului textului este stabilită prin atributul background-color. Valori posibile aceleaşi cu ale atributului color. Imaginea de fond a textului este stabilită prin atributul background-image = url(„adresa imaginii folosite”) Alinierea textului este stabilită prin atributul text-align: left, center, right, justify. Decorarea textului este stabilită prin atributul text-decoration: none, underline, line-through, overline
   
   30
   
   Straturi Un strat este văzut ca un bloc de text sau elemente HTML care poate fi dimensionat şi poziţionat cu exactitate în pagină. Straturile pot fi transparente sau opace şi se pot suprapune. Se definesc cu ajutorul atributelor stilurilor şi se introduc în pagina prin marcaje
   sau <span>. Un strat moşteneşte toate atributele stilurilor şi acceptă şi atribute referitoare la dimensiune şi poziţionare. Dimensiunile unui strat se stabilesc prin atributele width şi height. Ca valori pot primi un număr urmat de unitate de măsură. Poziţionarea unui strat poate fi de doua tipuri: - absolută, stratul fiind poziţionat în funcţie de colţul din stânga sus al ferestrei sau a blocului din care face parte - relativă, stratul fiind poziţionat în funcţie de ultimul element introdus în pagina Tipul poziţionării este stabilit prin atributul position cu valorile posibile absolute sau relative. Poziţia stratului este stabilita cu ajutorul atributelor top şi left. Chenarul unui strat este stabilită prin atributul border-style cu valori posibile: none, solid, dotted, dashed, double, inset, outset, groove, ridge. Culoarea chenarului este stabilită prin atributul border-color. Grosimea chenarului este stabilită prin atributul border-width: număr cu unitate de măsură Exemplu de straturi poziţionate absolut, suprapuse. <style> #strat1 { width:200;height:100; position:absolute; top:100;left:100; border-style:solid; border-color:red; color:red;} #strat2 { width:100;height:200; position:absolute; top:50;left:150; border-style:double; border-color:blue; color:blue;}
   strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1
   strat 2 strat 2 strat 2 strat 2 strat 2 strat 2 strat 2 strat 2 strat 2 strat 2 strat 2 strat 2
   
   
   Straturi suprapuse
   
   31
   
   Daca straturile prezintă şi culoare de fundal atunci ele sunt opace.
   
   Efect de umbra cu ajutorul straturilor . <style>#strat1 {font-size:2cm;font-weight:900; position:absolute; top:100;left:100;color:red;} #strat2 {font-size:2cm;font-weight:900; position:absolute; top:105;left:105;color:silver;}
   TEXT
   TEXT
   
   
   Efect de umbră cu ajutorul straturilor
   
   32
   
   Modulul II. JAVASCRIPT Firma Netscape Communications, din dorinţa de a extinde funcţionalitatea popularului său program de navigare Netscape Navigator, a dezvoltat un limbaj de programare, astfel încât programele scrise în acest limbaj să poată fi incluse în cadrul paginilor Web. Iniţial Netscape şi-a denumit noul limbaj LiveScript, iar apoi, pentru a profita de renumele obţinut de limbajul de programare Java, denumirea a fost schimbată în JavaScript. În general, aplicaţiile, indiferent cât de bine sunt realizate, nu pot satisface cerinţele tuturor utilizatorilor, motiv pentru care acestora li se pune la dispoziţie un limbaj simplu de programare cu ajutorul căruia pot să creeze extensii ale aplicaţiei. De obicei, aceste miniprograme nu sunt compilate, ci interpretate linie cu linie în timpul rulării aplicaţiei. Cel mai obişnuit exemplu de astfel de microaplicaţii îl reprezintă macro-urile din Microsoft Office. Aceste microaplicaţii poartă denumirea generică de script-uri, iar colecţia de comenzi şi instrucţiuni care pot apărea în cadrul unui script poartă denumirea de limbaj de scriptare sau limbaj de tip script. JavaScript este un limbaj de scriptare a cărui sintaxă seamănă, într-o oarecare măsură, cu cea a limbajelor C, C++, Pascal, Java sau Delphi, dar care are anumite particularităţi care îl fac să se deosebească esenţial de orice alt limbaj de programare. Pentru ca programul de navigare să poată executa instrucţiuni JavaScript, el trebuie configurat în aşa fel încât să nu ignore astfel de instrucţiuni. Totodată programul de navigare trebuie să recunoască instrucţiunile JavaScript; Netscape Navigator oferă suport pentru JavaScript începând cu versiunea 2.0, în timp ce Internet Explorer oferă acest suport începând cu versiunea 3.0. Limbajul JavaScript este un limbaj bazat pe obiecte, adică un limbaj orientat obiect care conţine obiecte predefinite. De asemenea JavaScript este un limbaj proiectat astfel încât să reacţioneze în momentul apariţiei unui eveniment. Totodată JavaScript este un limbaj sigur în sensul că, în principiu, nu pot fi scrise microaplicaţii care să aibă acţiuni dăunătoare asupra calculatorului pe care este vizualizată pagina Web. De exemplu, nu va putea fi scris un script care să scaneze discul şi să şteargă anumite fişiere. Totuşi există posibilitatea păstrării anumitor parole introduse de către utilizator, ceea ce ar putea deranja pe unii dintre aceştia. Din această cauză majoritatea programelor de navigare oferă o opţiune a cărei activare nu permite executarea script-urilor. În sfârşit, JavaScript este un limbaj independent de platforma pe care rulează, adică un acelaşi script va putea fi executat sub Unix, MacIntosh sau Windows fără a fi necesară prezenţa unui emulator sau efectuarea anumitor modificări. JavaScript şi Java Java este un limbaj de programare orientat obiect, dezvoltat de firma Sun Microsystems, în timp ce JavaScript are o structură bazată pe obiecte şi a fost dezvoltat de firma Netscape Communications. Limbajul Java poate fi folosit pentru proiectarea de aplicaţii independente sau pentru proiectarea de microaplicaţii care pot fi incluse în cadrul paginilor Web şi care poartă denumirea de applet-uri şi sunt şi ele independente de platformă. Iată câteva deosebiri esenţiale între Java şi JavaScript: • aplicaţiile Java sunt compilate în fişiere binare care sunt apoi interpretate de către VJM (Virtual Java Machine - Maşină Virtuală Java), în timp ce codul JavaScript este transmis ca un text obişnuit şi este interpretat. • Java este orientat obiect în timp ce JavaScript este bazat pe obiecte.
   
   33
   
   • codul JavaScript este inclus în cadrul documentului HTML; applet-urile Java sunt referite din cadrul unui document HTML, dar codul se află într-un fişier separat. • script-urile JavaScript sunt incluse prin intermediul marcajului <script type=‘‘text/javascript”>, iar applet-urile Java prin intermediul marcajului