Multimedia © Georgeta Drulă 1

UNIVERSITATEA DIN BUCUREŞTI

Facultatea de Jurnalism şi Ştiinţele Comunicării

MULTIMEDIA

Titular: Conf. dr. Georgeta DRULĂ

TUTORAT 1:
Definiţie. Aplicaţii. Caracteristici ale documentului multimedia.
Etape în realizarea documentului multimedia
Echipa de realizatori
Interfeţe pentru documentul multimedia online şi offline

TUTORAT 2:
Componente multimedia: Imaginea fixă.
Componente multimedia: Animaţia
Componente multimedia: Sunetul
Componente multimedia: Video

TUTORAT 3:
Asamblarea unui document multimedia offline cu Director
Realizarea unui document multimedia online

Obiective curs:
- Cunoaşterea etapelor de numerizare şi a caracteristicilor componentelor
multimedia digitale ce participă la realizarea documentelor multimedia;
- Cunoaşterea caracteristicilor şi modalităţilor de lucru cu documentul
multimedia online şi offline, cu suport de difuzare reţeaua Internet şi suportul optic de
distribuţie CD-ROM.
Multimedia © Georgeta Drulă 2

TUTORAT 3
1. Asamblarea unui document multimedia offline cu Director
Cu un soft authoring ca Macromedia Director se pot crea documente
multimedia offline care să animeze site-uri Web sau se pot realiza chioşcuri şi
prezentări interactive pentru educaţie, divertisment sau informare stocate pe CD-ROM
sau DVD-ROM. Documentul creat de Director conţine medii, filme şi fişiere diferite
şi multiple. Manevrarea lui este mai complexă decât manevrarea altor documente. În
plus, formatul fişierului în care se lucrează documentul este diferit de formatul în care
se va face distribuţia acestuia. Astfel, un proiect multimedia Director poate fi
distribuit ca format film Shockwave, acceptat de browserii web şi ca format proiector
executabil ce se execută pe platformele utilizator ca aplicaţii independente.

Softul author Macromedia Director asamblează proiectul

multimedia răspunzând de sincronizarea spaţială, temporală, intermedii şi interactivă
dintre componentele media de natură diferită.

Documentele multimedia se realizează pe un storyboard care are o anumită

structură. Această structură este liniară, arborescentă sau interactivă de tip “hiper”,
compusă din scene individuale caracterizate de proprietăţi şi din legături (link-uri)
între acestea.

Rolul principal al produselor authoring este de a furniza o

modalitate de combinare şi de manevrare a diferitele medii pe ecran. Ajutate de un
număr mare de instrumente, de palete şi ferestre, precum şi de un limbaj inclus, aceste
produse sunt capabile să gestioneze în timp şi spaţiu, mediile digitale.

Software-ul authoring multimedia Director este un produs al firmei

Macromedia, cu suport biplatformă, Macintosh şi Windows - PC. Alături de alte
produse authoring, Director organizează proiectul asemănător tehnicii realizării
filmului, cu o serie de actori în distribuţie, cu cadre “trase” şi organizate, care în final
asigură derularea unui film, cu o viteză de maximum 25 - 30 de cadre pe secundă,
viteza derulării unei secvenţe video. În plus, anumite cadre se pot derula la viteze
particularizate în proiect, după necesităţile de prezentare a acestuia.
Softul Director organizează storyboard-ul şi evenimentele care îl compun pe
axa timpului, prin fereastra Score şi cu ajutorul unui limbaj script, inclus. Fereastra
Score asigură sincronizarea şi secvenţierea obiectelor şi evenimentelor printr-un tabel
de rânduri şi coloane, care sunt completate progresiv cu diferiţii participanţi la proiect,
 Multimedia © Georgeta Drulă 3

prin manevre ale creatorului de proiect sau prin intermediul script-urilor acţionate de
mesaje.
Tratarea mediilor şi a elementelor de interfaţă ca obiecte, permite setarea de
caracteristici şi de proprietăţi specifice fiecăruia, fixarea unui comportament autonom,
prin comenzi ale limbajului de programare specific Director, denumit Lingo.

Lucrul cu mai multe ferestre asigură organizarea în timp şi spaţiu a

componentelor multimedia.
O caracteristică specifică a soft-ului authoring multimedia Director este
posibilitatea sa de a lucra simultan cu numeroase ferestre care ajută la întocmirea
proiectului propriu-zis. Un proiect multimedia poate fi construit din mai multe fişiere-
film Director. La rândul său, fiecare film are o distribuiţie, un număr de elemente
multimedia participante, conform schemei:

Document multimedia offline

Film Director1 Film Director2 Film Director3 Film Director4

Scena 11 Scena 12 Scena 21 Scena 31 Scena 41 Scena 42

Scena 22
Scena 32 Scena 43
Scena 13
Fig Structura unui document multimedia offline realizat cu softul Director

Prezentarea ferestrelor Director implicate în realizarea unui proiect multimedia:

 Fereastra SCENĂ: Locul unde se întâmplă....totul
Proiectul multimedia se realizează şi se execută pe scenă (STAGE). Aceasta
reprezintă suprafaţa de creare şi de derulare în timp, pentru toate filmele Director.
Înainte de a trece la realizarea propriu-zisă a proiectului, se fixează proprietăţile
acestei suprafeţe, care se poate extinde chiar şi peste limitele ecranului. Filmul
Director de pe scenă se derulează, parcurgându-se axa timpului, chiar dacă şi alte
ferestre ale produsului sunt deschise şi active. Această facilitate permite urmărirea
filmului atât pe scenă, cât şi în fereastra de sincronizare şi organizare, Score, sau
urmărirea membrilor filmului în fereastra Cast. Un element pus în scenă trebuie
întotdeauna să fie înregistrat pe axa timpului în fereastra Score, pentru a participa la
realizarea filmului. Înregistrarea derulării filmului se realizează cu comenzile
cunoscute ale unui VCR: Play, Step Forward şi Stop, sau mai simplu prin fereastra
Control Panel care reglează, în plus, şi tempo-ul desfăşurării acestuia.
Multimedia © Georgeta Drulă 4

Setările proprietăţilor scenei pot fi suprafixate, prin anularea celor iniţiale,

apelând la opţiunile de proiecţie (Projector Options), opţiuni care vor fi folosite de
toate filmele Director, derulate sub un acelaşi proiector. Aceste opţiuni permit, în plus,
fixarea unei animaţii permanente pe background-ul scenei (comanda Movie
Properties).

 Fereastra CAST – specifică “distribuţia filmului”

Această fereastră prezintă într-un tabel sau sub formă de listă toate
componentele ce participă la realizarea proiectului multimedia. Ea conţine toate datele
grafice, sunetele, palete de culoare, script-uri Lingo, butoane de interacţiune,
animaţie, tranziţii, video digital, text precum şi alte fişiere de film Director. Un
document multimedia Director poate lucra cu mai multe ferestre Cast.
Fiecare element al ferestrei este însoţit de un număr, un icon şi eventual un
nume, ce se atribuie în momentul includerii sau creării lui în CAST şi îi identifică
poziţia în CAST Window.
Membrii CAST pot fi creaţi sau sunt importaţi sub forma unor fişiere în prima
locaţie liberă din fereastră, dacă iniţial, nu a fost selectată nici o altă poziţie
neocupată. Asupra ferestrei CAST se pot executa operaţiile obişnuite de editare:
tăiere, copiere sau ştergere de elemente. Fiecare membru CAST este caracterizat de o
mare varietate de proprietăţi ce pot fi fixate direct prin comenzi sau prin instrucţiuni
ale limbajului Lingo.

Fig. Componentele
multimedia care vor participa
într-un document multimedia realizat cu Director, afişate în fereastra cast

În cadrul unui proiect Director se poate lucra cu mai multe biblioteci CAST
care pot fi interne sau externe. Bibliotecile CAST interne sunt create odată cu
Multimedia © Georgeta Drulă 5

proiectul Director şi stocate în acelaşi fişier cu documentul. Bibliotecile externe sunt

stocate separat de un document şi pot fi folosite de mai multe fişiere Director.
Fişierele bibliotecă CAST externe au extensia .CST.

 Fereastra SCORE – organizează proiectul în timp

Este locul ce permite compunerea proiectului pentru animarea, afişarea şi
execuţia membrilor CAST. Fereastra este construită ca un tabel de coloane, ce
reprezintă cadrele (frames) executate la o anumită viteză specificată în canalul de
temporizare şi de rânduri ce reprezintă canalele în care se vor pune actorii, membrii
CAST. Fiecare canal este compus din şirul de cadre. Primele şase canale din SCORE
au destinaţie specială: de temporizare, pentru paleta de culori, două canale pentru
sunet, un canal pentru efecte speciale şi unul pentru script-uri care modifică cadrele.
Restul de canale sunt denumite canale sprite unde se aşează celelalte componente
multimedia. Un obiect aflat ca membru CAST, aşezat în SCORE pe un canal şi având
un anumit comportament la un moment dat pe axa timpului se recunoaşte sub
denumirea de sprite. Ordinea în care sprite-urile apar în SCORE determină aşezarea
lor pe scenă pe axa Oz, dând senzaţia de adâncime. Tot ceea ce se realizează pe scenă
trebuie să se înregistreze prin fereastra SCORE.

Fig. Derularea în timp a unui proiect prin fereastra Score

 Fereastra Marker – denumeşte cadrele cu o anumită etichetă, marker

Este tipul de fereastră ce permite furnizarea de informaţii suplimentare pentru
organizarea elementelor şi evenimentelor în SCORE. Fereastra ţine evidenţa unor
cadre care au fost denumite prin marker-e. Ea prezintă corespondenţa dintre numărul
cadrului şi numele acestuia şi este eficientă pentru generarea, editarea şi manevrarea
Multimedia © Georgeta Drulă 6

componentelor SCORE când se poate pierde numerotarea lor. Aceste markere se

păstrează indiferent cum se editează SCORE. De exemplu, cadrul cu numărul 43 se va
numi “cap3” şi se va apela cu acest marker şi nu prin numărul său.

Fig. Lista de markere ce separă proiectul în scene

3.2.2 Generarea unui proiect multimedia cu Director

Proiectul multimedia poate fi creat punând direct pe STAGE, într-o anumită
relaţie spaţială elementele din CAST. Această variantă este foarte eficientă în ceea ce
priveşte organizarea spaţială a proiectului. Relaţiile temporale dintre elementele
CAST ale proiectului trebuie ajustate prin intermediul ferestrei Score. În această
fereastră este uşor să se fixeze pentru fiecare element durata sa de execuţie, precum şi
sincronizarea elementelor care au timpi comuni de desfăşurare.

Principalele etape în generarea unui document multimedia offline cu softul

Director:

I. Se crează un fişier nou care va conţine proiectul şi pentru care vor fi setate opţiuni
legate de dimensiunea şi caracteristicile acestuia.
Întrucât proiectul se desfăşoară pe ecran trebuie aleasă o dimensiune a Stage-
ului exprimată în pixeli. Această dimensiune trebuie corelată cu dimensiunea
ecranului monitorului în lucru, dar şi cu dimensiunea cea mai frecventă pentru
ecranele unde va fi consultat proiectul. Neconcordanţa dintre dimensiunile scenei şi
dimensiunile de afişare ale ecranului duce la distorsionări sau eliminări din suprafaţa
de vizualizare a diferitelor elemente. Se pot alege dimensiuni standard, cunoscute ca
rezoluţii standard de ecran pentru scenele proiectului sau se poate lucra cu o
dimensiune particularizată a scenei, în concordanţă cu cele spuse mai înainte. De
asemenea trebuie precizată cota (valoarea lui X şi Y) punctului stânga sus unde va fi
poziţionată scena.
Redarea de calitate pe ecran a proiectului este influenţată şi de sistemul
coloristic de afişare, care poate fi System – Win sau Mac în funcţie de platforma
calculator folosită, poate fi GrayScale sau NTSC. În funcţie de sistemul coloristic se
Multimedia © Georgeta Drulă 7

va alege a anumită culoare de background pentru scenele unde se va desfăşura

proiectul. Toate aceste opţiuni sunt proprietăţi ale obiectului Movie.

Fig. Setarea caracteristicilor scenei prin paleta sa de proprietăţi

II. Crearea şi importarea elementelor media şi de interacţiune în CAST-ul

documentului multimedia.
Se poate stabili din acest moment care vor fi elementele ce vor compune
scenele. Director are posibilitatea de a importa diferite elemente (filme, sunet, video,
imagini) create şi stocate iniţial în alte fişiere, dar poate să şi creze elemente media şi
de interacţiune prin editoarele proprii, incluse. Fiecare element introdus va ocupa un
loc liber în CAST-ul proiectului şi va fi caracterizat de un anumit set de proprietăţi
precum şi de un comportament general.
Editoarele incluse programului Director permit crearea de texte, de forme
grafice vectoriale bazate pe descrieri matematice. Aceste elemente nu trebuie stocate
în fişiere separate, ele vor face parte din structura fişierului proiect.
Multimedia © Georgeta Drulă 8

Fig. Editorul de
desenare –
permite crearea
şi fixarea
proprietăţilor
formelor
desenate.

III. Completarea SCORE cu membrii din biblioteca CAST.

Crearea CAST-ului permite începerea asamblării propriu-zise a proiectului
multimedia. Aducerea membrilor CAST în celulele SCORE înseamnă declanşarea
modului înregistare în canalele în care aceştia sunt plasaţi. Plasarea membrilor CAST
pe scenă şi înregistrarea lor în SCORE ca sprite-uri se face prin operaţii drag & drop
cu ajutorul mouseului şi echivalează cu comanda Step Record. Când plasarea acestora
se face direct pe scenă şi nu în celule SCORE specificate, Director va fixa elementele
în primele celule găsite libere, cele mai apropiate de selecţia SCORE curentă.
Umplerea canalelor SCORE se face în funcţie de tipul elementului introdus şi
de ordinea în care acesta a fost apelat. Astfel, bitmap-urile, textele, câmpurile text,
butoanele, filmele, video digital se pun în canalele numerotate de la 1, sunetul se va
aşeza numai pe canalele sale specifice, ca şi paletele de culoare, tranziţiile sau
scripturile frame.

IV. Fixarea proprietăţilor sprite-urilor SCORE

Această etapă presupune setarea proprietăţilor pentru elementele CAST care
au fost puse în SCORE şi se numesc sprite-uri. Toate acestea specifică un
comportament particular al elementului pe parcursul derulării proiectului şi se produc
prin comenzi Sprite properties (meniul MODIFY).

V. Înregistrarea proiectului
Modul automat folosit pentru înregistrarea proiectului este înregistrarea pas cu
pas a unui canal (step-by-step) şi corespunde aducerii membrilor CAST în fereastra
SCORE sau pe scenă. Canalele sprite înregistrate sunt trasate de către un indicator
Multimedia © Georgeta Drulă 9

roşu aflat pe axa timpului, ce simbolizează capul de citire şi semnalizează această

stare. Un canal sprite în modul înregistrare se poate copia în mai multe cadre prin
folosirea comenzii Step Forward (meniul Control) sau direct din Control Panel.
Un alt mod de a înregistra pe un canal este modul real-time care înregistrează
mişcarea unui sprite pe mai multe cadre după cum acesta este deplasat pe scenă cu
ajutorul mouse-ului.

VI. Animarea proiectului

În principal, animarea unui proiect multimedia Director se realizează fie prin
mecanismele furnizate prin fereastra SCORE sau prin comenzi ale limbajului
Lingo.
Animarea prin fereastra SCORE poate fi tratată în câteva modalităţi ce sunt
alese individual, pe cazuri şi necesităţi specifice. Astfel, se poate considera că un
element al proiectului va putea fi deplasat de către utilizator în timpul redării
documentului multimedia oriunde doreşte pe suprafaţa scenei. O astfel de animaţie se
foloseşte, mai ales, la proiectele de divertisment sau educaţie care pun utilizatorul să
încerce combinarea mai multor piese într-un întreg. Realizarea acestui efect se face
prin selecţia checkbox-ul Moveable din Score. Deplasarea pe scenă a elementelor
Moveable se poate face atât în timpul redării cât şi la proiectarea documentului
multimedia.

Animarea pe baza tehnicii cadrelor cheie se bazează prin comenzile In-

Between Special şi In-Between (meniul Insert). Acest efect produce deplasarea unui
sprite pe un anumit număr de cadre după un anumit traseu descris între două cadre
cheie, cu o anumită viteză. Cadrele iniţial şi final trebuie marcate prin comanda
KeyFrame şi vor determina forma traseului spriteului. Între cele două cadre finale se
aleg cadre intermediare ce trebuie selectate pentru a modifica forma traseului.
Animarea prin introducerea cadrelor cheie (keyframes) se realizează prin definirea
punctelor iniţial şi final ce stabileşte traseul total al obiectului animat, apoi marcarea
acelor puncte în care obiectul îşi schimbă direcţia de mers (comanda Insert keyframe).
Traseul parcurs se poate vizualiza direct pe ecran şi este modificabil direct cu mouse-
ul.

Introducerea animaţiei în proiectele multimedia se poate face apelând la

comportamente deja create care se pot ataşa elementelor din scenă. Comportamentele
cunoscute ca Behaviors dau flexibilitate proiectului realizat. Astfel, în loc să se
execute o serie de cadre aşa cum a fost stabilit în Score, un comportament poate
controla derularea proiectului în funcţie de îndeplinirea anumitor condiţii şi
evenimente specifice. Derularea proiectului se va face după comportamentul ce se
ataşează unui sprite aflat în scenă sau în Score. Se apelează la biblioteca de
comportamente, apelată cu Library Palette. Fiecare comportament are un nume şi un
Multimedia © Georgeta Drulă 10

icon care îi precizează tipul. La ataşarea comportamentului la un sprite, o serie de

parametrii permit particularizarea acestuia.
Tot prin intermediul bibliotecii de comportamente se poate opri derularea
proiectului sau saltul la un anumit cadru în anumite condiţii, se poate controla
navigarea acestuia.

VII. Execuţia proiectului din SCORE

Derularea document multimediaului se poate urmări prin poziţionarea capului
de citire din fereastra Score ce traversează fiecare cadru din proiect. Lucrul cu
proiectul multimedia în Director se face în modul authoring dar şi în modul run-time.
Proiectele create în softul authoring Director sunt salvate în fişiere de extensie .DIR.
Acest format de fişier nu este cel cu care documentul va fi, în final, distribuit.
Trecerea la modul run-time în care proiectul va fi derulat va fi declanşată prin butonul
Play al ferestrei Control Panel. Întoarcerea la modul authoring se marcată se apăsarea
butonului Stop din acelaşi panou.

Viteza de derulare a
proiectului (fps)

Stop – trecerea în modul Play – trecerea în modul run-

authoring time

Fig Fereastra Control Panel

2. Realizarea unui document multimedia online

Multimedia © Georgeta Drulă 11

2.1 Crearea de pagini în limbajul HTML

Documentul Web, ca document hipermedia, este construit din mai multe
fişiere, fiecare cu adresă unică (URL) şi din legăturile dintre acestea. Descrierea
componentelor lui se realizează prin limbajul HTML (HyperText Markup Language)
ce stochează informaţia creată în fişiere cu extensie .htm sau .html. Un fişier HTML
este un document text ce conţine o serie de etichete (marcaje) ce indică browserului
cum să afişeze un anumit conţinut. Etichetele HTML sunt coduri ale limbajului ce
oferă informaţii despre structura paginilor Web, apariţia şi conţinutul acestora. În
descrierea relaţiilor structurale dintre elementele paginii, anumite etichete HTML
conţin şi o serie de atribute.
Pagina afişată de browser este citită ca sursă HTML, ca enumerare de etichete.
Un element al limbajului HTML, o etichetă, include un nume, atribute şi conţinutul de
date, de forma următoare:
<nume_etichetă nume_atribute=argumente> conţinut_de_date
</nume_etichetă>.

Etichetele HTML arată browser-ului cum să redea pagina text, să prezinte

grafica, sunetul şi video. Interpretorul browserului citeşte pagina şi separă etichetele
pentru procesare. Se poate constata că cele mai multe dintre etichete cer o închidere a
instrucţiunii, notată cu </>, altele cum sunt <P> sau <BR> nu au etichetă de închidere.
O parte dintre etichete cer atribute ce dau informaţii suplimentare despre elementul
respectiv. Diferiţii browseri Web recunosc diferit anumite seturi dintre elementele
limbajului HTML.
Toate documentele HTML sunt cuprinse, în mod obligatoriu, între etichetele
<html> şi </html> şi ele indică unitatea structurală cea mai cuprinzătoare. Între aceste
etichete sunt deschise alte perechi de etichete, necesare definirii subcomponentelor
structurale sau de conţinut ale documentului, cum ar fi perechile head şi body.
O pagină HTML este împărţită în 2 zone: HEAD şi BODY.
- Zona HEAD conţine informaţii de identificare a documentului, paginii Web;
- Zona BODY conţine informaţia afişată şi citită în ecran de către utilizator.

Spre exemplu, în zona HEAD întâlnim etichete de tipul:

- <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> şi <HTML>
Care deschid documentul şi sunt referite ca document type prolog indicând că
documentul este conform standardului HTML, definit de Internet Engineering Task
Force (IETF). De asemenea, se defineşte tipul document, document type definition –
DTD, ca PUBLIC (adică nu este dependent de sistem) şi setul de etichete utilizat în
pagină, în Engleză (EN). Această linie este opţională în cadrul unui fişier HTML.
- <TITLE> Titlul documentului </TITLE> va determina afişarea headerului paginii,
printre care şi titlul ce apare pe bara de titlu a browser-ului.

Spre exemplu, în zona HEAD întâlnim etichete de tipul:

Multimedia © Georgeta Drulă 12

- Corpul propriu-zis al paginii începe cu eticheta <BODY> însoţită de diferite

atribute, cum ar fi cele legate de backgroundul paginii.
- Imaginea este inclusă în pagina Web prin eticheta <IMG> care arată locaţia şi
numele fişierului imagine (/exemplu/imagini/entete.gif), dimensiunea lui exprimată în
pixeli (130 *28), diferite proprietăţi, cum ar fi linia de contur.
Pe lângă limbajul HTML se pot folosi şi alte limbaje în construirea paginii
Web. Astfel, programarea poate fi folosită pentru a modifica radical aspectul şi
funcţionalitatea acesteia.

Elementele limbajului HTML se grupează pe mai multe categorii principale.

2.2 Etichete de structură pentru organizarea documentului

Întreaga structură a documentului HTML este cuprinsă între etichetele html
şi /html, cu subdiviziunile head şi /head, body şi /body.
html ------ /html Etichete obligatorii cu care începe sau se termină orice
pagină – fişier Web.
head ----- /head Conţine informaţii ce caracterizează fişierul şi pagina ce
urmează a fi afişată.
<title> nume_document eticheta este cuprinsă în structura head şi furnizează un
_afişat_pe_bara_titlu </title> titlu pentru pagină, titlu ce va fi afişat pe bara titlu alături
de numele browserului.
<meta> ……… </meta> eticheta apare în cadrul componentei head pentru a
transmite informaţii ce nu sunt recunoscute de limbajul
HTML şi de browseri, dar dă informaţii pentru motoarele
de căutare, furnizând cuvinte cheie de regăsire, numele
autorului sau alte informaţii ajutătoare.
<body> ….conţinutul de date eticheta cuprinde conţinutul propriu-zis al paginii şi
al documentului…</body> setează prin atributele sale caracteristicile de afişare şi
funcţionare ale acesteia, cum ar fi background-ul.

Pentru caracteristicile întregii pagini sunt setate valorile atributelor etichetei

<body>. Aceste valori ce se pãstreazã permanent în document şi sunt date pentru
atributele următoare:
- BGCOLOR=”#rrggbb” sau BGCOLOR=”nume_culoare” ce stabileşte culoarea
fondului de paginã şi nu e consumator de resurse. Culoarea poate apărea ca fond
de paginã prin alegerea unei valori hexazecimale aflate într-o paletă de culoare.
Codajul culorii este RRGGBB (Red Green Blue).
- BACKGROUND=”URL_imagine” fixează pe fundalul paginii o imagine
transparentă, existentã de pe un server. Acest atribut este consumator de resurse, în
sensul creşterii timpului de transfer a paginii. Pe acest considerent, textura
paginilor ar trebui sã fie simplã, relativ monocromã pentru a preservi lizibilitatea
paginii şi pentru a creşte viteza de transfer.
Multimedia © Georgeta Drulă 13

- TEXT=”#rrggbb” sau TEXT=”nume_culoare” controleazã culoarea textului

standard, care nu este specificat printr-o legãturã.
- LINK=”#rrggbb” sau LINK=”nume_culoare” stabileşte culoarea unei legãturi ce
nu este încã vizibilã, bleu implicit;
- ALINK=”#rrggbb” sau ALINK=”nume_culoare” defineşte culoarea ce apare
numai la momentul Activãrii legãturii, roşu implicit;
- VLINK=”#rrggbb” sau VLINK=”nume_culoare” este culoarea legãturii, deja
vizitată, violet implicit.

2.3 Organizarea şi formatarea caracterelor şi a textului în paginile Web

Pe lângă elementele principale de structură, apar etichetele de formatare a
caracterului şi textului, de legare, de includere a elementelor multimedia, de creare de
tabele şi liste. Etichetele de formatare a caracterului şi textului se regăsesc în corpul
documentului, respectiv între etichetele <body>. Unele dintre ele au atribute care
particularizează formatarea. Aceste etichete sunt, în principal:
Tabel Etichete HTML pentru formatarea caracterului şi textului
<p> ……</p> Declanşează un paragraf care va fi formatat înainte de
afişarea sa pe ecran.
<br> forţează un avans de rând;
<pre> …… </pre> Identifică textul preformatat de către alte sisteme şi
trebuie să fie afişat ca atare. Se foloseşte în special cu
tabelele pentru a li se păstra forma.
<h1> …… </h1> Headere de dimensiuni diferite, de la valoarea cea mai
<h2> …… </h2> mare la cea mai mică.
<h3> …… </h3>
<h4> …… </h4>
<h5> …… </h5>
<h6> …… </h6>
<div align=”aliniament”> - Eticheta este folosită pentru a divide un document în
……</div> diferite părţi, cum ar fi: capitole, secţiuni, abstract sau
<div anexe. Atributul class specifică tipul de secţiune, iar
class=”clasa_obiect”> atributul align cu valorile left, right şi center, aliniază
……</div> aceste elemente. Atributul nowrap opreşte browserul de la
<div decupaj, cu excepţia cazului când este inclusă eticheta
class=”clasa_obiect” <br> în document.
nowrap> ………</div>
<div=lang>………</div>

<b> …… </b> - bold, îngroşat.

<i> …… </i> - italic, înclinat.
<u> …… </u> - underline, subliniat.
<font size=”n”> ……… </font> - modifică corpul caracterului pe o scară cu numai
7 valori.
Multimedia © Georgeta Drulă 14

<font color=”nume_culoare”> - modifică culoarea caracterelor cuprinse între

……… </font> etichete;
<font face=”nume_font”> - stabileşte fontul cu care se vor scrie caracterele;
……… </font>
<center> …… </center> - centrarea textului pe ecran.

<!—comentarii--> - include comentarii în HTML

<hr> - inserează o linie orizontală sau un separator între secţiunile text

TEMĂ:
1. Folosindu-vă de comenzile unui editor HTML care generează automat
etichete, creaţi o pagină Web simplă, care să conţină doar text formatat.
Vizualizaţi sursa acestei pagini şi urmăriţi etichetele create.
2. În aceleaşi condiţii mai creaţi o pagină Web. Cele două pagini tratează aceleaşi
temă.

2.4 Legarea paginilor Web şi construirea structurii hipertext

Navigarea prin site-ul Web, parcurgând paginile HTML sau conţinutul
multimedia se realizează prin hiperlegături declanşate de către utilizator. Legătura
externă declanşează un URL specificat pentru a descărca sau a deschide un alt fişier
aflat pe acelaşi server sau pe alt server şi se crează prin etichetele “ancoră” <a>, </a>
şi cu un atribut HREF (de referinţă) care indică acest URL. O ancoră cu atributul
NAME crează o legătură internă, un bookmark la o locaţie din interiorul aceluiaşi
fişier.
Pentru definirea oricărui tip de legătură, trebuie precizate punctul său de
început sau de lansare (ancora) şi punctul de destinaţie, care poate fi un URL sau
un bookmark. Astfel, la activarea unei legături (de obicei la clicul mouseului pe
un obiect activ), browserul încarcă, citeşte şi redă fişierul destinaţie sau se
poziţionează pe un bookmark.

Definirea de ancore numite şi de legături interne

<a name=”nume_destinaţie”> nume_ancoră </a> - defineşte locaţia internă
<a href=”#nume_destinaţie”> nume_ancoră </a> - defineşte o legătură internă către
o locaţie destinaţie din acelaşi
fişier.
Definirea ancorelor referite şi a legăturilor externe sau executabile
<a href=”URL”> nume_ancoră </a> - defineşte o legătură externă către un alt
fişier sau resursă.
<a href=”URL # nume_ancoră”> - defineşte o legătură externă, către o
nume_ancoră </a> anumită locaţie destinaţie, dintr-un alt
Multimedia © Georgeta Drulă 15

fişier.
Definirea de legături externe către serveri ai altor servicii Internet, ca puncte
destinaţie
<a href=“http:nume”> nume_ancoră </a> - legarea la un server Web;
<a href=“mailto:adresă”> nume_ancoră </a> - stabileşte o conexiune cu un
serviciu de poştă electronică.
Definirea de legături executabile
<a href = ”URL? - defineşte o legătură executabilă, al cărui
cuvânt_căutat+cuvânt_căutat”> punct destinaţie este un script aflat pe
nume_ancoră </a> server. Serverul va declanşa scriptul în
funcţie de şirul de date trimis. Serverii
pot interpreta diferit acest şir.

TEMĂ:
1. Creaţi legături externe între paginile Web create şi legături interne în interiorul
lor.

2.5 Folosirea de imagini în paginile unui site Web

La inserarea unei imagini în pagina Web se specifică numele fişierului
corespunzător, locul şi calea până la acesta, precum şi proprietăţile sale: decupajul
textului în jurul fotografiei (text wrapping), poziţionarea faţă de text, înălţimea (în
pixeli), lăţimea (în pixeli), spaţialitatea, textul alternativ, imaginea de rezoluţie mică
alternativă, cadrajul. Imaginea dintr-o pagină poate fi editată numai de un editor
extern specializat şi poate folosi o hartă de zone şi legături.
După modul în care sunt afişate şi funcţionează, imaginile din paginile Web
pot fi:
- imagini inline când afişajul lor se face automat în fereastra browserului, la transferul
paginii Web, odatã cu apariţia textului pe paginã. Imaginile se gãsesc în documentul
HTML în aceleaşi condiţii ca pe o paginã imprimatã. De obicei, aceste imagini au un
format standardizat aşa cum este GIF (Graphics Interchange Format) sau JPEG
(Joint Picture Expert Group). Folosirea acestor formate pentru imaginile inline
asigurã corectitudinea livrãrii imaginii în browser. Aceste imagini trebuie sã se
regăsească în permanenţã pe server împreunã cu pagina HTML.
- imagini externe care nu apar pe ecran odatã cu pagina, ci sunt propuse printr-o
legãturã hipertext a cãrei extremitate poate fi un fişier imagine. Aceste imagini se pot
afişa de cãtre browser sau de cãtre o aplicaţie helper sau plug-in.
- imagine hartă clicabilã (image map) ataşează pe diferite zone ale sale, legături
externe către URL-uri diferite. Imaginea se desparte în zone pe baza unui sistem de
coordonate, mãsurate în puncte sau în pixeli. O imagine hartă se foloseşte, mai ales,
pentru crearea de home-pageuri ilustrate. Gestiunea imaginii hartă este fãcutã de cãtre
server prin intermediul unui program instalat sau direct la staţia client.
Multimedia © Georgeta Drulă 16

Pentru introducerea de imagini inline şi hartă în paginile Web se foloseşte

eticheta <img> împreună cu atributele sale care specifică proprietăţile, caracteristicile
de poziţionare şi de formatare ale acestora:
<img src=“cale/imagine.extensie”> ……… - afişează o imagine inline prin aliniere
…</img la baza sa a textului care o înconjoară.
<img src=“cale/imagine.extensie” - afişează o imagine prin aliniere în
align=”top”> ……</img partea de sus a textului care o
înconjoară.
<img src=“cale/imagine.extensie” - afişează o imagine prin aliniere la
align=”middle”> ………</img centru a textului care o înconjoară.
<img src=“cale/imagine.extensie” alt=”text”> - înlocuieşte cu text explicativ o
………</img imagine ce nu se poate afişa într-un
browser.
<img src=“cale/imagine.extensie” - imaginea este afişată cu chenar de
border=”n”> ………</img grosime măsurată în “n” puncte.
<img - imaginea este afişată în diferite
src="file:///C|/imagini/imagine_mare.jpg" formate pe ecran, o variantă de rezoluţie
width="n" height="m" mică şi una de rezoluţie mare, normală,
alt="text care inlocuieste imaginea" prin atributul lowsrc.
border="p"
lowsrc="file:///C|/imagini/imagine_mica.jpg"
>………</img

Imaginile hartă cer etichetei <img> atribute suplimentare, specifice pentru

apelul hărţii:
<img src=”URL_imagine” - includerea unei imagini care foloseşte o
ISMAP=”nume_hartă”> …………… hartă definită la server, cu numele dat de
</img atributul ISMAP.
<img src=”URL_imagine” - includere o imagine care foloseşte o
USEMAP=”nume_hartă” ….> ………… hartă definită la client cu numele dat de
</img atributul USEMAP.

TEMĂ:
1. Inseraţi imagini externe şi inline în paginile Web create. Urmăriţi cum s-a
modificat codul sursă al paginii.

2.6 Organizarea conţinutului unei pagini Web folosind tabele şi liste

Organizarea şi ordonarea conţinutului paginilor HTML apelează tehnici pentru
construirea de tabele variate, liste ordonate şi neordonate, frameuri şi layere.
Multimedia © Georgeta Drulă 17

Construirea de tabele în paginile HTML este realizată prin setul de etichete

<table>, </table> care pot fi însoţite de atribute pentru detalii de afişare. Între acestea,
se regăsesc etichetele <tr> (Tabel Row) şi <td> (Tabel Data) pentru definirea tuturor
liniilor şi celulelor tabelului. Conţinutul celulelor poate fi text, imagini, liste, legãturi
hipertext, elemente de formular sau alte tabele. Reprezentarea tabelului depinde de
browserul utilizat la vizualizarea lui.
<table>………</table> - defineşte un tabel.
<table border=”n”>……… - determinarea unui tabel cu chenar, măsurat în
</table> pixeli.
<table width=”n” - defineşte un tabel în care lăţimea celulei este
cellpadding=”m” măsurată în pixeli, valori absolute. Atributele
cellspacing=”p”>… ……… cellpadding şi cellspacing stabilesc ce distanţă,
<table> măsurată în pixeli, se va păstra între conţinutul
unei celule şi cadrul său.
<tr>………</tr> - include un rând într-un tabel şi provine de la
Table Row.
<td> conţinut_celulă </td> - defineşte o celulă de pe rândul curent şi indică
informaţia ce o va completa. Provine de la Table
Data.
<td width=”n”> conţinut_celulă - defineşte o celulă de pe rândul curent, o
<td> măsoară în pixeli, valori absolute şi îi specifică
conţinutul.
<td width=”n&gtwider!”> - defineşte o celulă de pe rândul curent, cu
conţinut_celulă <td> dimensiunea măsurată în valori relative faţă de
conţinutul său.
<td width=”n” valign>………… - defineşte o celulă de pe rândul curent şi forţează
<td> un aliniament vertical al conţinutului său.

<th>………</th> - Crearea unui entete de tabel. Etichetele provin

de la Table Header. Fiecare parte de entet se
introduce separat, prin propriile etichete <th>.

Sursa HTML pentru crearea unui tabel cu două rânduri şi cinci coloane, reprezentat ca
în fig. 6:
<table width="75%" border="1" cellspacing="2" cellpadding="2">
<tr bgcolor="#FFFFCC">
<th width="13%">
<div align="center"><b>Nr. crt</b></div>
</th>
<th width="45%">
<div align="center"><b>Nume si prenume</b></div>
</th>
<th width="18%">
<div align="center"><b>Rezultate obtinute la teste</b></div>
</th>
<th width="14%">
Multimedia © Georgeta Drulă 18

<div align="center"><b>Rezultate obtinut la examen</b></div>

</th>
<th width="10%">Media</th>
</tr>
<tr>
<td width="13%">1.</td>
<td width="45%">Avram Camelia</td>
<td width="18%">
<div align="center">6</div>
</td>
<td width="14%">
<div align="center">7</div>
</td>
<td width="10%">
<div align="center">6,5</div>
</td>
</tr>
<tr>
<td width="13%">2.</td>
<td width="45%">Andronache Teodor</td>
<td width="18%">
<div align="center">9</div>
</td>
<td width="14%">
<div align="center">9</div>
</td>
<td width="10%">
<div align="center">9</div>
</td>
</tr>
</table>

Fig. 6 Tabel codificat în HTML

Un alt element de organizare a informaţiei în paginile HTML sunt listele

neordonate şi ordonate (sau numerotate). Ele se crează prin setul de etichete: ul şi
/ul (Unordered List) respectiv ol şi /ol (Ordered List). Fiecare element din
cadrul listelor este cuprins între etichete li şi /li.
<html> <head>
<title>Liste HTML</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"></head>
<body bgcolor="#FFFFFF" text="#000000">
<p><b>Categorii de etichete HTML sub forma de lista ordonata</b></p>
<ol>
<li>Etichete de structurare</li>
Multimedia © Georgeta Drulă 19

<li>Etichete de formatare a textului</li>

<li>Etichete de includere de imagini</li>
<li>Etichete de creare a listelor si tabelelor</li>
</ol>
<p><b>Categorii de etichete HTML sub forma de lista neordonata</b></p>
<ul>
<li>Etichete de structurare</li>
<li>Etichete de formatare a textului</li>
<li>Etichete de includere de imagini</li>
<li>Etichete de creare a listelor si tabelelor</li>
</ul>
</body></html>
Fig. 7 Codul HTML care crează o listă ordonată şi una neordonată

TEMĂ:
1. Reorganizaţi pagina Web deja creată astfel încât conţinutul său să fie repartizat
în cadrul celulelor unui tabel. Urmăriţi codul HTML al paginii, în acestă
formă.

2.6 Realizarea şi folosirea imaginilor hartă în paginile Web

Imaginile hartă, denumite şi imagini senzitive, se folosesc cel mai des în
homepage-uri pentru a lansa numeroase conexiuni din zone diferite. Zonele definite
de o hartă pot fi de formă rectangulară, eliptică sau poligonală şi sunt date de
coordonatele lor. Imaginii hartă i se ataşează un sistem de coordonate cu centrul în
colţul stânga sus. Măsurarea zonelor în pixeli se face pornind de la acest sistem de
coordonate. Din fiecare zonă definită se va declanşa o legătură către un URL
specificat. Imaginile hartă se pot crea pe server (acesta determină coordonatele şi
URL-urile zonelor) sau direct la client (adică sarcinile legate de zonele imaginii şi
URL-urile adresate revin clientului).

X (pixeli)

URL_3

URL_2

URL_1
Imaginea
Y (pixeli)
Multimedia © Georgeta Drulă 20

Fig. 9 Definirea zonelor imagine prin specificarea coordonatelor punctelor reprezentative

Definirea hărţii imagine se realizează între etichetele <map> şi </map>, în felul

următor:
<map name = “nume_hartă”>
<area shape = “rect” href = “URL-1_de_accesat” coords = x0,y0,x1,y1>
<area shape = “circle” href = “URL-2_de_accesat” coords = x0,y0,x1,y1>
<area shape = “poly” href = “URL-3_de_accesat”
coords = x0,y0,x1,y1,x2,y2,………………………x100,y100>
<area shape = “poly” nohref>
</map>

Coordonatele zonelor sunt întotdeauna exprimate în pixeli. Zonele clicabile

pot fi rectangulare, eliptice sau poligonale şi se exprimă prin cuvintele cheie: RECT,
CIRCLE şi POLY. Sistemul de coordonate ataşat imaginii are originea în colţul stânga
sus. Pentru fiecare dintre zone se iau în considerare următoarele coordonate:
- Zona RECT se determină prin coordonatele x 0,y0, pentru colţul stânga sus
şi x1,y1 pentru colţul dreapta jos;
- Zona CIRCLE se determină prin coordonatele x0,y0, ale centrului cercului
şi x1,y1 ale unui punct de pe circumferinţă;
- Zona POLY se defineşte prin maximum 100 de vectori şi prin specificarea
coordonatelor x0,y0, x1,y1 …………x100,y100, x100,y100 ale extremităţilor
acestora.
1. Folosirea şi apelul hărţii de coordonate se realizează prin atributul USEMAP
asociat etichetei <img>, astfel:
<img src=”adresă_fotografie” usemap=“#nume_hartă”>.
Prin valoarea dată atributului USEMAP (numele_hărţii), clientul primeşte în
pagina HTML punctele ce definesc zonele şi conexiunea spre URL-urile specificate.
Această tehnică uşurează activitatea de programare şi permite atât definirea hărţii
imagine cât şi folosirea ei în cadrul aceluiaşi fişier, fără a se mai apela un program
exterior.
4. Verificarea şi testarea imaginii cu zonele clicabile definite.

Editoarele HTML permit, în general, crearea automată de hărţi imagine prin

trasarea cu ajutorul unor instrumente a zonelor senzitive. Coordonatele acestora şi
legăturile stabilite vor fi înregistrate la crearea hărţii. Iată un exemplu:
<img src="file:///C|/Documents/Ici.gif" width="300" height="234" usemap="#harta_imag"
border="0">
<map name="harta_imag">
<area shape="rect" coords="10,70,126,149" href="file:///C|/Documents/TMM.gif">
<area shape="circle" coords="226,101,60" href="file:///C|/Documents/I_uparr.gif">
Multimedia © Georgeta Drulă 21

<area shape="poly" coords="78,168,78,168,54,198,107,226,140,205,160,184,138,162"

href="file:///C|/Documents/Videos.gif">
</map>

TEMĂ:
1. Creaţi o imagine hartă la utilizator folosindu-vă de o imagine potrivită.