|
3.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.
3.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.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.
|
|
|
3.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.
|
|
|
|
|
