You are on page 1of 54

Site Didactic

Andrei CIOBANU profesor gr.II La nceput de drum ...


"Calitate nseamn s munceti bine atunci cnd nimeni nu te supravegheaz." Henry Ford Site dedicat elevilor din Colegiul de Informatic din Chiinu

PRINCIPAL LECII LUCRRI Teste REFERINE DESCARC materiale/propune

Curs HTML! 1. 2. 3. 4. 5. 6. 7. 8. 9. Structura documentului HTML Formatarea caracterelor, organizarea textului Liste. Noiuni i marcaje utilizate Tabele. Noiuni si marcaje utilizate Operarea cu obiecte. Inserarea imaginilor, sunetelor i videoclipurilor Referine. Referine interne i externe. Documentarea unei pagini WEB. Operarea cu formulare. Marcaje utilizate Ferestre in HTML. Comenzi de construire a ferestrelor(cadrelor)

Ce este HTML ? Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup Language ), care descrie formatul primar in care documentele sunt distribuite si vzute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatrii si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si Web. Primele specificaiile de baza ale Web-ului au fost HTML, HTTP si URL. HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe ntre ei informaie utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma, posibiliti hypertext si structurarea documentelor.Independenta de platforma nseamn ca un document poate fi afiat in mod asemntor de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta att de variata. Hipertext nseamn ca orice cuvnt, fraza, imagine sau alt element al documentului vzut de un utilizator ( client ) poate face referina la un alt document, ceea ce uureaz mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si interogarea unor baze de date formate din aceste documente. Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task

Force (IETF). W3C a enunat cteva versiuni ale specificaiei HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelai timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de autorii de browsere. HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente -- inclusiv cele mod text. HTML 2.0 reflecta concepia originala a HTML ca un limbaj de marcare independent de obiectele existente pentru aezarea lor in pagina, in loc de a specifica exact cum ar trebui sa arate acestea. Dac dorii sa fii siguri ca toi vizitatorii vor vedea paginile aa cum trebuie, folosii tagurile HTML 2.0. Specificaia HTML 3.0, Enunata in 1995, a ncercat sa dezvolte HTML 2.0 prin adugarea unor faciliti precum tabelele si un mai mare control asupra textului din jurul imaginilor. Dei unele din noutile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau nc. In unele cazuri, taguri asemntoare implementate de autorii de browsere au devenit mai rspndite dect tagurile "oficiale". Specificaia HTML 3.0 acum a expirat, deci nu mai este un standard oficial. In Mai 1996, W3C a scos pe piaa specificaia HTML 3.2, care era proiectata sa reflecte si sa standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML rspndite. In Bilanul asupra HTML, W3C recomanda ca providerii de informaii sa utilizeze specificaia HTML 3.2.Versiunile curente ale majoritii browserelor ar trebui sa suporte toate, sau aproape toate aceste taguri. De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificaia HTML 3.2, ori pentru ca sunt mai puin utilizate, ori au fost omologate dup apariia HTML 3.2. Pentru ca navigatorul Netscape a fost printre primele browsere care suporta anumite taguri HTML 3.0, iar Netscape deine in jur de 70% din piaa de browsere, muli au crezut eronat ca toate extensiile Netscape (incluznd taguri ca si facilitai ca ferestrele) fac parte din HTML 3.0 sau HTML 3.2. La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01. Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu orice editor de texte. Au fost insa dezvoltate editoare specializate care permit editarea intr-un fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit navigatoarele afieaz acelasi document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate ( si formatate ) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare deoarece limbajul HTML este inca incomplet. 1. Structura documentului HTML. Orice document HTML ncepe cu notaia <html> si se termina cu notaia </html>. Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin convenie, toate informaiile HTML ncep cu o paranteza unghiulara deschisa " < " si se termina cu o paranteza unghiulara nchisa " > ". Tag-urile intre aceste paranteze transmit comenzi ctre browser pentru a afia pagina intr-un anumit mod. Unele blocuri prezint delimitator de sfrit de bloc, in timp ce pentru alte blocuri acest delimitator este opional sau chiar interzis. Intre cele doua marcaje <html> si </html> vom introduce doua seciuni: - sectiunea de antet <head>...</head> si - corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi afiat in fereastra browser-ului. O eticheta poate fi scris att cu litere mici, cat si cu litere mari. Adic <html> = <html> = <html>. Caracterele "spaiu" si "CR/LF" ce apar intre etichete sunt ignorate de ctre browser. Deci un prim document HTML ar fi ceva de genul asta: 1<html> 2<head> </head> 3<body> 4</body> 5</html> Aa arata primul document HTML. Copiai-l folosind Copy/Paste intr-un fiier nou si salvai-l ca PRIM.HTM sau PRIM.HTML. Apoi pornii Netscape Navigator sau Internet Explorer, dai CTRL-O si introducei calea spre fiier. Dai OK si ... nimic. Sa nu disperam ... vom aduga primele elemente la pagina noastr. In primul rnd, titlul unei pagini se obine insernd in seciunea <head>...</head> a urmtoarei linii:

<title>Aceasta este prima mea pagina de Web</title> In plus, in seciunea <body>...</body> putem scrie texte cat dorim. Daca nu ntlnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple si le va afia pe ecran. Sa vedem o noua versiune a paginii noastre: 1 <html> 2<head> 3<title>Aceasta este prima mea pagina de Web</title> 4</head> 5 <body> 6Bine ati venit in pagina mea de Web! </body> 7</html> 8 Coninutul blocului <title>...</title> va aprea in bara de titlu a ferestrei browser-ului. Daca acest bloc lipsete intr-o pagina HTML, atunci n bara de titlu a ferestrei browser-ului va aprea numele fiierului. Daca introducem mai multe linii intr-o pagina browser-ul va afia intr-un singur rnd, ntruct caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apar in pagina html. Aceasta comand este marcajul <br> ( de la " line break " - ntrerupere de linie ). Folosind aceleai operaii ca mai sus, vizualizai noua pagina! Vei vedea textul ce apare in fereastra navigatorului. In plus, pagina dvs. va avea un titlu nou, cel introdus de dvs. 1 <html> 2<head> 3<title>Titlul paginii</title> 4</head> 5<body> 6Bine ati venit in <br> pagina mea de Web! </body> 7</html> 8 Blocuri preformatate Pentru ca browser-ul sa interpreteze corect caracterele " spaiu ", " tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>. 1 2 <html> 3 <head> <title>Bloc preformatat </title> 4 </head> 5 <body> 6 <pre> Prima linie 7 A doua linie 8 A treia linie 9 </pre> 10</body> 11</html> 12 Culoarea de fond O culoare poate fi precizata n dou moduri:

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

Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei <body>. Culoarea fondului paginii Web se stabilete cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor = culoare>. Urmtorul exemplu realizeaz o pagin cu fondul de culoare gri. 1 <html> 2<head> 3<title>Culoare de fond </title> 4</head> 5<body bgcolor="gray"> 6O pagina Web cu fondul GRI! 7</body> </html> 8 Culoarea textului Acest lucru se face prin intermediul atributului text al etichetei <body> dup sintaxa <body text=culoare>. In urmtorul exemplu textul are culoarea roie. 1 <html> 2<head> 3<title>culoare textului </title> 4</head> 5<body text="red"> 6Un text de culoare rosie. 7</body> </html> 8 O eticheta poate avea mai multe atribute. De exemplu , o eticheta cu trei atribute arata astfel: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>. Urmtorul exemplu prezint o pagina cu fondul de culoare albastra si textul de culoare galbena. 1 <html> 2<head> 3<title>atribute multiple </title> 4</head> 5<body bgcolor="blue" text="yellow"> 6Fond de culoare albastra si text de culoare galbena. 7</body> </html> 8 Textul afiat este caracterizat de urmtoarele atribute: Mrime ( size), Culoare ( color ), Font (style). Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fr delimitator de sfrit de bloc). <basefont size = numar color = culoare style = font> unde:

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

Domeniul de valabilitate al caracteristicilor precizate de aceasta eticheta se ntinde de la locul in care apare eticheta pana la sfaritul paginii sau pana la urmtoarea eticheta <basefont>. Daca acest atribut lipsete atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browser-ul utilizat. Atributele prestabilite sunt: size = 3, color = black, i style = " Times New Roman " .

Poziionarea coninutului paginii Web fata de marginile ferestrei browser-ului se poate face cu ajutorul a dou atribute ale etichetei <body>:

leftmargin ( stabilete distanta dintre marginea stnga a ferestrei browser-ului si marginea stng a coninutului paginii ); topmargin ( stabilete distanta dintre marginea de sus a ferestrei browser-ului si marginea de sus a coninutului paginii );

1<html> 2<head> 3<title>Configurarea textului si stabilirea marginii </title> </head> 4 <body leftmargin="100" topmargin="50"> 5Textul are atribute implicite. <br> 6<basefont style="Arial" color="blue" size="6">Textul este scris cu fontul "Arial", culoare 7albastru si marime 6. 8</body> 9</html> Stiluri pentru blocurile de text Pentru ca un bloc de text sa apar in pagina evideniat (cu caractere aldine), trebuie inclus intre delimitatorii <b>...</b> ( b vine de la "bold" = ndrzne). Pentru ca un text sa fie scris cu caractere mai mari cu o unitate dect cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>. Pentru ca un text sa fie scris cu caractere mai mici cu o unitate dect cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>. Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> ( i vine de la " italic "). Pentru a insera secvene de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>. Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele <u>...</u> (u vine de la " underline "). Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele <strike>...</strike> sau <s>...</s>. In exemplul urmtor vom utiliza toate etichetele menionate anterior. 1 <html> 2 <head> <title>Stiluri pentru blocuri de text </title> 3 </head> 4 <body> 5 <b>Text scris cu caractere ingrosate.</b><br /> 6 <big>Text cu caractere marite cu o unitate <big>mai mare<big>si mai mare<big>si mai 7 mare.</big></big></big></big> <br><small>Textul este scris cu caractere micsorate cu o unitate <small>mai 8 mic.</small></small><br> 9 <i>Text scris cu caractere italice.</i> 10<br>In aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscirpt.<br> 11<strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike> <br> In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> 12sectoinat. 13</body> 14</html> Eticheta de tip bloc <blink>...</blink> delimiteaz fragmente de text clipitoare. Aceasta eticheta funcioneaz numai in browser-ul Netscape Communicator. 1 2 3 4 5 6
<html> <head> <title>Blocuri de caractere monospatiate si clipitoare </title> </head> <body> Aceasta linie este formata din text normal.<br> Codul functiei f(x,y) este: <code> Function f(x,y) {return x+y;}</code><br> Tastati urmatoarea comanda comanda DOS:

7 <kbd> copy c:\windows\* c:\temp</kbd><br> 8 <tt>Asa scrie un teleprinter</tt><br> Acest cuvant clipeste<blink>Blink</blink> 9 </body> 10</html> 11 12 13 Exemplul urmtor ilustreaz c etichetele pot fi imbricate. Un fragment de text poate fi scris cu aldine i cursive in acelai timp. Pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mrit si cursiv. Blocul <q>...</q> permite inserarea in-line a citatelor. Aceste citate sunt afiate de ctre browser cu caractere cursive. " q " vine de la " in-line quotation " (citate inserate in-line); Si blocurile " q " pot fi imbricate. 1 2 <html> 3 <head> <title>Imbricarea etichetelor </title> 4 </head> 5 <body> 6 Aceasta linie este formata din text normal.<br /> 7 Normal<b>ingrosat<i>ingrosat si italic</i>ingrosat</b>.<br /> <u>subliniat <b> subliniat si ingrosat <big>subliniat, ingrosat si marit.<br> 8 Normal <i>Subliniat, ingrosat, marit si italic.</i></big></b></u> 9 </body> 10</html> 11

2. Formatarea caracterelor, organizarea textului. Un font este caracterizat de urmtoarele atribute:


culoare (stabilita prin atributul color); tipul sau stilul (stabilit prin atributul face); mrimea (definita prin atributul size); mrimea in puncte tipografice (stabilita prin atributul point-size); grosime (definita prin atributul weight).

Toate aceste atribute aparin etichetei, care permite inserarea de blocuri de texte personalizate. Culori O culoare poate fi precizata n dou moduri:

printr-un nume de culoare. printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de constant se formeaz astfel: #rrggbb, unde r, g si b sunt cifre hexazecimale.

Culoarea fontului

Pentru a scrie un fragment de text cu caractere de o anumit culoare se ncadreaz acest fragment ntre deli mitatorii ... avnd stabilit atributul color la valoarea necesara. De exemplu: fragment de text de culoare roie. Familia fontului Pentru a scrie un text intr-o pagin pot fi folosite mai multe fonturi (stiluri de caractere). Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace i fantasy. Tipul de font necesar poate fi stabilit prin atributul face al etichetei. Pot fi introduse mai multe fonturi separate prin virgula. n acest caz browser-ul va utiliza primul font pe care l cunoate. 1 2 <html> 3 <head> 4 <title> Culoarea si familia fontului</title> 5 </head> <body> 6 Aceste linie este scrisa cu caractere normale.<br /> 7 <font color="red">Aceasta linie este rosie.</font><br /> 8 Aici<font color="green">fiecare</font> 9 <font color="blue">cuvant</font> <font color="yellow">are</font> 10<font color="cyan">alta</font> 11<font color="#3478fa">culoare.</font><br /> 12<font face="monospace">Linie scrisa cu caractere monospatiate.</font> <br /> 13<font face="arial">Linie scrisa cu caractere arial.</font> 14</body> 15</html> 16 Mrimea fontului Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei. Valorile acestui atribut pot fi:

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare); +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta; -1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.

Mrimea unui font poate fi stabilita exact cu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numrul astfel precizat reprezint mrimea fontului in puncte tipografice. Acest atribut funcioneaz numai cu Netscape Communicator. 1 <html> 2 <head> 3 <title> Marimea fontului</title> </head> 4 <body> 5 Aceste linie este scrisa cu caractere normale. <br /> 6 <font size="5">Fonturi de marime 5.</font><br /> 7 <basefont size="4">Fonturi de marime 4.</font><br /> 8 <font size="-3">Fonturi de marime 1.</font><br /> 9 <font size="+2">Fonturi de marime 6.</font><br /> 10<font point-size="30">Fonturi de marime 30 pt (numai cu 11/> 12<font point-size="50">Fonturi de marime 50 pt (numai cu 13</body> 14</html> Grosimea unui font

Netcape Communicator).</font> <br Netcape Communicator).</font>

Grosimea unui caracter poate fi definit cu ajutorul atributului weight al etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subire si 900 pentru cel mai gros). 1 <html> 2 <head> 3 <title> Grosimea fontului</title> 4 </head> 5 <body> 6 Aceste linie este scrisa cu caractere 7 <font weight="100">Fonturi de grosime 8 <font weight="500">Fonturi de grosime 9 <font weight="900">Fonturi de grosime </body> 10</html> 11

normale. <br> 100.</font> <br> 500.</font> <br> 900.</font>

Aceste etichete nu se refera la particularitile caracterelor ce compun textul, ci la funciile pe care le poate avea un bloc de text in cadrul paginii Web. Blocuri paragraf Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua si permite:

inserarea unui spaiu suplimentar nainte de blocul paragraf; inserarea unui spaiu suplimentar dup blocul paragraf, daca se folosete delimitatorul </p> (acesta fiind opional); alinierea textului cu ajutorul atributului align, avnd valorile posibile " left ", " center " sau " right ".

<html>

1 <head> 2 <title> Blocuri paragraf</title> 3 </head> <body> 4 Prima linie 5 <p> Lini generata de un paragraf (implicit paragraful este aliniat la stnga). 6 <p align="right">Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat 7 la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la Paragraf aliniat la dreapta. 8 dreapta. <p align="center"> Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat 9 in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in 10centru. Paragraf aliniat in centru. 11</body>
</html>

Blocuri de titlu ntr-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>. <h2>, <h3>, <h4>, <h4>, <h6>. Toate aceste etichete se refer la un bloc de text i trebuie nsoite de o etichet de ncheiere similara. Aceste etichete accept atributul align pentru alinierea titlului blocului de text la stnga (in mod prestabilit ) , in centru si la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari i aldine, pe cnd <h6> folosete caracterele cele mai mici. 1 2 3 4 5 6 7 8
<html> <head> <title> Blocuri de titlu</title> </head> <body> <h1 align="center"> Titlu de marime 1 aliniat in centru </h1> <h2 align="right"> Titlu de marime 2 aliniat la dreapta. </h2> <h4> Titlu de marime 4 aliniat la stnga (implicit) </h4> </body> </html>

9 10 Linii orizontale ntr-o pagin Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <hr>:

align permite alinierea liniei orizontala. Valorile posibile sunt "left"; "center" i "right"; width permite alegerea lungimii liniei; size permite alegerea grosimii liniei; noshade cnd este prezent definete o linie fr umbra; color permite definirea culorii liniei.

1 <html> 2 <head> <title> Linii orizontale</title> 3 </head> 4 <body> 5 <h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea stanga, 6 latime 100%, grosime 2 cu umbra. 7 <hr> Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , fara umbra. 8 align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la dreapta , de 9 <hr latime 150 de pixeli, grosime 12 pixeli , de culoare rosie. 10<hr align="right" width=150 size=12 color="red"> 11</body> 12</html>

3. Liste. Noiuni i marcaje utilizate. Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de definiii, referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic, urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi gestionat printr-o lista de definiii, care este inclusa ntr-o pereche de marcaje de lista de definiii: <dl>...</dl> (de la "definition list" = lista de definiii). Observaii: - Un termen al listei este iniiat de eticheta <dt> (de la "definition term" = termen definit); - Definitia unui termen este iniiata de eticheta <dd> (de la "definition description" = descrierea definiiei); - Definitia unui termen ncepe pe o linie noua si este indentat; 1 <html> 2 <head> 3 <title>Liste_ex1</title> 4 </head> 5 <body><h1 align="center">O lista de definitii</h1><hr> <dl> 6 Glosar de termeni de World Wide Web 7 <dt><b>hypertext</b> 8 <dd> - o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate 9 face legatura catre un alt punct din document sau catre un alt document 10<dt><b>date</b> <dd> - fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de 11<em>informatii</em> care sunt date cu un anumit inteles sau valoare 12<dt><b>informatie</b> 13<dd> - sub-setul de date care are efectiv semnificatie si care este util la momentul curent 14</dl> 15</body> </html> 16 Liste neordonate

O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> (" ul " vine de la " unordered list " = lista neordonata). Fiecare element al listei este iniiat de eticheta <li> (list item). Lista va fi intentata fata de restul paginii Web si fiecare element al listei ncepe pe un rnd noua. 1 2 <html> 3 <head> 4 <title>Liste_ex2</title> 5 </head> 6 <body><h1 align="center">O lista neordonata</h1><hr> Glosar de termeni de World Wide Web 7 <ul>Culori uzuale disponibile prin nume 8 <li>Black 9 <li>White <li>Red 10 <li>Green 11 <li>Blue 12 <li>Yellow 13 <li>Purple <li>Aqua 14 15</ul> 16</body> </html> 17 18 Tag-urile <ul> si <li> pot avea un atribut type care stabilete caracterul afiat n faa fiecrui element al listei. Valorile posibile al acestui atribut sunt:

"circle" (cerc) "disc" (disc plin) (valoarea prestabilita); "square" (ptrat)

Listele neordonate pot fi imbricate pe mai multe niveluri 1 2 3 <html> 4 <head> <title>Liste_ex3</title> 5 </head> 6 <body> 7 <h1 align="center">O lista neordonata de liste 8 <hr> 9 Glosar de termeni de World Wide Web 10<ul>Elemente si atribute a unei pagini HTML <li>Frameset 11 <ul>Atribute: 12 <li>cols <li>rows 13 <li>border 14 </ul> 15 <li>Frame 16 <ul>Atribute: 17 <li>src <li>name 18 <li>scrolling 19 </ul> 20</ul> 21</body> 22</html> 23 24 Liste ordonate

neordonate</h1>

O list ordonat de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> (" ol " vine de la " ordered list " = lista ordonat). Fiecare element al listei este iniiat de eticheta <li> (list item). Lista va fi identat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou. 1 2 <html> 3 <head> 4 <title>listex_4</title> 5 </head> 6 <body> 7 <h1 align="center">O lista ordonata</h1> <hr> 8 <ol>Culori uzuale disponibile prin nume 9 <li>Black <li>White 10 <li>Red 11 <li>Green 12 <li>Blue 13 <li>Yellow 14 <li>Purple <li>Aqua 15 </ol> 16 </body> 17</html> 18 19 Tag-urile <ol> si <li> pot avea un atribut type care stabilete tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt:

" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari ); " a " pentru ordonare de tipul a , b , c , d etc. ( litere mici ); " I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari ); " i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici ); " 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - opiune prestabilita );

Urmtorul exemplu este o lista ordonata cu cifre romane: 1 2 <html> 3 <head> 4 <title>Liste_ex5</title> 5 </head> 6 <body> 7 <h1 align="center">O lista ordonata cu cifre romane</h1> <hr> 8 <ol type="I">Culori uzuale disponibile prin nume 9 <li>Black <li>White 10 <li>Red 11 <li>Green 12 <li>Blue 13 <li>Yellow 14 <li>Purple <li>Aqua 15 </ol> 16 </body> 17</html> 18 19 Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniiala a secvenei de ordonare. Valoarea acestui atribut trebuie sa fie un numar ntreg pozitiv. Urmtorul exemplu este o lista ordonata cu litere mari, ncepnd de la valoarea C.

1 2 <html> 3 <head> 4 <title>Liste_ex6</title> 5 </head> 6 <body> <h1 align="center">O lista ordonata cu litere mari, ncepnd de la valoarea C</h1> 7 <hr> 8 <ol type="A" start="3">Culori uzuale disponibile prin nume <li>Red 9 <li>Green 10 <li>Blue 11 <li>Yellow 12 <li>Purple 13 <li>Aqua 14</ol> 15</body> </html> 16 17 Tag-ul <li> poate avea un atribut value care stabilete valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un numar ntreg pozitiv (vezi urmtorul exemplu): 1 2 <html> 3 <head> 4 <title>Liste_ex7</title> 5 </head> <body> 6 <h1 align="center">O lista ordonata avand itemi setati individual</h1> 7 <hr> 8 <ol start="3">Repetati urmatorii pasi ai algoritmului <li>salvati fisierul; 9 <li value="6">incarcati fisierul in browser; 10 <li>schimbati browserul utilizat 11 <li>incarcati din nou fisierul 12</ol> 13</body> 14</html> 15 Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca n exemplul urmtor: 1 <html> <head><title>listex_8</title></head> 2 <body><h1 align="center">O lista ordonata de liste 3 <ol>Un sistem informatic include: 4 <li>Hardware: 5 <ol> <li>placa de baza 6 <li>procesor 7 <li>memorie 8 <li>harddisk 9 </ol> <li>Software: 10 <ul> 11 <li>Linux 12 <li>Windows 13 <li>OS/2 14 <li>Unix </ul> 15 <li>Software de aplicatie: 16 <ul type="disc"> 17 <li>VisualC++ 18 <li>Java 19 <li>SQL

ordonate si neordonate</h1><hr>

20 </ul> 21 </ol> 22</body> 23</html> 24 25 26 27 28

<li>CorelDraw

O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element al listei este initiat de eticheta <li> ( list item ). Cele mai multe browsere afieaz lista de meniuri ca pe o lista neordonata. O lista de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la " director "). Fiecare element al listei este iniiat de eticheta <li> (list item). Cele mai multe browsere afieaz lista de directoare ca pe o lista neordonata. (Nu se recomanda utilizarea acestori tipuri de liste). Utilizri speciale ale listelor Dac ntr-o list, n loc de elementele acesteia introduse prin <li>, se insereaz un bloc de text, aceasta va fi identat ( ntocmai ca elementele unei liste), exemplu: 1 <html> 2 <head> 3 <title>Liste_ex9</title> </head> 4 <body> 5 <h1>Un bloc de text indentat</h1><hr> 6 <ol>Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de 7 text indentat. bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de 8 Un text indentat. Un bloc de text indentat. 9 </ol> 10</body> 11</html> n exemplul urmtor lista de definiii are itemii <dt> si <dd> multipli: 1 2 <html> 3 <head> 4 <title>Liste_ex10</title> 5 </head> 6 <body><h1 align="center">O lista de definiii speciala</h1> <hr> 7 <dl>Program 8 <dt><b>Luni</b> 9 <dt><b>Marti</b> 10<dt><b>Miercuri</b> 9.00.</i>Insciere 11<dd><i>Ora <dd><i>Ora 11.00.</i>Audieri 12<dd><i>Ora 13.30.</i>Raspunsuri 13</dl> 14</body> 15</html> 16 Ultimul exemplu este o lista neordonata personalizat care utilizeaz pe post de elemente imagini si texte. 1 2 3
<html> <head> <title>Liste_ex11</title> </head>

4 <body><h1>O lista personalizata</h1><hr> 5 <ul>Tipuri de masini Volkswagen sunt:<br /> <img src="images/reddot.gif">Golf<br /> 6 <img src="images/reddot.gif">Jetta<br /> 7 <img src="images/reddot.gif">Passat<br /> 8 <img src="images/reddot.gif">Bora<br /> 9 <img src="images/reddot.gif">Corrado<br /> src="images/reddot.gif">Transporter<br /> 10<img </body> 11</html> 12 13 14

4. Tabele. Noiuni i marcaje utilizate. Tabelele ne permit s cream o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni pentru culoarea fondului, culoarea textului, alinierea textului etc. Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din rnduri. Pentru a insera un rnd intr-un tabel se folosesc etichetele <tr>...</tr> ( de la " table row "= rnd de tabel ).Folosirea etichetei de sfrit </tr> este opional. Un rnd este format din mai multe celule ce conin date. O celula de date se introduce cu eticheta <td>..</td>, exemplu: 1 2 <html> 3 <head> 4 <title>Tabel_ex1</title> 5 </head> <body> 6 <h1 align="center">Un tabel simplu format din 4 linii si 2 coloane</h1> 7 <hr> 8 <table> 9 <tr><td>cell 11</td><td>cell 11</td></tr> 21</td><td>cell 22</td></tr> 10<tr><td>cell <tr><td>cell 31</td><td>cell 32</td></tr> 11<tr><td>cell 41</td><td>cell 42</td></tr> 12</table> 13</body> 14</html> 15 n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se utilizeaz un atribut al etichetei <tabel> numit border. Acest atribut poate primi ca valoare orice numar ntreg ( inclusiv 0 ) si reprezint grosimea n pixeli a chenarului tabelului. Dac atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilit egal cu 1 pixel, o valoare egal cu 0 a grosimii semnific absenta chenarului. Cnd atributul border are o valoare nenul chenarul unui tabel are un aspect tridimensional, exemplu: 1 <head> 2 <title>Tabel_ex2</title> 3 </head> 4 <body> align="center">Un tabel simplu cu chenar</h1> 5 <h1 <hr> 6 <table border="4"> 7 <tr><td>cell 11</td> <td>cell 11</td></tr> 8 <tr><td>cell 21</td> <td>cell 22</td></tr> 9 <tr><td>cell 31</td> <td>cell 32</td></tr> <tr><td>cell 41</td> <td>cell 42</td></tr> 10</table>
<html>

11</body> 12</html> 13 14 15 Alinierea tabelului Pentru a alinia un tabel intr-o pagin Web se utilizeaz atributul align al etichetei <table>, cu urmtoarele valori posibile:

"left " ( valoarea prestabilita ); "center "; "right ".

Alinierea este important pentru textul ce nconjoar tabelul. Astfel :


daca tabelul este aliniat stanga ( <table align="left"> ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului. daca tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi dispus in partea stanga a tabelului. daca tabelul este aliniat pe centru ( <table align="center"> ), atunci textul care urmeaz dup punctul de inserare al tabelului va fi afiat pe toata limea paginii, imediat sub tabel.

<html> <head> <title>Tabel_ex3</title> </head> <body> 1 <h1 align="center">Un tabel aliniat la dreapta</h1> 2 <hr> inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. 3 Text Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. 4 Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. 5 Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de 6 tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte 7 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 8 de tabel. 9 <table border align="right"> 10<tr><td>cell 11</td><td>cell 11</td></tr> 11<tr><td>cell 21</td><td>cell 22</td></tr> 12</table> Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup 13tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text 14dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup 15tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel.Text dup tabel. </body> </html>

Distanta dintre tabel i celelalte elemente din pagina Web poate fi stabilit cu ajutorul atributelor hspace si vspace al etichetei <table>. Valoarea atributului hspace poate fi orice numar pozitiv, inclusiv 0, si reprezint distanta pe orizontala dintre tabel si celelalte elemente ale paginii Web. Valoarea atributului vspace poate fi orice numar pozitiv, inclusiv 0, si reprezint distanta pe verticala dintre tabel si celelalte elemente ale paginii Web. Aceste atribute funcioneaz numai cu Netscape Communicator. Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabilete cu ajutorul atributului bgcolor, care poate fi atasat ntregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>. Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. Dac n tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmtoarea: <td>, <tr>, <table>(cu prioritate cea mai mica). 1 2 <html> 3 <head> 4 <title>Tabel_ex4</title> 5 </head> <body> 6 <h1 align="center">Un tabel simplu colorat</h1> 7 <hr> 8 <table border="3" bgcolor="green"> 9 <tr><td>verde 11</td><td bgcolor="red">rosu 12</td></tr> <tr bgcolor="blue"><td>albastru 21</td><td bgcolor="yellow">galben 22</td></tr> 10<tr bgcolor="cyan"><td>cell 31</td><td>cell 32</td></tr> 11<tr><td>cell 41</td> <td bgcolor="white">cell 42</td></tr> 12</table> 13</body> 14</html> 15 Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei: <font color="valoare">...</font>. Dimensionarea celulei unui tabel Distanta dintre doua celule vecine se definete cu ajutorul atributului cellspacing al etichetei <table>. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, si reprezint distanta in pixeli dintre doua celule vecine. Valoarea prestabilita a atributului cellspacing este 2. 1 2 <html> 3 <head> 4 <title>Tabel_ex5</title> </head> 5 <body> 6 <h1 align="center">Un tabel fara chenar de celule alipite</h1> 7 <hr> 8 <table cellspacing="0"> bgcolor="gray">gri 11</td><td bgcolor="red">rosu 12</td></tr> 9 <tr><td <tr bgcolor="blue"><td>albastru 21</td><td bgcolor="yellow">galben 22</td></tr> 10</table> 11</body> 12</html> 13 Distanta dintre marginea unei celule si coninutul ei poate fi definita cu ajutorul atributului cellpadding al etichetei <table>. Valorile acestui atribut pot fi numere ntregi pozitive, si reprezint distanta in pixeli dintre celule si coninutul ei. Valoarea prestabilita a atributului cellpadding este 1. 1 2 3 4 5 6 7 8
<html> <head> <title>tabelex_6</title> </head> <body><h1 align=center>Un tabel de celule mari</h1> <hr> <table border cellpadding="20"> <tr><td>gri 11</td><td>rosu 12</td></tr> <tr><td>albastru 21</td><td>galben 22</td></tr> </table>

9 </body> 10</html> 11 12 Dimensionarea unui tabel Dimensiunile unui tabel - latime si nlimea - pot fi stabilite exact prin intermediul a doua atribute, width i height, ale etichetei <table>. Valorile acestor atribute pot fi:

numere ntregi pozitive reprezentnd latime respectiv nlimea in pixeli a tabelului; numere ntregi intre 1 si 100, urmate de semnul %, reprezentnd fraciunea din latime si nlimea totala a paginii.

1 2 <html> 3 <head> 4 <title>Tabel_ex7</title> </head> 5 <body> 6 <h1 align="center">Un tabel de de 200 pixeli X 50%</h1> 7 <hr> 8 <table border width="200" height="50%"> 11</td><td>cell 12</td></tr> 9 <tr><td>cell <tr><td>cell 21</td><td>cell 22</td></tr> 10</table> 11</body> 12</html> 13 n exemplul urmtor se utilizeaz un truc care permite afiarea intr-o pagin Web a unui text poziionat n centrul paginii. 1 2 <html> 3 <head> <title>Tabel_ex8</title> 4 </head> 5 <body> 6 <h1 align="center">Un text centrat intr-o pagina</h1> 7 <table width="100%" height="100%"> align="center"><h2>Text centrat.</h2></td></tr> 8 <tr><td </table> 9 </body> 10</html> 11 Titlul unui tabel Unui tabel i se poate ataa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu tabel ). Aceasta eticheta trebuie plasata in interiorul etichetelor <table>...</table>, dar nu in interiorul etichetelor <tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:

" bottom " ( sub tabel ); " top " ( deasupra tabelului ); " left " ( la stanga tabelului ); " right " ( la dreapta tabelului ).

1 <html> <head> 2 <title>Tabel_ex9</title>

3 </head> 4 <body> 5 <h1 align="center">Un tabel cu titlu</h1> <table border><caption align="top">Masini 6 <tr><td>Mercedes</td><td>Citroen</td><td>Jaguar</td></tr> 7 <tr><td>BMW</td><td>Volvo</td><td>Renault</td></tr> 8 </table> 9 </body> 10</html> 11 12 Cap de tabel Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) n loc de <td>. Toate atribute care pot fi ataate etichetei <td> pot fi de asemenea ataate etichetei <th>. Coninutul celulelor definite cu <th> este scris cu caractere aldine si centrat. 1 2 <html> <head> 3 <title>Tabel_ex10</title> 4 </head> 5 <body> 6 <h1 align="center">Un tabel cu titlu si cap de tabel</h1> <table border><caption align="bottom">Preturile masinii 7 <tr><th>Pret</th><th>Citroen</th><th>Jaguar</th><th>BMW</th><th>Volvo</th></tr> 8 <tr><th>In dolari</th><td>5000</td><td>100000</td><td>50000</td><td>80000</td></tr> 9 <tr><th>In 10lei</th><td>2000000</td><td>2000000000</td><td>2000000</td><td>16000000</td></tr> 11</table> </body> 12</html> 13 Alinierea coninutului unei celule Alinierea pe orizontala a coninutului unei celule se face cu ajutorul atributului align care poate lua valorile:

"left" ( la stanga ); "center" ( centrat , valoarea prestabilita ); "right" ( la dreapta ); "char" ( alinierea se face fata de un caracter ).

Alinierea pe verticala a coninutului unei celule se face cu ajutorul atributului valign care poate lua valorile:

"baseline" ( la baza ); "bottom" ( jos ); "middle" ( la mijloc, valoarea prestabilita ); "top" ( sus ).

Aceste atribute pot fi ataate att etichetei <tr> pentru a defini tuturor elementelor celulelor unui rnd, cat si etichetelor <td> si <th> pentru a stabili alinierea textului intr-o singura celula. 1 2 3 4 5 6 7
<html> <head> <title>Tabel_ex11</title> </head> <body> <h1 align="center">Un tabel avand coninutul celulelor aliniate</h1> <table border width="50%" height="50%"> <tr align="right"><td>Aici</td><td>alinierea</td><td>este centru</td><td>dreapta</td></tr> <tr><td align="left">stanga</td><td align="center">centru</td><td valign="top">sus</td><td

8 valign="bottom">jos</td></tr> 9 <tr align="left"><td>aici</td><td>alinierea</td><td>este centru</td><td>stanga (implicita)</td></tr></table> 10</body> 11</html> 12 Dimensionarea exacta a celulelor unui tabel Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a dou atribute ale acestor etichete: width pentru latime i height pentru nlime. Valorile posibile ale acestor atribute sunt:

numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a inaltimii unei celule; procente din latime , respectiv inaltimea tabelului.

1 2 <html> 3 <head> <title>Tabel_ex12</title> 4 </head> 5 <body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1> 6 <hr> 7 <table border> 8 <tr><td width="100" height="150">cell 11</td><td width="100" height="150">cell 11</td></tr> width="100" height="150">cell 21</td><td width="100" height="150">cell 22</td></tr> 9 <tr><td </table> 10</body> 11</html> 12 Tabele de forme oarecare Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor <td> si <th>, o celula se poate extinde peste celule vecine. Astfel:

extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a crui valoare determin numarul de celule care se unific. extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a carui valoare determin numarul de celule care se unific.

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 colspan i rowspan. 1 2 <html> 3 <head> <title>Tabel_ex13</title> 4 </head> 5 <body> 6 <h1 align="center">Un tabel simplu cu chenar</h1> 7 <hr> <table border="3"> 8 <tr><td rowspan="3">cell 11<br>cell 21<br>cell 31</td><td>cell 12</td><td colspan="2" 9 rowspan="3">cell 13, cell 14<br>cell 23, cell 24<br>cell 33, cell 34</td></tr> 10<tr><td>cell 22</td></tr> 11<tr><td>cell 32</td></tr> 12<tr><td>cell 41</td> <td colspan="3">cell 42, cell 43, cell 44</td></tr> </table> 13</body> 14</html> 15

Atributul " nowrap " Atributul nowrap apartine elementelor <td> si <th> ; el interzice ntreruperea unei linii de text.Astfel , n tabel pot aprea coloane cu o lime orict de mare. 1 2 <html> <head> 3 <title>Tabel_ex14</title> 4 </head> 5 <body> 6 <h1 align="center">Un tabel cu celule de latime mare</h1> <hr> 7 <table border> 8 <tr><td>cell 11</td> <td>cell 12</td></tr> 9 <tr><td nowrap>cell 21</td> <td>cell 22 este foarte lata,aceasta celula este foaret 10lata.</td></tr> 11</table> </body> 12</html> 13 Celule vide ale unui tabel Dac un tabel are celule vide, atunci aceste celule vor aparea n tabel far un chenar de delimitare. n scopul de a afia un chenar pentru celule vide se utilizeaz urmatoarele trucuri:

dupa <td> se pune &nbsp;; dupa <td> se pune <br>.

Caracterul &nbsp; ( no break space ) este de fapt caracterul spatiu. Un spaiu ntrodus prin intermediul acestui caracter nu va fi ignorat de browser. 1 2 <html> 3 <head> 4 <title>Tabel_ex15</title> </head> 5 <body> 6 <h1 align="center">Un tabel cu celule vide</h1> 7 <hr> 8 <table border> 11<td><td>cell 12</td><td>cell 13</td></tr> 9 <tr><td>cell <tr><td>&nbsp;</td> <td></td></tr> 10</table> 11</body> 12</html> 13 Atribute Internet Explorer pentru tabele Urmatoarele atribute ale etichetei <table> functioneaza cu Internet Explorer 4.0 , 5.0, 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 chenarul unui tabel; bordercolorlight permite stabilirea culorii pentru chenarul 3D al unui tabel; bordercolordark permite stabilirea culorii pentru chenarul 3D al unui tabel;

1 2 3

<html> <head> <title>Tabel_ex16</title> </head>

4 <body> 5 <h1 align="center">Atribute "Internet Explorer"</h1><hr> <table border="5" background="Taj_Mahal.jpg" cellspacing="15" bordercolor="maroon" 6 bordercolordark="red"> 7 <tr bgcolor="yellow"><td>cell 11</td><td>cell 12</td><td>cell 13</td></tr> 8 <tr bgcolor="yellow"><td>&nbsp;</td><td></td><td></td></tr> 9 </table> 10</body> </html> 11 12 Grupuri de coloane Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt:

span determina numarul de coloane dintr-un grup; width determina o latime unica pentru coloanele din grup; align determina un tip unic de aliniere pentru coloanele din grup.

Exemplu: <colgroup span="3" width="100"></colgroup> ntr-un bloc <colgroup>, coloanele pot avea configurri diferite dac se utilizeaz elementul <col>, care admite atributele:

span identifica acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci coloanele sunt configurate n ordine; width determina o latime pentru coloana identificata prin span; align determina o aliniere pentru coloana identificata prin span.

1 <head> 2 <title>Tabel_ex17</title> 3 </head> 4 <body> <h1 align="center">Grupuri de coloane</h1> 5 <hr> 6 <table width="400" cellspacing="10"> 7 <colgroup><col width="100" align="right"><col width="100" align="center"><col width="200" 8 align="right"></colgroup> valign="top">Text in prima coloana. Text in prima coloana. Text in prima coloana. 9 <tr><td Text in prima coloana.</td> <td valign="top">Text in coloana doua.Text in coloana doua.Text 10in coloana doua.Text in coloana doua.</td><td valign="top">Text in coloana a treia. Text in 11coloana a treia. Text in coloana a treia. Text in coloana a treia.</td></tr> 12</table> 13</body>
</html>

<html>

Atributele frame si rules Atributul frame al etichetei <table> permite specificarea parilor din chenarul unui tabel care vor fi afiate. Valorile posibile ale acestui atribut sunt:

void - elimina toate muchiile exterioare ale tabelului; above - afieaz o muchie in partea superioara a cadrului tabelului; below - afieaz o muchie in partea inferioara a cadrului tabelului; hsides - afieaz cate o muchie in partea superioara si inferioara cadrului tabelului; lhs - afieaz o muchie in partea din stanga a cadrului tabelului; rhs - afieaz o muchie in partea din dreapta a cadrului tabelului; vsides - afieaz o muchie in partea din stanga si din dreapta a cadrului tabelului; box - afieaz o muchie pe toate laturile cadrului tabelului; border - afieaz o muchie pe toate laturile cadrului tabelului;

Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt:

none - elimina toate muchiile interioare ale tabelului; groups - afieaz muchii orizontale intre toate grupurile din tabel.Grupurile sunt specificate prin elementele <thead>, <tbody>, <tfoot>si <colgroup>. rows - afieaz muchii orizontale intre toate liniile tabelului; cols - afieaz muchii verticale intre toate coloanele tabelului; all - afieaz muchii intre toate liniile si coloanele;

1 2 <html> 3 <head> <title>Tabel_ex18</title> 4 </head> 5 <body> 6 <h1 align="center">Atributele frames si rules</h1> 7 <table width="400" frame="box" rules="rows" cellspacing="10"> 8 <tr><td>cell 11</td><td>cell 12</td><td>cell 13</td></tr> <tr><td>cell 21</td><td>cell 22</td><td>cell 23</td></tr> 9 </table> 10</body> 11</html> 12 Subblocurile unui tabel n specificatiile HTML 4.0, continutul unui tabel poate fi mprit n subblocuri prin elementele:

<thead><tr><td>...</thead> ( un singur rand ); <tfoot><tr><td>...</tfoot> ( un singur rand ); <tbody><tr><td>...</tbody> ( oricate randuri );

ntr-un tabel exista un singur subbloc de tipul <thead> i un singur subbloc de tipul <tfoot>, dar pot exista mai multe subblocuri de tip <tbody>.

5. Operarea cu obiecte. Inserarea imaginilor, sunetelor i videoclipurilor. 5.1.Inserarea imaginilor Folosirea imaginilor sporete atractivitatea i designul paginii, duce la o mai bun inelegere a mesajului, dar trebuie luat n consideraie i faptul c excesul de imagini va duce la ncrcarea greoaie a site-ului. Exist numeroase formate grafice, dar cele mai rspndite sunt:

GIF (Graphics Interchange Format) introdus de Compuserve JPEG (Joint Photographic Expert Group) PNG (Portable Network Graphic Format Grafic portabil n reea)

Aceste formate sunt dependente de platform. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaie de imagine. Fiecare pixel necesit un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numrul de culori, compresia, transparena, ntreeserea i animaia. Asemnrile i deosebirile dintre cele trei formate grafice sunt:

Imaginile GIF pot utiliza doar 256 de culori, avnd nevoie de 8 bii, n timp ce formatele JPEG i PNG pot utiliza milioane de culori, avnd 24 de bii de culoare, respectiv 32 de bii /pixeli de culoare. Ceea ce face formatul GIF att de utilizat nu este numai paleta mic de culori (256), dar i posibilitatea reducerii numrului

de culori, astfel, dac este nevoie doar de 2 culori, se utilizeaz numai un bit, ceea ce reduce dimensiunea fiierului de 8 ori. Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fiierelor. Comprimarea se poate face, n mod diferit, pentru fiecare format, i, din aceste motive, ele pot avea dimensiuni mai mici ntr-un format dect n altul. Formatele GIF i PNG admit culoarea transparent, n timp ce formatul JPEG nu admite transparena. Formatele GIF i PNG admit animaia, n timp ce, cu formatul JPEG, nu se poate obine animaie. De exemplu, pentru a obine animaie pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder. Toate cele trei formate accept ntreeserea. De exemplu, cnd se vizualizeaz o pagin web, se pot observa imaginile care apar linie cu linie, de la forma brut pn la redarea final, aceasta reprezint ntreeserea. Dei dimensiunea fiierelor crete cu pn la 10%, cu ajutorul acestei ntreeseri, vizitatorul poate s-i fac o imagine despre ceea ce se va descrca.

Avnd n vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate:

GIF pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorit dimensiunii mici a fiierelor. JPEG pentru fotografii, cnd se dorete s se redea ct mai exact culoarea real a imaginii. PNG pentru desene complexe, dar i pentru fotografii, acesta fiind formatul care mbin caracteristicile celor dou.

Imaginile pot fi descrcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezint standarde de identificare a resurselor (de exemplu, fiiere) i pot fi adrese URL absolute i relative. Adrese URL absolute Adresele absolute identific locaia unui fiier imagine de pe Internet sau alte calculatoare conectate la Internet i au sintaxa: protocol/nume_calculator/cale/nume_fiier Un exemplu de adres URL absolut: http://ciobanu.cich.md/images/eu.jpg unde:

htpp:// este protocolul Internet utilizat; ciobanu.cich.md este numele calculatorului; images este calea pn la fiierul imagine dorit; eu.jpg este fiierul imagine C.A.

Adrese URL relative O adres relativ identific locaia unei imagini, descriind o cale relativ la directorul curent unde se afl fiierul imagine. Adresele relative se refer la localizarea fiierului imagine de pe calculatorul personal i are sintaxa: cale/nume_fiier. Referirea la: directorul printe se poate face prin ../ directorul rdcin se poate face prin / Un exemplu de adres URL relativ: /../../../friend.jpg sau se mai poate scrie c:/windows/web/wallpaper/friend.jpg Toate imaginile cu care vom lucra vor avea adresa URL exprimat n funcie de directorul ce conine documentul HTML care face referire la imagine, adic adres relativ. Imaginile se inseraez n pagini cu ajutorul tag-ului <img>, care este un element inline, adic poate fi inserat oriunde n pagin. Sintaxa acestui element este: <img atribute>. n continuare este prezentat un exemplu de utilizare a elementului <img>: 1<html>

2<head></head> 3<body> Hotelul TRUMP Taj Mahal 4<img src="Taj_Mahal.jpg" height="150" width="150" border="4"> de la Atlantic City 5<body> 6<html> 7 Pentru ca acest exemplu s poat fi executat, trebuie ca fiierul Taj_Mahal.jpg s fie n acelai folder cu pagina, deoarece nu s-a indicat nicio adres. Atributele elementului img Atributele elementului <img> sunt: src, alt, align, border, height, width,hspace, vspace. n continuare vor fi descrise succint aceste atribute. Atributul src Atributul src este un atribut obligatoriu al elementului IMG, care identific fiierul ce conine imaginea care se dorete a fi inserat. Fiierele imagine pot avea extensia: .jpg, jpeg, png etc. Fiierul care conine imaginea se gsete n directorul curent (ca n exemplul de mai sus), n alt folder din calculatorul curent sau n reeaua web. n cazul n care fiierul se afl:

n alt locaie dect directorul curent, numele fiierului trebuie precedat de calea relativ la directorul curent; n reeaua web, trebuie dat adresa URL absolut, ca de exemplu http://cich.md/galerie/img_1631.jpg.

Atributul alt Exist posibilitatea ca imaginile s nu se poat ncrca din diferite motive, situaie n care se folosete atributul alt al elementului <img>. Valoarea acestui atribut este un text, care va fi afiat n locul imaginii. 1<html> 2<head></head> 3<body> <img src="Taj_Mahal.jpg" height =150 width = 150 alt="Hotelul TRUMP Taj Mahal">de la Atlantic 4City 5</body> 6</html> Atributul align Atributul align indic browser-ului cum va fi aliniat poza fa de text. n lipsa unei opiuni, poza este plasat acolo unde este scris n cod (<img>este element inline, iar textul ncepe de la baza pozei).Valorile atributului sunt:

left aliniere la stnga i textul curge pe lng imagine n dreapta ei, ncepnd din partea superioar; right aliniere la dreapta i textul curge pe lng imagine n stnga ei, ncepnd din partea superioar ; top textul este plasat n partea superioar a imaginii; middle textul are plasat, la mijlocul imaginii, numai primul rnd, restul continund sub imagine; bottom textul este plasat n partea de jos a imaginii i continu sub imagine.

n exemplul urmtor se poate vedea modul de aliniere a imaginii ntr-o pagin: 1 2 3 4 5 6 7 8


<html> <head> </head> <body> <h2 align="center">Alinieri Imagini</h2> <pre>Aliniere Bottom </pre> <img src="Taj_Mahal.jpg" height="100" width="100" align="bottom"> Aceasta este o imagine aliniata <i>bottom </i> care este alinierea implicita pe verticala. Numai primul rnd este aliniat bottom restul textului este sub imagine. <pre>Aliniere Top</pre>

9 <img src="Taj_Mahal.jpg" height ="100" width="100" align="top"> 10Aceasta este o imagine aliniata <i>Top </i>, care este alinierea <i> sus</i> pe verticala. Numai primul rnd este aliniat <i>Top </i> restul textului este sub imagine. 11<pre>Aliniere Middle </pre> 12<img src="Taj_Mahal.jpg" height="100" width="100" align="middle"> 13Aceasta este o imagine aliniata <i>Middle</i> care este alinierea <i>pe centru </i> pe 14verticala. primul rind este aliniat <iI>Middle </i> restul textului este sub imagine. 15Numai <pre>Aliniere Left </pre> 16<img src="Taj_Mahal.jpg" height="100" width="100" align="left"> 17Aceasta este o imagine aliniata<i>Left</i>care este alinierea<i>stinga</i> pe orizontala. 18<p>Textul curge pe lng poz n dreapta ei. 19<pre>Aliniere Right </pre> <img src="Taj_Mahal.jpg" height="100" width="100" align="right"> 20Aceasta este o imagine aliniata <i>Right</i> care este alinierea <i>dreapta</i> pe 21orizontala. 22<p>Textul curge pe linga poz n stnga ei. 23</body> 24</html> 25 26 27 Atributul border Atunci cnd se insereaz o imagine, browser-ul o va afia fr chenar. Pentru a aduga un chenar unei imagini se folosete atributul border=nr_pixeli, unde nr_pixeli reprezint grosimea chenarului n pixeli. Valoarea implicit este 0. Dac n exemplul de mai sus se mai adaug acest atribut <img src="Taj_Mahal.jpg" height ="150" width = "150" border = "4"> browser-ul va afia: vezi ... Atributele width i height Imaginea este transferat de browser-e de la adresele URL la adresa de unde se vizualizeaz pagina, la dimensiunile ei reale. Pentru a redimensiona o imagine pe lime se folosete atributul width, iar pe nlime se folosete atributul height. Redimensionarea unei imagini se face n mod absolut n pixeli sau prin raportare la ecran, astfel c valorile acestor atribute pot fi date n:

Numere naturale, ce reprezint dimensiunea n pixeli; n procente, ce reprezint o fraciune din dimensiunea ferestrei.

OBSERVAII! 1. Dac se modific doar o dimensiune, imaginea va fi afiat de browser proporional; 2. Dac se modific ambele dimensiuni, imaginea va fi afiat de browser deformat. Un exemplu de redimensionare a imaginii este dat mai jos. 1<html> <head></head> 2<body> 3<img src="Taj_Mahal.jpg" height="150" width="150" alt="Hotelul TRUMP Taj Mahal">de la Atlantic 4City 5<img src="Taj_Mahal.jpg" width="80" height="200" alt="Hotelul TRUMP Taj Mahal">de la Atlantic 6City <img src="Taj_Mahal.jpg" height="350" alt="Hotelul TRUMP Taj Mahal">de la Atlantic City 7</body> 8</html> Atributele hspace i vspace

Aceste atribute au acelai efect ca i atributele cu acelai nume ale elementului <table>, i, anume, asigur distana de la imagine la celelalte componente din pagin, pe orizontal (hspace) i pe vertical (vspace), adic definesc spaii albe n jurul imaginilor. Un exemplu n care sunt folosite aceste atribute este dat mai jos.
<p><html> <head></head> 1 <body> Mahal-ul a fost construit de al cincilea mprat mogul, Shah Jahan, n memoria celei 2 <p>Taj de-a doua sotii 3 Mumtaz Mahal, printesa persan musulman. mprteasa a murit dup naterea celui de-al 144 lea copil, alturi de soul 5 su, n timpul campaniei de zdrobire a rebeliunilor din Burhanpur. Moartea ei l-a afectat 6 ntr-att pe mprat nct prul i-a albit n numai cteva luni. nainte de ultima suflare Mumtaz l-a rugat pe mprat patru 7 lucruri: s-i construiasc un mormnt, 8 s se recstoreasc, sa-i iubeasc fiii i s-i viziteze mormntul la aniversare. ahul a 9 pierdut la decesul soiei sale 10nu numai o consoart, ci i un abil i inteligent sfetnic politic. Aa a jurat mpratul c 11va construi un edificiu funerar mare i fr egal n lume.</p> 12<p>Hotelul TRUMP Taj Mahal <img src="Taj_Mahal.jpg" height="150" width="150" alt="Hotelul 13TRUMP Taj Mahal" hspace="50" vspace="20"> de la Atlantic City </body> </html>

Atributul clear al elementului BR Dac se dorete a se terge textul din jurul unei imagini se folosete elementul <br clear=valoare>, unde valoare poate fi:

all se terge tot textul din jurul imaginii left se terge tot textul din stnga imaginii right se terge tot textul din dreapta imaginii none se las textul din jurul imaginii

n exemplul de mai sus se adaug <BR clear=right>, dup elementul <img> O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei <body>, avnd ca valoare adresa URL a imaginii. Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran. 1 2 <html> 3 <head><title>Imagini pentru fundal</title><head> 4 <body background="../images/bg.gif"> 5 <pre> 1 6 2 7 3 8 4 9 5 106 7 118 129 13</pre> 14</body> 15</html> 16 Utilizari speciale ale imaginilor

Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.Printre aceste utilizri speciale putem enumera:

Linii orizontale formate cu ajutorul imaginilor; Simboluri speciale pentru elementele unei liste neordonate.

5.2.Inserarea sunetelor si videoclipurilor Multimedia se prezint ntr-o multitudine de formate, iar pe Internet vei gsi multe dintre aceste elemente nglobate n pagini web. Browser-ele actuale ofer suport pentru multe dintre aceste formate, dar nu pentru toate. Suportul pentru sunete, animaii i video este tratat n mod diferit de browsere diferite. Unele elemente pot fi manevrate intern, altele necesit anumite plug-in-uri, n vreme ce altele pot solicita activarea anumitor controale ActiveX. n acest capitol vei afla despre diferitele formate multimedia i cum s le folosii ntr-o pagin web. Elementele multimedia (precum sunetele i video) sunt stocate n fiiere media. Modalitatea cea mai simpl de a determina tipul unui fiier media este de a analiza extensia fiierului respectiv . Formatul fiierelor multimedia ce conin sunete Sunetele pot fi stocate n diferite formate de fiiere. Astfel deosebim: a) Formatul MIDI MIDI (Musical Instrument Digital Interface) este un format ce permite transmiterea de informaii muzicale ntre dispozitive electronice muzicale (precum sintetizatoare) i plcile de sunet ale calculatoarelor.Formatul MIDI a fost implementat n 1982 de ctre industria muzical. Acest format este foarte flexibil i poate fi folosit pentru (aproape) orice, de la crearea unor sunete foarte simple, pn la crearea unora cu adevrat profesionale.Fieierele MIDI nu conin sunete, ci un set de instruciuni digitale muzicale (note muzicale) care pot fi interpretate de plcile de sunet ale calculatoarelor.Dezavantajul la acest tip de fiiere const n faptul c nu pot stoca muzic (n toat complexitatea ei), ci doar note muzicale.Avantajul l constituie mrimea mic a acestor fiiere, prin urmare se pot ncrca uor ntr-o pagin web, precum i faptul c acest format este suportat de majoritatea sistemelor de operare i de cele mai populare browsere de Internet.Fiierele de tip MIDI au extensia .mid sau .midi. b) Formatul RealAudio Formatul RealAudio a fost dezvoltat pentru Internet de ctre Real Media. Acest format suport chiar i video.Formatul permite difuzarea de informaii audio (muzic on-line, Internet radio) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip RealAudio au extensia .rm sau .ram. c) Formatul AU Acest formatul a fost dezvoltat de ctre Sun Microsystems i este suportat de majoritatea sistemelor de operare.Aceste fiierele au extensia .au. d) Formatul AIFF AIFF (Audio Interchange File Format) a fost dezvoltat de ctre Apple. Acest tip de fiiere nu sunt suportate de toate browser-ele.Aceste fiierele au extensia .aif sau .aiff. e) Formatul SND SND (Sound) a fost dezvoltat, de asemenea, de ctre Apple i au acelai dezavantaj, i anume c nu sunt suportate de toate browser-ele.Aceste fiierele au extensia .snd. f) Formatul WAVE

WAVE (waveform) a fost dezvoltat de ctre IBM i Microsoft. Este un format suportat de toate computerele pe care ruleaz Windows i este recunoscut de majoritatea browsere-lor.Fiierele de tip WAVE au extensia .wav. g) Formatul MP3 Fiierele MP3 sunt de fapt fiiere MPEG, dezvoltate iniial pentru video de ctre Moving Pictures Experts Group. Se poate afirma c fiierele MP3 reprezint partea de sunet dintr-un fiiere video n format MPEG.MP3 este n prezent unul dintre cele mai populare formate folosite la nregistrarea muzicii. Sistemul de codificare MP3 combin o bun compresie (ce duce la fiiere mici) cu calitate nalt. Este de ateptat ca pe viitor toate sistemele de operare s ofere suport pentru acest tip de format.Fiierele de tip MP3 au extensia .mp3 sau .mpga. n funcie de scopul pentru care creai o pagin web multimedia va trebui s v orientai i asupra unui anumit format de fiier. Astfel, dac dorii ca sunetele nregistrate (muzic sau de alt tip) s poat fi asculatet de toi vizitatorii paginii web, atunci trebuie s folosii fiiere n format WAV, ntruct este cel mai popular format pe Internet i este suportat de majoritatea browsere-lor.Dac pagina web este despre nregistrri muzicale, atunci formatul cel mai potrivit este MP3. Formatul fiierelor multimedia ce conin video i imaginile video pot fi stocate n diferite formate de fiiere. Astfel deosebim: a) Formatul AVI Formatul AVI (Audio Video Interleave) a fost dezvoltat de ctre Microsoft. Este un format suportat de toate computerele pe care ruleaz Windows i este recunoscut de majoritatea browsere-lor. Dei este un format des ntlnit pe Internet, nu este ntotdeauna suportat de calculatoarele cu sisteme de operare non-Windows.Fiierele de tip AVI au extensia .avi. b) Formatul Windows Media Acest formatul a fost dezvoltat de ctre Microsoft. i acest format este unul suportat de toate computerele pe care ruleaz Windows, dar nu este suportat de calculatoarele cu sisteme de operare non-Windows dect n urma instalrii unor extra componente (playere specializate).Fiierele de tip Windows Media au extensia .wmv. c) Formatul MPEG Formatul MPEG (Moving Pictures Expert Group) este n prezent unul dintre cele mai populare formate folosite pe Internet. Acest format este suportat de majoritatea sistemelor de operare i de cele mai populare browsere de Internet.Fiierele de tip MPEG au extensia .mpg sau .mpeg. d) Formatul QuickTime Formatul QuickTime a fost dezvoltat de ctre Apple i nu poate rula pe platformele Windows fr instalarea unui player specializat.Fiierele de tip QuickTime au extensia .mov sau .qtm. e) Formatul RealVideo Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media.Formatul permite difuzarea de informaii video (video on-line, Internet video) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip RealVideo au extensia .rm sau .ram. f) Formatul Shockwave (Flash) Formatul Shockwave a fost dezvoltat de ctre Macromedia. Acest format necesit instalarea unui player specializat pentru a putea rula. n prezent, aceast component este oferit preinstalat de ultimele versiuni ale browsere-lor Netscape i Internet Explorer.Fiierele de tip Shockwave au extensia .swf. Adugarea de informaii multimedia unei pagini web

Informaiile multimedia pot fi redate direct de browser sau prin intermediul unui program ajuttor (un player specializat), n funcie de elementul HTML i de formatul fiierului multimedia folosit. Cea mai simpl cale de a realiza acest lucru este prin folosirea unei ancore (link) care s duc la sursa elementului multimedia. Este cea mai prietenoas metod ntruct ofer posibilitatea vizitatorilor de a alege ntre a vedea o pagin web cu elemente multimedia sau fr acestea. n acest caz pagina se ncarc mult mai repede nemaifiind nevoie s se ncarce toate informaiile multimedia. O metod specific, mai complex, ce are ca rezultat includerea n pagina web (ca parte integrant din aceasta) a unor informaii multimedia, se realizeaz prin intermediul elementului <OBJECT>. Not: Dei, n funcie de browser-ul folosit, mai pot fi folosite i alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, i <EMBED>, recunoscut de Internet Explorer i Netscape, consoriul W3C (World Wide Web Consortium) recomand utilizarea elementului <OBJECT>. Atributele utilizate cu acest element sunt: Atribut archive classid codebase codetype data declare height name standby tabindex type width Descriere Precizeaz locaia (URL-ul) fiierelor arhiv. Precizeaz locaia (URL-ul) obiectului. Valorile posibile depind de proiectantul elementului de control. n Windows, aceste valori sunt nscrise n regitri i pot fi accesate cu aplicaia Registry Editor. Precizeaz calea (URI-ul) n care se gsete clasa obiectului specificat prin atributele classid, data i archive. Specific tipul fiierului specificat prin atributul classid. Precizeaz numele i locaia (URL-ul) obiectului. Se poate folosi mpreun sau ca o alternativ a atributului classid, n funcie de tipul obiectului. Cnd este prezent, acet atribut face ca definiia curent introdus de elementul <OBJECT> s fie tratat ca o simpl declaraie. Specific nlimea suprafeei n care va fi afiat obiectul. Precizeaz denumirea obiectului (cnd acesta este cuprins ntr-un formular). Precizeaz textul ce va fi afiat pn cnd este ncrcat obiectul. Precizeaz poziia elementului curent n document (ordinea n care va fi focalizat de utilizator cnd se folosete tastatura). Determin tipul MIME asociat cu fiierul respectiv. Este un atribut opional dar recomandat cnd se folosete atributul data. Specific limea suprafeei n care va fi afiat obiectul.

Acest element necesit n mod obligatoriu tag-ul de nchidere corespunztor </OBJECT>. mpreun cu elementul <OBJECT> (n interiorul acestuia) se folosete i elementul asociat <PARAM> care definete parametrii elementului <OBJECT>. Atributele utilizate cu acest element sunt: Atribut id name type value valuetype Descriere Precizeaz un identificator unic pentru element. Precizeaz o denumire pentru element. Determin tipul coninutului. Specific valoarea parametrului. Specific tipul valoarii parametrului.

Elementul <OBJECT> poate suporta diferite tipuri de informaii multimedia, cum ar fi imagini, sunete, video, pagini web etc. n funcie de tipul acestor informaii, difer i sintaxa folosit n limbajul HTML. Astfel, pentru a insera o imagine (n format .jpg), prin intermediul elementului <OBJECT>, se folosete urmtoarea sintax: <OBJECT HEIGHT="..." WIDTH="..." TYPE="image/jpeg" DATA="nume_fisier.jpg"> </OBJECT> Pentru a insera un sunet (n format .wav) se folosete urmtoarea sintax: <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="nume_fisier.wmv"> </OBJECT> Pentru a insera un film (n format .wmv) se folosete urmtoarea sintax: <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="nume_fisier.wmv"> </OBJECT> Pentru a insera o pagin web se folosete urmtoarea sintax: <OBJECT TYPE="text/html" HEIGHT="..." WIDTH="..." DATA="http://www.pagina_web.com"> </OBJECT> Pentru a insera o animaie creat n Flash (n format .swf) se folosete urmtoarea sintax: <OBJECT WIDTH="..." HEIGHT="..." CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <PARAM NAME="SRC" VALUE=" nume_fisier.swf"> </OBJECT> Inserarea unui film QuickTime ntr-o pagin web Formatul QuickTime a fost dezvoltat de ctre Apple i, dei este un format des ntlnit pe Internet, nu poate rula pe platformele Windows fr instalarea unui player specializat. Fiierele de tip QuickTime au extensia .mov sau .qtm. Cu ajutorul elementului <OBJECT> poate fi uor adugat cod ntr-o pagin web astfel nct un film QuickTime s poat fi inserat ntr-o pagin web. Astfel, se poate seta instalarea automat a unui player QuickTime n cazul n care nu este deja instalat. Sintaxa folosit n mod uzual este de forma urmtoare: <OBJECT WIDTH="240" HEIGHT="300" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="sample.mov"> <PARAM NAME="autoplay" VALUE="true"> <PARAM NAME="controller" VALUE="true"> </OBJECT> Atributele width i height trebuie setate astfel nct s corespund dimensiunii fimului QuickTime (n pixeli). Atributul classid identific n mod unic software-ul ce va rula filmul. Trebuie setat "clsid:02BF25D5-8C17-4B23BC80-D3488ABDDC6B" astfel nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte ca filmul s poat fi rulat. Dac utilizatorul nu are instalat respectivul control ActiveX, browser-ul poate n mod automat s-l descarce i s-l instaleze. Atributul codebase specific calea (URI-ul) n care se gsete clasa obiectului specificat prin atributul clsid. Internet Explorer folosete acest atribut pentru a specifica locaia de unde poate fi descrcat player-ul corespunztor. n acest

caz, trebuie setat "http://www.apple.com/qtactivex/qtplugin.cab", aceasta fiind locaia unde se gsete ultima variant a player-ului QuickTime. Parametrul src trebuie s se orienteze asupra fiierului ce conine filmul. Parametrul autoplay se seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat. La fel i parametrul controller se seteaz "true" n cazul n care se dorete s fie afiat bara de control a player-ului. Inserarea unui film Real Video ntr-o pagin web Formatul RealVideo a fost dezvoltat pentru Internet de ctre Real Media. Formatul permite difuzarea de informaii video (video on-line, Internet video) cu lime de band joas. Din cauza acestei limi de band, calitatea este, de cele mai multe ori, slab.Fiierele de tip RealVideo au extensia .rm sau .ram. Cu ajutorul elementului <OBJECT> se introduce codul n pagina web astfel nct filmele Real Video s poat fi inserate ntr-o pagin web. Spre deosebire de formatul QuickTime, nu se poate seta instalarea automat a player-ului corespunztor n cazul n care nu este deja instalat. Prin urmare, nainte de a putea rula un film n format Real Video, este necesar instalarea programului RealPlayer. Versiunea pentru Windows poate fi descrcat de la adresa http://uk.real.com/?mode=rp . Sintaxa folosit n mod uzual este de forma urmtoare: <OBJECT WIDTH="320" HEIGHT="240" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B0020AFBBCCFA"> <PARAM NAME="controls" VALUE="All"> <PARAM NAME="autostart" VALUE="true"> <PARAM NAME="src" VALUE="sample.rm"> </OBJECT> Atributele width i height trebuie setate astfel nct s corespund dimensiunii fimului Real Video (n pixeli). Atributul classid identific n mod unic software-ul ce va rula filmul. Trebuie setat "clsid: CFCDAA03-8BE4-11cfB84B-0020AFBBCCFA" astfel nct s identifice controlul ActiveX ce trebuie instalat pe computer nainte ca filmul s poat fi rulat. Parametrul src trebuie s se orienteze asupra fiierului ce conine filmul. Parametrul autostart se seteaz "true" n cazul n care se dorete ca filmul s nceap s ruleze automat. Parametrul controls se seteaz "All" n cazul n care se dorete s fie afiat bara de control a player-ului sau "ImageWindow " n cazul n care NU se dorete s fie afiat bara de control a player-ului. Alte metode de inserare a unor sunete ntr-o pagin web Aa cum am atras atenia anterior, pentru introducerea de sunete ntr-o pagin web mai pot fi folosite i alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, i <EMBED>, recunoscut de Internet Explorer i Netscape.Elementul <BGSOUND> este folosit pentru a insera un sunet pe fundalul unei pagini web. Fiierele suportate de acest element pot fi n format WAV, AU sau MID. Atributele caracteristice acestui element sunt: Atribut balance delay id loop src title Descriere Precizeaz balansul. Poate lua valori ntre -10000 (100% stnga) i +10000 (100% dreapta). Definete timpul de pauz dintre repetiii. Definete un identificator atribuit sunetului. Precizeaz de cte ori va fi repetat sunetul (-1 = infinit). Precizeaz locaia (URL-ul) fiierului ce conine sunete. Precizeaz un titlu atribuit sunetului.

volume

Precizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.).

Sintaxa folosirii acestui element este foarte simpl: <html> <body> <H2>Muzica in fundal </H2> <BGSOUND SRC="http://ciobanu.cich.md/muz/town.mid"> </body> </html> Folosind codul de mai sus vei obine o pagin web pe fundalul crei se va auzi o pies instrumental.Elementul <EMBED> este folosit pentru a insera elemente multimedia ntr-o pagin web n cazul browsere-lor care nu suport elementul <OBJECT>. Elementul <OBJECT> poate fi folosit cu browserele mai noi, care suport controale ActiveX (Internet Explorer 5), n vreme ce elementul <EMBED> este recomandat s fie folosit pentru browserele mai vechi. Pentru compatibilitate, se recomand folosirea simultan a celor dou elemente. n aceast situaie, un browser care recunoate elementul <OBJECT> va ignora elementul <EMBED>. Atributele caracteristice acestui element sunt: Atribut autostart height hidden src width volume Descriere Stabilete dac obiectul multimedia pornete n mod automat la ncrcarea paginii web. Poate lua valorile true sau false. Specific nlimea suprafeei n care va fi afiat obiectul. Stabilete dac obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate lua valorile true sau false. Precizeaz locaia (URL-ul) fiierului ce conine sunete. Specific limea suprafeei n care va fi afiat obiectul. Precizeaz volumul. Poate lua valori ntre 0 (max.) i -10000 (min.).

mpreun cu elementul <EMBED> se recomand folosirea elementului <NOEMBED> care ar trebui s conin informaii ce vor fi afiate n cazul n care browser-ul nu suport elementul <EMBED>. Din nefericire, un browser care suport elementul <EMBED> va ignora elementul <NOEMBED>, chiar dac este incapabil s afieze obiectul introdus de elementul <EMBED>. Sintaxa recomandat pentru folosirea acestui element este urmtoarea: <EMBED SRC="http://ciobanu.cich.md/cale/fiier_multimedia" WIDTH="..." HEIGHT="..." > <NOEMBED> <P>Din pcate nu avei instalat plugin-ul corespunztor pentru a vedea acest tip de fiier multimedia. Putei vedea n continuare o imagine edificatoare. <IMG SRC="http://ciobanu.cich.md/cale/fiier_imagine" WIDTH="..." HEIGHT="..." ALT="o imagine edificatoare"> </NOEMBED> Se poate folosi chiar i o combinaie ntre elementele <EMBED> i <BGSOUND>, astfel nct, dac unul din elemente nu este suportat de browser, s fie recunoscut cellalt. Folosirea codului urmtor: 1<body> 2<embed src="m_v/RM.mid" width ="100" height="40" > 3<noembed> 4<h2>Muzica in fundal </h2> src="m_v/RM.mid"> 5<bgsound </noembed>
<html>

6</body> 7</html> 8 9 Not: Bara de control afiat aparine player-ului QuickTime deoarece a fost setat ca "Default Player" pentru fiierele de tip .MID. Aplicaie practic Pentru exemplificare, vom crea un fiier test.html ce va cuprinde o parte dintre elementele prezentate anterior: 1 2 3 <html> 4 <head> 5 <title>Adaugarea de informatii multimedia unei pagini web</title> 6 </head> <body> 7 <h2>Inserarea unei imagini</h2> 8 <OBJECT HEIGHT="200" WIDTH="200" TYPE="image/jpeg" DATA="../images/Taj_Mahal.jpg"> 9 </OBJECT> 10<BR> 11 unui sunet (format .wav)</H2> 12<H2>Inserarea <OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> 13<PARAM NAME="FileName" VALUE="Ready.wav"> 14<EMBED SRC="m_v/Ready.wav" WIDTH="100" HEIGHT="40" > 15<NOEMBED> Browser-ul dvs. nu suport elementele OBJECT i nici EMBED</NOEMBED> 16</OBJECT> <BR> 17<H2>Inserarea unui film (format .wmv)</H2> 18<OBJECT CLASSID="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> 19<PARAM NAME="FileName" VALUE="m_v/news.wmv"> 20</OBJECT> 21<BR> <H2>Inserarea unei pagini web</H2> 22<OBJECT TYPE="text/html" HEIGHT="200" WIDTH="400" DATA="ex40.html"> 23</OBJECT> 24<BR> 25<H2>Inserarea unei animatii Flash (format .swf)</H2> <OBJECT WIDTH="400" HEIGHT="200" CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 26CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> 27<PARAM NAME="SRC" VALUE="flash.swf"> 28</OBJECT> 29</body> 30</html> 31 32 1 2 3 4 5 6 7 8 9 1 0 1 1
<html> <head> <title>Adaugarea de informatii multimedia unei pagini web</title> </head> <body> <object id="MediaPlayer" width="320" height="286" classid="CLSID:22D6f312-B0F6-11D0-94AB0080C74C7E95" standby="Loading Windows Media Player components..." type="application/xoleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4, 7,1112"> <param name="news.wmv>" value="m_v/news.wmv"> <param name="Showcontrols" value="True"> <param name="autoStart" value="True"> <param name="wmode" value="transparent"> <embed type="application/x-mplayer2" src="http://ciobanu.cich.md/exemples/>m_v/news.wmv" name="MediaPlayer" autoStart="True" wmode="transparent" width="320" height="286">

1 2 1 3 1 4 1 5

</embed> </object> </body> </HTML</span>

6. Referine. Referine interne i externe. Pn acum am nvat s crem documente HTML n care am ntrodus text i imagini. n acest capitol vom arta cum putem accesa orice resurs Web, Internet i intern cu ajutorul referinelor (legturi, link-uri, hiperlegturi). Referinele au urmtoarele roluri:

Permit trecerea de la o pagin la alta de pe Web i revenire la pagina iniial prin apsarea butonului Back al browser-ului; Permit trecerea de la o pagin la alta de pe calculatorul propriu; Permit trecerea la fiiere non web de pe Internet (ftp, telnet etc.); Permit trecerea la fiiere non HTML (.txt, .jpg, .pdf etc.); Permit vizitarea unei pagini ncepnd dintr-un anumit loc, renunnd la barele de defilare; Permit trimiterea unui e-mail.

6.1. Marcajul <a> Pentru a crea o legtur se folosete marcajul <a> ancor, care are sintaxa: <a atribute> coninut </a>

Coninutul dintre marcajele <a> i </a> poate fi text i/sau imagine, este afiat de browser sub form de legtur (colorat i subliniat), i poate accepta comenzi de la mouse (un clic) sau de la tastatur (ENTER). Cnd este deasupra unei legturi, cursorul grafic ia forma unei mini, indicndu-ne astfel c browser-ul este pregtit s descarce resursa Internet de la adresa URL indicat. Dac un document are mai multe legturi ne putem deplasa de la una la alta i cu mouse-ul i cu ajutorul tastei TAB, iar pentru a face o legtur activ se execut clic cu butonul stng pe legtur sau se tasteaz ENTER. Atributele tag-ului <a> sunt:

href; target; title; name;

Atributul href Atributul href (referin hipertext) este obligatoriu pentru tag-ul legtur (ca src pentru elementul <img>), are sintaxa href="adresa URL" i are rolul de a identifica o adres URL absolut (de pe Internet) sau relativ (local). n exemplul de mai jos dm o referin ctre un fiier local, flori.jpg, i ctre pagina Colegiului de Informatic, de pe WEB: 1<html> 2<head> <title>Referinte</title></head> 3<body> <p>Florile mele preferate<a href="images/crini.jpg">Crini</a> 4<p>Detalii despre Colegiul de Informatica 5<a href="http://cich.md">CIC</a> 6</body> 7</html>

8 Atributul target Cnd utilizatorul activeaz o legtur, browser-ul nlocuiete fereastra care conine legtura cu o nou fereastr, specificat de adresa URL din href. Atributul target face s se schimbe aceast operaie implicit i el are sintaxa target="nume", unde nume definete fereastra n care va fi ncrcat noua pagin. Numele este orice ir de caractere sau valori constante:

_blank pagina va fi ncrcat ntr-o nou fereastr; _parent pagina va fi ncrcat n fereastra printe; _top pagina va fi ncrcat n fereastra top a cadrului; _self pagina va fi ncrcat n aceeai fereastr(implicit).

1 <html> 2<head> <title>Referinte</title></head> 3<body> 4<p>Florile mele preferate<a href="images/crini.jpg">Crini</a> 5<p>Detalii despre Colegiul de Informatica 6<a href="http://cich.md" target="_blank" >CIC</a> </body> 7</html> 8 Atributul title Acest atribut are un caracter general i poate fi ataat la majoritatea elementelor HTML. Sintaxa acestui element este: title="valoare". Cnd mouse-ul este deasupra coninutului tag-ului <a> coninut </a> se transform ntr-o mn i va afia valoarea atributului title, ntr-o sugestie de instrument (ntr-un cadru). 1 <html> 2<head> <title>Referinte</title></head> 3<body> 4<p>Florile mele preferate<a href="images/crini.jpg">Crini</a> 5<p>Detalii despre Colegiul de Informatica 6<a href="http://cich.md" title="Colegiul de Informatica" >CIC</a> </body> 7</html> 8 Atributul name Acest atribut este utilizat pentru a defini o ancor n interiorul unei pagini. Sintaxa acestui atribut este: name="valoare". 6.2. Referine ctre alte pagini Web Dac se dorete accesarea unei pagini de pe alt site, valoarea atributului href este o adres URL absolut. Amintim c o adresa URL absolut are sintaxa: protocol /nume-calculator/cale/fiier unde protocol poate fi, de exemplu, http. Exemplu: 1 <html> 2<head></head> 3<body> 4Pentru mai multe informatii despre <br> 5nvatamnt vizitati site-ul Ministerul Educatiei 6<a href="http://www.edu.md"> ME</a> </body> 7</html> 8 Acelai rezultat obinem dac scriem i numele fiierului index(default) care se ncarc <a href="http://www.edu.md/index.php"> ME </a> Dac se dorete s se viziteze alt pagin a respectivului site, se scrie numele fiierului .php(.html), respectiv.

6.3.Referine cu imagini Aa cum am specificat mai sus, o legtur poate fi creat i cu ajutorul unei imagini. Ca i n cazul n care coninutul unei legturi este un text, i n cazul n care coninutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER pe imagine. Exemplu: 1 2<html> <head> <title> Legaturi cu imagini </title> </head> 3<body> 4Colegiul de Informatica din Chisinau 5<a href="http://cich.md"> 6<img src= "http://cich.md/galerie/content/Exteriorul colegiului/IMG_1631.jpg"> 7</a> </body> 8</html> 9 Un link poate fi format i din text i din imagine adic: 1<html> 2<head> <title> Legaturi cu imagini </title> </head> 3<body> 4Colegiul de Informatica din Chisinau <a href="http://cich.md">CIC 5<img src= "http://cich.md/galerie/content/Exteriorul colegiului/IMG_1631.jpg" width=70 6height=70> 7</a> 8</body> 9</html> 6.4.Referine cu adrese URL relative Adresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu, indicnd cale/numefiier, fr a fi prefixate de protocol i nume calculator. n adresele relative putem folosi caracterele ../ pentru a urca un nivel n structura de directoare(ctre directorul printe). Se cunoate faptul c un site poate s aib paginile (fiierele) organizate ntr-o structur arborescent de directoare. S presupunem c avem urmtoarea structura arborescent :

Conform structurei arboriscente date din pagina pag6.html din mapa M5 se pot accesa celelalte pagini, utiliznd urmtoarele referine: 1. 2. 3. 4. ../../pag1.html ../../M1/pag2.html ../../M3/M6/pag7.html ...

1 <html> 2<head> <title> Referinte relative </title> </head> 3<body> 4Pagina7 5<a href="../../M4/pag5.html"> Referinta catre pagina pag5.html 6</body> </html> 7

</a>

1 <html> 2<head> <title> Referinte relative </title> </head> 3<body> 4Pagina5 5<a href="../M3/M6/pag7.html"> Referinta catre pagina pag7.html 6</body> </html> 7 6.5. Referine ctre informaii non Web

</a>

Se pot face referine i la adrese URL absolute de pe Internet, care nu sunt resurse Web. n adresele URL absolute se nlocuiete protocolul http cu alte protocoale non Web (ftp, telnet, gopher etc.). Exemplu: 1 2 <html> 3 <head></head> <body> 4 <ul> 5 <li><a href="ftp://gatekepper.dec.com" >Vizitati locatia</a></li> 6 <li><a href="ftp://ftp.arsc.edu"> Educatie</a> </li> 7 <li><a href="telnet://well.com" > Whole Earth</a></li> href="gopher://gopher.loc.gov"> GongresGopher</a></li> 8 <li><a </ul> 9 </body> 10</html> </p> 11 6.6.Referine ctre fiiere non HTML Se pot stabili legturi ctre orice tip de fiiere, nu numai html, ca de exemplu .pdf, .txt, .gif, .rar, .zip, etc. n aceste condiii se ntlnesc dou situaii: I. II. Browser-ul nu poate lucra cu fiierul ntlnit i atunci ncearc s-l descarce, executnd operaia download. Browser-ul cunoate tipul de fiier i acesta va fi deschis n fereastra sa.

Exemplu: 1 2<html> <head></head> 3<body> 4<a href="pag_2.pdf"> Fisier PDF</a> <br> 5<a href="doc.txt">Fisier TXT </a> <br> 6<a href="../files/tabel_culori.rar"> Fisier RAR </a> <br> href="http://cich.md/galerie/content/Exteriorul colegiului/IMG_1631.jpg">Fisier JPG </a> 7<a </body> 8</html></p> 9

6.7.Referine interne n cadrul unei pagini n aceast seciune vom defini ancore (inte) ntr-o pagin, adugarea legturilor ctre aceste inte, precum i legturi ctre inte din documente externe. Dac documentele HTML sunt prea lungi i sunt greu de parcurs, pentru a evita parcurgerea cu bara de defilare, se definesc ancore. Ancorele ne permit s ne deplasm rapid ntr-un loc din document. Ancora este un identificator al nceputului unui element dintr-o pagin web. Dac au fost definite ancore ntr-o pagin, se pot crea legturi ctre respectivele ancore. Ancorele se pot defini n dou moduri:

utiliznd orice element HTML, inclusiv elementul <a> cu atributul id, de exemplu: <p id="valoare_id"> sau <a id="valoare_id"> </a> utiliznd tag-ul <a> cu atributul name, de exemplu: <a name="valoare_nume"> </a>

Pentru a crea o legtur la o ancor se folosete tag-ul <a>...</a> cu atributul href, care are ca valoare o referin de ancor, precedat de simbolul #, astfel:

# valoare_nume # valoare_id

Fiierul trebuie s fie suficient de mare, astfel nct secvena care conine o ancor s nu fie vizibil n momentul trimiterii ctre ea. Ca exemplu s considerm agenda grpei I-942: 1 <html> <head> 2 <title>Agenda grupei</title> 3 </head> 4 <body> 5 <h1 align="center"> Agenda grupei I-942<br /> 6 <p> <a href="#a-c"> [A-C] </a> 7 <a href="#d-h"> [D-H] </a> 8 <a href="#i-l"> [I-L] </a> 9 <a href="#m-n"> [M-N] </a> 10<a href="#o-s"> [O-S] </a> <a href="#t-w"> [T-W] </a> 11</h1> 12<br /> 13<hr size="4" width="100%" align="center" color="#666666"> 14<br /> 15<pre> <h1> 16<p id="a-c"> [A-C] </p> 171.Bogdan Constantin 182.Budu Tudor 193.Buzu Gheorghe Olea 204.Casian 5.Casparov Pavel 216.Cebotari Ecaterina 227.Cibuc Nicolae 238.Ciusca Cristian 249.Coslet Vladislav 10.Cotru Alina 2511. ... 26<p id="d-h"> [D-H] </p> 271.Dabija Viorel 282.Gabura Ruslan Lilian 293.Gorobet 4. ... 30<p id="i-l"> [I-L] </p> 311.Lungu Inga 322. ... 33<p id="m-n"> [M-N] </p></p> 1.Melestean Alexandru 342.Mititelu Dumitru 353. ...

36<p id="o-s"> [O-S] </p> 371.Podolean Ion 2.Popovici Victor 383.Puzur Gheorghe 394.Savin Victor 405.Scutelnic Valeria 416.Smolenschi Mihai Victor 427.Stefanica 8.Strelciuc Victoria 439. ... 44<p id="t-w"> [T-W] </p> 451.Todirascu Mihaela 462.Toma Cristian 3.Vasiloi Alexandru 474. ... 48</body> 49</html> 50 51 52 53 54 55 56 57 58 59 60 6.8. Trimiterea automat a unui e-mail Dac dorim s trimitem un e-mail dintr-o pagin, se creeaz o legtur la o adres e-mail. Legtura va avea atributul href a crui valoare este mailto (protocol pentru pot), urmat de: i de o adres de e-mail valid, de exemplu: <a href="mailto:cio3banu@yahoo.com"> Puteti sa-mi scrieti </a> Se poate folosi elementul <adress> de formatare logic, care are rolul de a evidenia o adres (mesajul se va scrie la nceput de linie), aa cum reiese din exemplu de mai jos. Sintaxa elementului <adress> este: <adress> <a href="mailto:cio3banu@yahoo.com"> Puteti sa-mi scrieti </a> </adress> Cnd se execut clic pe o legtur e-mail, se va deschide o aplicaie e-mail care are, n cmpul To, adresa din legtur i care permite s introducem mesajul. Se poate trece i un subiect, care va fi desprit de adres prin ?, precum i un text n interiorul mesajului (de forma body=text) i care se va separa de subiect prin caracterul &, ca n exemplul de mai jos: 1 <html> 2<head></head> 3<body> 4<adress> 5<a href="mailto:cio3banu@yahoo.com"> Puteti sa-mi scrieti</a> 6</adress> </body> 7</html> 8 6.9. Culorile referinelor O referin poate fi n una din strile:

activ vizitat

nevizitat

n funcie de starea n care se afl, o legtur are o anumit culoare i anume:


Starea activ are culoarea implicit rou (#FF0000). Culoarea se poate schimba cu atributul alink=culoare al elementului < body> Starea vizitat are culoarea implicit purple (#800080). Culoarea se poate schimba cu atributul vlink=culoare al elementului < body> Starea nevizitat are culoarea implicit albastru (#0000FF). Culoarea se poate schimba cu atributul link=culoare al elementului < body>

1 2 <html> <head></head> 3 <body alink="green" vlink="red" link="blue"> 4 <ul> 5 <li><a href="http://cich.md">CIC</a> 6 <li><a href="http://cfbc.md">CFBC</a> 7 <li><a href="http://ccc.md">CCC</a> </ul> 8 </body> 9 </html> 10 7. Documentarea unei pagini Web Meta-informaiile sunt informaiile despre modul de organizare a informaiilor. n cazul unei pagini Web metainformaiile vor furniza date despre modul n care a fost creat aceast pagin. Meta-informaiile nu sunt vizibile ntr-o pagin Web. Ele sunt coninute n fiierul surs .html i sunt utilizate de serverele Web aflate n INTERNET, specializate n stocarea de informaii despre informaiile stocate pe diferite site-uri. Meta-informaiile sunt culese de ctre aplicaiile speciale ale motoarelor de cutare numite spiders sau robots. Serverele specializate n stocarea i indexarea de meta-informaii ofer utilizatorilor motoare de cutare puternice care permit regsirea informaiilor (a adreselor la care aceste informaii exist). Cteva exemple n acest sens sunt: www.google.com, www.yahoo.com, www.altavista.com, www.excite.com, www.lycos.com etc. Meta-informaiile adic informaiile despre informaiile coninute ntr-o pagin Web se introduc cu ajutorul tag-ului <meta> plasat n interiorul blocului <head><head>. Acest tag se utilizeaz cel mai frecvent mpreun cu trei atribute:

name; http-equiv; content.

Cele trei atribute se folosesc n perechi "name/content" sau "http-equiv/content". 7.1. Descrierea unei pagini Web Pentru a face cunoscut motoarelor de cutare din Internet scopul pentru care a fost creat o pagin Web poate fi inserat un element <meta> avnd atributele:

name - setat la valoarea description; content - setat la un ir de caractere ce conine o descriere general a paginii.

Iat n continuare un exemplu de utilizare: 1<html> <head> 2<title>Colegiul de Informatic </title>

3<meta name="description" content="Site-ul prezint informaii importante despre Colegiul de 4Informatic"> 5</head> <body> 6 7<body> 8</html> 9 7.2. Cuvintele cheie pentru o pagin Web Cuvintele cheie ofer o alt metod de descriere a informaiilor coninute de o pagin Web. Cuvintele cheie trebuie alese cu atenie pentru ca informaia indexat pe baza lor de ctre spiders, s poat fi regsit corect n bazele de date ale mooarelor de cutare. Pentru a preciza cuvintele cheie ale paginii Web se utilizeaz:

atributul name - setat la valoarea keywords; atributul content - care va primi ca valoare lista cuvintelor cheie separate prin ",".

Iat un exemplu de utilizare: <meta name="keywords" content="Colegiu, Informatica, Chiinu, Moldova"> 7.3. Drepturile de autor Atributul name poate fi utilizat pentru a furniza informaii legate de autorul paginii i despre Copyright (drepturile de autor). Exemplul urmtor ilustraz aceste lucruri: <meta name="author" content="Ciobanu Andrei "> <meta name="copyright" content="cich.md"> 7.4. Persoana de contact Pentru a putea furniza informaii despre persoana care se ocup de administrarea site-ului se utilizeaz atributul httpequiv. n acest caz valoarea atributului content va conine o adres e-mail eventual urmat n paranteze rotunde de un nume complet al persoanei. Exemplu: <meta http-equiv="from" content="ciobanu@cich.md (Ciobanu Andrei)"> <meta http-equiv="reply-to" content=="cio3banu@yahoo.com (Andrei Ciobanu)"> 7.5. Setul de caractere utilizat Setul de caractere se stabilete prin intermediul atributului charset. n mod implicit setul de caractere al unei pagini Web este western. Opional acest set de caractere poate fi stabilit prin urmtoarea exprimare: <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Pentru a se putea utiliza diacriticele limbii romne trebuie ales setul de caractere Sud-Est European: <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2"> 7.6. Rencrcarea automat a unei pagini Web

O utilizare interesant a atributului http-equiv este aceea de a seta rencrcarea automat n fereastra browser-ului a aceleiai pagini (de exemplul pagina cu evoluia cursurilor la o burs) sau a unei pagini noi. n acest fel se obin faciliti dinamice pentru un Website. Pentru a rencrca aceeai pagin la un interval precizat de secunde se utilizeaz atributul http-equiv setat la valoarea refresh iar atributul content setat la valoarea numrului de secunde dup care se dorete ca pagina s fie reactualizat. Exemplul 1. Aceeai pagin va fi rencrcat dup 5 secunde: <meta http-equiv="refresh" content="5"> Exemplul 2. O alt pagin (cuprins.html) va fi rencrcat dup 9 secunde: <meta http-equiv="refresh" content="9; url='cuprins.html'"> 7.7. Comentariile Comentariile sunt blocuri de text utile care prezint informaii de proiectare utile despre modul n care a fost scris un fiier surs .html. Comentariile sunt ignorate de ctre browser la ncarcarea paginii. Pentru a insera un bloc de comentarii se utilizeaz sintaxa: <!-Comentarii --> Blocul de comentarii poate fi plasat oriunde este necesar n cadrul paginii .html i se poate extinde pe mai multe rnduri;

8. Operarea cu formulare. Marcaje utilizate. Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selecie,cmpuri de editare etc. Formularele va asigura construirea unori pagini Web care permit utilizatorilor s introduc efectiv informaii i s le transmit serverului. Formularele pot varia de la o simpl caset de text, pentru introducerea unui ir de caractere pe post de cheie de cautare - element caracteristic tuturor motoarelor de cutare din Web - pn la o structur complex ,cu multiple seciuni, care ofer faciliti puternice de transmisie a datelor. O sesiune cu o pagin web ce conine un formular cuprinde urmtoarele etape: 1. Utilizatorul completeaz formularul i l expedieaz unui server; 2. O aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar) stocheaz datele ntr-o baz de date; 3. Dac este necesar serverul expedieaz un raspuns utilizatorului. Un formular este definit ntr-un bloc delimitat de etichetele corespondente <form>i </form>. Atribute eseniale ale elementului <form> Exist dou atribute eseniale ale elementului <form>: 1. Atributul action precizeaz ce se va ntampla cu datele formularului odat ce acestea ajung la destinaie. De regul ,valoarea atributului action este adresa URL a unui script aflat pe un srver WWW care primete datele formularului, efectueaz o prelucrare a lor i expedieaz ctre utilizator un rspuns. <form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">.

Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell. 2. Atributul method precizeaz metoda utilizat de browser pentru expedierea datelor formularului. Sunt posibile urmtoarele valori:

get (valoarea implicit). n acest caz, datele din formular sunt adugate la adresa URL precizat de atributul action; - nu sunt permise cantiti mari de date (maxim 1 Kb); - intre adresa URL i date este inserat un "?".

Datele sunt adugate conform sintaxei: nume_camp = valoare_camp. ntre diferite seturi de date este introdus un "&". Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2";

post n acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (ordinul MB)

Pentru ca un formular s fie funcional, trebuie precizat ce se va ntmpla cu el dup completarea i expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin pota electronic (e-mail). Pentru aceasta se folosete un atribut al etichetei <form>: i anume action care primete ca valoare " mailto: " concatenat cu o adres valid de e-mail ctre care se va expedia formularul completat. Un formular cu un cmp de editare i un buton de expediere Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul elementului se folosete atributul type al etichetei <input>. Pentru un cmp de editare, acest atribut primeste valoarea "text". Alte atribute pentru un element <input> sunt:

name - permite ataarea unui nume fiecrui element al formularului; value - care permite atribuirea unei valori iniiale unui element al formularului.

Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, n care atributul type este configurat la valoarea "submit".Acest element poate primi un nume prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value, dac aceast valoare a fost stabilit. 1 2 <html> 3 <head> <title>Form_ex1</title> 4 </head> 5 <body> 6 <h1>Un formular cu un camp de editare si un buton de expediere</h1> 7 <hr> 8 <form action="mailto:xxxxx@xxx.com" method="post"> 9 Numele:<input type="text" name="numele" value="Numele si prenumele"><br /> <input type="submit" value="Expedieaza"> 10</form> 11</body> 12</html> 13 Pentru elementul <input> de tipul cmp de editare (type = "text") , alte doua atribute pot fi utile:

size - specific lmea cmpului de editare ce depete aceast lme ,atunci se execut automat o derulare acestui cmp; maxlength - specific numrul maxim de caractere pe care le poate primi un cmp de editare, caracterele tastate peste numrul maxim sunt ignorate.

Observaii: - dac atributul type lipsete ntr-un element <input>, atunci cmpul respectiv este considerat n mod prestabilit ca fiind de tip "text"; - formularele cu un singur cmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea i apsarea tastei ENTER. Butonul Reset Daca un element de tip <input> are atributul type configurat la valoarea "reset", atunci n formular se introduce un buton pe care scrie "Reset". La apsarea acestui buton, toate elementele din formular primesc valorile prestabilite (definit odata cu formularul ), chiar dac aceste valori au fost modificate de utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name i o valoare printr-un atribut value. Un asemenea buton afieaz textul "Reset" dac atributul value lipsete, respectiv valoarea acestui atribut n caz contar. 1 2 <html> 3 <head> 4 <title>Form_ex2</title> </head> 5 <body> 6 <h1>Un formular cu un buton reset</h1><br /> 7 <hr> <br /> 8 <form action="mailto:xxxxx@xxx.com" method="post"> <br /> Introduceti numele:<input type="text" name="nume" value="Numele"><br /> <br /> 9 Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br /><br /> 10<input type="reset" value="Sterge"> <input type="submit" value="Expedieaza"> <br /> 11</form> 12</body> 13</html> 14 Cmp de editare de tip "password" Dac se utilizeaz eticheta <input> avnd atributul type configurat la valoarea "password" , atunci n formular se introduce un element asemntor cu un cmp de editare obinuit introdus prin type="text". Toate atributele unui cmp de editare rmn valabile. Singura deosebire const n faptul c acest cmp de editare nu afieaz caracterele clar, ci numai caractere *, care ascund de privirile altui utilizator aflat n apropiere valoarea introdus ntr-un asemenea cmp. La expedierea formularului ns, valoarea tastat ntr-un cmp de tip "password" se transmite clar. 1 2 <html> 3 <head> 4 <title>Form_ex3</title> </head> 5 <body> 6 <h1>Un formular cu un buton reset</h1> 7 <hr> <br /> 8 <form action="mailto:xxxxx@xxx.com" method="post"> 9 Nume:<input type="text" name="nume" value="Numele"><br> type="text" name="prenume" value="Prenumele"><br> 10Prenume:<input Password:<input type="password" name="parola" ><br> 11<input type="reset" value="Sterge"> <input type="submit" value="Expedieaza"> 12</form> 13</body> 14</html> 15 Butoane radio Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type avnd valoarea "radio".

1 2 <html> 3 <head> 4 <title>Form_ex4</title> 5 </head> <body> 6 <h1>Un formular cu butoane radio</h1> 7 <hr> 8 <form action="mailto:xxxxx@xxx.com" method="post"> 9 <p> Alegeti sexul:<br> 10 11Barbatesc: <input type="radio" name="sex" value="b"> <br /> <input type="radio" name="sex" value="f"> <br /> 12Femeiesc: <input type="reset"> <input type="submit"> 13</p> 14</form> 15</body> 16</html> 17 La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", n funcie de alegerea fcut de utilizator. Casete de validare O caset de validare(checkbox) permite selectarea sau deselctarea unei opiuni. Pentru inserarea unei casete de validare se utilizeaz eticheta <input> cu atributul type configurat la valoarea "checkbox". Observaii: - fiecare caset poate avea un nume definit prin atributul name. - fiecare caset poate avea valoarea prestabilit selectat definit prin atributul checked. 1 2 <html> 3 <head> 4 <title>Form_ex5</title> 5 </head> <body> 6 <h1>Un formular cu casete checkbox</h1> 7 <hr> 8 <form action="mailto:xxxxx@xxx.com" method="post"> 9 Alegeti meniul:<br /> 10<input type="checkbox" name="pizza" value="o portie"> Pizza<br /> 11<input type="checkbox" name="nectar" value="un pahar"> Nectar<br /> <input type="checkbox" name="bere" value="o sticla"> Bere<br /> 12<input type="checkbox" name="cafea" value="o ceasca"> Cafea<br /> 13<input type="reset"> <input type="submit"> 14</form> 15</body> 16</html> 17 Casete de fiiere ntr-o pereche "name = value" a unui formular se poate folosi ntregul coninut al unui fiier pe post de valoare. Pentru aceasta se insereaz un element <input> ntr-un formular, cu atributul type avnd valoarea "file"(fiier). Atributele pentru un element de tip caset de fiiere:

name - permite ataarea unui nume;

value - primete ca valoare adresa URL a fiierului care va fi expediat o dat cu formularul. Aceast valoare poate fi atribuit direct atributului value, sau poate fi selectat prin intermediul unei casete de tip File Upload sau Choose File care apare la apsarea butonului Browse... din formular; enctype - precizeaz metoda utilizat la criptarea fiierului de expediat.Valoarea acestui atribut este "multipart/form-data".

1 2 <html> 3 <head> 4 <title>Form_ex6</title> </head> 5 <body> 6 <h1>Un formular cu caseta de fisiere</h1> 7 <hr> 8 <form action="mailto:xxxxx@xxx.com" method="post"> fisierul:<input type="file" name="fisier" enctype="multipart/form-data"><br /> 9 Alegeti <input type="reset"> <input type="submit"> 10</form> 11</body> 12</html> 13 Liste de selecie O list de selecie permite utilizatorului s aleag unul sau mai multe elemente dintr-o list finit. Lista de selecie este inclus n formular cu ajutorul etichetelor corespondente <select>si </select>. O list de selecie poate avea urmtoarele atribute:

name - ataeaz listei un nume (utilizat n perechile "name=value" expediat serverului); size - care precizeaz(printr-un numr ntreg pozitiv, valoarea prestabilit fiind 1) cte elemente din list sunt vizibile la un moment dat pe ecran(celelalte devenind vizibile prin acionarea barei de derulare ataate automat listei).

Elementele unei liste de selecie sunt incluse n lista cu ajutorul etichetei <option>. Dou atribute ale etichetei <option> se dovedesc utile:

value - primete ca valore un text care va fi expediat server-ului n perechea "name=value", dac acest atribut lipsete, atunci ctre server va fi expediat textul ce urmeaz dup <option>; selected(fara alte valori) - permite selectarea prestabilit a unui element al listei.

1 2 <html> 3 <head> 4 <title>Form_ex7</title> 5 </head> <body> 6 <h1>Un formular cu o lista de selectie</h1> 7 <hr> 8 <form action="mailto:xxxxx@xxx.com" method="post"> 9 Universitatea absolvita:<br><br> <select name="universitate" size="3"> 10 <option value="USM">Universitatea de Stat din Moldova 11 <option value="UST" selected>Universitatea de Stat din Tiraspol 12 <option value="UTM">Universitatea Tehnica din Moldova 13 <option value="UCCM">Universitatea Cooperatist Comerciala din Moldova 14</select> <br><br> 15<input type="reset"> <input type="submit"> 16</form> 17</body> 18</html> 19

20 List de selecie cu selecii multiple O list de selecie ce permite selecii multiple se creeaz ntocmai ca o list de selecie obisnuit. n plus, eticheta <select> are un atribut multiple(far alte valori). Cnd formularul este expediat ctre server pentru fiecare element selectat al listei care este se insereaz ctre o pereche "name=value" unde name este numele listei. 1 2 3 <html> <head> 4 <title>Form_ex8</title> 5 </head> 6 <body> 7 <h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1> <hr> 8 <form action="mailto:xxxxx@xxx.com" method="post"> 9 Limbi straine cunoscute:<br><br> 10<select name="limbi straine" size="5" multiple > 11 <option value="e"> Engleza 12 <option value="f" selected>Franceza 13 <option value="s">Spaniola <option value="i">Italiana 14 <option value="r">Rusa 15 <option value="g">Germana 16</select><br><br> 17<input type="reset"> <input type="submit"> 18</form> </body> 19</html> 20 21 Cmpuri de editare multilinie ntr-un formular cmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are urmtoarele atribute:

cols - specific numrul de caractere afiate ntr-o linie; rows - specific numrul de linii afiate simultan; name - permite ataarea unui nume cmpului de editare multilinie; wrap - determin comportamentul cmpului de editare fa de sfritul de linie. Acest atribut poate primi urmatoarele valori: o "off" - ntreruperea cuvintelor se produce la marginea dreapt a editorului, cnd dorete utilizatorul. Caracterul de sfrit de linie este inclus n textul transmis serverului o data cu formularul; o "hard" - ntreruperea cuvintelor se produce la marginea dreapt a editorului. Caracterul de sfrit de linie este inclus n textul transmis serverului o dat cu formularul; o "soft" - ntreruperea cuvintelor se produce la marginea dreapt a editorului. Nu se include caracterul de sfrit de linie n textul transmis serverului o dat cu formularul.

1 <html> 2 <head> <title>Form_ex9</title> 3 </head> 4 <body> 5 <h1>Un formular cu un camp de editare multilinie</h1> 6 <hr> 7 <form action="mailto:xxxxx@xxx.com" method="post"> 8 <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial. 9 A doua linie din textul initial. 10</textarea><br /><br /> 11<input type="reset"> <input type="submit">

12</form> 13</body> </html> 14 15 16 Un formular complex n exemplul urmtor este prezentat un formular coninnd elemente prezentate anterior. Cmpurile formularului sunt incluse n celulele unui tabel pentru a obine o aliniere dorit. 1 2 3 4 <html> 5 <head> 6 <title>Form_ex10</title> </head> 7 <body> 8 <h1>Un formular complex</h1> 9 <hr> 10<center> 11<table bgcolor="orange"> <form action="mailto:xxxxx@xxx.com" method="post"> <caption align="top">MENIU</caption> 12<tr align="left"><th>Numele: <td><input type="text" name="numele"> 13<tr align="left"><th>Preumele: <td><input type="text" name="prenumele"> 14<tr align="left"><th>Telefonul: <td><input type="text" name="telefonul"> 15<tr align="left"><th>Alegeti pizza: <td> 16<input type="checkbox" name="ciuperci">cu ciuperci 17<input type="checkbox" name="mexicana">mexicana 18<input type="checkbox" name="europeana">europeana 19<tr align="left"><th>Alegeti plata: 20<td bgcolor="lightblue"> <ul> 21 <li><input type="radio" name="plata">cash 22 <li><input type="radio" name="plata">card </ul> 23 24<tr align="left"><th>Comentarii: 25<td> <textarea name="comentarii" cols="30" rows="5" wrap="off"> 26Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre 27</textarea> 28<tr align="left" valign="top"> 29<td> <input type="reset" value="Sterge"><td><input type="submit" value="Expedieaza"> 30</form> 31</table> 32</body> 33</html> 34 35 36 Butoane ntr-un formular pot fi afiate butoane. Cnd utilizatorul apas un buton, se lanseaz n execuie o funcie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcii (acest lucru este posibil dac se utilizeaz limbajele Javascript sau Java). Pentru a nsera un buton ntr-un formular, se utilizeaz eticheta <input> avnd atributul type configurat la valoarea "button". Alte dou atribute ale elementului <input> sunt:

name - permite ataarea unui nume butonului;

value -primete ca valoare textul ce va fi afiat pe buton.

Un buton pentru lansarea n execuie a unei aciuni poate fi introdus ntr-un formular prin elementul <input> avnd atributul type configurat la valoarea "button", aa cum s-a vzut mai nainte. Exist o a doua modalitate de a introduce ntr-o pagina Web un buton, i anume prin intermediul blocului <button>...</button>. Un astfel de buton poate fi inserat ntr-un formular, n acest caz declannd aciuni legate de acel formular, sau poate fi introdus oriunde n pagin pentru iniierea unor aciuni independente de formulare. Atributele posibile ale elementului "button" sunt:

name - acord elementului un nume; value - precizeaz textul care va fi afiat pe buton; type - precizeaz aciunea ce se va executa la apsarea butonului dac acesta este inclus ntr-un formular.Valorile posibile pentru acest atribut sunt: o "button"; o "submit"; o "reset".

n corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei imagini. Observaii finale: - elementul <form> poate avea un atribut target, care primete ca valoare numele unei ferestre a browserului n care va fi ncrcat rspunsul trimis serverului WWW la expedierea unui formular. - toate elementele cuprinse ntr-un formular pot avea un atribut disabled care permite dezactivarea respectivului element. - toate elementele de tip text cuprinse ntr-un formular pot avea un atribut readonly care interzice modificarea coninutului acestor elemente.

9. Ferestre n HTML. Comenzi de construire a ferestrelor(cadrelor). Ferestrele sau cadrele ne permit s definim n fereastra browser-ului subferstre n care s fie ncrcate documente HTML diferite. Ferestrele sunt definite ntr-un fiier HTML special , n care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>. Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa URL a documentului HTML care va fi ncrcat n acel frame. Definirea cadrelor se face prin mprirea ferestrelor (i a subferestrelor) n linii i coloane: 1. mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastr; 2. mprirae unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastr. Valoare atributelor cols i rows este o list de elmente separate prin virgul, care descriu modul n care se face mprirea. Elementele listei pot fi:

un numr ntreg de pixeli; procente din dimensiunea ferestrei(numr ntre 1 si 99 terminat cu %); n* care inseamna n pari din spaiul rmas;

Exemplu 1: cols="200,*,50%,*" nseamn o mprire n 4 subferestre, dintre care prima are 200 pixeli, a treia ocup jumtate din spaiul total disponibil, iar a doua i a patra ocup n mod egal restul de spaiu rmas disponibil. Exemplu 2: cols="200,1*,50%,2*" nseamn o mprire n 4 subferestre, dintre care prima are 200 pixeli, a treia ocup jumtate din spaiul total disponibil iar a doua i a patra ocup n mod egal restul din spaiul rmas disponibil, care se mparte n trei pri egale, a doua fereastr ocupnd o parte, iar a patra ocupnd 2 pri.

Observaii: - Dac mai multe elemente din list sunt configurate cu *, atunci spaiul disponibil rmas pentru ele se va mpari n mod egal. - O subfereastr poate fi un cadru (folosind <frame>) n care se va ncarc un document HTML sau poate fi mprit la rndul ei n alte subfereste (folosind <frameset>). 1 2<html> <head> 3<title>Fer_ex1</title> 4</head> 5<frameset cols="*,*"> <frame src="p1.html"> 6 <frame src="p2.html"> 7</frameset> 8</html> 9 n exemplul urmtor este creat o pagina Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini. 1 2 <html> <head> 3 <title>Fer_ex2</title> 4 </head> 5 <frameset rows="100,*,10%"> <frame src="p1.html"> 6 <frame src="Taj_Mahal.jpg"> 7 <frame src="p3.html"> 8 </frameset> 9 </html> 10 n exemplul urmtor este creat o matrice de 4 cadre (2 x 2).Pentru a realiza acest lucru, se folosesc simultan cele dou atribute cols i rows. 1 2 <html> 3 <head> <title>Fer_ex3</title> 4 </head> 5 <frameset rows="*,*" cols="*,*"> <frame src="p1.html"> 6 <frame src="p2.html"> 7 <frame src="p3.html"> 8 <frame src="p4.html"> 9 </frameset> 10</html> 11 n exemplul urmtor este creat o pagina Web cu trei cadre mixte. Pentru a o crea se procedeaz din aproape n aproape. Mai nti, pagina este mprit n dou subferestre de tip coloan, dup care a doua subfereastr este mprit n dou subferestre de tip linie. 1 2 3 4 5 6 7 8 9
<html> <head> <title>Fer_ex4</title> </head> <frameset cols="20%,*"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html"> <frame src="p3.html"> </frameset> </frameset>

10</html> 11 12 Culori pentru chenarele cadrelor i dimensionarea chenarului unui cadru Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul bordercolor. Acest atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi ataat att etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, ct i etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual. Atributul border al etichetei <frameset> permite configurarea limii chenarelor tuturor cadrelor la un numr dorit de pixeli. Valoarea prestabilit a atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fr chenar. 1 2 <html> 3 <head> <title>Fer_ex5</title> 4 </head> 5 <frameset cols="20%,*" bordercolor="green" border="15"> 6 <frame src="p1.html"> <frameset rows="*,*"> 7 <frame src="p2.html"> 8 <frame src="p3.html"> 9 </frameset> 10</frameset> 11</html> 12 Pentru a obine cadre fr chenar se utilizeaz border="0". n mod prestabilit, chenarul unui cadru este afiat i are aspect tridimensional. Afiarea chenarului unui cadru poate fi dezactivat dac se utilizeaz atributul frameborder cu valoare "no". Acest atribut poate fi ataat att etichetei <frameset> (dezactivarea fiind valabil pentru toate cadrele incluse) ct i etichetei <frame> (dezactivarea fiind valabil numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt:

yes - echivalent cu 1; no - echivalent cu 0;

1 2 <html> 3 <head> <title>Fer_ex6</title> 4 </head> 5 <frameset cols="20%,*" border="0"> 6 <frame src="p1.html"> <frameset rows="*,*"> 7 <frame src="p2.html"> 8 <frame src="p3.html"> 9 </frameset> 10</frameset> 11</html> 12 1 2 3 4 5 6 7
<html> <head> <title>Fer_ex7</title> </head> <frameset cols="20%,*" frameborder="no"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html"> <frame src="p3.html">

</frameset> 8 </frameset> 9 </html> 10 11 12

Bare de defilare Atributul scrolling al etichetei <frame> este utilizat pentru a adaug unui cadru o bar de derulare care permite navigarea n interiorul documentului afiat n interiorul cadrului. Valorile posibile sunt:

yes - barele de derulare sunt adugate ntotdeauna; no - barele de derulare nu sunt utilizabile; auto - barele de derulare sunt vizibile atunci cnd este necesar.

1 2 <html> <head> 3 <title>Fer_ex8</title> 4 </head> 5 <frameset cols="*,*,*"> <frame src="p.html" scrolling="yes" noresize> 6 <frame src="p.html" scrolling="no" noresize> 7 <frame src="p.html" scrolling="auto" noresize> 8 </frameset> 9 </html> 10 Atributul noresize al etichetei <frame> (fr nici o valoare suplimentara) dac este prezent, inhib posibilitatea prestabilit a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului. Poziionarea documentului ntr-un cadru Atributele marginheight i marginwidth ale etichetei <frame> permit stabilirea distanei n pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului. Valori posibile:

numr de pixeli; procent din limea, respectiv din nlimea cadrului;

1 2 <html> 3 <head> 4 <title>Fer_ex9</title> </head> 5 <frameset cols="*,*,*"> 6 <frame src="p.html"> <frame src="p.html" marginheight="20"> 7 <frame src="p.html" marginwidth="20"> 8 </frameset> 9 <noframes> 10Daca vedeti acest text inseamna ca browserul dumnevoastra nu suporta frame-uri. 11</noframes> 12</html> 13 Exist browsere care nu suport cadre pentru aceasta se utilizeaz n interiorul blocului <frameset> eticheta <noframes>. Dac programul de navigare tie s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona <noframes>...</noframes> va fi singurul care va fi neles i afiat. De precizat este faptul c ntre <noframes> ... </noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele). Cadre interne

Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se insereaz ntr-o pagina Web n mod asemntor cu o imagine sau n modul n care se specific marcajul <frame>, aa cum rezult din urmtorul exemplu: <iframe src="pagina1.html" height=40% width=50%> </iframe> n acest caz, am specificat c doresc o fereastr de cadru intern care are 40% din nlimea i 50% din limea paginii curente. Atributele acceptate de eticheta <iframe> sunt n parte preluate de la etichetele <frame>i <frameset>, cum ar fi: src, frameborder, marginheight, marginwidth, scrolling, name, noresize; sau de la eticheta <img>: vspace, hspace, align, width, height; 1 2 <html> <head> 3 <title>Fer_ex10</title> 4 </head> 5 <body> 6 <a href="p1.html" target="icad">Pagina1</a><br /> <a href="p2.html" target="icad">Pagina2</a><br /> 7 <a href="p3.html" target="icad">Pagina3</a><br /> 8 <a href="p.html" target="icad">Home</a><br> 9 <center> 10<iframe width="60%" height="50%" frameborder="1" name="icad" src="p.html"> Daca vedeti acest 11text inseamna ca browserul dumnevoastra nu suporta cadre interne. Ar fi preferabil sa reveniti, folosind 12Netscape Navigator versiune 4.0 13(/ulterioara) sau I.Explorer 4.0. (/ulterioara) 14<a href="p0.html">Pagina fara cadre interne</a> 15</iframe> 16</center> </body> 17</html> 18 inte pentru legturi n mod prestabilit, la efectuarea unui clic pe o legatur nou, pagina ctre care indic legtura o nlocuiete pe cea curent, n aceeai fereastr(cadru). Acest comportament se poate schimba n dou moduri: 1. prin plasarea n blocul <head>...</head> a unui element <base> care precizeaz, prin atributul target numele ferestrei(cadrului) n care se vor ncrca toate paginile noi referite de legaturile din pagina curent conform sintaxei: <base target="nume_ferastra/frame_de_baza"> 2. prin plasarea n eticheta <a> a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei: <a href="legatura" target="nume_fereastra/frame">...</a> Observatie: Dac este prezent att un atribut target n <base> ct i un atribut target n <a>, atunci cele precizate de atributul target din <a> sunt prioritare. Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <farme name="nume_frame"> n exemplul urmtor este prezentat o pagin Web cu dou cadre. Toate legturile din cadrul 1 ncarc paginile n cadrul 2. 1<html> <head> 2<title>Fer_ex11</title> 3</head> 4<frameset cols="20%,*"> <frame src="left.html"> 5 <frame src="p.html" name="main"> 6</frameset> 7</html>

8 9 Exemplul urmtor este pagina left.html 1 2 <html> 3 <head> 4 <title>Fer_ex12_left</title> </head> 5 <body> 6 <a href="p1.html" target="main">Pagina1</a><br /> 7 <a href="p2.html" target="main">Pagina2</a><br /> 8 <a href="p3.html" target="main">Pagina3</a><br><br /> href="p1.html" target="_blank">Pagina1 intr-o fereastra noua</a><br /><br /> 9 <a <a href="p1.html" target="_self">Pagina1 in fereastra curenta</a><br /><br /> 10<a href="p.html" target="main">Home</a><br /> 11</body> 12</html> 13 Valori pentru atributul target Atributul target al etichetei <frame> accept anumite valori predefinite de o valoare deosebit pentru creatorii de pagini Web. Aceste valori sunt:

_self - ncrcarea noii pagini are loc in cadrul curent; _blank - ncrcarea noii pagini are loc intr-o fereastr nou anonim; _parent - ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exist, altfel are loc n fereastra browser-ului curent; _top - ncrcarea noii pagini are loc n fereastra browser-ului ce conine cadrul curent;

Realizare Andrei CIOBANU 2009-2012