ACADEMIA DE TRANSPORTURI,INFORMATIC I COMUNICAII

Seria Teorie Economic,Matematic i Informatic

Olga CHICU

Limbajul HTML

Chiinu, Evrica - 2011

2CZU 004.4(075.8)

Descrierea CIP a Camerei Naionale a CriiChicu, Olga

Limbajul HTML / Olga Chicu; Acad. de Transporturi, Inform. iComunic. Ch.: Evrica, 2011 (Tipogr. AM). 99 p.

Bibliogr. p. 83 (9 tit.)ISBN

150 ex.

Lucrarea prezint materiale teoretice i practice pentru studierealimbajului HTML. n esen, ofer cunotine necesare pentru creareapaginilor web simple, dar i cunotine ce in de regulile de baz n creareasite-urilor web.

Se adreseaz n special studenilor din nvmntul univerdsitar de laspecialitile Informatic, Tehnologii Informaionale, dar poate fi unghid util i pentru cei interesai s studieze i s-i perfecionezecunotinele n domeniul crerii paginilor web. Datorit limbajului laconica expunerii materialului, lucrarea va fi accesibil tuturor persoanelorindiferent de domeniul de activitate

Lucrarea a fost examinat i recomandat spre editare la edinaCatedrei Matematic i Informatic (proces-verbal nr. 5 din20.01.2010) i la edina Comisiei Metodice i de Calitate a FacultiiEconomie i Informatic din cadrul Academiei de Transporturi,Informatic i Comunicaii (proces-verbal nr. 4 din 03.02.2010)

Autor: Olga Chicu lector superior universitar ASEMRefereni:

Ada Sajin lector superior universitar ASEMVitalie Cotelea doctor n tiine fizico-matematice,

confereniar universitar ASEM

M-208-96 Editura Evrica, 2011ISBN Olga Chicu, 2011

3Cuprins:

Introducere.................................................................................... 5

1. Noiuni eseniale....................................................................... 91.1. Structura unui document HTML...................................... 91.2. Crearea unui document HTML........................................ 101.3. Editarea unui document HTML....................................... 12

2. Formatarea documentului......................................................... 132.1. Formatarea caracterelor.................................................... 132.2. Caractere speciale............................................................ 192.3. Atributele tag-ului ... 20

3.Liste............................................................................................ 213.1. Liste neordonate............................................................... 213.2. Liste ordonate................................................................... 223.3 Liste de definiii................................................................ 24

4. Referine.................................................................................... 26

5. Imagini...................................................................................... 305.1. Imagini de tip client-side image map (hri de imagini).. 33

6. Tabele........................................................................................ 386.1. Atributele tag-ului .. 396.2. Atributele tag-ului 436.3. Atributele tag-ului ... 44

7. Cadre......................................................................................... 467.1. Definirea cadrelor............................................................ 477.2. Atributele tag-ului ............................................. 487.3. Cadre interne.................................................................... 49

8. Formulare.................................................................................. 508.1. Definirea formularelor..................................................... 508.2. Elementele formularelor.................................................. 52

48.2.1. Cmp de editare (de tip text)...................................... 528.2.2. Cmp de tip parol..................................................... 538.2.3. Butoane de tip radio................................................... 548.2.4. Casete de validare (check box).................................. 558.2.5. Cmp de tip fiier....................................................... 558.2.6. Cmpuri ascunse....................................................... 568.2.7. Butoane...................................................................... 568.2.8. Liste de selecie.......................................................... 598.2.9. Zone de text............................................................... 63

9. Meta-elemente.......................................................................... 64

10. Elemente ale limbajului JavaScript........................................ 6610.1. Conceptul de eveniment i gestionar de evenimente..... 6910.2. Evenimente provocate de mouse................................... 7110.3. Evenimente provocate de tastatur................................ 7610.4. Evenimente legate de formulare..................................... 7710.5. Evenimente legate de pagin.......................................... 82

Bibliografie................................................................................... 83

Anexe

5Introducere

HTML este un limbaj simplu pentru care nu sunt necesare cunotinedeosebite de programare, cu att mai mult c HTML nu este un limbaj deprogramare ci un limbaj de descriere.

Poate ar prea, la prima vedere, c HTML este un limbaj sofisticat,ns acesta este destul de uor de asimilat. Este suficient cunoatereanoiunilor de baz ale acestui limbaj pentru a putea crea un web site.

Cunoaterea limbajului HTML garanteaz puterea de a crea site-urisimple i nsuirea fundamentelor construirii unui site. Pentru crearea site-urilor dinamice i interactive sunt necesare cunotine avansate n multealte limbaje de programare i aplicaii.

Lucrarea poate fi util studenilor, elevilor ct i tuturor celor caredoresc s fac cunotin cu acest limbaj.

Lucrarea const din 10 capitole. Primele nou capitole descriu,inclusiv prin exemple, crearea unui site web utiliznd doar limbajulHTML.

Ultimul capitol Elemente ale limbajului JavaScript nu v va dacunotine nct s putei crea coduri JavaScript sofisticate dar estesuficient pentru a crea coduri simple i de a nelege i poate de a redactasau modifica coduri Java, dat fiind faptul c exist foarte multe site-uriweb care permit download-area codurilor Java gratis. Astfel cunotineleacumulate studiind capitolul 10 ar fi suficiente pentru a conforma codurileJava existente, necesitilor propriului site.

Majoritatea materialului este restrns n Anexe. Acestea fiind utilepentru verificarea corectitudinii scrierii tag-urilor, atributelor i valorilorpe care acestea le pot avea.

Pagini i locaii (site-uri) web. World wide web, abreviat www sau,pur i simplu web, este totalitatea documentelor hipertext legate ntre elecare pot fi accesate prin reeaua mondial Internet. Mai amnunit desprehipertext vom vorbi n capitolul urmtor.

Paginile web sunt documentele de baz n www, ele pot coninediverse informaii n form textual, grafic sau video. Orice pagin webeste unic identificat prin adresa sa denumit URL (Uniform ResourceLocator).

6O locaie web (sau un web site) const din mai multe pagini web, cerezid la un server web sau la un calculator local, cu legturi att ntre elect i ctre documente de la alte locaii web.

Cerine generale privind crearea paginilor web. Crearea uneipagini web reuite necesit respectarea att a unor cerine generale, ct i aunor cerine specifice fiecrei pagini web n parte, n funcie de destinaiaacesteia. La cerine generale putem enumera:

- coninutul i aspectul prezentrii informaiei n pagin trebuie strezeasc interesul vizitatorilor;

- titlul paginii trebuie s fie clar, concis i sugestiv;- trebuie s existe o logic n plasarea informaiei n pagin

deoarece plasarea neordonat a informaiei poate deruta vizitatorul;- suficient loc liber n pagin pentru facilitatea perceperii

informaiei o pagin suprancrcat va ndeprta utilizatorii;- folosirea raional a graficii pe lng faptul c grafica face

pagina atractiv, trebuie de inut cont i de faptul c tot aceasta conduce lacreterea dimensiunii paginii care, eventual, conduce la o ncrcare mailent a paginii, ceea ce poate ndeprta utilizatorii;

- dimensiuni nu prea mari pentru fiecare pagin ceea ce vaconduce la o ncrcare mai rapid a acestora, spre fericirea utilizatorilor;

- legturile ctre documentele de mari dimensiuni ar fi bine s fiensoite de comentarii n privina acestor dimensiuni pentru evitareancrcrii documentelor de mari dimensiuni mai puin utile utilizatoruluirespectiv;

- folosirea n pagin a unui set restrns de culori ceea ce vapermite accentuarea ateniei asupra informaiei plasate n pagin;

- se va lua n calcul dimensiunea ecranului la folosireadenumirilor de prea mari dimensiuni nu va rmne suficient loc pentrutext i atunci se va cere derularea inoportun a paginii;

- se va verifica aspectul paginii n diverse browser-e cum ar fi:Internet Explorer, Opera, Mozila Firefox deoarece aspectul paginilordifer de la un browser la altul;

- respectarea drepturilor de autor a informaiei plasate n pagin;- controlul regulat al legturilor n scopul identificrii celor

nefuncionale;- alegerea limbii de comunicare n funcie de tematica i orientarea

paginii, etc.

7Cerinele specifice sunt dictate de destinaia paginii. Un aspectimportant este atragerea utilizatorilor ctre locaia web. n acest scoppoate fi plasat informaia despre pagina sau locaia web la mai multeservere populare i n primul rnd la acelea care sunt vizitate de potenialiivizitatori. La fel, o soluie ar fi i plasarea informaiei despre locaia webla serverele de cutare cunoscute cum ar fi: Google, Yahoo, AltaVista, etc.

Structura de navigare a locaiei web indic relaiile de navigare ntrepaginile web ale acesteia. Structura de navigare este de form ierarhic iconine la nivelul superior pagina de baz i paginile principale.

Pagina de baz este prima pagin n locaia web i este numit, deregul, default.htm sau index.htm. Paginile principale sunt paginile denivel superior, dar fr a include i o pagin de baz.

S examinm structura locaiei web prezentate n exemplul de maijos. Aici pagina de baz este Index.htm iar paginile principale sunt Desprenoi i Contacte.

Fiecare pagin poate avea ataate pagini cu un nivel ierarhic mai jos,care sunt numite pagini-copil (pagini de nivel copil), primele numindu-sepagini printe. n exemplul analizat pentru pagina printe Proiecte pagini-copil sunt Proiect 1, Proiect 2,..., Proiect n.

Pagini de nivel printe pentru o pagin dat sunt: pagina printe apaginii n cauz i, de asemenea, paginile conectate direct cu pagina-printe la acelai nivel.

Pagini de acelai nivel se numesc paginile, care sunt la acelai niveln structur i au aceiai pagin-printe. n exemplul de mai sus pagini deacelai nivel sunt: Servicii oferite, Proiecte sau Serviciul 1, Serviciul2,...,Serviciul N.

Index.htm

Desprenoi

Contacte

Serviciioferite

ProiectePersonal

Serviciul 1 Serviciul 2 Serviciul N Proiect 1 Proiect 2 Proiect n

Figura 1. O structur de locaie web

8Structura de navigare este folosit la stabilirea legturilor ntrepaginile web. O structur reuit poate spori eficiena folosirii resurselorlocaiei web.

Etapele crerii locaiilor web. Crearea i asigurarea funcionriiunei locaii web include, n general, urmtoarele etape:

1. concretizarea destinaiei i formularea cerinelor ctre locaia web;2. elaborarea structurii site-ului;3. elaborarea paginilor web;4. integrarea paginilor n cadrul site-ului prin stabilirea legturilor;5. testarea i definitivarea site-ului;6. publicarea web site-ului n www;7. administrarea web site-ului.n cazuri particulare pot fi i alte etape, n general la crearea unor

site-uri complexe, cnd este foarte important alegerea instrumentelorpentru crearea locaiei, a echipamentelor pentru instalare, etc.

La rndul su, elaborarea paginilor web prevede urmtoarele etape:1. elaborarea sau selectarea interfeelor pentru grupuri de pagini sau

pagini aparte;2. adugarea informaiei n pagin;3. stabilirea legturilor;4. testarea i definitivarea paginii;5. publicarea paginii n cadrul site-ului;6. administrarea paginii.

Limbajul HTML. Prezentare general. HTML este prescurtarea dela HyperText Markup Language i reprezint un limbaj pentru creareaunui document astfel nct s poat fi publicat pe World Wide Web ivizualizat cu ajutorul unui browser (Internet Explorer, NetscapeNavigator, Mozila Firefox, Opera, etc.).

Hypertext-ul trebuie interpretat ca un text care semnaleaz o legturla o alt informaie web, de obicei un alt document web, i este identificatprin subliniere sau culoare, pentru a-l deosebi de textul simplu.

HTML nu este un limbaj de programare i asta din cauza c n HTMLlipsete atributul principal propriu oricrui limbaj de programare i anumecomenzile. n HTML nu poate fi creat o succesiune de aciuni, ci doarpoate fi descris modul n care browserul trebuie s afieze la ecrandocumentul respectiv.

9Astfel HTML este doar un limbaj de descriere, coninnd elemente cepermit construirea paginilor web.

Documentele HTML sunt exclusiv de tip text (ASCII) prin urmarepot fi create cu orice editor de texte. Au fost ns dezvoltate editoarespecializate care permit editarea ntr-un fel de WYSIWYG - Wat You SeeIs Wat You Get.

Editoarele specializate HTML (ex. MS FrontPage sau MacromediaDreamWeaver) permit crearea documentelor web ntr-un mod rapid iuor, i, prin urmare, foarte eficient, doar prin apsarea ctorva butoanesau prin apelarea ctorva funcii predefinite. Acest tip de editoarereprezint unelte excelente pentru dezvoltatorii web cu experien.

n general aceste editoare pot fi folosite i de utilizatori care nucunosc limbajul HTML, cu toate c ele atribuie coduri n excesdocumentului i de obicei se intervine manual la redactarea lor. Un altneajuns ar fi faptul c n majoritatea cazurilor documentul este prezentatde browser nu ntocmai aa cum este prezentat n editor i atunci iarieste necesar de a interveni pentru efectuarea modificrilor respective.Astfel chiar i n cazul folosirii unui editor specializat cunoaterealimbajului HTML este oportun.

HTML utilizeaz pentru descrierea documentelor web tag-uri,numite i etichete, specifice pentru fiecare element descris. Tag-urilestabilesc att structura documentului, ct i aspectul acestuia. Un tag esteun identificator care furnizeaz browser-ului instruciuni de formatare adocumentului. Petru a fi delimitate, tag-urile HTML sunt ncadrate ntreparanteze unghiulare (< >).

Tag-urile se divizeaz n: tag-uri pare sau tag-uri pereche care impun dup sine existena

unui tag de nchidere; tag-uri impare sau singulare care nu necesit nchidere.

1. Noiuni eseniale

1.1. Structura unui document HTML

Orice pagin web (document HTML) are n structur trei elementeobligatorii: un element numit HTML, care cuprinde ntregul document, idou sub-elemente ale acestuia: HEAD (antet, cap) i BODY (corp).

10

Tag-ul este primul tag care trebuie s apar ntr-un fiierHTML. El ncadreaz alturi de tag-ul su corespunztor de nchidere ntreaga pagin web.

Tag-ul marcheaz partea de antet a documentului. Este untag par cu tag-ul de nchidere .

Tag-ul par ncadreaz coninutul paginii web.n antet este recomandat s se precizeze titlul documentului, care va fi

afiat n bara de titlu a browser-ului. Pentru a preciza titlul documentului,care nu poate depi 64 de caractere, se utilizeaz n seciunea antet tag-urile pereche i , ntre care se scrie titlul documentului.

Iat un model de structur a unui document HTML:

Titlul documentului

Continutul documentului

1.2. Crearea unui document HTML

Cum a fost menionat anterior documentele HTML pot fi create cuorice editor de texte sau utiliznd unul din editoatele specializate.

Una din metodele crerii unui document HTML este scrierea coduluiacestuia n editorul de texte Notepad. De exemplu codul:

pagina web nr. 1

Va aflati pe prima pagina

11

Dup scrierea codului i salvarea fiierului (de exemplu sub numeleindex) se schimb extensia fiierului obinut din .txt n .html. Ladeschiderea ultimului se obine urmtorul document:

Astfel pentru a crea un document html este suficient de a scrie codulacestuia ntr-un editor de texte dup care de a schimba extensia acestuia n*.html.

12

1.3. Editarea unui document HTML

Pentru efectuarea modificrilor este necesar de a deschide fiierulHTML ntr-unul din editoarele de texte, de exemplu n Notepad, dup carede a edita codul surs a documentului (figura 1.1.).

Dac documentul este vizualizat cu ajutorul browser-ului InternetExplorer atunci documentul poate fi editat prin alegerea opiunii ViewSource din meniul View. Dup salvarea modificrilor efectuate estesuficient de acionat butonul Refresh din bara cu meniuri din browserpentru vizualizarea documentului modificat.

Figura 1.1. Deschiderea documentului HTML pentru editare

13

2. Formatarea documentului

Unele i aceleai informaii pot fi prezentate ntr-un document ndiferite forme. Definirea caracteristicilor de prezentare a informaiilor ncadrul documentului i este formatare. Folosirea unei forme reuite deprezentare a informaiilor este foarte important n special n cazulpaginilor web.

2.1. Formatarea caracterelorFormatarea caracterelor const n specificarea atributelor individuale

ale acestora, inclusiv: tipul corpului de liter (font-ul), dimensiuneacaracterelor, stilul etc.

Pentru descrierea stilului textului n HTML se folosesc tag-urilepereche: ... - pentru afiarea textului cu caractere aldine; - pentru afiarea textului cu caractere italice; - pentru afiarea textului cu caractere subliniate.

Exemplu:

Formatarea textului

Text scris cu carcatere aldine Text scris cu caractere italic-e Text subliniat

Folosirea tuturor celor trei stiluri

n codul de mai sus a fost utilizat un tag nou i anume tag-ul singular folosit pentru a trecerea forat n rnd nou.

Pentru reprezentarea indicilor superiori i inferiori se utilizeaz tag-urile pare ... i respectiv ....

14

Exemplu:...

Km2 H2O...

Rezultatul va fi urmtorul:

n scopul formatrii caracterelor poate fi utilizat tag-ul par care va stabili urmtoarele caracteristici ale caracterelor:

culoare - stabilit prin atributul color al tagului ; tipul sau stilul - stabilit prin atributul face; dimensiunea - definit prin atributul size; grosimea - definit prin atributul weight.

Exemple:Aceasta linie este rosie.Linie scrisa cu caractere

monospatiate.

15

Linie scrisa cu caracterearial.

Fonturi de marime 5. Fonturi de marime 4.

Fonturi de marime 1. Fonturi de marime 6.

Fonturi de grosime 100.

O culoare poate fi precizat n dou moduri:1. printr-un nume de culoare,2. printr-o constant conform standardului de culoare RGB (Red,

Green, Blue). O astfel de constant este format din 6 cifre hexazecimaleprecedate de semnul #. Primele dou cifre din cele ase reprezintvaloarea lui R, urmtoarele dou valoarea lui G i ultimele dou valoarea lui B.

Exemplu: textul are culoarearosie

Este posibil ca browser-ul s nu poat afia anumite culori specificateprin valoare RGB, n acest caz, va ncerca s genereze o culoare apropiatsau un fond texturat format din dou culori apropiate celei specificate; sepoate ajunge astfel la un fond care poate face textul ilizibil.

Pentru a evita aceast situaie, este bine de a folosi aa numiteleculori sigure Internet, care sunt afiate la fel pe orice sistem. Acesteculori se obin prin atribuirea lui R, G i B uneia din valorile: 00, 33, 66,99, CC sau FF.

Pentru stabilirea mrimii caracterelor poate fi utilizat atributul sizecare poate lua urmtoarele valori:

1,2,...,7 1 pentru cel mai mic font i 7 pentru cel mai mare; +1,+2, etc. pentru a mri dimensiunea fontului cu 1, 2, etc.

respectiv fa de valoarea curent;

16

-1,-2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc.respectiv fa de valoarea curent.

Ce ine de grosimea unui caracter, aceasta poate fi stabilit prinintermediul atributului weight, care poate lua urmtoarele valori: 100,200, ..., 900 respectiv 100 pentru fontul cel mai subire i 900 pentru celmai gros.

Perechea de tag-uri ... este folosit pentrucentrarea obiectelor n pagin. Cu ajutorul acestora pot fi centrate atttextul ct i tabelele, i imaginile.

Pentru specificarea paragrafelor poate fi folosit tag-ul par .Definirea paragrafelor prin acest tag va impune afiarea acestuia din rndnou. Atributele acestui tag sunt:

align care permite alinierea textului n dependen de valoareaatribuit left (aliniere la stnga), right (la dreapta) i center (la centru).

Exemplu: acest text va fi aliniat

la centru Class, type, style atribute utilizate pentru specificarea unui

anumit stil de text.n cazul n care tag-ul este folosit fr atribute el nu necesit a fi

nchis i are acelai efect ca i tag-ul .Modalitatea cea mai eficient de delimitare i de formatare a unui

bloc de text este folosirea perechii de tag-uri .... Acest tag areatributul align cu aceeai destinaie ca i n cazul tag-ului precedent.Implicit alinierea este la stnga.

Exemplu:

Blocul

Bloc aliniat la dreapta. Bloc aliniat la dreapta. Bloc aliniat la dreapta.

17

Bloc aliniat pe centru.Bloc aliniat pe centru.Bloc aliniat pe centru.

Pereche de tag-uri ... este folosit pentru a defini blocuride texte preformatate.

ntr-un bloc ..., semnificaia marcajelor HTML sepastreaz.

Folosirea perechii de tag-uri ... este indicat pentru ansera rnduri vide (spaiu ntre rndurile succesive). Caracterul "spaiu"poate fi luat n considerare de browser dac este inserat explicit prin.

18

Exemplu:

ntr-o pagina Web pot fi inserate linii orizontale. Acestea suntdefinite de tag-ul impar . Pentru a configura o linie orizontal seutilizeaz urmatorele atribute ale tag-ului :

align - permite alinierea liniei orizontale. Valorile posibile sunt:left center, i right;

width - permite alegerea lungimii liniei poate primi valori npixeli i n procente;

size - permite alegerea grosimii liniei poate lua valori n pixeli in procente;

noshade - cnd este prezent definete o linie fr umbr; color - permite definirea culorii liniei.

Exemplu:

Linii orizontale

Tipuri de linii orizontale

O linie implicita alinierea stanga, latime 100%,

grosime 2 cu umbra.

19

Urmeaza o linie aliniata in centru, de latime

50%, grosime 5 pixeli, fara umbra.

Urmeaza o linie aliniata la dreapta, de latime 150de pixeli, grosime 12 pixeli, de culoare rosie.

2.2. Caractere specialeCaracterele speciale i simbolurile care nu se gsesc, n mod obinuit,

pe tastatur, pot fi inserate n text prin secvene de cod speciale. Acestecaractere se regsesc ntr-un set internaional de caractere cunoscut i subdenumirea de ISOLatin-1 (ISO-8859-1).

Caracterele speciale sunt recunoscute de limbajul HTML datoritfaptului c ncep cu semnul & (ampersand) i se ncheie cu semnul ;(punct i virgul).

Cele mai uzuale astfel de caractere au fost cuprinse sunt incluse ntabelul 1.1.

20

Tabelul 1.1.Codurile pentru caracterele speciale

Caracterul special Simbolizare Reprezentare (codul)ampersand & &asterisk * copyright Fraction one qtr

41

Fraction one half2

1

Greater-than sign > >Less-than sign