Noţiuni introductive Internet : retea de retele de calculatoare cu acces public World Wide Web FTP (File Transfer Protocol

): serviciul pentru transferul fisierelor Telnet: acces la distanta la resursele unui calculator Electronic Mail: mesagerie electronica News: serviciul de stiri Tehnologia client-server Client Utilizator INTERNET Pachete TCP/IP http httpd Web Server

Browser URL

1. 2. 3. 4.

Clientul formuleaza o cerere Cererea este trimisa la server Cererea parcurge un mediu pina la server Serverul primeste cererea, o analizeaza, o executa, formuleaza raspunsul si il trimite clientului 5. Clientul primeste raspunsul. HTTP Este protocolul prin care doua calculatoare comunica intre ele. WWW foloseste ca protocol de comunicare HiperText Transfer Protocol. Hipertext Este un text imbogatit. El contine: - text obisnuit - etichete pentru formarea textului si incapsularea altor tipuri de informatii (salturi rapide catre alte surse de informatii, sunete, imagini, filme, etc). Hipertextul se stocheaza in fisiere avind extensia htm sau html. HTML Un fisier ce contine hipertext se stocheaza intr-un limbaj specific numit HiperText Markup Language (HTML), adica limbajul de marcare a textului. HTML este un limbaj ce permite inserarea de: - text; - sunete, imagini, filme; - indicatori de prezentare a informatiei; - legaturi (link-uri) catre alte pagini Web aflate oriunde in lume; - aplicatii (programe JavaScript, Java, VRML).

1

Host Un calculator din Internet se numeste host (gazda). Pentru a fi identificat in mod unic, calculatorul primeste un nume (o adresa). Pachete Informatia care circula intre calculatoare interconectate este incapsulata in pachete. Un pachet contine: - adresa expeditorului si adresa destinatarului; - informatia; - numele aplicatiei client care a formulat cererea si numele aplicatiei de pe server care va primi cererea de rezolvare. Pachetul este lansat in reteaua Internet. TCP/IP Reteaua Internet dispune de mijloace de dirijare a pachetelor astfel incit acestea sa ajunga la destinatie. Un astfel de mijloc de dirijare a pachetelor este Internet Protocol (IP). Reteaua Internet dispune de mijloace de corectie a erorilor de transmitere a pachetelor. Un astfel de mijloc de corectie este Transfer Control Protocol (TCP). Pagina Web In orice calculator informatia este stocata in unitati numite fisiere. Acele fisiere speciale care au extensia htm sau html sunt pagini Web. Browser Paginile de Web sunt vizualizate pe calculatorul client prin intermediul unei aplicatii speciale numite Browser. Pagina vizualizata se schimba prin intermediul: - unei ferestre speciale (Address) - meniului File, Open, Browse - legaturilor afisate de pagina Web. Cele mai utilizate browsere sunt: - Netscape Communicator; - Internet Explorer; - HotJava. Site Web O multime organizata de pagini Web. Httpd HiperText Transfer Protocol Demon este o aplicatie care se executa pe serverul Web pentru a prelucra cererile de pagini Web receptionate de acesta de la clienti. Home Page Este o pagina din site-ul unei organizatii care : - este in mod uzual prima pagina accesata din site; - este o pagina de prezentare a organizatei; - ofera modul cel mai eficient de explorare a informatiilor aflate in site.

2

Server Web Este un calculator care adaposteste un Site Web si care este capabil sa raspunda la cereri de pagini Web din partea unui client. Pentru a putea raspunde permanent cererilor Web, un calculatortrebuie sa ruleze permanent o aplicatie speciala : httpd. Cele mai intilnite servere Web sunt: - Apache Server; - Microsoft Web Server; - Oracle Web Server. URL Un utilizator al serviciului WWW poate solicita vizualizarea prin intermediul browserului a unei pagini Web care poate fi localizata pe un calculator aflat oriunde in lume. O pagina Web este unic determinata prin adresa URL asociata. Uniform Resource Locator =URL. Adresa URL a paginii curente vizualizate de browser apare in fereastra Address. Un URL precizeaza: -metoda de acces la pagina (de exemplu: http); -calculatorul pe care se afla (de exemplu www.mm.ro); -numele paginii (de exemplu: index.html). Avantajele serviciului WWW - sunt multimedia (contin text, imagini, sunete, filme); - sunt interactive (raspund la cererile utilizatorului); - sunt independente de platforma hardware si software Crearea unei pagini de Web Etape: 1. Editarea fisierului HTML utilizind: - un editor de texte obisnuit (NotePad, WordPad, Word); - un editor de texte dedicat (Netscape Composer, HotMetal). 2. Salvarea paginii de Web cu extensia .htm sau .html intr-un site Web. 3. Rezolvarea referintelor continute in pagina Web (legaturi, imagini, sunete, filme, aplicatii Java).

Lectia 1
Prima pagina Web Crearea unui document Web (etape): - editarea fisierului HTML - salvarea fisierului editat cu extensia .html - vizualizarea paginii cu un browser. Elemente standard ale unui document HTML <html> <head> </head> 3

<body> prima pagina standard </body> </html> Observatii: - Un document HTML este o succesiune de blocuri - Blocurile dintr-un document HTML pot fi imbricate - Un bloc este delimitat de simboluri speciale (marcaje sau tag-uri) care sunt incluse intre paranteze si transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. - Unele blocuri prezinta delimitator de sfirsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau interzis - Un document HTML standard consta dintr-un bloc <html>…</html> care include alte doua sub-blocuri :<head>…</head> si <body>…</body>. - Blocul <body>…</body> cuprinde continutul propriu-zis al paginii HTML. Titlul unei pagini Web In blocul <head> se poate insera un bloc <title> … </title> . <html> <head> <title> acesta este titlul primei pagini </title> </head> <body> aceste este continutul primei pagini </body> </html> Obs. Continutul blocului title apare in fereastra de titlu a browser-ului. In lipsa apare numele fisierului. Sfirsitul de linie Se face cu <br> (break). Blocuri preformatate Pentru ca browser-ul sa recunoasca corect caracterele “spatiu”, “tab”, “CR/LF” ce apar in cadrul unui text, trebuie folosit un bloc <pre>…</pre>.

Lectia 2
Culori, fonturi, margini Culoarea de fond Poate fi precizata in doua moduri: 4

1. Printr-un nume de culoare (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, oliv, purple, red, silver, teal, white, yellow). 2. Prin constructia “#rrggbb”, unde r, g si b 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 culori. Este recomandat ca numele de culori sa fie inclus intre ghilimele. Culoarea unei pagini se pecizeaza prin intermediul unui atribut al etichetei <body>. <body bgcolor=culoare>. Exemplul 2.1. <html> <head> <title> exemplu 2.1 </title> </head> <body bgcolor=”yellow”> aceasta este o pagina Web<br> cu fondul de culoare galbena </body> </html> Culoarea textului Se stabileste printr-un atribut al etichetei <body>. Exemplul 2.2. <html><head><title>Exemplul 2.2 </title></head> <body text=”red”> Aceasta este o pagina Web cu textul de culoare rosie </body></html> Atribute multiple O eticheta poate avea mai multe atribute. <eticheta atribut1=valoare1 atribut2=valoare2 atribut3=valoare3> Exemplul 2.3. <html> <head><title>Exemplul 2.3.</title></head> <body bgcolor=”yellow” text=”red” > Aceasta este o pagina Web cu fondul de culoare galbena <br> Si textul de culoare rosie. </body></html> Stabilirea caracteristicilor textului de baza Textul afisat are urmatoarele atribute: • size • color • style Acestea sunt atributele etichetei <basefont> , care este singulara (nu are eticheta de sfirsit de loc). <basefont size=numar color=culoare style=font> unde: - numar poate fi 1,2,3,4,5,6,7 (1 cel mai mic).

5

6 . fantasy sau un font instalat). respectiv inaltimea ferestrei browserului. text de culoare verde si marime 7 </body></html> Exemplul 2. Obs.4. monospace.6</title></head> <body bgcolor=”cyan” text=”000000” leftmargin=80% topmargin=50> prima parte a paginii are fondul cyan si textul de culoare alba<br> textul are marimea implicita 3 si fontul implicit (Times New Roman) <br> <basefont style “Arial” color=”red” size=1> Text de culoare rosie si marime 1 <br> <besefont size=3 color=”green”> text scris cu fontul implicit marimea 5 culoarea implicita (neagra) <br> <basefont style=”Courier” size=7 color=”magenta”> Text scris cu fontul Courier marimea 7 culoarea magenta <br> </body></html> Lectia 3 Stiluri pentru blocurile de text Caractere aldine Pentru ca un bloc sa apara in pagina evidentiat trebuie inclus intre blocuri <b> </b>.style=”Times New Roman”. Exemplul 2. <html><head><title>Exemplul 2.leftmargin (distanta de la stinga ferestrei browserului si marginea stinga a continutului paginii .culoare – se precizeaza printr-o constructie RGB font – poate fi un font generic (serif. cursive. Domeniul de valabilitate al caracteristicilor precizate se termina la sfirsitul paginii sau pina la urmatoarea eticheta <basefont>. sans serif. <html><head><title>Exemplul 2. Exemplul 2. color=”black”.5.5</title></head> <body leftmargin=”100” topmargin=”20%”> prima parte a paginii are atribute implicite<br> <basefont style “Arial” color=”green” size=7> a doua parte a paginii. text de culoare verde si marime 7 </body></html> Stabilirea marginilor paginii Web Pozitionarea se face cu ajutorul a doua tribute ale etichetei <body> .4</title></head> <body> prima parte a paginii are atribute implicite<br> <basefont style “Arial” color=”green” size=7> a doua parte a paginii.un numar intreg pozitiv reprezentind o distanta masurata in pixeli . Implicit atributele sunt size=3.topmargin (distanta dintre marginea de sus a ferestrei browserului si marginea de sus a continutului paginii) Ambele atribute pot avea valorile: .6.un procent din latimea. <html><head><title>Exemplul 2.

<html><head><title>Exemplul 3. Exemplul 3.3.1.1</title></head> <body> prima parte a paginii are atribute implicite<br> <b>Aceast parte a paginii apare cu caractere ingrosate </b> <br> In aceasta linie numai un <b>cuvint</b> apare ingrosat.2.5</title></head> <body> f<sub>(y)</sub>=(x<sub>1</sub>+x<sub>2</sub>)<sup>2</sup>-y<sup>3</sub> </body></html> 7 .5.4</title></head> <body> prima parte a paginii are atribute implicite<br> <i>Aceast parte a paginii apare cu caractere italice </i> <br> In aceasta linie numai un <i>cuvint</i> apare inclinat. <html><head><title>Exemplul 3.3</title></head> <body> prima parte a paginii are atribute implicite<br> <small>Aceast parte a paginii apare cu caractere micsorate </small> <br> In aceasta linie numai un <small>cuvint</small> apare micsorat Normal <smal> mai mic <small> si mai mic </small> </small><br> Normal <small> mai mic <big> normal <big> mai mare <big> si mai mare </big> </big> </big> </small> </body></html> Obs. acestea trebuie incluse intre etichete <small> si </small>. Blocurile <big></big> si <small></small> pot fi imbricate. Exemplul 3. In exeplul 3.2</title></head> <body> prima parte a paginii are atribute implicite<br> <big>Aceast parte a paginii apare cu caractere marite </big> <br> In aceasta linie caracterele <big>apar mai mari<big> si mai mari <big> mult mai mari </big></big></big> </body></html> Caractere micsorate Pentru a scrie caracterele cu o unitate mai mici decit cele curente. </body></html> Caractere marite Pentru ca un tetx sa fie scris cu caractere mai mari trebuie inclus intr-un bloc delimitat cu etichetele <big> si </big>. Caractere cursive Pentru aceasta blocul se include intre etichetele <i> si </i>. <html><head><title>Exemplul 3. </body></html> Caracterele “indice” si “exponent” Se folosesc etichetele <sup> … </sup> pentru exponenti si <sub> … </sub> pentru indici. se prezinta modul in care se scrie F(y)=(x1+x2)2-y3. Exemplul 3.4. Exemplul 3. <html><head><title>Exemplul 3.5. <html><head><title>Exemplul 3.Exemplul 3.

<html><head><title>Exemplul 3. Blocuri de caractere evidentiate Introducem alte doua etichete pentru a pune in evidenta prin stilul cursiv fragmente de text: .<br> <tt>asa scrie un teleprinter</tt> </body></html> Blocuri de caractere clipitoare Se delimiteaza cu <blink> …</blink> .<em> si </em> (emphasize=a evidentia).7.<cite> si </cite> (cite=citat) .8.9. Exemplul 3. </body></html> Stiluri fizice si stiluri logice Stilurile logice se bazeaza pe stilurile fizice. <html><head><title>Exemplul 3.Caractere subliniate si caractere sectionate Pentru a sublinia caractere. Exemplul 3.8</title></head> <body> prima parte a paginii are atribute implicite<br> <code>Aceast parte a paginii apare cu caractere monospatiate </code> <br> In aceasta linie numai un <kbd>cuvint</kbd> apare monospatiat. </body></html> 8 . <html><head><title>Exemplul 3. iar pentru a le sectiona. le introducem intre etichetele <s> si </s>. acestea se include in blocuri <u> si </u>. . Exemplul 3.7</title></head> <body> prima parte a paginii are atribute implicite<br> <cite>Aceast parte a paginii apare cu caractere italice </cite> <br> In aceasta linie numai un <em>cuvint</em> apare inclinat.<code> si </code> (code=sursa) .<kbd> si </kbd> (kbd=keyboard) . </body></html> Blocuri de caratere monospatiate Exista trei etichete cu efecte similare pentru a obtine efectul asemanator cu cel de la o masina de scris. <html><head><title>Exemplul 3.6.9</title></head> <body> prima parte a paginii are atribute implicite<br> <blink>Aceast parte a paginii apare cu caractere clipitoare </blink> <br> In aceasta linie numai un <blink>cuvint</blink> clipeste.<tt> si </tt> (tt=teletype) Exemplul 3. dar modul lor de actiune depinde de browserul utilizat.6</title></head> <body> prima parte a paginii are atribute implicite<br> <u>Aceast parte a paginii apare cu caractere subliniate </u> <br> In aceasta linie numai un <s>cuvint</s> apare sectionat.

prin nume .11</title></head> <body> prima parte a paginii are atribute implicite<br> <q>Aceast parte a paginii apare cu caractere cursive </q> <br> In aceasta linie numai un <q>cuvint</q> apare citat.1.printr-o constanta conforma cu standardul RGB (#rrggbb). Familia fontului Exista cinci familii generice de fonturi: serif. <html><head><title>Exemplul 3. monospace si fantasy.10. Exemplul 3.1</title></head> <body> prima parte a paginii are atribute implicite<br> <font color=”red”>Aceasta parte a paginii apare cu caractere rosii</font> <br> In aceasta linie numai un <font color=”blue”>cuvint</font> apare albastru.marimea in puncte tipografice (atributul point – size). <html><head><title>Exemplul 3.Imbricarea etichetelor Exemplul urmator ne arata ca etichetele pot fi imbricate. care vor fi afisate de browser cu caractere cursive. Un fragment poate fi scris cu caractere aldine si cursive in acelasi timp. .11.10</title></head> <body> prima parte a paginii are atribute implicite<br> <b>Aceast parte a <i>paginii</i> apare cu caractere ingrosate </b> <br> In aceasta linie numai un <b><u>cuvint</u></b> apare ingrosat si <big>subliniat</big>. sans serif. . </body></html> Blocul “q” Blocul <q> …</q> permite inserarea citatelor.grosimea (atributul weight) Culori O culoare se precizeaza in doua moduri: .tipul (atributul face). Exemplul 3. cursive. Tipul de font se stabileste prin atributul face al etichetei <font>. . <html><head><title>Exemplul 4.culorea (atributul color).marimea (atributul size). </body></html> 9 . Exemplul 4. Culoarea fontului Se foloseste eticheta <font color=culoare> … </font>. de exemplu. </body></html> Lectia 4 Configurarea fonturilor Un font este caracterizat de urmatoarele atribute: . .

Valorile admise sunt : 100.2 etc fata de valoarea curenta.2 etc fata de valoarea curenta.4</title></head> <body> prima parte a paginii are atribute implicite<br> <font weight=”200” color=”red”>Aceasta parte a paginii apare cu caractere rosii sigrosime 200</font> <br> In aceasta linie numai un <font weight=”900” color=”blue”>cuvint</font> apare albastru si grosime 900. Exemplul 4.4.<br> <font size=”+2”> Fonturi de marimea 6</font><br> </body></html> Exemplul urmator ne arata cum se dimesnioneaza fonturile cu ajutorul atributului point – size. Exemplul 4. <html><head><title>Exemplul 4. 800.+2 . .…pentru a mari dimensiune fontului cu 1.2</title></head> <body> prima parte a paginii are atribute implicite<br> <font size=”6” color=”red”>Aceasta parte a paginii apare cu caractere rosii de dimensiune </font> <br> <basefont size=”4” > fonturi de marime 4<br> <font size=”-3”>In aceasta linie dimensiune cu 1</font> apare albastru.6.1.… pentru a micsora dimesniunea fontului de 1. 200. </body></html> Lectia 5 Blocuri de text Toate etichetele de blocuri de text trec automat la rind nou si adauga un spatiu suplimentar. . 500. <html><head><title>Exemplul 4. Exemplul 4. 900.2. -2 . 300.4. <html><head><title>Exemplul 4.3. care poate lua una din valorile: .-1.5.2. 700. 400.3</title></head> <body> prima parte a paginii are atribute implicite<br> <font color=”red” point-size=”20”>Aceasta parte a paginii apare cu caractere rosii si dimensiunea 10</font> <br> In aceasta linie numai un <font point-size=”50” color=”blue”>cuvint</font> apare albastru de dimensiune50.Marimea fontului Se foloseste atributul size.+1. 600. </body></html> Grosimea unui font Se defineste cu atributul weight al etichetei <font>.7 . 10 .3.

Exemplul 5. <html><head><title>Exemplul 5. Exemplul 5.3</title></head> <body> Aceasta este o linie normala. <html><head><title>Exemplul 5. Indentarea unui bloc Se folosesc etichetele <blockquote>…</blockquote>. <html><head><title>Exemplul 5.1</title></head> <body> Adresa noastra este: <address> Str. <div align=”right” > Motto:”Misiunea artei este sa creeze <i>bucurie </i> .right . adresa sa de email si data de creare.<br> Si nu se poate crea artistic decit <br> In echilibru si in pace sufleteasca…”<br> <i>Constantin Brancusi </i> </div> <div align=”center”> Motto:”Misiunea artei este sa creeze <i>bucurie </i> . Aceste date se scriu la inceputul sau la sfirsitul paginii. insa ajungi la simplitate fara voia ta. Tehnicii nr.<br> Si nu se poate crea artistic decit <br> In echilibru si in pace sufleteasca…”<br> <i>Constantin Brancusi </i> </div> 11 .center Exemplul 5. apropiindu-te sensul cel real al lucrurilor.Inserarea unei adrese Eticheta <address>…<address>. Blocurile <div>…</div> au atributul align cu valorile: .2. Unele browsere afiseaza textul cuprins intre aceste etichete cu caractere cursive si de la rind nou. </blockquote> </body></html> Blocuri <div> Formateaza si delimiteaza un bloc.1.3.5 <br>Craiova 1100<br> Romania </address> </body></html> Blocurile de adresa pot contine adresa si numele persoanei care a creat pagina de Web.2</title></head> <body> Constantin Brancusi obisnuia sa spuna: <blockquote> <i> Simplitatea </i> nu este un scop in Arta.left . Unele browsere adauga un spatiu suplimentar inainte si dupa adresa.

cu valorile “left”. .00 </body></html> Blocuri <plaintext> Intr-un fisier HTML.alinierea textului cu atributul align. daca se foloseste </p>.5</title></head> <body> Un fisier HTML standard arata astfel: <xmp> <html><head><title>Exemplul x. caracterele < si > au o semnificatie speciala pentru browser.trecerea la rind nou.00 Sisteme de operare 15. insa ajungi la simplitate fara voia ta.inserarea unui spatiu suplimentar dupa blocul paragraf. “right”. Exemplul 5.</body></html> Caracterul spatiu poate fi interpretat explicit de browser daca este inserat prin”&nbpsp. ele trebuie sa fie incadrate in una din etichetele : . .6</title></head> <body> Linia 1 <br> 12 . Daca dorim ca ele sa fie inserate in text.<listing>…</listing> (120 de caractere pe rind).2001 S2 14. “center”. Exemplul 5. . Exemplul 5. Partea din pagina Web care incepe cu marcajul <plaintext> nu interpreteaza marcajele HTML.x</title></head> <body> Constantin Brancusi obisnuia sa spuna: <blockquote> <i> Simplitatea </i> nu este un scop in Arta. <html><head><title>Exemplul 5.07.2001 S3 8. apropiindu-te sensul cel real al lucrurilor.00 Programare in Java 25.2001 S1 8.<xmp>…</xmp> (80 de caractere pe rind).4. </blockquote> </body></html> </xmp> </body></html> Blocuri paragraf Eticheta <p> …</p> permite: .4</title></head> <body> Planificarea examenelor in sesiunea iulie 2001 <pre> Examenul Data Sala Ora Grafica pe calculator 07.07. . care este optional.6.5 <html><head><title>Exemplul 5. <html><head><title>Exemplul 5.”.inserarea unui spatiu inainte de blocul paragraf.07.

Tag-ul <h1> permite scrierea cu caractere mai mari. grosime 2.<h2>. Obs. <html><head><title>Exemplul 5. grosime 5 pixeli.10. de latime 50%.<h4>. .Toate aceste etichete se refera la un bloc de text si trebuie insotite de o etichteta similara.Toate browserele introduc un spatiu suplimentar inainte de a afisa un titlu. cu umbra) </h2> </hr> <h3 align=”center”> Tipuri de linii orizontale</h3> <hr> Urmeaza o linie aliniata in centru. .Accepta atributul align .8. Exemplul 5.Linia 2 este generata de un break <p> Linia 3 este generata de un paragraf.10</title></head> <body> <center> <hr width=10%> 13 . <p align=”right”> Paragraf aliniat la dreapta</p> <p align=”center”> Paragraf aliniat in centru</p> </body></html> Blocuri de titlu Titluri de marimi diferite se pot insera cu etichetele <h1>.7.<h3>. pina la <h6> care scrie cu caracterele cele mai mici. . fara umbra: <hr align=”center” width=”50%” size=”5” noshade> </body></html> Blocuri <center> Blocul introdus de etichetele <center>…</center> aliniaa centrat toate elementele pe care le contine.8</title></head> <body> <h1 align=”center”> Linie orizontala </h1> <hr> <h2> linia orizontala are parametrii impliciti (aliniere stinga. <html><head><title>Exemplul 5.7</title></head> <body> <h1 align=”center”>Titlul de marimea 1 aliniat centru </h1> <h2> Titlu de marimea 2 aliniat stinga (implicit) </h2> <h3 align=”right”> Titlu de marimea 3 aliniat la dreapta </h3> <h4 align=”left”> Titlu de marimea 4 aliniat la stinga </h4> <h5> Titlu de marimea 5</h5> <h6> Titlu de marimea 6 </h6> </body></html> Linii orizontale Inserarea de linii orizontale se face cu eticheta <hr> Exemplul 5. <html><head><title>Exemplul 5. latiem 100%. Exemplul 5.<h5> si <h6>.

</h1> <hr> <h2> O lista neordonata </h2> <ul> Pentru a cunoaste Internetul trebuie sa studiati urmatoarele carti: <li>HTML <li>JavaScript <li>Java </ul> </body></html> Tag-urile <ul> si <li> pot avea un atribut type care stabileste caracterul afisat in fata fiecarui element al listei . Lectia 6 Liste Liste neordonate O lista neordonata este un loc de text delimitat de etichete corespondente <ul>… </ul> (ul = unordered list). Valorile posibile pot fi: . </nobr> </body></html> Marcajul <wbr> arata browserului locul unde poate fi intrerupt rindul. <html><head><title>Exemplul 6. O singura linie. O singura linie.<hr width=40%> <hr width=70%> <hr width=100%> <hr width=70%> <hr width=40%> <hr width=10%> </center> </body></html> Blocuri <nobr> Textul incadrat de aceste etichete va fi afisat pe o singura linie. Fiecare element este identificat cu eticheta <li>. Exemplul 5.“square” 14 . O singura linie.“disc” .11.11</title></head> <body> <nobr> O singura linie. <html><head><title>Exemplul 5. Exemplul 6. O singura linie.1.1</title></head> <body> <h1 align=”center” > exemplul 6.“circle” .1.

Valorile posibile sunt: . Exemplul 6.2.2</title></head> <body> <H1 ALIGN=”CENTER” > Exemplul 6. Fiecare element al listei este initiat de eticheta <li>. <html><head><title>Exemplul 6.Exemplul 6. Exemplul 6.4</h1> <hr> <h2>O lista ordonata </h2> <ol>Pentru a realiza o pagina Web trebuie: <li> creat un fisier de comenzi in limbajul HTML <li> salvat fisierul cu extensia html.… 15 . <html><head><title>Exemplul 6.4</title></head> <body> <h1 align=”center”>Exemplul 6.3</h1> <hr> <h2> o lista neordonata de liste neordonate</h2> <ul>Elemente si atribute ale unei pagimi html: <li> body <ul>Atribute: <li>bgcolor <li>text </ul> <li>font <ul>Atribute: <li>face <li>size <li>color </ul> </ul> </body></html> Liste ordonate O lista ordonata este un bloc de text delimitat de etichete corespondente <ol>si </ol> (ol=ordered list) .B.4. <li> incarcat fisierul html intr-un browser </ol> </body></html> Tag-urile <ol> si <li> pot avea atribut type care stabileste tipul de caractere utilizate pentru ordonarea listei. <html><head><title>Exemplul 6.2</h1> <hr> <h2> O lista neordonata</h2> <ul type=”square”> Pentru a cunoaste INTERNET-ul trebuie sa studiati: <li>HTML <li>JavaScript <li>Java </ul> </body></html> Listele neordonate pot fi imbricate pe mai multe niveluri.“A” pentru ordonare de tipul A.3</title></head> <body> <h1 align=”center” > exemplul 6.3.

6. <li> incarcat fisierul intr-un browser </ol> </body></html> Exemplul 6..6 </h1> <hr> <h2> O lista ordonata cu litere incepind cu valoarea C </h2> <ol type=”A” start=”C”> Pentru a realiza o pagina de Web trebuie: <li> creat un fisier de comenzi in limbajul html.5 </h1> <hr> <h2> O lista ordonata cu cifre romane mari </h2> <ol type=”I”> Pentru a realiza o pagina de Web trebuie: <li> creat un fisier de comenzi in limbajul html.Listele ordonate pot fi imbricate intre ele cu liste neordonate.“i” pentru ordonare de tipul “i”. <li> incarcat fisierul intr-un browser </ol> </body></html> Tag-ul <li> poate avea un atribut value care stabileste valoarea pentru rlrmrntul respectiv al listei.5</title></head> <body> <h1 align = “center” > Exemplul 6.… .6</title></head> <body> <h1 align = “center” > Exemplul 6. <html><head><title>Exemplul 6.“1” pentru ordonare de tipul 12. Valoarea acestui intreg trebuie sa fie >0. <li> salvat fisierul cu extensia html.“I” pentru ordonare de tipul I.5. Valoarea acestui atribut trebuie sa fie intreg >0. <html><head><title>Exemplul 6.… . . <html><head><title>Exemplul 6.b.8 </h1> <hr> 16 . <li> salvat fisierul cu extensia html. <li start=”5”> salvat fisierul cu extensia html.8</title></head> <body> <h1 align = “center” > Exemplul 6.… Exemplul 6.”ii”.7.7 </h1> <hr> <h2> O lista ordonata cu itemi setati individual </h2> <ol start=”3”> Pentru a realiza o pagina de Web trebuie: <li> creat un fisier de comenzi in limbajul html. III. <html><head><title>Exemplul 6.8. Exemplul 6.7</title></head> <body> <h1 align = “center” > Exemplul 6.3. II. <li> incarcat fisierul intr-un browser </ol> </body></html> Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a secventei de ordonare.“a” pntru ordinare de tipul a. Exemplul 6.

atunci definitia termenilor incepe pe aceeasi linie cu termenii. <html><head><title>Exemplul 6. Se poate scrie <dl compact>.<h2> O lista ordonata cu liste ordonate si neordonate </h2> <ol > Un sistem informatic include: <li> hardware: <ol><li>placa de baza<li>procesor<li>memorie</ol> <li> Software de baza: <ul><li>Windows<li>Unix<li>Linux</ul> <li> Software de aplicatie: <ul>type=”disc”<li>AutoCad<li>CorelDraw<li>QuarkXPress</ul> </ol> </body></html> Liste de definitii O lista de definitii este formata dintr-o succesiune de termeni.10.un termen al listei este initiat de eticheta <dt> (definition term) .definitia unui termen incepe pe o linie noua si este identata Tag-urile <ul> <ol> <dl> .definitia unui termen este initiata de eticheta <dd> (definition description) .9</title></head> <body> <h1 align = “center” > Exemplul 6.10</title></head> <body> <h1 align = “center” > Exemplul 6. fiecare termen fiind urmat de definitia sa. Obs.10 </h1> <hr> <h2> O lista compacta de definitii </h2> <dl compact> Glossar de termeni pentru Internet <dt> Browser <dd> Aplicatie care ruleaza pe calculatorul client o pagina html <dt> Server WWW <dd> Calculator care raspunde la cererile de pagini html emise de un client </dl> </body></html> 17 . Daca atributul este prezent.intreaga lista de definitii se incadreaza intre etichetele corespondente <dl> si </dl> (definition list) . . Exemplul 6.9.9 </h1> <hr> <h2> O lista de definitii </h2> <dl > Glossar de termeni pentru Internet <dt> Browser <dd> Aplicatie care ruleaza pe calculatorul client o pagina html <dt> Server WWW <dd> Calculator care raspunde la cererile de pagini html emise de un client </dl> </body></html> Exemplul 6. <html><head><title>Exemplul 6.

Fiecare element este indentat de <li>. Un tabel simplu Etichetele <table> si </table> creaza un tabel.1 </h1> 18 .11. Fiecare element al listei este initiat de eticheta <li> Liste de meniuri O lista de meniuri este un bloc delimitat de etichetele corespondente <menu> si </menu> .gif”>Neptun<br> </ul> </body></html> Lectia 7 Tabele Permit crearea unei retele dreptunghiulare de domenii. <html><head><title>Exemplul 6.gif”>Venus<br> <img src=”blue-ball. Cele mai multe browsere afiseaza lista de directoare si lista de meniuri ca pe liste neordonate.1 <html><head><title>Exemplul 7.11</title></head> <body> <h1 align = “center” > Exemplul 6. Exemplul 7.11 </h1> <hr> <h2> O lista de definitii speciala </h2> <ul>Planete din sistemul solar:<br> <img src=”blue-ball. Liste de directoare O lista de meniuri este un bloc delimitat de etichetele corespondente <dir> si </dir> . alinierea. iar rindurile se insereaza cu <tr>…</tr> (table row). Nu se recomanda folosirea acestor tipuri de lista. O celula se insereaza cu <td> (table data). Utilizari speciale ale listelor Daca in loc de elementelelistei introduse cu <li> se insereaza un bloc de text.gif”>Mercur<br> <img src=”blue-ball. fiecare domeniu avind propriile optiuni pentru culoarea fondului.1</title></head> <body> <h1 align = “center” > Exemplul 7. Exemplul 6.Liste de meniuri O lista de meniuri este un bloc de etichete corespondente <menu> si </menu>. Liste personalizate O lista poate contine pe post de elemente imagini si texte. acesta va fi indentat. Fiecare element este indentat de <li>. culoarea textului.

Definirea culorilor de fond pentru un tabel Se stabileste cu atributul bgcolor din eticheta <table> pentru un tabel. Text dupa tabel. Text dupa tabel. in eticheta <tr> a unei linii sau in eticheta <td> pentru o celula. Text dupa tabel. Text dupa tabel. Text inainte de tabel. Text dupa tabel. Text dupa tabel. Text inainte de tabel. Text inainte de tabel.2 <html><head><title>Exemplul 7. Text dupa tabel. Text inainte de tabel. Text inainte de tabel. Text dupa tabel. Text inainte de tabel. Text dupa tabel. <table>. Text dupa tabel. Text dupa tabel. Text dupa tabel.<hr> <table> <tr> <td> celula 11 <td> celula 12 <td> celula 13 <tr> <td> celula 21 <td> celula 22 <td> celula 23 </table> </body></html> Alinierea tabelului in pagina de Web Se foloseste atributul align al etichetei <table> .2</title></head> <body> <h1 align = “center” > Exemplul 7. atunci prioritatea este <td>. Text dupa tabel. Text inainte de tabel. </body></html> Tema. Text inainte de tabel.3</title></head> 19 . Acceasi problema pentru textul aliniat la stinga. Text inainte de tabel. Text inainte de tabel. Text dupa tabel. Text inainte de tabel.3 <html><head><title>Exemplul 7. Text inainte de tabel. Exemplul 7. Text inainte de tabel. Text inainte de tabel. Daca intr-un tabel sunt definite mai multe atribute bgcolor. Text dupa tabel. Text dupa tabel. <tr>. Exemplul 7. Text dupa tabel.2 </h1> <h2> Un tabel aliniat la dreapta</h2> Text inainte de tabel. <table border align=”right”> <tr> <td> celula 11 <td> celula 12 <td> celula 13 <tr> <td> celula 21 <td> celula 22 <td> celula 23 </table> Text dupa tabel. Text inainte de tabel. Text dupa tabel. Text dupa tabel. Text inainte de tabel. Text inainte de tabel.

4</title></head> <body> <h1 align = “center” > Exemplul 7. reprezinta distanta dintre doua celule vecine.5</title></head> <body> <h1 align = “center” > Exemplul 7. .Valorile acetui atribut pot fi numere intregi pozitive. . . Exemplul 7.4 <html><head><title>Exemplul 7. Obs.3 </h1> <h2>Un tabel colorat</h2> <hr> <table border=”3” bgcolor=”yellow”> <tr> <td> celula 11 <td> celula 12 <td> celula 13 <tr> <td> celula 21 <td> celula 22 <td> celula 23 </table> </body></html> culoarea textului din fiecare celula poate fi stabilita cu <font color=”valoare”>…</font>.Valoarea prestabilita a atributului cellspacing este 2. Distanta dintre marginea unei celule si continutul ei poate fi definita cu atributul cellpadding al etichetei <table>.<body> <h1 align = “center” > Exemplul 7. Dimensionarea celulelor unui tabel Distanta dintre doua celule vecine se defineste cu ajutorul atributului cellspacing al etichetei <table>. .4 </h1> <h2>Un tabel colorat fara chenar si cu celule alipite</h2> <table cellspacing=”0”> <tr> <td bgcolor=”yellow”> celula 11 <td bgcolor=”green”> celula 12 <td bgcolor=”red”> celula 13 <tr> <td bgcolor=”blue”> celula 21 <td bgcolor=”white”> celula 22 <td bgcolor=”black”> celula 23 </table> </body></html> Exemplul 7.Valorile acestui atribut pot fi numere intregi pozitive si reprezinta distanta in pixeli dintre marginea unei celule si continutul ei.Valorea prestabilita a atributului cellpading este 1. inclusiv 0.5 </h1> 20 .5 <html><head><title>Exemplul 7.

Se declara un tabel mai mare decit pagina si continind o singura celula. permite afisarea unui text in centrul unei pagini.Daca dimensiunile precizate de atribute sunt mai mici decit cele necesare afisarii tabelului.Numere intregi pozitive reprezentin latimea.<h2>Un tabel colorat cu celule mari</h2> <table border cellspacing=”20”> <tr> <td bgcolor=”yellow”> <font color=”black”>celula 11 </font> <td bgcolor=”green”> <font color=”ivory”>celula 12</font> <td bgcolor=”red”> <font color=”white”>celula 13 </font> <tr> <td bgcolor=”blue”> <font color=”yellow”>celula 21</font> <td bgcolor=”white”> <font color=”red”>celula 22</font> <td bgcolor=”black”> <font color=”white”>celula 23</font> </table> </body></html> Dimensionarea unui tabel Eticheta <table> permite dimensionarea tabelului (width si height).Daca dimesniunile precizate de atribute sunt mai mari decit cele necesare afisarii tabelului. respectiv inaltimea in pixeli a tabelului . respectiv inaltimea totala a paginii.7</title></head> <body> <table width=”100%” heigh=”100%”> <tr> <td bgcolor=”yellow”> <h2>Un text in mijlocul unei pagini</h2> 21 . Exemplul 7.6 </h1> <h2>Un tabel 300 pixeli x 50%</h2> <table border width=”300” height==50%> <tr> <td bgcolor=”yellow”> celula 11 <td bgcolor=”green”> celula 12 <td bgcolor=”red”> celula 13 <tr> <td bgcolor=”blue”> celula 21 <td bgcolor=”white”> celula 22 <td bgcolor=”black”> celula 23 </table> </body></html> Exemplul 7. Exemplul 7.7 <html><head><title>Exemplul 7.Numere intregi intre 1 si 100 urmate de % reprezentind fractiunea din latimea. Obs.6</title></head> <body> <h1 align = “center” > Exemplul 7.7. Valorile acestor atribute pot fi: .6 <html><head><title>Exemplul 7. . atunci se vor folosi dimensiunile precizate . atunci tabelul va fi ajustat la dimensiunile necesare.

valoarea atributului vspace >=0 si reprezinta distanta pe verticala dintre tabel si celelalte elemente ale paginii.</table> </body></html> Zona din jurul unui tabel Distanta dintre tabel si celelalte elemente din pagina Web poate fi stabilita cu ajutorul atributelor hspace si vspace ale etichetei <table>.“top” .“right” Exemplul 7. .“bottom” .“center” .8</h1> <h2>Un tabel cu titlu si cap de tabel</h2> <table border> <caption align=”bottom”> Bilantul din saptamina 1-15 martie <tr><th> Bilant/Zile <th>Luni<th>Marti<th>Miercuri<th>Joi<th>Vineri <tr><th>Intrari<td>1000<td>2000<td>3000<td>4000<td>5000 <tr><th>Iesiri<td>100<td>200<td>300<td>400<td>500 </table> </body></html> Alinierea continutului unei celule Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului align. Observatie .sunt elemente efective numai la Netscape Communicator.” Alinierea pe verticala a continutului unei celule se face cu atributul valign.Caracterul fata de care se face alinierea este definit e atributul char. . Observatii . care poate lua valorile: .“bottom” .Atributul alin poate lua una din valorile: .“left” .8 <html><head><title>Exemplul 7.“baseline” . Titlul unui tabel Se ataseaza cu eticheta <caption> plasat in interiorul etichetei <table>.valoarea tributului hspace >=0 si reprezinta distanta pe orizontala dintre tabel si celelalte elemente.“middle” 22 . care poate lua valorile: .“left” . implicit este “. dar nu in interiorul <tr> sau <td>.8</title></head> <body> <h1 align=”center”> Exemplul 7.“right” .Valoarea implicita este “center” .“char” (alinierea se face fata de un caracter).

9 <html><head><title>Exemplul 7.9</h1> <h2>Un tabel cu continutul celulelor aliniat in diverse moduri</h2> <table border width=”50%” heigh=”50%”> <tr> <td > aici <td> alinierea <td> este <td> centru<td>stinga (implicit) <tr align=”right” valign=”top”> <td> aici <td> alinierea <td> este <td>dreapta<td>sus <tr><td valign=”top”>sus<td align=”left”>stanga <td align=”right”>dreapta <td align=”right” valign=”bottom”>dreapta jos </table> </body></html> Dimensionarea exacta a celulelor unui tabel Dimensiunile unei celule pot fi stabilite exact cu atributele width pentru latime si heigth pentru inaltime. In exemplul urmator se formeaza un tabel cu latimea 80% din latimea paginii . <td width=”50” valign=”top”>Text in coloana a doua.10 <html><head><title>Exemplul 7.numere intregi >=0 reprezentind dimensiunea in pixeli .. 3 coloane de text cu latimea de 25% . Se pot atasa atit etichetei <tr> cit si etichetelor <td> si <th> pentru a stabili alinierea intr-o singura celula. atunci tabelul va fi ajustat la dimesniunile necesare. Exemplul 7.11</h1> <center><table width=”80%”> <tr><td width=”25%” valign=”top”>Text in prima coloana.daca dimensiunile precizate sunt mai mari decit cele necesare afisarii tabelului. Exemplul 7. Valoarea implicita este “middle”. <td width=”50” valign=”top”>Text in coloana a treia. Text in coloana a treia. Exemplul 7. 50% si respectiv 25 % din latimea tabelului.9</title></head> <body> <h1 align=”center”>Exemplul 7. Text in prima coloana.“top”.11</title></head><body> <h1 align=”center”>Exemplul 7.10</title></head><body> <h1 align=”center”>Exemplul 7. vor fi folosite dimensiunile precizate . Text in coloana a doua.10</h1> <h2>Un tabel cu celule de 50 x 100 pixeli</h2> <table border> <tr><td width=”50” height=”100”>cel 11 <tr><td width=”50” height=”100”>cel 12 <tr><td width=”50” heigth=”100”>cel 21 <tr><td width=”50” height=”100”>cel 22 </table></body></html> Obs . Valorile posibile sunt: .procente din latimea respectiv inaltimea tabelului.daca dimensiunile precizate de atribute sunt mai mici decit cele necesare afisarii tabelului.11 <html><head><title>Exemplul 7. </table></body></html> 23 .

c34 <tr><td>c22 <tr><td>c32 <tr><td>c41<td colspan=”3”>c42. .5 . .In acest caz. . Atribute Internet Explorer pentru tabele Urmatoarele atribute functioneaza cu Internet Explorer dar nu cu Netscape Communicator 4. c43. . o celula extinsa este introdusa printr-o singura eticheta <td> sau <th>. O celula se poate extinde peste celulele vecine.background permite stabilirea unei imagini pentru fondul unui tabel. 24 .dupa <td> se pune caracterul &nbsp. Caracterul &nbsp (no break space) este de fapt caracterul spatiu care nu este ignorat de browser. .13</h1> <h2>Atributul nowrap</h2> <table border> <tr><td>celula 11<td>celula 12 <tr><td>celula21<td>celula 22 este foarte lata.Bordercolor permite stabilirea culorii pentru chemarul unui tabel . </table></body></html> Celulele vide ale unui table Pentru a lista chenare pentru celulele vide se pot folosi: .In definitia tabelului. a carui valoare determina numarul de celule care se unifica.sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala.12 <html><head><title>Exemplul 7.12</h1> <table border> <tr><td rowspan=”3”>c11<br>c21<br>c31<td>c12<br>c31<td>c12<td colspan=”2” rowspan=”3”> c13. .extinderea celulei peste celulele din dreapta se face cu colspan.13 <html><head><title>Exemplul 7. c24 <br>c33. celula 22 este foarte lata. in etichetele <td> si <th> vor fi prezente ambele atribute. Primeste ca valoare adresa URL a imaginii folosite pentru fond.Bordercolordark permite stabilirea culorii pentru chenarul 3D akl unui tabel. c44 </table></body></html> Atributul nowrap Exemplul 7.Bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel. Obs. c14 <br>c23. .Tabele de forme oarecare Un tabel este privit ca o retea dreptunghiulara de celule. Exemplul 7. a carui valoare determina numarul celulelor care se unifica.extinderea unei celule peste cele de dedesubt se face cu atributul rowspan.12</title></head><body> <h1 align=”center”>Exemplul 7.dupa <td> se pune <br>. celula 22 este foarte lata.13</title></head><body> <h1 align=”center”>Exemplul 7.

span determina numarul de coloane din grup .“hsides” (horizontal sides) . Atributele acceptate sunt: . Atrobutul rules poate lua una din valorile: .“all”.“void” (implicit) .16</h1> <h2>Atributele frame si rules</h2> <center> 25 .align detemina un tip unic de aliniere pentru coloanele din grup.“groups” . Ex: <colgroup span=”3” width=”100”></colgroup> Observatii .jpg” cellspacing=10 bordercolorlight=”red” bordercolordark=”blue”> <tr bgcolor=”yellow” ><td>celula 11<td>celula 12 <tr bgcolor=”yellow”><td>celula21<td>celula 22 </table></center></body></html> Grupuri de coloane Blocul <colgroup>…</colgroup> permite definirea unui grup de coloane.14 <html><head><title>Exemplul 7. Valorile posibile: .14</h1> <h2>Atribute Internet Explorer</h2> <table border=5 background=”s.“rhs” (right) .16</title></head><body> <h1 align=”center”>Exemplul 7.“below” (urmator) .16 <html><head><title>Exemplul 7. margine).intr-un bloc <colgroup> coloanele pot avea configurari diferite daca se foloseste elementul <col> care are atributele: span – identifica acea coloana din grup pentru care se face configurarea width – latimea coloanei identificata prin span align – alinierea coloanei dentificate prin span.14</title></head><body> <h1 align=”center”>Exemplul 7. Atributele frame si rules Atributul frame al etichetei <table> permite specificarea partilor din chenarul unui tabel care vor fi afisate.width determina o latime unica pentru coloanele din grup . Exemplul 7.“lhs” (left) .“border”(chenar.“none” .“box” (cutie) .“rows” .Exemplul 7.“cols” .“vsides” (vertical sides) .“above”(sus) .

1 <html><head><title>Exemplul 8.jpg”> Text dupa imagine 26 . Adresa URL a unei imagini URL (Uniform Resource Locator) este un standard folosit in indentificarea unica a unei resurse. <td valign=top>Text in a doua coloana.jpg .<tbody><tr>…</tbody> oricite rinduri In tabel exista un singur bloc de tip <thead> si un singur bloc de tipul <tfoot>.jpeg sau .<table width=”400” cellspacing=10 frame=lhs rules=all> <tr> <td valign=top>Text in prima coloana. Tipuri de fisiere pentru imagini Imaginile sunt stocate in fisiere de diverse formate.<thead><tr><td>. Formatele acceptate de browsere sunt: .</thead> un singur rind .gif .XBM (X BitMap) extensia .1</title></head><body> <h1 align=”center”>Exemplul 8.XMP (X PixMap) extensia .777.DIB (Device Independent Bitmap) .png Cele mai des folosite sunt fisierele GIF (8 biti pentru culoare.JPEG sau JPG (Joint Photographic Experts Group) extensia .PNG (Portable Network Graphics) cu extensia .216 culori posibile).PCX (PC Paintbrush).1</h1> <h2> pagina Web cu imagine</h2> <img src=”s. Prima pagina de Web care contine o imagine Se foloseste eticheta <img> cu atributul src (source) care este adresa URL a imaginii.<tfoot><tr><td>…</tfoot> un sigur rind ..0 continutul unui tabel poate fi impartit in subblocuri prin elementele: . 256 culori) si JPG (24 biti pentru culoare.TIFF (Tagged Image File Format) extensia .BMP (BitMap) extensia ..xmp . dar pot exista mai multe subblocuri de tip <tbody>. 16.bmp . In continuare consideram ca imaginile se afla in directorul curent.0 este posibilitatea includerii imaginilor.GIF (Graphics Interchange Format) extensia .tif sau . .tiff . <td valign=top>Text in coloana a treia </table></center></body></html> Subblocurile unui tabel In HTML 4. Lectia 8 Imagini O facilitate extraordinara a limbajului HTML 4. Exemplul 8.xbm .

2</title></head><body> <h1 align=”center”>Exemplul 8.left . browserul rezerva spatiu in pagina si continua afisarea celorlalte elemente ale acesteia. dar pot fi modificate cu atributele width si height al etichetei img. Valorile acestui atribut sunt numere intregi >0.Directorul radacina se indica prin . In paralel are loc incarcarea paginii.4 <html><head><title>Exemplul 8. Chenarul unei imagini Pentru a adauga un chenar in jurul unei imagini.2</h1> <h2>imagine cu chenar</h2> <img src=”C:\My Documents\s.jpg” border=”5”> Text dupa imagine </body></html> Dimensionarea unei imagini Dimensiunile imaginii originale sunt respectate la afisarea ei.procente din latimea.jpg” border=”5” aling=”middle”> Jos:<img src=”C:\My Documents\s.3 <html><head><title>Exemplul 8.3</h1> <h2>imagine 200 pixeli x 20% </h2> <img src=”C:\My Documents\s. respectiv inaltimea blocului in care se afla imaginea. Valorile posibile sunt . Exemplul 8.right ..4</title></head><body> <h1 align=”center”>Exemplul 8.jpg” border=”5” aling=”top”> La mijloc:<img src=”C:\My Documents\s.2 <html><head><title>Exemplul 8. se foloseste atributul border al etichetei img.numere intregi >0 reprezentind pixeli . Exemplul 8.bottom sau baseline Exemplul 8.\.top . care poate lua una din urmatoarele valori: .4</h1> <h2>aliniere imagine pe verticala</h2> Sus:<img src=”C:\My Documents\s.jpg” border=”5” aling=”bottom”> Text dupa imagini</body></html> 27 .middle . atunci adresarea se face relativ la directorul curent.</body></html> Adresarea relativa In cazul in care paginile HTML se afla intr-o structura de directoare.jpg” border=”5” width=”200” height=”20%”> Text dupa imagine </body></html> Precizarea dimensiunii spatiului ocupat de o imagine duce la cresterea vitezei de incarcare a paginii.3</title></head><body> <h1 align=”center”>Exemplul 8. Alinierea unei imagini in pagina Web Se face cu atrubutul align din eticheta img.

6 <html><head><title>Exemplul 8. se foloseste atributul fixed al etichetei <body> (numai la Internet Explorer).5 <html><head><title>Exemplul 8. Imaginea se multiplica pina acopera intregul ecran. Text inainte de imagine. Text inainte de imagine.atributul alt admite ca valoare un text ce se va afisa in locul imaginii .7</h1> <h2>Pagina Web cu imagine de fond</h2> Text peste imagini<br> Text peste imagini Text peste imagini Text peste imagini Text peste imagini Text peste imagini Text peste imagini<br> Text peste imagini Text peste imagini<br> Text peste imagini Text peste imagini Text peste imagini </body></html> Pentru ca imaginea de fond sa ramina fixa.8</h1> <h2>Pagina Web cu imagine de fond fixa</h2> Text peste imagini<br> Text peste imagini Text peste imagini Text peste imagini Text peste imagini Text peste imagini Text peste imagini<br> Text peste imagini Text peste imagini<br> Text peste imagini Text peste imagini Text peste imagini 28 . Text dupa imagine. Exemplul 8.jpg” border=”5” aling=”top” hspace=”50” vspace=”50”> Text dupa imagine.5</title></head><body> <h1 align=”center”>Exemplul 8.5</h1> <h2>imagine inconjurata de text</h2> Text inainte de imagine.7 <html><head><title>Exemplul 8. Text dupa imagine. Text inainte de imagine.8 <html><head><title>Exemplul 8.6</title></head><body> <h1 align=”center”>Exemplul 8. Exemplul 8. Text dupa imagine. chiar daca avem o legatura proasta.8</title></head> <body background=”a.Alinierea textului in jurul unei imagini Atributele hspace si vspace specifica distanta in pixeli pe orizontala si verticala in eticheta <img> intre imagine si restul elementelor din pagina.jpg”> <h1 align=”center”>Exemplul 8.6</h1> <h2>imagine de joasa rezolutie sau text inlocuitor</h2> <img src=”C:\My Documents\s.jpg” border=”5” aling=”top” lowsrc=”s1.atroibutul lowsrc admite ca valore adresa URL a unei imagini de joasa rezolutie care poate fi incarcata imediat. Text inainte de imagine.7</title></head><body background=”a. </body></html> Elemente inlocuitoare pentru imagini Cind se lucreaza cu imagini de inalta rezolutie timpul de incarcare este mare si pentru a da utilizatorului o informatie despre imagine se folosesc doua atribute ale etichetei <img> : .<br> <img src=”C:\My Documents\s. avind ca valoare adresaa URL a imaginii.jpg” alt=”text inlocuitor”> </body></html> Imagini pentru fondul unei pagini Web Se foloseste atributul background al etichetei <body>. Exemplul 8. Exemplul 8.jpg” bgproperties=”fixed”> <h1 align=”center”>Exemplul 8.

jpg”> <td><img src=”a4.11</h1> <h2>imagini folosite ca legaturi</h2> Text inainte de imagine <a href=”a1. Acestea se introduc dupa <th> sau <td>.</body></html> Un tabel de imagini Celulele unui tabel pot contine imagini. Efectuind click pe imagine.jpg”> <tr><td>Text 1 preview <td> <table border> <tr><td><img src=”a2.10 <html><head><title>Exemplul 8.11 <html><head><title>Exemplul 8. Exemplul 8.9</title></head><body> <h1 align=”center”>Exemplul 8.jpg”> <tr><td>Text 2 preview </table> </body></html> Imagini folosite ca legaturi O legatura (link) introduce in pagina Web o zona activa. in pagina Web se face numai legatura spre imagine. Exemplul 8.gif”> </table> </body></html> Un tabel cu imagini si texte Exemplul 8. se va incarca o alta pagina Web.10</title></head> <body> <h1 align=”center”>Exemplul 8.jpg”> <td><img src=”a1.asp”> <img src=”a1.9</h1> <h2>Tabel cu imagini</h2> <table border> <tr><td><img src=”a. lasind utilizatorului decizia daca sa incarce imaginea sau nu.11</title></head> <body> <h1 align=”center”>Exemplul 8.9 <html><head><title>Exemplul 8.jpg”> <tr><td><img src=”a3.10</h1> <h2>Tabel cu imagini si texte</h2> <table border> <tr><td><table border> <tr><td><img src=”a1.jpg”></a> text dupa imagine </body></html> Imagini in fisiere externe Daca incarcarea unei imagini este lenta. 29 .

Imagini transparente (transparent images) sunt imagini fara culoarede fond. astfel ca ceea ce se afla in spatele imaginii este partial vizibil 3. respectiv dezactivarea incarcarii imaginii intr-o pagina Web . Imagini intretesute (interlaced images) sunt cele care apar integral in pagina Web. Simboluri speciale pentru elementele de liste neordonate. Imagini animate (animated images) sunt fisiere speciale continind osuccesiune de imagini afisate periodic Utilizari speciale ale imaginilor Efecte deosebite: 1. Un element pentru metainformatii Informatiile se introduc cu elementul special <meta> plasat in blocul <head>… </head>.13 <html><head><title>Exemplul 8. Facilitati ale formatului GIF 1.12</h1> <h2>imagini in fisiere externe</h2> text inainte de link <a href=”a1. dar stocata intr-un fisier cu o rezolutie foarte buna. Lectia 9 Documentarea unei pagini Web Metainformatiile sunt informatii despre “modul de organizare a informatiilor” .jpg”><img src=”a2. dar pe nasutra ce sunt incarcate. rezolutia lor creste 2.Acest element accepta patru atribute : 30 .jpg”>Efectuati click pentru a vedea imaginea</a> </body></html> Un truc des folosit este acela de a folosi o imagine de joasa rezolutie pe post de legatura cu aceeasi imagine.suppress admite valorile “true” si “false” pentru activarea.jpg”></a> text dupa imagine </body></html> Alte atribute pentru <img> Urmatoarele atribute sunt mai putin folosite: .12 <html><head><title>Exemplul 8.Exemplul 8.longdesc este o adresa URL catre o pagina Web care ofera detalii despre imagine.13</h1> <h2>imagini cu diferite reezolutii</h2> text inainte de imagine <a href=”a1. Exemplul 8. Servere specializate ofera motoare de cautare puternice care permit regasirea informatiilor (adresele unde aceste informatii sunt stocate).12</title></head> <body> <h1 align=”center”>Exemplul 8. Linii orizontale formate cu ajutorul imaginilor eventual animate 2.13</title></head> <body> <h1 align=”center”>Exemplul 8.

lang. celelalte atribute avind caracter optional.content configurat la un sir ce contine o descriere generala a paginii Cuvinte cheie pentru o pagina Web Cuvintele cheie sunt folosite pentru a regasi informatii prin intemediul unui motor de cautare.scheme la care se poate adauga atributul universal . Exemplul 9.content .atributul content va primi ca valoare o lista de cuvinte cheie separate prin virgula. Selectarea acstor cuvinte cheie trebuie facuta cu atentie pentru ca informatia respectiva sa poate fi localizata.1 <html><head><title>Exemplul 9.atributul name va primi valoarea “keywords” . Pentru a preciza cuvintele cheie: . Descrierea unei pagini Web Pentru a face cunoscut motoarelor de cautare aflate in Internet scopul in care a fost creata o pagina Web. Exemplul 9.2 Home page</title> <meta name=”keywords” content=”prezentarea”></head> <body> <h1> Bine ati venit !</h1> </body></html> Drepturile de autor Atributul name paote fi utilizat pentru a furniza informatii legate de autorul paginii si de CopyRight.com”></head> <body> <h1> Bine ati venit !</h1> </body></html> 31 .name .3 <html><head><title>Exemplul 9. Primele trei atribute se folosesc in perechi name/content sau http-equiv/content..3 Home page</title> <meta name=”author” content=”Radu”> <meta name=”copyright“ content=”radu@yahoo.1 Home page</title> <meta name=”description” content=”Acesta este prezentarea paginii Web”></head> <body> <h1> Bine ati venit !</h1> </body></html> Exemplul 9. putem insera un element <Meta> cu atributele: .name configurat la valoarea “description” .2 <html><head><title>Exemplul 9.http – equiv .

6 Home page</title> <meta http-equiv=”content-type” content=”text/html.5 <html><head><title>Exemplul 9. Exemplul 9. charset=ISO-8859-5”></head> <body> <h1> Bine ati venit !</h1> </body></html> Limba utilizata Se foloseste atributul lang.5 Home page</title> <meta http-equiv=”from:” content=”radu@yahoo.com”></head> <body> <h1> Bine ati venit !</h1> </body></html> Tipul fisierului Se prezinta informatii despre tipul fisierului si setul de caractere utilizate cu httpequiv: Exemplul 9. unde valoarea parametrului este o adresa email. 25 fev 2001 12:00:00 GMT”> <meta http-equiv=”expires” content=”Mon 26 March 2001 12:00:00 GMT”> </head> <body> <h1> Bine ati venit !</h1> </body></html> Persoana de contact Pentru a putea furniza dare despre persoana care administreaza site-ul.4 <html><head><title>Exemplul 9. In acest fel se obtin facilitati dinamice pentru un site Web. se foloseste http-equiv .6 <html><head><title>Exemplul 9. Valoarea atributului content este o data calendaristica si o ora.Data crearii si data reactualizarii paginii Web Pentru a transmite serverelor specializate in regasirea informatiilor din Internet data crearii si data reactualizarii unei pagini Web.7 <html><head><title>Exemplul 9. se utilizeaza atributul http-equiv. Exemplul 9.com”> <meta http-equiv=”reply-to” content=”radu@yahoo. urmata eventual de numele persoanei. Exemplul 9.4 Home page</title> <meta http-equiv=”creation-date” content=”Sun.7 Home page</title> <meta http-equiv=”keywords” lang=”en-us” content=”page”> <meta http-equiv=”keywords” lang=”ro” contens=”pagina”> </head> <body> <h1> Bine ati venit !</h1> </body></html> Reactualizarea paginii curente din browser Atributul http-equiv permite reincarcarea automata in browser a aceleiasi pagini. Se foloseste valoarea 32 .

e. Legaturile (link) reprezinta partea cea mai importanta a unei pagini Web. c. Cind mouse-ul se afla deasupra unei zone active.“refresh” iar in content numarul de secunde dupa care dorim sa se reactualizeze pagina. pentru care trebuie specificat URL. Lectia 10 Legaturi Interactivitatea unei pagini Web. care permite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriund in lume.8 Home page</title> <meta http-equiv=”refresh” content=”9. Serverul ce stocheaza noua resursa primeste cererea si expediaza spre utilizator resursa solicitata. In pagina HTML se insereaza legaturi prin intermediul unei etichete speciale <a> si a atributul href care ia valoarea URL a resursei solicitate. d. Exemplul 9. Ele transforma un text in hipertext.8 Home page</title> <meta http-equiv=”refresh” content=”5”> </head> <body> <h1> Aceasta pagina se reincarca dupa 5 secunde !</h1> </body></html> Se poate ca dupa un anumit numar de secunde o pagina sa fie inlocuita cu alta. Pagina veche este inlocuita de pagina noua in acelasi browser sau este lansata in executie o noua instanta a browserului. Atributul href precizeaza numele fisierului html afpat in acelasi director care va inlocui vechea pagina. care contine noua pagina. 33 . Browserul trimite catre serverul care stocheaza noua resursa o cerere de a-i expedia pagina rerspectiva. f. In pagina Web apar legaturile definite la punctul a ca zone active.asp !</h1> </body></html> Comentarii Sunt ignorate de browser si pot fi plasate oriunde in pagina. b. cursorul ia forma unei miini. Se scriu cu sintaxa: <!-urmeaza comentariu->.9 <html><head><title>Exemplul 9. Legaturile sunt zone active intr-o pagina Web (sunt sensibile la apasarea butonului stinga al mouse-ului). O legatura catre o pagina aflata in acelasi director Se formeaza cu eticheta <a> (anchor). url=’index. a. Zona activa este formata dintextul cuprins intre etichetele <a> si </a>.asp’”> </head> <body> <h1> Aceasta pagina se schimba dupa 9 secunde cu pagina index. Exemplul 9. Calculatorul client primeste resursa solicitata si o incarca in browser.8 <html><head><title>Exemplul 9.

Exemplul 10.netscape. Exemplul 10..html”>Link catre pagina 1</a> </body></html> O legatura catrea o pagina aflata pe acelasi disc local Daca pagina referita de legatura se afla pe acelasi disc. <html><head><title>p3</title></head> <body> <h1> pagina 3</h1> <hr> <a href=”. atunci se foloseste adresarea relativa.com”>Netscape</a> </body></html> Utilizarea unei pagini ca zona activa Zona activa a unei legaturi este definitta cu <a> de obicei este un text care apare subliniat si de culoare albastra./my documents/p4.4. Rolul de zona activa poate fi jucat si de o imagine daca inserarea ei are loc intre etichetle <a> si </a>..html”>Link catre pagina 2</a> </body></html> <html><head><title>p4</title></head> <body> <h1> pagina 4</h1> <hr> <a href=”.Exemplul 10. cursorul ia forma unei miini.html”>Link catre pagina 1</a> </body></html> O legatura catre un site particular Exemplul 10./my documents/p3. <html><head><title>Exemplul 4</title></head><body> <h1> Imagine ca zona activa</h1><hr> 34 .html”>Link catre pagina 2</a> </body></html> <html><head><title>p2</title></head> <body> <h1> pagina 2</h1> <hr> <a href=”p2. In momentul cind se afla deauspra acestei zone. dar intr-un alt director.3</title></head> <body> <h1> Link spre netscape</h1> <hr> <a href=”http://www.2. <html><head><title>Exemplul 10.3. <html><head><title>p1</title></head> <body> <h1> pagina 1</h1> <hr> <a href=”p2.1.

href are valoarea de forma “nume_fisier. Acest lucru se realizeaza cu atributul target al etichetei <a> care primeste un nume pentru fereastra in care se va incarca noua pagina.html#nume_ancora”. Pentru a realiza o legatura pe aceeasi pagina. inseamna ca paginile referite de acestea se vor incarca in aceeasi fereastra. <html><head><title>Exemplul 10_7</title></head> <body> <h1>Pagina noua in fereastra noua</h1><hr> <a href=”p2.6.imaginea folosita ca zona activa este inconjurata de un chenar de aceesi culoare cu celellate legatrui.html#ancora1”>Link catre ancora 1</a><br> <a href=”e10_5.8. <html><head><title>Exemplul 10_8</title></head> <body> <h1>Pagini noi in ferestre noi</h1><hr> 35 .html”target=”fereastra”>Link catre ancora 1</a><br> </body></html> Daca mai multe legaturi folosesc aceeasi valoare pentru atributul target.pentru a reveni in pagina Web anterioara.7. <html><head><title>Ancore definite in alte documente</title></head> <body> <h1> Ancore definite in alte documente</h1><hr> <a href=”e10_5. atunci trebuie lansata o alta instanta a browserului care va contine noua pagina. Ancore Pentru a identifica ancora se foloseste atributul name al etichetei <a> .5. <html><head><title>Ancore definite in acelasi document</title></head> <body> <h1> Ancore definite in acelasi document</h1><hr> <a href=”#ancora1”>Link catre ancora 1</a><br> <a href=”#ancora2”>Link cate ancora 2</a><br> 10<br>11<br>12<br>13<br>14<br> <a name=”ancora1”>Prima ancora<br></a> 100<br>110<br>120<br>130<br> <a name=”ancora2”>A doua ancora<br></a> 140<br>150<br>160<br> </body></html> Exemplul 10. Pentru a introduce o leatura catre o ancora definita in alt document. Exemplul 10.<a href=”p.gif”></a> </body></html> Observatii . se apasa butonul back din bara de instrumente a browserului . Exemplul 10.html”><img src=”p1.html#ancora2”>Link cate ancora 2</a><br> </body></html> Instante multiple pentru un browser Daca vrem ca pagina solicitata sa fie in alta fereastra decit cea curenta. Exemplul 10. se foloseste simbolul #. iar daca borver=0 atunci chenarul dispare.

o culoare pentru legaturile active. Alegerea culorilor pentru legaturi Trei culori se folosesc pentru legaturi: .html”target=”fereastra2”>Incarca pagina 2 in fereastra 1</a><br> <a href=”p3.10</title></head><body> <h1>Link catre un fisier local</h1><hr> <a href=<”file://c:html/p2.html”>Link catre pagina 2</a></br> <a href=”p3.9 <html><head><title>Exemplul 10.html”target=”fereastra1”>Incarca pagina 4 in fereastra 3</a><br> </body></html> Atributul target accepta urmatoarele valori cu specificatie speciala: .10 <html><head><title>Exemplul 10.html”target=”fereastra1”>Incarca pagina 3 in fereastra 2</a><br> <a href=”p4.html”>Link catre pagina 3</a><br> <a href=”p4. Se foloseste adresa URL serviciul Internet mailto: urmat de o adresa e-mail valida.9</title></head> <body link=”red” vlink=”yellow” alink=”blue”> <h1> setarea culorilor pentru legaturi</h1> <ul> In aceasta pagina culorile sunt setate astfel: <li> rosu pentru lgaaturile nevizitate <li> galben pentru legaturile active <li> albastru pentru legaturile active </ul> <a href=”p2.vlink pentru legaturile vizitate .“_parent” incarcare in fereastra parinte .html”>Link catre pagina 4</a><br> </body></html> O legatura catre un fisier HTML local Pentru a accesa un program HTML local (aflat pe calculatorul client pe care este lansat browser-ul) se utilizeaza serviciul file:// (in loc de http://) impreuna cu adresa absoluta (calea completa ce contine fisierul si numele acestuia). Exemplul 10. Exemplul 10.“_blank” incarcare intr-o fereastra noua anonima .“_top” incarcare in fereastra top a cadrelor curente.“_self” incarcare in aceeasi fereastra .o culoare pentru legaturile vizitate .alink pentru legaturile active. 36 . .<a href=”p2.link pentru legautirle nevizitate .o culoare pentru legaturile nevizitate . Aceste culori se stabilesc cu trei atribute ale etichetei <body>.html”> Link catre pagina 2 aflata pe discul local </a></br></body></html> O legatura catre un server de fisiere Intr-o pagia Web se pot afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesajelor.

Se dau informatii suplimentare asupra semnificatiei legaturii.class se face astfel: <a href=”me.ro”>Mesaje</a><br> </body></html> Legaturi catre fisiere oarecare O pagina de Web poate contine legaturi catre orice tipuri de fisiere aflate pe orice servere din Internet. <eticheta id=”id1”>…</eticheta> <a href=”#ide1”>Link catre elementul “id1”</a> Adresa URL de baza Elementul <base> permita stabilirea unui director in serverul Web fata de care se vor exprima adresele surselor referite prin legaturile aflate in pagina Web.m. Elementul <base> se plaseaza in blocul <head> …</head> si accepta atributul href avind ca valoare adresa URL a directorului de baza fata de care se va face adresarea relativa.12</title></head><body> <h1> Legatura definita prin atributul Id</h1><hr> <a href=”#id1”>Link catre primul capitol</a> <a href=”#id2”>Link catre al doilea capitol</a> Text<br> Text<br> <h2 id=”id1”>Primul capitol</h2>Text primul capitol<br> <h2 id=”id2”>Al doilea capitol</h2>Al doilea capitol<br> </body></html> Exemplul 10. primeste ca valoare un nume care identifica in mod unic un element.14</title></head><body> <h1>Atributul title</h1><hr> <a href=”capitolul1.13 <html><head><title>Exemplul 10. Exemplul 10.11</title></head><body> <h1>Expedierea de mesaje</h1><hr> Mesajele se trimit la: <a href=”mailto:m@k.ro/user1”> </head><body> <h1>URL de baza</h1><hr> <a href=”imagini/img7.ro</a> </body></html> Atributul title Apartine etichetei <a> si permite aparitia unei ferestre in pagina Web cind mouse-ul se misca pe o legatura. Exemplul 10.html title=”Capitolul 1”>Link spre primul capitol</a> 37 .11 <html><head><title>Exemplul 10.class</a><br> </body></html> Ancore definite prin atributul id Id este un atribut universal.13</title> <base href=<”www.gif”>Link spre imagine aflata in m. Legatura catrea fisierul me. afisind valoarea atributului.Exemplul 10.14 <html><head><title>Exemplul 10.class”>Link spre fisierul me.12 <html><head><title>Exemplul 10.

avi”>Legatura spre videoclip</a> Sunetul de fond pentru o pagina Web Se face cu eticheta <bgsound>. Atributul loop permite precizarea numarului de repetitii care sunt executate pina cind sunetul de font inceteaza.MPEG Audiocu extensia .avi.“-1” sau “infinite” pentru sunetul de fond care se repeta de un numar infinit de ori.QuickTime cu extensia .1.aif .aiff sau . .MIDI cu extensia .</body></html> Lectia 11 Sunete si videoclipuri Formate pentru fisiere de sunet Formatele recunscute de paginile de Web sunt: .WAVW/WAV cu extensia .mpeg2 sau . .mov .midi.mpg . Legaturi catre fisiere de sunet Este o legatura clasia spre orice tip de fisiere. Exemplul 11.wav .un numar intreg pozitiv care precizeaza de cite ori se repeta sunetul.mp2 .start precizeaza momentul in care incepe redarea videoclipului cu valorile: 38 . Valori posibile: .1</title></head><body> <h1>Pagina Web cu sunet de fond</h1><hr> <bgsound src=”a.wav” loop=”-1”> </body></html> Videolipuri in-line Browserele acepta o extensia a etichetei <img> pentru inserarea in-line a videoclipurilor. <a href=”spacemusic.dynsrc (dynamic source) ia ca valoare adresa fisierului care contine videoclipul .loop determina numarul de repetitii ale videoclipului cu valorile posibile: “-1” sau “infinite” un numar intreg pozitiv care indica de cite ori se va repeta videoclipul . Atributele img pentru videoclipuri: .mid sau .wav”>Link spre fisier sunet</a> Formate spre fisiere de videoclipuri Formatele de videoclipuri sunt urmatoarele: . Legaturi catre fisiere cu videoclipuri <a href=”t12334.au .mpeg. <html><head><title>Exemplul 11.AVI cu extensia . fisierul de sunet fiind specificat cu src.MPEG cu extensiile .AIFF/AIFC cu extensia .AU cu extensia .

Un atribut obligatoriu este name.loopdelay permite stabilirea intervalului de timp (milisecunde) intre doua reluari succesive ale videoclipului Cind nu se afla in derulare.controls .mov” loop=”2” start=”mouseover” src=”a1. fiecare introdusa cu eticheta <area> care are trei atribute: .coords determina coordonatele zonei . delimitat de etichetele <map> si </map> .un text precizat de atributul alt al etichetei <img>. O harta este formata din mai multe zone.o imagine precizata de atributul src al etichetei <img> .gif” alt=”QuickTime” controls> </body></html> Lectia 12 Harti de imagini Folosirea unei imagini ca harta de imagini Este posibil ca diferite zone ale unei imagini sa fie definite ca legaturi spre diverse pagini Web (image maps).src. care primeste ca valoare adresa URL a imaginii folosite ca harta de imagini . Unitatea de masira este pixelul. Definirea hartii se face intr-un bloc special. . care primeste ca valoare numele hartii. Coorodnatele zonelor active Se utilizeaza un sistem de coordonate rectangular avind originea in coltul din stinga sus al imaginii utilizate ca harta. videoclipul este prezent in pagina .shape determina tipul de zona activa si poate lua una din urmatoarele valori: rect = dreptunghi circle = cerc poly = poligon default = altele.cu prima imagine .fileopen (la incarcarea paginii) mouseover (cind cursorulmouse-ulu se misca peste imaginea ce reprezinta videoclipul) .atributul usemap a carui valoare este de forma “#harta1” unde harta1 este numele hartii definite la punctul 1 2.2 <html><head><title>Exemplu</title></head><body> <h1>Video clip</h1><hr> Videoclip rulat de doua ori <img dynsrc=”Sample.href ia ca valoare adresa paginii indicate de legatura. Exemplul 11. 39 . Etape: 1. Definirea unei imagini ca “harta de imagini” cu <img> si atributele: . Eticheta <area> poate avea atributul target care ia ca valoare numele instantei browserului in care va fi afisata pagina catre care indica legatura zonei respective.

html” alt=”pagina 3” title=”Link catre pagina 3”> <area shape=”poly” coords=”100.200” href=”p2.html”> </map> </body></html> Alte atribute ale elementului <area> Exista doua atribute: .x2.100.200. Exemplul 12.gif” usermap=”#harta1” width=”600” height=”500”> <map name=”harta1”> <area shape=”rect” cords=”100.y1.html”> <area shape=”circle” coords=”400.y1 determina coltul din stinga sus.title permite inserarea unei mici ferestre unde este descrisa legatura atita timp cit mouse-ul se afla deasupra legaturii Exemplul 12.r” unde x.200.y este centrul cerului. Cerc: “x.200.3 <html><head><title>Exemplu</title></head><body> <h1> o harta de imagini</h1> <img src=””harta de imagini.400.200. <html><head><title>Exemplu</title></head><body> <h1>o harta de imagini</h1> <img src=”harta de imagini.x2.y2”unde x1.200” href=”p2.100” href=”p3.html” alt=”pagina 4” title=”Link catre pagina 4”> <area shape=”default” href=”p1.x2.y2 determina coltul din dreapta jos. r este raza.200.300.html”> <area shape=”poly” coords=”100.y2.300 href=” p4.400” href=” p4.y. Poligon: “x1.400.100” href=”p3.y1.100.…” Utilizarea unei harti de imagini Avem un cerc.html” alt=”pagina 2” title=”Link catre pagina 2”> <area shape=”circle” coords=”400.x3.100.300.y3.1.2 <html><head><title>Exemplu</title></head><body> <h1> o harta de imagini</h1> <img src=””harta de imagini.html”> </map> </body></html> 40 .100” nohref> <area shape=”circle” coords=”400.alt care permite inserarea unei scurte descrieri a legaturii catre care indica zona activa respectiva (alt=”descrierea legaturii”) .200.400” href=” p4.Dreptunghi: Coords=”x1.gif” usemap=”#harta1” width=”600” height=”500”> <map name=”harta1”> <area shape=”rect cords=”100.200.400.html” alt=”pagina 4” title=”Link catre pagina 4”> </map> </body></html> Suprapunerea zonelor active Are prioritate zona care este definita in harta de imagini <map>. Exemplul 12.100.gif” usemap=”#harta1” width=”600” height=”500”> <map name=”harta1”> <area shape=”circle” coords=”400.400. un patrat si un poligon.300.300.200.

Altribute esentiale ale elementului <form> 1. <html><head><title>Exemplu</title></heap><body> <h1>Formular expediat prin e-mail</h1><hr> Formular 41 . Utilizatorul completeaza formularul si il expediaza pe server 2. <form action=”http:\\www. Nu are loc prelucrarea datelor din formular. action care primeste ca valoare mailto concatenat cu o adresa valida de email catre care se va expedia formularul. efectueaza o prelucrare a lor si expediaza catre utilizator un raspuns. Datele sunt adaugate conform sintaxei: nume_cimo=valoare_camp. cimpuri de editare.“post” : datele sunt expediate separat. Intre diferite seturi de date este introdus un &. Atributul action precizeaza ce se va intimple cu datele formularului o data ce acestea ajung la destinatie.1 Expedierea unui formular vid prin e-mail. Exemplu: http://www.edu. Intre adresa URL si date este inserat un ?. .edu. Un formular este descris de etichetele <form>…</form> care nu pot fi imbricate. 2. Expedierea unui formular vid prin posta electronica Pentru ca un formular sa fie functional trebuie precizat ce se va intimpla cu el dpa completare si expediere. Se foloseste un atribut al etichetei <form> .ro\cgi-bin\script. casete de selectie. Formular = un ansamblude zone active alcatuit dinbutoane de apasat. citirea si interpretarea lor fiind in sarcina destinatarului.“ger” valoare implicita. Datele formularului se gasesc pe dispozitivul de intrare al serverului de destinatie. datele din formular sunt adaugate la adresa URL precizata de atributul action. O aplicatie dedicata pe server analizeaza formularul completat si stocheaza datele intr-o baza de date 3. Valoarea atributul action este adresa URL a unui script aflat pe un server WWW care primeste datele formularului.cgi?nume1=valoare1&nume2=valoare2.ro/cgi-bin/nume_script. datele expediate se vor regasi pe serverul destinatie in variabila de meniu QUERY_STRING. nu sunt permise cantitati mari de date (maxim 1k). Daca este cazul serverul expediaza un raspuns. Atributul method precizeaza metod utilizata de browser pentru expedierea datelor formularului. Valoarea atributului action poate fi o adresa valida de email. iar numarul de octeti transmisi se afla in variabila de mediu CONTENT_LENGTH.Lectia 13 Formulare Interactivitatea Posibilitatea unui utilizator de a comunica cu un server pentru a obtine o informatie. Sunt posibile valorile: . Etape: 1. Exemplul 13. Sunt permise cantitati mari de date (MB).cgi”> Scripturile pot fi scrise in Perl. C sau UNIX. caz in care datele sunt trimise la adresa specificata. Cel mai simplu mod este expedierea prin e-mail.POST.

Butonul Reset Daca un element de tip <input> are atributul type configyrat la valoarea reset atunci in formular se introduce un buton pe care scrie “Reset” (numele butonului se poate schimba). Un formular cu un cimp de editare si un buton de expediere <html><head><title>Exemplu</title></head><body> <h1>Un formular cu cimp de editare si buton de expediere</h1><hr> <form action=mailto:xxx method=”post”> Nume:<input type=”text” name=”numele” value=”Numele si prenumele”><br> <input type =”submit” value=”expediaza”></form></body></html> Pentru elementul <input> de tipul cimp de editare pot fi utile alte atribute: .formularele cu un singur cimp (text) nu au nevoie de butoane de expediere.ro method=”post”> </form>>/body></html> Un formular cu un cimp de editare si un buton de expediere Multe elemente ale unui formular se scriu cu eticheta <input> cu atributul type care ia valoarea text pentru cimpuri de editare.<form action=mailto:m@k.maxlength specifica numarul maxim de caractere pecare le poate primi un cimp de editare Exemplul 13. Alte atribute importante: .daca atributul type lipseste. Acest element poate primi un nume prin atributul name. Exemplul 13. Un buton de expediere al unui formular se introduce cu <input>.3.name permite atasarea unui nume fiecarui element al formularului. in care type este configurat la valoarea submit . atunci cimpul respectiv este considerat implicit ca fiind de tip “text”. Un formular cu un cimp de editare particularizat <html><head><title>Exemplu</title></head><body> <h1>Un formular cu un cimp de editare</h1><hr> Latimea cimpului de editare este de 10 caractere<br> Numarul maxim de caractere admise este de 20<br> <form method=”post” action=mailto:xxx > <input type=”text” name=”numele” value=”Numele si prenumele” size=10 maxlebgth=”20”><br> <input type=”submit”></form></body></html> Observatii: . daca aceasta valoare a fost stabilita. Exemplul 13. . . Se transmit spre server perechi de forma nume=valoare. .value permite atribuirea unei valori initiale unui element al formularului. care cuprind numele elementului si valoare lui. Datele se trimit prin apasarea tastei ENTER.size specifica latimea cimpului de editare . Pe buton apare “Submit Query” sau valoarea atributului value.2. valoare ce poate fi ulterior modificata.intr-un formulat pot exista mai multe butoane de expediere avind atributul name configurat la valori diferite.4 Un formular cu un buton Reset <html><head><title>Exemplu</title></head><body> 42 .

43 .5.6 Un formular cu butoane radio <html><head><title>Exemplul</title></head><body> <h1>un formular cu butoane radio</h1><hr> <form method=”post” action=mailto:mm@m. Un formular de tip password <html><head><title>Exemplu</title></head><body> <h1>Un formular cu un cimp password</h1><hr> <form method=”post” action=mailto:xxx> Nume:<input type=”text” name=”nume” value=”Nume” ><br> Prenume: <input type=”text” name=”prenume”><br> Password:<input type=”password” name=”parola”><br> <input type=”reset” value=”sterge”><br> <input type=”submit” value=”expediaza”> </form></body></html> La expedierea formularului. Observatii . Pentru o aceeasi familie de butoane radio poate fi folosit cel mult un atribut checked.ro> Alegeti :<br> Mr<input type=”radio” name=”adresare” value=”Mr”> Mrs<input type=”radio” name=”adresare” value=”Mrs”> Ms<input type=”radio” name=”adresare” value=”Ms”><br> <input type=”reset” > <input type=”submit”> </form></body></html> La expedierea formularului se va trimite una din perechile “adresare=Mr”.atributul checked (fara alte valori) premite selectia prestabilita a unui buton dintr-o familie de butoane. Exemplul 13. Exemplul 13.ro> 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> Cimp de editare de tip “password” Daca se utilizeaza eticheta <input> avind atributul type configurat la valoarea password.<h1> Un formular cu un buton reset</h1><hr> <form method=”post” action=mailto@xxx. ci *.toate butoanele ca apartin unei familii de butoane radio au acelasi nume stabilit prin atributul name. Nu se afiseaza toate caracterele in clar. valoarea tastata in password se trece in clar.atributul value primeste ca valoare un text care va fi expediat serverului impreuna cu numele familiei de butoane . “adresare=Mrs”. La exemplul anterior se va primi mesajul “name=Ionescu+Valentin&parola=mishu” Butoane radio Permit alegerea unei singure variante dintre mai multe posibile. “adresare=”Ms”. .

7.name permite atasarea unui nume.8.value (valoare textului ce va fi afisat pe buton). Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea “checkbox”.Casete de validare O caseta de validare (checkbox) permite selectarea sau deselectarea unei optiuni. .fiecare caseta poate avea configurat atributul value cu valoarea care va fi inclusa in perechea “name=value” ce va fi expediata odata cu formularul. atunci se va expedia perechea “nume=on”.fiecare caseta poate avea valoarea prestabilita “selectat” definita prin atributul checked . Valoarea lui este “multipart/form-data”.ro> Alegeti fisierul:<br> <input type=”file” name=”fisier” value=”c:\html\p2. . Exemplul 13. Un formular cu caseta de fisiere <html><head><title>Exemplul</title></head><body> <h1>un formular cu caseta file</h1><hr> <form method=”post” action=mailto:mm@m. care apare in perechea “name=value” . Un formular cu casete checkbox <html><head><title>Exemplul</title></head><body> <h1>un formular cu casete checkbox</h1><hr> <form method=”post” action=mailto:mm@m. Casetele care sunt deselectate nu trimit catre server perechi “name=value”. 44 .name (numele butonului). Inserarea unui buton intr-un formular se face <input> cu atributul type cofigurat la button cu atributele: . Observatii . Daca acest atribut lipseste.Enctype precizeaza metoda utilizata la criptarea fisierului de expediat.html” enctype=”multipart/formdata”><br> <input type=”reset” > <input type=”submit”> </form></body></html> Butoane HTML nu poatetrata evenimentul de apasare a unui buton (JavaScript). Alte atribute: .value primeste adrsa URL a fisierului care va fi expediat o data cu formularul.ro> 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 Se insereaza un element input in formular cu atributul type avind valoarea file.fiecare caseta poate avea un nume definit prin atributul name. Exemplul 13. .

ro> <input type=”hidden” name=”secret” value=”10000USD”> </form></body></html> Liste de selectie O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o lista finita. In mod prestabilit. pentru fiecare element selectat se insereaza cite o pereche “name-value” unde name este numele listei.size precizeaza (n∈N. celelalte devenind vizibile prin actionarea barei de derulare.La expedierea formularului se citeste “nume_cimp_hidden=valoare” .n>0) cite elemente din lista sunt vizibile la un moent dat pe ecran.Exemplul 13.ro> Universitatea aleasa :<br> <select name=”universitate” size=”3”> <option value=”B”> Universitatea din Bucuresti <option value=”C”> Universitatea din Craiova <option value=”T”> Universitatea din Timisoara </select><br> <input type=”reset” > <input type=”submit”> </form></body></html> Lista de selectii cu selectii multiple Exista un tip de lista care permite selectarea la un moment dat a mai multor elemente.11.ro> Acesta este un buton :<br> <input type=”button” name=”buton1” value=”apasati”> </form></body></html> Elementul hidden Este un cimpascuns intr-un formular.value se va trimite serverului pentru perechea “name=value” . Un formular cu un buton apasat <html><head><title>Exemplul</title></head><body> <h1>un formular cu buton apasat</h1><hr> <form method=”post” action=mailto:mm@m. Elementele liste se introduc cu <option> cu atributele: .name ataseaza listei un nume . Un formular cu o lista de selectie <html><head><title>Exemplul</title></head><body> <h1>un formular cu butoane radio</h1><hr> <form method=”post” action=mailto:mm@m. Se precizeaza cu eticheta <input> unde type=”hidden”.10 Elementul hidden <html><head><title>Exemplul</title></head><body> <h1>Elementul hidden</h1><hr> <form method=”post” action=mailto:mm@m. Eticheta <select> are un atribut multiple. Exemplul 13. Se introduce cu etichetele <select>…</select> Atribute: .selected permite selectarea prestabilita a unui element al listei Exemplul 13.9. se poate alege un singur element. 45 .

Exemplul 13.13.ro> Limbi straine cunoscute:<br> <select name=”limbi straine” size=”4”> <option value=”e” selected> Engleza <option value=”f” selected> Franceza <option value=”g” selected> Germana <option value=”i” selected> Italiana <option value=”r” selected> Rusa </selected><br> <input type=”reset” > <input type=”submit”> </form></body></html> Cimpuri de editare multilinie Se face cu eticheta <textarea>.cols care specifica numarul de caractere afisate intr-o linie . Un formular cu o lista de selectie care accepta selectii multiple <html><head><title>Exemplul</title></head><body> <h1>lista de selectii multiple</h1><hr> <form method=”post” action=mailto:mm@m.“hard” in acest caz: se produce intreruperea cuvintelor la marginea dreapta a editorului caracterul d esfirsit de linie este inclus in textul transmis serverului odata cu formularul .rows care specifica numarul de linii afisate simultan .name care permite atasarea unui nume cimpului de editare multilinie . Pentru a particulariza un cimp de editare multilinie se folosesc urmatoarele atribute: .“soft” in acest caz: se produce intreruperea cuvintelor la marginea dreapta a editorului.ro> <textarea name=”text multilinie” cols=”30” rows=”5” wrap=”off”> Prima linie din textul initial A doua linie din textul initial </textarea> <input type=”reset” > <input type=”submit”> </form></body></html> 46 .“off” in acest caz: intreruperea cuvintelor la marginea dreapta a editorului se face numai la dorinta utilizatorului. caracterul de sfirsit de linie este inclus in textul transmis serverului o data cu formularul . Exemplul 13.12. nu se include caracterul de sfirsit de linie in textul transmis serverului o data cu formularul. Un formular cu un cimp de editare multilinie <html><head><title>Exemplul</title></head><body> <h1>un formular cu cimp de ditare multilinie</h1><hr> <form method=”post” action=mailto:mm@m.wrap determina comportamentul cimpului de editare fata de sfirsitul de linie. Poate lua valorile: .

In pagina HTML se insereaza legaturi prin intermediul unei etichete speciale <a> si a atributul href care ia valoarea URL a resursei solicitate. Atribute: .ro> numele :<input type=”text” name=”numele”><br> Prenumele:<input type=”text” name=”prenumele”> <button name=”butonul12” type=”submit”> <img src=”imag. Legaturile (link) reprezinta partea cea mai importanta a unei pagini Web.gif” wodth=”100”> </button> </form></body></html> Lectia 14 Interactivitatea unei pagini Web. Un astfel de buton poate fi inclus intr-un formual.value precizeaza textul ce va fi afisat pe button . Legaturile sunt zone active intr-o pagina Web (sunt sensibile la apasarea butonului stinga al mouse-ului). Exemplul 13.name acordaa elementului un nume.”> <form method=”post” action=mailto:mm@m.type precizeaza actiunea ce se va executa la apasarea butonului daca acesta este inclus inr-un formualr. In corpul blocului “button” se poate afla un text sau un marcaj de inserare a unei imagini. . 47 . Ele transforma un text in hipertext.14 Blocul button <html><head><title>Exemplul</title></head><body> <h1>un formular cu butoane</h1><hr> Un buton simplu:<br> <button name=”butonul1”> Apasa aici </button><br> <div style =”background-color:yellow. declansind actiuni legate de acel formular.Blocuri button O a doua modalitate de a introduce un buton este cu <button>…</button>. care permite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriund in lume. Valori posibile: “button” “submit” “reset”. sau poate fi introdus oriunde in pagina pentru initierea unor actiuni legate independente de formulare.

Pagina veche este inlocuita de pagina noua in acelasi browser sau este lansata in executie o noua instanta a browserului. Serverul ce stocheaza noua resursa primeste cererea si expediaza spre utilizator resursa solicitata. Zona activa este formata dintextul cuprins intre etichetele <a> si </a>. Cind mouse-ul se afla deasupra unei zone active.3.2. Calculatorul client primeste resursa solicitata si o incarca in browser..In pagina Web apar legaturile definite la punctul a ca zone active./my documents/p3. Atributul href precizeaza numele fisierului html afpat in acelasi director care va inlocui vechea pagina.html”>Link catre pagina 2</a> 48 . Browserul trimite catre serverul care stocheaza noua resursa o cerere de a-i expedia pagina rerspectiva. dar intr-un alt director. cursorul ia forma unei miini.2. <html><head><title>p1</title></head> <body> <h1> pagina 1</h1> <hr> <a href=”p3.4. Exemplul 1. atunci se foloseste adresarea relativa. <html><head><title>p3</title></head> <body> <h1> pagina 3</h1> <hr> <a href=”.html”>Link catre pagina 2</a> </body></html> <html><head><title>p2</title></head> <body> <h1> pagina 2</h1> <hr> <a href=”p3. care contine noua pagina.html”>Link catre pagina 1</a> </body></html> O legatura catrea o pagina aflata pe acelasi disc local Daca pagina referita de legatura se afla pe acelasi disc. O legatura catre o pagina aflata in acelasi director Se formeaza cu eticheta <a> (anchor).3. Exemplul 2.

3. iar daca borver=0 atunci chenarul dispare..</body></html> <html><head><title>p4</title></head> <body> <h1> pagina 4</h1> <hr> <a href=”. <html><head><title>Exemplul 5.com”>Netscape</a> </body></html> Utilizarea unei pagini ca zona activa Zona activa a unei legaturi este definitta cu <a> de obicei este un text care apare subliniat si de culoare albastra.3</title></head> <body> <h1> Link spre netscape</h1> <hr> <a href=”http://www. Ancore Pentru a identifica ancora se foloseste atributul name al etichetei <a> . cursorul ia forma unei miini. Pentru a introduce o leatura catre o ancora definita in alt document. Exemplul 4.gif”></a> </body></html> Observatii pentru a reveni in pagina Web anterioara. se foloseste simbolul #./my documents/p3. <html><head><title>Exemplul 4</title></head><body> <h1> Imagine ca zona activa</h1><hr> <a href=”p.html”>Link catre pagina 1</a> </body></html> O legatura catre un site particular Exemplul 3. se apasa butonul back din bara de instrumente a browserului imaginea folosita ca zona activa este inconjurata de un chenar de aceesi culoare cu celellate legatrui. In momentul cind se afla deauspra acestei zone.html”><img src=”p1.netscape. Pentru a realiza o legatura pe aceeasi pagina. Rolul de zona activa poate fi jucat si de o imagine daca inserarea ei are loc intre etichetle <a> si </a>. 49 . href are valoarea de forma “nume_fisier.html#nume_ancora”.

3.2.html”target=”fereastra2”>Incarca pagina 2 in 1</a><br> <a href=”p3.3. Acest lucru se realizeaza cu atributul target al etichetei <a> care primeste un nume pentru fereastra in care se va incarca noua pagina.5.5. <html><head><title>Exemplul 5. Exemplul 8.html”target=”fereastra1”>Incarca pagina 3 in 2</a><br> fereastra fereastra 50 .html#ancora1”>Link catre ancora 1</a><br> <a href=”e10_3. inseamna ca paginile referite de acestea se vor incarca in aceeasi fereastra.html#ancora2”>Link cate ancora 2</a><br> </body></html> Instante multiple pentru un browser Daca vrem ca pagina solicitata sa fie in alta fereastra decit cea curenta.3. <html><head><title>Exemplul 5.7</title></head> <body> <h1>Pagina noua in fereastra noua</h1><hr> <a href=”p3.8</title></head> <body> <h1>Pagini noi in ferestre noi</h1><hr> <a href=”p3.html”target=”fereastra”>Link catre ancora 1</a><br> </body></html> Daca mai multe legaturi folosesc aceeasi valoare pentru atributul target. <html><head><title>Ancore definite in acelasi document</title></head> <body> <h1> Ancore definite in acelasi document</h1><hr> <a href=”#ancora1”>Link catre ancora 1</a><br> <a href=”#ancora2”>Link cate ancora 2</a><br> 10<br>11<br>12<br>13<br>14<br> <a name=”ancora1”>Prima ancora<br></a> 100<br>110<br>120<br>130<br> <a name=”ancora2”>A doua ancora<br></a> 140<br>150<br>160<br> </body></html> Exemplul 6. atunci trebuie lansata o alta instanta a browserului care va contine noua pagina.Exemplul 5. <html><head><title>Ancore definite in alte documente</title></head> <body> <h1> Ancore definite in alte documente</h1><hr> <a href=”e10_3. Exemplul 7.2.

Aceste culori se stabilesc cu trei atribute ale etichetei <body>.html”>Link catre pagina 3</a><br> <a href=”p3.3.html”>Link catre pagina 4</a><br> </body></html> O legatura catre un fisier HTML local Pentru a accesa un program HTML local (aflat pe calculatorul client pe care este lansat browser-ul) se utilizeaza serviciul file:// (in loc de http://) impreuna cu adresa absoluta (calea completa ce contine fisierul si numele acestuia).3. link pentru legautirle nevizitate vlink pentru legaturile vizitate alink pentru legaturile active.2. Exemplul 9 <html><head><title>Exemplul 5.html”>Link catre pagina 2</a></br> <a href=”p3. Alegerea culorilor pentru legaturi Trei culori se folosesc pentru legaturi: o culoare pentru legaturile nevizitate o culoare pentru legaturile vizitate o culoare pentru legaturile active.4.4.html”target=”fereastra1”>Incarca 3</a><br> </body></html> pagina 4 in fereastra Atributul target accepta urmatoarele valori cu specificatie speciala: “_blank” incarcare intr-o fereastra noua anonima “_parent” incarcare in fereastra parinte “_self” incarcare in aceeasi fereastra “_top” incarcare in fereastra top a cadrelor curente.9</title></head> <body link=”red” vlink=”yellow” alink=”blue”> <h1> setarea culorilor pentru legaturi</h1> <ul> In aceasta pagina culorile sunt setate astfel: <li> rosu pentru lgaaturile nevizitate <li> galben pentru legaturile active <li> albastru pentru legaturile active </ul> <a href=”p3.<a href=”p3. 51 .

11</title></head><body> <h1>Expedierea de mesaje</h1><hr> Mesajele se trimit la: <a href=”mailto:ELIANA@HOME.10</title></head><body> <h1>Link catre un fisier local</h1><hr> <a href=<”file://c:html/p3. <eticheta id=”id1”>…</eticheta> <a href=”#ide1”>Link catre elementul “id1”</a> Adresa URL de baza Elementul <base> permita stabilirea unui director in serverul Web fata de care se vor exprima adresele surselor referite prin legaturile aflate in pagina Web.2.class se face astfel: <a href=”me. Se foloseste adresa URL serviciul Internet mailto: urmat de o adresa e-mail valida. primeste ca valoare un nume care identifica in mod unic un element.Exemplul 10 <html><head><title>Exemplul 5. 52 .html”> Link catre pagina 2 aflata pe discul local </a></br></body></html> O legatura catre un server de fisiere Intr-o pagia Web se pot afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesajelor.3.class”>Link spre fisierul me. Exemplul 11 <html><head><title>Exemplul 5.class</a><br> </body></html> Ancore definite prin atributul id Id este un atribut universal. Legatura catrea fisierul me.ro”>Mesaje</a><br> </body></html> Legaturi catre fisiere oarecare O pagina de Web poate contine legaturi catre orice tipuri de fisiere aflate pe orice servere din Internet.

ro/user1”> </head><body> <h1>URL de baza</h1><hr> <a href=”imagini/img3.HOME.14</title></head><body> <h1>Atributul title</h1><hr> <a href=”capitolul1.ro</a> </body></html> Atributul title Apartine etichetei <a> si permite aparitia unei ferestre in pagina Web cind mouse-ul se misca pe o legatura.HOME. Exemplul 14 <html><head><title>Exemplul 5.ELIANA. Exemplul 12 <html><head><title>Exemplul 5.html title=”Capitolul 1”>Link spre primul capitol</a> </body></html> 53 .Elementul <base> se plaseaza in blocul <head> …</head> si accepta atributul href avind ca valoare adresa URL a directorului de baza fata de care se va face adresarea relativa. afisind valoarea atributului.13</title> <base href=<”www.7.ro/user1 www. Se dau informatii suplimentare asupra semnificatiei legaturii.ELIANA.12</title></head><body> <h1> Legatura definita prin atributul Id</h1><hr> <a href=”#id1”>Link catre primul capitol</a> <a href=”#id2”>Link catre al doilea capitol</a> Text<br> Text<br> <h2 id=”id1”>Primul capitol</h2>Text primul capitol<br> <h2 id=”id2”>Al doilea capitol</h2>Al doilea capitol<br> </body></html> Exemplul 13 <html><head><title>Exemplul 5.gif”>Link spre imagine aflata in m.