11. Elemente de baza HTMLHTML este prescurtare pentru Hypertext Markup Language - Limbaj de marcare a hipertextului:Hypertext (hipertext). O legtur(link) este un cuvnt sau o fraz special ntr-o pagin web care trimite" ctre o alt pagin

web. Atunci cnd executam clic pe o legatura, browserul deschide pagina respectiva. Acest text special se mai numeste legturhipertext.

Markup (marcare). Prin marcare intelegem anumite instruciuni stilistice detaliate introduse ntr-un document text care trebuiepublicat pe World Wide Web. HTML contine coduri simple pentru detalierea unor elemente din pagina, precum: scrierea unui textcu caractere aldine sau italice, crearea de liste marcate, inserarea de imagini i, bineneles, definirea legturilor. Introducem acestecoduri n locurile adecvate dintr-un document text obinuit i browserul web le traduce, rezultatul fiind afisarea automata a paginii,asa cum dorim.

Languaje (limbaj). HTML nu are nimic de-a face cu programarea calculatoarelor. El este un limbaj" n sensul c este ocolecie de coduri introduse in document pentru a permite afisarea corespunzatoare a acestuia.

Exista mai multe standarde HTML, emise de organizatia numita W3C (World Wide Web Consortium), si anume: HTML 2.0(1994), HTML 3.0 (1995), HTML 3.2 (1997) si cel mai recent HTML 4.0 (1998) pe care il vom studia in continuare. Procesul destandardizare a HTML nu este terminat. Unele companii (precum Microsoft si Netscape) au adaugat propriile extensii la HTML(inexistente in standardul oficial), pentru a fi folosite de browserele lor. Cu alte cuvinte, nu este sigur ca toate browserele recunosctoate codurile HTML.

1. 1. Ce putem face n HTML?Formatarea textuluiWeb-ul reprezint o surs atractiv i uor de parcurs de informaii i divertisment. Totusi, nimic nu genereaz mai puine

accesri (i nimic nu este mai greu de desluit) dect un text simplu, nempodobit. Cu ajutorul HTML putem, de exemplu: afia textul caractere aldine sau italice. afia textul folosind diferite culori. folosi diferite mrimi de font pentru cuvinte sau chiar pentru caractere individuale.

Crearea de listePentrul afisarea informatiilor ntr-o manier inteligibil i uor de citit, se folosesc uneori liste, cum ar fi listele numerotate si

listele marcate.

Inserarea de legaturi catre alte paginiSesiunile web presupun navigarea de la o pagina web la alta. Pentru a face posibil saltul din pagina noastra in alte pagini, se

creaza legaturi. Acestea pot fi: Legturi ctre alte pagini web ale noastre (toate acestea formeaza un site) Legturi ctre o locaie diferit din aceeai pagin web. Acest lucru este folositor pentru paginile care conin mai multe

seciuni; de exemplu, putem introduce un cuprins n partea superioar a paginii, alctuit din legturi ctre diferite seciunidin pagina.

Legturi ctre alte pagini din Internet.

Inserarea de imaginiHTML poate fi folosit pentru inserarea in pagina a unei imagini sugestive care sa ilustreze o idee din text. Imaginea poate fi

redimensionata, formatata si pozitionata in mod corespunzator, sau chiar transformata in hiperlegatura.

Aranjarea informatiilor in tabeleDesi se pot folosi tabulatori i spaii pentru a alinia textele si imaginile in pagina, aceste elemente nu mai apar aliniate atunci

cand pagina este vizualizata in browser. De ce? Pentru c HTML reduce spaiile multiple la un singur spaiu i ignor complettabulatorii! Prin folosirea de tabele, putem pozitiona exact in pagina orice element.

1. 2. Exemple de pagini de pe webPagina web personalaEste o pagin pe care o realizeaz un individ pentru a spune lumii web cte ceva despre el. Aceasta este echivalentul web al

unei carti de vizita, putand fi folosita si pentru comunicarea dintre vizitatori (de exemplu prin grupuri de discutii newsgroups), sauchiar in scopuri comerciale, pentru prezentarea si vanzarea unor produse.

2 Un site web condus de un expert ntr-un anumit domeniu i care conine multe informaii folositoare i corecte este numitsite guru (guru site).

Reviste electroniceSunt ziare si reviste publicate pe Internet, similare celor tiparite. De multe ori erevistele depasesc prin obiectivitate si

diversitate a continutului, publicatiile tiparite (unde adevarul este deseori cenzurat sau distorsionat).

Pagini de prezentare pentru firme si companiiIncepand cu anii '90, dezvoltarea web-ului a fost puternic impulsionata de mediul de afaceri, multe firme dorind s fie

prezente si n ciberspaiu. Aceste firme angajeaza profesionisti (web designeri) care sa le construiasca pagini de prezentare peweb.

2. Structura elementara a unei paginiweb

Contrar cu ceea ce sar putea crede, cea mai mare parte dintre paginile web sunt n realitate doar simple fiiere de text.Browserul este cel care citete textul, caut n el etichete HTML i apoi afieaz corespunztor pagina. De exemplu, putem precizaprintro eticheta HTML ca dorim ca un anumit cuvnt s apar cu caractere aldine. Atunci cnd browserul ajunge la partearespectiv a documentului, el formateaz cuvntul cu caractere aldine.

2. 1. Etapele crearii unei pagini HTMLP1. Se creaza un nou fisier de text: deschidem editorul de text (Notepad, Wordpad sau Word) si eventual apelam meniul File

New. De asemenea, putem deschide un fisier deja existent (File Open).

P2. Introducem in fisier textul si etichetele HTML necesare.

OBSERVATIE. Nu se folosesc comenzile programului pentru formatare (ex: utilizarea caracterelor italice sau centrareaparagrafelor), deoarece browserul nu va tine cont de ele - pentru el nu conteaza decat etichetele HTML.

P3. Salvam fisierul ca pagina web. De exemplu, pentru Notepad: apelam meniul File Save/Save As. in caseta Save in, alegem locul unde trebuie salvata pagina web. introducem numele fisierului care trebuie salvat, terminat cu extensia .htm sau .html in caseta Save as type, specificam tipul fisierului ca fiind All files (*.*). Acest lucru determin Notepad s foloseasc

extensia .htm sau .html (i nu extensia normal, .txt). apasam butonul Save.OBSERVATII: Nu se salveaza fiierul n formatul nativ al procesorului de texte (ex: .txt, .doc, etc.), ci doar .htm sau .html. Daca nu

facem acest lucru, nu apare in browser pagina dorita, ci doar textul impreuna cu etichetele HTML introduse. Se folosesc numai nume de fiier cu litere mici in caz contrar, serverul web poate sa nu identifice corect pagina. De

exemplu, majoritatea serverelor web (calculatoare care stocheaz pagini web) cred c index.html i INDEX.HTML suntfiiere diferite.

Nu se folosesc spaii: Desi browserul Internet Explorer interpreteaza corect spatiile din numele fisierelor, alte browsere nufac acest lucru (ex: Netscape). Dac trebuie separate cuvintele din numele fiierelor i directoarelor, folosim un underscore(_) sau un minus (-).

P4. Incarcam pagina in browser, pentru a vedea cum arata daca o publicam pe Internet. Pentru aceasta, facem dublu clic pefisierul HTML sau deschidem browserul si apelam meniul File Open (cazul browserului IE). Pentru reincarcarea paginii, apelammeniul View Refresh sau tastam F5 (ca ultima solutie: inchidem si repornim browserul).

P5. Repetam pasii 2 - 3 (si eventual 4) de cate ori este necesar.

2. 2. Etichete HTMLEtichetele HTML, numite si taguri (tags) sau marcatori, instruiesc browserul sa afiseze elementele din pagina asa cum este

necesar. De exemplu, dac dorim ca un cuvnt din pagina s apar cu scris ingrosat, atunci ncadram cuvntul respectiv n etichetelecorespunztoare pentru textul cu caractere aldine.

Etichetele HTML au, n general, forma urmtoare:Textul care va fi afectat de eticheta

Partea ETICHETA este un cod care specific tipul de efect pe care l dorim. Codul apare ntotdeauna nconjurat cu parantezeunghiulare < >; parantezele spun browserului web c incepe sau se termina o portiune HTML i nu un text oarecare.

3De exemplu, eticheta pentru text aldin este < B>. Daca dorim ca textul Bine ati venit sa apara ingrosat, introducem indocument:

Bine ati venitPrimul spune browserului ca incepe un text care trebuie afisat cu litere aldine, iar comunica terminarea acestui text.

- bara oblic (/) definind eticheta in care apare ca etichet de final (endtag).

2. 3. Elementele de baza ale paginiiFiierele HTML incep ntotdeauna cu eticheta . Aceast etichet spune browserului ca fisierul este o pagina web.

Ultima linie din document este eticheta de final corespunztoare: .Urmtoarele elemente servesc la mprirea paginii n dou seciuni: antetul i corpul paginii. Seciunea antet este asemenea

unei introduceri pentru pagin. Browserele web folosesc antetul pentru a prezenta diferite tipuri de informaii despre pagin. n antetpot aprea o serie de elemente, dintre care cel mai intalnit este titlul paginii.

Pentru a defini antetul, se adaug o etichet i o etichet imediat sub/dupa eticheta . Aadar,pagina va arata deocamdata astfel:

Nu conteaz dac scriem numele etichetelor cu litere mari sau cu litere mici cu toate c ultimul standard HTML

sugereaz ca toate etichetele HTML s fie scrise folosind litere mici.Corpul paginii este locul unde introducem textul i alte elemente afisate de browser. Definirea corpului paginii se face cu

etichetele: - nainte i - dup seciunea antet (dupa eticheta ), astfel:

Adaugarea unui titluTitlul paginii apare in bara de titlu a ferestrei browserului. Pentru a defini un titlu, folosim etichetele i .

De exemplu, dac titlul paginii este Pagina Colegiului Economic, introducem: Pagina Colegiului Economic

REGULI PENTRU TITLU: titlul trebuie sa descrie continutul paginii (sa nu fie gen pagina nr. 34), sa nu fie prea lung, pentru ca altfel nu apare complet in bara de titlu a browserului. sa aiba sens daca este vazut in afara contextului (ex: daca apare in lista paginilor favorite ale unui browser)

Introducerea textuluiTextul obisnuit se introduce intre etichetele i , astfel:

Pagina Colegiului Economic

Acest text apare in corpul paginii

OBSERVATIE: Nu se folosesc spatii, tabulatori, sfarsituri de rand (obtinute cu tasta ENTER) si alte elemente de formatare(culori, aliniere, etc.) folosind comenzile editorului de text toate acestea vor fi ignorate de catre browser. De asemenea,parantezele unghiulare < i > nu pot fi afiate direct n paginile HTML, deoarece browserul le folosete pentru identificareaetichetelor.

Realizarea paragrafelorPentru a afisa un anumit text intr un nou paragraf, il incadram intre etichetele si . Exemplu:

Pagina Colegiului Economic

Acest text apare in corpul paginii.Aceasta nu este a doua linie: textul apare in continuare.

Aceasta este a doua linie.

Incercati:Realizati o pagina web continand o strofa dintro poezie cunoscuta (cu versurile pe cate un rand). Titlul poeziei sa apara atat in

pagina cu litere ingrosate, cat si in bara de titlu a browserului. Folositi, pe rand, editoarele Notepad, WordPad, Word.

43. Formatarea textului3. 1. Stiluri de baza pentru formatarea textuluiMajoritatea browser-elor suport patru tipuri fundamentale de formatare: aldin, italic, subliniat i monospaiu existand mai

multe etichete care produc aceste stiluri:Aldin ,Italic ,,,Subliniat Monospaiu , ,

Este posibila si combinarea stilurilor de formatare. De exemplu, pentru un text cu caractere aldine i italice, monospatiat: :Acest text apare cu caractere aldine si italice, monospatiat

3. 2. Inserarea caracterelor specialeCaracterele speciale disponibile in setul de caractere ISO Latin 1, sunt numerotate de la 32 pana la 255 inclusiv. Inserarea in

pagina a caracterelor speciale, se face folosind numarul caracterului sau numele (daca exista). Astfel, putem specifica: referinta decaracter (character reference) sau numele de entitate (entity name). De exemplu, caracterul (copyright) poate fi afisat cureferinta de caracter sau cu numele de entitate &copy:

Aceasta pagina este copyright Ionescu Marcelsau

Aceasta pagina este copyright &copy Ionescu MarcelExemple de caractere speciale:

Caracter Referinta de caracter Nume de entitate

< < > >

Spaiu nonbreaking

o

Caracterul spaiu nonbreaking" din tabelul de mai sus, forteaza browserul sa afiseze spatiu in locul respectiv (asa ne asiguramca browserul nu ignora spatiul - cum face de obicei). Exemplu:

Aceasta linie apare indentata cu doua spatii.Pentru detalii suplimentare, puteti consulta http://www.htmlhelp.com/reference/charset/

3. 3. Stiluri de antetAntetele se folosesc pentru evidentierea titlurilor diferitelor sectiuni ale paginii. Astfel, folosim eticheta pentru un titlu

de capitol, pentru titlul de subcapitol, etc. Etichetele pentru stiluri de antet sunt , , . . . , . Exemplu:Exemple de anteteInfinitul in poezia romaneascaMihai EminescuLa steauaLa steaua carea rasarit Eo caleatat de lunga Ca mii de ani au trebuitLuminii sa ne-ajunga

3. 4. Alinierea paragrafelorParagrafele de text se pot alinia specificand modul de aliniere in interiorul etichetei de paragraf , dupa modelul:

text.

5Modurile de aliniere sunt: LEFT(obisnuita), CENTER si RIGHT. In mod asemanator putem alinia si antetele (... ).De asemenea, se pot centra antete, texte sau imagini incadrandule cu eticheta , dupa modelul:

antetul, textul si/sau imaginile respective. Exemplu:

Exemple de aliniere

Infinitul in poezia romaneascaMihai Eminescu

La steauaLa steaua carea rasaritEo caleatat de lungaCa mii de ani au trebuitLuminii sa ne-ajunga.

Folosirea textului preformatat. Eticheta Desi in mod obisnuit browserul ignora spatiile, tabulatorii si sfarsiturile de rand daca acestea sunt stabilite din editorul de text,

il putem forta sa tina cont de aceste elemente, incadrand textul respectiv intre etichetele si . Astfel, textul isipastreaza modul de aranjare in pagina si este afisat cu font monospatiat. Ca exemplu, prezentam mai jos codul HTML scris inNotepad si pagina web rezultata.:

Se observa ca numai textul incadrat intre etichetele isi pastreaza aranjarea. Pentru a folosi alt font impreuna cu eticheta (in locul celui monospatiat), se foloseste o foaie de stiluri cum vom

arata in capitolele urmatoare.

Intreruperea de rand. Eticheta Trecerea la alt paragraf are ca efect adaugarea unui rand liber intre cele doua paragrafe. Daca nu dorim sa apara acest rand

liber, putem comanda trecerea la randul urmator in cadrul aceluiasi paragraf, folosind eticheta . Eticheta nu are pereche(nu exista ). Exemplu:

Sfarsitul de randLa steauaLa steaua care-a rasaritE-o cale-atat de lungaCa mii de ani au trebuitLuminii sa ne-ajunga

3. 5. Inserarea unei linii orizontaleLiniile orizontale au rol ornamental si de separare a diferitelor sectiuni din pagina. Eticheta folosita este (fara pereche) si

denumirea provine de la horizontal rule (rigla orizontala). Folosind simplu , vom insera o linie simpla subtire pe toata latimeapaginii, iar daca folosim si alte atribute obtinem diferite efecte suplimentare, conform tabelului de mai jos:

Atribut Efect Stabilete limea liniei la x pixeli

Stabilete limea liniei la x la sut din fereastr

Stabilete grosimea liniei la n pixeli (n condiiile n caregrosimea implicit este de l pixel). Aliniaz linia la stnga

Aliniaz linia la centru Aliniaz linia la dreapta

Afieaz o linie mai groas (n locul unei linii subiri)Exemplu:

Linie orizontalaLa steaua

La steaua care-a rasaritE-o cale-atat de lunga

6Ca mii de ani au trebuitLuminii sa ne-ajunga

In locul liniilor obtinute cu eticheta , in multe pagini web se folosesc imagini.

3. 6. Eticheta Stabilirea marimii textuluiStabilirea marimii textului se face cu ajutorul etichetei , insotita de atributul SIZE, dupa modelul:

textul afectatunde marime este un numar intre 1(foarte mic) si 7(foarte mare), iar 3 este marimea standard. Exemplu:

Stabilirea marimii textului Folosirea etichetei Text cu marimea 7. Text cu marimea 6. Text cu marimea 5. Text cu marimea 4. Text cu marimea 3 (standard). Text cu marimea 2. Text cu marimea 1. Puteti folosi litere de diferite marimi intro fraza.

Fontul de bazaFontul de baza (base font) este fontul implicit cu care este afisat textul din pagina si se poate stabili cu eticheta .

Pentru precizarea marimii fontului, folosim eticheta astfel:

unde marime este un numar intre 1 si 7. Daca, de exemplu, inseram imediat dupa eticheta ,atunci textul din pagina va aparea implicit cu marimea 5.

Fontul de baza permite si precizarea unei marimi relative de font pentru un anumit text, dupa modelele:

insemnand cu n puncte mai putin, respectiv mai mult decat fontul de baza vezi exemplul urmator.Avantajul folosirii marimilor relative de font este ca putem mari sau micsora rapid intregul text din pagina - de exemplu, cand

fonturile apar prea mici sau prea mari in browser modificand doar eticheta .

Modificarea fontuluiDaca un anumit text trebuie scris cu alt font decat cel de baza, putem preciza fontul dorit cu eticheta , unde typeface este numele fontului dorit si care trebuie sa fie instalat in calculatorul utilizatorului. Deasemenea, se poate utiliza eticheta . Browserul va folosi primul font valabildin lista precizata, iar in caz de esec, fontul implicit. Atributul FACE poate fi folosit si in eticheta .

Exemplu: Stabilirea fontului

Times New RomanTimes New RomanGeorgiaacesta este Arial - daca nu aveti El Primo :)

3. 7. Culoarea textuluiCulorile HTML sunt rezultatul combinarii a trei 3 culori de baza: rosu, verde si albastru. Intensitatea acestora este codificata

printrun numar hexazecimal intre 00 si FF (adica, in baza 10, intre 0 si 15*161+15*160=255 reamintim ca cifrele bazei 16 sunt:0, 1, . . . , 9, A, B, C, D, E, F). Culoarea rezultata din combinatie este notata dupa modelul #rrggbb, unde rr reprezinta rosul, gg verdele si bb albastrul. Aceste combinatii se mai numesc valori RGB.

Exemple: #FF0000 inseamna rosu aprins, #000000 negru, #FFFFFF alb, iar cu valori egale pentru rr, gg si bb obtinemnuante de gri. In total, exista aprox. 16 milioane de culori diferite (256 x 256 x 256).

Unele din aceste combinatii au si un nume echivalent.Exemple:

Nume RGBAqua #00FFFFAquamarine #7FFFD4Black #000000Blue #0000FFBlueViolet #8A2BE2Brown #A52A2AChocolate #D2691E

Crimson #DC143CCyan #00FFFFDarkBlue #00008BDarkOliveGreen #556B2FDarkorange #FF8C00DarkOrchid #9932CCDarkRed #8B0000DarkSeaGreen #8FBC8F

DarkTurquoise #00CED1DarkViolet #9400D3DeepPink #FF1493DeepSkyBlue #00BFFFDodgerBlue #1E90FFFireBrick #B22222Gold #FFD700Gray #808080

7Green #008000GreenYellow #ADFF2FIndianRed #CD5C5CIndigo #4B0082LawnGreen #7CFC00LightGreen #90EE90LightSalmon #FFA07ALightSeaGreen #20B2AALightSkyBlue #87CEFALightSlateBlue #8470FFLightYellow #FFFFE0Lime #00FF00LimeGreen #32CD32Magenta #FF00FFMediumAquaMarine #66CDAA

MediumPurple #9370D8MediumSeaGreen #3CB371MediumSpringGreen #00FA9AMediumTurquoise #48D1CCMediumVioletRed #C71585Moccasin #FFE4B5NavajoWhite #FFDEADNavy #000080Olive #808000OliveDrab #6B8E23Orange #FFA500OrangeRed #FF4500Orchid #DA70D6PapayaWhip #FFEFD5Pink #FFC0CB

Plum #DDA0DDRed #FF0000RoyalBlue #4169E1SkyBlue #87CEEBSnow #FFFAFASpringGreen #00FF7FTeal #008080Tomato #FF6347Turquoise #40E0D0Violet #EE82EEVioletRed #D02090White #FFFFFFWhiteSmoke #F5F5F5Yellow #FFFF00

Pentru vizualizarea codului RGB al unei anumite culori: deschidem Paint, facem dublu clic pe caseta de culori si apasamDefine Custom Colors, apoi selectam culoarea dorita si observam valorile din casetele Red, Green, Blue. Pentru lista completa cunumele de culori, codurile RGB si mostrele de culoare, accesati pagina web http://www.w3schools.com/html/html_colornames.asp

CULOAREA TEXTULUI BODY se modifica folosind etidheta , dupa modelul:

unde color este o combinatie RGB sau un nume de culoareCULOAREA HYPERLINK-URILOR care urmeaza a fi introduse in pagina, se modifica cu eticheta , astfel:

unde: LINK reprezinta legaturile inca nevizitate, VLINK-legaturile vizitate (pe care utilizatorul a facut deja clic) si ALINK-

legaturile active (pe care s-a facut clic, dar pagina solicitata nu a aparut inca).CULOAREA UNUI TEXT OARECARE se poate specifica cu eticheta , dupa modelul :

Exemplu:

Culoarea textului

La steauaLa steaua care-a rasaritE-o cale-atat de lungaCa mii de ani au trebuitLuminii sa ne-ajunga

Incercati:Creati o pagina web continand o strofa dintro poezie cunoscuta. Numele poetului sa apara in bara de titlu a browserului.

Titlul poeziei sa apara evidentiat, colorat Navy, cu font Arial, stil inclinat si centrat pe mijlocul paginii. Sub titlu inserati o baraorizontala aliniata centrat, cu lungimea cat jumatate din pagina. Versurile din poezie sa apara pe cate un rand, fara spatiu intre ele (inacelasi paragraf), cu aliniere centrata si colorate cu OrangeRed.

84. ListeIn HTML se pot defini trei tipuri de liste: numerotate, cu marcatori si de definitii.

4. 1. Liste numerotateSe folosesc pentru introducerea clasamentelor sportive, muzicale, etc. sau pentru descrierea pasilor unei operatii. Numerele

dinaintea elementelor sunt generate automat. O lista numerotata se precizeaza dupa modelul: element 1 element 2. . . element n

unde element 1. . . element n pot fi texte sau alte etichete HTML (pentru texte, imagini, legaturi, etc.).Exemplu:

Lista numerotata Mari artistiHenry PurcellEnyaGheorghe Zamfir

Tipul de numerotareNumerotarea elementelor se poate face cu numere, litere sau cifre romane, folosind atributul TYPE, dupa modelul:

unde tip poate fi: 1 (numere standard), a (litere mici), A (litere mari), i (cifre romane mici), I (cifre romane mari).De asemenea, pentru ca numerotarea sa nu inceapa de la 1, ci de la un anumit numar, folosim atributul START. De exemplu,

94. 4. Combinarea listelorEste posibila folosirea unei liste ca element in alta lista in acest caz prima numinduse lista imbricata (nested list

denumirea provenind din englezescul nest=cuib).Exemplu:

Liste imbricate Mari artisti

Henry PurcellMare compozitor englez (1659-1695).Piese:

Trumpet voluntary,Strike the viol,Jubilate DeoEnya

S-a nascut in Irlanda pe 17.05.1961, in zodia Taurului.Piese:Caribbean blue, Only time, Storms in Africa, Aldebaran,Flora's secret

Gheorghe ZamfirS-a nascut la Gaesti, Romania, pe 6 aprilie 1941, in zodia Berbecului.Piese:

Lonely shepard,Aranjuez mi amor,Czardas,Hora ca la caval

Incercati: Realizati o lista cu primele 4 materii de studiu preferate in scoala, folosind, pe rand: numerotare cu cifre romane mari marcare cu discuri Transformati lista de mai sus in lista de definitii, termenii fiind materiile studiate iar ca definitii, motivele pentru care

preferati materiile respective. Descrieti o reteta culinara, folosind liste.

10

5. Crearea legaturilorLegaturile (numite si hiperlegaturi sau hipertext) sunt texte subliniate care prin apasare deschid alte pagini web sau alt loc din

aceeasi pagina.

5. 1. Elemente de baza ale adreselor URLResursele din Internet (pagini web, documente, echipamente de comunicare, calculatoare, etc.) au fiecare cate o adresa unica

numita URL (Uniform Resource Locator adresa uniforma pentru localizarea resurselor). O adresa URL are forma:Cum://Cine/Unde/Ce ex: http://www.webshots.com/g/d2005/11-nw.html

unde: Cum reprezinta protocolul folosit pentru comunicare: http pentru pagini de internet, ftp pentru transfer de fisiere, etc. Cine este numele gazdei (adresa calculatorului in care se gaseste resursa) ex: www.webshots.com Unde inseamna unde se gaseste resursa in calculatorul respectiv ex: daca resursa este in directorul g, subdirectorul

d2005, atunci unde inseamna /g/d2005/ Ce este numele resursei respective ex: pagina de internet 11-nw.html. Se recomanda ca adresele URL sa fie introduse cu litere mici serverele web, precum cele pe care ruleaza Unix, fac

diferenta intre majuscule si litere mici.

Numele implicit de fisierFisierul implicit este pagina web pe care serverul web o ofera utilizatorului atunci cand acesta nu completeaza partea ce din

adresa URL. Aceasta se numeste index.html. si este pagina principala a site-ului (pagina de start). Astfel, adresahttp://www.economic.go.ro este echivalenta cu http://www.economic.go.ro/index.html.

5. 2. Crearea legaturilorO legatura hipertext se creaza cu ajutorul etichetei , dupa modelul:

Textunde:

- HREF provine de la Hypertext Reference referinta hipertext.- URL este adresa URL catre care tinteste legatura (ex: pagina web care se deschide cand facem clic pe legatura) sau un

anumit loc din aceeasi pagina (o ancora)- Text este textul cu care apare in pagina legatura construita. A provine de la ancora o eticheta speciala prin care marcam un anumit loc din pagina, pentru a fi vizitat cand facem

clic pe legatura vezi mai jos.Cand plasam cursorul de mouse deasupra legaturii, apare adresa tinta a acesteia in bara de stare a browserului.

Referirea la un fisier din acelasi dosarDaca fisierul tinta (ex: citate.html) este in acelasi dosar cu pagina care contine legatura, se specifica doar numele lui (partea

ce) exemplu:Adevarul in maxime si reflectii

Referirea la un fisier dintrun subdosar al dosarului principalDosarul care contine pagina web ce urmeaza a fi publicata pe Internet este dosarul principal. Daca fisierul tinta (ex:

citate.html) este intr-un subdosar al dosarului principal (sa zicem, subdosarul maxime), specificam acest fisier sub formasubdosar/fisier, de exemplu:

Adevarul in maxime si reflectii

Referirea la un fisier oarecareDaca fisierul tinta este intrun anumit dosar, il specificam sub forma ../subdosar 1/subdosar 2/. . ./subdosar n/fisier unde

.. reprezinta dosarul principal. Exemplu:citeste Scrisoarea a III a

AncoreAncora, numita si semn de carte (bookmark), este o eticheta care marcheaza un loc din pagina, care urmeaza a fi vizitat cand se

face clic pe o legatura. Astfel, de exemplu, putem marca anumite locuri mai importante din pagina (inceputul, sfarsitul, titlurile decapitole, etc.) cu ancore si apoi sa construim un cuprins al paginii, cu legaturi care sa trimita la acele semne de carte.

Definirea unei ancore se face tot cu eticheta , dupa modelul:

11

iar referirea la ancora se face dupa modelul:textul_legaturii

unde caracterul # arata browserului ca e vorba de o ancora din pagina si nu de un document oarecare.Pentru exemplificare, in pagina de mai jos apare un text foarte mare (se poate introduce cu mecanismul copy paste). Am

plasat doua ancore: una inainte si alta dupa textul introdus si am inserat legaturi care conduc vizitatorul la inceputul respectivsfarsitul textului:

Folosirea legaturilor si ancorelor

mergi la sfarsitAceasta este o legatura externa. Urmariti Antena 1?non multae sed multumnon multae sed multum. . . . . . . . . . . . . . . . . . . . . . . . (copiati aceasta maxima latina de cel putin 50 de ori)non multae sed multum

mergi la inceput

Legaturi pentru emailAceasta legatura permite vizitatorului sa trimita un mesaj de email (de exemplu la adresa noastra, pentru a ne spune ce

parere are despre pagina). Facand clic pe legatura respectiva, se deschide clientul de email implicit (ex: Outlook) si poate fi scrismesajul respectiv. Crearea unei legaturi pentru e-mail se face dupa modelul:

textul_legaturiiExemplu:

Ce parere ai despre aceasta pagina ?

Legaturi FTPIn mod asemanator, putem crea o legatura FTP, catre un fisier pe care vizitatorul paginii sal descarce de pe un server FTP.

Exemplu:Descarca de aici un antivirus gratuit !

Incercati:1. Creati o pagina dedicata povestii Scufita Rosie. Aceasta sa contina urmatoarele titluri de sectiune: Personaje (in

care descrieti pe scurt personajele principale din poveste), Povestea (in care scrieti povestea) si Concluzii(in careexpuneti pe scurt invataturile pe care le putem trage din poveste). Inserati ancore inaintea fiecaruia din titlurile de maisus. Creati un cuprins al paginii, la inceputul si la sfarsitul acesteia, continand legaturi catre ancorele create. Inserati lasfarsitul paginii o legatura prin care vizitatorul va poate scrie un mesaj e-mail.

2. Creati un subdirector Poze in directorul principal al paginii, in care plasati imagini cu personajele principale alepovestii (desenate eventual de dvs. in Paint). Adaugati in pagina web legaturi catre imaginile create, dupa modelul:

Scufita Rosie

Cand vizitatorul acceseaza legatura, apare imaginea respectiva vezi mai jos:

Incadrarea textului legaturii cu eticheta SPAN este necesara pentru ca browserul sa interpreteze corect acest text. Acestlucru nu era necesar daca tinta legaturii era o pagina HTML. Mai multe despre eticheta vom afla la Lucrul cu stiluri

12

6. Lucrul cu imaginiImaginile din paginile web sunt de obicei de doua tipuri: GIF (Graphic Interchange Format) si JPEG (Joint Photographics

Experts Group). Imaginile GIF sunt recomandate pentru linii, texte si desene simple (ele avand maxim 256 de culori) si pentru realizarea de

imagini cu fundal transparent. De asemenea, exista GIF-uri animate, compuse din mai multe imagini statice (cadre) care sesucced una dupa alta.

Imaginile JPEG sunt mai complexe decat cele de tip GIF si ocupa mai putina memorie, fiind comprimate. Ele se folosescde obicei ca fotografii digitale de inalta calitate, putand fi descarcate de utilizatori din pagina respectiva.

Pentru crearea imaginilor de tip GIF, JPG, BMP, TIFF sau PNG putem folosi programul Paint din Windows XP. Alteprograme grafice: Paint Shop Pro, ACDSee, IrfanView, Microsoft GIF Animator, etc.

Nu se recomanda incarcarea exagerata a paginii cu imagini, sunete si animatie, deoarece creste timpul necesar incarcariipaginii (o astfel de pagina este numita plastic jpig (jporc)). De asemenea, imaginile BMP (Bitmap) nu se folosesc in paginileweb, fiind foarte mari (la aceeasi imagine, de 20-30 ori mai mari decat cele JPG).

6. 1. Inserarea unei imagini in paginaImaginile se insereaza in pagina cu ajutorul etichetei , cu urmatoarea sintaxa:, unde: Numefisier este numele fisierului imagine, precedat eventual de calea catre acesta. Se recomanda ca imaginea sa fie in

acelasi director cu pagina, caz in care precizam doar numele fisierului imagine. x si y sunt latimea si inaltimea imaginii, in pixeli (picture elements). In functie de dimensiunile precizate, imaginea poate

apare marita, micsorata sau deformata. In loc de x, mai putem preciza, procentual, cat la suta din latimea paginii sa ocupeimaginea. De exemplu, WIDTH=70% inseamna ca latimea imaginii va fi 70% din latimea ferestrei browserului.

Aliniere precizeaza cum sa fie aliniat textul fata de imagine, putand avea urmatoarele valori: Top, Middle, Bottom alinierea textului cu partea de sus (respectiv mijlocul, partea de jos) a imaginii Left, Right imaginea apare in stanga respectiv in dreapta paginii, fiind incadrata de text Text alternativ este textul care apare in locul imaginii, daca aceasta nu este disponibila. De asemenea, Internet Explorer si

alte browsere afiseaza acest text intr-un bilet explicativ (hint) cand vizitatorul plaseaza mouse-ul peste imagine. h si v reprezinta distanta dintre imagine si text, deasupra-dedesubt respectiv la stanga-dreapta, exprimata in pixeli.

6. 2. Diverse utilizari ale imaginilor ca linie - in loc de folosim eticheta - de exemplu . ca marcator in liste. Exemplu: lista de mai jos se obtine cu codul HTML alaturat:

ActiuneRepaus

ca fundal pentru pagina, creat prin alaturarea imaginii (tile). Se foloseste eticheta , astfel: , unde numefisier este numele fisierului imagine dorit. Daca dorim ca pagina sa aiba oculoare de fundal, folosim eticheta BODY sub forma: sau .

6. 3. Crearea si folosirea imaginilor de tip GIFPentru a crea imagini GIF statice, se poate folosi Paint din Windows XP. Pentru imagini GIF mai complexe (ex: animate si/sau

cu efecte de transparenta), vom folosi programul freeware Microsoft GIF Animator.

6. 3. 1. Efecte de transparentaA. IMAGINILE GIF TRANSPARENTE sunt invizibile in pagina, rolul lor fiind de a ajuta la pozitionarea exacta a altor

elemente in pagina.Pentru crearea unui GIF transparent numit spacer.gif, procedam astfel:1. Deschidem Paint si accesam meniul Image Attributes, apoi stabilim width si height egale cu 1. Apasam OK.2. Copiem imaginea obtinuta (Edit Select All, Edit Copy, sau CTRL+A, CTRL+C).3. Deschidem Microsoft GIF Animator si efectuam operatia paste (CTRL+V).4. La tab ul Image, bifam Transparency, apoi clic pe patratul colorat de la Transparent Color si alegem culoarea care

trebuie sa fie transparenta (aici, albul), din paleta aparuta.5. Apasam butonul Save si salvam GIF - ul creat cu numele spacer.gif.Acum, daca dorim pozitionarea textului Bine ati venit la exact 50 de puncte fata de marginea stanga a paginii, folosim GIF

ul transparent spacer.gif, specificand latimea acestuia (width) de 50 de puncte si inaltimea (height) de 1 pixel:

13

Folosire GIF transparent

Bine ati venitB. ZONA TRANSPARENTA dintrun GIF permite sa vedem ce este in spatele imaginii (ex.: fundalul paginii) ca in

exemplul de mai jos:

Pentru ca o zona din imagine sa fie transparenta, este necesar sa aiba aceeasi culoare. Urmeaza sa stabilim acea culoare ca fiindtransparenta, la fel ca la pasul 4 de mai sus.

6. 3. 2. GIF-uri animateVom exemplifica in continuare, crearea unui GIF animat reprezentand un semafor, folosind Microsoft GIF Animator.

1. Deschidem Paint si micsoram suprafata de lucru la cat avem nevoie, apoi desenam semaforul (cu rosul aprins).2. Deschidem Microsoft GIF Animator.

3. In Paint tastam CTRL+A, CTRL+C, apoi in GIF Animator apasam butonul Paste .4. In Paint, modificam imaginea pentru a obtine urmatorul cadru din animatie.5. Repetam pasii 3 4 de cate ori este necesar, obtinand in final cadrele care compun animatia.6. OPTIONAL: daca ordinea cadrelor nu este cea dorita, selectam un cadru si ii modificam pozitia cu ajutorul butoanelor

. Pentru duplicarea unui anumit cadru (ex.: cel cu galbenul aprins), il selectam si apasam Copy , apoi Paste .7. La tabul Animation, bifam casetele Looping (Repetare) si Repeat forever (Repetare ncontinuu).

8. La tabul Image, selectam toate cadrele din animatie apasand butonul , apoi stabilim durata unui cadru in casetaDuration.

9. OPTIONAL: pentru previzualizarea animatiei, apasam butonul .10. Apasam butonul Save pentru salvarea animatiei GIF create.

6. 4. Legaturi pe o imagine. Harti de imaginiCrearea unei legturi pe o imagine

Pentru a face ca o imagine sa devina hiperlegatura, tot ce avem de facut este sa includem eticheta prin care precizamce imagine sa fie afisata in interiorul etichetei .

In exemplul urmator, imaginea casa_mica.jpg apare in pagina ca hiperlegatura catre imaginea casa.jpg , fiind o versiunein miniatura a acesteia. La clic pe aceasta miniatura, se deschide imaginea casa.jpg . Ambele imagini sunt in acelasi director cupagina (nu neglijati textul alternativ !):

Fundalulpaginii

14

Maparea unei imaginiO hart de imagini (image map) este o imagine ce conine zone predefinite numite puncte fierbini (hot spots) cu rol de

hyperlink. De exemplu, fcnd clic pe un hotel din harta unei staiuni, se deschide o pagin web cu informaii despre acest hotel.Pentru crearea unei hri de imagini, procedm astfel:

1. ncrcm imaginea dorit ntr-un editor grafic (ex. Paint) i micnd mouse-ul deasupra imaginii, notm coordonatelepunctelor care vor ncadra hot-spot-ul. Aceste coordonate in pixeli sunt de forma (x, y), unde x reprezint coloana, iar y linia,sistemul de coordonate fiind relativ la coltul stnga-sus al imaginii.

De exemplu, imaginea alaturata reprezinta statiunea Venus, iarhot spot-ul dreptunghiular, hotelul Vulturul. Coordonatelecolurilor stnga-sus i dreapta-jos ale hot spot-ului sunt (97, 97) i(129, 144).

2. Introducem in codul HTML al paginii, eticheta , carecreaza harta de imagini si defineste hot spot-ul.Aceasta are sintaxa:

unde: NumeHarta este numele hrii de imagini URL folosit este calea ctre fiierul folosit (ex: o pagina

web cu informatii despre hotelul respectiv), sau URL-ulacestuia.

Forma hot spot este una din urmtoarele: RECT(dreptunghi), CIRCLE (cerc) i POLY (poligon).

Coordonate este o lista de numere ce definetedimensiunile hot spot-ului. n funcie de forma acestuia,lista conine:

o pentru RECT, perechile de coordonate alecolurilor stnga-sus i dreapta jos ale dreptunghiului.

o pentru CIRCLE, coordonatele x, y ale centrului i raza cercului.o pentru POLY, perechile de coordonate ale vrfurilor poligonului.

Text alternativ este textul care apare cand punem mouse-ul deasupra hot-spot-ului3. Introducem in codul HTML al paginii, eticheta , prin care precizam imaginea folosita si faptul ca aceasta contine o

harta de imagini, conform sintaxei:

Pentru exemplul dat, codul HTML care creaza imaginea mapata este :

unde imaginea venus.jpg si fiierul vulturul.html, sunt n acelai director cu pagina. Dac harta de imagini are mai multe hot spot-uri, tag-ul se repet n pentru fiecare din acestea.

Incercati:1. Inserati in pagina web un GIF animat care afiseaza numele vostru litera cu litera. Fundalul animatiei va fi transparent.2. Desenati cu programul grafic preferat, un buton cu aspect deosebit si inserati imaginea in pagina web. Cand mouse-ul este

deasupra butonului, sa apara un text explicativ, iar la apasarea lui sa se deschida un fisier ales de dvs. (ex : o imagine, o pagina web,etc.).

3. Realizati o harta de imagini cu magazinele de pe strada dvs., reprezentate ca hot spot-uri. Pentru fiecare magazin sa aparanumele sau ca text alternativ, cand mouse-ul este deasupra. La clic pe legatura, sa se deschida o noua pagina web cu informatiidespre magazin (profil, produse oferite, preturi, comentarii, etc.).

15

7. TabeleUna din marile probleme ale designerilor web este pozitionarea exacta in pagina a continutului (texte, imagini, bannere, etc.).

Aceasta se poate rezolva inserand in pagina un tabel cu bordura transparenta (invizibil) si plasand in celulele acestuia informatiiledorite.

7. 1. TabelulTabelele se definesc folosind eticheta . Aceasta poate contine diferite atribute, dintre care cele mai importante sunt:

Align = left | center | right - alinierea tabelului in pagina Width = x | x% - latimea tabelului in pixeli / fata de latimea paginii Height = x | x% - inaltimea tabelului in pixeli / fata de inaltimea paginii Border = "x - grosimea liniei chenarului din jurul tabelului ("0 pentru bordura transparenta si tabel invizibil) Bordercolor = "culoare | #rrggbb - culoarea liniilor de bordura ale tabelului Bgcolor = "culoare | #rrggbb - culoarea de fundal a celulelor tabelului Cellspacing = x - spatiul dintre celulele tabelului Cellpadding = "x - spatiul dintre continutul celulei si bordura acesteia

Liniile din tabel se definesc cu eticheta , iar celulele cu eticheta (cele doua etichete aparand intre si). Exemplu:

7. 2. Antetul tabeluluiAntetul tabelului se defineste cu eticheta , aflata de asemenea intre si . Dintre atributele mai importante

din eticheta , mentionam:

Valign = "top | middle| bottom - alinierea pe verticala a continutului. Align = "center | left | right - alinierea pe orizontala a continutului. Colspan = "x - precizeaza pe cate coloane se intinde antetul.

Se pot folosi si atributele height, bordercolor, bgcolor, cellspacing, cellpadding, prezentate mai sus. Exemplu:

baieti100

fete60

Elevi

baieti100

fete60

16

7. 3. Celulele tabeluluiDintre atrinbutele mai importante din eticheta , mentionam:

Width = "x% - latimea celulei fata de latimea randului. Randurile urmatoare vor avea automat aceeasi latimepentru celule vezi din exemplul anterior.

Rowspan = "x - pe cate randuri din tabel se intinde celula. Colspan = "x - pe cate coloane din tabel se intinde celula

Se pot folosi si alte atribute, dintre cele prezentate in paragrafele anterioare: bgcolor, align, etc.Exemplu: codul HTML pentru tabelul urmator:

este:

DisciplinaForma de examinareNumar creditePonderi

Bazele contabilitatiiExamen660% Examen40% Seminar

Bazele informaticii570% Examen30% Seminar

Incercati:1. Bifati afirmatiile adevarate:

Textul din celulele unui tabel se intinde pe unul sau mai multe randuri, in functie de dimensiunile ferestrei browserului.

Scrisul pe doua randuri intr - o celula se poate separand textul cu ajutorul etichetei .

In mod implicit coloanele sunt dimensionate in mod egal, dar continutul celulelor poate influenta latimea coloanelor.2. Realizati un tabel cu bordura transparenta, format dintr o linie si 3 coloane. Plasati 2 imagini: una in prima si cealalta in

ultima celula din tabel. In celula din mijloc, introduceti un text aliniat pe mijlocul paginii (atat pe orizontala cat si pe verticala).Alinierea textului in pagina sa se pastreze indiferent de dimensiunile ferestrei browserului.