Noiuni 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).

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.

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

culoare se precizeaza printr-o constructie RGB font poate fi un font generic (serif, sans serif, cursive, monospace, fantasy sau un font instalat). Obs. Domeniul de valabilitate al caracteristicilor precizate se termina la sfirsitul paginii sau pina la urmatoarea eticheta <basefont>. Implicit atributele sunt size=3, color=black,style=Times New Roman. Exemplul 2.4. <html><head><title>Exemplul 2.4</title></head> <body> 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> - leftmargin (distanta de la stinga ferestrei browserului si marginea stinga a continutului paginii - topmargin (distanta dintre marginea de sus a ferestrei browserului si marginea de sus a continutului paginii) Ambele atribute pot avea valorile: - un numar intreg pozitiv reprezentind o distanta masurata in pixeli - un procent din latimea, respectiv inaltimea ferestrei browserului. Exemplul 2.5. <html><head><title>Exemplul 2.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> Exemplul 2.6. <html><head><title>Exemplul 2.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>.

Exemplul 3.1. <html><head><title>Exemplul 3.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. </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>. Exemplul 3.2. <html><head><title>Exemplul 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, acestea trebuie incluse intre etichete <small> si </small>. Exemplul 3.3. <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. Blocurile <big></big> si <small></small> pot fi imbricate. Caractere cursive Pentru aceasta blocul se include intre etichetele <i> si </i>. Exemplul 3.4. <html><head><title>Exemplul 3.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. </body></html> Caracterele indice si exponent Se folosesc etichetele  pentru exponenti si  pentru indici. In exeplul 3.5. se prezinta modul in care se scrie F(y)=(x1+x2)2-y3. Exemplul 3.5. <html><head><title>Exemplul 3.5</title></head> <body> f_(y)=(x₁+x₂)²-y<sup>3</sub> </body></html>

Caractere subliniate si caractere sectionate Pentru a sublinia caractere, acestea se include in blocuri <u> si </u>, iar pentru a le sectiona, le introducem intre etichetele <s> si </s>. Exemplul 3.6. <html><head><title>Exemplul 3.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. </body></html> Stiluri fizice si stiluri logice Stilurile logice se bazeaza pe stilurile fizice, dar modul lor de actiune depinde de browserul utilizat. Blocuri de caractere evidentiate Introducem alte doua etichete pentru a pune in evidenta prin stilul cursiv fragmente de text: - <cite> si </cite> (cite=citat) - <em> si </em> (emphasize=a evidentia). Exemplul 3.7. <html><head><title>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. </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. - <code> si </code> (code=sursa) - <kbd> si </kbd> (kbd=keyboard) - <tt> si </tt> (tt=teletype) Exemplul 3.8. <html><head><title>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.<br> <tt>asa scrie un teleprinter</tt> </body></html> Blocuri de caractere clipitoare Se delimiteaza cu <blink> </blink> . Exemplul 3.9. <html><head><title>Exemplul 3.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. </body></html>

Imbricarea etichetelor Exemplul urmator ne arata ca etichetele pot fi imbricate. Un fragment poate fi scris cu caractere aldine si cursive in acelasi timp, de exemplu. Exemplul 3.10. <html><head><title>Exemplul 3.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>. </body></html> Blocul q Blocul <q> </q> permite inserarea citatelor, care vor fi afisate de browser cu caractere cursive. Exemplul 3.11. <html><head><title>Exemplul 3.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. </body></html>

Lectia 4
Configurarea fonturilor Un font este caracterizat de urmatoarele atribute: - culorea (atributul color); - tipul (atributul face); - marimea (atributul size); - marimea in puncte tipografice (atributul point size); - grosimea (atributul weight) Culori O culoare se precizeaza in doua moduri: - prin nume - printr-o constanta conforma cu standardul RGB (#rrggbb). Culoarea fontului Se foloseste eticheta <font color=culoare> </font>. Familia fontului Exista cinci familii generice de fonturi: serif, sans serif, cursive, monospace si fantasy. Tipul de font se stabileste prin atributul face al etichetei <font>. Exemplul 4.1. <html><head><title>Exemplul 4.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. </body></html>

Marimea fontului Se foloseste atributul size, care poate lua una din valorile: - 1,2,3,4,5,6,7 ; - +1,+2 ,pentru a mari dimensiune fontului cu 1,2 etc fata de valoarea curenta; - -1, -2 , pentru a micsora dimesniunea fontului de 1,2 etc fata de valoarea curenta. Exemplul 4.2. <html><head><title>Exemplul 4.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.<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.3. <html><head><title>Exemplul 4.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. </body></html> Grosimea unui font Se defineste cu atributul weight al etichetei <font>. Valorile admise sunt : 100, 200, 300, 400, 500, 600, 700, 800, 900. Exemplul 4.4. <html><head><title>Exemplul 4.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. </body></html>

Lectia 5
Blocuri de text Toate etichetele de blocuri de text trec automat la rind nou si adauga un spatiu suplimentar.

10

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

11

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

12

Linia 2 este generata de un break <p> Linia 3 este generata de un paragraf. <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>,<h2>,<h3>,<h4>,<h5> si <h6>. Obs. - Toate aceste etichete se refera la un bloc de text si trebuie insotite de o etichteta similara. - Accepta atributul align - Tag-ul <h1> permite scrierea cu caractere mai mari, pina la <h6> care scrie cu caracterele cele mai mici. - Toate browserele introduc un spatiu suplimentar inainte de a afisa un titlu. Exemplul 5.7. <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.8. <html><head><title>Exemplul 5.8</title></head> <body> <h1 align=center> Linie orizontala </h1> <hr> <h2> linia orizontala are parametrii impliciti (aliniere stinga, latiem 100%, grosime 2, cu umbra) </h2> </hr> <h3 align=center> Tipuri de linii orizontale</h3> <hr> Urmeaza o linie aliniata in centru, de latime 50%, grosime 5 pixeli, 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. Exemplul 5.10. <html><head><title>Exemplul 5.10</title></head> <body> <center> <hr width=10%> 13

<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. Exemplul 5.11. <html><head><title>Exemplul 5.11</title></head> <body> <nobr> O singura linie. O singura linie. O singura linie. O singura linie. O singura linie. </nobr> </body></html> Marcajul <wbr> arata browserului locul unde poate fi intrerupt rindul.

Lectia 6
Liste Liste neordonate O lista neordonata este un loc de text delimitat de etichete corespondente <ul> </ul> (ul = unordered list). Fiecare element este identificat cu eticheta <li>. Exemplul 6.1. <html><head><title>Exemplul 6.1</title></head> <body> <h1 align=center > exemplul 6.1. </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 . Valorile posibile pot fi: - circle - disc - square

14

Exemplul 6.2. <html><head><title>Exemplul 6.2</title></head> <body> <H1 ALIGN=CENTER > 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. Exemplul 6.3. <html><head><title>Exemplul 6.3</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) . Fiecare element al listei este initiat de eticheta <li>. Exemplul 6.4. <html><head><title>Exemplul 6.4</title></head> <body> <h1 align=center>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; <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. Valorile posibile sunt: - A pentru ordonare de tipul A,B, 15

- a pntru ordinare de tipul a,b, - I pentru ordonare de tipul I, II, III, - i pentru ordonare de tipul i,ii, - 1 pentru ordonare de tipul 12,3, Exemplul 6.5. <html><head><title>Exemplul 6.5</title></head> <body> <h1 align = center > Exemplul 6.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; <li> salvat fisierul cu extensia html; <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. Valoarea acestui intreg trebuie sa fie >0. Exemplul 6.6. <html><head><title>Exemplul 6.6</title></head> <body> <h1 align = center > 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; <li> salvat fisierul cu extensia html; <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. Valoarea acestui atribut trebuie sa fie intreg >0.Listele ordonate pot fi imbricate intre ele cu liste neordonate. Exemplul 6.7. <html><head><title>Exemplul 6.7</title></head> <body> <h1 align = center > Exemplul 6.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; <li start=5> salvat fisierul cu extensia html; <li> incarcat fisierul intr-un browser </ol> </body></html> Exemplul 6.8. <html><head><title>Exemplul 6.8</title></head> <body> <h1 align = center > Exemplul 6.8 </h1> <hr> 16

<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, fiecare termen fiind urmat de definitia sa. Obs. - intreaga lista de definitii se incadreaza intre etichetele corespondente <dl> si </dl> (definition list) - un termen al listei este initiat de eticheta <dt> (definition term) - definitia unui termen este initiata de eticheta <dd> (definition description) - definitia unui termen incepe pe o linie noua si este identata Tag-urile <ul> <ol> <dl> . Se poate scrie <dl compact>. Daca atributul este prezent, atunci definitia termenilor incepe pe aceeasi linie cu termenii. Exemplul 6.9. <html><head><title>Exemplul 6.9</title></head> <body> <h1 align = center > Exemplul 6.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.10. <html><head><title>Exemplul 6.10</title></head> <body> <h1 align = center > Exemplul 6.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

Liste de meniuri O lista de meniuri este un bloc de etichete corespondente <menu> si </menu>. 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> . Fiecare element este indentat de <li>. Liste de directoare O lista de meniuri este un bloc delimitat de etichetele corespondente <dir> si </dir> . Fiecare element este indentat de <li>. Cele mai multe browsere afiseaza lista de directoare si lista de meniuri ca pe liste neordonate. Nu se recomanda folosirea acestor tipuri de lista. Utilizari speciale ale listelor Daca in loc de elementelelistei introduse cu <li> se insereaza un bloc de text, acesta va fi indentat. Liste personalizate O lista poate contine pe post de elemente imagini si texte. Exemplul 6.11. <html><head><title>Exemplul 6.11</title></head> <body> <h1 align = center > Exemplul 6.11 </h1> <hr> <h2> O lista de definitii speciala </h2> <ul>Planete din sistemul solar:<br> <img src=blue-ball.gif>Mercur<br> <img src=blue-ball.gif>Venus<br> <img src=blue-ball.gif>Neptun<br> </ul> </body></html>

Lectia 7
Tabele Permit crearea unei retele dreptunghiulare de domenii, fiecare domeniu avind propriile optiuni pentru culoarea fondului, culoarea textului, alinierea. Un tabel simplu Etichetele <table> si </table> creaza un tabel, iar rindurile se insereaza cu <tr></tr> (table row). O celula se insereaza cu <td> (table data). Exemplul 7.1 <html><head><title>Exemplul 7.1</title></head> <body> <h1 align = center > Exemplul 7.1 </h1>

18

<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> . Exemplul 7.2 <html><head><title>Exemplul 7.2</title></head> <body> <h1 align = center > Exemplul 7.2 </h1> <h2> Un tabel aliniat la dreapta</h2> Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. 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 dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. </body></html> Tema. Acceasi problema pentru textul aliniat la stinga. Definirea culorilor de fond pentru un tabel Se stabileste cu atributul bgcolor din eticheta <table> pentru un tabel, in eticheta <tr> a unei linii sau in eticheta <td> pentru o celula. Daca intr-un tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este <td>, <tr>, <table>. Exemplul 7.3 <html><head><title>Exemplul 7.3</title></head> 19

<body> <h1 align = center > Exemplul 7.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>. Dimensionarea celulelor unui tabel Distanta dintre doua celule vecine se defineste cu ajutorul atributului cellspacing al etichetei <table>. Obs. - Valorile acetui atribut pot fi numere intregi pozitive, inclusiv 0, reprezinta distanta dintre doua celule vecine. - Valoarea prestabilita a atributului cellspacing este 2. Distanta dintre marginea unei celule si continutul ei poate fi definita cu atributul cellpadding al etichetei <table>. - 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. Exemplul 7.4 <html><head><title>Exemplul 7.4</title></head> <body> <h1 align = center > Exemplul 7.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.5 <html><head><title>Exemplul 7.5</title></head> <body> <h1 align = center > Exemplul 7.5 </h1> 20

<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). Valorile acestor atribute pot fi: - Numere intregi pozitive reprezentin latimea, respectiv inaltimea in pixeli a tabelului - Numere intregi intre 1 si 100 urmate de % reprezentind fractiunea din latimea, respectiv inaltimea totala a paginii. Obs. - Daca dimesniunile precizate de atribute sunt mai mari decit cele necesare afisarii tabelului, atunci se vor folosi dimensiunile precizate - Daca dimensiunile precizate de atribute sunt mai mici decit cele necesare afisarii tabelului, atunci tabelul va fi ajustat la dimensiunile necesare. Exemplul 7.6 <html><head><title>Exemplul 7.6</title></head> <body> <h1 align = center > 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.7. permite afisarea unui text in centrul unei pagini. Se declara un tabel mai mare decit pagina si continind o singura celula. Exemplul 7.7 <html><head><title>Exemplul 7.7</title></head> <body> <table width=100% heigh=100%> <tr> <td bgcolor=yellow> <h2>Un text in mijlocul unei pagini</h2> 21

</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>. Observatii - valoarea tributului hspace >=0 si reprezinta distanta pe orizontala dintre tabel si celelalte elemente; - valoarea atributului vspace >=0 si reprezinta distanta pe verticala dintre tabel si celelalte elemente ale paginii; - sunt elemente efective numai la Netscape Communicator. Titlul unui tabel Se ataseaza cu eticheta <caption> plasat in interiorul etichetei <table>, dar nu in interiorul <tr> sau <td>.Atributul alin poate lua una din valorile: - bottom - top - left - right Exemplul 7.8 <html><head><title>Exemplul 7.8</title></head> <body> <h1 align=center> Exemplul 7.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, care poate lua valorile: - left - center - right - char (alinierea se face fata de un caracter). Observatie - Valoarea implicita este center - Caracterul fata de care se face alinierea este definit e atributul char; implicit este . Alinierea pe verticala a continutului unei celule se face cu atributul valign, care poate lua valorile: - baseline - bottom - middle 22

- top. Valoarea implicita este middle. Se pot atasa atit etichetei <tr> cit si etichetelor <td> si <th> pentru a stabili alinierea intr-o singura celula. Exemplul 7.9 <html><head><title>Exemplul 7.9</title></head> <body> <h1 align=center>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. Valorile posibile sunt: - numere intregi >=0 reprezentind dimensiunea in pixeli - procente din latimea respectiv inaltimea tabelului. Exemplul 7.10 <html><head><title>Exemplul 7.10</title></head><body> <h1 align=center>Exemplul 7.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 - daca dimensiunile precizate sunt mai mari decit cele necesare afisarii tabelului, vor fi folosite dimensiunile precizate - daca dimensiunile precizate de atribute sunt mai mici decit cele necesare afisarii tabelului, atunci tabelul va fi ajustat la dimesniunile necesare. In exemplul urmator se formeaza un tabel cu latimea 80% din latimea paginii , 3 coloane de text cu latimea de 25% , 50% si respectiv 25 % din latimea tabelului. Exemplul 7.11 <html><head><title>Exemplul 7.11</title></head><body> <h1 align=center>Exemplul 7.11</h1> <center><table width=80%> <tr><td width=25% valign=top>Text in prima coloana. Text in prima coloana. <td width=50 valign=top>Text in coloana a doua. Text in coloana a doua. <td width=50 valign=top>Text in coloana a treia. Text in coloana a treia. </table></body></html> 23

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

Exemplul 7.14 <html><head><title>Exemplul 7.14</title></head><body> <h1 align=center>Exemplul 7.14</h1> <h2>Atribute Internet Explorer</h2> <table border=5 background=s.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. Atributele acceptate sunt: - span determina numarul de coloane din grup - width determina o latime unica pentru coloanele din grup - align detemina un tip unic de aliniere pentru coloanele din grup. Ex: <colgroup span=3 width=100></colgroup> Observatii - 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. Atributele frame si rules Atributul frame al etichetei <table> permite specificarea partilor din chenarul unui tabel care vor fi afisate. Valorile posibile: - void (implicit) - above(sus) - below (urmator) - hsides (horizontal sides) - lhs (left) - rhs (right) - vsides (vertical sides) - box (cutie) - border(chenar, margine). Atrobutul rules poate lua una din valorile: - none - groups - rows - cols - all. Exemplul 7.16 <html><head><title>Exemplul 7.16</title></head><body> <h1 align=center>Exemplul 7.16</h1> <h2>Atributele frame si rules</h2> <center>

25

<table width=400 cellspacing=10 frame=lhs rules=all> <tr> <td valign=top>Text in prima coloana. <td valign=top>Text in a doua coloana. <td valign=top>Text in coloana a treia </table></center></body></html> Subblocurile unui tabel In HTML 4.0 continutul unui tabel poate fi impartit in subblocuri prin elementele: - <thead><tr><td>...</thead> un singur rind - <tfoot><tr><td></tfoot> un sigur rind - <tbody><tr></tbody> oricite rinduri In tabel exista un singur bloc de tip <thead> si un singur bloc de tipul <tfoot>, dar pot exista mai multe subblocuri de tip <tbody>.

Lectia 8
Imagini O facilitate extraordinara a limbajului HTML 4.0 este posibilitatea includerii imaginilor. Tipuri de fisiere pentru imagini Imaginile sunt stocate in fisiere de diverse formate. Formatele acceptate de browsere sunt: - GIF (Graphics Interchange Format) extensia .gif - JPEG sau JPG (Joint Photographic Experts Group) extensia .jpeg sau .jpg - XMP (X PixMap) extensia .xmp - XBM (X BitMap) extensia .xbm - BMP (BitMap) extensia .bmp - DIB (Device Independent Bitmap) - TIFF (Tagged Image File Format) extensia .tif sau .tiff - PCX (PC Paintbrush); - PNG (Portable Network Graphics) cu extensia .png Cele mai des folosite sunt fisierele GIF (8 biti pentru culoare, 256 culori) si JPG (24 biti pentru culoare, 16.777.216 culori posibile). Adresa URL a unei imagini URL (Uniform Resource Locator) este un standard folosit in indentificarea unica a unei resurse. In continuare consideram ca imaginile se afla in directorul curent. Prima pagina de Web care contine o imagine Se foloseste eticheta <img> cu atributul src (source) care este adresa URL a imaginii. Exemplul 8.1 <html><head><title>Exemplul 8.1</title></head><body> <h1 align=center>Exemplul 8.1</h1> <h2> pagina Web cu imagine</h2> <img src=s.jpg> Text dupa imagine

26

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

27

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. Exemplul 8.5 <html><head><title>Exemplul 8.5</title></head><body> <h1 align=center>Exemplul 8.5</h1> <h2>imagine inconjurata de text</h2> Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text inainte de imagine.<br> <img src=C:\My Documents\s.jpg border=5 aling=top hspace=50 vspace=50> Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. </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> : - atributul alt admite ca valoare un text ce se va afisa in locul imaginii - atroibutul lowsrc admite ca valore adresa URL a unei imagini de joasa rezolutie care poate fi incarcata imediat, chiar daca avem o legatura proasta. Exemplul 8.6 <html><head><title>Exemplul 8.6</title></head><body> <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.jpg alt=text inlocuitor> </body></html> Imagini pentru fondul unei pagini Web Se foloseste atributul background al etichetei <body>, avind ca valoare adresaa URL a imaginii. Imaginea se multiplica pina acopera intregul ecran. Exemplul 8.7 <html><head><title>Exemplul 8.7</title></head><body background=a.jpg> <h1 align=center>Exemplul 8.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, se foloseste atributul fixed al etichetei <body> (numai la Internet Explorer). Exemplul 8.8 <html><head><title>Exemplul 8.8</title></head> <body background=a.jpg bgproperties=fixed> <h1 align=center>Exemplul 8.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

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

Exemplul 8.12 <html><head><title>Exemplul 8.12</title></head> <body> <h1 align=center>Exemplul 8.12</h1> <h2>imagini in fisiere externe</h2> text inainte de link <a href=a1.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, dar stocata intr-un fisier cu o rezolutie foarte buna. Exemplul 8.13 <html><head><title>Exemplul 8.13</title></head> <body> <h1 align=center>Exemplul 8.13</h1> <h2>imagini cu diferite reezolutii</h2> text inainte de imagine <a href=a1.jpg><img src=a2.jpg></a> text dupa imagine </body></html> Alte atribute pentru <img> Urmatoarele atribute sunt mai putin folosite: - suppress admite valorile true si false pentru activarea, respectiv dezactivarea incarcarii imaginii intr-o pagina Web - longdesc este o adresa URL catre o pagina Web care ofera detalii despre imagine. Facilitati ale formatului GIF 1. Imagini intretesute (interlaced images) sunt cele care apar integral in pagina Web, dar pe nasutra ce sunt incarcate, rezolutia lor creste 2. Imagini transparente (transparent images) sunt imagini fara culoarede fond, astfel ca ceea ce se afla in spatele imaginii este partial vizibil 3. Imagini animate (animated images) sunt fisiere speciale continind osuccesiune de imagini afisate periodic Utilizari speciale ale imaginilor Efecte deosebite: 1. Linii orizontale formate cu ajutorul imaginilor eventual animate 2. Simboluri speciale pentru elementele de liste neordonate.

Lectia 9
Documentarea unei pagini Web Metainformatiile sunt informatii despre modul de organizare a informatiilor . Servere specializate ofera motoare de cautare puternice care permit regasirea informatiilor (adresele unde aceste informatii sunt stocate). Un element pentru metainformatii Informatiile se introduc cu elementul special <meta> plasat in blocul <head> </head>.Acest element accepta patru atribute :

30

- name - http equiv - content - scheme la care se poate adauga atributul universal - lang. Primele trei atribute se folosesc in perechi name/content sau http-equiv/content, celelalte atribute avind caracter optional. Descrierea unei pagini Web Pentru a face cunoscut motoarelor de cautare aflate in Internet scopul in care a fost creata o pagina Web, putem insera un element <Meta> cu atributele: - name configurat la valoarea description - 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. Selectarea acstor cuvinte cheie trebuie facuta cu atentie pentru ca informatia respectiva sa poate fi localizata. Pentru a preciza cuvintele cheie: - atributul name va primi valoarea keywords - atributul content va primi ca valoare o lista de cuvinte cheie separate prin virgula. Exemplul 9.1 <html><head><title>Exemplul 9.1 Home page</title> <meta name=description content=Acesta este prezentarea paginii Web></head> <body> <h1> Bine ati venit !</h1> </body></html> Exemplul 9.2 <html><head><title>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. Exemplul 9.3 <html><head><title>Exemplul 9.3 Home page</title> <meta name=author content=Radu> <meta name=copyright content=radu@yahoo.com></head> <body> <h1> Bine ati venit !</h1> </body></html>

31

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, se utilizeaza atributul http-equiv. Valoarea atributului content este o data calendaristica si o ora. Exemplul 9.4 <html><head><title>Exemplul 9.4 Home page</title> <meta http-equiv=creation-date content=Sun, 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, se foloseste http-equiv , unde valoarea parametrului este o adresa email, urmata eventual de numele persoanei. Exemplul 9.5 <html><head><title>Exemplul 9.5 Home page</title> <meta http-equiv=from: content=radu@yahoo.com> <meta http-equiv=reply-to 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.6 <html><head><title>Exemplul 9.6 Home page</title> <meta http-equiv=content-type content=text/html; charset=ISO-8859-5></head> <body> <h1> Bine ati venit !</h1> </body></html> Limba utilizata Se foloseste atributul lang. Exemplul 9.7 <html><head><title>Exemplul 9.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. In acest fel se obtin facilitati dinamice pentru un site Web. Se foloseste valoarea

32

refresh iar in content numarul de secunde dupa care dorim sa se reactualizeze pagina. Exemplul 9.8 <html><head><title>Exemplul 9.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, pentru care trebuie specificat URL. Exemplul 9.9 <html><head><title>Exemplul 9.8 Home page</title> <meta http-equiv=refresh content=9; url=index.asp> </head> <body> <h1> Aceasta pagina se schimba dupa 9 secunde cu pagina index.asp !</h1> </body></html> Comentarii Sunt ignorate de browser si pot fi plasate oriunde in pagina. Se scriu cu sintaxa: <!-urmeaza comentariu->.

Lectia 10
Legaturi Interactivitatea unei pagini Web. Legaturile (link) reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text in hipertext, 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. Legaturile sunt zone active intr-o pagina Web (sunt sensibile la apasarea butonului stinga al mouse-ului). a. In pagina HTML se insereaza legaturi prin intermediul unei etichete speciale <a> si a atributul href care ia valoarea URL a resursei solicitate. b. In pagina Web apar legaturile definite la punctul a ca zone active. Cind mouse-ul se afla deasupra unei zone active, cursorul ia forma unei miini. c. Browserul trimite catre serverul care stocheaza noua resursa o cerere de a-i expedia pagina rerspectiva. d. Serverul ce stocheaza noua resursa primeste cererea si expediaza spre utilizator resursa solicitata. e. Calculatorul client primeste resursa solicitata si o incarca in browser. f. Pagina veche este inlocuita de pagina noua in acelasi browser sau este lansata in executie o noua instanta a browserului, care contine noua pagina. O legatura catre o pagina aflata in acelasi director Se formeaza cu eticheta <a> (anchor). Atributul href precizeaza numele fisierului html afpat in acelasi director care va inlocui vechea pagina. Zona activa este formata dintextul cuprins intre etichetele <a> si </a>.

33

Exemplul 10.1. <html><head><title>p1</title></head> <body> <h1> pagina 1</h1> <hr> <a href=p2.html>Link catre pagina 2</a> </body></html> <html><head><title>p2</title></head> <body> <h1> pagina 2</h1> <hr> <a href=p2.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, dar intr-un alt director, atunci se foloseste adresarea relativa. Exemplul 10.2. <html><head><title>p3</title></head> <body> <h1> pagina 3</h1> <hr> <a href=../my documents/p4.html>Link catre pagina 2</a> </body></html> <html><head><title>p4</title></head> <body> <h1> pagina 4</h1> <hr> <a href=../my documents/p3.html>Link catre pagina 1</a> </body></html> O legatura catre un site particular Exemplul 10.3. <html><head><title>Exemplul 10.3</title></head> <body> <h1> Link spre netscape</h1> <hr> <a href=http://www.netscape.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. In momentul cind se afla deauspra acestei zone, cursorul ia forma unei miini. Rolul de zona activa poate fi jucat si de o imagine daca inserarea ei are loc intre etichetle <a> si </a>. Exemplul 10.4. <html><head><title>Exemplul 4</title></head><body> <h1> Imagine ca zona activa</h1><hr> 34

<a href=p.html><img src=p1.gif></a> </body></html> Observatii - pentru a reveni in pagina Web anterioara, 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, iar daca borver=0 atunci chenarul dispare. Ancore Pentru a identifica ancora se foloseste atributul name al etichetei <a> . Pentru a realiza o legatura pe aceeasi pagina, se foloseste simbolul #. Pentru a introduce o leatura catre o ancora definita in alt document, href are valoarea de forma nume_fisier.html#nume_ancora. Exemplul 10.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.6. <html><head><title>Ancore definite in alte documente</title></head> <body> <h1> Ancore definite in alte documente</h1><hr> <a href=e10_5.html#ancora1>Link catre ancora 1</a><br> <a href=e10_5.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, atunci trebuie lansata o alta instanta a browserului care va contine noua pagina. Acest lucru se realizeaza cu atributul target al etichetei <a> care primeste un nume pentru fereastra in care se va incarca noua pagina. Exemplul 10.7. <html><head><title>Exemplul 10_7</title></head> <body> <h1>Pagina noua in fereastra noua</h1><hr> <a href=p2.htmltarget=fereastra>Link catre ancora 1</a><br> </body></html> Daca mai multe legaturi folosesc aceeasi valoare pentru atributul target, inseamna ca paginile referite de acestea se vor incarca in aceeasi fereastra. Exemplul 10.8. <html><head><title>Exemplul 10_8</title></head> <body> <h1>Pagini noi in ferestre noi</h1><hr> 35

<a href=p2.htmltarget=fereastra2>Incarca pagina 2 in fereastra 1</a><br> <a href=p3.htmltarget=fereastra1>Incarca pagina 3 in fereastra 2</a><br> <a href=p4.htmltarget=fereastra1>Incarca pagina 4 in fereastra 3</a><br> </body></html> 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. 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. Aceste culori se stabilesc cu trei atribute ale etichetei <body>. - link pentru legautirle nevizitate - vlink pentru legaturile vizitate - alink pentru legaturile active. Exemplul 10.9 <html><head><title>Exemplul 10.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.html>Link catre pagina 2</a></br> <a href=p3.html>Link catre pagina 3</a><br> <a href=p4.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.10 <html><head><title>Exemplul 10.10</title></head><body> <h1>Link catre un fisier local</h1><hr> <a href=<file://c:html/p2.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 foloseste adresa URL serviciul Internet mailto: urmat de o adresa e-mail valida.

36

Exemplul 10.11 <html><head><title>Exemplul 10.11</title></head><body> <h1>Expedierea de mesaje</h1><hr> Mesajele se trimit la: <a href=mailto:m@k.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. Legatura catrea fisierul me.class se face astfel: <a href=me.class>Link spre fisierul me.class</a><br> </body></html> Ancore definite prin atributul id Id este un atribut universal, primeste ca valoare un nume care identifica in mod unic un element. <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. 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. Exemplul 10.12 <html><head><title>Exemplul 10.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.13 <html><head><title>Exemplul 10.13</title> <base href=<www.m.ro/user1> </head><body> <h1>URL de baza</h1><hr> <a href=imagini/img7.gif>Link spre imagine aflata in m.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, afisind valoarea atributului. Se dau informatii suplimentare asupra semnificatiei legaturii. Exemplul 10.14 <html><head><title>Exemplul 10.14</title></head><body> <h1>Atributul title</h1><hr> <a href=capitolul1.html title=Capitolul 1>Link spre primul capitol</a> 37

</body></html>

Lectia 11
Sunete si videoclipuri Formate pentru fisiere de sunet Formatele recunscute de paginile de Web sunt: - AU cu extensia .au - AIFF/AIFC cu extensia .aiff sau .aif - WAVW/WAV cu extensia .wav - MPEG Audiocu extensia .mpeg2 sau .mp2 - MIDI cu extensia .mid sau .midi. Legaturi catre fisiere de sunet Este o legatura clasia spre orice tip de fisiere. <a href=spacemusic.wav>Link spre fisier sunet</a> Formate spre fisiere de videoclipuri Formatele de videoclipuri sunt urmatoarele: - MPEG cu extensiile .mpeg, .mpg - QuickTime cu extensia .mov - AVI cu extensia .avi. Legaturi catre fisiere cu videoclipuri <a href=t12334.avi>Legatura spre videoclip</a> Sunetul de fond pentru o pagina Web Se face cu eticheta <bgsound>, fisierul de sunet fiind specificat cu src. Atributul loop permite precizarea numarului de repetitii care sunt executate pina cind sunetul de font inceteaza. Valori posibile: - -1 sau infinite pentru sunetul de fond care se repeta de un numar infinit de ori. - un numar intreg pozitiv care precizeaza de cite ori se repeta sunetul. Exemplul 11.1. <html><head><title>Exemplul 11.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. Atributele img pentru videoclipuri: - 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 - start precizeaza momentul in care incepe redarea videoclipului cu valorile:

38

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

39

Dreptunghi: Coords=x1,y1,x2,y2unde x1,y1 determina coltul din stinga sus,x2,y2 determina coltul din dreapta jos. Cerc: x,y,r unde x,y este centrul cerului, r este raza. Poligon: x1,y1,x2,y2,x3,y3, Utilizarea unei harti de imagini Avem un cerc, un patrat si un poligon. Exemplul 12.1. <html><head><title>Exemplu</title></head><body> <h1>o harta de imagini</h1> <img src=harta de imagini.gif usermap=#harta1 width=600 height=500> <map name=harta1> <area shape=rect cords=100,100,200,200 href=p2.html> <area shape=circle coords=400,200,100 href=p3.html> <area shape=poly coords=100,300,200,300,400,400,100,400 href= p4.html> </map> </body></html> Alte atribute ale elementului <area> Exista doua atribute: - alt care permite inserarea unei scurte descrieri a legaturii catre care indica zona activa respectiva (alt=descrierea legaturii) - title permite inserarea unei mici ferestre unde este descrisa legatura atita timp cit mouse-ul se afla deasupra legaturii Exemplul 12.2 <html><head><title>Exemplu</title></head><body> <h1> o harta de imagini</h1> <img src=harta de imagini.gif usemap=#harta1 width=600 height=500> <map name=harta1> <area shape=rect cords=100,100,200,200 href=p2.html alt=pagina 2 title=Link catre pagina 2> <area shape=circle coords=400,200,100 href=p3.html alt=pagina 3 title=Link catre pagina 3> <area shape=poly coords=100,300,200,300,400,400,100,400 href= p4.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.3 <html><head><title>Exemplu</title></head><body> <h1> o harta de imagini</h1> <img src=harta de imagini.gif usemap=#harta1 width=600 height=500> <map name=harta1> <area shape=circle coords=400,200,100 nohref> <area shape=circle coords=400,200,300 href= p4.html alt=pagina 4 title=Link catre pagina 4> <area shape=default href=p1.html> </map> </body></html>

40

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

<form action=mailto:m@k.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. Alte atribute importante: - name permite atasarea unui nume fiecarui element al formularului; - value permite atribuirea unei valori initiale unui element al formularului, valoare ce poate fi ulterior modificata. Se transmit spre server perechi de forma nume=valoare, care cuprind numele elementului si valoare lui. Un buton de expediere al unui formular se introduce cu <input>, in care type este configurat la valoarea submit . Acest element poate primi un nume prin atributul name. Pe buton apare Submit Query sau valoarea atributului value, daca aceasta valoare a fost stabilita. Exemplul 13.2. 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: - size specifica latimea cimpului de editare - maxlength specifica numarul maxim de caractere pecare le poate primi un cimp de editare Exemplul 13.3. 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 atributul type lipseste, atunci cimpul respectiv este considerat implicit ca fiind de tip text; - formularele cu un singur cimp (text) nu au nevoie de butoane de expediere. Datele se trimit prin apasarea tastei ENTER; - intr-un formulat pot exista mai multe butoane de expediere avind atributul name configurat la valori diferite. 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). Exemplul 13.4 Un formular cu un buton Reset <html><head><title>Exemplu</title></head><body>

42

<h1> Un formular cu un buton reset</h1><hr> <form method=post action=mailto@xxx.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. Nu se afiseaza toate caracterele in clar, ci *. Exemplul 13.5. 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, valoarea tastata in password se trece in clar. La exemplul anterior se va primi mesajul name=Ionescu+Valentin&parola=mishu Butoane radio Permit alegerea unei singure variante dintre mai multe posibile. Observatii - toate butoanele ca apartin unei familii de butoane radio au acelasi nume stabilit prin atributul name. - atributul value primeste ca valoare un text care va fi expediat serverului impreuna cu numele familiei de butoane - atributul checked (fara alte valori) premite selectia prestabilita a unui buton dintr-o familie de butoane. Pentru o aceeasi familie de butoane radio poate fi folosit cel mult un atribut checked. Exemplul 13.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.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, adresare=Mrs, adresare=Ms.

43

Casete de validare O caseta de validare (checkbox) permite selectarea sau deselectarea unei optiuni. Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea checkbox. Observatii - fiecare caseta poate avea un nume definit prin atributul name. - fiecare caseta poate avea valoarea prestabilita selectat definita prin atributul checked - fiecare caseta poate avea configurat atributul value cu valoarea care va fi inclusa in perechea name=value ce va fi expediata odata cu formularul. Daca acest atribut lipseste, atunci se va expedia perechea nume=on. Casetele care sunt deselectate nu trimit catre server perechi name=value. Exemplul 13.7. 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.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. Alte atribute: - name permite atasarea unui nume, care apare in perechea name=value - value primeste adrsa URL a fisierului care va fi expediat o data cu formularul. - Enctype precizeaza metoda utilizata la criptarea fisierului de expediat. Valoarea lui este multipart/form-data. Exemplul 13.8. 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.ro> Alegeti fisierul:<br> <input type=file name=fisier value=c:\html\p2.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). Inserarea unui buton intr-un formular se face <input> cu atributul type cofigurat la button cu atributele: - name (numele butonului); - value (valoare textului ce va fi afisat pe buton).

44

Exemplul 13.9. 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.ro> Acesta este un buton :<br> <input type=button name=buton1 value=apasati> </form></body></html> Elementul hidden Este un cimpascuns intr-un formular. Se precizeaza cu eticheta <input> unde type=hidden.La expedierea formularului se citeste nume_cimp_hidden=valoare . Exemplul 13.10 Elementul hidden <html><head><title>Exemplul</title></head><body> <h1>Elementul hidden</h1><hr> <form method=post action=mailto:mm@m.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. Se introduce cu etichetele <select></select> Atribute: - name ataseaza listei un nume - size precizeaza (nN,n>0) cite elemente din lista sunt vizibile la un moent dat pe ecran, celelalte devenind vizibile prin actionarea barei de derulare. In mod prestabilit, se poate alege un singur element. Elementele liste se introduc cu <option> cu atributele: - value se va trimite serverului pentru perechea name=value - selected permite selectarea prestabilita a unui element al listei Exemplul 13.11. 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.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. Eticheta <select> are un atribut multiple, pentru fiecare element selectat se insereaza cite o pereche name-value unde name este numele listei.

45

Exemplul 13.12. 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.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>. Pentru a particulariza un cimp de editare multilinie se folosesc urmatoarele atribute: - cols care specifica numarul de caractere afisate intr-o linie - rows care specifica numarul de linii afisate simultan - name care permite atasarea unui nume cimpului de editare multilinie - wrap determina comportamentul cimpului de editare fata de sfirsitul de linie. Poate lua valorile: - 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 - 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 - soft in acest caz: se produce intreruperea cuvintelor la marginea dreapta a editorului; nu se include caracterul de sfirsit de linie in textul transmis serverului o data cu formularul. Exemplul 13.13. 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.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

Blocuri button O a doua modalitate de a introduce un buton este cu <button></button>. Un astfel de buton poate fi inclus intr-un formual, declansind actiuni legate de acel formular, sau poate fi introdus oriunde in pagina pentru initierea unor actiuni legate independente de formulare. Atribute: - name acordaa elementului un nume; - value precizeaza textul ce va fi afisat pe button - type precizeaza actiunea ce se va executa la apasarea butonului daca acesta este inclus inr-un formualr. Valori posibile: button submit reset. In corpul blocului button se poate afla un text sau un marcaj de inserare a unei imagini. Exemplul 13.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;> <form method=post action=mailto:mm@m.ro> numele :<input type=text name=numele><br> Prenumele:<input type=text name=prenumele> <button name=butonul12 type=submit> <img src=imag.gif wodth=100> </button> </form></body></html>

Lectia 14
Interactivitatea unei pagini Web.

Legaturile (link) reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text in hipertext, 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. Legaturile sunt zone active intr-o pagina Web (sunt sensibile la apasarea butonului stinga al mouse-ului). In pagina HTML se insereaza legaturi prin intermediul unei etichete speciale <a> si a atributul href care ia valoarea URL a resursei solicitate.

47

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

</body></html> <html><head><title>p4</title></head> <body> <h1> pagina 4</h1> <hr> <a href=../my documents/p3.3.html>Link catre pagina 1</a> </body></html>

O legatura catre un site particular Exemplul 3.

<html><head><title>Exemplul 5.3</title></head> <body> <h1> Link spre netscape</h1> <hr> <a href=http://www.netscape.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. In momentul cind se afla deauspra acestei zone, cursorul ia forma unei miini. Rolul de zona activa poate fi jucat si de o imagine daca inserarea ei are loc intre etichetle <a> si </a>. Exemplul 4.
<html><head><title>Exemplul 4</title></head><body> <h1> Imagine ca zona activa</h1><hr> <a href=p.html><img src=p1.gif></a> </body></html>

Observatii pentru a reveni in pagina Web anterioara, 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, iar daca borver=0 atunci chenarul dispare. Ancore Pentru a identifica ancora se foloseste atributul name al etichetei <a> . Pentru a realiza o legatura pe aceeasi pagina, se foloseste simbolul #. Pentru a introduce o leatura catre o ancora definita in alt document, href are valoarea de forma nume_fisier.html#nume_ancora.

49

Exemplul 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 6.
<html><head><title>Ancore definite in alte documente</title></head> <body> <h1> Ancore definite in alte documente</h1><hr> <a href=e10_3.5.html#ancora1>Link catre ancora 1</a><br> <a href=e10_3.5.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, atunci trebuie lansata o alta instanta a browserului care va contine noua pagina. Acest lucru se realizeaza cu atributul target al etichetei <a> care primeste un nume pentru fereastra in care se va incarca noua pagina. Exemplul 7.
<html><head><title>Exemplul 5.7</title></head> <body> <h1>Pagina noua in fereastra noua</h1><hr> <a href=p3.3.2.htmltarget=fereastra>Link catre ancora 1</a><br> </body></html>

Daca mai multe legaturi folosesc aceeasi valoare pentru atributul target, inseamna ca paginile referite de acestea se vor incarca in aceeasi fereastra. Exemplul 8.
<html><head><title>Exemplul 5.8</title></head> <body> <h1>Pagini noi in ferestre noi</h1><hr> <a href=p3.3.2.htmltarget=fereastra2>Incarca pagina 2 in 1</a><br> <a href=p3.3.htmltarget=fereastra1>Incarca pagina 3 in 2</a><br>

fereastra fereastra

50

<a href=p3.4.htmltarget=fereastra1>Incarca 3</a><br> </body></html>

pagina

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. 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. Aceste culori se stabilesc cu trei atribute ale etichetei <body>. link pentru legautirle nevizitate vlink pentru legaturile vizitate alink pentru legaturile active. Exemplul 9
<html><head><title>Exemplul 5.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.3.2.html>Link catre pagina 2</a></br> <a href=p3.3.html>Link catre pagina 3</a><br> <a href=p3.4.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).

51

Exemplul 10
<html><head><title>Exemplul 5.10</title></head><body> <h1>Link catre un fisier local</h1><hr> <a href=<file://c:html/p3.3.2.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 foloseste adresa URL serviciul Internet mailto: urmat de o adresa e-mail valida. Exemplul 11
<html><head><title>Exemplul 5.11</title></head><body> <h1>Expedierea de mesaje</h1><hr> Mesajele se trimit la: <a href=mailto:ELIANA@HOME.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. Legatura catrea fisierul me.class se face astfel: <a href=me.class>Link spre fisierul me.class</a><br> </body></html> Ancore definite prin atributul id Id este un atribut universal, primeste ca valoare un nume care identifica in mod unic un element. <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.

52

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. Exemplul 12
<html><head><title>Exemplul 5.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.13</title> <base href=<www.ELIANA.HOME.ro/user1 www.ELIANA.HOME.ro/user1> </head><body> <h1>URL de baza</h1><hr> <a href=imagini/img3.7.gif>Link spre imagine aflata in m.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, afisind valoarea atributului. Se dau informatii suplimentare asupra semnificatiei legaturii. Exemplul 14
<html><head><title>Exemplul 5.14</title></head><body> <h1>Atributul title</h1><hr> <a href=capitolul1.html title=Capitolul 1>Link spre primul capitol</a> </body></html>

53