Imagini si sunete
1 De ce imagini ?
In
principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop
imbunatatirea modului de transmitere a mesajului catre utilizatori.
Imagineaza-ti cum ar arata Academia Online fara imagini !
O pagina in
care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine
decat o pagina care contine doar text. Selectarea imaginilor care vor fi
utilizate este foarte importanta; cateva imagini care 'clipesc' nu
sunt suficiente pentru a face o pagina atractiva.
2 Ce trebuie sa stiu despre imagini ?
Inainte de a
introduce o imagine intr-un document HTML este necesar sa iti pui cateva
intrebari:
- imaginea aceasta da
'valoare' paginii mele?
- dupa cum spuneam mai sus,
simpla inserare in pagina a unor imagini care nu au nici o legatura cu
mesajul transmis in pagina nu este suficienta. Faptul ca o imagine sau
mai multe 'arata bine' nu este suficient pentru a face o pagina
atractiva.
- pot sa 'imprumut'
imaginea?
- voi incepe prin a spune ca NU
exista imagini fara copyright (drepturi de autor). Exista imagini care
sunt oferite gratuit sau cu consimtamantul autorului (proprietarului),
insa majoritatea sunt oferite contra cost (din motive lesne de inteles).
Desi in cazul siturilor personale(non-profit) este improbabil sa verifice
cineva provenienta imaginilor, in cazul siturilor comerciale riscul de a
fi dat in judecata (chiar si in Romania) este real.
- nu te baza pe faptul ca nu
stii provenienta imaginii. In fata legii 'nu stiu' nu este valabil.
Responsabilitatea in a determina cui ii apartine imaginea respectiva iti
apartine in intregime.
- ce dimensiunea are imaginea?
- pentru utilizatorii care
folosesc conexiuni dial-up, paginile care contin imagini de dimensiuni
mari (> 25-30 k) se vor incarca in browser foarte greu. Multi se vor
plictisi asteptand incarcarea paginii si vor abandona vizualizarea
paginii.
- culorile sunt
'portabile'?
- o problema importanta este
modul de afisare a culorilor pe diferite computere, sisteme de operare
sau browsere. Sunt convins ca nu ai vrea ca fundalul rosu al unei imagini
afisate in browserul tau sa arate roz pe un Mac, spre exemplu. Pentru a
elimina aceasta problema au fost stabilite anumite culori care arata la
fel indiferent de computer, sistem de operare, etc. Poti vedea aceasta
lista impreuna cu codurile lor in format hexa aici.
- ce format de imagine sa
folosesc?
- Exista foarte multe formate de
fisiere grafice (psd, png, jpg, pcx, bmp, gif, wmf, etc.). Doar cateva
sunt universal recunoscute de browsere:
- GIF - GRAPHICS
INTERCHANGE FORMAT - este un format de compresie fara pierdere de
calitate.
- JPG -
format introdus de JOINT PHOTOGRAPHIC EXPERT GROUP - este un
format de compresie cu pierdere de calitate. Atentie insa: prin salvarea
repetata a unei imagini, ea va pierde din calitate, devenind in final
inutilizabila.
- PNG - PORTABLE
NETWORK GRAPHIC - este un format de compresie fara pierdere de
calitate. Are in general dimensiuni mai mari decat primele doua formate
mentionate.
3 Cum se introduce o imagine intr-o pagina HTML?
Introducerea
unei imagini intr-o pagina HTML se face prin marcajul <img>
|
|
|
<html>
<head>
<title>Pagina
mea</title>
</head>
<body>
<img
src='imagine.gif'>
</body>
</html>
|
|
|
Atributul src
specifica locatia imaginii. Alaturi de src, marcajul <img>
are urmatoarele atribute:
- alt - specifica un text alternativ
pentru cazul in care imaginea nu poate fi afisata. Este important si
pentru motoarele de cautare.
- border - traseaza un chenar in jurul
imaginii.
- width, height - specifica latimea, respectiv
inaltimea imaginii. Nu sunt obligatorii, insa utilizarea lor este
recomandata deoarece va reduce timpul de procesare a paginii web de catre
browser.
- hspace, vspace - specifica spatiul care va fi
pastrat in jurul unei imagini.
Poti
vizualiza in browserul tau ce se intampla in cazul in care imaginea lipseste
sau calea catre imagine este gresita, aici.
|
|
|
<html>
<head>
<title>Pagina cu
imagine</title>
</head>
<body>
<img
src='imagine.gif' width='100' height='100'
border='0'
id='10'
vspace='10'>
</body>
</html>
|
|
|
Poti
vizualiza exemplul de mai sus in browserul tau aici.
In general,
atunci cand este inserata o imagine intr-un text, acesta este aliniat in partea
inferioara a imaginii. Va ramane un spatiu neutilizat, dupa cum ai vazut
probabil in exemplul de mai sus. Pentru evitarea 'pierderii' acestui
spatiu poti folosi atributul align, cu valorile left, right.
|
|
|
<html>
<head>
<title>Pagina cu
imagine</title>
</head>
<body>
<img
src='imagine.gif' width='100' height='100'
border='0'
id='10'
vspace='10' align='left'>
</body>
</html>
|
|
|
Poti
vizualiza exemplul de mai sus in browserul tau aici.
|
|
- Vizualizeaza
sursele exemplelor si comenteaza-le in seminarul online
- Realizeaza
o pagina HTML (folosind NotePad) care sa contina una sau mai multe
imagini, alaturi de un text pe care sa il formatezi folosind
marcajele studiate in primele doua lectii. Modifica valorile
atributelor marcajului <img> si vizualizeaza pagina in
browser.
|
|
|
4 Inserarea de fisiere audio in paginile HTML
In general,
inserarea de fisiere audio in paginile HTML nu este recomandata (bineinteles
exista si exceptii). Dimensiunile mari, timpul mare de download precum si
'agresarea' utilizatorului cu o melodie care se repeta la infinit
sunt cateva din argumentele contra. In acelasi timp noile tehnologii (ex.
FLASH) largesc posibilitatile, existand multe pagini web care combina in mod
fericit parte audio cu cea vizuala.
Referindu-ma
strict la posibilitatile HTML, introducerea de secvente audio se poate face in
doua modalitati:
- sub forma unei referinte(link)
- prin intermediul marcajelor embed
sau bgsound
|
|
|
<html>
<head>
<title>Inserare referinta
audio</title>
</head>
<body>
Apasa pe linkul de mai jos.
<a
href='sunet.au'>
Fisierul audio va fi rulat
intr-o aplicatie instalata
in calculatorul tau (ex. Media
Player)
</body>
</html>
|
|
|
|
|
|
<html>
<head>
<title>Inserare secventa
audio cu embed</title>
</head>
<body>
<embed
src='aaa.wav' width='200'
height='200'>
</body>
</html>
|
|
|
Exista trei
formate de fisiere care sunt recomandate pentru utilizarea cu acest marcaj: wav,
au si midi. Daca esti interesat de fisierele midi iti recomand https://www.ifni.com/ sau https://www.midifarm.com.
Atentie insa la drepturile de autor!
Poti
vizualiza exemplul de mai sus in browserul tau aici.
Marcajul embed
are urmatoarele atribute:
- autostart - daca este setat true,
fisierul audio va fi rulat imediat dupa incarcarea paginii HTML
- hidden - daca este setat true,
interfata pentru rularea fisierului audio nu va fi afisata
- loop - daca este setat true,
secventa audio va fi reluata la 'nesfarsit'
- volume - seteaza volumul cu care va
fi redata secventa audio
|
|
|
<html>
<head>
<title>Inserare secventa
audio cu embed</title>
</head>
<body>
<embed
src='aaa.wav' width='200' height='200'
autostart=false hidden=false
loop=true volume=50>
</body>
</html>
|
|
|
Poti
vizualiza exemplul de mai sus in browserul tau aici.
Marcajul bgsound
va rula o secventa audio in fundal. Este o extensie Microsoft, deci va
functiona numai in Internet Explorer.
|
|
|
<html>
<head>
<title>Inserare secventa
audio cu bgsound</title>
</head>
<body>
<bgsound
src='aaa.wav' loop=10>
</body>
</html>
|
|
|
In HTML 4 embed
este inlocuit de marcajul object care va fi insa prezentat in ultima
lectie.
|
|
- Vizualizeaza
sursele exemplelor si comenteaza-le in seminarul online
- Cauta
pe Internet o secventa audio in format midi. Realizeaza apoi o
pagina HTML (folosind NotePad) care sa includa aceasta secventa
audio. Modifica valorile atributelor marcajului <embed>
si vizualizeaza pagina in browser.
|
|
|
