Curs web design - http://videotutoriale35.blogspot.ro/

curs webdesign

Imagini în HTML Folosind imagini pagina capătă un plus de atractivitate dar puteţi plăti preţul unei încarcări greoaie daca dimensiunile imaginii sunt mari.

Câteva din formatele de imagini utilizate în paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png).

Formatul GIF (8 biţi) conţine maximum 256 culori, fiind recomandat pentru grafică (butoane, iconuri, etc.). Imaginile gif pot fi animate. Puteţi crea gif-uri animate folosind Adobe Image Ready.

Formatul JPG sau JPEG conţine milioane de culori şi este folosit pentru fotografii. Formatul JPG foloseste un algotitm complex de comprimare. Daca salvaţi imaginea JPG cu compresie mică, veţi obţine o calitate foarte bună dar dimensiunea fişerului va fi foarte mare. Cu compresie mare imaginea va avea o calitate proasta dar fişierul va fi foarte mic. Un raport optim între calitatea imaginii şi dimensiunea fişierului veţi obţine pentru o compresie 60%.

Formatul bmp este puţin folosit din cauza dimensiunilor mari.

Eticheta folosită pentru inserarea unei imagini în pagină este <img> şi are următoarele atribute: src = sursa, locul unde se află imaginea width = lăţimea imaginii height = înălţimea imaginii alt = numele care înlocuieşte imaginea până aceasta se încarcă sau când nu a fost gasită border = chenar (0 = lipsă bordură) hspace = distanţa orizontală a imaginii faţă de text width = distanţa verticală a imaginii faţă de text align = alinierea imaginii faţă de text (left, middle, right) Dimensiunea imaginii afişate de browser este stabilită de argumentele width şi height. În cazul în care cele 2 argumente (width şi height) sunt diferite de dimensiunile fişierului imagine browserul va redimensiona imaginea afişată.

Recomandare: Eticheta img va conţine mereu argumentele: - height şi width, astfel browserul va putea afişa corect pagina chiar înainte ca imaginea să fie încărcată complet - alt, existenţa valorii acestui atribut este benefică din punct de vedere SEO (Search Engine Optimization) Exemplu: o imagine cu lăţime 100px, înălţime 75px, alt=poza şi border=0 şi încă o dată cu border=1 HTML <img src="poza.jpg" width="100" height="75" alt="poza" border="0">

<img src="poza.jpg" width="100" height="75" alt="poza" border="1">

Afişare

curs webdesign Pentru a micşora timpul încărcării complete a paginii există programe care optimizează imaginile.

Optimizarea constă în: 1. reducerea dimensiunii imaginii fără degradarea majoră a calităţii 2. eliminarea informatiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt asociate automat de programele de grafică (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale. Pentru eliminarea acestor informaţii puteţi folosi aplicaţia Exifer. În Internet Explorer valoarea atributului “alt” este afişată în browser în momentul în care mouse-ul se află deasupra imaginii. Pentru a obţine aceeşsi afisare în Firefox în eticheta img se adaugă atributul title având acceaşi valoare ca şi alt.

Exemplu: acceaşi imagine care conţine atributele alt şi title (verificaţi cu Internet Explorer şi Firefox) HTML

Afişare

<img src="poza.jpg" width="100" height="75" alt="poza" title="poza"> Daca doriti ca textul sa incadreze imaginea adaugati etichetei img atributul align HTML <img src="poza.jpg" width="100" height="75" alt="poza" align="right"> text text text text text text text text text text text text text text text text text text text text text text text text <img src="poza.jpg" width="100" height="75" alt="poza" align="left"> text text text text text text text text text text text text text text text text text text text text text text text text

Afişare text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

curs webdesign Creare thumbnails Thumbnail înseamnă o copie mai mică a imaginii. De ex. Dacă imaginea are dimensiunile 300x200 pixeli, thumbnail-ul ei poate avea 100x75. Imaginile alese pt creare thumbnail-uri trebuie redimensionate în Irfanview. Iată un exemplu de cod pentru thumbnails: <html> <head> <title>Thumbnailuri</title> </head> <body bgcolor=> <h1>Thumbnail-uri:</h1> <a href=”poza1.jpg”><img src=”t_poza1.jpg”></a> | <a href=”poza2.jpg”><img src=”t_poza2.jpg”></a> | <a href=”poza3.jpg”><img src=”t_poza3.jpg”></a> </body> </html> Acesta este un exemplu simplu de creat thumbnail-uri. Pentru rezolvarea exerciţiului trebuie să alegem 3 poze frumoase, să le copiem în folderul nostru apoi cu ajutorul editorului de imagini Irfanview să le micşorez pe fiecare şi să le salvez micşorate cu numele de t_poza1.jpg, t_poza2.jpg, t_poza3.jpg.

TEMĂ 1. Creaţi o pagină html denumită “orhidee.html” în care să inseraţi text şi imagini despre diferitele genuri de orhidee.

2. Creaţi o pagină html în care să creaţi thumbnail-uri pentru imaginile cu orhidee. Denumiţi imaginile cu orhidee poza1.jpg, poza2.jpg, poza3.jpg şi creaţi-le thumbnail-uri cu Irfanview denumite t_poza1.jpg, t_poza2.jpg, t_poza3.jpg.

3. Creaţi o pagină principală “main.html” sau “index.html” care să conţină elemente grafice şi text atractive şi legături(link-uri) către primele două pagini create la temă.