7/31/2019 61070373-html

1/158

Capitolul 1 .......................................................................................................................................1. Ce este HTML? ............................................................................................................................ 42. Coninut i aspect ntr-un document HTML ................................................................................43. Editorul .........................................................................................................................................51. DOCTYPE ..................................................................................................................................122. . Etichete de structur ................................................................................................................13

Capitolul 2 .......................................................................................................................................161. Culoarea fundalului .................................................................................................................... 16

2. Culoarea textului ........................................................................................................................ 163. Culoarea legturilor ....................................................................................................................174. Alegerea culorilor .......................................................................................................................17

Capitolul 3 ........................................................................................................................................191. Formatarea caracterelor .............................................................................................................. 192. Accentuarea textului ...................................................................................................................21

Capitolul 4 ........................................................................................................................................251. Trecerea la un rnd nou .............................................................................................................. 252. Titlurile (Headings) .................................................................................................................... 263. Paragrafele ..................................................................................................................................274. Preformatarea textului ................................................................................................................ 285. Centrarea textului ....................................................................................................................... 296. Afiarea textului pe o singur linie .............................................................................................307. Blocul .............................................................................................................................318. Linii orizontale ........................................................................................................................... 319. Inserarea unei adrese potale ...................................................................................................... 3310. Inserarea unui citat ................................................................................................................... 3311. Inserarea caracterelor speciale ..................................................................................................3412. Sugestii privind aspectul textului ............................................................................................. 35

Capitolul 5 ........................................................................................................................................371. Adresa URL ................................................................................................................................372. Adrese absolute i adrese relative ...............................................................................................373. Stabilirea legturilor ................................................................................................................... 384. Ancore - legturi n cadrul aceleiai pagini ................................................................................385. Legtura ctre o pagin aflat n acelai director (folder) ..........................................................406. Legtura ctre o pagin localizat n alt director (folder) .......................................................... 47. Legtura ctre pagini externe ..................................................................................................... 438. Alegerea culorilor pentru legturi .............................................................................................. 439. Utilizarea potei electronice (e-mail) ......................................................................................... 4410. Legturi ctre fiiere oarecare .................................................................................................. 4511. Deschiderea paginilor referite printr-o legtur ....................................................................... 4512. Crearea unei bare secundare de navigare ................................................................................. 46

Capitolul 6 ........................................................................................................................................481. Formatele fiierelor grafice ........................................................................................................ 482. Inserarea unei imagini ................................................................................................................ 483. Dimensionarea imaginii ..............................................................................................................504. Alinierea imaginii i a textului ...................................................................................................505. Imagini folosite ca fond (background) al paginii .......................................................................526. Imagini folosite ca legturi .........................................................................................................537. Imaginile miniaturale (thumbnails) ............................................................................................ 538. Imaginile video ...........................................................................................................................549. Sunetele ...................................................................................................................................... 5610. Sugestii privind folosirea imaginilor i elementelor multimedia .............................................57

11. Imaginile i timpul de ncrcare al paginii ...............................................................................58Capitolul 7 ........................................................................................................................................591. Liste neordonate ......................................................................................................................... 59

1

7/31/2019 61070373-html

2/158

2. Liste ordonate .............................................................................................................................613. Imbricarea listelor .......................................................................................................................634. Liste de definiii ..........................................................................................................................64

Capitolul 8 .....................................................................................................................................661. Crearea unui tabel .......................................................................................................................662. Alinierea tabelului n pagin ...................................................................................................... 683. Dimensionarea unui tabel ...........................................................................................................694. Spaierea celulelor unui tabel ..................................................................................................... 71

5. Dimensionarea celulelor unui tabel............................................................................................ 726. Alinierea coninutului unei celule .............................................................................................. 727. Definirea culorilor pentru un tabel .............................................................................................738. Titlul unui tabel.......................................................................................................................... 769. Capul de tabel.............................................................................................................................7610. Tabele de forme oarecare ........................................................................................................ 7711. Celule fr coninut .................................................................................................................. 7912. Grupuri de coloane ................................................................................................................... 7913. Atribute pentru aspectul chenarului unui tabel .........................................................................8114. Tabele imbricate ....................................................................................................................... 8215. Tabele complexe .......................................................................................................................8316. Recomandri privind folosirea tabelelor ..................................................................................86Capitolul 9 ........................................................................................................................................871. Documentul de definire a cadrelor ............................................................................................872. Cadre imbricate .......................................................................................................................... 903. Controlul aspectului unui cadru ..................................................................................................904. Bare de derulare ..........................................................................................................................915. Poziionarea documentului ntr-un cadru ................................................................................... 926. Cadre interne (in-line frames) .................................................................................................... 937. Deschiderea documentelor n alte cadre .....................................................................................948. Sugestii privind folosirea cadrelor ..............................................................................................97

Capitolul 10 ......................................................................................................................................971. Ce este un formular? ...................................................................................................................972. Crearea unui formular .................................................................................................................983. Eticheta ......................................................................................................................994. Etichetele i ......................................................................................1035. Eticheta .......................................................................................................... 1046. Validarea datelor ......................................................................................................................105

Capitolul 11 ..................................................................................................................................... 11. Ce este un stil? ..........................................................................................................................107Tipuri de foi de stiluri ................................................................................................................... 1083. Efecte obinute cu ajutorul stilurilor .........................................................................................111

Capitolul 12 ..................................................................................................................................... 11. Ce este JavaScript? ................................................................................................................... 1152. Cum poate fi inclus un script n pagin? .................................................................................. 1163. Modul de execuie al scriptului ................................................................................................ 1194. Ce se poate face cu JavaScript? ................................................................................................ 120

Capitolul 13 ..................................................................................................................................... 11. Ce este un motor de cutare? ....................................................................................................1272. Metatag-uri ...............................................................................................................................128

Capitolul 14 ..................................................................................................................................... 11. Factori care nu pot fi planificai ............................................................................................... 1332. Etapele planificrii site-ului .....................................................................................................135

Capitolul 15 ..................................................................................................................................... 11. Principiile designului web ........................................................................................................ 1382. Organizarea unui site ................................................................................................................ 139

2

7/31/2019 61070373-html

3/158

3. Metodologia de construire a site-ului ....................................................................................... 1404. Tehnici de design web .............................................................................................................. 1415. Greeli de design ...................................................................................................................... 146

Capitolul 16 ..................................................................................................................................... 11. Corectarea paginilor ................................................................................................................. 1492. Testarea paginilor .....................................................................................................................150

Capitolul 17 ..................................................................................................................................... 11. Numele de domeniu ..................................................................................................................153

2. Serviciul de gzduire Web (Web hosting) ................................................................................1543. Organizarea i denumirea fiierelor ..........................................................................................1564. Transferul fiierelor .................................................................................................................. 156

3

7/31/2019 61070373-html

4/158

Capitolul 1

1. Ce este HTML?

HTML este o abreviere de la Hypertext Markup Language i reprezint structura oricrei pagini de Web. HTML nu este un limbaj de programare. Nu vei lucra aici cu variabile, expresiitipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descriseelementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alt pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML estmodul n care i comunicam browserului ce elemente dorim s introducem n pagina Web i careste aspectul acestora.

HTML nu este un limbajcase-sensitive , adic nu face distincia ntre literele mici i celemari(majuscule). Aceasta nseamn c indiferent cum scriem etichetele, cu litere mari sau cu litermici, ele vor fi corect interpretate de browser. Din acest motiv pe parcursul acestei lucrri vomutiliza o convenie de notaie n care etichetele (tag -urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru o mai bun difereniere i evideniere

acestora.Desigur c n documentele pe care le scriei putei respecta aceast convenie sau putei scriecu un singur tip de litere, dup cum v este mai uor.

Peste tot n cadrul textului, unde apar etichete, atribute sau valori ale acestora am folositcaractere Courier New pentru a diferenia elementele de limbaj de restul textului.

De asemenea, vei observa c, n exemplele prezentate, codul HTML este scrisindentat,adic aliniat la diverse nivele. Ca i n cazul etichetelor, acest lucru nu are importan pentru browser. Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uodiversele elemente pe care le includei n document. Totui, dac n cazul etichetelor putei opta pentru orice variant dorii n privina scrierii lor, indentarea este recomandat chiar i

programatorilor cu experien. Un cod neindentat este foarte greu de citit i de depanat, n cazuapariiei unor erori.

2. Coninut i aspect ntr-un document HTML

Pentru a realiza documente Web eficiente, cu impact asupra cititorului, i pentru a valorifica pe deplin puterea limbajului HTML, trebuie s inei seama de o idee fundamental: HTML estdestinat structurrii documentele i nu doar formatrii n vederea afirii lor.

HTML furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legatede fonturi (tipurile de caractere), de formatare a textului, de culori, etc. Desigur, aspectul formaeste important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilo prezentate.

Totui, nu aspectul formal, ci coninutul documentului primeaz. HTML conine numeroaseci de structurare a coninutului documentului fr a pune problema felului cum vor fi afiatelementele: titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite n limbajul HTML fr impune browserului s le afieze ntr-un anumit mod. Browserului i se las astfel posibilitatea de afia respectivele elemente n conformitate cu rolul pe care l au ele n structura documentului i nrespectnd regulile impuse de creatorul documentului HTML.

Marele avantaj al abordrii bazate pe coninut fa de cea bazat pe aspect rezid n faptul c paginile dumneavoastr vor fi vizualizate cu tipuri diferite de browsere, fiecare avnd versiundiferite.

4

7/31/2019 61070373-html

5/158

n abordarea bazat peaspect, dac browserul nu recunoate indicaiile de formatarespecificate, fie nu le execut, fie le execut eronat, astfel c structurarea paginii va avea de suferit.

n abordarea bazat peconinut, indiferent cum va alege browserul s execute indicaiile deformatare, semnificaia elementelor din pagin va rmne neschimbat.

De exemplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturicaractere cu stiluri variate: aldine (bold, sau ngroate), cursive (italice, sau nclinate), subliniateetc., un browser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care

afieaz restul textului, astfel c semnificaia lor n pagin i-ar pierde relevana.Pe de alt parte, dac vei folosi etichetele speciale pentru titluri, chiar daca browserul nu lerecunoate, are posibilitatea de a evidenia totui titlurile n cea mai bun manier pe care o are ldispoziie, astfel nct semnificaia lor pentru restul documentului se va pstra.

3. Editorul

Folosirea unui simplueditor de text.Cel mai cunoscut i accesibil este Notepad-ul din Windows.

Important!

Nu este recomandat s folosii un procesor de text complex cum este Microsoft Word, chiardac acesta poate salva documentele n format HTML (cu extensia.htm), deoarece la salvareadocumentelor Word-ul adaug automat la textul documentului dumneavoastr o mare cantitate dcod coninnd informaii lipsite de relevan care ncarc inutil documentul i mrete dimensiunilfiierului.

Folosirea unuieditor HTML.Acest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea

documentului din punct de vedere sintactic i chiar scriu secvene de cod pentru anumite element pe care dorii s le inserai n document.

Folosirea unuieditor WYSIWYG(What You See Is What You Get , n traducere liber "ceea cevezi la editare este ceea ce obii la vizualizare").

Un editor de tip WYSIWYG permite alegerea i formatarea, cu ajutorul mouse-ului, aelementelor pe care dorii s le includei n pagin: tabele, link-uri, formulare, putei stabili tipufonturilor, culorile, aranjarea textului n pagina. Pe msur ce un anumit element este inserateditorul scrie n mod automat codul HTML corespunztor, fr ca utilizatorul s fie nevoit s

intervin asupra lui. Totui, dac avei cunotine de HTML putei interveni la nivelul codului norice manier dorii, orice schimbare pe care o facei n cod, reflectndu-se automat n aspectu paginii.

Printre profesioniti persist o controvers n privina tipurilor de editoare care ar trebuifolosite pentru a edita documentele HTML. n esen, problema este aceasta: este mai bine s-construieti paginile folosind HTML "pur", adic scriind totul tu nsui, sau este de preferat sfoloseti un editor de tipul WYSIWYG? Editoare deosebit de puternice de acest tip: MacromediDreamweaver, Microsoft Front Page, Coffe Cup ca s dm numai cteva exemple, par a nclinadefinitiv balana n favoarea acestui tip de editare. Ele ofer facilitai avansate de editare a paginiinclusiv posibilitatea de a crea pagini dinamice i de a include script-uri JavaScript sau applet-urJava. Cu ajutorul lor se pot construi site-uri extrem de complexe.

5

7/31/2019 61070373-html

6/158

Elemente de baza (taguri).

Defineste un fisier in format Web

Antetul documentului

Tilul documentului

Corpul paginii HTML

BGCOLOR =culoare Culoarea de fond a paginii

TEXT=culoare Culoarea textului pe paginii

LINK=culoare Culoarea legaturiilor nevizitate din paginii

VLINK=culoare Culoarea legaturiilor vizitate din paginii

ALINK=culoare Culoarea legaturiilor pe durata clicului exacutat de utilizator

BACKGROUND =url Imaginea de fond pentru pagina

Paragraf Nivel de subtitlu al documentului (n = 1-6)

Specifica atribute ale textului incadrat

SIZE=n Dimensiunea textului este 1-7

FACE="a,b" Specifica fontul:a , daca este disponibil, saub

COLOR= s Culoarea textului: fie un nume de culoare , fie o valoare RGB

Linie noua

Informatie preformatata Comenatriu HTML

Centreaza materialul in pagina

Rigla orizontala

SIZE= x Inaltimea riglei in pixeli

WIDTH= x Latimea riglei in pixeli sau in procente

NOSHADE Dezactiveaza afisarea umbrei pentru rigla orizontala

ALIGN= x Alinierea riglei orizontala in pagina (left, center, right)

COLOR= x Culoarea riglei orizontale(numai pentru IE)

Marcaj de tip ancora

HREF=url Referinta hipertext

HREF=#nume Referinta catre o ancora interna

Name=nume Definitia unei ancore interne

6

7/31/2019 61070373-html

7/158

Elemente pentru liste .

Descriere definitie

Lista de tip definitie

Termen de definitie

Element de lista

7/31/2019 61070373-html

8/158

7/31/2019 61070373-html

9/158

COLS= x Specifica numarul de coloane ale unui tabel

Defineste un set de definitii de coloane cu ajutorulmarcajului

Defineste latimea unei coloane exprimata in pixeli

Defineste titlul tabelului

Defineste corpul tabelului

7/31/2019 61070373-html

10/158

HSPACE= x Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli)

VSPACE= x Spatiul suplimentar pe verticala din jurul imaginii (in pixeli)

Elemente pentru formulare.

Formular HTML activACTION=url Programul CGI de pe serverul care receptioneaza datele

METHOD=metoda Modul in care datele sunt transmise serverului(GET sau POST)

7/31/2019 61070373-html

11/158

ACCESKEY=c Specifica tasta care asigura comanda rapida de la tastaturaasociata unui anumit element

DISABLED Elementul este inactiv, dar este afisat pe ecran

READONLY Elementul este afisat pe ecran dar nu poate fi editat

Elemente avansate.

Specifica informatii referitoare modelul de stiluri

TYPE=val Tipul modelului de stiluri. De regula "text/css"

Include un script de regula Javascript, in pagina Web

LANGUAGE=limbaj Limbajul utilizat

EVENT=eveniment Eveniment care declanseaza executia unor scripturi specifice

FOR=numeobiect Numele obiectului din pagina asupra caruia actioneaza scriptul

Caractere speciale romneti

11

7/31/2019 61070373-html

12/158

Structura unui document HTML

1. DOCTYPE

Un DOCTYPE descrie un DTD ( document type definition). Pentru ca browserele sa nu aiba probleme la afisarea paginilor s-a introdus declaratia tipului de document care specifica browserulusi validatoarelor ce grupe de etichete si atribute foloseste acea pagina si cum trebuie ele interpretateTipul de document se declara la inceputul paginii inainte de tag-ul head. Deoarece foarte multalume nu da atentie acestei declaratii (din diferite motive: unii sunt invatati cu un fel de exprimarealtii nu pot integra un cod care il folosesc incontinuu, etc) pot aparea (si sigur apar) problemsi/sau diferente de afisare a paginii intre diferite browsere.

Versiune DTD declaratia DOCTYPEHTML 2.0 DTD !DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">HTML 3.2 DTD

HTML 4.01 Strict, Transitional,Frameset

XHTML 1.0 Strict, Transitional,Frameset

XHTML 1.1 DTD

12

7/31/2019 61070373-html

13/158

Pentru a verifica corectitudinea site-ului vostru puteti accesahttp://validator.w3.org/. In cazul incare apar erori in raport ori aveti erori de sintaxa ori a-ti folosit tag-uri care nu sunt compatibile cdeclaratia de document.

Important !

Introduceti n fiecare pagina instructiunea standard care este recunoscuta de browsere:

2. . Etichete de structur

Structura general a unui document HTML este urmtoarea:

Documentul este delimitat de etichetele i este format din :

antet (head ) - este delimitat de etichetele i conine titlul documentului precum i alte informaii privind documentul. n antetul documentului se mai insereaz i anumitsecvene de program (script-uri), care se execut la ncrcarea documentului n browser .

corp (body) - care delimiteaz coninutul propriu-zis al documentului i este inclus ntreetichetele

Semnificaia etichetelor care fac parte din structura oricrui document HTML:

ntre aceste etichete este inclus ntregul document HTML. Ele comunic browserului unde

ncepe i unde se termin documentul. ntre aceste etichete sunt incluse titlul, precum i alte informaii despre documentul HTML

Aceste elemente, numitemetatag -uri sunt deosebit de importante pentru ca pagina s fie ct mai bine cotat de ctre motoarele de cutare. Metatag-urile i antetul n ansamblul su nu sunt vizibil pentru vizitator n pagina Web. Totui, la fel ca ntreg codul HTML al paginii, antetul poate fvizualizat selectnd din meniul browserului opiuneaView > Source.

Stabiletetitlul documentului HTML.Titlul documentului este deosebit de important deoarece este unul din criteriile folosite demotoarele de cutare pentru indexarea paginii. Prin urmare, strduii-v s gsii un titlu care s

descrie ct mai corect i complet coninutul paginii dumneavoastr.

13

http://validator.w3.org/http://validator.w3.org/

7/31/2019 61070373-html

14/158

Exemplul 1.1

Pagina mea WebSalut Cneazule! Aici voi pune mai tarziu continutul!

Dac dorii s scriei un text pe mai multe linii n pagin, va trebui s folosii eticheta
(de la line break ), care face trecerea pe o linie noua. Eticheta
este de tipempty , deci nu areetichet de nchidere. ncercai exemplul de mai jos, n care afiarea textului documentului se vface pe dou rnduri.

Exemplul 1.2

Pagina mea WebSalut Cneazule! Aici voi pune mai tarziu continutul!.
Urmatoarea va fi cu mult mai cool

Important !

Structura documentelor HTML este n realitate mult mai complex, este recomandat ca, pemsur ce procesul de editare avanseaz, s introducei comentarii n text pentru a face aceaststructur ct mai explicit. Comentariile nu sunt vizibile pentru browser , ele servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului HTML.

Comentariile constau n scurte informaii, explicaii la elementele de cod utilizate, etc., fiinddeosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului.

Comentariile se introduc prin includerea textului ntre etichetele de mai jos.

Iat dou exemple:

3. Folosirea corect a etichetelor

14

7/31/2019 61070373-html

15/158

Etichetele container se compun, aa cum am vzut mai devreme, din perechi de etichete:etichet de deschidere i de nchidere .

La construirea unei pagini Web complexe vei fi pus adesea n situaia de a folosi mai multeetichete pentru aceeai secven de text.

De pild, vei dori s atribuii unui text dou proprieti: litere aldine sau ngroate (bold ) itext centrat n pagin. Pentru aceasta va trebui s utilizai dou perechi de etichete, care descriu celdou proprieti, n mod simultan, metod numitimbricarea etichetelor (nested tags ), ca nexemplul de mai jos:

Text cu aldine si centrat

Este foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie plasate n mod corect.

n aceast situaie, principiul de utilizare este: "Last In - First Out" (LIFO). Acest lucrunseamn c ultima etichet deschis trebuie s fie prima care se nchide.

Important !

Trebuie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul LIFO. n cazcontrar, secvena de cod din pagin nu va funciona corect.

Iat un exemplu generic de folosire corect a dou etichete:

Etichete utilizate corect

i un altul de folosire incorect:

Etichete utilizate incorect

15

7/31/2019 61070373-html

16/158

Capitolul 2

Culori

Culoarea reprezint un caracteristic extrem de important a unei pagini Web. Utilizat cugrij i msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i maatractiv, iar textul mai uor de parcurs. Pe de alt parte, utilizarea excesiv sau inadecvat aculorilor poate transforma un text de calitate ntr-un fel de caleidoscop obositor, greu de urmrit, care i va determina pe muli vizitatori s renune la a-l mai parcurge.

Atributele etichetei Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor:

bgcolor- culoarea fundaluluitext - culoarea textuluilink - culoarea linkurilor vlink - culoarea linkurilor vizitatealink - culoarea linkului activ

1. Culoarea fundalului

Pentru a stabili culoarea fundalului unei pagini folosim atributulbgcolor(background color )al etichetei , cruia i atribuim o valoare astfel:

Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fienumele ei.

Exemplul 2.1

Culoare fundaluluiPagina cu fundal verde

2. Culoarea textului

Exemplul 2.2

16

7/31/2019 61070373-html

17/158

Culoare textuluiText albastru si rosuTextul din aceasta pagina este albastru cu mici exceptii

3. Culoarea legturilor

Pentru a schimba culorea se folosesc urmtoarele atribute ale etichetei :

link pentru legturialink pentru legturile activevlink pentru legturile vizitateconform sintaxei:

sintaxei:

Documentul din Exemplul 2.3 creeaz o pagin n care textul este negru iar legturile auculoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n exemplu estfolosit eticheta i atributul sauhref , care vor fi prezentate pe larg n capitolul despre legturi.

Exemplul 2. 3

Culoarea legaturilorLegaturi colorate

Legatura catre primul exemplu

4. Alegerea culorilor

Sunt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o paginWeb. Primul i cel mai important este acela de a face coninutul uor de citit. (Litere negre pe fondalb)

17

7/31/2019 61070373-html

18/158

Dei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr-o pagin Web litereleroii pe fond albastru nu arat bine i sunt greu de citit. O alt combinaie nefericit este cea cufondul negru sau de culoare foarte nchis i textul de culoare alb.

n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psihologiaculorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei.

Iat cteva dintre sentimentele pe care le sugereaz culorile:

Rou- agresivitate, pasiune, putere, vitalitateRoz- feminitate, inocen, moliciunePortocaliu- amuzament, veselie, cldur, exuberanGalben- sentimente pozitive i cordialitateVerde - linite, sntate, prospeimeAlbastru - autoritate, demnitate, securitate, ncredereViolet- sofisticare, spiritualitate, mister Maro - utilitate, legtura cu pmntul, bogieAlb - puritate, ncredere, modernitate, rafinamentGri - sobrietate, autoritate, sim practicNegru- seriozitate, distincie, hotrre

Alegerea culorilor pentru site trebuie s fie n concordan cu tema site-ului i s subliniezemesajul su. Astfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele luminoase, n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sun potrivite culori sobre i care sugereaz seriozitate i ncredere.

18

7/31/2019 61070373-html

19/158

Capitolul 3Fonturi

Un font este caracterizat de urmtoarele atribute: culoare(stabilit prin atributulcolor ); tipul sau stilul(stabilit prin atributulface ); mrimea (definit prin atributulsize ); mrimea n puncte tipografice(stabilit prin atributulpoint-size ); grosime(definit prin atributulweight ).

Toate aceste atribute aprin etichetei, care permite inserarea de blocuri de texte personalizate.

1. Formatarea caracterelor

Eticheta care se folosete pentru a da unui caracter sau unui ir de caractere (unui text)aspectul dorit este eticheta container .ntre eticheta de nceput i cea de sfrit se insereaz textul sau caracterul ale crui caracteristicidorim s le stabilim.

Tag-uri pentru formate de text :

text Text ingrosat text Text inclinattext Text subliniat text Afisaza textul in pozitia subscript text Afiseaza textul in pozitia superscripttext blink text Text taiattext

7/31/2019 61070373-html

20/158

Exemplul 3.1

Niciodat nu spune niciodat S analizm cele trei atribute ale etichetei :

size- dimensiunea textului - poate fi un numr ntre 1 i 7 (dimensiuni absolute), ntre -1 i -3sau ntre +1 i +4 (dimensiuni relative, adic raportate la dimensiunea deja existent a fontului)

Dimensiunea prestabilit (default ) a fonturilor este 3.Dac dimensiunile menionate depesc intervalul 1-7, browserul rotunjete automat valorile pentru a le ncadra n acest interval.

color - culoarea textului - este culoarea cu care va fi afiat textul prezent ntre etichete (nexemplul nostru, " Lumea nu este a celor modeti, ci a celor energici" ).

face- tipul de font - determin tipul de font care va fi utilizat la afiarea textului.Tipurile cele mai uzuale sunt:ArialTahoma

HelveticaTimes New RomanCourier Verdana

Atributul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin virgul. Precizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu estinstalat pe calculatorul celui care viziteaz pagina, i se face ca n exemplul de mai jos.

n aceast situaie browserul va alege singur din list primul tip de font pe care l recunoate,ignorndu-le pe urmtoarele.

Important! La stabilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au

instalate pe computerele lor acelai set de caractere ca i dumneavoastr. Din acest motiv, folosireaunor caractere exotice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalaacel font. Din acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt celemenionate mai sus.

n Exemplul 3.2 vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unutext.

Exemplul 3. 2

fonturi1

Manual HTML
Manual HTML
Manual HTML

20

7/31/2019 61070373-html

21/158

Exemplul 3. 3

fonturi2Am ajuns la lectia despre fonturi a Manualului HTML

Caracteristicile textului din pagin au fost setate cu ajutorul etichetei . Pentru afia simultan o parte din text ntr-un mod diferit am folosit eticheta .

Dei eticheta face parte din standardul HTML 3.2, atributele sale nu suntrecunoscute de browserele Netscape. Ca urmare, acesta va afia textul utiliznd propriile setri prestabilite (default ), ignornd atributele menionate n eticheta .

Urmtorul exemplu (Exemplul 3.4) afieaz un cuvnt avnd literele de mrimi diferite

Exemplul 3.4

fonturi3GRATUI

T

2. Accentuarea textului

a) Eticheta face fonturile mai mari dect dimensiunea curent.

Text cu caractere mariText cu caractere mari

b) Eticheta face fonturile mai mici dect dimensiunea curent.Text cu caractere mici

21

7/31/2019 61070373-html

22/158

Text cu caractere mici

c) Etichetele (bold ) i realizeaz scrierea cu caracterealdine, sau ngroate (bold ).

Text ingrosat 1

Text ingrosat 1

Text ingrosat 2

Text ingrosat 2

d) Etichetele (italic ) i (emphasized ) realizeaz scrierea cu caractereitalice.

Text inclinat 1Text inclinat 1

Text inclinat 2Text inclinat 2

e) Etichetele i realizeaz scrierea textului tiat de o linieorizontal.

Text taiat 1Text taiat 1

Text taiat 2Text taiat 2

f) Eticheta (underlined ) realizeaz sublinierea textului.

Text subliniatText subliniat

Important !

Utilizarea textului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu unlink.

g) Eticheta ( superscript ). Prin intermediul ei se pot insera n documentcaractere/texte plasate deasupra nivelului liniei de scriere.

Apa ingheata la 0 0CApa ingheata la 00C

h) Eticheta ( subscript ). Prin intermediul ei se insereaz texte plasate subnivelul liniei de scriere.

Coordonatele X1, Y2Coordonatele X1, Y2

22

7/31/2019 61070373-html

23/158

Este de remarcat faptul c etichetele i sunt executate diferit n diverse browsere.

Astfel, n Netscape face textul mai mare cu un punct iar mai mic cu un punct dect dimensiunea curenta.

n Internet Explorer, afieaz textul cu fonturi de dimensiune 4 iar cufonturi de dimensiune 2. Etichetele i pot fi repetate pentru a obine un efect ma

accentuat.Exemplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete.Exemplul 3. 5

fonturi4Etichete care schimba aspectul textului

Exemplul 3. 6

fonturi 5Acesta este font Arial
Acesta este font Algerian
Acesta este font Courier

Acesta este font Vivaldi

Acesta este font Garamond
Acesta este font Modern

Exemplul 3. 7

Titlu documentului

< STRIKE > Text taiat
Prezinta textul intr-un font mare

23

7/31/2019 61070373-html

24/158

Prezinta textul intr-un font mic
Afiseaza textul in pozitia subscript normal Afiseaza textul in pozitia superscript

Exemplul 3. 8

Titlu documentului

O singura marire- normal -

O singura micsorare
Bold- Italic - Subliniat - Colorat
Accentut - Strong -Tele type

< CITE> 1996, Mihnea GEORGESCU

Exemplul 3. 9

Prietenie

Prietenia e un cuvant pe care multi il rostesc,dar putini il inteleg..Prietenie inseamna sa fii alaturi de prieteni nu cand au dreptate, ci cand gresesc.
Prietenia nu o poti lega in lanturi,insa ea te leaga.
Valoarea unui prieten nu o cunosti decat atunci cand il pierzi!!CNEAZU
Romania
Telefon

24

7/31/2019 61070373-html

25/158

Capitolul 4

Formatarea textului

Etichetele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor cla felul n care poate fi amplasat un text n cadrul paginii. nainte de a discuta n amnunt despr

etichetele care permit formatarea textului, s facem cteva precizri privind felul cum sunt afiattextele.

Dup cum tii, fiierele HTML sunt fiiere text. Aceasta nseamn c atunci cnd salvaifiierul respectiv, el este salvat numai ca text, deci browserul nu poate recunoate i executa dectstrict acele comenzi prevzute de etichetele HTML. Din acest motiv, trecerea la un rnd nou, care editorul de text se realizeaz prin apsarea tastei ENTER, nu este recunoscut de browser .

Un alt aspect este plasarea n text a spaiilor. Chiar dac vei introduce spaii suplimentarentre cuvinte atunci cnd scriei documentul HTML n editorul de text, browserul va afia invariabilun singur spaiu ntre dou cuvinte.

Acesta este motivul pentru care fiecare dintre aceste elemente de formatare a textului are oetichet proprie care indic browserului cum anume s fac afiarea.

1. Trecerea la un rnd nou

Trecerea la un rnd nou se realizeaz cu ajutorul etichetei
(de la line break ). Eticheta
nu este o etichet container. Ea are rolul de a comunica browserului c texul care urmeazdup etichet va fi afiat pe un rnd nou aa cum rezult din Exemplul 4.1.

Exemplul 4. 1

Formatarea textuluiSalut
Ma numesc Mihnea
Invat sa construiesc o pagina Web

25

7/31/2019 61070373-html

26/158

Eticheta
admite atributulclear care poate lua valorile left, right sau all.n mod normal, la ntlnirea etichetei
linia curent de text este ntrerupt i se face

trecerea la o linie nou, ca i la acionarea tastei Enter ntr-un editor de text. Exist ns situaii cnddorim ca linia s fie afiat lng un anumit element (o imagine, sau un tabel, de exemplu) care blocheaz partea din stnga sau din dreapta a liniei.n aceste cazuri putem folosi atributul clear al etichetei
ca n Exemplul 4.2

Exemplul 4. 2

text2

Acest text va fi afisat intre imagine si marginea dreapta a documentului.
Acest text va fi afisat sub imagine, aliniat stanga. Intre acest text si dreapta

imaginii va exista un spatiu gol.

2. Titlurile (Headings)

Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor , , ,, , . Ele sunt etichete container, deci necesit eticheta corespunztoare denchidere.Eticheta definete titlul de dimensiunea maxim, iar pe cel de dimensiune minim.

Important ! Dei standardul HTML nu interzice utilizarea n orice ordine a titlurilor, este de preferat ca

acestea s fie folosite n ordinea "normal", progresiv, fr a sri peste vreun nivel (de pild de laH1 direct la H5), pentru a evita eventualele probleme la convertirea textului n alte tipuri de fiiere

n Exemplul 4.3 vom folosi toate cele ase etichete pentru titluri pentru a face o comparaie cudimensiunea standard a textului.

Exemplul 4. 3

Titluri

26

7/31/2019 61070373-html

27/158

Titlu H1Text normalTitlu H2Text normalTitlu H3Text normalTitlu H4Text normalTitlu H5Text normalTitlu H6Text normal

Exemplul 4. 4

Titluri

TitluriTitlu de marime 1 aliniat in centruTitlu de marime 2 aliniat la dreaptaTitlu de marime 4 aliniat la stanga

3. Paragrafele

Trecerea la un nou paragraf n cadrul textului se realizeaz cu ajutorul etichetei

.Aceast etichet comunic browserului s insereze o linie liber n text i s nceap o nou linie.Eticheta

este o etichet container dar prezena etichetei de nchidere

este opional nanumite situaii. Dac ea este prezent, indic browserului s insereze o linie liber i dup bloculde text cuprins ntre cele dou etichete.

Eticheta

admite atributulalign cu cele trei valori ale acestuia: left, center i right, care permit alinierea textului la stnga, centrat respectiv la dreapta.Exemplul 4.5 ilustreaz cele trei modaliti de aliniere a textului.

Exemplul 4. 5

Paragrafele

27

7/31/2019 61070373-html

28/158

Paragrafe

Acesta este un paragraf aliniat la stanga.

Acesta este un paragraf aliniat la dreapta.

Acesta este un paragraf aliniat la centru.

Din Exemplul 4.5 care red aspectul paginii descrise n exemplu se poate observa c

alinierea la stnga este implicit (nu mai trebuie specificat align="left"). Se mai poate observa c na fost folosit eticheta de nchidere a paragrafelor, deoarece la ntlnirea unei noi etichete

vechiul paragraf se consider nchis. Totui, prezena sau absena etichetei de nchidere a paragrafului atunci cnd este prezent atributul align trebuie stabilit cu grij, pentru a nu obinerezultate neconforme cu dorinele dumneavoastr.

n Exemplul 4.6 dorim s aliniem un nou paragraf n dreapta paginii, iar textul de pe rndulurmtor paragrafului, care este introdus prin eticheta
, s fie scris normal, de la captul dinstnga al paginii

Exemplul 4. 6

ParagrafeleParagrafeAcest text este scris normal, incepand e la marginea din stanga.

Acest text este aliniat la dreapta
Unde este afisat acest text?

Din Exemplul 4.6 se poate observa c afiarea nu s-a fcut conform inteniilor noastre.Motivul este faptul c eticheta

nu are eticheta de nchidere

, i prin urmare efectul su se prelungete pn la ntlnirea unei alte etichete

.

Dac vei nchide paragraful n mod explicit cu ajutorul etichetei de nchidere, nainte detrecerea la o linie nou, efectul asupra textului va fi cel dorit.

Dei aparent etichetele
i

au un efect asemntor, i anume trecerea la o linie nouele nu sunt executate la fel.
comunic browserului unde se ncheie o linie, n vreme ce

iimpune s lase o linie liber i s treac la un nou paragraf. Dac folosim atributul align al etichete

n situaiile cnd dup paragraf este introdus un alt element n pagin este recomandatnchiderea n mod explicit a etichetei respective.

4. Preformatarea textului

Aa cum am precizat la nceputul capitolului, atunci cnd editai documentul HTML cuajutorul unui editor de text, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de text browserul va afia textul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor nfuncie de mrimea ferestrei. Cu alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignoratde ctre browser . Aa cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutoruletichetei
iar inserarea unei linii libere se face cu ajutorul etichetei

.

28

7/31/2019 61070373-html

29/158

7/31/2019 61070373-html

30/158

Aa cum am vzut mai sus, afiarea textului centrat n pagin se poate face cu ajutoruletichetei

avnd atributul align setat la valoarea "center".

O alt posibilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluznd textuntre etichetele

.Eticheta este o etichet container, prezena eticheteide nchidere fiind obligatorie.

Exemplul 4.8 realizeaz centrarea unui text.

Exemplul 4. 8

text8Centrarea textului

Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta esteun text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centratAcesta este un text centrat.

6. Afiarea textului pe o singur linien cazul cnd se dorete afiarea unui text pe o singur linie, chiar dac acest lucru nseamn

depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de text ntreetichetele .

Aceast etichet mpiedic browserul s limiteze lungimea liniei la dimensiunea ferestrei.Exemplul 4.9 ilustreaz folosirea etichetei

Exemplul 4. 9

text9Textul pe o singura linie Acesta este un text care va fi afisat pe o singura linie, chiar daca depaseste dimensiunile unei

ferestre obisnuite. Puteti verifica acest fapt prin reducerea dimensiunilor ferestrei browserului.

30

7/31/2019 61070373-html

31/158

7. Blocul

O alt modalitate de delimitare i de formatare a unui bloc de text este folosirea eticheteicontainer . Prezena etichetei de nchidere este obligatorie.

Eticheta realizeaz divizarea unui document HTML n seciuni distincte, diviziune ncare pot fi incluse, pe lng text, i alte elemente: legturi, imagini, formulare. Ca i n cazuetichetei pentru introducerea paragrafelor, eticheta admite atributulalign, pentru aliniereatextului. Valorile posibile ale acestui atribut, deja cunoscute, sunt:

left - aliniere la stngacenter - aliniere la centruright - aliniere la dreapta

Alinierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse blocul . Blocul admite i atributulnowrap, care interzice ntreruperea rndurilor dectre browser .

n documentul descris n Exemplul 4.10 este ilustrat utilizarea acestei etichete.

Exemplul 4. 10

Blocul DIVBlocul divAceasta linie este o linie de text normala.Aceasta este prima sectiune a textului, aliniata dreapta.
Aceasta este a doua sectiune a textului, aliniata central.
Aceasta este a treia sectiune a textului, aliniata stanga.

8. Linii orizontale

31

7/31/2019 61070373-html

32/158

ntr-o pagina Web pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale paginii sau de a mbunti aspectul ei estetic. Acest lucru se face cu ajutorul etichetei.Eticheta nu este o etichet container deci nu exist o etichet de nchidere.

Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei :

align- permite alinierea liniei orizontale. Valorile posibile sunt left, center i rightwidth - specific lungimea liniei - lungimea poate fi stabilit n pixeli sau n procente din

limea ecranului.

size- specific grosimea liniei, exprimat n pixelicolor- permite definirea culorii liniei

Atributele etichetei sunt ilustrate n Exemplul 4.11.

Exemplul 4. 11

Linii orizontale Linii orizontale Linie aliniata la stanga, lungime 100%, grosime 2 Linie aliniata in centru , lungime 50%, grosime 5 pixeli.Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12 pixeli , de culoare rosie.

n exemplul anterior se poate observa c simpla prezen a etichetei fr nici un fel deatribute duce la afiarea unei linii predefinite, de lungime egal cu 100% din pagin i grosimeaegal cu 2 pixeli.

n exemplul 4.12 vom ilustra modul n care eticheta aliniaz elementele coninute ninteriorul su, n cazul nostru text i linii orizontale.

Exemplul 4. 12

Lini orizontaleLinii orizontaleLinia de mai jos este aliniata la stangaLiniile de mai jos sunt aliniate la centru cu ajutorul blocului DIVLinii aliniate la centru

32

7/31/2019 61070373-html

33/158

9. Inserarea unei adrese potale

Dac ntr-o pagin Web trebuie inclus o adres potal, atunci putem folosi etichetaurmtoare: .Eticheta este o etichet logic i are drept efect, n cele mai multe browsere , afiareatextului cu caractere italice.

n Exemplul 4.13 este inserat n pagin o adres.Exemplul 4. 13

Adresa postala Adresa Adresa firmei noastre esteGoldenWeb Consult
Str. Paradisului, Nr. 1
Bucuresti

10. Inserarea unui citat

Pentru a insera un citat ntr-un text se pot folosi dou etichete, n funcie de dimensiuneacitatului.

Astfel, dac citatul depete cteva linii, se folosete eticheta.

Efectul acestei etichete este afiarea indentat a textului cuprins ntre eticheta de nceput i cede sfrit (n majoritatea browserelor) sau afiarea acestuia cu caractere italice (rareori).

Dac dorim ca ntr-un text s citam un termen, titlul unei lucrri sau s dm o referin, puteminclude textul respectiv ntre etichetele .n cele mai multe dintre browsere , textul inclus ntre etichetele va fi afiat cu

caractere italice.

Exemplul 4.14 ilustreaz modul de folosire al celor dou etichete.

Exemplul 4. 14

33

7/31/2019 61070373-html

34/158

Inserarea unui citatInserarea unui citatTextul de mai jos este un citatProbabilitatea ca o felie de paine unsa cu unt sa cada pe covor cu fata unsa in jos este direct

proportionala cu valoarea covorului

Citatul de mai sus face parte din Legile lui Murphy

11. Inserarea caracterelor speciale

Dei este impropriu s numim caracterul "blank" sau space un caracter special, avnd nvedere frecvena cu care este folosit, totui acesta, ca i alte caractere, este inserat n pagin cuajutorul unei comenzi speciale: comanda& (comanda ampersand).

Aa cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentulHTML, browserul le va ignora i va afia cuvintele cu un singur spaiu ntre ele. Pentru a foraintroducerea spaiilor suplimentare se folosete comanda (no break space ).

Important ! Comanda ncepe cu simbolul& (ampersand) i se termin cu; (punct i virgul).

n Exemplul 4.15 este ilustrat modul cum pot fi spaiate cuvintele folosind comanda

Exemplul 4. 15

text15Inserarea caracterelor specialeCuvintele din acest &nbsp

text sunt despartite de&nbsp grupuri de trei &nbspspatii.

Dup cum observai din Exemplul 4.15 cuvintele sunt desprite prin trei spaii n loc deunul singur. Putei aduga oricte spaii dorii n acest mod. De asemenea, pentru a indenta un text,

34

7/31/2019 61070373-html

35/158

7/31/2019 61070373-html

36/158

Nu folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este Times New RomanDei este tipul cel mai utilizat pentru publicaiile tiprite, textele scrise cu Times New Romansunt mai greu de citit de pe monitor. Preferai tipurile Arial, Verdana, Helvetica.

Nu folosii numai litere mari (majuscule). Textele scrise cu majuscule sunt mai greu de citit.

Nu facei exces de caractere aldine (ngroate,bold ). Limitai-v la a accentua cuvinte sau poriuni reduse din text. De asemenea, nu folosii caractere cursive (nclinate, sau italice) nexces.

Nu folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. Folosirea unui mare numde fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu decitit. Folosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aibinstalate pe computerul propriu, astfel c textul va fi afiat de browser cu fonturile prestabilite.

Nu aranjai textul n pagin pe dou coloane. Aceasta este o practic obinuit n ziare i revistdar nu este potrivit ntr-o pagin Web deoarece foreaz vizitatorul ca odat ajuns la baza paginii s o deruleze din nou pentru a citi ce-a de-a dou coloan.

Este bine s folosii fiecare etichet n scopul pentru care a fost ea definit. Nu folosii etichetelde titlu pentru a accentua anumite pri ale textului care nu sunt titluri. Nu folosii eticheta pentru a insera alte texte dect adrese sau eticheta pentru a realizascrierea cu caractere italice a textului.

Motoarele de cutare indexeaz paginile Web i n funcie de elementele (etichetele) care sunincluse n ele iar folosirea lor neadecvat conduce la o indexare eronat a paginii dumneavoastr.

Multe motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc oschi a paginii.

Dac vei folosi etichetele de titlu pentru a accentua anumite pri ale textului (operaie pe caro putei realiza n mod corect folosind eticheta ) vei oferi informaii eronate motoarelor dcutare. n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de ceiinteresai.

Important!

Nu uitai c paginile vor fi publicate pe Web, unde, pentru a-i atinge scopul, adic pentru a fcitite, trebuie mai nti descoperite de cititori, cel mai frecvent prin intermediul motoarelor decutare.

36

7/31/2019 61070373-html

37/158

Capitolul 5

Legturi (link-uri)

Legturile (link -urile) reprezint, poate, partea cea mai important a unei pagini Web. Eletransform un text obinuit n hypertext - un nou tip de text, diferit de cel din clasicele pagini dcarte, care permite trecerea rapid de la o informaie aflat pe un anumit computer la alt informaimemorat pe un alt computer localizat oriunde n lume.

1. Adresa URL

Pentru a stabili o legtur cu o alt pagin (un alt fiier) trebuie s specificmadresa URLaacestuia. URL este un acronim, de laUniform Resource Locator , i reprezint adresa de identificarea unei resurse (a unui fiier) aflat pe calculatorul propriu sau pe orice alt calculator din lumeconectat la Internet. O adres URL const dintr-un ir de caractere care identific n mod unic oanumit resurs, oferind informaii despre numele serverului pe care este stocat acea resurs precum i despre localizarea ei.

Exist mai multe etichete HTML care folosesc adresa URL drept valoare pentru anumiteatribute: etichetele care introduc legturi, imagini sau formulare. Toate acestea folosesc aceeasintax a adresei URL pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia.

Sintaxa general a unei adrese URL este:

schema://server_gazda:port/calea_catre_fisier

unde:schema - reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi HTTP,

FTP, Gopher, Telnet, etc.server_gazda - reprezint identificatorul serverului pe care este gzduit fiierul respectiv.

Acest identificator poate fi adresa IP a serverului sau numele su.port - reprezint numrul portului de comunicaie prin intermediul cruia browserul se

conecteaz la server. Serverele dein mai multe astfel de porturi, fiecare servind unui alt tip decomunicaie: HTTP, FTP, pot electronic, etc. Portul prestabilit n cazul transferului prin HTTPare numrul 80. Numrul portului trebuie precizat numai n cazul cnd acesta este diferit de 80.

calea_catre_fisier- reprezint localizarea ierarhic a fiierului n sistemul de directoare de peserver. Aceasta const ntr-unul sau mai multe nume desprite prin caracterul "/" ( slash )

2. Adrese absolute i adrese relative

37

7/31/2019 61070373-html

38/158

Pentru a putea localiza un fiier n structura ierarhic de directoare, n scopul de a stabili olegtur ctre el, se poate folosi adresareaabsolutsau adresarearelativ.

Adresa absoluta unui fiier conine calea precis i complet ctre fiierul respectiv pornindde la vrful ierarhiei de directoare:

C:/WEBROOT/CULORI/culori.html

Fiierul culori.html se afl plasat pe disculC: , n directorulWEBROOT, subdirectorulCULORI.

Adresa relativa unui fiier precizeaz poziia acestuia n raport cu documentul HTML din careeste apelat. Vom reveni ceva mai jos asupra acestui subiect.

3. Stabilirea legturilor

Pentru a insera legturi ntr-un document HTML folosim eticheta .Eticheta este o etichet container, prezena etichetei de nchidere fiind obligatorie.

Atributul obligatoriu al etichetei estehref ( Hypertext Reference ) care primete ca valoareadresa URL a fiierului cu care dorim s stabilim legtura. Acest fiier poate fi un documenHTML, o imagine sau un fiier de alt tip. Documentul HTML n care este prezent legtura senumetesurs iar fiierul ctre care este fcut legtura se numeteint. Sintaxa etichetei este urmtoarea:

text sau imagine

ntre etichetele i poate fi plasat un text obinuit sau o imagine. n mod prestabilittextul inclus ntre etichetele este afiat subliniat i de culoare albastr iar imaginile au unchenar de culoare albastr. Folosirea etichetei imbricat cu etichete de formatare a textuluifonturi, liste sau tabele se face plasnd eticheta n interiorul acestora.n acest sens, standardul HTML considerincorect o construcie ca aceasta:

n funcie de localizarea intei (a resursei referite de legtur) putem clasifica legturile astfel:

legturi n cadrul aceleiai pagini (ancore)legturi ctre o pagin aflat n acelai folder legturi ctre o pagin aflat n alt folder

legturi ctre pagini externe

4. Ancore - legturi n cadrul aceleiai paginiPentru a plasa o ancor sunt necesare dou elemente:

1. Punctulspre care dorim s facem legtura.Acesta se definete insernd n punctul din pagin dorit (de obicei n dreptul unui anumit

element din pagin: un titlu, o imagine, o alt legtur, un tabel, etc.) eticheta , nsoit deatributulname care primete ca valoare un nume de identificare atribuit ancorei (de exemplu"nume_ancora" ). Prin urmare, identificarea punctului spre care se face legtura se realizeaz astfel

38

7/31/2019 61070373-html

39/158

7/31/2019 61070373-html

40/158

ELEMENTELEMENT

n mod normal, eticheta fiind o etichet container, ntre etichetele de deschidere i denchidere trebuie s figureze un text. Totui, n exemplul de mai sus, dorind s inserm o ancor dreptul titlului, am folosit cea de-a doua construcie:

Ancore definite in acelasi documentMotivul este acela c este considerat o practic incorect includerea etichetelor de titlu ntre

etichetele i .Se poate utiliza i construcia urmtoare:

Ancore definite in acelasi document5. Legtura ctre o pagin aflat n acelai director (folder)

Pentru a realiza o legtur ctre o pagin aflat n acelai director se procedeaz astfel:

text explicativ

unde:href reprezint atributul care stabilete calea ctre inta cu care se face legtura. Dac fiieru

int este n acelai director, atributul primete ca valoare chiar numele fiierului.text explicativ - reprezint textul pe care se face click cu mouse-ul pentru a activa legtura

(De exemplu"Click aici" ). Acest text este afiat diferit fa de restul textului - n general, subliniat i de

culoare albastr.

n Exemplul 6.2 este realizat o legtur reciproc ntre dou pagini aflate n folderul de lucru(webroot).

Exemplul 5. 2

legatura2Pagina 1

Link catre pagina 2

Salvai acest exemplu cu numelelegatura2.html iar exemplul urmtor (Exemplul 6.3) cunumelelegatura3.html.

Exemplul 6. 3

legatura3

40

7/31/2019 61070373-html

41/158

Pagina 2 Link catre pagina 1

La fel cum ai procedat i pn acum, deschidei una dintre cele dou pagini cu browserul itestai funcionarea legturii dintre ele.

Ambele documente HTML trebuie salvate n acelai folder. Vei observa c atunci cnd v

aflai n Pagina 1 i facei click cu mouse-ul pe textul Link catre Pagina 2 se va deschide cel de-adoilea document HTML i invers, legtura dintre cele dou pagini fiind astfel reciproc.

Atenie!

Numele fiierelor care reprezint valori ale atributului href suntcase sensitive . Acelai lucruse ntmpl i cu textul care desemneaz valorile atributului name.

Aceasta nseamn c fiierul legatura5.html este diferit de fiierul legatura5.html, iar ancora este diferit de

Pentru a evita greelile, este recomandat s v denumii toate fiierele sau numele pentruancore cu litere mici.

6. Legtura ctre o pagin localizat n alt director (folder)

Dac pagina cu care vrem s facem legtura se afl pe acelai calculator, dar ntr-un alt folderatunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ sauadresarea absolut.

Adresareaabsolut se realizeaz preciznd calea ( path ) complet, pornind de la directorulrdcin, prin care se poate ajunge la fiierul de care vrem s legm pagina.

De exemplu, dac fiierulculori1.html se afl pe disculC:, n folderulWEBROOT , nfolderulLegaturi , o legtur ctre el se va face n modul urmtor:

7/31/2019 61070373-html

42/158

Dorim s realizm o legtur cu un fiier numitImg1.gif din folderul Imagini .n acest caz, eticheta , plasat n documentullegaturi2. html, va avea urmtoarea form:

Deschide imaginea

Prin folosirea irului de caractere "../" (punct punct slash) se urc un nivel n ierarhia dedirectoare, n raport cu directorul curent. Prin urmare, ntruct folderul curent, n care se afl paginde pornire.C:/WEBROOT /Legaturi , prin utilizarea irului de caractere "../" se ajunge nfolderul printe, care este C:/WEBROOT . De aici se continu calea n folderulImagini , dup care se specific numele fiierului din acest folder cu care vrems stabilim legtura.

Schema 5.2

Dorim s stabilim o legtur cu un fiier numittext2.html care se afl n directorulEXEMPLE (directorul printe al folderului nostru,LAGATURI). Atunci referirea se va faceastfel:

Link la textAm urcat un nivel n ierarhie ajungnd n directorulEXEMPLE i am specificat numele

fiierului cu care dorim s facem legtura.

Dac fiierultext2.html se afl cu dou nivele mai sus fa de folderul n care lucrm, adicdac se afl n folderolHTML, atunci adresarea se face astfel:

Link la text

n general, de cte ori este posibil, este de preferat s folosii adresarea relativ, pentru ca

documentele HTML s fie portabile (mutarea lor s nu invalideze legturile stabilite ntre diversedocumente).

42

C:

WEBROOT

HTML

EXEMPLE

LEGATURI

Text2.html

7/31/2019 61070373-html

43/158

7. Legtura ctre pagini externe

O legtur ctre o pagina extern se realizeaz simplu, prin utilizarea etichetei ,specificnd adresa URL a paginii ca valoare a atributului href astfel:

href="http://URL_pagina"

Reamintim c specificarea adresei URL se poate face fie folosind numele serverului pe careeste stocat pagina fie adresa IP a acestuia. Evident, pentru ca link-ul s funcioneze, trebuie cutilizatorul s fie conectat la Internet (lucru valabil pentru toate legturile externe).

n Exemplul 6.4 este stabilit o legtur ctre pagina de start Yahoo.

Exemplul 5. 4

legatura4Link catre Yahoo.com Yahoo!

Un atribut util al etichetei estetitle. Acesta determin apariia unei mici ferestre (tool tip) n pagina Web cnd mouse-ul se afla pe o legtur, fereastr n care este afiat valoarea datacestui atribut, care are astfel menirea de a furniza informaii suplimentare despre semnificaia unelegturi

Exemplul 5. 5

legatura5Atributul titleGoogle

8. Alegerea culorilor pentru legturi

Am mai discutat despre acest subiect i la capitolul despre culori. n mod prestabilit (default )se utilizeaz trei culori pentru legturi:

culoare pentru legturilenevizitate(nu s-a efectuat nici un click pe ele) - albastruculoare pentru legturilevizitate(s-a efectuat cel puin un click pe ele) - violetculoare pentru legturileactive(deasupra crora se afl mouse-ul la un moment dat, dar nc

nu s-a efectuat click) - rou

Pentru a modifica dup preferine aceste culori se folosesc cele trei atribute ale etichetei:

43

7/31/2019 61070373-html

44/158

link pentru legturile nevizitate;vlink pentru legturile vizitate;alink pentru legturile active.

Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform coduluihexazecimal.Exemplul 5.6 ilustreaz modul cum pot fi modificate culorile legturilor

Exemplul 5. 6

legatura6Setarea culorilor pentru link-uri
galben pentru legaturi, verde pentru legaturi vizitate si magenta pentru legaturi

active
Link catre pagina 1
Link catre pagina 2

9. Utilizarea potei electronice (e-mail)

ntr-o pagin Web se pot afla legturi care permit lansarea n execuie a aplicaiei de expediera mesajelor electronice a celui care viziteaz pagina. Fcnd click pe textul care nsoete legtura programul de pota electronic al vizitatorului paginii se va deschide automat, avnd cmpul adresdestinatarului, "To:" deja completat cu adresa de mail specificat n pagin. Pentru a realiza aceslucru se folosete comandamailto:atributul href primind o valoare ca mai jos:

Dac pagina este vizualizat cu browserul Internet Explorer iar vizitatorul are instalat un e-mail manager, cum sunt de pild aplicaiile Microsoft Outlook sau Outlook Expres, activarealegturii va determina deschiderea unuia dintre aceste programe. n cazul n care managerul de email default este de alt tip dect aplicaia Microsoft, (Eudora, de exemplu) aceasta va porni deasemenea automat, cu o nou paginSend i cu adresa destinatarului pre-completat.

Dac pagina este vizualizat n Netscape, se va deschide programul de pot electronic

ncorporat n browser .n exemplul urmtor (Exemplul 5.7), n momentul cnd vizitatorul paginii face click pe textul"Trimitei un mesaj", aplicaia de pot electronic este lansat automat, prin intermediul serviciulumailto:, iar cmpul care trebuie completat cu adresa de mail a destinatarului mesajului este deasemenea completat automat cu adresa autor@domeniu.com .

Exemplul 5. 7

legatura7

44

7/31/2019 61070373-html

45/158

Expediere de mesaje electroniceTrimiteti un mesaj

10. Legturi ctre fiiere oarecare

O pagin Web poate conine legturi nu doar ctre alte fiiere HTML, dar i ctre fiiere deorice alt tip, aflate pe calculatorul propriu sau oriunde pe Web. Ca i n cazul legturilor cu alte pagini (documente HTML) vom folosi eticheta , astfel:

text explicativ

Nefiind vorba despre un fiier HTML, browserul nu va putea s l proceseze, astfel c vaactiva procesul de transfer sau de descrcare (download ), urmnd ca, dup transferul integral alfiierului, utilizatorul s l deschid cu un program adecvat.

n Exemplul 5.8, atunci cnd se efectueaz click pe legtur se deschide caseta de dialog Filedownload care permite:

salvarea fiierului pe disc saudeschiderea fiierului n locaia curent

Exemplul 5. 8

legatura8Legaturi catre fisiere oarecareLink catre fisierul download.zip

11. Deschiderea paginilor referite printr-o legtur

Pagina nou, apelat prin activarea unei legturi se poate deschide n dou moduri, n raporcu pagina surs:

n aceeai fereastrntr-o fereastr nou

n mod prestabilit, legturile deschid pagina pe care o refer n fereastra curent. Aceastanseamn c dac vei face click pe un link, noua pagin se va ncrca n locul paginii deja deschis(n aceeai instan a browserului). Pentru a reveni la pagina anterioar trebuie s apsai butonu

Back al browserului.

Acest comportament se poate schimba cu ajutorul valorilor atributuluitarget, asupra cruiavom reveni la capitolulCadre.

45

7/31/2019 61070373-html

46/158

Vom meniona aici doar dou dintre aceste valori, corespunztoare celor dou situaiiamintite.

Pentru ca pagina apelat s se deschid ntr-o fereastr nou, se utilizeaz sintaxa generic demai jos, n care atributul target are valoarea "_blank":

text explicativ

Pentru ca pagina referit s se deschid n aceeai fereastr cu pagina surs, atributului i seasociaz valoarea "_self":

text explicativ

Exemplul 5. 9

legatura9Deschiderea paginii in alta fereastra Pagina de mai jos se va deschide intr-o fereastra noua

Tabelul culorilor

12. Crearea unei bare secundare de navigare

n foarte multe site-uri ai observat, probabil, existena, n partea de jos a paginii, a unui blocde text care conine legturi ctre paginile care compun site-ul, legturile fiind delimitate de miclinii verticale, ca n exemplul de mai jos:

|Culori| |Fonturi| |Blocuri de text|

Utilitatea acestei bare este evident legat de facilitarea navigrii n site, mai ales n cazurile

cnd dimensiunea paginii depete un ecran. n acest caz, utilizatorul trebuie s deruleze la citir paginile pe vertical, astfel c link-urile de pe bara de navigare superioar nu mai sunt accesibile.

O astfel de bar secundar de navigare se poate realiza procednd ca n Exemplul 5.10. Evident,legturile vor face referire la fiierele HTML dorite de dumneavoastr.

Exemplul 5. 10

legatura10Bara de navigare

46

7/31/2019 61070373-html

47/158

|Culori||Fonturi||Formatarea textului|

Bara vertical inserat ntre textele care trimit la paginile respective este de obicei plasat petastatur pe aceeai tast cu caracterul "\" (backslash ). Dac dorii ca bara s fac parte din textulactiv, o vei insera ntre etichetele i , altminteri ea trebuie plasat n afara acestoraastfel:

|Culori|

47

7/31/2019 61070373-html

48/158

Capitolul 6Imagini i elemente multimedia

Imaginile i elementele multimediaconstituie, fr ndoial, o latur interesant ispectaculoas a oricrei pagini de Web. Putei include n paginile dumneavoastr fotografii, imaginanimate, sunete sau imagini video. Atunci cnd sunt folosite n mod judicios, aceste elemente potmbogi coninutul paginilor Web, oferindu-le un aspect atractiv i profesional. Pe de alt parte,folosirea lor n exces poate da paginilor un aspect ncrcat i confuz i poate conduce la mrireaconsiderabil a timpului de ncrcare al paginii.

1. Formatele fiierelor grafice

Imaginile sunt stocate n fiiere cu diverse formate, cele mai folosite pe Web fiind, aa cumera firesc, cele care confer un raport optim ntre calitatea imaginii i dimensiunile fiierului.

Dou dintre cele mai utilizate tipuri de fiiere grafice suntJPEG ( Joint Photographic Experts Group ) iGIF (Graphics Interchange Format ).

Formatul GIF

Formatul GIF (.gif ) este ideal pentru icon-uri, ilustraii i animaie. Acest format utilizeaz otehnologie special de comprimare care reduce semnificativ dimensiunile fiierelor grafice pentruun transfer mai rapid prin reea

Imaginile GIF suport efecte de transparen, ntreesere i animaie, asupra crora vom reven pe larg n capitolulElemente avansate de grafic. Deoarece majoritatea browserelor recunoscformatul GIF, acesta a devenit cel mai frecvent utilizat n paginile Web. Poate fi folosit pentru ainclude imagini direct n pagini (imaginiin-line ) precum i pentru a referi imaginile prinintermediul unor legturi externe.Totui, datorit numrului redus de culori, formatul GIF nu est potrivit pentru fotografii sau imagini de calitate nalt. Pentru acest tip de imagini, cel mai adecvaeste formatul JPEG.

Formatul JPEG

Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentruilustraii, desene sau imagini de dimensiuni reduse. Algoritmii folosii pentru comprimarea decomprimarea imaginii altereaz n mod notabil zonele de mari dimensiuni colorate cu o singurnuan. Din acest motiv, atunci cnd dorii s includei n pagin un desen sau o ilustraie carefolosete un numr redus de culori, formatul GIF este cel mai potrivit.

2. Inserarea unei imagini

Pentru a insera o imagine n cadrul unei pagini (o imaginein-line ), se utilizeaz eticheta

(de la image ). Eticheta nu este o etichet container, prin urmare nu necesit oetichet corespunztoare de nchidere.

48

7/31/2019 61070373-html

49/158

Pentru a putea identifica imaginea care va fi inserat, se utilizeaz atributulsrc ( source ) aletichetei . Atributul src i comunica browserului numele i locaia imaginii care urmeaz sfie inserat. Valoarea acestui atribut este adresa URL a imaginii respective.

Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine,atunci adresa URL a imaginii este formata numai din numele fiierului, inclusiv extensia.

Dac imaginea se afla ntr-un alt director, URL-ul imaginii trebuie specificat fie prinadresarea absolut fie, preferabil, prin cea relativ.Exemplul 6.1 ilustreaz modul n care se pot insera ntr-o pagin dou imagini, una dintre eleaflndu-se n acelai folder ca i pagina surs, iar cealalt n folderulImagini.

Exemplul 6. 1

imagini1Imagini in paginaImagine aflata in acelasi folder

Imagine aflata in folderul Imagini

n exemplul de mai sus este prezent i atributulborder al etichetei . Acesta este folosit pentru a plasa un chenar n jurul imaginii. Valoarea atributului border este numrul de pixeli carreprezint grosimea chenarului din jurul imaginii. Absena atributului sau setarea la valoarea "0face ca acest chenar s nu fie prezent.

Un alt atribut util asociat etichetei estealt. Acest atribut permite afiarea unui textexplicativ n spaiul n care va fi afiat imaginea n pagin.

Exemplul 6. 2

imagini2 Atributul alt Acesta este un...

Dup cum putei observa dinExemplul 6. 2imaginea pe care am inclus-o n document nueste afiat. Motivul este c am omis intenionat extensia.gif a fiierului pentru a exemplifica

utilitatea atributului alt. Prin urmare, dac dintr-un motiv oarecare, imaginea nu se ncarc n pagin, se ncarc mai greu, sau este vizualizat cu un browser care nu suport grafica, n zonarezervat imaginii va fi afiat textul specificat ca valoare a atributului alt. De asemenea, textu

49

7/31/2019 61070373-html

50/158

specificat ca valoare pentru atributul alt va fi afiat i n cadrul unei mici ferestre care se deschide momentul cnd cursorul mouse-ului este meninut deasupra imaginii. Un alt motiv pentru care estindicat folosirea atributului alt este acela c vizitatorul paginii are posibilitatea de a vedea ncnainte de ncrcarea complet a imaginii ce anume se va afia n zona respectiv. Astfel, el are posibilitatea de a atepta ncrcarea complet a imaginii sau de a trece la alt pagin.

3. Dimensionarea imaginiiDimensionarea imaginii se realizeaz cu ajutorul atributelor width - prin care se stabilete

limea imaginii iheight- prin care se stabilete nlimea imaginii.

n Exemplul 6.3 sunt precizate i dimensiunile imaginii incluse n document. Se observ cdimensionarea imaginilor se face n pixeli. Este, desigur, posibil, ca dimensionarea s se fac n procente, ca i la liniile orizontale, de exemplu. Totui, n afara unor cazuri speciale, aceasta estconsiderat o practic greit, deoarece browserul va redimensiona imaginea iar rezultatele vor fi decalitate slab.

n Exemplul 6.3 se observ c dimensionarea imaginilor se face n pixeli. Este, desigur, posibil, ca dimensionarea s se fac n procente, ca i la liniile orizontale, de exemplu. Totui, nafara unor cazuri speciale, aceasta este considerat o practic greit, deoarece browserul varedimensiona imaginea iar rezultatele vor fi de calitate slab.

Exemplul 6. 3

imagini3Dimensionarea imaginilor

4. Alinierea imaginii i a textului

Alinierea unei imagini n raport cu textul din pagin se realizeaz prin intermediul atributulu

align, care poate lua urmtoarele valori:left - aliniere la stnga; textul este dispus n partea dreapt a imaginii ncadrnd imaginea

right - aliniere la dreapta; textul este dispus n partea stnga a imaginii ncadrnd imaginea

top - aliniere deasupra; partea de sus a imaginii se aliniaz cu prima linie a textului ce precedeimaginea

middle - aliniere la mijloc; mijlocul imaginii se aliniaz cu prima linie a textului ce precedeimaginea.

50

7/31/2019 61070373-html

51/158

bottom- aliniere dedesubt, la baz; partea de jos a imaginii se aliniaz cu prima linie a textului.

Valorile left, right, i bottom ale atributului align permit ca textul s fie dispus n jurul imaginii, vreme ce top i middle nu permit acest lucru.

Exemplul 6. 4

imagini4Alinierea imaginii si textului (bottom)Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine

text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagintext.Imagine text.Imagine text.

Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imaginetext.Imagine text.

???? numele imaginii

Alte dou atribute utile, care servesc la alinierea imaginii fa de restul elementelor din pagin, sunt atributelehspacei vspace. Ele precizeaz distana, n pixeli, pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagin.

n Exemplul 6. 4 vom schimba modul de aliniere n cadrul etichetei i vom adugaatributele hspace, respectiv vspace, astfel:

7/31/2019 61070373-html

52/158

Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imaginetext.Imagine text.

Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine text.Imagine

text.Imagine text.

???? numele imaginiiExemplul 6.6 ilustreaz modul n care pot fi aliniate dou imagini fa de textul din pagin.

Putei observa c, dac alinierea la stnga a imaginii mpreun cu folosirea atributelor hspace vspace conduce la un aspect ordonat al elementelor, aspectul textului n raport cu imaginea aliniatla dreapta depinde de dimensiunea ferestrei browserului.

Exemplul 6. 6

imagini6Alinierea a doua imaginiImagine text. Imagine text. Imagine text. Imagine text.Imagine text. Imagine text. Imagine

text. Imagine text.

7/31/2019 61070373-html

53/158

6. Imagini folosite ca legturi

Pentru a folosi o imagine drept legtura se procedeaz ca n urmtorul exemplu:

S-a folosit eticheta prin intermediul creia am creat legtura cu fiierul tabel_culori.html

ntre etichetele i am inclus o imagine care nlocuiete textul explicativ pe carevizitatorul urmeaz s fac click cu mouse-ul. Imaginea servete, deci, ca legtur ctre o anumit pagin. Imaginea folosit ca legtura este prism.gif iar pagina spre care este fcut legtura estetabel_culori.html . n mod prestabilit imaginea utilizat pe post de zon activ este nconjurat de unchenar avnd culoarea unei legturi (albastru). Dac stabilim pentru atributul border al etichetevaloarea "0" acest chenar dispare.

Exemplul 6. 8

imagini8 Imagini cu legaturi
Am pus o imagine cu legatura pe pagina

7. Imaginile miniaturale (thumbnails)

Dac ntr-o pagin Web este necesar afiarea unui numr mare de imagini, ncrcarea paginise va face destul de greu. De multe ori, vizitatorii paginii nu vor avea rbdarea necesar pentru atepta ncrcarea integral a paginii. O imaginethumbnail este o versiune de dimensiuni reduse aunei imagini mai mari, care se ncarc mult mai rapid i care, dei este de dimensiuni mici i dcalitate sczut, permite vizitatorului s afle ce anume reprezint i s decid dac este interesat sa

nu s deschid versiunea integral..Imaginea miniatural reprezint o legtur spre fiierul cu imaginea original din care provine. n cazul n care vizitatorul paginii dorete s vad imaginea original, o poate deschidefectund click imagineathumbnail.

Realizarea imaginilor miniaturale se poate face fie prin micorarea proporional a imaginilorfie prin reducerea lor la o dimensiune prestabilit ( strech ) chiar dac imaginea se distorsioneaz, ncazul n care se dorete, de pild, ca toatethumbnail- urile dintr-o pagin s aib aceleaidimensiuni.

Exist dou metode pentru a plasa o imaginethumbnail n pagin:

folosind dou imagini, una fiind imagineathumbnail iar cealalt, imaginea originalfolosind o singur imagine, redimensionat (micorat) direct n pagin

53

7/31/2019 61070373-html

54/158

7/31/2019 61070373-html

55/158

Pentru a insera o imagine video ntr-un document HTML se folosesc atributeledynsrc,controls, loopi start ale etichetei .

Atributuldynsrc nlocuiete atributul src i permite inserarea n documentul HTML a uneiimagini video n acelai mod n care este inserat o imagine static.

Valoarea atributului dynsrc este adresa URL a fiierului video care va fi inclus n paginconform sintaxei:

Acest atribut este o extensie Internet Explorer i nu este recunoscut de browserele Netscape.Pentru a vizualiza o imagine videoin-line ntr-un browser Netscape, vizitatorul paginii trebuie sinstaleze un program auxiliar de tip plug-in . Dac programul plug-in nu este disponibil pecomputerul vizitatorului, imaginea video nu va putea fi afiat.

Singurul format de fiiere video care este suportat de extensiile Internet Explorer esteAVI ( AudioVideo Interleave ), deoarece acesta este formatul de redare care este inclus n browser . Construciade mai jos include ntr-un document HTML fiierul videonasa.avi care se afl n folderulVideo :

Efectul acestei etichete este deschiderea de ctre browser a unei ferestre de vizualizare ninteriorul paginii Web, fereastr n care va rula clipul videonasa.avi , inclusiv sunetul, dac acestaface parte din clip i computerul vizitatorului este setat s redea sunetele. Ca i imaginile obinuiteimaginea video este afiat pe msur ce este ncrcat.

Deoarece nici un alt browser n afar de Internet Explorer nu recunoate aceast extensie, esterecomandat s includei n cadrul etichetei i atributul src prin care s furnizai o imaginstatic ce va fi afiat n acelai cadru. Browserele care nu recunosc extensia dynsrc vor afiaimaginea static pe cnd Internet Explorer va afia imaginea video. Ordinea n care apar cele douatribute nu are importan. De exemplu:

n mod normal, Internet Explorer red clipul video ntr-o fereastr n care nu sunt afiate nicun fel de butoane de control. Utilizatorul poate relua, opri sau continua redarea clipului efectunclick dreapta cu mouse-ul n interiorul ferestrei.

Pentru a aduga butoane de control acestei ferestre se utilizeaz atributulcontrolsal etichetei. Atributul controls nu are alocat nici o valoare, prezena sa avnd doar scopul de a aduga butoanele de control asemntoare celor de la aparatele video. De exemplu:

Clipul video inclus n pagin este redat de browser o singur dat, de la nceput pn la sfrit.

Pentru a repeta redarea clipului de un anumit numr de ori este folosit atributulloop. Valorile posibile ale atributului sunt:

un numr ntreg care reprezint numrul de reluri ale clipului infinite, caz n care clipul este redat pn cnd utilizatorul stopeaz derularea sa apsnd

butonul stop al ferestrei de vizualizare (n cazul cnd fereastra conine butoanele de control) saefectueaz click dreapta cu mouse-ul n fereastra de vizualizare.

Exemplul de mai jos ilustreaz modul n care poate fi setat atributul loop:

55

7/31/2019 61070373-html

56/158

Aa cum am precizat, redarea imaginii video ncepe imediat ce aceasta a fost completncrcat n pagin. Pentru a schimba acest comportament se folosete atributulstart care poateavea valorile: mouseover, situaie n care derularea imaginii video ncepe n momentul cnd mouse-ul este

plasat deasupra imaginii fileopen, valoarea predefinit, situaie n care derularea imaginii ncepe imediat dup ncrcare

n pagin

Cele dou valori pot fi combinate pentru a se realiza redarea imaginii mai nti imediat dupncrcarea n pagin i apoi de fiecare dat cnd mouse-ul este plasat deasupra ei, ca n exempluurmtor:

Imaginile videoin-line pot fi tratate ca i imaginile statice. O astfel de imagine poate fi aliniatfolosind atributulalign, sau poate fi spaiat fa de textul care o nconjoar.

Exemplul 6. 11

imagini11Imagini videoClipul video de mai jos face parte din colectia NASA

3

9. Sunetele

Dac eticheta permite afiarea unei imagini de fundal, exist i o etichet carerealizeaz includerea n pagina Web a unei muzici de fundal i anume eticheta.Aceast etichet este, de asemenea, o extensie Internet Explorer deci nu este recunoscut i

executat n alte browsere. Browserul Internet Explorer conine un decodor de sunet ncorporat i permite integrarea prin

eticheta a sunetului de fundal pentru o pagin. Sintaxa etichetei esturmtoarea:

Atributulsrc are drept valoare adresa URL a fiierului de sunet care este folosit ca