2.

Primii pasi

Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara deschisa " < " si se termina cu o paranteza unghiulara inchisa " > ". Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod.Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis. Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni: -sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului. O eticheta poate fi scris atat cu litere mici, cat si cu litere mari. Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce apar intre etichete sunt ignorate de catre browser. Deci un prim document HTML ar fi ceva de genul asta:
<html> <head> </head> <body> </body> </html>

Asa arata primul document HTML. Copiati-l folosind Copy/Paste intr-un fisier nou si salvati-l ca PRIM.HTM sau PRIM.HTML. Apoi porniti Netscape Navigator sau Internet Explorer, dati CTRL-O si introduceti calea spre fisier. Dati OK si ... nimic. Sa nu disperam ... vom adauga primele elemente la pagina noastra. In primul rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head> a urmatoarei linii:
<title>Aceasta este prima mea pagina de Web</title>

In plus, in sectiunea <body>...</body> putem scrie texte cat dorim. Daca nu intalnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple si le va afisa pe ecran. Sa vedem o noua versiune a paginii noastre:
<html> <head> <title>Aceasta este prima mea pagina de Web</title> </head> <body> Bine ati venit in pagina mea de Web! </body> </html>

Continutul blocului <title>...</title> va aparea in bara de titlu a ferestrei browser-ului. Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferstrei browser-ului va aparea numele fisierului. Daca introducem mai multe linii intr-o pagina browser-ul va afisa intr-un singur rand, intrucat caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie noua se face la o comanda explicita, 1

care trebuie sa apara in pagina html. Aceasta comanda este marcajul <br> ( de la " line break " - intrerupere de linie ). Folosind aceleasi operatii ca mai sus, vizualizati noua pagina! Veti vedea textul ce apare in fereastra navigatorului. In plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.
<html> <head> <title> titlul paginii</title> </head> <body> Bine ati venit in <br> pagina mea de Web! </body> </html>

Blocuri preformatate

Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>.
<html> <head> <title>bloc preformatat </title> </head> <body><pre> Prima linie A doua linie A treia linie </pre></body> </html>

Culoarea de fond

O culoare poate fi precizata in doua moduri:
• •

Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow. Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.

Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei <body>. Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor = culoare>. Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.
<html> <head> <title>culoare de fond </title> </head> <body bgcolor=gray> O pagina Web cu fondul GRI! </body>

2

</html>

Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> dupa sintaxa <body text=culoare>. In urmatorul exemplu textul are culorea rosie.
<html> <head> <title>culoare textului </title> </head> <body text=red> Un text de culoare rosie. </body> </html>

O eticheta poate avea mai multe atribute.De exemplu , o eticheta cu trei atribute arata astfel: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>. Urmatorul exemplu prezinta o pagina cu fondul de culoare albastra si textul de culoare galbena.
<html> <head> <title>atribute multiple </title> </head> <body bgcolor=blue text=yellow> Fond de culoare albastra si text de culoare galbena. </body> </html>

Textul afisat este caracterizat de urmatoarele atribute: Marime ( size), Culoare ( color ), Font (style). Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fara delimitator de sfarsit de bloc).
<basefont size = numar color = culoare style = font> unde:
• • •

numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru fontul cel mai mare); culoare - este o culoare precizata prin nume sau printr-o constructie RGB; font - poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau un font specific instalat pe calculatorului clientului, ca " Times New Roman ", " Helvetica " sau " Arial ".Se accepta ca valoare si o lista de fonturi separate prin virgula, de exemplu: " Times New Roman, serif,monospace ".

Domeniul de valabilitate al caracteristicelor precizate de aceasta eticheta se intinde de la locul in care apare eticheta pana la sfarsitul paginii sau pana la urmataorea eticheta <basefont>. Daca acest atribut lipseste atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul utilizat. Atributele prestabilite sunt: size = 3, color = black, si style = " Times New Roman " .

3

Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body>:
• •

leftmargin ( stabileste distanta dintre marginea stanga a ferstrei browserului si marginea stanga a continutului paginii ); topmargin ( stabileste distanta dintre marginea de sus a ferstrei browserului si marginea de sus a continutului paginii );

<html> <head> <title>Configurarea textului si stabilirea marginii </title> </head> <body leftmargin="100" topmargin="50"> Textul are atribute implicite. <br><basefont style="Arial" color="blue" size="6"> Textul este scris cu fontul "Arial", culoare albastru si marime 6. </body> </html>

Stiluri pentru blocurile de text

Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intre delimitatorii <b>...</b> ( b vine de la "bold" = indraznet ). Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>. Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>. Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> ( i vine de la " italic "). Pentru a insera secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>. Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> (u vine de la " underline "). Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <strike>...</strike> sau <s>...</s>. In exemplul urmator vom utiliza toate etichetele mentionate anterior.
<html> <head> <title>Stiluri pentru blocuri de text </title> </head> <body> <b>Text scris cu caractere ingrosate.</b> <br> <big>Text cu caractere marite cu o unitate <big>mai mare<big> si mai mare<big> si mai mare.</big></big></big></big><br> <small>Textul este scris cu caractere micsorate cu o unitate <small>mai mic.</small></small><br> <i>Text scris cu caractere italice.</i> <br> In aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscirpt.<br> <strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike> <br> In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> sectoinat. </body> </html>

4

Stiluri fizice si logice

Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite si stiluri fizice intrucat nu s-a acordat nici o atentie semnificatiei informatiei continute de aceste blocuri. In continuare sunt prezentate stilurile utilizate la formatarea unui bloc. Aceste stiluri tin cont de semnificatia pe care o are blocul in cadrul paginii Web. Pentru a pune in evidenta ( prin silul cursiv ) fragmente de text se utilizeaza etichetele:
• •

<cite>...</cite> ( " cite " inseamna citat); <em>...</em> (em vine de la " emphasize " = a evidentia).

In locul lor se poate utiliza eticheta echivalenta <i>...</i>. Urmatoarele etichete au efecte similare.Ele permit scrierea fragmentului de text cu caractere monospatiate ( de tipul celor folosite de o masina de scris ):
• • •

<code>...</code> ( " code " inseamna cod sau sursa); <kbd>...</kbd> ( kbd vine de la " keyboard " = tastatura); <tt>...</tt> ( tt vine de la " teletype " = teleprinter).

Eticheta de tip bloc <blink>...</blink> delimiteaza fragmenete de text clipitoare. Aceasta eticheta functioneaza numai in browserul Netscape Communicator.
<html> <head> <title>Blocuri de caractere monospatiate si clipitoare </title> </head> <body> Aceasta linie este formata din text normal.<br> Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code><br> Tastati urmatoarea comanda comanda DOS: <kbd> copy c:\windows\* c:\temp<kbd><br> <tt>Asa scrie un teleprinter</tt><br> Acest cuvant clipeste <blink>Blink</blink> </body> </html>

Exemplul urmator ilustreaza ca etichetele pot fi imbricate.
• •

un fragment de text poate fi scris cu aldine si cursive in acelsi timp; pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, marit si cursiv.

Blocul <q>...</q> permite inserarea in-line a citatelor.Aceste citate sunt afisate de catre browser cu caractere cursive. " q " vine de la " in-line quotation " (citate inserate in-line); Si blocurile " q " pot fi imbricate. <html> <head> <title>Imbricarea etichetelor </title> </head> 5

avand stabilit atributul color la valoarea necesara. cursive. Green. In acest caz browserul va utiliza primul font pe care il cunoaste. Toate aceste atribute apartin etichetei. Culori O culoare poate fi precizata in doua moduri: 1. g si b sunt cifre hexazecimale. care permite inserarea de blocuri de texte personalizate.<br> <i>Subliniat. <br> <font color="red">Aceasta linie este rosie.</i> </big></b></u> </body> </html> 3.Blue). ingrosat . grosime (definita prin atributul weight). Fonturi Un font este caracterizat de urmatoarele atribute: • • • • • culoare (stabilita prin atributul color).. unde r. sans serif.. 2.<body> Aceasta linie este formata din text normal. marimea (definita prin atributul size). O astfel de constanta se formeaza astfel: #rrggbb. Tipul de font necesar poate fi stabilit prin atributul face al etichetei.</font> <br>Aici<font color="green">fiecare</font> 6 .marit si italic. Culorea fontului Pentru a scrie un fragment de text cu caractere de o anumita culoare se incadreaza acest fragment intre delimitatorii . <br> Normal <u>subliniat <b> subliniat si ingrosat <big>subliniat. De exemplu: fragment de text de culoare rosie Familia fontului Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de caractere). ingrosat si marit. tipul sau stilul (stabilit prin atributul face). <<html> <head> <title> Culoarea si familia fontului</title> </head> <body> Aceste linie este scrisa cu caractere normale. printr-o constanta conform standardului de culoare RGB (Red. printr-un nume de culoare.<br> Normal <b>ingrosat <i> ingrosat si italic </i> ingrosat </b>. marimea in puncte tipografice (stabilita prin atributul point-size). monospace si fantasy. Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor: serif. Pot fi introduse mai multe fonturi separate prin virgula.

</font> <font size="+2">Fonturi de marime 6. 5. etc. <html> <head> <title> Marimea fontului</title> </head> <body> Aceste linie este scrisa cu caractere normale. <font size="5">Fonturi de marime 5.</font> </body> </html> Marimea fontului Penrtu a stabili marimea unui font se utilizeaza atributul size al etichetei. +1. +2. pentru a micsora dimensiunea fontului cu 1. 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare).</font> <font point-size="30">Fonturi de marime 30 pt (numai cu Netcape Communicator). 2. fata de valoarea curenta. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. fata de valoarea curenta. 700. 3.<font color="blue">cuvant</font> <font color="yellow">are</font> <font color="cyan">alta</font> <font color="#3478fa">culoare. 2. 2. 500. etc. 400. Valorile acestui atribut pot fi: • • • 1. 6. 600. Marimea unui font poate fi stabilita exact cu ajutorul atributului point-size. -1. etc. 800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros). Acest atribut functioneaza numai cu Netscape Communicator.</font> <basefont size="4">Fonturi de marime 4.Numarul astfel precizat reprezinta marimea fontului in puncte tipografice. code><html> 7 .</font> <font point-size="50">Fonturi de marime 50 pt (numai cu Netcape Communicator). -2.</font> </body> </html> Grosimea unui font Grosimea unui caracter poate fi definita cu ajutorul atributului weight al etichetei. etc. pentru a mari dimensiunea fontului cu 1.</font> <font size="-3">Fonturi de marime 1. Valorile posibile pentru acest atribut sunt 100. 200. 4.</font> <br> <font face="arial">Linie scrisa cu caractere arial.</font> <font face="monospace">Linie scrisa cu caractere monospatiate. 300.

</blockquote>. Inserarea unei adrese Daca intr-o pagina web trebuie inclusa o adresa . acesta trebuie inclus intre etichetele <blockquote>.</font> </body> </html> 4. Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. Blocuri de text Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul.</font> <font weight="900">Fonturi de grosime 900. Nr:62/A <br> Baia Mare Romania </address> </body> </html> Indentarea unui bloc Pentru ca un bloc de text sa fie indentat ( marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de marginea paginii )..atunci putem utiliza facilitatile oferite de o eticheta dedicata: <address>. <html> <head> <title> Adresa</title> </head> <body> Adresa institutiei noastre este :<address> Colegiul Universitar<br> Str: Victor Babes .<head> <title> Grosimea fontului</title> </head> <body> Aceste linie este scrisa cu caractere normale.</address>. <font weight="100">Fonturi de grosime 100. Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui spatiu suplimentar. <html> <head> <title> Indentarea unui bloc</title> </head> <body> Textul ce urmeaza este indentat:<blockquote> Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul.. ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web.. </blockquote> </body> </html> 8 . ci la functiile pe care le poate avea un bloc de text in cadrul paginii Web..</font> <font weight="500">Fonturi de grosime 500.

Textul afisat in pagina este monospatiat.. caracterele "<" si ">" au o semnificatie speciala pentru browser. " eticheta " si "CR/LF ". avand valorile posibile " left ".</pre>.. alinierea textului cu ajutorul atributului align. Ele incadreaza comenzile si atributele de afisare a elementelor intr-o pagina.</listing> ( 120 de caractere pe rand ). Aceste marcaje interpreteaza corect caracterele " spatiu ". Caracterul " spatiu " poate fi luat in considerare de browser daca este inserat explicit prin &nbsp.... daca se foloseste delimitatorul </p> (acesta fiind optional). </body> </html> </xmp> </body> </html> Blocuri paragraf Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua si permite: • • • inserarea unui spatiu suplimentar inainte de blocul paragraf. " center " sau " 9 . inserarea unui spatiu suplimentar dupa blocul paragraf. acest fragment trebuie incadrat de una dintre perechile de etichete: • • <xmp>.</pre> este indicat pentru a insera randuri vide ( spatiu intre randurile succesive ). Daca dorim ca un fragment de text sa contina astfel de caractere. semnificatia marcajelor HTML se pastreaza. <html> <head> <title> Bloc preformatat</title> </head> <body> Orar:<pre> Ora/Ziua Luni Marti Miercuri 8:00 Romana Matematica Sport 9:00 Geografie Istorie Fizica </pre> </body> </html> Intr-un fisier HTML.</xmp> ( 80 de caractere pe rand )..Blocul preformatat Intr-un bloc <pre>. <listing>. Blocul <pre>.... <html> <head> <title> xmp si listing</title> </head> <body> Un fisier html standard arata astfel: <xmp> <html> <head> <title> </title> </head> <body> O pagina Web ...

<h5>.Paragraf aliniat in centru. width permite alegerea lungimii liniei.Paragraf aliniat in centru.right ". color permite definirea culorii liniei. noshade cand este prezent defineste o linie fara umbra.Paragraf aliniat la dreapta. Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta de incheiere similara. <p align="right"> Paragraf aliniat la dreapta. <html> <head> <title> Linii orizontale</title> </head> <body> 10 . <html> <head> <title> Blocuri de titlu</title> </head> <body> <h1 align="center"> Titlu de marime 1 aliniat in centru </h1> <h2 align="right"> Titlu de marime 2 aliniat la dreapta. Pentru a configura o linie orizontala se utilizeaza urmatorele atribute ale etichetei <hr>: • • • • • align permite alinierea liniei orizontala.Paragraf aliniat la dreapta. <h3>. <h6>. Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga (in mod prestabilit ) . pe cand <h6> foloseste caracterele cele mai mici.Paragraf aliniat la dreapta." center " si " right ". </body> </html> Blocuri de titlu Intr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor <h1>.Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf aliniat la dreapta. </h2> <h4> Titlu de marime 4 aliniat la stanga (implicit) </h4> </body> </html> Linii orizontale Intr-o pagina Web pot fi inserate linii orizontale. Valorile posibile sunt " left " .Paragraf aliniat in centru. <h2>. size permite alegerea grosimii liniei. Paragraf aliniat la dreapta. <html> <head> <title> Blocuri paragraf</title> </head> <body> Prima linie <p> Lini generata de un paragraf (implicit paragraful este aliniat la stanga). Paragraf aliniat in centru. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari si aldine.Paragraf aliniat la dreapta. <p align="center"> Paragraf aliniat in centru. in centru si la dreapta.acest lucru se face cu ajutorul etichetei <hr>. <h4>.

O singura linie.. fara umbra. alinierea precizata de atributul align 11 .O singura linie.O singura linie.<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea stanga. " right " ( aliniere la dreapta ). de culoare rosie. de latime 150 de pixeli.</nobr> va fi afisat pe o singura linie. grosime 5 pixeli . In acest caz . Valorile posibile ale acestui parametru sunt: • • • " left " ( aliniere la stanga ). <hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la dreapta . de latime 50%. O singura linie. Un bloc <div>.O singura linie.</center> aliniaza centrat toate elementele pe care le contine.O singura linie. <html> <head> <title> Linii orizontale</title> </head> <body> <center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr width=70%> <hr width=40%> <hr width=10%> </center> </body> </html> Blocuri <nobr> Blocul de text cuprins intre etichetele <nobr>.O singura linie.. <hr> Urmeaza o linie aliniata in centru . " center " ( aliniere centrala ). grosime 2 cu umbra. latime 100%.. <html> <head> <title> Blocul <nobr></title> </head> <body> <nobr> O singura linie..O singura linie.. grosime 12 pixeli .O singura linie. O singura linie.O singura linie.O singura linie.. <hr align="right" width=150 size=12 color="red"> </body> </html> Blocuri <center> Blocul introdus de etichetele <center>.</div>...O singura linie.O singura linie. </nobr> </body> </html> Blocuri <div> Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor <div>.</div> poate include alte subblocuri. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc <div> ( diviziune ) este align ( aliniere ).

gif. Pentru a putea fi identifica imaginea care va fi inserata.O singura linie.O singura linie. Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine. Cele mai raspandite formate sunt GIF(8biti pentru o culoare. BMP (BitMap) cu extensia .<br> Bloc aliniat pe centru.O singura linie.O singura linie. se utilizeaza eticheta (de la "image"=imagine).Bloc aliniat pe centru. 16777216 de culori posibile). Formatele acceptat de browsere pentru fisierele imagine sunt: • • • • • • GIF (Graphics Interchange Format) cu extensia .tiff.O singura linie. Imagini Imaginile sunt stocate in fisiere cu diverse formate.jpeg sau .tif sau . inclusiv extensia.O singura linie.. Adresa URL a unei imagini URL ( "Uniform Resourse Locator" = identificator unic al resursei ) este un standard folosit in identificarea unica a unei resurse in Internet.Bloc aliniat pe centru.O singura linie. XBM (X BitMap) cu extensia . XPM (X PixMap) cu extensia . 256 culori posibile) si JPEG (24biti pentru o culoare.. JPEG (Joint Photographic Experts Group) cu extensia .Bloc aliniat pe centru. <div align="right"> O singura linie. se utilizeaza un atribut al etichetei si anume src (de la "source"=sursa).bmp (numai cu Internet Explorer). Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine.<br> </div> <div align="center"> Bloc aliniat pe centru.Urmatorul bloc este aliniat la dreapta.<br> O singura linie.<br> </div> </body> </html> 5.<br> O singura linie.jpg.xmp. atunci adresa URL a imaginii este formata numai din numele imaginii. <html> <head> <title> Blocul <div></title> </head> <body> Aceasta linie este o linie normala.<br> Bloc aliniat pe centru.O singura linie. Pentru a insera o imagine intr-o pagina. Un bloc <div>. TIFF (Tagged Image File Format) cu extensia .xbm.</div> admite atributul " nowrap " care interzice intreruperea randurilor de catre browser.O singura linie.al blocului are efect asupra tuturor subblocurilor incluse in blocul <div>. 12 .

Daca nu se cere altfel .aliniere deasupra. Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si height. Alinierea unei imagini Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori: • • • • • " left " . partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea.O pagina care contine o imagine Text dupa imagine. partea de jos a imaginii se aliniaza cu linia de baza a textului.aliniere la stanga. . mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea. " bottom " . Chenarul si dimensionarea unei imagini Daca doriti sa adaugati un chenar in jurul imaginii.aliniere la dreapta. folositi atributul border al etichetei Valorile acestor atribute sunt numere intregi pozitive. celelalte componente sunt dispuse pe in partea dreapta.aliniere la baza. " middle " . Alinieri: 13 . celelalte componente sunt dispuse pe in partea stanga. " top " . " right " . aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web. O imagine cu chenar si de 200 pixeli X 15 % Text dupa imagine. stabilite in momentul crearii ei.aliniere la mijloc. O imagine are anumite dimensiuni pe orizontala si verticala.

Text inainte de imagine. Alinierea textului in jurul imaginii Atributele hspace si vspace precizeaza distanta in pixeli pe orizontala . Atributul alt admite ca valoare un text care va fi afisat in locul imaginii. avand ca valoare adresa URL a imaginii. dintre imagine si restul elementelor din pagina. Text inainte de imagine. Text inainte de imagine.Text dupa imagine.Text dupa imagine.Text inainte de imagine. Text dupa imagine.Text dupa imagine. respectiv pe verticala. Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text inainte de imagine.Text dupa imagine.Text inainte de imagine. 1 2 3 4 5 6 7 8 9 14 .Pe verticala: La mijloc: Jos: Text dupa imagine.Text inainte de imagine. In acest scop se foloseste atributul background al etichetei .Text dupa imagine. Imagini pentru fondul unei pagini O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.Text inainte de imagine. Text dupa imagine.

Printre aceste utilizari speciale putem enumera: 1. care ia valoare numele fisierului HTML aflat in acelasi director. care premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-o pagina Web..jpg" drept legatura catre pagina index.html utilizam sintaxa: In mod prestabilit imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei legaturi.</a>. 2. Legaturi Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web. Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit href. 6. Simboluri speciale pentru elementele unei liste neordonate . Ele transforma un text obisnuit in hipertext sau hiperlegatura. Daca stabilim pentru atributul border al etichetei 0 acest chenar dispare. Zona activa care devina sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele <a>.. 15 . Linii orizontale formate cu ajutorul imaginilor . adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului. Pentru a utiliza imaginea "ubm1. Efectuand click cu butonul mouse-ului pe aceasta zona in browser se va incarca o alta pagina. Utilizari speciale ale imaginilor Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web. Imagini folosite ca legaturi Text inainte de imagine.Imagini folosite ca legaturi O legatura (link) introduce in pagina Web o zona activa. Text dupa imagine. O legatura catre o pagina aflata in acelasi director O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de la "anchor"=ancora).

com care incarca pagina de start din site-ul firmei Netscape Corporation.Prezenta etichtetei de sfarsit </a> este obligatorie.com"> Netscape Corporation </a> 16 .netscape../exemple/list/listex_11.html"> Link catre pagina 1 </a> </body> </html> O legatura catre o pagina aflata pe acelasi disc local Daca pagina referita se afla pe acelasi disc local. dar intr-un alt director atunci pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relativa.html"> Link catre pagina 2 </a> </body> </html> <html> <head> <title> Comutarea intre doua pagini</title> </head> <body> <h3>Pagina 2 </h3> <a href="leg_ex1. <html> <head> <title> Comutarea intre doua pagini</title> </head> <body> <h3>Pagina 1 </h3> <a href="leg_ex2.netscape./. <html> <head> <title> Comutarea intre doua pagini aflate pe acelasi disc local</title> </head> <body> <h3>Pagina 3 </h3> <a href=".. <html> <head> <title> Link catre site-ul firmei Netscape</title> </head> <body> <h3>Link catre site-ul firmei Netscape </h3> <a href="http://www.html"> Link catre o pagina cu liste </a> </body> </html> O legatura catre un site particular In exemplul urmator se utilizeaza adresa URL www.

html#anc"> Link catre o ancora din alt document </a> <br> 1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br>10<br>11<br>12<br> 13<br>14<br>15<br>16<br> 17<br>18<br>19<br>20<br> 21<br>22<br>23<br>24<br> <a name="ancora1">ancora 1 </body> </html> Ancore definite prin atributul id Atributul id este un atribut universal ./. Acest atribut va inlocui complet atributul name. Pentru a introduce o legatura catre o ancora definita in alt document (alta pagina) aflat in acelasi director. <html> <head> <title> Ancore definite in acelasi document si in alt doocument</title> </head> <body> <h3>Ancore definite in acelasi document si in alt document </h3> <a href="#ancora1"> Link catre ancora 1 </h3> <a href=".. Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>: 17 .. Atributul id poate fi utilizat pe post de ancora intr-o pagina Web conform sintaxei: <eticheta id = "id1"> . Exemplul anterior arata astfel cu eticheta id.adica poate fi atasat oricarui element al unei pagini Web./legaturi. O ancora se defineste de asemenea prin eticheta <a>. Atributul id primeste ca valoare un nume (de exemplu "id1") care identifica in mod unic un element..</body> </html> Ancore Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi. Pentru a defini ancora se utilizeaza atributul name care primeste ca valoare un nume atribuit ancorei (de exemplu "leg1"). atributul href primeste o valoare de forma "nume_fisier. Pentru a insera o legatura catre "leg1" definita in aceeasi pagina se utilizeaza eticheta <a> avand atributul href de valoare "#leg1".. </eticheta> <a href = "#id1" >Link catre elementul "id1" </a> unde "eticheta" poate fi orice element .html#nume_ancora". care putea fi atasat numai anumitor elemente. Alegerea culorilor pentru legaturi In mod prestabilit se utilizeaza 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 putin un clic pe ele) o culoare pentru legaturile active (deasupra carora se afla mouse-ul la un moment dat).

verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3> <a href=leg_ex1. alink pentru legaturile active. Atunci cand se efectueaza clic pe legatura din exemplul urmator browserul se deschide o caseta de 18 .com"> Mesaje catre autorul paginii </body> </html> Legaturi catre fisiere oarecare O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice servere din Internet. Windows . vlink pentru legaturile vizitate. Pentru aceasta se utilizeaza in constructia adresei URL serviciul Internet mailto: urmat de o adresa email valida. Pentru aceasta se utilizeaza eticheta <a> avand valoarea atributului href egala cu adresa URL a fisierului destinatie. Pentru ca exemplul urmator sa functioneze trebuie ca: • • pe calculator sa fie instalat o aplicatie de expediere a mesajelor electrionice (Outlook Express pe calc.html> Link catre pagina 11 </a> </body> </html> Utilizarea postei electronice Intr-o pagina Web se poate afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesajelor electronice.o o o link pentru legaturile nevizitate. adresa sa fie valida si calculatorul sa fie conectat la Internet. <html> <head> <title> Culori pentru lagaturi</title> </head> <body link="blue" vlink="green" alink="red"> <h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active. Unix). Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RGB. <html> <head> <title> Expediere de mesaje electronice</title> </head> <body> <h3>Expediere de mesaje electronice</h3><br> <a href="mailto:a_bsz@yahoo. Pine pe calc.html> Link catre pagina 2 <br> <a href=leg_ex11.html> Link catre pagina 1 <br> <a href=leg_ex2.

unde atributul href va avea valoarea egala cu adresa URL a fisierului de sunet. fereastra in care este afisata valoarea data acestui atribut.zip"> Link catre fisierul fisier. .care va permite: • • sa salvati pe discul local fisierul sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de tipul respectiv <html> <head> <title> Legaturi catre fisiere oarecare</title> </head> <body> <h3>Legaturi catre fisiere oarecare</h3><br> <a href="fisier.aiff. sau . Acest atribut are astfel menirea de a furniza informatii suplimentare despre semnificatia unei legaturi.File download . <html> <head> <title> Atributul title</title> </head> <body> <h3>Atributul title</h3><br> <a href="mailto:a_bsz@yahoo. De exemplu: <a href="numefisier.wav.Formatele si extensiile corespunazatoare pentru 19 . WAVE/WAV cu extensia .mp2. MPEG Audio cu extensia .aif. O legatura catre un fisier de sunet se realizeaza folosind eticheta <a> destinata legaturilor catre orice tip de fisiere.au">Link catre fisierul de sunet</a> Legaturi catre fisiere videoclipuri Videoclipurile sunt stocate in fisiere diverse formate. AIFF/AIFC cu extensiile .mpeg2.zip </body> </html> Atributul title Atributul title apartine etichetei <a> si comanda aparitia unei mici ferestre in pagina Web cand mouse-ul se afla pe o legatura.com" title="adresa mea de e-mail"> Mesaje catre autorul paginii </body> </html> Legaturi catre fisiere de sunet Sunetele pot fi stocate in fisiere in diverse formate: • • • • • AU/m-law cu extensia .dialog .au.midi. MIDI cu extensia .mid sau .

unde atributul href va avea valoarea egala cu adresa URL a fisierului videoclip. care este inclusa intr-o pereche de marcaje de lista de definitii: <dl>.. Fiecare element al listei este initiat de eticheta <li> (list item). In HTML. in care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document <dt><b>date</b> <dd>. Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand noua.mov. Liste Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii.</dl> (de la "definition list" = lista de definitii). AVI cu extensia .avi. -Definitia unui termen incepe pe o linie noua si este indentata. De exemplu: <a href="numefisier.mpeg sau mpg. O legatura catre un fisier de sunet se realizeaza folosind eticheta <a> destinata legaturilor catre orice tip de fisiere.</ul> (" ul " vine de la " unordered list " = lista neordonata)... QuickTime cu extensia . Observatii: -Un termen al listei este initiat de eticheta <dt> (de la "definition term" = termen definit).fisierele utilizabile in paginile Web sunt urmatoarele: • • • MPEG cu extensia . <html> <head><title>listex_1</title></head> <body><h1 align=center>O lista de definitii</h1><hr> <dl> Glosar de termeni de World Wide Web <dt><b>hypertext</b> <dd>. <html> <head><title>listex_2</title></head> <body><h1 align=center>O lista neordonata</h1><hr> Glosar de termeni de World Wide Web <ul>Culori uzuale disponibile prin nume <li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ul> 20 . cuvintele sunt listate in ordine alfabetica.sub-setul de date care are efectiv semnificatie si care este util la momentul curent </dl> </body> </html> Liste neordonate O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>..avi">Link catre fisierul videoclip</a> 7. -Definitia unui termen este initiata de eticheta <dd> (de la "definition description" = descrierea definitiei). intreaga sectiune a unui glosar va fi gestoinata printr-o lista de definitii. urmate de definitii ale termenilor respectivi.o interconectare Web de informatii de tip text. Glosarele sunt exemple clasice in acest sens.fluxul nesfarsit de materiale care apar pe Internet. referinte sau indexuri. spre deosebire de informatii care sunt date cu un anumit inteles sau valoare <dt><b>informatie</b> <dd>.

( cifre arabe . III .optiune prestabilita ). B . " a " pentru ordonare de tipul a . 4 etc.valorile posibile al acestui atribut sunt: o •  "circle" (cerc) "disc" (disc plin) (valoarea prestabilita). c . 2 . iii . Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand noua. d etc. 3 . "square" (patrat) Listele neordonate pot fi imbricate pe mai multe niveluri <html> <head><title>listex_3</title></head> <body><h1 align=center>O lista neordonata de liste neordonate</h1><hr> Glosar de termeni de World Wide Web <ul>Elemente si atribute a unei pagini HTML <li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul> <li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul> </ul> </body> </html> Liste ordonate O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>. C . ( litere mici ).</ol> (" ol " vine de la " ordered list " = lista ordonata).</body> </html> Tag-urile <ul> si <li> pot avea un atribut type care satileste caracterul asfisat in fata fiecarui element al listei. <html> <head><title>listex_4</title></head> <body><h1 align=center>O lista ordonata</h1><hr> <ol>Culori uzuale disponibile prin nume <li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ol> </body> </html> Tag-urile <ol> si <li> pot avea un atribut type care stabileste tipul de caractere utilizate pentru ordonarea listei. " I " pentru ordonare de tipul I . 21 . " i " pentru ordonare de tipul i .Valorile posibile sunt: • • • • • " A " pentru ordonare de tipul A . ( litere mari ). D etc.. iv etc. b . IV etc. II . ( cifre romane mici ).. Fiecare element al listei este initiat de eticheta <li> (list item). ( cifre romane mari ). " 1 " pentru ordonare de tipul 1 . ii .

incepand de la valoarea C. <li value="6">incarcati fisierul in browser.Urmatorul exemplu este o lista ordonata cu cifre romane <html> <head><title>listex_5</title></head> <body><h1 align=center>O lista ordonata cu cifre romane</h1><hr> <ol type="I">Culori uzuale disponibile prin nume <li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ol> </body> </html> Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a secventei de ordonare.Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv (vezi urmatorul exemplu). <html> <head><title>listex_7</title></head> <body><h1 align=center>O lista ordonata avand itemi setati individual</h1><hr> <ol start="3">Repetati urmatorii pasi ai algoritmului <li>salvati fisierul. <html> <head><title>listex_6</title></head> <body><h1 align=center>O lista ordonata cu litere mari. <html> <head><title>listex_8</title></head> <body><h1 align=center>O lista ordonata de liste ordonate si neordonate</h1><hr> <ol>Un sistem informatic include: <li>Hardware: <ol> <li>placa de baza <li>procesor <li>memorie 22 . <li>schimbati browserul utilizat <li>incarcati din nou fisierul </ol> </body> </html> Listele ordonate pot fi imbricate intre ele sau cu liste neordonate .ca in exemplul urmator. incepand de la valoarea C</h1><hr> <ol type="A" start="3">Culori uzuale disponibile prin nume <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ol> </body> </html> Tag-ul <li> poate avea un atribut value care satileste valoare pentru elementul respectiv al listei. Urmatorul exemplu este o lista ordonata cu litere mari.

(Nu se recomanda utilizarea acestori tipuri de liste). </ol> </body> </html> In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.</dir> (de la " director "). O lista de directoare este un bloc delimitat de etichete corespondente <dir>. Fiecare element al listei este initiat de eticheta <li> ( list item ). in loc de elementele acesteia introduse prin <li>. aceasta va fi indentat ( intocmai ca elementele unei liste). Utilizari speciale ale listelor Daca intr-o lista. Un bloc de text indentat... Un bloc de text indentat.</menu>. <html> <head><title>listex_9</title></head> <body><h1>Un bloc de text indentat</h1><hr> <ol> Un bloc de text indentat. <html> <head><title>listex_10</title></head> <body><h1 align=center>O lista de definitii speciala</h1><hr> <dl>Program <dt><b>Luni</b> 23 .<li>harddisk </ol> <li>Software: <ul> <li>Linux <li>Windows <li>OS/2 <li>Unix </ul> <li>Software de aplicatie: <ul type="disc"> <li>VisualC++ <li>Java <li>SQL <li>CorelDraw </ul> </ol> </body> </html> O lista de meniuri este un bloc delimitat de etichete corespondente <menu>. Un bloc de text indentat. Un bloc de text indentat. Cele mai multe browsere afiseaza lista de directoare ca pe o lista neordonata.. Cele mai multe browsere afiseaza lista de meniuri ca pe o lista neordonata. Un bloc de text indentat. Un bloc de text indentat. Fiecare element al listei este initiat de eticheta <li> ( list item ).. Un bloc de text indentat. se insereaza un bloc de text. Un bloc de text indentat.

30. <html> <head><title>tabelex_1</title></head> <body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr> <table> <tr> <td>cell 11 <td>cell 11 <tr> <td>cell 21 <td>cell 22 <tr> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td>cell 42 </table> </body> </html> In mod prestabilit.gif">Bora<br> <img src="images/reddot.gif">Passat<br> <img src="images/reddot. Acest atribut poate primi ca valoare orice numar intreg ( inclusiv 0 ) si reprezinta grosimea in pixeli a chenarului tabelului. un tabel nu are chenar.. pentru a adauga un chenar unui tabel. o valoare egala cu 0 a grosimii semnifica absenta chenarului.</i>Insciere <dd><i>Ora 11.. Pentru a insera un tabel se folosesc etichetele corespondente <table>..Folosirea etichetei de sfarsit </tr> este optionala. Un rand este format din mai multe celule ce contin date. Daca atributul border nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egala cu 1 pixel.00. <html> <head><title>listex_11</title></head> <body><h1>O lista personalizata</h1><hr> <ul>Tipuri de masini Volkswagen sunt:<br> <img src="images/reddot. Un tabel este format din randuri.gif">Golf<br> <img src="images/reddot. culoarea textului. se utilizeaza un atribut al etichetei <tabel> numit border.</table>.gif">Transporter<br> </body> </html> 8.</i>Audieri <dd><i>Ora 13.<dt><b>Marti</b> <dt><b>Miercuri</b> <dd><i>Ora 9. O celula de date se introduce cu eticheta <td>. fiecare domeniu avand propriile optiuni pentru culoarea fondului.gif">Jetta<br> <img src="images/reddot.00.</tr> ( de la " table row "= rand de tabel ).</td>. 24 . Tabele Tabelele ne permit sa cream o retea dreptunghiulara de domenii. Pentru a insera un rand intr-un tabel se folosesc etichetele <tr>.gif">Corrado<br> <img src="images/reddot... alinierea textului etc.</i>Raspunsuri </dl> </body> </html> Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de elemente imagini si texte.

Text inainte de tabel.Text dupa tabel. Text dupa tabel. <table border align="right"> <tr> <td>cell 11 <td>cell 11 <tr> <td>cell 21 <td>cell 22 </table> Text dupa tabel. Text inainte de tabel. atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. atunci textul care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata latimea paginii. Text inainte de tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text inainte de tabel. <html> <head><title>tabelex_2</title></head> <body><h1 align=center>Un tabel simplu cu chenar</h1><hr> <table border="4"> <tr> <td>cell 11 <td>cell 11 <tr> <td>cell 21 <td>cell 22 <tr> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td>cell 42 </table> </body> </html> Alinierea tabelului Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul align al etichetei <table>.Text dupa tabel. daca tabelul este aliniat pe centru ( <table align="center"> ). " center " si "right ". imediat sub tabel. </body> </html> Daca schimbam alinierea tabelului la centru atunci exemplul anterior va arata asa sau la stanga atunci va arata asa. Text inainte de tabel. Text inainte de tabel.Text dupa tabel. Text inainte de tabel. Text inainte de tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. cu urmatoarele valori posibile: " left " ( valoarea prestabilita ). Text inainte de tabel. Text inainte de tabel. Text dupa tabel.Text dupa tabel. Text inainte de tabel. Text inainte de tabel.Text dupa tabel. Text inainte de tabel.Text dupa tabel. Text inainte de tabel. Text inainte de tabel. Text dupa tabel. Astfel : • • • daca tabelul este aliniat stanga ( <table align="left"> ). Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.Text dupa tabel. Text inainte de tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. daca tabelul este aliniat dreapta ( <table align="right"> ). 25 .Text dupa tabel. Text inainte de tabel. atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea stanga a tabelului.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel. <html> <head><title>tabelex_3</title></head> <body><h1 align=center>Un tabel aliniat la dreapta</h1><hr> Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.Text dupa tabel. Text inainte de tabel.Text dupa tabel. Text dupa tabel.Cand atributul border are o valoare nenula chenarul unui tabel are un aspect tridimensional.Text dupa tabel. Text inainte de tabel. Alinierea este importanta pentru textul ce inconjoara tabelul.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.

Exemplul cu aceste atribute gasiti aici. care poate fi atasat intregului tabel prin eticheta <table>. <table> ( cu prioritate cea mai mica ).Valorile acestui atribut pot fi numere intregi pozitive. si reprezinta distanta in pixeli dintre celule si continutul ei. unei linii prin eticheta <tr> sau celule de date prin eticheta <td>.. Valoarea atributului hspace poate fi orice numar pozitiv. <html> <head><title>tabelex_5</title></head> <body><h1 align=center>Un tabel fara chenar de celule alipite</h1><hr> <table cellspacing="0"> <tr> <td bgcolor="gray">gri 11 <td bgcolor="red">rosu 12 <tr bgcolor="blue"> <td>albastru 21 <td bgcolor="yellow">galben 22 </table> </body> </html> Distanta dintre marginea unei celule si continutul ei poate fi definita cu ajutorul atributului cellpadding al etichetei <table>. Valorea prestabilita a atributului cellpadding este 1. Dimensionarea celulei unui tabel Distanta dintre doua celule vecine se defineste cu ajutorul atributului cellspacing al etichetei <table>..Distanta dintre tabel si celelalte elemente din pagina Web poate fi stabilita cu ajutorul atributelor hspace si vspace al etichetei <table>. Aceste atribute functioneaza numai cu Netscape Communicator. Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. <tr>. inclusiv 0.</font>.Valorile acestui atribut pot fi numere intregi pozitive. Definirea culorilor de fond pentru un tabel Culoarea de fond se stabileste cu ajutorul atributului bgcolor. <html> 26 . si reprezinta distanta pe orizontala dintre tabel si celelalte elemente ale paginii Web. si reprezinta distanta in pixeli dintre doua celule vecine. si reprezinta distanta pe verticala dintre tabel si celelalte elemente ale paginii Web. Valoarea atributului vspace poate fi orice numar pozitiv. <html> <head><title>tabelex_4</title></head> <body><h1 align=center>Un tabel simplu colorat</h1><hr> <table border="3" bgcolor="green"> <tr> <td>verde 11 <td bgcolor="red">rosu 11 <tr bgcolor="blue"> <td>albastru 21 <td bgcolor="yellow">galben 22 <tr bgcolor="cyan"> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td bgcolor="white">cell 42 </table> </body> </html> Culoarea textului din fiecare celula se pote stabili cu ajutorul expresiei: <font color="valoare">. Valorea prestabilita a atributului cellspacing este 2. inclusiv 0. Daca in tabel sunt definite mai multe atribute bgcolor. inclusiv 0. atunci prioritatea este urmatoarea: <td>.

Valorile acestor atribute pot fi: • • numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a tabelului. " top " ( deasupra tabelului ). reprezentand fractiunea din latimea si inaltimea totala a paginii.<head><title>tabelex_6</title></head> <body><h1 align=center>Un tabel de celule mari</h1><hr> <table border cellpadding="20"> <tr> <td>gri 11 <td>rosu 12 <tr> <td>albastru 21 <td>galben 22 </table> </body> </html> Dimensionarea unui tabel Dimensiunile unui tabel .</h2> </table> </body> </html> Titlul unui tabel Unui tabel i se poate atasa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu tabel ).. Aceasta eticheta trebuie plasata in interiorul etichetelor <table>. 27 . width si height.. numere intregi intre 1 si 100.latimea si inaltimea .</table>. urmate de semnul %. ale etichetei <table>. " left " ( la stanga tabelului ). <html> <head><title>tabelex_7</title></head> <body><h1 align=center>Un tabel de de 200 pixeli X 50 %</h1><hr> <table border width="200" height="50%"> <tr> <td>cell 11 <td>cell 12 <tr> <td>cell 21 <td>cell 22 </table> </body> </html> In exemplul urmator se utilizeaza un truc care permite afisarea intr-o pagina Web a unui text pozitionat in centrul paginii. dar nu in interiorul etichetelor <tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile: • • • " bottom " ( sub tabel ). <html> <head><title>tabelex_8</title></head> <body><h1 align=center>Un text centrat intr-o pagina</h1> <table width="100%" height="100%"> <tr> <td align="center"> <h2>Text centrat.pot fi stabilite exact prin intermediul a doua atribute .

valoarea prestabilita ). " middle " ( la mijloc. Alinierea pe verticala a continutului unei celule se face cu ajutorul atributului valign care poate lua valorile: • • • • " baseline " ( la baza ). " char " ( alinierea se face fata de un caracter ). valoarea prestabilita ). Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) in loc de <td>.• " right " ( la dreapta tabelului ). cat 28 . " bottom " ( jos ). Toate atribute care pot fi atasate etichetei <td> pot fi de asemenea atasate etichetei <th>. Continutul celulelor definite cu <th> este scris cu caractere aldine si centrat. " top " ( sus ). <html> <head><title>tabelex_10</title></head> <body><h1 align=center>Un tabel cu titlu si cap de tabel</h1> <table border><caption align="bottom">Preturile masinii <tr><th>Pret<th>Citroen<th>Jaguar<th>BMW<th>Volvo <tr><th>In dolari<td>5000<td>100000<td>50000 <td>80000 <tr><th>In lei<td>2000000<td>2000000000<td>2000000 <td>16000000 </table> </body> </html> Alinierea continutului unei celule Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului align care poate lua valorile: • • • • " left " ( la stanga ). <html> <head><title>tabelex_9</title></head> <body><h1 align=center>Un tabel cu titlu</h1> <table border><caption align="top">Masini <tr><td>Mercedes<td>Citroen<td>Jaguar <tr><td>BMW<td>Volvo<td>Renault </table> </body> </html> Cap de tabel Un tabel poate avea celule cu semnificatia de cap de tabel. " right " ( la dreapta ). Aceste atribute pot fi atasate atat etichetei <tr> pentru a defini tuturor elementelor celulelor unui rand. " center " ( centrat .

<html> <head><title>tabelex_12</title></head> <body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1><hr> <table border> <tr> <td width="100" height="150">cell 11 <td width="100" height="150">cell 11 <tr> <td width="100" height="150">cell 21 <td width="100" height="150">cell 22 </table> </body> </html> Tabele de forme oarecare Un tabel trebuie privit ca o retea dreptunghiulara de celule.Cu ajutorul a doua atribute ale etichetelor <td> si <th>. cell 24<br>cell 33. procente din latimea . Valorile posibile ale acestor atribute sunt: • • numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii.cell 14<br>cell 23. extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan. respectiv a inaltimii unei celule. in etichetele <td> si <th> vor fi prezente ambele atribute colspan si rowspan. In acest caz . a carui valoare determina numarul de celule care se unifica. <html> <head><title>tabelex_11</title></head> <body><h1 align=center>Un tabel avand continutul celulelor aliniate</h1> <table border width="50%" height="50%"> <tr align="right"><td>Aici <td>alinierea<td>este centru<td>dreapta <tr> <td align="left">stanga <td align="center">centru<td valign="top">sus <td valign="bottom">jos <tr align="left"><td>aici<td>alinierea <td>este centru<td>stanga (implicita) </table> </body> </html> Dimensionarea exacta a celulelor unui tabel Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a doua atribute ale acestor etichete: width pentru latime si height pentru inaltime. Astfel: • • extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan. o celula se poate extinde peste celule vecine. <html> <head><title>tabelex_13</title></head> <body><h1 align=center>Un tabel simplu cu chenar</h1><hr> <table border> <tr> <td rowspan="3">cell 11<br>cell 21<br>cell 31 <td>cell 12<td colspan="2" rowspan="3">cell 13 . cell 34 <tr> <td>cell 22 29 . Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. respectiv inaltimea tabelului.si etichetelor <td> si <th> pentru a stabili alinierea textului intr-o singura celula. a carui valoare determina numarul de celule care se unifica.

<tr> <td>cell 32 <tr> <td>cell 41 <td colspan="3">cell 42.. in tabel pot aparea coloane cu o latime oricat de mare. In scopul de a afisa un chenar pentru celule vide se utilizeaza urmatoarele trucuri: • • dupa <td> se pune &nbsp. bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel. 30 . Caracterul &nbsp.cell 44 </table> </body> </html> Atributul " nowrap " Atributul nowrap apartine elementelor <td> si <th> .0.5: • • • background permite stabilirea unei imagini pentru fondul unui tabel.Un spatiu introdus prin im\ntermediul acestui caracter nu va fi ignorat de browser.0 .cell 43. <html> <head><title>tabelex_15</title></head> <body><h1 align=center>Un tabel cu celule vide</h1><hr> <table border> <tr> <td>cell 11 <td>cell 12<td>cell 13 <tr> <td>&nbsp. <html> <head><title>tabelex_14</title></head> <body><h1 align=center>Un tabel cu celule de latime mare</h1><hr> <table border> <tr> <td>cell 11 <td>cell 12 <tr> <td nowrap>cell 21 <td>cell 22 este foarte lata.aceasta celula este foaret lata. ( no break space ) este de fapt caracterul spatiu.Astfel . dupa <td> se pune <br>. atunci aceste celule vor aparea in tabel fara un chenar de delimitare. </table> </body> </html> Celule vide ale unui tabel daca un tabel are celule vide. el interzice intreruperea unei linii de text.<td> <td> </table> </body> </html> Atribute Internet Explorer pentru tabele Urmatoarele atribute ale etichetei <table> functioneaza cu Internet Explorer 4. dar nu cu Netscape Communicator 4. bordercolor permite stabilirea culorii pentru chenarul unui tabel. 5.Primeste ca valoare adresa URL a imaginii folosite pentru fond.

Text in prima coloana. Text in prima coloana.. atunci coloanele sunt configurate in ordine.Text in coloana doua. width determina o latime pentru coloana identificata prin span. care admite atributele: • • • span identifica acea coloana din grup pentru care se face configurarea. coloanele pot avea configurari diferite daca se utilizeaza elementul <col>.<td> <td> </table> </body> </html> Grupuri de coloane Blocul <colgroup>.Text in prima coloana.Daca lipseste. <html> <head><title>tabelex_16</title></head> <body><h1 align=center>Atribute "Internet Explorer"</h1><hr> <table border="5" background=".jpg" cellspacing=15 bordercolor="maroon" bordercolodark="red"> <tr bgcolor="yellow"> <td>cell 11 <td>cell 12<td>cell 13 <tr bgcolor="yellow"> <td>&nbsp.. Exemplu: <colgroup span="3" width="100"></colgroup> Intr-un bloc <colgroup>. align determina un tip unic de aliniere pentru coloanele din grup.Text in coloana a treia..Text in coloana a treia./images/ubm1.Text in coloana doua. <td valign=top>Text in coloana a treia. align determina o aliniere pentru coloana identificata prin span.. <html> <head><title>tabelex_17</title></head> <body><h1 align=center>Grupuri de coloane</h1><hr> <table width="400" cellspacing=10> <colgroup> <col width="100" align=right> <col width="100" align=center> <col width="200" align=right> </colgroup> <tr> <td valign=top>Text in prima coloana.Text in coloana doua. <td valign=top>Text in coloana doua.Text in coloana a treia.• bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel. Valorile posibile ale acestui atribut sunt: 31 . width determina o latime unica pentru coloanele din grup. Atributele acceptate de <colgroup> sunt: • • • span determina numarul de coloane dintr-un grup. </table> </body> </html> Atributele frame si rules Atributul frame al etichetei <table> permite specificarea partilor din chenarul unui tabel care vor fi afisate.</colgroup> permite definirea unui grup de coloane.

groups ...afiseaza o muchie pe toate laturile cadrului tabelului.</tfoot> ( un singur rand ).elimina toate muchiile interioare ale tabelului. In interiorul acestui bloc.Grupurile sunt specificate prin elementele <thead>. above .afiseaza cate o muchie in partea superioara si inferioara cadrului tabelului. <tbody><tr><td>. continutul unui tabel poate fi impartit in subblocuri prin elementele: • • • <thead><tr><td>. below .. <tfoot>si <colgroup>. <html> <head><title>tabelex_18</title></head> <body><h1 align=center>Atributele frames si rules</h1> <table width="400" frame=box rules=rows cellspacing=10> <tr> <td>cell 11 <td>cell 12<td>cell 13 <tr> <td>cell 21 <td>cell 22<td>cell 23 </table> </body> </html> Subblocurile unui tabel In specificatiile HTML 4. box . <tbody>. Ferestre in HTML Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului subferstre in care sa fie incarcate documente HTML diferite...afiseaza o muchie in partea superioara a cadrului tabelului. fiecare cadru este introdus prin eticheta <frame>.• • • • • • • • • void . hsides . <tfoot><tr><td>. all . border .afiseaza o muchie in partea din stanga a cadrului tabelului.afiseaza o muchie pe toate laturile cadrului tabelului. Intr-un tabel exista un singur subbloc de tipul <thead> si un singur subbloc de tipul <tfoot>.. rhs .0. rows .afiseaza o muchie in partea din stanga si din dreapta a cadrului tabelului..afiseaza o muchie in partea din dreapta a cadrului tabelului. in care blocul <body>. Valorile posibile sunt: • • • • • none .. Ferestrele sunt definite intr-un fisier HTML special .</tbody> ( oricate randuri ).</frameset>. Definirea cadrelor se face prin impartirea ferstrelor (si a subferestr 32 ..afiseaza muchii orizontale intre toate grupurile din tabel.afiseaza muchii verticale intre toate coloanele tabelului.afiseaza muchii intre toate liniile si coloanele. care primeste ca valoare adresa URL a documentului HTML care va fi incarcat in acel frame. Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui tabel. dar pot exista mai multe subblocuri de tip <tbody>. cols .. Un atribut obligatoriu al etichetei <frame> este src.afiseaza muchii orizontale intre toate liniile tabelului.elimina toate muchiile exterioare ale tabelului.afiseaza o muchie in partea inferioara a cadrului tabelului. 9. vsides . lhs .</thead> ( un singur rand ).</body> este inlocuit de bloc <frameset>.

care descriu modul in care se face impartirea. Exemplu 1: cols=200. iar a patra ocupand 2 parti.Pentru a realiza acest lucru.*"> <frame src="p1. -o subfereastra poate fi un cadru (folosind <frame>)in care se va incarca un document HTML sau poate fi impartita la randul ei la alte subfereste (folosind <frameset>). Observatii: -daca mai multe elemente din lista sun configurate cu * .2* inseamna o impartire in 4 subferestre .html"> <frame src="p2. Elementele listei pot fi: 1.jpg"> <frame src="p3. 2. <html> <head><title>ferex_3</title></head> 33 . se folosesc simultan cele doua atribute cols si rows. a treia ocupa jumatate din spatiul total disponibil iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil. un numar intreg de pixeli. care se imparte in trei parti egale . dintre care prima are 200 pixeli .10%"> <frame src="p1. impartirae unei ferestre intr-un numar de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastra. Exemplu 2: cols=200. <html> <head><title>ferex_2</title></head> <frameset rows="100.*.iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil. 3. a doua fereastra ocupand o parte .Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini. valoare atributelor cols si rows este o lista de elmente separate prin virgula .* inseamna o impartire in 4 subferestre .50%.html"> </frameset> </html> In exemplul urmator este creata o pagina Web cu trei cadre orizontale. dintre care prima are 200 pixeli . n* care inseamna n parti din spatiul ramas.html"> <frame src="x. <html> <head><title>ferex_1</title></head> <frameset cols="*.1*.50%. atunci spatiul disponibil ramas pentru ele se va imparti in mod egal.*.html"> </frameset> </html> In exemplul urmator este creata o matrice de 4 cadre (2 x 2). a treia ocupa jumatate din spatiul total disponibil .in linii si coloane: • • • impartirea unei ferstre intr-un numar de subferestre de tip coloana se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastra. procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %).

html" bordercolor="blue"> <frame src="p3. Valoarea prestabilita a atributului border este de 5 pixeli. Valorile posibile ale atributului frameborder sunt: "yes" -echivalent cu 1. Mai intai.html"> <frame src="p3.html"> <frame src="p2. In mod prestabilit.html"> <frame src="p4. <html> <head><title>ferex_4</title></head> <frameset cols="20%. <html> <head><title>ferex_5</title></head> <frameset cols="20%. 34 .Atributul bordercolor poate fi atasat atat etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse. dupa care a doua subfereastra este impartita in doua subferestre de tip linie. O valoare de 0 pixeli va defini un cadru fara chenar.Afisarea chenarului unui cadru se poate dezactivata daca se utilizeaza atributul frameborder cu valoare "no".html"> </frameset> </html> Pentru a obtine cadre fara chenar se utilizeaza border="0".*"> <frame src="p2.html"> <frameset rows="*.*" bordercolor="green" border="15"> <frame src="p1.cat si etichetei pentru a stabili culoarea chenarului pentru un cadru individual. chenarul unui cadru este afisat si are aspect tridimensional.*"> <frame src="p1.Pentru a o crea se procedeaza din aproape in aproape. Atributul border al etichetei <frameset> permite configurarea latimii chenarelor tuturor cadrelor la un numar dorit de pixeli.<frameset rows="*.html"> <frameset rows="*.*" cols="*. Acest atribut poate fi atasat atat etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele incluse) cat si etichetei <frame> (dezactivarea fiind valabila numai pentru un singur cadru).html"> <frame src="p3.*"> <frame src="p1.html"> </frameset> </html> In exemplul urmator este creata o pagina Web cu trei cadre mixte. Acest atribut primeste ca valoare un nume de culoare sau o culoare definita in conformitate cu modelul de culoare RGB.html"> </frameset> </frameset> </html> Culori pentru chenarele cadrelor si dimensionarea chenarului unui cadru Pentru a stabili culoarea chenarului unui cadru se utilizeaza atributul bordercolor. pagina este impartita in doua subferestre de tip coloana.*"> <frame src="p2.

barele de derulare sunt vizibile atunci cand este necesar <html> <head><title>ferex_6</title></head> <frameset cols="*.html" scrolling="yes" noresize> <frame src="p.html" scrolling="auto" noresize> </frameset> </html> Atributul noresize al etichetei <frame> (fara nici o valoare suplimentara) daca este prezent.html"> </frameset> </html> <html> <head><title>ferex_5_2</title></head> <frameset cols="20%. Valorile posibile sunt: • • • "yes" .html"> </frameset> </html> Bare de defilare Atributul scrolling al etichetei <frame> este utilizat pentru a adauga unui cadru o bara de derulare care permite navigarea in interiorul documentului afisat in interiorul cadrului. <html> <head><title>ferex_5_1</title></head> <frameset cols="20%.html" scrolling="no" noresize> <frame src="p.barele de derulare nu sunt utilizabile. "auto" . -procent din latimea. respectiv orizontale ale cadrului."no" -echivalent cu 0. "no" .barele de derulare sunt adaugate intotdeauna.*" frameborder="no"> <frame src="p1. inhiba posibilitatea prestabilita a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului. 35 .html"> <frame src="p3. Valori posibile: -numar de pixeli.html"> <frameset rows="*.*"> <frame src="p2.*.html"> <frame src="p3.*"> <frame src="p2. Pozitionarea documentului intr-un cadru Atributele marginheight si marginwidth ale etichetei <frame> permit stabilirea distantei in pixeli dintre continutul unui cadru si marginile verticale.html"> <frameset rows="*.*" border="0"> <frame src="p1. respectiv din inaltimea cadrului.*"> <frame src="p.

Acest comportament se poate schimba in doua moduri: • prin plasarea in blocul <head>.html">Pagina fara cadre interne</a> </iframe></center> </body> </html> Tinte pentru legaturi In mod prestabilit. hiperlink-uri. am specificat ca doresc o fereastra de cadru intern care are 40%din inaltimea si 50% din latimea paginii curente.. materialul cuprins in zona <noframes>. <html> <head><title>ferex_8</title> </head> <body> <a href="p1. marginwidth.</head> a unui element <base> care precizeaza.</noframes> va fi singurul care va fi inteles si afisat.html"> Daca vedeti acest text inseamna ca browserul dumnevoastranu suporta cadre interne.Explorer 4. folosind Netscape Navigator versiune 4. (/ulterioara) <a href="p0.cum ar fi: src.html" height=40% width=50%> </iframe> In acest caz. Cadre interne Un cadru intern este specificat prin intermediul blocului <iframe>..html" marginwidth=20> </frameset> </html> Exista browsere care nu suporta cadre pentru aceasta se utilizeaza in interiorul blocului <frameset> eticheta <noframes>.. De precizat este faptul ca intre <noframes> . Daca programul de navigare stie sa interpreteze cadre. Atributele aceptate de eticheta <iframe> sunt in parte preluate de la etichetele <frame> si <frameset>.html" target="icad"> Fisierul1</a><br> <a href="p2.html"> <frame src="p.html" target="icad"> Fisierul3</a><br> <a href="p.width.*.scrolling.<html> <head><title>ferex_7</title></head> <frameset cols="*. </noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini.*"> <frame src="p.</iframe>.align. la efectuarea unui clic pe o legatura noua pagina (catre care indica legatura) o inlocuieste pe cea curenta in aceeasi fereastra (acelasi acdru).prin atributul target 36 .noresize..marginheight.hspace. Ar fi preferabil sa reveniti.name.html" marginheight=20> <frame src="p.border..frameborder. sau de la eticheta <img> vspace..bordercolor.html" target="icad"> Home</a><br> <center><iframe width="60%" height="50%" border=2 bordercolor=red name="icad" src="p.. Un cadru intern se insereaza intr-o pagina Web in mod asemanator cu o imagine sau in modul in care se specifica marcajul <frame>.height..0 (/ulterioara) sau I. iar daca nu. tabele). va ignora ce se gaseste in aceasta portiune.0.html" target="icad"> Fisierul2</a><br> <a href="p3. asa cum rezulta din urmatorul exemplu: <iframe src="ferex_8.

Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <farme name="nume_frame"> In exemplul urmator este prezentata o pagina Web cu doua cadre.html" target="_self"> Fis1 in fereastra curenta</a><br><br> <a href="p. conform sintaxei: <a href="legatura" target="nume_fereastra/frame">.html" target="main"> Fisierul2</a><br> <a href="p3.</a> Observatie: -daca este prezent atat un atribut target in <base> cat si un atribut target in <a>.Toate legaturile din cadrul 1 incarca paginile in cadrul 2.. altfel are loc in fereastra browserului curent). <html> <head><title>ferex_9_frames</title></head> <frameset cols="20%.html" name="left"> <frame src="p. 37 .*"> <frame src="left.html" target="main"> Fisierul1</a><br> <a href="p2.html" target="main"> Home</a><br> </body> </html> Valori pentru atributul target Atributul target al etichetei<frame> accepta anumite valori predefinite de o valoare deosebita pentru creatorii de pagini Web.html" target="main"> Fisierul3</a><br><br> <a href="p1.html" target="_blank"> Fis1 intr-o fereastra noua</a><br><br> <a href="p1. atunci cele precizate de atributul target din <a> sunt prioritare. "_top" (incarcarea noii pagini are loc in fereastra browserului ce contine cadrul curent). "_blank" (incarcarea noii pagini are loc intr-o fereastra noua anonima). "_parent" (incarcarea noii pagini are loc in cadrul parinte al cadrului curent daca acesta exista. care precizeaza numele ferestrei (cadrului) in care se va incarca pagina nou referita de legatura..aceste valori sunt: • • • • "_self" (incarcarea noii pagini are loc in cadrul curent).• numele ferestrei (cadrului) in care se vor incarca toate paginile noi referite de legaturile din pagina curenta conform sintaxei: <base target="nume_ferastra/frame_de_baza"> prin plasarea in eticheta <a> a atributului target.html" name="main"> </frameset> </html> <html> <head><title>ferex_9_left</title> </head> <body> <a href="p1.

Unix shell. Atributul method precizeaza metoda utilizata de browser pentru expedierea datelor formularului.pentru introducerea unui sir de caractere pe post de cheie de cautare .Sunt posibile urmatoarele valori: • get (valoarea implicita). Atribute esentiale ale elementului <form> Exista doua atribute esentiale ale elementului <form>.cu multiple sectiuni . • post In acest caz datele sunt expediate separat.PHP. Formularele va asigura construirea unori pagini Web care permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului.yahoo. Pentru aceasta se foloseste un atribut al etichetei <form>: si anume action care primeste ca valoare " mailto: " concatenat cu o adresa valida de e-mail catre care se va expedia formularul completat. <form action="http://www. trebuie precizat ce se va intampla cu el dupa completarea si expediere.com/cgi-bin/nume_fis. Datele sunt adaugate conform sintaxei: nume_camp = valoare_camp. . Intre diferite seturi de date este introdus un "&".nu sunt permise cantitati mari de date (maxim 1 Kb) .care ofera facilitati puternice de transmisie a datelor. Exemplu: "http://www.yahoo. 2. 3.cgi?nume1 = valoare1&nume2 = valoare2". Daca este necesar serverul expedieaza un raspuns utilizatorului. Un formular cu un camp de editare si un buton de expediere 38 .10.pana la o structura complexa .campuri de editare etc. Atributul action precizeaza ce se va intampla cu datele formularului odata ce acestea ajung la destinatie.intre adresa URL si date este inserat un "?".C.In acest caz .com/cgi-bin/nume_fis. Utilizatorul completeaza formularul si il expedieaza unui server.casete de selectie. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (e-mail). 1.cgi">. Sunt permise cantitati mari de date (ordinul MB) Pentru ca un formular sa fie functional. Script-urile pot fi scrise in limbajele Perl. Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> si </form>.Formularele pot varia de la o simpla caseta de text .datele din formular sunt adaugate la adresa URL precizata de atributul action. Formulare Un formular este un ansamblu de zone active alcatuit din butoane .efectueaza o prelucrare a lor si expedieaza catre utilizator un raspuns. O sesiune cu o pagina web ce contine un formular cuprinde urmatoarele etape: 1. 2.valoarea atributului action este adresa URL a unui script aflat pe un srver WWW care primeste datele formularului .element caracteristic tuturor motoarelor de cautaredin Web . O aplicatie dedicata de pe server analizeaza formularul completat si (daca este necesar) stocheaza datele intr-o baza de date.De regula .

daca aceasta valoare a fost stabilita.permite atasarea unui nume fiecarui element al formularului. in care atributul type este configurat la valoarea "submit". La apasarea acestui buton .care permite atribuirea unei valori initiale unui element al formularului. Butonul Reset Daca un element de tip <input> are atributul type configurat la valoarea "reset" . caracterele tastate peste numarul maxim sunt ignorate.atunci in formular se introduce un buton pe care scrie "Reset". Pentru un camp de editare. Pe buton apare scris "Submit Query" sau valoarea atributului value . atributul maxlength specifica numarul maxim de caractere pe care le poate primi un camp de editare. -formularele cu un singur camp (de tip text) nu au nevoie de un buton de expediere. datele sunt expediate automat dupa completarea si apasarea tastei ENTER. Un buton Reset poate primi un nume cu ajutorul atributului name si o valoare printr-un atribut value. Observatii: -daca atributul type lipseste intr-un element <input> . atunci campul respectiv este considerat in mod prestabilit ca fiind de tip "text".Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. <html> <head><title>FormEx_1 </title></head> <body><h1> Un formular cu un camp de editare si un buton de expediere</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> Numele:<input type="text" name="numele" value="Numele si prenumele"><br> <input type="submit" value="expedieaza"> </form></body> </html> Pentru elementul <input> de tipul camp de editare (type = "text") .atunci se executa automat o derulare acestui camp.toate elementele dinn formular primesc valorile prestabilite (definita odata cu formularul ). respectiv valoarea acestui atribut in caz contar. chiar daca aceste valori au fost modificate de utilizator. <html> <head><title>formex_2</title></head> <body><h1>Un formular cu un buton reset</h1> <hr> <form action="mailto:xxxxx@xxx. alte doua atribute pot fi utile: • • atributul size specifica latimea campului de editare depaseste aceasta latime . Un asemenea buton afiseaza textul "Reset" daca atributul value lipseste. Alte atribute pentru un element <input> sunt: • • atributul name . atributul value . Pentru a preciza tipul elementului se foloseste atributul type al etichetei <input>.com" method="post"> Introduceti numele:<input type="text" name="nume" value="Numele"><br> Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br> <input type="reset" value="sterge"> <input type="submit"> </form></body> </html> 39 .Acest element poate primi un nume prin atributul name. acest atribut primeste valoarea "text". Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>.

in functie de alegerea facuta de utilizator. <html> <head><title>formex_3</title></head> <body><h1>Un formular cu un buton reset</h1> <hr> <form action="mailto:xxxxx@xxx. aunei singure variante din mai multe posibile.ci numai caractere *. Singura deosebire consta in faptul ca acest camp de editare nu afiseaza caracterele in clar. La expedierea formularului insa. Butoanele radio se introduc prin eticheta <input> cu atributul type avand valoarea "radio". <html> <head><title>formex_4</title></head> <body><h1>Un formular cu butoane radio</h1> <hr> <form action="mailto:xxxxx@xxx.care ascund de privirile altui utilizator aflat in apropiere valoarea introdusa intr-un asemenea camp. Toate atributele unui camp de editare raman valabile. Observatii: . Casete de validare O caseta de validare (checkbox)permite selectarea sau deselctarea unei optiuni.com" method="post"> Nume:<input type="text" name="nume" value="Numele"><br> Prenume:<input type="text" name="prenume" value="Prenumele"><br> Password:<input type="password" name="parola" ><br> <input type="reset" value="sterge"> <input type="submit" value="trimite"> </form></body> </html> Butoane radio Butoanele radio permit alegerea . Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea "checkbox". valoarea tastata intr-un camp de tip "password" se transmite in clar.com" method="post"> Alegeti sexul:<input type="radio" name="sex" value="b"><br> Femeiesc:<input type="radio" name="sex" value="f"><br> <input type="reset"> <input type="submit"> </form></body> </html> La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f".Camp de editare de tip "password" Daca se utilizeaza eticheta <input> avand atributul type configurat la valoarea "password" . fiecare caseta poate avea valoarea prestabilita "selectat" definita prin atributul checked.la un moment dat . <html> <head><title>formex_5</title></head> <body><h1>Un formular cu casete checkbox</h1> 40 .fiecare caseta poate avea un nume definit prin atributul name. atunci in formular se intyroduce un element asemanator cu un camp de editare obisnuit (introdus prin type="text").

care ataseaza listei un nume (utilizat in perechile "name=value" expediat serverului). • <html> <head><title>formex_6</title></head> <body><h1>Un formular cu caseta de fisiere</h1> <hr> <form action="mailto:xxxxx@xxx.ent al listei.<hr> <form action="mailto:xxxxx@xxx.html" enctype="multipart/formdata"><br> <input type="reset"> <input type="submit"> </form></body> </html> Liste de selectie O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o lista finita.com" method="post"> Alegeti fisierul:<input type="file" name="fisier" value="c:\temp\proba. Aceasta valoare poate fi atribuita direct atributului value. Pentru aceasta se insereaza un element <input> intr-un formular .atunci catre server va fi expediat textul ce urmeaza dupa <option>. atributul size.com" method="post"> Alegeti meniul:<br> Pizza <input type="checkbox" name="pizza" value="o portie"> Nectar <input type="checkbox" name="nectar" value="un pahar"> Bere <input type="checkbox" name="bere" value="o sticla"> Cafea <input type="checkbox" name="cafea" value="o ceasca"><br> <input type="reset"> <input type="submit"> </form></body> </html> Casete de fisiere Intr-o pereche "name = value" a unui formular se poate folosi intregul continut al unui fisier pe post de valoare.Valoarea acestui atribut este "multipart/form-data". daca acest atribut lipseste . Atributele pentru un element de tip caseta de fisiere: • • atributul name permite atasarea unui nume atributul value primeste ca valoare adresa URL a fisierului care va fi expediat o data cu formularul. valoarea prestabilita fiind 1) cate elemente din lista sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin actionarea barei de derulare atasate automat listei). atributul selected (fara alte valori) permite selectarea prestabilita a unui elem. atributul enctype precizeaza metoda utilizata la criptarea fisierului de expediat. O lista de selectie poate avea urmatoarele atribute: • • atributul name. se poate fi tastata intr-un camp 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 apasarea butonului Browse. <html> <head><title>formex_7</title></head> <body><h1>Un formular cu o lista de selectie</h1> 41 . Elementele unei liste de selectie sunt incluse in lista cu ajutorul etichetei <option>. cu atributul < code>avand valoarea "file" (fisier).. care precizeaza (printr-un numar intreg pozitiv . Doua atribute ale etichetei option se dovedesc utile: • • atributul value primeste ca valore un text care va fi expediat server-ului in perechea "name=value". Lista de selectie este inclusa in formular cu ajutorul etichetelor corespondente <select>si </select>.. din formular.

<hr> <form action="mailto:xxxxx@xxx. atributul name. 42 . In plus . in acest caz: o intreruperea cuvintelor la marginea dreapta a editorului se produce numai cand doreste utilizatorul. (de la "word wrap"=trecerea cuvintelor pe randul urmator0. care specifica numarul de linii afisate simultan. care permite atasarea unui nume campului de editare multilinie. Cand formularul este expediat catre server pentru fiecare element selectat al listei care este se insereaza cate o pereche "name=value" unde name este numele listei. atributul rows. care specifica numarul de caractere afisate intr-o linie. care determina determina comportamentul campului de editare fata de sfarsitul de linie. Eticheta are urmatoarele atribute: • • • • atributul cols. <html> <head><title>formex_8</title></head> <body><h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1> <hr> <form action="mailto:xxxxx@xxx. Lista de selectie cu selectii multiple O lista de selectie ce permite selectii multiple se creeaza intocmai ca o lista de selectie obisnuita. eticheta <select> are un atribut multiple (fara alte valori).com" method="post"> Limbi straine cunoscute:<br><br> <select name="limbi straine" size="5"> <option value="e"> Engleza <option value="f" selected> Franceza <option value="s"> Spaniola <option value="i"> Italiana <option value="r"> Rusa <option value="g"> Germana </select><br><br> <input type="reset"> <input type="submit"> </form></body> </html> Campuri de editare multilinie Intr-un formular campuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Acest atribut poate primi urmatoarele valori: a) " off ". atributul wrap.com" method="post"> Universitatea absolvita:<br><br> <select name="universitate" size="3"> <option value="B"> Universitatea din Cluj <option value="UNBM" selected> Universitatea de Nord Baia Mare <option value="UTT"> Universitatea Technica din Timisoara <option value="UTB"> Universitatea Technica din Brasov </select><br><br> <input type="reset"> <input type="submit"> </form></body> </html> Daca atributul size este egal cu 1 atunci lista de selectie arata asa. o caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul.

Cand utilizatorul apasa un buton. Campurile formularului sunt incluse in celule unui tabel pentru a obtine o aliniere dorita. caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul. in acest caz: o o se produce intreruperea cuvintelor la marginea dreapta a editorului . c) " soft ".b) " hard ".com" method="post"> <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial. 43 . <html> <head><title>formex_9</title></head> <body><h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action="mailto:xxxxx@xxx. <html> <head><title>formex_10</title></head> <body><h1>Un formular complex</h1> <hr> <center><table bgcolor="orange"> <form action="mailto:xxxxx@xxx. </textarea> <input type="reset"> <input type="submit"> </form></body> </html> Un formular complex In exemplul urmator este prezentat un formular continand elemente prezentate anterior."> <li><input type="radio" name="plata">cash <li><input type="radio" name="plata">card </ul> <tr align=left><th>Comentarii: <td> <textarea name="comentarii" cols="30" rows="5" wrap="off"> Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea> <tr align=left valign=top><td> <input type="reset" value="sterge"><td> <input type="submit" value="expedieaza"> </form></table></body> </html> Butoane Intr-un formular pot fi afisate butoane. se lanseaza in executie o functie de tratare a acestui eveniment.com" method="post"> <caption align="top">MENIU</caption> <tr align=left><th>Numele: <td><input type="text" name="numele"> <tr align=left><th>Preumele: <td><input type="text" name="prenumele"> <tr align=left><th>Telefonul: <td><input type="text" name="telefonul"> <tr align=left><th>Alegeti pizza: <td><input type="checkbox" name="ciuperci">cu ciuperci <input type="checkbox" name="mexicana">mexicana <input type="checkbox" name="europeana">europeana <tr align=left><th>Alegeti plata:<td> <ul style="background-color:lightblue. nu se include caracterul de sfarsit de linie in textul transmis serverului o data cu formularul. limbajul HTML nu permite scrierea unor astfel de functii (acest lucru este posibil daca se utilizeaza limbajele Javascript sau Java). in acest caz: o o se produce intreruperea cuvintelor la marginea dreapta a editorului . A doua linie din textul initial.

care primeste ca valoare numele unei ferestre a browserului in care va fi incarcat raspunsul trimis serverului WWW la expedierea unui formular. color:red.} </style> Toate titlurile care apar in fgisier ca fiind de marime 1 vor fi de culoare rosie si centrate. . asa cum s-a vazut mai inainte. Stiluri Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a paginilor Web. se utilizeaza eticheta <input> avand atributul type configurat la valoarea "button". Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente (de ex. Un stil reprezinta un mod de a scrie un bloc de text ( adica anumite valori pentru font. sintaxa Javascript. p {text-align:center. De exemplu: <style> h1 {text-align:center.</button>. color:red. Un astfel de buton poate fi inserat intr-un formular.-"reset". care permite atasarea unui nume butonului atributul value.Pentru a insera un buton intr-un formular . separate prin virgula: <style> h1. "h2".. h2. .toate elementele cuprinse intr-un formular pot avea un atribut disabled care permite dezactivarea respectivului element. -"submit" . 11. In corpul blocului <button>. value precizeaza textul care va fi afisat pe buton. distante fata de margini etc). sau poate fi introdus oriunde in pagina pentru initierea unor actiuni independente de formulare. Un buton pentru lansarea in executie a unei actiuni poate fi introdus intr-un formular prin elementul <input> avand atributul type configurat la valoarea "button". aliniere. si "p") atunci se utilizeaza o lista acestor elemente. Stiluri dedicate Aceste stiluri se aplica blocurilor de text pentru care sunt definite. "h1".. marime culoare. Exista doua modalitati de a defini un stil: • • sintaxa CSS (Cascading Style Sheets).. in acest caz declansand actiuni legate de acel formular. Atributele posibile ale elementului "button" sunt: • • • name acorda elementului un nume.} </style> 44 .toate elementele de tip text cuprinse intr-un formular pot avea un atribut readonly care interzice modificarea continutului acestor elemente. Exista o a doua modalitate de a introduce intr-o pagina Web un buton de apasat. Cascading Style Sheets inseamna "foi in stilul cascada". si anume prin intermediul blocului <button>. type precizeaza actiunea ce se va executa la apasarea butonului daca acesta este inclus intr-un formular.Valorile posibile pentru acest atribut sunt: -"button" . Observatii finale: .. Alte doua atribute ale elementului "button" sunt: • • atributul name.elementul <form> poate avea un atribut target.</button> se poate afla un text sau un marcaj de inserare a unei imagini. care primeste ca valoare textul ce va fi afisat pe buton.

</style>.Clase de stiluri Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este necesar.} </style> </head> <body> <p>Acesta este un paragraf normal <br> <p class=ac>Acesta este un paragraf albastru si centrat </body> </html> Stiluri " identificate " Toate elementele unui document admite un atribut universal numit id. Java si Javascript). Pentru a utiliza un stil "identificat" procedati astfel: • in blocul <style>. folositi atributul id care primeste valoare numele stilului definit anterior. C++.ac {text-align:center. Exemplu: Definim o clasa de stiluri "ac" (albastru si centrat) in interiorul blocului <style>."all" aflat in fata clasei de stiluri "ac" indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text. Observatii: In interiorul unui bloc <style>. color:blue. comentariile sunt blocuri delimitate de /* si */ ( ca in C.... aflat la randul lui in blocul <head>... Atributul id poate identifica stilul utilizat de un element. Acesta este un atribut universal adica este aplicabila tuturor elementelor..</style>. Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului (de exemplu "p") atunci in consturctia va aparea acest element ( de exemplu "p. La utilizarea clasei de stiluri in cadrul unui element se foloseste atributul class avand ca valoare numele clasei de stil.</style> introduceti definitia stilului conform sintaxei: <style> #rosu { color: red } </style> • in elementul in care se doreste utilizarea locala a acestui stil .</head>: <style> all..ac {text-align:center. <html> <head><title>clasa de stiluri dedicata</title> <style> p. atunci cand acest lucru este necesar.rc").} </style> Daca dorim ca un titlu de marimea 2 sa foloseasca clasa de stiluri "ac" atunci scriem: <h2 class = ac>Acesta este un header de marime 2 albastru si centrat</h2> .. Daca dorim ca un stil " identificat " sa fie aplicabil numai pentru anumite elemente ale documentului ( 45 . color:blue.

Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia ... Pentru aceasta se utilizeaza atributul universal style (comun practic tuturor etichetelor ce par intr-un document HTML). font-size: 20pt} a: activate {color: blue. Ele se definesc in blocul <style>..x sau 5! 46 .</style> pot fi transferate intr-un fisier extern existand astfel posibilitatea utilizarii lor in mai multe fisiere HTML.. se include in blocul <head>.</style>."> Acest header de marimea 2 este de culoare rosie si este centrat. Stiluri in-line Stilurile in-line sunt definite chiar in eticheta ce initiazablocul in care dorim sa se aplice aceste stiluri.. Valoarea data atributului style este tocmai descrierea stilului. cuprinsa nu intre acolade {.. font-style: italic} a: visited {color: cyan. text-decoration: none} Pentru ca numai anumite legaturi sa utilizeze un stil se pot folosi urmatoarele doua metode: • • a: link.css sau . dupa care utilizam atributul style pentru eticheta <span>..} ci intre ghilimele ". Se utilizeaza titlurile definite in fisierul extern ca si cum ar fi definite in fisierul HTML curent intr-un bloc <style>. Stiluri definite in fisiere externe Stilurile definite in interiorul unui bloc <style>..</a> a: link#ID1 {...</style> sau intr-un fisier extern...</span>.html..} combinat cu <a id = ID1 href=" "> .". atunci includem acest text intr-un bloc cu ajutorul delimitatorilor <span>..</h2> Daca dorim utilizarea unui anumit style pentru un fragment de text. De exemplu: <h2 style = " color: red. Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel: 1.. fara ca acesti delimitatori sa fie inclusi.</style> ....</a> Atentie!!! acest exemplu lucreaza doar cu browsere Internet Explorer 4.. Pseudoclase Pseudoclasele se utilizeaza pentru personalizarea legaturilor.. o atributul type cu valoarea "text/css".</head> o eticheta <link>avand trei atribute...} combinat cu <a class = CLASA1 href=" "> . o atributul relcu valoarea "stylesheet" o atributul href avand ca valoare adresa URL a fisierului creat la punctul 1 . conform sintaxei: a: link {color: black.de exemplu "h2") atunci in constructia selectorului va aparea acest element (de exemplu "h2#ac"). In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1 . 2. text-align: center. Continutul acestui fisier coincide cu continutul unui bloc <style>..CLASA1 {.

Nu este acelasi lucru cu mult mai complexul limbaj de programare Java.NordEst nw-resize sageata SudEst . insa singurul exemplu.Sud se-resize sageata NordVest .atunci cand este pozitinat pe o legatura 2. Javascript bara verticala din campurile de introducere a datelor sageata Est-Vest clepsidra Javascript este un limbaj de programare simplu . deplasarea mouse-ului intr-un anumit punct sau stergerea unui anumit camp dintr-un formular. in mod obisnuit in doar cateva randuri . Proprietatea care gestioneaza forma cursorului se numeste simplu: cursor si poate fi introdusa in orice element style al unui tag html. de tip script. ca limbaj de descriere a formei unui document.SudVest text w-resize wait 12. Mana . Desigur exista cazuri in care am dori ca browser-ul sa aiba o alta forma decat una dintre acestea.In browsere cursorul mouse-ului are in general o forma simpla.SudEst sw-resize sageata NordEst . raspunsurile la actiuni sau evenimente cum ar fi deschiderea unei pagini.html" style=" cursor :e-resize" " Legatura< /a> Iata deci cum va arata (doar pentru IE 4. pentru definirea comportamentului elementelor dintr-o pagina Web. De exemplu pentru obtinerea unei imagini a cursorului de tipul unei sageti orientata Est-Vest la trecerea mouse-ului peste un link iata codul ce va trebui folosit: < a href=" fisier. Cea mai simplas aplicatie Javscript este aceea care determina apariria si derularea unui mesaj: 47 . Bara verticala . Javascript poate specifica .x sau mai mare): Legatura Nu este. luaind pe parcursul vizionarii paginii respective maximum doua infatisari diferite: 1. in continuare aveti toate codurile pentru formele de cursor pe care le puteti folosi: auto utilizeaza setarile implicite ale utilizatorului crosshair creeaza o cruce default e-resize hand help move n-resize setarile implicite ale browserului sageata Est-Vest mana semnul intrebarii cruce cu sageti la capete sageata sud-nord ne-resize sageata SudVest .atunci cand este pozitionat pe alt obiect decat o legatura. La fel ca multe alte probleme care privesc modul in care o pagina arata si aceasta isi gaseste rezolvarea in folosirea CSS.NordVest pointer s-resize mana sageata Nord . Acestea insa sunt formele implicite.

. Tag-uri utilizatorul selecteaza campul de intare al unui element de formular utilizatorul transmite un formular utilizatorul abandoneaza pagina onSelect onSubmit onUnload Marcaje de baza <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare Defineste un fisier in format Web Antetul documentului Tilul documentului Corpul paginii HTML Culoarea de fond a paginii Culoarea textului pe paginii Culoarea legaturiilor nevizitate din paginii Culoarea legaturiilor vizitate din paginii 48 .</script> si totul este inglobat intr-un comentariu astfel incat programele de navigare care nu interpreteaza Javascript nu sunt derutate de scriptul in sine.<html> <head><script language="Javascript"> <!-alert (" Apasati OK ! ") --> </script></head> <body> O fereastra cu mesaj !!! </body> </html> Scriptul este incadrat de marcajele <script>. Eveniment blur Se desfasoara atunci cand utilizatorul elimina controlul de intare de pe un element al unui formular utilizatorul executa un click pe un element al unui formular sau pe o legatura utilizatorul modifica valoarea unui text zona de text sau element de selectie utilizatorul atribuie unui element de formular control de intrare utilizatorul incarca pagina in progarmul de navigare Handler de eveniment onBlur click onClick change focus load onChange onFocus onLoad utilizatorul deplaseaza indicatorul mouseover mouse-ului deasupra unei legaturi sau onMouseover a unei ancore select submit unload 13. Multe evenimente pot fi gestionate cu Javascript..

1 Numarul de inceput al listei ordonate Lista neordonata (marcata) TYPE=forma Forma marcajului.--> <CENTER> </CENTER> <HR> SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x <A> </A> HREF=url HREF=#nume Name=nume Culoarea legaturiilor pe durata clicului exacutat de utilizator Imaginea de fond pentru pagina Paragraf Nivel de subtitlu al documentului (n = 1-6) Specifica atribute ale textului incadrat Dimensiunea textului este 1-7 Specifica fontul: a. fie o valoare RGB Linie noua Informatie preformatata Comenatriu HTML Centreaza materialul in pagina Rigla orizontala Inaltimea riglei in pixeli Latimea riglei in pixeli sau in procente Dezactiveaza afisarea umbrei pentru rigla orizontala Alinierea riglei orizontala in pagina (left. daca este disponibil.ALINK=culoare BACKGROUND = url <P> <Hn> <Hn> <FONT> </FONT> SIZE=n FACE="a. sau b Culoarea textului: fie un nume de culoare . a. right) Culoarea riglei orizontale(numai pentru IE) Marcaj de tip ancora Referinta hipertext Referinta catre o ancora interna Definitia unei ancore interne Marcaje pentru liste <DD> <DL> </DL> <DT> <LI> <OL TYPE=tip START=x <UL Descriere definitie Lista de tip definitie Termen de definitie Element de lista Lista ordonata (numerotata) Tipul numerotarii. square.b" COLOR=s <BR> <PRE> </PRE> <!-. i. 49 . Valori posibile: A. disc. I. center. Valori posibile: circle.

off(inactiva).Valori posibile: on(activa). auto (automat) Marimea chenarului din jurul cadrului Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru Spatiu suplimetar la stanga si la dreapta unui anumit cadru Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru SCROLLING=scrl FRAMEBORDER=x MARGINHEIGHT=x MARGINWIDTH=x <NOFRAMES> </NOFRAMES> 50 .Formatarea caracterelor <B> </B> <I> </I> <U> </U> <TT> </TT> <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> <STRONG> </STRONG> <VAR> </VAR> <BASEFONT SIZE = n> Afiseaza text cu caractere aldine Afiseaza text cu caractere cursive Afiseaza text subliniat Text cu font monospatiu Citare bibliogarfica Listing de program Stil logic de evidentiere Text de la tastatura Evidentiere logica puternica Program sau variabila Specifica dimensiunea implicita a fontului din pagina Marcaje pentru cadre <FRAMESET> </FRAMESET> COLS=x ROWS=x BORDER=x FRAMEBORDER = x FRAMESPACING = x <FRAME> SRC=url NAME=nume Definirea redactarii paginii Numarul si marimea relativa a coloanelor Numarul si marimea relativa a liniilor Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0) Specifica marimea chenarului Marimea spatiului dintre doua cadre adiacente Definitia unui anumit cadru URL-ul sursa pentru cadru Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a> Defineste optiunea barei de derulare.

iar textul curge in partea stanga Spatiu suplimetar pe orizontala in jurul tabelului Spatiu suplimetar pe verticala in jurul tabelului Specifica numarul de coloane ale unui tabel Defineste un set de definitii de coloane cu ajutorul marcajului <col> Defineste latimea unei coloane exprimata in pixeli Defineste titlul tabelului Defineste corpul tabelului Linie de tabel Specifica culoarea de fond pentru intreaga linie ALIGN=right HSPACE=x VSPACE=x COLS=x <COLGROUP> </COLGROUP> <COL WIDTH=x> <THEAD> </THEAD> <BODY> </TBODY> <TR </TR> BGCOLOR=culoare 51 .<IFRAME> SRC=url NAME=s HEIGHT=x WIDTH=x Cadru intern (numai pentru (IE) Sursa cadrului Numele ferestrei (util pentru TARGET) Inaltimea cadrului inglobat Latimea cadrului inglobat Marcaje pentru tabele <TABLE> </TABLE> BORDER=x CELLPADDING=x CELLSPACING=x WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR = culoare BORDERCOLORLIGHT = culoare BORDERCOLORDARK = culoare ALIGN=left Tabel HTML Chenarul tabelului Spatiul suplimentar in cadrul celulelor tabelului Spatiul suplimentar intre celulele tabelului Latimea impusa tabelului Ajustarea fina a tabelului Ajustarea fina a riglelor tabelului Specifica culoarea chenarului tabelului Cea mai deschisa culoare din cele doua culori specificate Cea mai inchisa culoare din cele doua culori specificate Aliniaza tabelul la marginea din stanga a paginii. iar textul curge in partea dreapta Aliniaza tabelul la marginea din dreapta a paginii.

") Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text ALIGN=aliniere VALIGN=aliniere BACKGROUND=url NOWRAP ALIGN=baseline ALIGN=caracter ALIGN=justify Adaugarea imaginilor <IMG SRC=url ALT=text Marcajul de introducere a imaginilor Sursa fisierului grafic Textul alternativ de afisat. center) Alinierea pe verticala a materialului din cadrul celulei de date. middle) Specifica imaginea de fond pentru celula tabelului Nu permite despartirea textului pe linii in cadrul unei celule Aliniaza celule de date cu linia de baza a textului adiacent Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit este ". middle(in mijloc). right) Celula de date a tabelului/font> Specifica culoarea de fond pentru celula de date Numarul de coloane pe care se intinde celula curenta de date Numarul de linii pe care se intinde celula curenta de date Alinierea materialului din cadrul celulei de date. right (la dreapta) HEIGHT=x WIDTH=x BORDER=x HSPACE=x VSPACE=x Inaltimea imaginii (in pixeli) Latimea imaginii Chenarul din jurul imaginii. right.Valori posibile: (left. Valori posibile: top ALIGN=aliniere (sus). daca este necesar Alinierea imaginii in pagina. left (in stanga). bottom (jos).ALIGN=aliniere <TD </TD> BGCOLOR=culoare COLSPAN=x ROWSPAN=x Alinierea celulelor de pe linia curenta (left. bottom. center.Valori posibile: (top. atunci cand aceasta este utilizata ca hiperlegatura Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli) Spatiul suplimentar pe verticala din jurul imaginii (in pixeli) Marcaje pentru formulare <FORM> </FORM> Formular HTML activ 52 .

checkbox.bottom.file.image. dar este afisat pe ecran Elementul este afisat pe ecran dar nu poate fi editat Carcatere speciale 53 . Valori posibile: text.ACTION=url METHOD=metoda <INPUT TYPE=optiune NAME=nume VALUE=valoare CHECKED= optiune SIZE=x SIZE=x <SELECT> </SELECT> NAME=nume SIZE=x MULTIPLE=x <OPTION VALUE=valoare <TEXTAREA> </TEXTAREA> NAME=nume ROWS=x COLS=x <FIELDSET> </FIELDSET> <LEGEND> </LEGEND> ALIGN=s TABINDEX=x ACCESKEY=c DISABLED READONLY Programul CGI de pe serverul care receptioneaza datele Modul in care datele sunt transmise serverului(GET sau POST) Camp de text sau alte date de intrare Tipul campului de intrare <INPUT>.left.reset. radio.password. Numele simbolic al valorii campului Continutul prestabilit al campului de text Buton/caseta marcata in mod prestabilit Numarul de caractere al unui camp de text Numarul maxim de caractere acceptate Grup de casete de validare Numele simbolic al valorii campului Numarul de articole de meniu care se afiseaza odata (prestabilit=1) Permite selectia unor articole de meniu multiple Alegerea particulara intr-un domeniu <SELECT> Valoarea rezultanta a acestei selectii din meniu Camp de intare de tip text pe linii multiple Numele simbolic al valorii campului Numarul de linii al casetei de text Numarul de coloane (caractere) pe linie al casetei de text Imparte formularul in parti logice Numele asociat setului de campuri (fieldset) Specifica alinierea legendei (explicatiei) afisate (top.submit.right) Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element Elementul este inactiv.hidden.

& ˜ < > © ® á â ñ ø &amp. ampersand tilda mai mic (less than) mai mare (greater than) simbolul de copyright simbolul pentru marca inregistrata a mic cu accent ascutit (acute) a mic cu accent circiumflex n mic cu tilda o mic barat (slash) HTML avansat <STYLE> </STYLE> TYPE=val <SCRIPT> </SCRIPT> LANGUAGE=limbaj EVENT=eveniment FOR=numeobiect Specifica informatii referitoare modelul de stiluri Tipul modelului de stiluri. in pagina Web Limbajul utilizat Eveniment care declanseaza executia unor scripturi specifice Numele obiectului din pagina asupra caruia actioneaza scriptul 54 . De regula "text/css" Include un script de regula Javascript.

Sign up to vote on this title
UsefulNot useful