Programare HTML - Imagini si obiecte pe site - Lectia Numarul 6

In ultimii ani dezvoltarea de site-uri a crescut considerabil , iar pentru castigarea vizitatorilor pe site ,acesta trebuie sa aiba un design cat mai placut , atractiv si profesional ,iar viteza de incarcare a site-ului sa fie cat mai mare.Folosirea imaginilor sporeşte atractivitatea şi designul paginii, duce la o mai bună inţelegere a mesajului, dar trebuie luat în consideraţie şi faptul că excesul de imagini va duce la încărcarea greoaie a site-ului. Există numeroase formate grafice, dar cele mai răspândite sunt:

• GIF (Graphics Interchange Format) introdus de Compuserve 
• JPEG (Joint Photographic Expert Group) 
• PNG (Portable Network Graphic – Format Grafic portabil în reţea)

Aceste formate sunt dependente de platformă. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaţie de imagine. Fiecare pixel necesită un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numărul de culori, compresia, transparenţa, întreţeserea şi animaţia. Asemănările şi deosebirile dintre cele trei formate grafice sunt: 

•  Imaginile GIF pot utiliza doar 256 de culori, având nevoie de 8 biţi, în timp ce formatele JPEG şi PNG pot utiliza milioane de culori, având 24 de biţi de culoare, respectiv 32 de biţi /pixeli de culoare. Ceea ce face formatul GIF atât de utilizat nu este numai paleta mică de culori (256), dar şi posibilitatea reducerii numărului de culori, astfel, dacă este nevoie doar de 2 culori, se utilizează numai un bit, ceea ce reduce dimensiunea fişierului de 8 ori. 
• Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fişierelor. Comprimarea se poate face, în mod diferit, pentru fiecare format, şi, din aceste motive, ele pot avea dimensiuni mai mici într-un format decât în altul.
•  Formatele GIF şi PNG admit culoarea transparentă, în timp ce formatul JPEG nu admite transparenţa. Formatele GIF şi PNG admit animaţia, în timp ce, cu formatul JPEG, nu se poate obţine animaţie. De exemplu, pentru a obţine animaţie pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder. 
• Toate cele trei formate acceptă întreţeserea. De exemplu, când se vizualizează o pagină web, se pot observa imaginile care apar linie cu linie, de la forma brută până la redarea finală, aceasta reprezintă întreţeserea. Deşi dimensiunea fişierelor creşte cu până la 10%, cu ajutorul acestei întreţeseri, vizitatorul poate să-şi facă o imagine despre ceea ce se va descărca. 

Având în vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate: 

•  GIF – pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorită dimensiunii mici a fişierelor.
• JPEG pentru fotografii, când se doreşte să se redea cât mai exact culoarea reală a imaginii. 
• PNG – pentru desene complexe, dar şi pentru fotografii, acesta fiind formatul care îmbină caracteristicile celor două. 

Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezintă standarde de identificare a resurselor (de exemplu, fişiere) şi pot fi adrese URL absolute şi relative. 

Pentru inserarea imaginilor intr-un document html se foloseste eticheta <img>  ,care este o eticheta goala  (empty tags ), adica nu are tag de sfarsit ( </img> ).
* Exemplu : <img src="codingweb.jpg" alt="CodingWeb" width="104" height="142">
Tag-ul <img> contine atributul alternativ 'alt' si atributul obligatoriu "src" care este prescurtarea pentru 'source' care specifica sursa /adresa de unde este preluata imaginea .Acest atribut se foloseste pentru a indica locatia fotografiei. Dupa cum am explicat in capitolul destinat legaturilor pe care il gasiti >> Legaturi si ancore -Lectia Numarul 5  << se poate folosi orice tip de URL pentru a indica adresa fisierului.

Pentru a indica locatia unei imagini se pot utiliza urmatoarele instructiuni :

• src="image.jpg" - fotografia este situata pe acelasi nivel cu fisierul .html
• src="../image.jpg" - fotografia este situata pe un nivel anterior fisierului .html.
• src="../img/image.jpg" -fotografia este situata in folderul "img" pe nivelui anterior fisierului .html

Se poate folosi deasemenea adresa completa a fotografie. 
Exemplu: scr="http://www.tutorialehtml.com/img/image.jpg"

Acest model de URL nu este recomandat deoarece la schimbarea domeniului va trebui sa schimbi deasemenea si adresele tuturor fotografiilor. Sau in cazul in care imaginea este stocata pe un alt domeniu scr="http://www.domeniu.com/image.jpg".


Faptul de a stoca imaginea pe un domeniu alternativ, prezinta un mare avantaj in cazul in care dispui de un spatiu limitat pe domeniul pe care este stocat fisierul .html
Atributul "alt" este folosit pentru a afisa un text in locul imagini, in cazul in care browser-ul pentru un oarecare motiv nu poate afisa imaginea sau in cazul in care un user are deselectata functia "ShowImage".

<img alt="Imaginea nu poate fi incarcata" src="/coding_web/image.jpg" />

Pentru a stabili inaltimea si latimea unei imagini sunt folosite atributele height si widith.

<img alt="imagine exemplu" src="/coding_web/image.jpg"  width="200" height="100" />

Folosirea imaginilor ca link 

Aceasta este doar o introducere, vom trata acest subiect mai pe larg intr-un tutorial urmator. Imaginile sunt foarte utile pentru link-uri si se pot forma cu ajutorul codului urmator:

<a href="http://learncodingweb.blogspot.ro/" title="Exemplu de link imagine in html">
<img alt="imagine" src="/coding_web/image.jpg" width="120" height="75" />
</a>

Atributul title este folosit  in interfata grafica cu utilizatorul ,pentru mouse-over comments;
Atributul align se refera la alinierea in cadrul randului ,si nu in cadrul paginii ,iar valorile pe care le poate i-a sunt : middel pentru pozitionarea la mijloc , top -pozitionar la inceput si bottom -pozitionare la sfarsit.

Obiectele :

<object>...</object> -Acest element include in pagina un obiect ,al carui tip este specificat cu ajutorul atributului type . Obiectul poate fi incadrat in orice standard de internet pe care browser-ul il intelege ,cum sunt paginile incrustate,codul executat cu ajutorul unui program auxiliar (plug -in ) .Atributul classid seteaza o valoare pe post de identificator unic pentru URL.

<param>..</param> sau <param/>
Acest element poate fi dispus numai in cadrul unui element object .Folosind atributele name si value ,fiecare element seteaza un parametru pentru un  obiect : latime,font, culoare,grosime ,margini etc.


Exemplu:
<html>
<head>
<title>Imagini Si Obiecte</title>
</head>
<body>
<object classid="clsid:F08DF954-8592-11D1-B161-00C0F0283628" id="Slider1" width="100" height="100">
<param name="BorderStyle" value="1"/>
<param name="MousePointer" value="0"/>

<param name="Enabled" value="1"/>

<param name="Min" value="0"/>
<param name="Max" value="10">

</object>

</body>
</html>

<span>...</span> -Acest tag se foloseste pentru a grupa elementele pe aceeasi linie .Cu ajutorul lui se pot aplica diverse formatari in cadrul grupului de elemente.


Daca va placut acest articol sau altele de pe site-ul  ,meu  va rog sa le distribuiti mai departe pe facebook pentru a afla cat mai multe persoane si daca vreti sa imi dati si un like va invit pe pagina mea de facebook aici: https://www.facebook.com/OriginalsBlue/