1 De ce imagini ?
In principal,
utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop
imbunatatirea modului de transmitere a mesajului catre utilizatori.
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.
|
<html>
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src='imagine.gif' width='100' height='100' border='0' space='10' vspace='10'>
</body>
</html>
|
|
|
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>
|
|
|
TEMA!
|
- 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 http://www.ifni.com/ sau http://www.midifarm.com.
Atentie insa la drepturile de autor!
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>
|
|
|
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.
TEMA!
|
- 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.
|
|
|
|
