HTML limbaj de marcare a hipertextului.......................................................................3 1. Introducere n HTML....................................................................................................3 1.1.Crearea unui fiier HTML.......................................................................................4 1.2. HTML 4.

.0 sau HTML 3.2?....................................................................................6 1.3. Validarea fiierelor HTML 4.01.............................................................................7 2. Elemente i atribute HTML...........................................................................................7 2.1.Taguri HTML .........................................................................................................7 2.2. Elemente HTML ....................................................................................................8 2.3. Atribute...................................................................................................................9 3. Elemente ce definesc titluri, paragrafe.......................................................................10 3.1. Paragrafe...............................................................................................................10 3.2. Titluri (Headings).................................................................................................11 3.3. ntreruperi de linie................................................................................................12 3.4. Comentarii HTML................................................................................................12 4. Liste HTML ...............................................................................................................14 4.1. Liste neordonate ..................................................................................................14 4.2. Liste Ordonate......................................................................................................14 4.3. Liste de Definiii...................................................................................................15 5. Linkuri HTML ............................................................................................................16 5.1. Tagul Anchor i Atributul Href ...........................................................................16 5.2. Atributul Target....................................................................................................16 5.3.Tagul Ancor i Atributul Name ............................................................................17 6.HTML Uniform Resource Locators.............................................................................20 6.1. Hiperlegturi HTML.............................................................................................20 6.2. Uniform Resource Locators..................................................................................20 6.3. Scheme URL ........................................................................................................21 6.4. Accesarea unui grup de nouti (Newsgroup)......................................................21 6.5. Preluarea fiierelor cu FTP...................................................................................21 6.6. Hiperlegtur ctre sistemul Mail ........................................................................21 7. Imagini.........................................................................................................................22 7.1. Adresa URL a unei imagini..................................................................................22 7.2. Chenarul i dimensionarea unei imagini..............................................................23 7.3 Alinierea unei imagini...........................................................................................23 7.4. Alinierea textului n jurul imaginii.......................................................................24 7.5. Imagini n calitate de referine .............................................................................25 7.6. Utilizri speciale ale imaginilor............................................................................25 8. Tabele HTML .............................................................................................................26 8.1. Crearea unei tabele...............................................................................................26 8.2. Tabele i Atributul Border ...................................................................................26 8.3. Titluri n Tabel......................................................................................................27 8.4. Celule libere (vide) n tabel..................................................................................27 8.5. Atributele Cellpadding i Cellspacing..................................................................29 8.6. Alinierea coninutului n tabel..............................................................................30 9. Formulare.....................................................................................................................31 9.1. Atribute eseniale ale elementului <form>...........................................................32 9.2. Cmp de tip text....................................................................................................33 9.3. Butoane.................................................................................................................34 9.4. Butonul Send........................................................................................................34 9.5. Butonul Reset.......................................................................................................34 9.6. Cmp de tip password........................................................................................35

9.7. Butoane radio........................................................................................................36 9.8. Casete de validare.................................................................................................36 9.9. Casete de fiiere....................................................................................................37 9.10. Liste de selecie..................................................................................................38 9.11. List de selecie cu selecii multiple...................................................................39 9.12. Cmpuri text comentariu.....................................................................................40 9.13. Un formular complex..........................................................................................41 10. Cadre (frames) n HTML...........................................................................................43 10.1. Crearea cadrelor .................................................................................................43 10.2. Dimensionarea chenarului unui cadru................................................................46 10.3. Bare de derulare..................................................................................................47 10.4. Poziionarea documentului ntr-un cadru...........................................................48 10.5. Cadre interne.......................................................................................................48 10.6. inte pentru legturi...........................................................................................50 11. Fonturi HTML ..........................................................................................................52 11.1. Elementul HTML <font> ...................................................................................52 11.2. Atributele elementului Font................................................................................52 11. Culori HTML ............................................................................................................53 12.1.Valori pentru culori ............................................................................................53 12.2. Nume de culori ..................................................................................................53 12.3. Culori Web Safe (sigure)....................................................................................54 12.4. Paleta de 216 de Culori independente de platform ..........................................54 Anexa 1............................................................................................................................55 Entiti HTML.................................................................................................................55 Anexa 2............................................................................................................................56 Lista tagurilor HTML ordonat alfabetic....................................................................56 Anexa 3............................................................................................................................58 ISO 8859-1 Symbol Entities........................................................................................59 Entiti ISO 8859-1 .....................................................................................................60 Alte Entiti suportate de HTML.................................................................................62 Bibliografie......................................................................................................................63

HTML limbaj de marcare a hipertextului 1. Introducere n HTML

Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (abrevierea de la Hyper Text Markup Language limbaj de marcare a hipertextului), care descrie formatul n care documentele sunt distribuite i vzute pe Web. Multe din trsturile lui, cum ar fi independenta fa de platform, structurarea formatrii i legturile hipertext, fac din el un foarte bun format pentru documentele Internet i Web. HTML a fost dezvoltat iniial de Tim Berners-Lee la CERN n 1989. HTML a fost gndit ca o posibilitate pentru fizicienii care utilizau computere diferite i schimbau ntre ei informaii utiliznd Internetul. Erau necesare cteva caracteristici: independena de platform, posibiliti hypertext i structurarea documentelor. Independena de platform nseamn ca un document poate fi afiat n mod asemntor de computere diferite, lucru vital pentru o audien variat. Hipertext nseamn ca orice cuvnt, fraz, imagine sau alt element al documentului vzut de un utilizator (client) poate face referin la un alt document, ceea ce uureaz mult navigarea ntre multiple documente sau chiar n interiorul unui i aceluiai document. Structurarea documentelor permite convertirea acestora dintr-un format n altul i este efectuat prin conferirea unor pri componente ale documentului a unor semnificaii anume. Standardul oficial HTML este World Wide Consortium (W3C). W3C a lansat cteva versiuni ale specificaiei HTML, printre care HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 i cel mai recent, HTML 4.01. n acelai timp, autorii de browsere, cum ar fi Netscape i Microsoft, au dezvoltat adesea propriile extensii HTML n afara procesului standard i le-au incorporat n browserele lor. n unele cazuri, cum ar fi tagul Netscape, aceste extensii au devenit standarde de facto adoptate de autorii de browsere. HTML 2.0, elaborat n iunie 1994, este standardul pe care ar trebui s-l suporte toate browserele curente inclusiv cele mod text. HTML 2.0 reflect concepia original a HTML ca un limbaj de marcare independent de obiectele existente pentru plasarea lor n pagin, n loc de a specfica exact cum ar trebui s arate acestea. Daca dorii s fii siguri c toi vizitatorii vor vedea paginile aa cum trebuie, folosii tagurile HTML 2.0. Specificaia HTML 3.0, enunat n 1995, a ncercat s dezvolte HTML 2.0 prin adugarea unor faciliti precum tabelele i 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 documentate. n 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. n mai 1996 W3C a scos pe pia specificaia HTML 3.2 care era proiectat s reflecte i s standardizeze practicile acceptate la scar larg. HTML 3.2 include tagurile HTML 3.0, ce erau

adoptate de autorii de browsere ca Netscape i Microsoft plus extensii HTML rspndite. Versiunile curente ale majoritii browserelor ar trebui s suporte toate, sau aproape toate aceste taguri. n prezent, HTML 4.0 este larg utilizat i au fost deja publicate specificaiile HTML 4.01. Un fiier HTML este un fiier text ce conine tag-uri de marcare. Tag- urile de marcare indic browserului Web cum s afieze documental dat. Un fiier HTML trebuie s fie cu extensiunea htm sau html. Un fiier HTML poate fi creat utiliznd un editor simplu de text.

1.1.Crearea unui fiier HTML

n sistemul de operare Windows lansai programul Notepad din categoria Accesorii (Accessories) prin: Start Programs AccessoriesNotepad.

Scriei urmtorul text: <html> <head> <title>Titlul paginii</title> </head> <body> Aceasta este prima mea pagin Web. </body> </html>
Salvai fiierul cu numele "pagina.htm". Lansai browserul Internet Explorer. Selectai "Open" (sau "Open Page") din meniul File al browserului. Apare o fereastr de dialog. Selectai "Browse" (sau"Choose File") i localizai fiierul HTML creat - "pagina.htm" selectai-l i efectuai click pe "Open". n fereastra de dialog va aprea adresa fiierului, de exemplu "D:\HTML\pagina.htm". Efectuai click OK i browserul va afia aceast pagin.

Explicarea exemplului
Orice document HTML ncepe cu notaia <html> i se termin cu notaia </html>. Aceste notaii se numesc n literatura de specialitate tag-uri. Prin convenie, toate tagurile HTML ncep cu o parantez unghiular deschis < i se termin cu o parantez unghiular nchis >. Tag-urile ntre aceste paranteze transmit comenzi ctre browser pentru a afia pagina ntrun anumit mod. Tag-ul <html> indic browserului c acesta este nceputul documentului

HTML. Ultimul tag din document este </html>. Acest tag indic browserului c acesta este sfritul documentului HTML. ntre cele dou marcaje <html> i </html> exist dou seciuni: - seciunea de antet <head>...</head> i - corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi afiat n fereastra browserului. Un tag poate fi scris att cu litere mici, ct i cu litere mari. Adic <HTML> = <HtmL> = <html>. Caracterele spaiu i CR/LF ce apar ntre taguri sunt ignorate de ctre browser. Titlul unei pagini se obine insernd n seciunea <head>...</head> a urmtoarei linii:

<title> Titlul paginii Web </title>

Coninutul blocului <title>...</title> va aprea n bara de titlu a ferestrei browser-ului. Dac acest bloc lipsete ntr-o pagin HTML, atunci n bara de titlu a ferestrei browser-ului va aprea numele fiierului. Textul dintre tagurile <body> i </body> este textul care apare n fereastra browserului. n seciunea <body>...</body> poate fi scris text ct dorii. Daca nu apare nici un marcaj de tipul <tag> atunci interpretatorul HTML le va lua ca texte simple i le va afia pe ecran. Dac introducem mai multe linii intr-o pagin browser-ul va afia ntr-un singur rnd, ntruct caracterele CR/LF sunt ignorate de browser. Trecerea pe o linie noua se face la o comand explicit, care trebuie s apar n pagina html. Aceast comand este marcajul <br> (de la line break - ntrerupere de linie). Textul dintre tagurile <head> i </head> este o informaie de antet. Informaia de antet nu este afiat n fereastra browserului.

Extensiune HTM sau HTML?

Fiierul HTML poate fi salvat cu extensiunea .htm sau .html. n exemplu a fost utilizat extensiunea .htm prin analogie cu extensiunile de 3 litere ale altor fiiere, dei extensiunea .html este echivalent.

Editoare HTML:
Documentele HTML sunt documente n format ASCII i prin urmare pot fi create cu orice editor de texte. Fiierele HTML pot fi create i redactate utiliznd un editor WYSIWYG (what you see is what you get - ce vezi este ceea ce obii ), precum FrontPage, Claris Home Page, sau Adobe PageMill fr a fi nevoit s scriei tagurile de marcare n textul documentului.

Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate (i formatate) cu alte editoare. Dac dorii s fii un elaborator Web profesionist este necesar s utilizai un editor de texte pentru a nva a scrie fiiere HTML.

ntrebri frecvente (Frequently Asked Questions) Dup ce am compus un fiier HTML, nu pot vedea rezultatul n browser. Care este cauza?
Asugurai-v c ati salvat documentul cu un nume corect cu extensiunea .htm sau .html, de exemplu "d:\pagina.htm". De asemenea asigurai-v c utilizai acelai nume cnd deschidei fiierul n browser.

Am ncercat s redactez fiierul HTML, dar modificrile nu au aprut n browser. Care este cauza?
Browserul menine paginile n memoria cache, ca s nu citeasc aceeai pagin de dou ori. Dac ai modificat pagina, browserul nu tie acest lucru. Utilizai butonul refresh/reload al browserului pentru a fora browserul s citeasc pagina modificat.

Ce browser trebuie s utilizez? Poate fi utilizat orice browser, Internet Explorer, Mozilla, Netscape sau Opera. Unele documente Web necesit ultimile versiuni ale browserelor. 1.2. HTML 4.0 sau HTML 3.2? HTML 3.2 nu mai este recomandat s se utilizeze!
Iniial HTML nu a fost lansat pentru formatarea documentelor. Tagurile HTML au fost create pentru a defini coninutul sau structura documentului, de exemplu: <p>Acesta este un paragraf</p> <h2>Acesta este un titlu</h2>. Atunci cnd au fost adugate taguri de tipul <font> i atributele pentru culori n specificaiile HTML 3.2 a nceput durerea de cap a programatorilor de pagini Web. Elaborarea unor situri Web de proporii, unde fonturile i culorile trebuie adugate pentru fiecare pagin Web a devenit un proces de durat, anevoios i extenuant.

Ce este valoros n HTML 4.0 ?

n HTML 4.0 toate formatrile pot fi scoase n afara documentului HTML i incluse ntr-o foaie separat denumit style sheet sau foaie de stil. Deoarece HTML 4.0 separ presentarea documentului de structura lui, a fost obinut ceea ce se dorea dintotdeauna: controlul total al ablonului de prezentare fr a implica coninutul documentului.

Ce se recomand?

ncetai s utilizai atribute de prezentare n interiorul tagurilor HTML. Lista complet a tagurilor HTML indic tagurile i atributele nvechite (deprecated) HTML 4.0 i este prezentat n anexa 1.

1.3. Validarea fiierelor HTML 4.01

Un document HTML este validat referitor la Document Type Definition - Definirea Tipului de Document (DTD). nainte de a valida un fiier HTML, este necesar de a aduga DTD corect n primul rnd al fiierului. HTML 4.01 Strict DTD permite includerea elementelor i atributelor care nu sunt nvechite sau nu se utilizeaz n definirea cadrelor (frameset):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD permite includerea tuturor elementelor din DTD strict plus elementele i atributele nvechite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD include transitional DTD plus cadrele (frames):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2. Elemente i atribute HTML

Documentele HTML sunt fiiere de tip text, care conin elemente HTML. Elementele HTML sunt definite prin intermediul tagurilor HTML. 2.1.Taguri HTML

Tagurile HTML se utilizeaz pentru a marca elementele HTML. Tagurile HTML sunt delimitate prin intermediul a 2 caractere < i >. Caracterele de delimitare se numesc paranteze unghiulare. Tagurile HTML de obicei se utilizeaz n perechi, de exemplu <body> i </body>. 7

Primul tag din pereche este tagul de start, al doilea tag este tag de final. Textul dintre tagul de start i de final este coninutul elementului. Tagurile HTML nu depind de registru, <body> este echivalent cu <BODY>. Unele elemente HTML au numai tag de start. Aceste elemente se numesc vide (empty). Tagurile de final sunt opionale pentru unele elemente, standardul HTML 4.0 recomand ns includerea tagurilot de final opionale.

2.2. Elemente HTML

Considerm un exemplu de document HTML:

<html> <head> <title>Elemente HTML</title> </head> <body> <p> Fragment de text. <b>Acest text este evideniat cu aldine</b> </p> </body> </html> Acesta este un element HTML: <b> Acest text este evideniat cu aldine </b> Elementul HTML ncepe cu tagul de start: <b>. Coninutul elementului HTML este: Acest text este evideniat cu aldine. Elementul HTML se termin cu tagul de final: </b>. Tagul <b> se utilizeaz pentru a defini un element HTML afiat cu aldine. Acesta este de asemenea un element HTML: <body> <p>

Fragment de text. <b>Acest text este evideniat cu aldine</b> </p> </body>

Acest element HTML ncepe cu tagul de start <body> i se termin cu tagul de final </body>. Tagul <body> definete elementul HTML care conine corpul documentului HTML. De ce utilizm taguri cu minuscule?
Tagurile (tags) HTML nu depind de registru: <B> este echivalent cu <b>. Dac vei naviga pe Web, vei observa c n majoritatea tutorialelor se utilizeaz taguri HTML scrise cu majuscule. n aceast lucrare se utilizeaz taguri HTML scrise cu minuscule. De ce? Consoriumul World Wide Web (W3C) http://www.w3.org recomand utilizarea tagurilor HTML cu minuscule n standardele HTML 4. XHTML (generaia urmtoare HTML) necesit de asemenea taguri cu minuscule.

2.3. Atribute
Tagurile pot avea atribute. Atributele ofer informaie suplimentar despre elementele HTML. Tagul <body> definete elementul body din pagina HTML. Dac se adaug atributul bgcolor, atunci browserul afieaz pagina ntr-o culoare de fundal indicat de valoarea atributului bgcolor.

Exemplu culoare de fundal. Dac fundalul paginii este galben deschis, atunci trebuie s se scrie: <body bgcolor="lightyellow">. Exemplu tabel fr bordur. Tabelele se creeaz cu tagul <table>. Dac se adaug atributul border cu valoarea 0, atunci browserul va afia un tabel fr bordur. <table border="0"> Atributele se utilizeaz ntotdeauna n perechi: name="value". (nume="valoare".) Atributele se adaug ntotdeauna n tagul de start al elementului HTML. Utilizarea ghilimelelor: "red" sau 'red' ?
Valorile atributelor trebuie s fie ntotdeauna incluse ntre ghilimele. n majoritatea cazurilor se utilizeaz ghilimele duble, dar pot fi utilizate i ghilimele simple.

Rareori, atunci cnd valoarea atributului conine ghilimele este necesar s se utilizeze ghilimele simple: name='Ion "NumeScurt" Ionescu'

3. Elemente ce definesc titluri, paragrafe

3.1. Paragrafe Cele mai utilizate taguri HTML sunt cele ce definesc titlurile (headings), paragrafele (paragraphs) i ntreruperile de linie (line breaks). Cea mai eficient cale de a studia HTML este de a scrie i testa diferite exemple. Testeaz singur - Exemple Cel mai simplu document HTML Acest exemplu este un document HTML foarte simplu, cu un numr minim de taguri HTML. Exemplul demonstreaz cum este afiat textul din interiorul elementului body n fereastra browserului. Cod HTML: <html> <body> Continutul elementului body. Text structurat prin intermediul tagurilor HTML. Rezultatul apare in fereastra browserului. </body> </html> Rezultat: Continutul elementului body. Text structurat prin intermediul tagurilor HTML. Rezultatul apare in fereastra browserului. Paragrafe simple. Acest exemplu demonstreaz cum este afiat textul marcat cu elementul paragraph. Cod HTML: <html> <body>

10

<p> Acesta este text din paragraf. </p> <p> Acesta este text din paragraf. </p> <p> Acesta este text din paragraf. </p>

<p> Elementul paragraph este definit de tagul p.</p> </body> </html> Rezultat: Acesta este text din paragraf. Acesta este text din paragraf. Acesta este text din paragraf. Elementul paragraph este definit de tagul <p>. HTML adaug n mod automat spaiu liber pn i dup paragraf. 3.2. Titluri (Headings) Titlurile sunt definite cu tagurile <h1> - <h6>. <h1> definete titlul de nivel 1 (mai important, evideniat cu litere aldine avnd cea mai mare nlime relativ. <h6> definete titlul de nivel 6 (cel mai mic). HTML adaug n mod automat un rind liber pn i dup titlu.
Cod HTML:

<html> <body> <h1> Titlu de nivel 1 </h1> <h2> Titlu de nivel 2 </h2> <h3> Titlu de nivel 3 </h3> <h4> Titlu de nivel 4 </h4> <h5> Titlu de nivel 5 </h5> <h6> Titlu de nivel 6 </h6> <p> Utilizati tagurile heading doar pentru titluri. Nu le utilizati pentru a evidentia un text. Exist alte taguri pentru evidentiere.</p>

11

</body> </html>
Rezultat.

Titlu de nivel 1
Titlu de nivel 2
Titlu de nivel 3
Titlu de nivel 4
Titlu de nivel 5
Titlu de nivel 6

Sfaturi utile
Utilizati tagurile heading doar pentru titluri. Nu le utilizati pentru a evidenia un text. Exist alte taguri pentru evideniere.

3.3. ntreruperi de linie Tagul <br> se utilizeaz cnd dorii ca rndul s se termine, dar nu dorii s ncepei un paragraf nou. Tagul <br> foreaz textul s treac dintr-un rind n altul, indifferent unde este plasat acest tag. <p>Acesta <br> este para<br>graf cu ntreruperi de linie.</p> Tagul <br> este vid (empty). El nu are tag de final. Rezultat: Acesta este para graf cu ntreruperi de linie. 3.4. Comentarii HTML Tagul pentru comentariu este utilizat pentru a insera un comentariu n sursa cod HTML. Comentariul este ignorat de browser. Comentariile se utilizeaz pentru a explica codul HTML, pentru revizuiri ulterioare.

12

<!Acesta este un comentariu --> Not. Semnul exclamrii apare dup paranteza unghiular de deschidere, dar nu nainte de paranteza de nchidere. Sfaturi utile
Atunci cnd scriei text HTML, nu putei ti cum va aprea acest text n alt browser. Unii utilizatori au calculatoare cu ecrane de dimensiuni mari, alii calculatoare cu ecrane de dimensiuni mici. Textul va fi reformatat de fiecare dat cnd utilizatorul va redimensiona fereastra browserului. Nu ncercai niciodat s formatai textul din editor prin adugarea liniilor libere sau a spaiilor n text. HTML va elimina spaiile din text. Orice numr de spaii va fi interpretat ca un singur spaiu. n HTML un rnd nou din editorul de text se interpreteaz ca un spaiu. Nu se recomand utilizarea paragrafelor vide<p> pentru a insera un rnd nou. Utilizai n acest scop tagul <br>. (Nu utilizai ns tagul <br> pentru a crea liste.) Paragrafele pot fi create fr tagul de nchidere </p>, adic tagul </p> este opional. Se recomand s utilizai tagul </p>. Urmtoarea versiune HTML nu va permite s omitei nici un tag de nchidere. HTML adaug n mod automat un rnd liber nainte i dup unele elemente, de exemplu pn i dup un paragraf, precum i pn i dup titluri. n aceast lucrare se utilizeaz o linie orizontal (tagul <hr> ) pentru a separa diferite teme. Taguri de baz HTML
Tag <html> <body> <h1> - <h6> <p> <br> <hr> Descriere Definete un document HTML Definete corpul documentului Definete titlurile de nivel 1 pn la 6 Definete un paragraf Insereaz o singur ntrerupere de linie Definete o linie orizonta

13

<!-->

Definete un comentariu

4. Liste HTML
n HTML exist liste ordonate (numerotate), liste neordonate (marcate) i liste de definiii. 4.1. Liste neordonate O list marcat este o list de elemente (cuvinte sau fraze scurte). Elementele din list sunt marcate printr-un character special (de obicei cerculee mici). O list marcat are tagul de start <ul>. Fiecare element din list este identificat de tagul <li>. <ul> <li>Molid</li> <li>Pin</li> <li>Brad</li> </ul> n browser va aprea:

Molid Pin Brad

n interiorul elementelor din list pot fi incluse paragrafe, ntreruperi de linie, imagini, linkuri, alte liste, etc. 4.2. Liste Ordonate O list ordonat este de asemenea o list de elemente. Elementele din list sunt marcate prin numere, deaceea aceste liste se mai nuesc numerotate. O list marcat are tagul de start <ol>. Fiecare element din list este identificat de tagul <li>. <ol>

14

<li>Molid</li> <li>Pin</li> <li>Brad</li> </ol> n browser va aprea:

1. Molid 2. Pin 3. Brad

n interiorul elementelor din list pot fi incluse paragrafe, ntreruperi de linie, imagini, linkuri, alte liste, etc. 4.3. Liste de Definiii O list de definiii nu este o list de elemente. Aceasta este o list de termeni (noiuni) i de explicri ale acestor termeni. O list de definiii ncepe cu tagul <dl>. Fiecare termen al definiiei ncepe cu tagul <dt>. Fiecare definiie ncepe cu tagul <dd>. <dl> <dt>HTML</dt> <dd>Limbaj de marcare a hipertextului</dd> <dt>FTP</dt> <dd>Protocol de transfer al fiierelor</dd> </dl> n browser va aprea:
HTML FTP Limbaj de marcare a hipertextului Protocol de transfer al fiierelor

In interiorul definiiei din lista de definiii (tagul <dd>) pot fi incluse paragrafe, ntreruperi de linie, imagini, linkuri, alte liste, etc
Taguri pentru crearea listelor

15

Tag <ol> <ul>

Descriere Definete o list ordonat Definete o list neordonat Definete un element din list Definete o list de definiii Definete un termen din definiie Definete descrierea definiiei nvechit (Deprecated). Utilizai <ul> nvechit (Deprecated). Utilizai <ul>

<li> <dl> <dt>

<dd>

<dir> <menu>

5. Linkuri HTML
HTML utilizeaz elementul hyperlink (link, ancor) pentru a crea o legtur ctre alt document de pe Web. 5.1. Tagul Anchor i Atributul Href HTML utilizeaz elementul <a> (anchor) pentru a crea un link ctre alt document.
O ancor poate face legtura ctre orice alt resurs de pe Web: o pagin HTML, o imagine, un fiier de tip sunet, un fiier de tip videofilm, etc. Sintaxa de creare a unei ancore: <a href="url">Textul linkului</a> Tagul <a> este utilizat pentru a crea o ancor prin care se face legtura ctre o alt resurs, atributul href este utilizat pentru a indica adresa documentului ctre care se face legtura, iar textul dintre tagurile de deschidere i de nchidere ale ancorei va aprea ca hyperlink. Aceast ancor definete o legtur ctre pagina ziarului Timpul: <a href="http://www.timpul.md/">Citii Timpul!</a> Rndul de mai sus va aprea astfel n browser:

Citii Timpul! 5.2. Atributul Target

Atributul target este utilizat pentru a indica unde s se deschid documentul ctre care se face hiperlegtura.

16

n exemplul ce urmeaz documentul din hiperlegtur se deschide ntr-o fereastr nou a browserului: <a href="http://www.timpul.md/" target="_blank">Citii Timpul!</a>

5.3.Tagul Ancor i Atributul Name

Atributul name este utilizat pentru a crea o ancor denumit. Ancorele denumite se utilizeaz pentru a crea legturi ctre seciuni sau fragmente specifice din pagina dat. Prin intermediul acestor legturi utilizatorul deruleaz documentul n fereastra browserului fr a utiliza bara de derulare vertical n mod manual, atunci cnd vrea s gseasc un fragment anume din document. Sintaxa pentru ancora denumit este urmtoarea: <a name="fragment">Fragment de text ctre care indic hiperlegtura intern din document.</a> Atributul name este utilizat pentru a crea o ancor denumit. Valoarea atributului name este arbitrar i este definit de autorul paginii. Este important ca autorul s nu utilizeze valori ce se repet. Exemplu de ancor denumit: <a name="sfat">Seciunea sfaturi utile</a> Ancora denumit nu este evideniat n nici un fel n fereastra browserului. Pentru a face o legtur direct ctre seciunea sfaturi, se adaug un caracter # i valoarea atributului name a ancorei la sfritul URL, n felul urmtor: <a href="http://www.tutorial.md/html_links.html#sfat"> Vezi seciunea Sfaturi utile</a> Hiperlegtura ctre sectiunea sfaturi utile din interiorul fiierului html_links.html va aprea astfel: <a href="#sfat">Vezi Seciunea Sfaturi utile</a>

Sfaturi utile
ntotdeauna adugai un slash (caracterul /) atunci cnd facei referin ctre un subdirectoriu. Dac scriei astfel: href="http://www.tutorial.md/html", vei genera 2 interogri HTTP ctre server, deoarece serverul va aduga un slash la

17

sfritul adresei i va crea o interogare href="http://www.tutorial.md/html/"

nou

de

felul:

Ancorele denumite sunt deseori utilizate pentru a crea meniuri de coninut la nceputul unui document de proporii. Fiecrei seciuni din interiorul documentului i se atribuie o ancor denumit i se creaz hiperlegturi ctre aceste ancore denumite la nceputul documentului. Dac browserul nu poate gsi o ancor denumit, documentul este derulat ctre nceput. Nu se ntmpl nici o eroare.

Alte Exemple

Deschiderea unei legturi ntr-o fereastr nou a browserului Acest exemplu demonstreaz cum pote fi fcut legtura ctre alt document care se va deschide ntr+o fereastr nou., astfel ca vizitatorul s nu prseasc pagina curent. <html> <body> <a href="ultima_pagina.htm" target="_blank">Ultima Pagina</a> <p> Dac valoarea atributului target a elementului anchor este "_blank",atunci documentul la care se face referin se va deschide ntr-o fereastr nou. </p> </body> </html> Link ctre o locaie din aceeai pagin Acest exemplu demonstreaz cum poate fi creat o hiperlegtur ctre un fragment (seciune) din document. <html> <body> <p> 18

<a href="#C4">Vezi Capitolul 4.</a> </p> <h2>Capitolul 1</h2> <p> n acest capitol se explic teoria ... </p> <h2> Capitolul 2</h2> <p> n acest capitol se explic teoria ... </p> <h2> Capitolul 3</h2> <p> n acest capitol se explic teoria ... </p> <h2><a name="C4"> Capitolul 4</a></h2> <p> n acest capitol se explic teoria ... </p> <h2> Capitolul 5</h2> <p> n acest capitol se explic teoria ... </p> <h2> Capitolul 6</h2> <p> n acest capitol se explic teoria ... </p> <h2> Capitolul 7</h2> <p> n acest capitol se explic teoria ... </p> <h2> Capitolul 8</h2> <p> n acest capitol se explic teoria ... </p> </body> </html> Crearea unei legturi mailto
Acest exemplu demonstreaz cum poate fi creat o hiperlegtur de expediere a unui mesaj electronic (va funciona doar n cazul cnd este configurat un program client de pot electronic).

<html> <body> <p> Aceasta este o hiperlegtur pentru expedierea unui mesaj electronic:

19

<a href="mailto:login@mail.md?subject=Hello%20again">Send Mail</a> </p> <p> <b>Not:</b> Spaiile dintre cuvinte trebuie s fie nlocuite cu %20 pentru ca browserul s afieze corect textul. </p> </body> </html>
Taguri Link
Tag <a> Descriere Definete o ancor

6.HTML Uniform Resource Locators

6.1. Hiperlegturi HTML
Atunci cnd efectuai un click pe o hiperlegtur din documentul HTML de tipul: Pagina

urmtoare, tagul <a> care este responsabil de afiarea hiperlegturii indic calea spre o
locaie (o adres) de pe Web prin valoarea atributului href astfel: <a href="paginaurm.htm">Pagina urmtoare</a>. Hiperlegtura din acest exemplu este una relativ fa de pagina din care este accesat. Dac pagina curent unde se afl hiperlegtura dat este plasat la adresa

http://www.tutorial.md/html/ , atunci browserul va construi o adres Web complet astfel http://www.tutorial.md/html/pagina-urm.htm pentru a accesa aceast pagin. 6.2. Uniform Resource Locators
Noinea Uniform Resource Locator (URL) este utilizat pentru a indica i accesa adresa unui document (sau alte date) din World Wide Web. O adres complet :

http://www.tutorial.md/html/page.htm respect urmtoarea sintax:

scheme://host.domain:port/path/filename

Partea scheme definete

tipul serviciului Internet. Cel mai frecvent utilizat tip este http

(abreviere de la Hyper Text Transfer Protocol Protocol de transfer al hipertextului).

20

Partea domain definete numele de domeniu (domain name) Internet al serverului, unde este plasat informaia, de exemplu tutorial.md. Partea host definete domeniul gazd - host. Dac host lipsete, atunci n mod predefinit pentru protocolul http host este www. Partea :port definete numrul portului (port number) a serverului gazd. De obicei numrul portului este omis. n mod prestabilit pentru http numrul portului este 80. Partea path definete calea (path) ( subdirectoriul) de pe server ctre documentul dat. Dac calea este omis, resursa (documentul) trebuie s fie plasat n directoriul rdcin pe serverul Web. Partea filename definete numele documentului (numele fiierului). Implicit numele fiierului care este afiat la lansarea primei pagini a site-lui dat trebuie s fie index.html. index.htm, default.htm, default.asp n dependen de configurrile serverului Web.

6.3. Scheme URL

Cele mai frecvente scheme URL sunt urmtoarele: Schem file ftp http gopher news telnet WAIS Acces Fiier de pe calculatorul local PC Fiier de pe un server FTP Fiier de pe un server World Wide Web Fiier de pe un server Gopher Un grup de nouti Usenet conexiune Telnet Fiier de pe un server WAIS

6.4. Accesarea unui grup de nouti (Newsgroup)

Codul HTML: <a href="news.html">HTML Newsgroup</a> creaz o hiperlegtur ctre un grup de nouti newsgroup astfel HTML Newsgroup.

6.5. Preluarea fiierelor cu FTP

Codul HTML: <a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a> creaz o hiperlegtur pentru a prelua un fiier astfel: Download WinZip.

6.6. Hiperlegtur ctre sistemul Mail

Codul HTML : <a href="mailto:login@tutorial.md">login@tutorial.md</a>

21

creaz o hiperlegtur ctre adresa de pot electronic indicat astfel:

login@tutorial.md

7. Imagini
Imaginile sunt stocate n fiiere cu diverse formate. Formatele acceptate de browsere pentru fiierele imagine sunt:

GIF (Graphics Interchange Format) cu extensia .gif; JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; PNG (Portable Network Graphic) cu extensia png; BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 culori posibile), JPEG (24 bii pentru o culoare, 16777216 de culori posibile) i PNG (acelai numr de culori ca i JPEG) .

7.1. Adresa URL a unei imagini

URL (Uniform Resourse Locator - identificator unic al resursei) este un standard folosit n identificarea unic a unei resurse n Internet. Toate imaginile cu care vom lucra vor avea adresa URL exprimat n funcie de directorul ce conine documentul HTML care face referire la imagine. Pentru a insera o imagine intr-o pagin, se utilizeaz tagul <img> (de la image - imagine). Pentru a putea fi identifica imaginea care va fi inserata, se utilizeaz un atributul src (de la source - surs). Daca imaginea se afl n acelai directoriu cu fiierul HTML care face referire la imagine, atunci adresa URL a imaginii este format numai din numele imaginii, inclusiv extensia.

<html> <head> <title> O pagina cu imagine </title> </head> <body> <p>O pagina care contine o imagine. </p> <img src = "imagine.jpg">. </body> </html>

22

7.2. Chenarul i dimensionarea unei imagini

Un chenar n jurul imaginii se adaug prin intermediul atributului border al tagului <img>. Valorile acestui atribut sunt numere ntregi pozitive i indic grosimea chenarului n pixeli. O imagine are anumite dimensiuni pe orizontal i vertical, stabilite n momentul crerii ei. Dac nu se specific altfel, aceste dimensiuni sunt respectate n momentul afirii ei n pagina Web. Dimensiunile prestabilite ale unei imagini pot fi indicate prin intermediul atributelor width i height.

<html> <head> <title> Imagine cu chenar </title> </head> <body> <h1>O imagine cu chenar i dimensiuni</h1> <img src = "imagine.jpg" border = "4" width = "350" height = "250"> <p>textul unui paragraf</p> </body> </html>
Atributele width i height se utilizeaz n dou scopuri. Ele indic browserului dimensiunile imaginii, astfel c browserul rezerveaz pentru imagine n prealabil un spaiu adecvat, ceea ce faciliteaz ncrcarea mai rapid a paginii. n plus, imaginea poate fi distorsionat (micorat sau mrit, ceea ce nu se recomand) prin modificarea dimensiunilor ei, indicnd valori ale atributelor width i height diferite de cele reale.

7.3 Alinierea unei imagini

Alinierea unei imagini se poate realiza prin intermediul atributului align care are urmtoarele valori:

left aliniere pe orizontal la stnga; celelalte elemente sunt plasate n partea dreapt; right aliniere pe orizontal la dreapta; celelalte elemente sunt plasate n partea stng; top aliniere pe vertical, partea de sus a imaginii se aliniaz cu partea de sus a textului ce precede imaginea;

23

middle aliniere pe vertical; mijlocul imaginii se aliniaz cu linia de baza a textului ce precede imaginea; bottom aliniere pe vertical; partea de jos a imaginii se aliniaz cu linia de baz a textului. <html>

<head> <title> Alinierea unei imagini </title> </head> <body> <h2>Aliniere pe verticala</h2> <p> text ce precede <img src = "imagine.jpg" align = "top"> text ce urmeaza. </p> </body> </html>

7.4. Alinierea textului n jurul imaginii

Atributele hspace i vspace precizeaz distana n pixeli pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagin. Atributul alt are ca valoare un text care va fi afiat n locul imaginii.

<html> <head> <title> Alinierea unei imagini </title> </head> <body> <p> Imagine aliniata la stanga inconjurata de text la distanta de 30 de pixeli</p> <p> Text pn la imagine. Text pn la imagine. Text pn la imagine. Text pn la imagine. Text pn la imagine. Text pn la imagine. Text pn la imagine. Text pn la imagine. Text pn la imagine. <img src = "imagine.jpg" align = "left" hspace ="30" vspace = "30" alt = "text descriere imagine"> Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. 24

Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. </p> </body> </html>

7.5. Imagini n calitate de referine

O imagine poate fi utilizat pentru a stabili o legtur ctre alt pagin Web. n acest scop se folosete tagul imaginii n calitate de coninut al legturii, avnd ca valoare adresa URL a paginii ctre care se face referina. O legatur (link) introduce n pagina Web o zon activ. Efectund click cu mousul pe aceast zon n browser se va ncarc o alta pagina. Pentru a utiliza imaginea imagine.jpg drept legatur catre pagina pag.html utilizm sintaxa:

<a href = "index.html"> <img src="imagine.jpg"> </a>

n mod prestabilit imaginea utilizat ca zon activ este nconjurat de un chenar avnd culoarea unei legturi. Dac stabilim pentru atributul border al tagului <img> valoarea 0, acest chenar dispare.

<html> <head> <title> Imagini folosite ca legaturi </title> </head> <body> <h1>Imagini folosite ca legaturi. </h1> <p>Text inainte de imagine.</p> <a href = "pag.html"> <img src = "imagine.jpg" border = "0"> </a> <p>Text dupa imagine.</p> </body> </html>

7.6. Utilizri speciale ale imaginilor

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

25

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

8. Tabele HTML
8.1. Crearea unei tabele
Tabelele sunt definite prin intermediul tagului < table>. Un tabel este compus din rnduri (se utilizeaz tagul <tr> ), iar fiecare rnd este compus din celule (se utilizeaz tagul < td>). Caracterele td provin de la "table data (date din tabel)", adic indic coninutul din celule. Datele din celule pot conine text, imagini, liste, paragrafe, formulare, linii orizontale, tabele, etc.

<table border="1"> <tr> <td>rndul 1, celula 1</td> <td>rndul 1, celula 2</td> </tr> <tr> <td>rndul 2, celula 1</td> <td>rndul 2, celula 2</td> </tr> </table>
Rezultatul acestui cod n browser: rndul 1, celula 1 rndul 1, celula 2 rndul 2, celula 1 rndul 2, celula 2

8.2. Tabele i Atributul Border

Dac nu este specificat atributul border, tabelul va aprea fr chenar. Uneori este util ca tabelul s apar fr chenare, dar de cele mai dese ori este necesar ca tabelul s fie cu chenar. Pentru a afia un tabel cu chenar trebuie s fie utilizat atributul border:

<table border="1"> <tr> <td>Rndul 1, celula 1</td> <td>rndul 1, celula 2</td>

26

</tr> </table> 8.3. Titluri n Tabel

Titlurile de coloan dintr-un tabel sunt definite prin tagul < th>.

<table border="1"> <tr> <th>Titlu de coloan</th> <th>Alt titlu</th> </tr> <tr> <td>rndul 1, celula 1</td> <td>rndul 1, celula 2</td> </tr> <tr> <td>rndul 2, celula 1</td> <td>rndul 2, celula 2</td> </tr> </table>
n browser rezultatul va aprea astfel: Titlu de coloan Alt titlu

rndul 1, celula 1 rndul 1, celula 2 rndul 2, celula 1 rndul 2, celula 2

8.4. Celule libere (vide) n tabel

Celulele fr coninut din tabel nu sunt afiate bine n majoritatea browserelor.

<table border="1"> <tr> <td>rndul 1, celula 1</td> <td>rndul 1, celula 2</td> </tr>

27

<tr> <td>rndul 2, celula 1</td> <td> </td> </tr> </table>

n browser va aprea: rndul 1, celula 1 rndul 1, celula 2 rndul 2, celula 1 Notai c chenarul lipsete pentru celulele fr coninut (NB! Browserul Mozilla Firefox afieaz chenarul). Pentru a soluiona aceast problem, adugai un spaiu liber (non-breaking space - &nbsp;) pentru celulele fr coninut, pentru a face chenarul visibil:

<table border="1"> <tr> <td>rndul 1, celula 1</td> <td>rndul 1, celula 2</td> </tr> <tr> <td>rndul 2, celula 1</td> <td>&nbsp;</td> </tr> </table>
Rezultatul n browser: rndul 1, celula 1 rndul 1, celula 2 rndul 2, celula 1

Sfaturi utile
Elementele <thead>,<tbody> i <tfoot> sunt rareori utilizate, deoarece nu toate browserele le suport. Browserul Internet Explorer 5.0 sau de o versiune mai nou accept aceste elemente.

28

8.5. Atributele Cellpadding i Cellspacing

Atributul cellpadding se utilizeaz pentru a aduga spaii libere ntre coninutul celulei i graniele celulei. Atributul cellspacing se utilizeaz pentru a aduga spaii libere ntre coninutul celulei i graniele celulei.

<html> <body> <h4> Fr cellpadding i cellspacing:</h4> <table border="1"> <tr> <td>Celula 1</td> <td>Celula 2</td> </tr> <tr> <td> Celula 3</td> <td> Celula 4</td> </tr> </table> <h4>Cu cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td> Celula 1</td> <td> Celula 2</td> </tr> <tr> <td> Celula 3</td> <td> Celula 4</td> </tr> </table> </body> </html>

29

8.6. Alinierea coninutului n tabel

Alinierea coninutului celulelor se efectueaz prin intermediul atributului align, care poate avea 3 valori posibile: left; center; right.

<body> <table width="400" border="1"> <tr> <th align="left"> Cheltuieli</th> <th align="right">Ianuarie</th> <th align="right">Februarie</th> </tr> <tr> <td align="left">Haine</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Cadouri</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">Alimente</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">Suma</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table>

30

</body> </html>
Rezultatul n browser:

Taguri Tabele Tag Descriere Definete un tabel Definete un titlu de coloan n tabel Definete un rnd din tabel Definete o celul din tabel Definete denumirea unui tabel Definete valori ale atributelor pentru una sau mai multe coloane n tabel Definete antetul unui tabel Definete corpuul unui tabel Definete subsolul unui tabel

<table>
<th> <tr> <td> <caption>

<colgroup> Definete grupuri de coloane n tabel <col> <thead> <tbody> <tfoot>

9. Formulare
Un formular este un set de zone active alctuit din cmpuri de completare text, casete de selectare, butoane, etc. Formularele asigur construirea unor pagini Web care permit utilizatorilor s introduc informaii i sa le transmit serverului. Formularele pot varia de la un simplu cmp de text, pentru introducerea unui ir de caractere cu sensul de cuvinte cheie de cutare element caracteristic tuturor motoarelor de cutare din Web pn la o structur complex, cu multiple seciuni, care ofer posibiliti de transmitere a datelor. O sesiune cu o pagin web ce conine un formular cuprinde urmtoarele etape: Utilizatorul completeaz formularul i l expediaz unui server.

31

aplicaie (cod scris ntr-un limbaj de programare) de pe server analizeaz datele din formularul completat i le prelucreaz. De cele mai dese ori stocheaz datele ntr-o baza de date.

Daca este necesar serverul expediaz un rspuns utilizatorului.

Un formular este definit ntr-un bloc delimitat de tagurile respective < form> i </form>.

9.1. Atribute eseniale ale elementului <form> Exist doua atribute eseniale ale elementului <form>. 1. Atributul action precizeaz unde vor fi expediate datele formularului odat ce acesta este completat. De regul, valoarea atributului action este adresa URL a unui script aflat pe un server WWW care primete datele formularului, efectueaz o prelucrare a lor i expediaz ctre utilizator un rspuns.
<form action=http://www.server.md/cgi-bin/nume_fisier.cgi>.

Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell. 2. Atributul method precizeaz metod utilizat de browser pentru expedierea datelor din formular. 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); ntre adresa URL i date este inserat un caracter?. Datele sunt adugate conform sintaxei: nume_cmp = valoare_cmp. ntre diferite seturi de date la expediere este introdus un caracter&. Exemplu:
http://www.server.md/cgi-bin/nume_fis.cgi?nume1 = val_1&nume2 = val_2;

post. n acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (ordinul MB) Pentru ca un formular sa fie funcional, trebuie precizat ce se va ntmpla cu el dup completare i expediere.

Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (este-mail). Pentru aceasta se folosete atributul action al elementului

32

<form>, care primete ca valoare mailto: concatenat cu o adres valid de e-mail ctre care se va expedia formularul completat.

9.2. Cmp de tip text Majoritatea elementelor unui formular sunt definite cu ajutorul elementului <input>. Pentru a preciza tipul elementului se folosete atributul type al elementului <input>. Pentru un cmp de editare, acest atribut primete valoarea text. Alte atribute pentru un element <input> sunt:

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

<html> <head> <title>Exemplu de Formular </title> </head> <body> <h1> Un formular cu un cmp de editare i un buton de expediere </h1> <hr> <form action = "form.html " method="post"> Numele: <input type = "text" name = "nume" value = "Nume"> </form> </body> </html> Pentru elementul <input> de tipul cmp text cmp de completare (type = text), alte dou atribute pot fi utile:

atributul size specific limea cmpului de editare; dac el depete aceasta lime, atunci se execut automat o derulare a acestui cmp; atributul maxlength specific numrul maxim de caractere pe care le poate primi un cmp de editare; caracterele tastate peste numrul maxim sunt ignorate.

Sfaturi utile:
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 dup completarea i apsarea tastei ENTER.

33

9.3. 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 daca se utilizeaz limbajele Javascript sau Java). Pentru a insera un buton ntr-un formular, se utilizeaz tagul < input> avnd atributul type cu valoarea button. Alte doua atribute ale elementului button sunt:

atributul name, care permite atribuirea unui nume butonului; atributul value, care primete ca valoare textul ce va fi afiat pe buton.

Exist o a doua modalitate de a introduce ntr-o pagin Web un buton de apsat, i anume prin intermediul elementului <button>...</button>. Un astfel de buton poate fi inserat ntr-un formular, n acest caz efectund aciuni legate de acel formular, sau poate fi introdus oriunde n pagina pentru iniierea unor aciuni independente de formulare. Atributele posibile ale elementului button sunt:

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

n corpul blocului <button>...</button> se poate afla un text sau un tag de inserare a unei imagini.

9.4. Butonul Send Un buton de expediere al unui formular se adaug cu ajutorul elementului <input>, n care atributul type are valoarea submit. Acest element poate primi un nume prin atributul name. Pe buton apare scris Submit Query sau valoarea atributului value, daca aceast valoare a fost stabilit. <input type = "submit" value = "expedieaza"> 9.5. Butonul Reset Dac un element de tip <input> are atributul type cu valoarea reset, atunci n formular apare un buton de resetare. La apsarea acestui buton, toate elementele din

34

formular primesc valorile prestabilite (definita odat cu formularul), chiar dac aceste valori au fost modificate de utilizator. Un buton de tip Reset poate primi un nume cu ajutorul atributului name i o valoare printr-un atribut value. Un asemenea buton afieaz textul Reset daca atributul value lipsete, respectiv valoarea acestui atribut n caz contrar.

<html> <head> <title> Formular 2 </title> </head> <body> <h1> Un formular cu un buton reset </h1> <form action = "form_2.htm" method="post"> Nume: <input type = "text" name = "nume" value = "Nume"> <br> Prenume: <input type = "text" name = "prenume" value = "Prenume"> <br> <input type = "submit" value="trimite>
<input type = "reset" value = "sterge">

</form> </body> </html>

9.6. Cmp de tip password Dac se utilizeaz tagul <input> avnd atributul type cu valoarea password, atunci n formular apare 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 ca acest cmp de editare nu afieaz caracterele culese, 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 n mod obinuit, fr criptare.

<html> <head> <title> Formular 3 </title> </head> <body> <h1> Un formular cu cmp parol </h1> <hr> <form action = "form_3.htm" method="post"> Nume: <input type = "text" name = "nume"> <br> Prenume: <input type = "text" name = "prenume"> <br>
35

Password: <input type = "password" name = "parola">

<br> <input type = "submit" value = "trimite">

<input type = "reset" value = "sterge">

</form> </body> </html>

9.7. Butoane radio Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se adaug prin tagul <input> cu atributul type avnd valoarea radio.

<html> <head> <title> Formular 4 </title> </head> <body> <h1> Un formular cu butoane radio </h1> <form action = "form_4.htm" method="post">
Alegeti culoarea preferat:

<input type = "radio" name = "color" value = "a"> alb <input type = "radio" name = "color" value = "b">
roz <input type = "submit" value=trimite>

<input type = "reset" value=anuleaz > </form> </body> </html>

La expedierea formularului se va transmite una dintre perechile color=b sau color=f, n funcie de alegerea fcut de utilizator.

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

36

Sfaturi utile:
Fiecare caset poate avea un nume definit prin atributul name. Fiecare caset poate avea valoarea prestabilit selectat definit prin atributul checked.

<html> <head> <title> Formular 5 </title> </head> <body> <h1> Un formular cu casete checkbox </h1> <form action = "form_5.htm" method="post"> Alegeti meniul : <br> Nectar <input type = "checkbox" name = "nectar" value = "un pahar"> Bere <input type = "checkbox" name = "bere" value = "o sticla"> Cafea <input type = "checkbox" name = "cafea" value = "o ceasca"> <br>
<input type = "submit" value=trimite> <input type = "reset" value=anuleaz >

</form> </body> </html>

9.9. 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 caseta de fiiere:

atributul name permite ataarea unui nume; atributul value primete ca valoare adresa URL a fiierului care va fi expediat o dat cu formularul. Aceast valoare poate fi atribuit direct atributului value, poate fi tastat ntr-un cmp de editare ce apare o dat cu formularul sau poate fi selectat prin intermediul unei casete de tip File Upload sau Choose File care apare la apsarea butonului Browse... din formular;

37

atributul enctype precizeaz metoda utilizata la criptarea fiierului de expediat. Valoarea acestui atribut este multipart/form-data.

<html> <head> <title> Formular 6 </title> </head> <body> <h1> Un formular cu caseta de fisiere </h1> <hr> <form action = "form_6.htm" method="post"> Alegeti fisierul: <input type = "file" name = "fisier" value = "c:\temp\proba.html" enctype = "multipart/form-data"> <br> <input type = "submit" value=trimite> <input type = "reset" value=anuleaz> </form> </body> </html>

9.10. 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 tagurilor <select> i </select>. O lista de selecie poate avea urmtoarele atribute:

atributul name, care atribuie listei un nume (utilizat n perechile name=value expediat serverului); atributul size, care precizeaz (printr-un numr ntreg pozitiv, valoarea

prestabilita 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 list cu ajutorul elementului <option>. Dou atribute ale elementului option sunt utilizate frecvent:

atributul value primete ca valoare 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>; 38

atributul selected (fr alte valori) permite selectarea prestabilita a unui element al listei.

<html> <head> <title> Formular 7 </title> </head> <body> <h1> Un formular cu o lista de selectie </h1> <form action = "select.htm" method="post"> rile implicate n proiect: <br> <select name = "tara" size = "3"> <option value = "at"> Austria <option value = "be" selected> Belgia <option value = "es"> Spania <option value = "lt"> Lituania </select> <br> < <input type = "submit" value = trimite> <input type = "reset" value = anuleaz> </form> </body> </html>
9.11. List de selecie cu selecii multiple O list de selecie ce permite selecii multiple se creeaz ntocmai ca o lista de selecie obinuit. n plus, eticheta <select> are un atribut multiple (fr alte valori). Cnd formularul este expediat ctre server pentru fiecare element selectat al listei care este se insereaz cte o pereche name=value unde name este numele listei.

<html> <head> <title> Formular 8 </title> </head> <body> <h1> Un formular cu o lista de selectie ce accepta selectii multiple </h1> <form action = "cursuri.html" method="post">
Cursuri la alegere : <br>

39

<select name = "cursuri" size = "4"> <option value = "lm"> Logica Matematic</option> <option value = "tp" > Teoria probabilitii</option> <option value = "tg"> Teoria grafurilor</option> <option value = "ci" selected > Calcul integral</option> </select> <br> <input type = "submit" value="alege">
<input type = "reset" value="anuleaz">

</form> </body> </html>

9.12. Cmpuri text comentariu ntr-un formular cmpurile de editare de mai multe rnduri (comentariu) se adaug cu ajutorul elementului <textarea>. Elementul are urmtoarele atribute:

atributul cols, care specific numrul de caractere afiate ntr-un rnd; atributul rows, care specific numrul de rnduri afiate simultan; atributul name, care permite atribuirea unui nume cmpului de editare; atributul wrap, (de la word wrap = trecerea cuvintelor pe rndul urmtor), care

determin comportamentul cmpului de editare fa de sfritul de linie. Acest atribut poate primi urmtoarele valori:

a) off; n acest caz:

o

ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd dorete utilizatorul; caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul;

b) hard; n acest caz:

o o

se produce ntreruperea cuvintelor la marginea dreapt a editorului ; caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul;

c) soft; n acest caz: 40

o o

se produce ntreruperea cuvintelor la marginea dreapt a editorului ; nu se include caracterul de sfrit de linie n textul transmis serverului odat cu formularul;

<html> <head> <title> Formular 9 </title> </head> <body> <h1> Un formular cu un cmp de editare comentariu </h1> <form action = "comentariu.html" method="post"> <textarea name = "mesaj" cols = "30" rows = "5" wrap = "off">
Prima linie din textul initial. A doua linie din textul initial. </textarea>

<input type = "submit" value="expediaz"> <input type = "reset" value="anuleaz"> </form> </body> </html>

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

<html> <head> <title> Formular 10 </title> </head> <body> <h1> Un formular complex </h1> <table border = "0"> <form action = "formular.html" method = "post"> <tr align = left> <th> Nume: <td> <input type = "text" name = "nume"> <tr align = left> <th> Prenu: <td> <input type = "text" name = "prenume">

41

<tr align = left> <th> Telefon: <td> <input type = "text" name = "telefon"> <tr align = left> <th> Alegeti tipul de transport: <td> <input type = "checkbox" name = "autobus"> autobus
<input type = "checkbox" name = "tren">

tren

<input type = "checkbox" name = "avion"> avion <tr align = left> <th> Alegeti tipul de plata: <td> <ul> <li> <input type = "radio" name = "plata"> cash </li>
<li> <input type = "radio" name = "plata">

card </li>

</ul> <tr align = left> <th> Comentarii:

</th>

<td> <textarea name = "comentarii" cols = "30" rows = "5" wrap = "off"></td>
Inserati aici opiniile dumneavoastra referitoare la calitatea serviciilor noastre </textarea>

<tr>
<td> <input type = "submit" value = "expedieaza"> </td>

<td><input type = "reset" value = "sterge"></td> </form> </table> </body> </html>

Rezultatul n browser:

42

Sfaturi utile:
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.

10. Cadre (frames) n HTML

10.1. Crearea cadrelor Ferestrele sau (cadrele) permit s definim n fereastra browserului subferestre 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 tagul <frame>. 43

Un atribut obligatoriu al elementului <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:

mprirea unei ferestre ntr-un numr de subferestre de tip coloana se face cu ajutorul atributului cols al elementului <frameset> ce descrie acea fereastr; mprirea unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul atributului rows al elementului <frameset> ce descrie acea fereastr; valoarea atributelor cols i rows este o list de valori separate prin virgul, care descriu modul n care se face mprirea.

Valorile listei pot fi: 1. un numr ntreg de pixeli; 2. procente din dimensiunea ferestrei (numr ntre 1 i 99 urmat de %); 3. n* care nseamn n pri din spaiul rmas; Exemplul 1: cols = 100, *, 70% nseamn o mprire n 4 subferestre, dintre care prima are 100 pixeli, a treia ocup 70% din spaiul total disponibil, iar a doua ocupa n mod egal restul de spaiu rmas disponibil. Exemplul 2: rows = 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 de spaiu rmas disponibil, care se mparte n trei pari egale, a doua fereastr ocupnd o parte, iar a patra ocupnd 2 pri. Sfaturi utile:
Dac mai multe elemente din list au valori *, atunci spaiul disponibil rmas pentru ele se va mpri n mod egal. O subfereastra poate fi un cadru (folosind <frame>) n care se va ncrca un document HTML sau poate fi mprit la rndul ei n alte cadre (folosind <frameset>).

<html> <head> <title> Cadre_1 </title> </head> <frameset cols = "*,*"> <frame src = "fr_1.html"> <frame src = "fr_2.html">

44

</frameset> </html>
n exemplul urmtor este creat o pagin Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini.

<html> <head> <title> Cadre_2 </title> </head> <frameset rows = "100,*,10%"> <frame src = "fr_1.html"> <frame src = "imagine.jpg"> <frame src = "fr_3.html"> </frameset> </html>
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.

<html> <head> <title> Cadre_3 </title> </head> <frameset rows = "*,*" cols="*,*">
<frame src = "fr_1.html"> <frame src = "fr_2.html"> <frame src = "fr_3.html"> <frame src = "fr_4.html">

</frameset> </html>
n exemplul urmtor este creat o pagin Web cu trei cadre mixte. Pentru a o crea se procedeaz astfel. Mai nti, pagina este mprit n dou subferestre de tip coloana, dup care a doua subfereastra este mprit n dou subferestre de tip linie.

<html> <head> <title> Cadre_4 </title> </head> <frameset cols = "20%,*">

<frame src = "fr_1.html">

45

<frameset rows = "*,*">

<frame src = "fr_2.html"> <frame src = "fr_3.html">

</frameset> </frameset> </html>

10.2. Dimensionarea chenarului unui cadru

Atributul border al elementului <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.

<html> <head> <title> Cadre_5 </title> </head> <frameset cols = "20%,*" border = "4">
<frame src = "fr_1.html">

<frameset rows = "*,*"> <frame src = "fr_2.html">

<frame src = "fr_3.html">

</frameset> </html>
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 se poate dezactiva dac se utilizeaz atributul frameborder cu valoare no. Acest atribut poate fi utilizat att cu elementul <frameset> (dezactivarea fiind valabil pentru toate cadrele incluse) cat i cu elementul < frame> (dezactivarea fiind valabil numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt: yes - echivalent cu 1; no - echivalent cu 0;

<html> <head> <title> Cadre_6 </title> </head>

46

<frameset cols = "20%,*" border = "0">

<frame src = "fr_1.html">

<frameset rows = "200,*">

<frame src = "fr_2.html"> <frame src = "fr_3.html">

</frameset> </html> <html> <head> <title> Cadre_7 </title> </head> <frameset cols = "20%,*" frameborder = "no"> <frame src = "fr_1.html"> <frameset rows = "*,*"> <frame src = "fr_2.html"> <frame src = "fr_3.html"> </frameset> </html>
10.3. Bare de derulare
Atributul scrolling al elementului <frame> este utilizat pentru a aduga 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

<html> <head> <title> Cadre_8 </title> </head> <frameset cols = "20%,50%,*">

<frame src = "fr1.html" scrolling = "yes" noresize> <frame src = "fr2.html" scrolling = "no" noresize> <frame src = "fr3.html" scrolling = "auto" noresize>

47

</frameset> </html>
Atributul noresize al elementului <frame> (fr nici o valoare suplimentar) dac este prezent, inhib posibilitatea prestabilit a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului.

10.4. Poziionarea documentului ntr-un cadru

Atributele marginheight i marginwidth ale elementului <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;

<html>
<head> <title> Cadre_9 </title> </head> <frameset cols = "*,*,*"> <frame src = "fr1.html"> <frame src = "fr2.html" marginheight = 20> <frame src = "fr3.html" marginwidth = 20> </frameset> </html>
Exis browsere care nu suport cadre. n acest caz se utilizeaz n interiorul blocului <frameset> elementul <noframes>. Dac browserul tie s interpreteze cadre, va ignora ce se gsete n aceasta poriune, iar daca nu, materialul cuprins n zona <noframes> ... </noframes> va fi singurul care va fi neles i afiat. ntre tagurile <noframes> ... </noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

10.5. Cadre interne

Un cadru intern este specificat prin intermediul blocului <iframe> ... </iframe>. Un cadru intern se insereaz ntr-o pagin Web n mod asemntor cu o imagine sau n modul n care se specific elementul <iframe>, aa cum rezult din urmtorul exemplu:

<iframe src = "insert.html" height =40% width =50%> </iframe>

48

n acest caz, am specificat c dorim o fereastr de cadru intern care are 40% din nlimea i 50% din limea paginii curente. Atributele acceptate de elementul <iframe> sunt n parte preluate de la etichetele <frame> i <frameset>, cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name, noresize; sau de la elementul <img> vspace, hspace, align, width, height;

<html> <head> <title> Cadre_10 </title> </head> <body> <a href = "fr_1.html" target = "icadru">Fisier_1 </a> <br> <a href = "fr_2.html" target = "icadru">Fisier_2 </a> <br> <a href = "fr_3.html" target = "icadru">Fisier_3 </a><br> <a href = "fr_.html" target = "icadru">Home </a> <br> <iframe width = "60%" height = "50%" border = 2 bordercolor

Daca vedeti acest text n browser, nseamn c browserul Dvs. nu suporta cadre interne. Ar fi preferabil sa reveniti, folosind Netscape Navigator versiune 4.0 (/ulterioara) sau Internet Explorer 4.0. (/ulterioara)
"red" name = "icadru" src = "fr.html">

<a href = "pagina.html"> Pagina fara cadre interne </a> </iframe> </body> </html>
Rezultatul acestui cod n browserul Internet Explorer v 6.0

49

n cadrul intern din acest exemplu a fost ncrcat fiierul ce reprezint formularul complex. Activarea hiperlegturilor va avea ca efect ncrcarea documentelor respective n cadrul intern.

10.6. inte pentru legturi

n mod prestabilit, la efectuarea unui clic pe o legtura nou pagina (ctre care indic legtura) o nlocuiete pe cea curenta n aceeai fereastra (acelai cadru). Acest comportament se poate schimba in doua moduri:

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 legturile din pagina curenta conform sintaxei:

<base target = nume_fereastra / frame_de_baza>

prin plasarea n elementul <a> a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtura, conform sintaxei:

<a href = legtura target = "nume_fereastra / frame">...</a> Sfaturi utile:

50

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 elementului <frame> conform sintaxei: <frame name = nume_frame> n exemplul urmtor este prezentat o pagin Web cu dou cadre. Toate legturile din cadrul 1 ncarc paginile n cadrul 2.

<html> <head> <title> Cadre_target_1 </title> </head> <frameset cols = "20%,*"> <frame src = "left.html" name = "left"> <frame src = "fr.html" name = "main"> </frameset> </html> <html> <head> <title> Cadre_left </title> </head> <body> <a href = "fr_1.html" target = "main">Fisier_1 </a> <br> <a href = "fr_2.html" target = "main">Fisier_2 </a> <br> <a href = "fr_3.html" target = "main">Fisier_3 </a> <br> <br> <a href = "fr.html" target = "_blank">Fisier intr-o fereastra noua </a> <br> <a href = "fr_4.html" target = "_self">Fisier in fereastra curenta </a> <br> <a href = "fr.html" target = "main">Home </a> <br> </body> </html>

Valori pentru atributul target

Atributul target al elementului <frame> accept anumite valori predefinite de o valoare deosebit pentru creatorii de pagini Web. Aceste valori sunt:

51

_self (ncrcarea noii pagini are loc n cadrul curent); _blank (ncrcarea noii pagini are loc ntr-o fereastr nou anonim); _parent (ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exista, altfel are loc n fereastra browserului curent); _top (ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul curent);

11. Fonturi HTML

Tagul <font> n HTML este nvechit. Se presupune c n versiunile ulterioare HTML nu va mai fi folosit. Chiar dac muli autori de pagini Web utilizeaz acest element, ncercai s utilizai foile de stil n cascad pentru a indica fonturile utilizate n formatarea textului.

11.1. Elementul HTML <font>

Prin codul HTML ce urmeaz putei specifica tipul i dimensiunea fontului afiat de browser:

<p> <font size="2" face="Verdana"> Acesta este un </font> </p> <p> <font size="3" face="Times"> Acesta este alt paragraf. </font> </p> 11.2. Atributele elementului Font
Atribut size="number" size="+number" size="-number" face="face-name" color="color-value" color="color-name" Exemple size="2" size="+1" size="-1" face="Times" color="#eeff00" color="red" Descriere Definete dimensiunea fontului Mrete dimensiunea fontului Micoreaz dimensiunea fontului Definete tipul fontului Definete culoarea fontului Definete culoarea fontului

paragraf.

52

Tagul <font> NU ar trebui sa fie utilizat Tagul <font> este nvechit (deprecated) i nu va fi utilizat n versiunile n versiunile noi (HTML 4 i XHTML). Consortiumul World Wide Web (W3C) a nlturat tagul < font> din recomandrile sale. n versiunile ulterioare HTML vor fi utilizate foile de stil n cascad (Cascading Style Sheets CSS) pentru a defini aspectul i caracteristicile elementelor HTML.

11. Culori HTML

Culorile sunt afiate prin combinarea a trei componente Red (rou), Green (verde) i Blue (albastru).

12.1.Valori pentru culori

Culorile sunt definite n notarea hexazecimal prin combinarea valorilor pentru Red(rou), Green(verde), i Blue (albastru) (RGB). Valoarea minim care poate fi atribuit unei componente a culorii este 0 (hex #00). Valoarea maxim este 255 (hex #FF).
n tabelul

ce urmeaz este indicat rezultatul dintre diferite combinaii de Red, Green, Blue.
Culoare Valoare Culoare HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF Valoare Culoare RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

12.2. Nume de culori

Majoritatea browserelor suport un set de nume de culori. Not: Doar 16 nume de culori sunt suportate de W3C HTML 4.0 standard ( aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow ). Pentru alte culori se recomand s utilizai valorile de culori HEX.
Culoare Culoare HEX #F0F8FF Nume Culoare AliceBlue

53

#FAEBD7 #7FFFD4 #000000 #0000FF #8A2BE2 #A52A2A

AntiqueWhite Aquamarine Black Blue BlueViolet Brown

12.3. Culori Web Safe (sigure)

Cu civa ani n urm, cnd majoritatea calculatoarelor suportau doar 256 de culori diferite, a fost sugerat o list de 216 culori sigure Web ca standard Web. Alte 40 de culori diferite sunt reservate de sistemele de operare Microsoft i Mac (fiecare cte 20 culori). Nu tim ct de important este acest lucru acum, doarece tot mai multe calculatoare n prezent pot afia milioane de culori diferite, dar alegerea v aparine.

12.4. Paleta de 216 de Culori independente de platform

Aceast palet de 216 de culori independente de platform a fost creat iniial pentru a avea sigurana c toate calculatoarele vor afia corect aceast palet. Fiierul culori.html din directoriul HTML de pe CD include informaii despre componentele paletei de 216 culori i afieaz culorile respective.
000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 66FF33 990033 993333 996633 999933 99CC33 000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 66FF66 990066 993366 996666 999966 99CC66 000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 66FF99 990099 993399 996699 999999 99CC99 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF

54

99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF

Anexa 1 Entiti HTML

HTML 4.01 suport setul de caractere ISO 8859-1 (Latin-1). Caracterele ISO-8859-1, coduri din diapazonul 0-127 reprezint standardul original 7-BIT

ASCII. Majoritatea acestor caractere pot fi utilizate direct fr a fi nevoie de referine de

caractere (entiti). Caracterele ISO-8859-1, coduri din diapazonul 160-255 pot fi utilizate prin intermediul referinelor de caractere (entiti).

Not. Numele entitilor sunt sensitive la registru.

Entiti ASCII Resultat Descriere " ' & < > Nume Entitate Reprezentare hexazecimal &#34; &#39; &#38; &#60; &#62;

ghilimele &quot; (quotation mark) apostrof (apostrophe) ampersand mai mic (less-than) mai mare (greater-than) &apos; (does not work in IE) &amp; &lt; &gt;

Lista altor seturi de entiti este prezentat n Anexa 2.

55

Anexa 2
Lista tagurilor HTML ordonat alfabetic

NN: indic versiunea Netscape ncepnd cu care este suportat tagul respectiv IE: indic versiunea Internet Explorer care suport tagul respectiv Descriere
Definete un comentariu Definete o ancor Definete o abreviere Definete un acronim Definete o adres nvechit. Definete un aplet Definete o zon ntr-o imagine hart Definete un text cu aldine Definete URL de baz pentru toate referinele din pagin nvechit. Definete fontul de baz Definete direcia de afiare a textului Definete un text mai mare

Tag
<!--...--> <a> <abbr> <acronym> <address>

NN IE
3.0 3.0 3.0 3.0 6.2 6.2 4.0 4.0 4.0 2.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.2 5.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.2 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.2 4.0 3.0 3.0 3.0 3.0

<!DOCTYPE> Definete tipul documentului

<applet>
<area> <b>

<base> <basefont>
<bdo>

<big>

<blockquote Definete o citat lung > <body> <br> <button> <caption> Definete elementul body Insereaz o ntrerupere de linie Definete un buton Definete titlul unui tabel nvechit. Definete un text centrat Definete o citat Definete textul unui cod la computer Definete pentru coloanele unui tabel Definete grupuri de coloane intr-un tabel Definete descrierea ntr-o list de definiii Definete un text omis nvechit. Definete o list directoriu Definete o seciune ntr-un document

<center>
<cite> <code> <col>

<colgroup>
<dd> <del>

<dir>
<div>

56

<dfn> <dl>
<dt> <em> <fieldset>

Definete un termen de definiie Definete o list de definiii Definete un termen de definiie Definete un text evideniat Definete un set de cmpuri nvechit. Definete tipul, dimensiunea i culoarea fontului Definete un formular Definete un cadru (seciune din fereastr) Definete un set de cadre Definete titluri de diferite nivele (1 6) Definete antetul unui document (informaii despre document) Definete o linie orizontal Definete un document html Definete un text cursiv Definete un cadru inline Definete o imagine Definete un cmp de inserare a textului Definete un text inserat nvechit. Definete un cmp text pe o singur linie. Utilizai <input> Definete un text inserat de la tastatur Definete un label ntr-un formular Definete un titlu ntr-un set de cmpuri Definete un termen (item) din list Definete referina pentru o resurs Definete o imagine hart nvechit. Definete o list meniu Definete informaii meta Definete o seciune fr scripturi (noscript) Definete un obiect inserat Definete o list ordonat Definete un grup de opiuni

3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.2 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.0 4.0 3.0 3.0 3.0 3.0 6.2 4.0 3.0 3.0 3.0 3.0 6.2 4.0 6.2 4.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.0 6.0

<font>
<form> <frame>

<frameset>
<h1> to <h6> <head> <hr> <html> <i> <iframe> <img>

<input>
<ins> <isindex>

<kbd>
<label> <legend>

<li>
<link> <map>

<menu>
<meta> <noscript> <object> <ol>

<noframes> Definete o seciune fr cadre (noframe)

<optgroup>

57

<option> <p> <param> <pre> <q>

Definete o opiune ntr-o list derulant Definete un paragraf Definete un paramtru pentru un obiect Definete un text preformatat Definete o citat scurt nvechit. Definete un text tiat Definete un fragment de cod la computer Definete un script Definete o list derulant de opiuni Definete un text de dimensiuni mici Definete o seciune de tip inline ntr-un document nvechit. Definete un text tiat Definete un text evideniat (cu aldine) Definete o definie de foi de stil Definete un text subscript (indice de jos) Definete un text superscript (indice de sus) Definete un tabel Definete corpul unui tabel Definete o celul n tabel Definete un cmp de text (comentariu) Definete partea de subsol a unui tabel Definete titlul de coloan n tabel Definete partea de antet a unui tabel Definete titlul unui document Definete un rind din tabel Definete un text teletype nvechit. Definete un text subliniat Definete o list marcat (neordonat) Definete o variabil nvechit. Definete un text preformatat. Utilizai <pre>

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 6.2 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 4.0 3.0 3.0 4.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

<s>
<samp> <script>

<select> <small>
<span>

<strike>
<strong>

<style>
<sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th>

<thead>
<title> <tr> <tt>

<u>
<ul> <var> <xmp>

Anexa 3

58

ISO 8859-1 Symbol Entities

Resultat Descriere spaiu (non-breaking space) semnul exclamrii inversat (inverted exclamation mark) valut currency cent pound yen Linie vertical ntrerupt (broken vertical bar) seciune (section) diacritice spacing diaeresis copyright feminine ordinal indicator Paranteze unghiulare(de stnga) angle quotation mark (left) negare (negation) marc nregistrat (registered trademark) marc nregistrat (trademark) grad (degree) plus-minus plus-or-minus la patrat (superscript 2) la cub (superscript 3) accent (spacing acute) micro paragraph punct de mijloc (middle dot) Nume Entitate &nbsp; &iexcl; &curren; &cent; &pound; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &reg; &trade; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; Reprezentare hexazecimal &#160; &#161; &#164; &#162; &#163; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#174; &#8482; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183;

59

la puterea 1 (superscript 1) Paranteze unghiulare (de dreapta) angle quotation mark (right) fraction 1/4 fraction 1/2 fraction 3/4 semnul de ntrebare inversat (inverted question mark) semnul nmulirii (multiplication) semnul mpririi (division)

&sup1; &raquo; &frac14; &frac12; &frac34; &iquest; &times; &divide;

&#185; &#187; &#188; &#189; &#190; &#191; &#215; &#247;

Entiti ISO 8859-1

Resultat Descriere A, accent de stnga (capital a, grave accent) A, accent de dreapta capital a, acute accent A, accent cerc capital a, circumflex accent A, accent tilda capital a, tilde capital a, umlaut mark capital a, ring capital ae capital c, cedilla capital este, grave accent capital este, acute accent capital este, circumflex accent capital este, umlaut mark capital i, grave accent capital i, acute accent capital i, circumflex accent capital i, umlaut mark capital eth, Icelandic capital n, tilde capital o, grave accent Nume Entitate &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &ETH; &Ntilde; &Ograve; Reprezentare hexazecimal &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210;

60

capital o, acute accent capital o, circumflex accent capital o, tilde capital o, umlaut mark capital o, slash capital u, grave accent capital u, acute accent capital u, circumflex accent capital u, umlaut mark capital y, acute accent capital THORN, Icelandic small sharp s, German small a, grave accent small a, acute accent small a, circumflex accent small a, tilde small a, umlaut mark small a, ring small ae small c, cedilla small este, grave accent small este, acute accent small este, circumflex accent small este, umlaut mark small i, grave accent small i, acute accent small i, circumflex accent small i, umlaut mark small eth, Icelandic small n, tilde small o, grave accent small o, acute accent small o, circumflex accent small o, tilde small o, umlaut mark small o, slash small u, grave accent small u, acute accent

&Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &oslash; &ugrave; &uacute;

&#211; &#212; &#213; &#214; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#248; &#249; &#250;

61

small u, circumflex accent small u, umlaut mark small y, acute accent small thorn, Icelandic small y, umlaut mark

&ucirc; &uuml; &yacute; &thorn; &yuml;

&#251; &#252; &#253; &#254; &#255;

Alte Entiti suportate de HTML

Resultat Descriere capital ligature OE small ligature oe capital S with caron small S with caron capital Y with diaeres modifier letter circumflex accent small tilde en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark per mille single right-pointing angle quotation euro Nume Entitate &OElig; &oelig; &Scaron; &scaron; &Yuml; &circ; &tilde; &ndash; &mdash; &lsquo; &rsquo; &sbquo; &ldquo; &rdquo; &bdquo; &permil; Reprezentare hexazecimal &#338; &#339; &#352; &#353; &#376; &#710; &#732; &#8211; &#8212; &#8216; &#8217; &#8218; &#8220; &#8221; &#8222; &#8240; &#8249; &#8250; &#8364;

single left-pointing angle quotation &lsaquo; &rsaquo; &euro;

62

Bibliografie 1. R.Darnell. Totul despre HTML., Teora, 2002, 1007 p . http:

//www.teora.ro

2. HTML complete. Sybex, 1999, 1028 p. 3. HyperText Markup Language. http://www.w3.org/MarkUp/ 4. HTML 4.01 specification. http://www.w3.org/TR/REC-html40/ 5. HTML tutorial. http://www.w3schools.com/html/default.asp 6. HTML tutorials. http://www.webreference.com/ 7. Web authoring reference. http://www.htmlhelp.com/ 8. Markup validation service. http://validator.w3.org/ 9. HTML-kit. http://www.chami.com/html-kit/ 10.GNU General Public License. http://www.gnu.org/copyleft/gpl.html 11.HTML tags. http://www.htmldog.com/reference/htmltags/ 12. Data formats. HTML in the Yahoo directory.
http://dir.yahoo.com/Computers_and_Internet/Data_Formats/HTML

13.Doctor HTML. http://www2.imagiware.com/RxHTML/ 14.Web design. http://www.quil.biz/tuition/Contents.htm 15.GNP HTML Tutorials - http://www.globalnetpromotions.com 16.HTML 101 - http://www.mcjeff.com/html101/ 17.HTML Basics - http://freespace.virgin.net/r.cawley/lessons.html 18.TML Basics Guide - http://www.webzila.com/htmlbasics/ 19.HTML Basix - http://www.htmlbasix.com/ 20.HTML Cookbook - http://www.htmlcook.com/ 21.HTML Developers Page - http://www.dada.it/html/index_e.html 22.HTML Goodies Tutorials - http://www.htmlgoodies.com/primers/ 23.HTML Lite - http://www.htmlite.com/HTMintro.htm

63

24.HTML Net - http://www.htmlnet.tk/ 25.HTML Source - http://www.yourhtmlsource.com/fullindex.html 26.HTML Tips, Help and Examples - http://www.angelfire.com/fl5/htmltutorial/

27.HTML Tutorial for Beginners - http://aqeel.8m.net/ 28.HTML Tutorials for the Complete Idiot http://www.geocities.com/SiliconValley/Campus/1924/index.html

29.HTML: An Interactive Guide for Beginners http://www.davesite.com/webstation/html/ 30.Introduction to HTML and URLs.
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/intro.html

31.Manual de HTML. http://manuale.20m.com/

64