Grafica pentru web

Obiective

• Identificarea formatelor grafice pentru WWW
• Discutarea unor puncte cheie legate de introducerea graficii pe web
• Descarcarea fisierelor grafice pe calculator
• Utilizarea comenzilor pentru includerea graficii pe web

Formate grafice pentru web

Exista o multime de formate grafice digitale: PICT, GIF, TIFF, EPS, BMP, PCX, JPEG si multe altele. Pentru ca WWW este un sistem compatibil cu toate platformele (sistemele de operare: MacIntosh, Windows, Linux etc.) este necesar ca grafica utilizata pe web sa fie independenta de platforma. Formatul HTML in sine este independent de platforma pentru ca este un format simplu text. Formatele grafice care sunt independente de platforma si cele mai utilizate pe web sunt formatele GIF si JPG.

Formatul GIF (Graphics Interchange Format) comprima informatia (reduce dimensiunea fisierului) si o traduce in cod binar pentru Internet. Compresia GIF este foarte buna pentru fisiere cu zone adiacente de aceiasi culoare (in special pe orizontala).

Al doilea format grafic mult utilizat este JPG sau JPEG (Joint Photographic Engineering Group). Compresia JPG este foarte buna pentru imagini fotografice. Compresia poate fi extrem de mare dar scazand dimesiunea fisierului prin compresie se pierde din calitatea imaginii.

Problema principala legata de grafica pe Internet este raportul dimesiune fisier - calitate imagine.

Pentru informatii mai multe legate de fisiere de imagine, accesati:

• Graphics File Compression.
• Lynda Weinman's Designing Web Graphics

Va fi necesar sa folositi anumite programe pentru prelucrarea imaginilor grafice, inainte de introducerea lor pe paginile de web. Cateva exemple de astfel de programe sunt:

Unde si cand trebuie utilizata grafica

• Utilizarea unui numar foarte mare de imgini, poate sa arate excelent pe un calculator de ultima generatie dar poate fi frustranta pentru utilizatori cu resurse sarace. Pastrati intr-un HTML dimesiunea totala a imaginilor sub 50kb??
• Nu toti utilizatorii au Monitoare de 21 inch. Ca atare exista foarte multi care utilizeaza inca ecrane cu rezolutie 640 x 480 pixeli. Incecati sa nu introduceti grafica cu dimensiune mai mare de 480 x 300 in paginile voastre
• Gradientul de culoare arata bine dar compresia lui este foarte mica. Utilizati de preferat culori solide
• Daca aveti multe imagini de afisat, realizati mai multe fisiere HTML fiecare din ele continand putine imagini.
• Introduceti imagini numai daca ele aduc semnificatie si intelesuri fisierului dumneavoastra.

Download fisiere grafice

Pentru a putea introduce rapid grafica in documentele voastre aveti pregatita grafica pentru web.

1. Accesati pagina cursului, Resurse. In partea de jos a fisierului veti gasi un link catre albume pe web. Fiseirele sunt protejate cu User si parola.
2. Accesati unul din albume
3. Alegeti poza pe care o doriti si dati clic pe butonul din dreapta mousului. Alegeti optiunea Save Image as... si salvati imaginea pe calculatorul pe care lucrati, in acelasi director cu fisierul HTML
4. Retineti numele fisierului si calea pe care ati facut salvarea.

Includerea graficii pe web

O imagine inline este o imagine care apare legata de text. Pentru introducerea unei astfel de imagini se utilizeaza tagul:

<img src="filename.gif">

unde filename.gif sau filename.jpg reprezenta numele si extensia fisierului care va fi afisat in text. Daca fisierul nu se gaseste in acelasi director cu fisierul HTML, este necesar sa fie data si calea catre fisier.

Acesta este un M foarte mare

Daca o sa inserati in continuare text M se va deplasa cu textul pentru ca este ancorat langa cuvantul mare.

Daca vreti sa nu mai fie legat de text, inserati un tag pentru paragraf inaintea tagului de imagine.

Se poate utiliza si tagul de aliniere fata de text cu urmatoarele efecte:

<img src="m.gif" width="100" height="87" align="top">

Aliniere in partea de sus

<img src="m.gif" width="100" height="87" align="middle">

Aliniere la mijloc

<img src="m.gif" width="100" height="87" align="bottom">

Aliniere in partea de joscare este si default (implicita).

Unii utilizatori folosesc browsere text only. Pentru ei este important ca tagul src sa aibe si atributul alt completat ca in exemplul de mai jos.

<img alt="Litera M mare:" src="m.gif">

Efectul va fi cel de mai jos: Pentru browsere grafice daca te deplasezi cu cursorul deasupra graficii apare textul scris la alt.

Exercitii:

1. Deschideti un editor text (Notepad)
2. Editati un HTML in care ati inserat imagini grafice salvate cain exercitiul efectuat anterior.
3. Vizualizati in browser modul in care este afisata grafica.