Curs HTML pentru toti!!!



CAP. 7. FOLOSIREA IMAGINILOR



 

7.1. Tipuri de imagini

 

Deoarece nu toate tipurile de imagini sunt suportate de browsere, vom proceda mai întâi la o trecere în revistă a principalelor tipuri ce pot fi utilizate în documentele web.

Singurele tipuri care pot fi utilizate fără restricţii în browsere sunt următoarele:

 

GIF: Graphic Interchange Format, sunt imagini care au maximum 256 de culori. Formatul GIF este cel mai bun pentru redarea imaginilor de tipul logo-uri, pictograme şi butoane. Este formatul cel mai răspândit pe Internet.

O categorie aparte a acestui format o constituie fişierele animate de tip GIF care contribuie la obţinerea unor efecte  deosebite.

JPG, JPEG: Joint Photographic Expert Group, sunt imagini care pot avea până la 16,7 milioane de culori. Formatul JPEG este recomandat pentru redarea fotografiilor şi a altor imagini are necesită o claritate deosebită.

 

Mai există câteva formate care pot fi utilizate, dar cu anumite rezerve, întrucât nu vor fi recunoscute în toate browserele, fiind recomandată convertirea lor cu programe specializate (Adobe PhotoShop, Corel PhotoPaint etc.) în formatele prezentate anterior. Aceste formate sunt:

 

PNG: Portable Network Graphics

BMP: MS Windows BitMaP

TIFF: Tagged Image File Format

PCX: PC Paintbrush Format

 

La alegerea unei imagini trebuie avut în vedere faptul că cele de dimensiuni mari (ne referim la dimensiunea fişierului, nu la suprafaţa imaginii) vor încetini în mod considerabil încărcarea unui document web. O pagină web care conţine multe imagini se va încărca mult mai greu decât o pagină web care conţine mai mult text şi mai puţine imagini. De aceea trebuie să realizaţi un echilibru între rapiditatea de încărcare şi design-ul site-ului.

 

          7.2. Inserarea imaginilor

 

        Dacă v-aţi hotărât să inseraţi o imagine într-un document web, va trebui să folosiţi tag-ul <IMG>. Prezenţa tag-ul de închidere </IMG> este opţională.

Spre deosebire de alte tag-uri, la folosirea tag-ului <IMG> este obligatorie specificarea atributui <SRC> care stabileşte sursa (source) imaginii ce trebuie încărcată, şi este recomandată folosirea atributului <ALT>, care stabileşte textul ce descrie imaginea şi funcţionează ca un tag (alternative). Este afişat atunci când vizitatorul deplasează cursorul mouse-ului deasupra imaginii sau când sunt probleme cu încărcarea imaginii.

Vom exemplifica cele de mai sus folosind următorul cod:

 

<HTML>

<HEAD>

  <TITLE>Inserarea unei imagini</TITLE>

</HEAD>

<BODY>

  <IMG SRC="http://www.referate10.ro/computer.jpg" ALT="Un computer in imagine">

</BODY>

</HTML>

 

Dacă nu aveţi un fişier de tip imagine (.gif sau .jpg) pe care să-l folosiţi ca exemplu, puteţi descărca fişierul nostru dând click aici.

 

Notă: Fiţi atenţi la calea utilizată la inserarea fişierului imagine! În acest exemplu fişierul computer.jpg este salvat în acelaşi director ca şi fişierul test6.html.

 

Rezultatul afişat va fi următorul:

 

       

 

Rezultatul va fi identic şi dacă folosiţi imaginea existentă pe site-ul nostru, în condiţiile în care îi specificaţi calea exactă şi aveţi o conexiune internet permanentă, astfel:

 

<HTML>

<HEAD>

  <TITLE>Inserarea unei imagini</TITLE>

</HEAD>

<BODY>

  <IMG SRC="http://html.webmarketclub.com/teste/computer.jpg" ALT="Un computer in imagine">

</BODY>

</HTML>

 

7.3. Formatarea imaginilor

 

Formatarea imaginilor se realizează utilizând celelalte atribute opţionale care definesc acest tag, şi anume:

 

Atribut

Valoare

Descriere

align

top

bottom

middle

left

right

Specifică cum va fi aliniată imaginea în raport cu textul ce o înconjoară.

border

pixels

Defineşte o bordură în jurul unei imagini.

height

pixels

Defineşte înălţimea unei imagini.

hspace

pixels

Defineşte spaţiul liber din părţile laterale ale unei imagini.

ismap

URL

Defineşte imaginea de tip “server-side image map”.

longdesc

URL

Adresa URL către un document care conţine o descriere lungă a imaginii.

usemap

URL

Defineşte imaginea de tip “client-side image map”. Se foloseşte în combinaţie cu tag-urile  <map> şi <area>.

vspace

pixels

Defineşte spaţiul liber din părţile de sus şi de jos ale unei imagini.

width

pixels

Defineşte lăţimea unei imagini.

       

 

       

7.4. Aplicaţie practică

 

În continuare vom prezenta modul de inserare şi de formatare a unor imagini, astfel că vom crea un nou fişier numit test6.html care va conţine următoarele linii de cod:

 

<HTML>

<HEAD>

  <TITLE>Inserarea si formatarea unor imagini</TITLE>

</HEAD>

<BODY>

  <P>O imagine in text

  <IMG SRC="http://html.webmarketclub.com/teste/computer.jpg" ALT="imaginea 2" ALIGN="middle" HEIGHT="55" WIDTH="55" BORDER="5"> aliniata pe verticala la mijloc (middle), redimensionata, dimensiunile fiind controlate de atributele "height" si "width", si cu margine (border) de 5 pixeli.</P>

  <P ALIGN="justify">Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala.<IMG SRC="http://www.referate10.ro/computer.jpg" ALT="imaginea 3" ALIGN="left" HEIGHT="65" WIDTH="55" HSPACE="30"> <IMG SRC="http://www.referate10.ro/computer.jpg" ALT="imaginea 3" ALIGN="right" HEIGHT="65" WIDTH="55" VSPACE="20"> Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala. Iata un text, cu imagini redimensionate, aliniate una la stanga si una la dreapta, una cu spatiere laterala si una cu spatiere verticala.</P>

</BODY>

</HTML>

 

Rezultatul afişat va fi următorul:

 

 

 

7.5. Folosirea imaginilor ca link-uri

 

A devenit o modă înlocuirea link-urilor de tip text cu link-uri de tip imagine sau pictogramă (icon). De exemplu, a devenit o practică uzuală înlocuirea textului “next” cu o pictogramă simbolizând o săgeată orientată spre dreapta sau cu o pictogramă reprezentând o mână cu arătătorul indicând spre dreapta.

În mod obişnuit, o imagine plasată în interiorul unei ancore (adică între tag-urile <A> şi </A>) devine o parte a conţinutului ancorei, astfel încât un click pe imaginea respectivă va avea acelaşi rezultat ca şi un click pe textul unei ancore.

Browser-ele pot modifica imaginile într-un mod speciale (de obicei adăugându-le o bordură) pentru a indica faptul că reprezintă un link.

Sintaxa folosirii acestor tag-uri este următoarea:

 

<A HREF="http://www.referate10.ro/document.html"> <IMG SRC="http://www.referate10.ro/imagine.gif" BORDER="pixeli" WIDTH="pixeli" HEIGHT="pixeli" ALT="Text alternativ"> </A>

 

        Standardul HTML oferă posibilitatea să includeţi mai multe link-uri într-o singură imagine, astfel încât dacă daţi click în zone diferite ale imaginii, vor fi accesate link-uri diferite. Imaginile de acest tip sunt cunoscute sub numele de imagini-hartă (image maps).

        Există două posibilităţi de a crea astfel de imagini-hartă:

        1. prin folosirea atributului ismap în tag-ul <IMG> sunt create imaginile de tip server-side image map

        2. prin folosirea atributului usemap în tag-ul < IMG > sunt create imaginile de tip client-side image map

        Deoarece pentru imaginile de tip server-side image map este necesar accesul la serverul pe care se află stocată imaginea, precum şi faptul că sunt generate întârzieri la încărcarea paginilor, ne vom ocupa numai de imaginile client-side image map care nu prezintă aceste neajunsuri.

       

7.6. Imagini de tip client-side image map

 

Aceste imagini sunt create prin folosirea atributului usemap în elementul < IMG > şi definite prin elementele speciale marcate de tag-urile <MAP> şi <AREA> (se folosesc numai împreună, elementul <AREA> fiind întotdeauna inclus în elementul <MAP>).

Tag-ul <MAP> defineşte o imagine ca fiind de tip hartă, iar tag-ul <AREA> specifică coordonatele zonelor imaginii-hartă, precum şi link-urile corespunzătoare fiecărei zone.

Atributul usemap preia valoarea atributelor id sau name (în funcţie de browser), stabilite în tag-ul <MAP>.

Trebuie amintit faptul că doar tag-ul <MAP> necesită tag-ul de închidere </ MAP>.

 

Atributele opţionale care definesc tag-ul <MAP> sunt:

Atribut

Valoare

Descriere

id

nume_hartă

Atribuie o denumire imaginii-hartă

name

nume_hartă

Este identic cu id, se foloseşte doar pentru a asigura compatibilitatea cu anumite browsere

 

 

 

 

 

 

 

 

Atributele opţionale care definesc tag-ul <AREA> sunt:

Atribut

Valoare

Descriere

alt

text

Specifică o descriere alternativă a zonei active

shape

rect sau rectangle

circ sau circle

poly sau polygon

Defineşte tipul de zonă (dreptunghi, cerc sau poligon)

coords

dacă shape="rect" atunci

coords="stânga,sus,dreapta,jos"

dacă shape="circ" atunci

coords="centru_x,centru_y,rază"

dacă shape="poly" atunci

coords="x1,y1,x2,y2,..,xn,yn"

Specifică coordonatele zonei active

href

URL

Specifică URL-ul ţintă al zonei

nohref

true

false

Exclude o zonă din hartă

target

_blank

 

 

_parent

 

_self

 

_top

 

• URL-ul ţintă se va deschide într-o nouă fereastră (este implicit, deci poate fi şi nespecificat)

• URL-ul ţintă se va deschide în fereastra curentă

• URL-ul ţintă se va deschide în acelaşi cadru din care s-a dat click

• URL-ul ţintă se va deschide în cadrul părinte

        7.7. Aplicaţie practică

 

În continuare vom prezenta modul de utilizare a unei imagini-hartă, astfel că vom crea un nou fişier numit test7.html care va conţine următoarele linii de cod:

 

<HTML>

<HEAD>

  <TITLE>Utilizarea unei imagini-harta</TITLE>

</HEAD>

<BODY>

  <P>Dati click pe una din formele geometrice:</P>

  <IMG SRC="http://html.webmarketclub.com/teste/imagine-harta.gif" WIDTH="268" HEIGHT="95 "ALT="Imagine de tip harta" USEMAP="#harta">

  <MAP ID="harta" NAME="harta">

  <AREA SHAPE="rect" COORDS="0,0,65,95" HREF="http://html.webmarketclub.com/teste/dreptunghi.html" TARGET="_blank" ALT="Dreptunghi">

  <AREA SHAPE="circle" COORDS="125,47,40" HREF="http://html.webmarketclub.com/teste/cerc.html" TARGET="_blank" ALT="Cerc">

  <AREA SHAPE="poly"

COORDS="185,25,224,1,224,1,268,25,268,72,226,93,185,71" HREF="http://html.webmarketclub.com/teste/hexagon.html" TARGET="_blank" ALT="Hexagon">

  </MAP>

</BODY>

</HTML>

 

Rezultatul afişat va fi următorul:

 

 

Notă: Pentru aflarea coordonatelor formelor geometrice am folosit un program specializat “Mapedit” (este un program shareware, poate fi folosit pentru testare numai 30 de zile şi poate fi descărcat la adresa http://www.boutell.com/mapedit)

 

CAP. 1. NOŢIUNI GENERALE

CAP. 2. CREAREA ŞI EDITAREA UNEI PAGINI WEB

CAP. 3. FORMATAREA DOCUMENTULUI

CAP. 4. FORMATAREA TEXTULUI

CAP. 5. CREAREA LISTELOR

CAP. 6. HYPERLINK-URI

CAP. 7. FOLOSIREA IMAGINILOR

CAP. 8. TABELE

CAP. 9. CADRE

CAP. 10. FORMULARE

CAP. 11. INTRODUCERE ÎN JAVA ŞI JAVASCRIPT

CAP. 12. PAGINI WEB MULTIMEDIA

CAP. 13. ELEMENTE SPECIALE

CAP. 14. INTRODUCERE ÎN CSS

CAP. 15. CONSIDERAŢII GENERALE DESPRE DESIGN ŞI ASPECT

CAP. 16. PUBLICAREA UNUI SITE