Codul HTML In Romana Pentru Incepatori pasul 3

Admin Posts : 103 Join date : 2008-09-05

Lecţia 3: Imagini si sunete

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 un site 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?

o 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?

o 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.
o 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?

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

Tableta Culori #1 - http://img156.imageshack.us/img156/3729 ... ri1xy9.jpg

Tableta Culori #2 - http://img47.imageshack.us/img47/9346/t ... ri2xf6.jpg

• Ce format de imagine sa folosesc?

o 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>

Exemplu:

Code:

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

Exemplu:

Code:

<html>
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src="imagine.gif" width="100" height="100" border="0"
hspace="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.

Exemplu:

Code:

<html>
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src="imagine.gif" width="100" height="100" border="0"
hspace="10" vspace="10" align="left">
</body>
</html>

Exercitii:

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

Exemplu:

Code:

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

Exemplu:

Code:

<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

Exemplu:

Code:

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

Exemplu:

Code:

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

Exercitii:

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

_______________________________________
...:::Only God Can Judge Me:::...

» Codul HTML In Romana Pentru Incepatori pasul 1
» Codul HTML In Romana Pentru Incepatori pasul 2
» Codul HTML In Romana Pentru Incepatori pasul 4