DOCUM ENTE WEB

DOCUM ENTE WEB După studierea acestui capitol, veţi fi capabili să: • recunoaşteţi documente WEB; • proiectaţi un document Web; • creaţi un document Web cu ajutorul aplicaţiilor de oficiu. 11.1. Noţiuni şi concepte În cursul de Informatică pentru clasa a 10-a aţi studiat deja mai multe noţiuni fundamentale din domeniul reţelelor de calculatoare. Cunoaşteţi elemente de tipologie şi de arhitectură ale reţelelor de calculatoare, tehnologii de cooperare în reţea, reţeaua Internet, componentele şi serviciile ei. Ştiţi că informaţia şi operaţiile de gestionare a ei constituie cele mai importante elemente ale reţelei globale, iar cel mai modern serviciu care ajută să operaţi cu informaţia este serviciul WWW (World Wide Web - păienjenişul global). Vă este cunoscută şi noţiunea de pagină Web, precum şi cea de program de răsfoire (explorare). Puteţi localiza paginile Web folosind adresele URL (Uniform Resurse Locator), vizualiza elementele lor informaţionale, copia informaţiile necesare, prezentate în diverse formate. Aţi observat că paginile Web pot conţine mai multe elemente, natura cărora este distinctă: text, imagini, secvenţe sonore şi video, elemente de control (butoane) şi referinţe către alte pagini Web. Toate acestea pot fi asamblate împreună datorită hipertextului şi limbajului HTML (Hyper Text MarkUpLanguage - limbajul de marcare a hipertextului). Un docum ent W eb este o colecţie de pagini Web interreferite, îm preună cu elem entele lor inform aţionale şi de control încorporate. Documentul Web publicat în reţeaua globală este cunoscut sub denumirea de site W eb. 11.2. Tipurile documentelor Web Cele mai cunoscute şi des utilizate documente Web sînt documentele HTML - documentele în care informaţiile, legăturile, elementele de control şi metadatele sînt descrise în limbajul HTML. Atunci cînd un program de explorare deschide un fişier HTML, el interpretează marcajele întîlnite în text în conformitate cu regulile limbajului. Documentele 116 HTML au extensia HTML (în unele cazuri HTM, dacă provin din sisteme de operare care acceptă doar extensii ale numelor de fişier din nu mai mult de trei simboluri). Un document HTML poate fi creat cu ajutorul oricărui editor de texte şi vizualizat, folosind orice program de explorare (fig. 11.1). Fig. 11.1. Conţinutul unui fişier HTML (în stînga) şi interpretarea acestuia de programul de explorare (în dreapta) Mulţi dintre utilizatorii Web denumesc documentele descrise cu ajutorul limbajului HTML docu m en te în fo r m a t H T M L . Documentele PHP sînt paginile Web, care conţin elemente descrise cu ajutorul limbajului PHP (Hypertext Preprocessor). Utilizarea PHP permite crearea unor pagini cu un conţinut dinamic: conţinutul paginii PHP este prelucrat pe un server Web, după care se generează o pagină HTML, ce este transmisă pe calculatorul client, unde este vizualizată cu ajutorul programului de explorare. Documentele PHP se folosesc frecvent pentru afişarea dinamică a datelor stocate în bazele de date de reţea. Documentele ASP sînt pagini Web elaborate cu ajutorul tehnologiei Active Server Page. La fel ca documentele PHP, acestea se bazează pe componente programate într-un limbaj de nivel înalt, numite obiecte care pot fi transmise de la o pagină la alta. Documentele grafice SVG (Scalable Vector Graphics) sînt realizate cu ajutorul limbajului XML* pentru reproducerea calitativă a elementelor grafice bidimensionale. Instrumentele grafice încorporate în acest limbaj permit utilizarea graficii vectoriale în documente Web (fig. 11.2). Fig. 11.2. Conţinutul unui document Web grafic (în stînga) şi interpretarea acestuia de programul de explorare (în dreapta) * Meta-limbajul XML (eX ten sibleM eta Language) este un limbaj asemănător cu HTML, care a fost proiectat în scopul transferului de date între aplicaţii, inclusiv în reţea. 117 11.3. Proiectarea si realizarea unui document Web * Tradiţional asociem termenul d o cu m en t unui fişier separat, care conţine informaţii de diversă natură, dar din acelaşi domeniu. Documentul Web, sau site-u l este în majoritatea absolută a cazurilor o colecţie de fişiere (numite şi pagini) cu referinţe interne şi externe. În activitatea cotidiană veţi avea necesitatea nu doar să utilizaţi documente Web, dar şi să elaboraţi unele documente specifice. Instrumentele Web moderne permit automatizarea în mare măsură a elaborării unor pagini standard, cum ar fi paginile de profil perso n a l în reţelele sociale, blogurile, paginile w iki. În cazurile cînd urmează să elaboraţi un document mai puţin standardizat, aceste instrumente vă pot ajuta doar în procesul de construcţie a documentului. Fiind destinat unui public larg, documentul Web urmează să fie elaborat astfel, încît să acorde utilizatorilor săi un acces cît mai comod şi rapid la informaţiile structurate după criterii asociate tematicii documentului. Aceasta ne duce la concluzia că este necesară o proiectare prea la b ilă a documentului Web. Indiferent de tipul documentului Web, proiectarea acestuia începe de la stabilirea scopului de utilizare. Avînd fixat scopul, putem selecta mai simplu tipul de document şi instrumentarul necesar pentru elaborare. De exemplu, dacă doriţi să faceţi publică o colecţie de eseuri proprii şi ale colegilor veţi alege în calitate de pagini documente HTML. Acelaşi tip veţi utiliza pentru a crea o galerie nu prea mare de imagini. Dacă însă doriţi să realizaţi un document cu descrieri ale figurilor geometrice plane, va fi oportună selectarea documentelor SVG, care va acorda o calitate şi flexibilitate sporită a imaginilor din pagini. Odată fiind stabilit scopul de utilizare, puteţi trece la următoarea etapă - stabilirea cerin ţelor faţă de document. Există mai multe categorii de cerinţe: faţă de conţinut şi dozarea lui în pagini, faţă de culori şi caractere, faţă de navigare între pagini şi elementele paginii. Cerinţele sînt specifice pentru fiecare document în parte şi se stabilesc în funcţie de grupul-ţintă pentru document şi de conţinuturile care urmează să fie plasate. Web Design este procesul de creare a unei pagini sau a unui document Web, care îmbină modul de realizare a cerinţelor etice, estetice, de conţinut şi operare mecanică cu aspectul vizual al documentului elaborat. La următoarea etapă este definită stru ctu ra docu m en tu lu i Web: structura paginii principale, conţinutul ei, amplasarea elementelor informaţionale şi de navigaţie, informaţiile despre autor; structura paginilor subordonate, conţinuturile şi modul de referire între paginile documentului. Pentru a evita amplasarea nereuşită a elementelor în pagini şi apariţia referinţelor incorecte, este utilă crearea unei scheme grafice a documentului. Schema va conţine în calitate de noduri viitoarele pagini ale documentului, iar legăturile direcţionate între noduri vor indica referinţele între paginile documentului. E xem plu : Fie că doriţi să realizaţi un document Web cu informaţii de interes personal, care va conţine: date personale, o galerie de imagini, pagini separate dedicate activităţii şcolare, prietenilor, activităţilor de interes (hobby) şi o colecţie de referinţe la site-uri cu conţinuturi educaţionale. Pagina principală va conţine un antet (titlu) al documentului, referinţe către paginile subordonate, date de contact despre autor şi un bloc de informaţii personale. Fiecare 118 dintre paginile subordonate va fi una tematică: liceu, prieteni, galerie foto, interese. Pagina cu lista de referinţe este asociată procesului de studii şi va fi subordonată paginii cu date despre liceu (fig. 11.3). Se consideră a fi o bună practică posibilitatea de referire directă de pe orice pagină a documentului către pagina principală. Nu este necesar de specificat aceste referinţe pentru a nu supraîncărca schema de structură a documentului Web. Fig. 11.3. Schema de structură a unui site cu date de interes personal. Este detaliată structura paginii principale După proiectarea structurii referinţelor în document, poate fi detaliată structura paginilor subordonate. Se recomandă utilizarea unui model comun pentru toate paginile, cu modificări minime, dictate de specificul conţinutului. P rogram area p a g in ilo r docu m en tu lu i Web. Este următoarea etapă de elaborare, şi în funcţie de tehnica abordată de autorul documentului, poate să conţină nu doar procesul de programare a paginilor cu ajutorul unui limbaj de programare Web, dar şi introducerea informaţiei în pagini. Dacă se folosesc sisteme de producere şi asistenţă Web (cum ar fi sites.google.com, wordpress.com), elementele de programare devin mai puţin vizibile, dar se pierde şi o parte din libertatea de organizare a structurii şi conţinuturilor. Testarea d ocu m en tu lu i W eb. Se vizualizează documentul local, cu ajutorul diferitor aplicaţii de explorare, se stabileşte corectitudinea afişării structurii, a conţinuturilor, a culorilor şi a referinţelor. În cazul depistării erorilor, se revine la etapa de proiectare. După corectarea lor, documentul este gata de a fi publicat. Pentru aceasta el urmează să fie plasat pe un server Web. Dacă pentru elaborarea documentului au fost folosite sisteme on-line de producere şi asistenţă Web, deplasarea pe serverul Web este opţională. M en ţin erea şi d ezvoltarea docu m en tu lu i. Periodic, informaţia de pe paginile site-ului urmează să fie reînnoită. Pot să apară şi modificări de structură, design etc. Pentru site-urile elaborate nemijlocit în mediul Web operaţiile de editare se realizează direct, înlocuind dinamic versiunile vechi ale paginilor. Dacă însă site-ul a fost creat local şi mai apoi publicat, versiunea nouă se testează, apoi se publică pe serverul Web, înlocuind site-ul vechi. 119 11.4. Crearea documentelor Web cu ajutorul aplicaţiilor de oficiu În activitatea cotidiană folosim diverse programe de aplicaţii pentru a prelucra informaţii: editoare de texte, editoare grafice, sisteme de prezentări electronice şi calcul tabelar, alte aplicaţii specializate. Fişierele create de aceste sisteme pentru stocarea informaţiilor au formate specifice, care nu pot fi prelucrate şi afişate direct de aplicaţiile de explorare. Dar, de multe ori, informaţia din aceste fişiere urmează să fie plasată într-un document Web sau într-o pagină solitară. O soluţie simplă, pe care o pun la dispoziţie mai multe aplicaţii de uz general, este crearea automată a unui document Web, structura şi conţinutul căruia repetă fidel documentul original din aplicaţie. Aceasta se creează în urma selectării opţiunilor speciale de salvare a documentului, sau de exportare. Tipurile standard ale documentelor Web care pot fi create în acest mod sînt Document Web (HTML). Pentru a obţine automat un document Web, este suficient să se selecteze în meniul aplicaţiei opţiunea de salvare a documentului: W eb Page (fig. 11.4). Fig. 11.4. Salvarea fişierelor aplicaţiilor de oficiu ca document Web De remarcat că în cazul cînd documentul iniţial conţine informaţii neomogene sau elemente care nu pot fi reproduse direct cu ajutorul instrumentelor HTML, aplicaţiile creează tot setul de fişiere subordonate, amplasate într-un director, numele căruia este format din numele documentului salvat, însoţit de sufixul files (fig. 11.5). Fig. 11.5. La salvarea fişierului cu numele main în formă de pagină Web, s-a creat şi directorul main_files, care conţine mai multe fişiere cu imagini şi informaţii de serviciu, necesare pentru reprezentarea corectă a paginii Web main 120 Mai multe aplicaţii de oficiu propun o opţiune suplimentară de generare a documentului Web: W eb Page, F iltered (pagină Web filtrată). Deosebirea de pagina Web obişnuită este excluderea codurilor excesive şi a informaţiilor de serviciu, care ocupă un volum semnificativ. Această opţiune permite micşorarea volumului documentului Web, dar creează riscul de reprezentare incorectă în unele aplicaţii de explorare. Extensia fişierelor care conţin documentul Web este în ambele cazuri HTML. Extensiile fişierelor auxiliare şi de imagini pot varia în funcţie de aplicaţia de oficiu, din care este generat documentul Web. Un alt tip de documente Web care poate fi produs în mod automat cu ajutorul aplicaţiilor de oficiu este arhiva Web. Pentru a crea o arhivă Web din fişierul cu format specific al aplicaţiei, în meniu este selectată opţiunea de salvare a documentului: Single File W eb Page (fig. 11.6). Fig. 11.6 Acest tip de documente încorporează toate elementele documentului original, păstrează relaţiile între componentele referite intern şi poate fi deschis cu un program de explorare local, pe calculatorul pe care se află. Extensia fişierelor care conţin arhive Web este MHT. Întrebări si exerciţii > > O Ce numim document Web? Care documente Web se numesc site-uri Web? e Care dintre următoarele tipuri de documente Web sînt realizate cu ajutorul unui limbaj de programare de nivel înalt: a) documentele HTML; c) documentele p h p ; b) documentele ASp; d) documentele SVG? e Care este tipul de documente Web, ce permite vizualizarea textului formatat cu ajutorul unui limbaj de marcaje? O Care este tipul de documente Web, ce permite crearea directă a elementelor grafice în aplicaţia de explorare? e Enumeraţi etapele de proiectare a unui document Web. © Proiectaţi schema de structură a unui site - o microbibliotecă virtuală pentru cel mult trei autori. Pentru fiecare autor urmează să fie plasate în pagini aparte cel mult două opere. Pagina principală va conţine lista de referinţe către paginile autorilor distincţi. Fiecare pagină a autorului distinct va conţine referinţe către paginile operelor lui literare. © Selectaţi un domeniu pentru care să proiectaţi un site Web. Determinaţi scopul de utilizare. Proiectaţi schema de structură. O Cu ajutorul unui editor de texte, creaţi un document care să conţină: text cu elemente de formatare, tabele, diagrame, imagini. Folosind opţiunile de salvare a documentului, generaţi automat un document Web, echivalent cu cel original. Care este diferenţa, dacă generaţi un document arhivă Web? © Creaţi o prezentare electronică, care să conţină text cu elemente de formatare, tabele, diagrame, imagini. Folosind opţiunile de salvare a documentului, generaţi automat un document Web, echivalent cu prezentarea originală. Cum credeţi, care elemente ale unei prezentări nu pot fi păstrate în documentul Web? 121 Capitolul 12 LiM B A JU L HTM L | După studierea acestui capitol, veţi fi capabili să: • elaboraţi pagini Web utilizînd sintaxa HTML; • formataţi conţinutul documentelor Web cu ajutorul instrumentelor HTML; • alcătuiţi şi să organizaţi liste cu ajutorul instrumentelor HTML; • creaţi şi să utilizaţi în interiorul documentelor HTML referinţe interne şi externe; • inseraţi în documente HTML imagini; • creaţi şi să editaţi tabelele în documente HTML; • utilizaţi tabelele pentru amplasarea în pagină a elementelor HTML. 12.1. Structura generală a unui document HTML 12.1.1. Despre docum ente HTML Am menţionat deja că cele mai utilizate documente Web sînt documentele HTML. Cele mai apreciate caracteristici ale formatului HTML sînt: independenţa faţă de platformă (acelaşi document HTML este afişat asemănător de calculatoare diferite), referinţele, formatarea structurată. Referinţele simplifică esenţial navigarea printr-un document mare şi/sau prin mulţimea documentelor unui site. În calitate de referinţă poate servi un cuvînt, o frază, o imagine sau orice alt element al paginii Web. Prima versiune HTML a fost lansată în 1989 (proiectată de Tim Berners-Lee*). Chiar dacă unele programe de explorare nu recunosc toate cuvintele-cheie ale limbajului HTML, acesta rămîne a fi unul dintre cele mai utilizate şi mai moderne limbaje pentru elaborarea paginilor Web. Fişierele HTML sînt fişiere în format ASCII, deci pot fi create cu orice editor de texte. Fără a exagera, menţionăm că proiectarea unei pagini Web simple se realizează (după cum veţi vedea ulterior) foarte uşor. Prin element al unui document HTML vom înţelege orice componentă a structurii documentului: tabel, paragraf, listă, titlu, buton, casetă de text, imagine etc. Pentru a marca elementele unui fişier HTML, se utilizează diferite cuvinte-cheie, numite etichete sau marcaje (tags). Orice etichetă se încadrează între simbolurile < şi >. Etichetele, de regulă, sînt pereche pentru încadrarea unui element. Eticheta de sfîrşit arată ca şi cea de început, mai avînd în faţa ei caracterul / (slash). O etichetă de început poate avea unul sau mai multe atribute care se pot specifica în forma următoare: < E t i c h e t ă a = v , a = v , . . . a = v >, unde v este valoarea atributului a . 1 1 ' 2 2 ' 1 1 7 1 1 De reţinut că limbajul HTML nu face diferenţă dintre literele mari şi mici. * S ir Tim othy Jo n (Tim ) Berners-Lee (n. 08.06.55) - programator englez, inventator al limbajului HTML şi al WWW-ului, director al Consorţiului WWW (W3C), organizaţie care tutelează standardele Webului. 122 12.1.2. Structura generală a unui docum ent HTML Un document HTML are, de regulă, următoarea structură: Începutul documentului Titlul documentului < / t it l e > < / head> Secţiunea de antet a documentului Conţinutul documentului < / body> Secţiunea de conţinut a documentului < / html> Sfîrşitul documentului • Textul scris între marcajele < t i t l e > şi < / t i t l e > este afişat pe bara de titlu a ferestrei programului de explorare. • Etichetele < body> şi < / body> cuprind conţinutul propriu-zis al documentului HTML, care va fi afişat în fereastra programului de explorare şi va fi văzut de utilizator. Menţionăm cîteva dintre atributele etichetei < body >: - bgcolor = "#nnnnnn ^", unde ' sînt numere hexazecimale care de- 1 2 3 4 5 6 termină intensitatea culorilor roşu, verde, respectiv, albastru ale fundalului paginii. Culoarea poate fi precizată şi prin numele ei (red, blue, black, yellow, green, cyan, purple, white, gray etc.); - te x t = "#n1n2n3n4n5n6" specifică culoarea textului; - backgrou n d = "URL", unde URL este adresa şi numele fişierului grafic a cărui imagine va fi utilizată ca fundal al documentului; - leftmargin = "n", unde n este număr natural, stabileşte distanţa în pixeli dintre marginea stîngă a ferestrei programului de explorare şi marginea stîngă a conţinutului paginii; - topm argin = "n", unde n este număr natural, stabileşte distanţa în pixeli dintre marginea de sus a ferestrei programului de explorare şi marginea de sus a conţinutului paginii. E x e m p lu : Următorul fişier HTML interpretat de un program de explorare va afişa o pagină Web cu fundalul de culoare aqu a şi textul de culoarea #FF2233. < T itle > Exemplu < /T itle > < / html> text="#FF2233"> Întrebări si exerciţii > > O Explicaţi semnificaţia referinţelor într-un document Ht m l . © Ce editor de texte poate fi folosit pentru crearea unui fişier HTML? e Ce înţelegeţi prin element al unui document HTML? O Ce semnificaţie au etichetele într-un document HTML? e Ce simboluri se utilizează pentru a pune în evidenţă o etichetă? J 23 © Care este deosebirea dintre eticheta de început şi cea de sfîrşit? © Care este structura generală a unui document HTML? O Cum se utilizează etichetele ? © La ce folosesc etichetele şi şi care sînt atributele lor? © Creaţi o pagină Web cu fundalul galben şi textul verde, conţinutul paginii fiind afişat la 110 pixeli de la marginea stîngă şi 105 pixeli de la marginea de sus ale ferestrei programului de explorare. 0 Creaţi o pagină Web cu fundalul albastru şi textul alb, conţinutul paginii fiind afişat la 10 pixeli de la marginea stîngă şi 15 pixeli de la marginea de sus ale ferestrei programului de explorare. © Ce va afişa documentul HTML cu următorul conţinut? Ce e s t e un f i s i e r . h t m l ? < T i t l e > PROBLEMA < / T i t l e > < /H ead> Care e s te s t r u c t u r a unui document .htm l? © Creaţi o pagină Web care va afişa pe bara de titlu a ferestrei programului de explorare textul UN DOCUMENT HTML şi va avea în calitate de fundal o imagine. 12.2. Formatarea textului • În HTML se utilizează 6 niveluri de titlu, care pot fi specificate cu ajutorul etichetelor şi , unde n poate lua valori de la 1 la 6. Fiecare dintre aceste perechi de etichete stabilesc un anumit nivel de titlu. Nivelul 1 este cel mai proeminent, iar nivelului 6 îi corespund cele mai mici şi mai subţiri caractere. Etichetele de titlu pot avea atributul align = "tip", unde tip este unul dintre cuvintele center, left, right, pentru stabilirea modului de aliniere a titlului. • Spre deosebire de un editor de texte obişnuit, HTML nu ţine cont de lungimea textului, de returul de car (Enter) şi de numărul consecutiv de spaţii. Acestea din urmă vor fi afişate ca un singur spaţiu. Programul de explorare afişează din rînd nou un text, dacă acesta este precedat de unul din marcajele
,
,

, 

 sau 
.
a) Astfel, textul cuprins între etichetele  şi < /P > se consideră paragraf. Eticheta


 de asemenea acceptă atributul align.
b) Eticheta 
 realizează trecerea la o linie nouă în paragraful curent.
c) Textul încadrat între etichetele 

, 
este afişat exact aşa cum este scris,
deci este un text preformatat.
d) Deseori un bloc de text se formatează cu ajutorul etichetelor 

, 
.
Eticheta 

 poate avea atributele align şi nowrap (care interzice întreruperea
rîndurilor de programul de explorare). Un bloc 

...
poate include alte
subblocuri. În acest caz, alinierea precizată de atributul align al blocului are efect
asupra tuturor subblocurilor incluse în blocul 

.
e) Elementele cuprinse între etichetele 
 şi 
sînt automat centrate.
• Blocul de text cuprins între etichetele  şi  va fi afişat într-un rînd.
Dacă fereastra programului de explorare va fi micşorată de utilizator, se poate întîmpla
ca textul să fie trunchiat.
124
• Liniile orizontale sînt folosite pentru divizarea unei pagini în secţiuni logice. În
funcţie de necesitate, eticheta 

, care inserează o linie orizontală, poate include
cîteva atribute: align (stabileşte alinierea liniei); size (specifică înălţimea liniei în pixeli);
w id th (specifică lăţimea liniei în pixeli sau în procente faţă de lăţimea ferestrei programului de explorare); color (specifică culoarea liniei); noshade (specifică o linie fără nicio
evidenţiere).
• Fontul unui text poate fi precizat utilizînd marcajele  şi . El poate
fi caracterizat de următoarele atribute: face (precizează familia de caractere şi poate avea ca
valoare una sau mai multe constante delimitate prin virgule, cum ar fi arial, serif, cursive,
m onospace, fa n ta sy etc.); color (precizează culoarea fontului); size (specifică mărimea
caracterelor şi poate avea ca valoare constantele 1, 2, ..., 7 sau +1, +2, ... (mărind astfel
dimensiunea caracterelor faţă de dimensiunea curentă), sau -1, -2, ... (micşorînd astfel
dimensiunile caracterelor faţă de dimensiunea curentă)); w eigh t (determină grosimea
caracterelor, avînd valori posibile 100, 200, ..., 900).
Exemplul 1 (fig. 12.1):


< T itle > Text p re fo rm a ta t < /T itle >

 C h is in a u < /H 1 >




Sectoarele C h isin a u lu i:< /H 2 >


C entru
B uiucani
R isc a n i
B o tan ica
C iocana









 •
• Pentru a pune în evidenţă un fragment de text, se utilizează stilurile. Acestea se
împart în două categorii:
a) stilurile fizice, care stabilesc înfăţişarea exactă a textului;
b) stilurile logice, care marchează textul în funcţie de semnificaţia lui.
Stilurile fizice afişează acelaşi text la fel în orice program de navigare. Pentru stabilirea
stilului fizic se utilizează etichetele:
, < /B > - text cu caractere îngroşate (bold);
< i> , < / i > - text cu caractere înclinate (italic);
, < / u > - text cu caractere subliniate;
J 25
< t t >, < / t t > - text cu caractere monospaţiate;
< b i g >, < / b i g > - text cu caractere mai mari cu o unitate decît cele curente;
< small >, < / small > - text cu caractere mai mici cu o unitate decît cele curente;
< s u b >, < / s u b > - text cu caractere aliniate ca indice;
< s u p >, < / s u p > - text cu caractere aliniate ca exponent;
< s >, < / s > - text cu caractere tăiate de o linie.
Etichetele pentru stilurile fizice pot fi imbricate.
E x e m p lu l 2 (fig. 12.2):


< T i t l e > E x e m p lu l 2 < / T i t l e >


 S t i l u r i HTML




< H 3 > S tilu ri fizice:
T ext o b is n u it
Text cu c a r a c te r e in g ro sate< /B >
Text cu c a r a c te r e in c lin a te < /I >
Text cu c a r a c te r e su b lin ia te < /U >
Text cu c a r a c te r e m onospatiate
Text cu c a r a c te r e m a rite < /b ig >
T ext cu c a r a c te r e m ic so ra te < /sm a ll>
Y = X < su p > 2 < /su p >
M = (m < sub> 1< /sub> , m < sub> 2< /sub> )
Text t a i a t < / s >
Text cu c a r a c te r e in g r o s a te s i in c lin a te < /I> < /B >




< / html>
12 Exemplul 2 - W in d o w s In te r n e t Explorer (II@ B
i ' r & D:\exemplul2.html v j |* * | X .| ÎGoogle 11J
; File Edit View Favorites Ţ o d s Help
Hi | ^ E x e m p lu l 2 | | ^ ^ S3 ras | - ”
Stiluri HTM L
S tilu r i fiz ic e i
T ext o b iş n u it
T ext cu c a r a c te r e in g ro s a te
T e x t cu caractere înclinate
T ext cu c a r a c te r e s u b lin ia t e
T e x t cu c a r a c t e r e m o n o s p a tia te
T e x t c u c a r a c t e r e m ă r i t e
Y = X 2
M = (n^, nţ,)
Text cu c a r a c te r e Îngroşate si. Înclinate
a
^ My Com puter ^ 100% -
Fig. 12.1 Fig. 12.2
I 126
Stilurile logice depind de modul de configurare a programului de navigare şi ţin cont
de rolul textului în cadrul paginii Web. Pentru ele se utilizează următoarele etichete:
< em>, < / em> - text evidenţiat (de regulă, italic);
,  - text important (de regulă, bold);
< kbd >, < / kbd > - text cules de la tastatură (de regulă, font cu grosime fixă);
< code >, < / code > - text de program pentru calculator (de regulă, font cu grosime fixă);
< d f n >, < / d f n > - text-definiţie (de regulă, italic);
,  - identificator de variabilă;

, 
- text-adresă;
< c i t e >, < / c i t e > - text-citată.
• Una dintre modalităţile de includere a semnelor diacritice române într-un document HTML este codificarea directă a lor prin &-consecutivităţi (escape-consecutivităţi).
Unele programe de explorare recunosc o &-consecutivitate dacă sfîrşitul ei este marcat
cu simbolul ;.
Litera Ă ă Â â Î î Ş ş Ţ ţ
Codul Ă ă Â â Î î Ş ş Ţ ţ
De asemenea, &-consecutivităţile se folosesc pentru reprezentarea diferitor simboluri
speciale:
Simbolul & < >
CC ® © spaţiu §
Codul & < > " ® ©   §
Simbolul ± X 1 1/2 1/4 3/4 o
Codul ± × ¦ ½ ¼ ¾ °
E x e m p lu l 3 (fig. 12.3):

< H e a d > < T itle > E x em p lu l 3 < /T itl e > < B o d y >



A c e s t c a p i t o l vă învaţă să crea& #355i p a g i n i Web




< / html>
Fig. 12.3
127
Întrebări si exerciţii * >
O Care etichetă indică un nivel de titlu?
e Cîte niveluri de titlu se pot utiliza în HTML?
e Care sînt atributele etichetei de titlu?
O Care etichete se utilizează pentru a delimita un paragraf?
© Ce etichete se folosesc pentru trecerea în rînd nou?
© Cum se inserează o linie orizontală?
© Ce etichete se folosesc pentru specificarea fontului?
O Numiţi atributele etichetei .
© Ce sînt stilurile şi la ce folosesc?
Care este deosebirea dintre stilurile logice şi cele fizice?
© Numiţi etichetele pentru punerea în evidenţă a stilurilor: a) logice; b) fizice.
© Creaţi o pagină Web pentru un magazin, astfel încît denumirea magazinului să apară ca un
titlu de nivelul 1 avînd culoare neagră. Mai jos se vor afişa produsele unui stoc. Denumirea
stocului va avea nivelul 3, iar produsele lui vor fi prezentate ca un text preformatat. Denumirea
magazinului va fi delimitată de stoc printr-o o linie orizontală de grosimea 4 şi de culoare
albastră, aliniată la stînga şi ocupînd 80% din lăţimea ferestrei programului de explorare.
© Creaţi o pagină Web care va afişa două teoreme de congruenţă a triunghiurilor. Cuvîntul Teorem a
va fi scris ca un titlu de nivelul 3, avînd culoarea neagră, caractere îngroşate şi subliniate. Cele
două enunţuri vor fi înclinate şi delimitate unul de altul cu o linie roşie orizontală de grosimea
2, aliniată la centru, avînd lungimea 70% din lăţimea ferestrei programului de explorare.
© Creaţi o pagină Web care va afişa în centrul paginii formula:
a) (a + b)2 = a2 + 2 a b + b2;
b) (a1 + a2 + a3)2 = a12 + a22 + a32 + 2a1a2+ 2 a 1a3 + 2 a2a3;
c) | a + b| < |a| + |b|, pentru orice numere nenule a şi b.
© Creaţi un document HTML care va afişa următoarea pagină Web (fig. 12.4 a, b):
f i PROBLEMA1 CU LINII - Windows Inter... [_ J ^ x ]
0 - 0 * | D:\pr3.html v ||^ t Xi] jGoogle
File Edit View Favorites Ţools Help
& & jgPROBLEMAl CU LINII | £1 KL ”
-
—
J
^ My Computer ^100% *
a) b)
Fig. 12.4
© Creaţi o pagină care va afişa o poezie cu titlul de culoare verde, centrat, pe fundal galben, cu
nivelul de titlu 3, despărţit de restul textului cu o linie de grosimea 5 şi lungimea 50% din
lăţimea ferestrei programului de explorare. Caracterele textului vor fi îngroşate şi înclinate.
128
12.3. Liste
Pentru organizarea structurată a informaţiei unui document HTML se pot folosi listele.
Deosebim:
a) liste n eordon ate;
b) liste ord o n a te ;
c) liste de definiţii.
L istele n e o rd o n a te se utilizează pentru a indica o succesiune fără o subordonare ierarhică.
• Pentru a specifica începutul şi sfîrştul unei astfel de liste, se utilizează etichetele
 şi 
(u n ordered list - „listă neordonată”).
• Orice element al listei este precedat de eticheta
 (list item - „element al listei”).
Fiecărei dintre etichetele 
,
 i se poate ataşa atributul type, care poate lua una
dintre următoarele trei valori: Circle, Square, D isc. Acest atribut specifică marcajul care
precede fiecare element al listei.
L is te le o r d o n a te (se mai numesc liste n u m erotate) se încadrează între etichetele 

şi 
(ordered list - „listă ordonată”).
Ca şi în cazul listei neordonate, orice element al listei ordonate este precedat de eticheta 
. Atributul typ e al etichetei 
 poate lua una din valorile: A, a, I, i, 1.
Dacă atributul type nu este specificat, elementele listei vor fi numerotate cu cifre arabe.
L is te le d e d e f in iţii se utilizează, de regulă, pentru organizarea glosarelor. Termenii
unui glosar sînt listaţi în ordine alfabetică, fiecare fiind urmat de definiţia lui.
• Listele de definiţii se încadrează între etichetele
 şi 
(definition list - „listă
de definiţii”).
• Fiecare termen al listei este precedat de eticheta
 (defin ition term - „termen
definit”), iar definiţia (descrierea) lui - de eticheta 
 (definition description - „descrierea definiţiei”).
O b s e r v a ţii:
1. Listele pot fi imbricate.
2. În interiorul unei liste sînt permise utilizarea etichetelor  şi 
 şi a elementelor de formatare a textului.
3. O listă ordonată poate fi întreruptă pentru un text. În acest caz se folosesc două
seturi de etichete 

: una pentru prima parte a listei (pînă la textul inserat)
şi alta pentru partea a doua (după text). În acest caz, etichetei 
 din partea
a doua a listei i se ataşează atributul sta rt cu valoarea întreagă, care indică începutul
numerotării.
E x e m p lu l 1 (fig. 12.5):

 < T itle > L is te n e o rd o n a te < /T itle > 










 U nele dom enii a le m atem aticii< /H 4>

A
t"1
H
V
A lgebra
 G eom etria

 T e o ria e c u a t i i l o r d i f e r e n t i a l e
129

 A n a liz a m atem atica




 U nele d om enii a l e in f o r m a ti c ii < / H 4 >

 T e o ria a l g o r i tm ilo r

 P r o g r a m a r e a Web

 T e o ria b a z e lo r de d a te

 C rip to g rafia


E x e m p lu l 2 (fig. 12.6):

 < T itle > L is te o r d o n a te < /T itle > 



 U nele d i s c i p l i n e s t u d i a t e i n c l a s a a X-a 





 Limba romana

 M atem atica

 in fo rm a tic a
< / o l>










 U nele d i s c i p l i n e s t u d i a t e
in c la s a a X ii-a

 in fo rm a tic a

 B io lo g ia

 M atem atica
< / o l>


Fig. 12.5 Fig. 12.6
130
E x e m p lu l 3 (fig . 1 2 .7 ):

 < T itle > L is ta de d e f in i tii< /T it le > 





 C i t e v a n o ţ i u n i d i n i n f o r m a t i c a 




 C o n s t a n t a 
 - m arim e a c a r e i v a l o a r e nu s e p o a t e
modifica pe p a r c u rs u l e x e c u ţie i a lg o ritm u lu i

 V a r i a b i l a 
 - m arim e a c a r e i v a l o a r e s e p o a t e modifica pe
p a r c u rs u l e x e c u tie i a lg o ritm u lu i

 I d e n t i f i c a t o r 
 - s e c v e n ta de c a r a c t e r e c a r e in c e p e (de reg u la ) cu
o l i t e r a , ce p o a t e fi urm ata de n i c i una sa u de mai m u lte l i t e r e sa u c i f r e ,
u t i l i z a t a p e n tru a denumi c o n s ta n te , v a r ia b ile , t i p u r i , subprograme.

Întrebări si exerciţii
O Cu ce scop se folosesc listele?
e Ce tipuri de liste cunoaşteţi?
e Numiţi etichetele utilizate pentru fiecare tip de listă.
O Cum se specifică un element al unei liste?
e Care sînt atributele acestor etichete şi ce valori pot primi acestea?
© Creaţi o pagină Web care va afişa titlul„Disciplinele preferate"pe fundal bleu, de nivelul 4, după care
va urma o listă neordonată cu disciplinele respective. În calitate de marcaj se va folosi pătratul.
& Creaţi o pagină Web care va afişa titlul„Disciplinele studiate în primul semestru al clasei a 12-a"
pe fundal bleu, de nivelul 3, după care va urma o listă neordonată cu aceste discipline. În
calitate de marcaj se va folosi discul. După listă vor fi 2 rînduri goale, apoi va apărea o altă listă
neordonată cu disciplinele la care urmează să susţineţi examenul de bacalaureat.
O Creaţi o pagină Web care va afişa titlul „Lista elevilor clasei a 12-a" pe fundal de culoare a q u a ,
de nivelul 5, aliniat la centru, după care va urma o listă neordonată cu numele elevilor clasei
voastre. După listă vor fi 2 rînduri goale şi va apărea altă listă neordonată cu numele elevilor
care au absolvit clasa a 11-a cu media generală mai mare decît 8.
© Creaţi o pagină Web care va afişa titlul „CUPRINS" de nivelul 3, după care vor urma capitolele
unei cărţi şi temele cuprinse în aceste capitole. Folosiţi liste ordonate şi liste imbricate.
Fig. 12.7
131
© Creaţi o pagină Web care va afişa 2 liste ordonate:
prima cu titlul„produse alimentare" de nivelul 2, în care
elementele vor fi numerotate, iar cealaltă cu titlul „Produse industriale" de nivelul 3, în care elementele vor fi
marcate cu litere.
0 Creaţi o pagină Web care va afişa o listă ordonată a
unor produse culinare. Lista va fi întreruptă de următorul text cursiv: „A ceste p ro d u se culinare sîn tp e p la cu l
m eu, a cum u rm ează p ro du sele culinare care nu-m i plac:".
Titlul listei va avea nivelul 4 şi culoarea albastră.
© Creaţi un document HTML care va afişa pagina Web
din figura 12.8.
© Creaţi o pagină Web care va afişa definiţiile a 5 noţiuni
geometrice precedate de titlul „Noţiuni geometrice"
de nivelul 3 avînd culoare gri, aliniat la dreapta şi
despărţit de noţiuni printr-o linie orizontală neagră cu
înălţimea 3, aliniată la centru. Fig. 12.8
12.4. Referinţe
În paragraful 12.1 am menţionat că referinţele (se mai numesc linkuri, legături, hiperlegături) reprezintă, probabil, cea mai importantă caracteristică a limbajului HTML. Prin
intermediul unei referinţe se poate ajunge rapid către altă secvenţă a documentului curent
sau către alt document (pe acelaşi sau pe alt server). Referinţele sînt zo n e active ale paginii
Web, în sensul că la executarea unui clic pe ele, programul de explorare va actualiza pagina.
• Pentru a pune în evidenţă o referinţă, se folosesc etichetele  (de la „ancoră”) şi
. Atributul href al etichetei  este obligatoriu. Valoarea acestui atribut este numele
fişierului HTML cu care se face legătura. Numele acestui fişier se scrie între simbolurile
" şi ". Textul sau imaginea cuprinsă între etichetele  şi  devine zonă activă.
Astfel, o referinţă se declară în modul următor:
 te x t sau im a g in e< /A > ,
unde URL (U niform Resourse L ocator - identificator unic al resursei) este numele fişierului-destinaţie.
O bservaţie: În acest paragraf vom examina doar referinţe, în care zona activă este un text.
În general o referinţă poate:
- lega documentul curent cu un document aflat în acelaşi director;
- lega documentul curent cu un document aflat pe acelaşi disc local;
- lega documentul curent cu un alt site;
- lega documentul curent cu o altă secvenţă a aceluiaşi document;
- lega documentul curent cu o secvenţă a altui document;
- lansa la execuţie o aplicaţie de expediere a mesajelor electronice;
- lega documentul curent cu un fişier de format arbitrar cu scopul creării unei copii
pe disc a acestui fişier.
a) Dacă documentul referit se află în acelaşi director, atunci URL-ul este chiar numele
acestui document.
b) Dacă documentul referit se află pe acelaşi disc local, dar într-un alt director, atunci
se utilizează adresarea relativă.
132
c) Dacă documentul referit reprezintă un alt site, atunci se indică adresa acestui site,
scrisă între simbolurile " şi
E x e m p lu l 1 (fig. 12.9):
Prezentăm conţinutul fişierului exem plul4.htm l,
care conţine legături către:
• fişierul ex em plu l1.h tm l (fişierul referit se află
în acelaşi director);
• fişierul exem plul2.htm l (fişierul referit se află în
subdirectorul EXEMPLE al directorului curent);
• fişierul exem plu l3.h tm l (fişierul referit se află
în directorul MAPA, deci pe un nivel ierarhic
imediat superior);
• site-ul Universităţii de Stat din Tiraspol:
http://www.ust.md.

 < T itle > R e f e r in te < /T itle > 





  T r e c i l a e x e m p lu l 1 < /a >
  T re c i l a exemplul 2  


  T r e c i l a e x e m p lu l 3 < /a > < /p>


  U n iv e r s ita te a de S ta t d in
T ira s p o l  








d) O referinţă către o altă secvenţă a aceluiaşi document se numeşte ancoră cu num e.
În acest caz URL-ul este numele atribuit secvenţei, precedat de simbolul #. Pentru
a atribui unei secvenţe un nume, se va scrie o ancoră de genul:
< A n am e = num ele secvenţei> , unde numele secvenţei se scrie între simbolurile
" şi " .
Fig. 12.9 Fig. 12.10 Fig. 12.11
133
e) URL-ul către o secvenţă a altui document este format din numele fişierului şi
numele secvenţei, ultimul fiind precedat de simbolul #.
De exemplu, URL-ul secvenţei cu numele capitolul2 al fişierului exem plu l1.h tm l din
acelaşi catalog este " e x e m p l u l l . h t m l # c a p i t o l u l 2 " .
E x e m p lu l 2 (fig. 12.10, vezi p. 133):

 < T itle > R e f e r in te < /T itle > 






A

 fost

 odata

 ca-n

 povesti


A

 fost

 ca

 < P > niciodata< /P >
Din

 rude

 mari

 < P > im p aratesti< /P >
O

 prea

 frumoasa

 fata


 T re c i l a in c e p u t 






f) Pentru lansarea la execuţie a unei aplicaţii de expediere a mesajelor electronice
(se presupune că această aplicaţie este instalată pe calculatorul utilizatorului) se va
scrie o ancoră de forma:
 .
g) Pentru a crea o referinţă către un fişier de format arbitrar cu scopul creării unei
copii pe disc a acestui fişier sau cu scopul lansării la execuţie a aplicaţiei care va
interpreta astfel de fişiere, se va utiliza o ancoră de forma:
< A href= U R L > te x t ,
unde URL este numele fişierului, iat te x t este zona activă.
O b se rv a ţie : Etichetei  i se poate ataşa atributul title, care se foloseşte pentru
a furniza informaţii suplimentare despre semnificaţia legăturii, atunci cînd mouse-ul este
plasat asupra ei. Valoarea atributului title se scrie între simbolurile " şi ".
E x e m p lu l 3 (fig. 12.11, vezi p. 133):

 < T itle > R e f e r in te < /T itle >




Exemplul 3





 C u t ia p o ş t a l a a r e v i s t e i D e l t a < /a >
 S alv eaza ex em p lu l.d o c 

 


134
Executînd un clic pe referinţa S a lv e a z a e x e m p lu l6 .d o c , va apărea fereastra
din figu ra 12.12, care ne permite să creăm pe disc o copie a fişierului e x e m p lu l6 .d o c sau
să deschidem acest fişier în aplicaţia Microsoft Word.
Fig. 12.12
Întrebări si exerciţii y >
O Ce sem nificaţie au referinţele pentru o pagină Web?
© Care sînt etichetele folosite pentru declararea unei referinţe?
© Numiţi atributul obligatoriu pentru eticheta . Ce valoare poate avea acest atribut?
© Ce este o zonă activă?
© Care este form a generală de declarare a unei referinţe?
© Care elem ente ale unei pagini W eb pot fi referinţe?
© unde se poate afla docum entul referit?
© Ce este o a n c o ra cu n u m e ?
© Cum se atribuie num e unei secvenţe de docum ent HTM L?
© Explicaţi în ce caz sim bolul # se foloseşte la scrierea u RL-uIu î.
0 Cum se creează o legătură către o secvenţă din acelaşi docum ent?
© Din ce este form at u RL-uI unei secvenţe din alt docum ent?
© Cum dintr-un docum ent HTM L se poate lansa la execuţie o aplicaţie de expediere a m esajelor
electronice?
© Creaţi o pagină W eb care va afişa o listă cu d isciplinele studiate. Fiecare elem ent al listei
va fi o referinţă către un fişier (aflat în acelaşi director ca şi pagina Web) cu inform aţia despre
disciplina respectivă.
© Creaţi o pagină W eb care va afişa o listă ordonată cu denum irea unor universităţi din Republica
M oldova. Fiecare elem ent al listei va fi o referinţă către site-ul universităţii respective.
© Creaţi o pagină W eb care va afişa o listă de licee. Fiecare elem ent al listei va fi o referinţă către
fişierul (site-ul) liceului respectiv. pagina creată se va afla în directorul UCEE, iar fiecare fişier
referit - în subdirectorul cu num ele liceului. Toate subdirectoarele se vor afla în directorul
LICEE.
© Exam inaţi desenul exem plului 1. Care este URL-ul referinţei către fişierul:
a) exem plul1.htm l, dacă referinţa se află în fişierul exem plul3.htm l;
b) exem plul2.htm l, dacă referinţa se află în fişierul exem plul1.htm l;
c) exem plul4.htm l, dacă referinţa se află în fişierul exem plul2.htm l;
d) exem plul3.htm l, dacă referinţa se află în fişierul exem plul2.htm l?
© Creaţi o pagină W eb care va afişa o listă cu cîteva titluri de cărţi. Fiecare titlu va fio referinţă
către o scurtă prezentare în acelaşi docum ent HTM L a cărţii cu acest titlu.
J 35
MAPA1
MAPA3
1
MAPA2
■ ‘
MAPA4
© Examinaţi desenul. Care este URL-ul refe- m a pa o
rinţei către fişierul:
a) fl.h tm l, dacă referinţa se află în f4.html;
b) f2.html, dacă referinţa se află în f3.html;
c) f4.html, dacă referinţa se află în f2.html;
d) f4.html, dacă referinţa se află în f3.html?
© Examinaţi desenul. În ce director se află documentul HTML care conţine referinţa dacă
uRL-ul ei este:
a) "Mapa4/fisier4.html";
b) "Mapa1/Mapa2/Mapa4/fisier4.html";
c) "../ Mapa1/Mapa2/Mapa4/fisier4.html";
d) "../ ../Mapa3/fisier3.html"?
© Creaţi două pagini Web, astfel încît prima
va conţine cîteva referinţe către diferite
secvenţe ale paginii a doua, iar pagina a
doua - cîteva referinţe către diferite
secvenţe ale primei pagini. tisier3.html
® Creaţi o pagină Web care va afişa o listă cu referinţe către fişiere de diferite tipuri pentru a fi
deschise spre vizionare sau stocare.
■ jjn
a
1 1
1 1
isier1.html
U
D
1
12.5. Imagini
În afară de faptul că imaginile furnizează informaţii, ele pot conferi unei paginii Web
atractivitate. Totuşi utilizarea lor într-un document HTML se va face raţional, deoarece
fiecare imagine „consumă” timp pentru descărcarea, decodificarea şi afişarea ei.
Fişierele-imagini au diferite formate, cele mai utilizate în Web design fiind:
- GIF (G rafics Interchange F orm at) - fişiere cu extensia .gif;
- JPEG (Join P hotographic E x p ert G roup) - fişiere cu extensia .jpeg sau .jpg;
- BMP (B itM ap) - fişiere cu extensia .bmp.
Pentru a insera o imagine, se utilizează eticheta , cu atributul obligator SRC,
a cărui valoare este adresa URL a imaginii:

Sintaxa pentru URL este identică cu cea utilizată pentru referinţe (vezi paragraful 12.4).
În afară de atributul SRC, eticheta  poate avea următoarele atribute:
• ALIGN, utilizat pentru alinierea imaginii şi care are una din valorile top (aliniere
deasupra - partea de sus a imaginii se aliniază cu partea de sus a textului ce precede
imaginea), bottom (aliniere la bază - partea de jos a imaginii se aliniază cu linia de bază a
textului), m iddle (aliniere la mijloc - mijlocul imaginii se aliniază cu linia de bază a textului
ce precede imaginea), left (aliniere la stînga - textul şi celelalte elemente sînt plasate în
dreapta), righ t (aliniere la dreapta - textul şi celelalte elemente sînt plasate în stînga);
• ALT, utilizat pentru afişarea unui te x t explicativ în locul imaginii (în cazul în care
programul de explorare nu încarcă imaginea - opţiune stabilită de utilizator sau o altă
cauză) şi care are ca valoare însuşi textul explicativ (scris între "şi");
• WIDTH şi HEIGHT, folosite pentru specificarea mărimii în pixeli a imaginii;
• BORDER, folosit pentru crearea în jurul imaginii a unui chenar de grosime (în
pixeli) egală cu valoarea atributului;
136
• HSPACE şi VSPACE, utilizate pentru precizarea distanţei în pixeli pe orizontală,
respectiv pe verticală, dintre imagine şi restul elementelor din pagină.
E x e m p lu l 1 (fig. 12.13):


 E xem plul 1. Im a g in e < /T itle >






 U n i v e r s i t a t e a de S t a t d i n T i r a s p o l < / H 3 >

U n i v e r s i t a t e a de S t a t d i n T i r a s p o l (UST) e s t e p r im a i n s t i t u t i e de
in v a tam in t s u p e r io r d in R epublica Moldova, fo n d a ta l a 1 octom brie 1930.

Din an u l 1992 UST se afla i n C h is in a u . UST a p r e g a t i t p e s t e 80 000 de
s p e c ia lis ti cu stu d ii superioare. M ulti d in tre e i au devenit p e rso n a lita ti
marcante in diverse domenii - invatam int p re u n iv e rs ita r s i u n iv e rs ita r,
sa v an ti in pedagogia s i economia n a tio n a la . M a jo rita te a c a d re lo r de
i n s t r u i r e d e t i n t i t l u r i s t i i n t i f i c e s i d id a c ti c e . UST colaboreaza cu i n s t i t u t i i
d in t a r a s i de p e s t e h o t a r e - Romania, R u s i a , U c r a i n a , SUA, G e rm a n ia ,
I t a l i a , P o r tu g a lia s.a.


Imaginile pot fi utilizate şi în calitate de referinţe.
E x e m p lu l 2 (fig. 12.14):
Următoarea pagină Web afişează 4 imagini-referinţă. La executarea unui clic pe una
dintre referinţe se va afişa imaginea corespunzătoare avînd dimensiuni reale.
Această tehnică este deseori folosită la crearea aşa-numitelor „galerii-foto” (referinţele
pot fi fişiere de dimensiuni mai mici decît fişierele-imagini referite). Fişierele-imagini se
află în subdirectorul DESENE al directorului curent.
Fig. 12.13
j j M y Com puter ^ 100% * _
Fig. 12.14
137

 < T itle > Im a g in i< /T itle > 

 < im g s r c = D e s e n e / d e s e n 1 . j p g w id th =
=50 height=50>
 < im g s r c = D e s e n e / d e s e n 2 . j p g w id th =
=50 height=50>
 < im g s r c = D e s e n e / d e s e n 3 . j p g w id th =
=50 height=50>
 < im g s r c = D e s e n e / d e s e n 4 . j p g w id th = 5
=0 height=50>


Întrebări si exerciţii * >
O Care sînt form atele fisierelor-im agini acceptate de program ele de explorare Web?
e Ce etichetă se utilizează pentru inserarea unei im agini într-un docum ent HTM L? Care este
atributul obligatoriu al acestei etichete?
e Ce atribute neobligatorii poate avea eticheta pentru inserarea im aginilor într-un docum ent
HTM L şi care sînt valorile acestor atribute?
O Cum poate fi creată o referinţă-im agine?
© Creaţi o pagină Web care va afişa un CV cu fotografia autorului acestui CV, aliniată la centrul paginii.
© Creaţi o pagină W eb care va afişa cîteva im agini-referinţe cu d im ensiunile 5 cm x 5 cm . La
executarea unui clic pe fiecare im agine, program ul de explorare va afişa această im agine cu
dim ensiunile 15 cm x 15 cm .
© Creaţi o pagină W eb care va afişa un text despre localitatea natală cu titlul de nivelul 5 avînd
culoarea neagră şi fundalul gri. O im agine a localităţii va apărea în chenar şi va fi aliniată la
dreapta textului.
O Creaţi o pagină W eb care va afişa graficul unei funcţii.
In d ic a ţie : Acest grafic poate fi construit cu program ul M icrosoft Excel.
© Creaţi o pagină W eb care va afişa o organigram ă.
® Creaţi un docum ent HTM L care va afişa următoarea pagină Web (fig . 12 .1 5 a , b ) (se pot folosi alte
im agini):
a)
Fig. 12.15
b)
138
12.6. Tabele
În cele mai dese cazuri tabelele se utilizează pentru organizarea structurată a datelor.
De asemenea, aşa cum fiecare celulă a tabelului poate avea propriile culori, stiluri, efecte
pentru text şi fundal, tabelele se folosesc şi pentru soluţii de design.
Un tabel, de regulă, are:
a) titlu pentru specificarea numelui tabelului;
b) rîn du ri şi coloane;
c) cap de tabel („table header”) pentru descrierea conţinutului coloanelor sau