Prima pagina Prima pagina
Structura | Formatarea | Liste | Referinte | Imagini | Tabele | Formulare |
Cadre | Culori | URL-uri | Caractere speciale | Comentariile HTML


Imagini




     Eticheta IMG specifica o imagine care va fi afisata in documentul HTML.
Exista doua categorii de imagini utilizate in HTML. Acelea care apar direct in documente atunci cand sunt vizualizate cu un program de explorare se numesc imagini interne. Celelalte imagini, numite imagini externe, vor fi discutate ulterior.

    Majoritatea programelor de explorare WEB poate prelucra doar cateva tipuri de imagini interne:

  • GIF - reprezinta initialele de la Graphic Interchange Format iar fisierele de tip GIF au extensia .gif. Format GIF poate reda un numar de maxim 256 de culori (cunoscuta si sub numele de "culoare pe 8 biti"). Formatul GIF utilizeaza o schema de comprimare care nu elimina detaliile din imagine. Īn schimb, reducerea dimensiunilor se face prin eliminarea culorilor.

         Formatul GIF este utilizat pentru a reda imagini de dimensiuni relativ mici precum banere publicitare, figurine (icon-uri), diverse butoane grafice (animate sau nu), imagini de dimensiuni mari īn care predomina doar cāteva culori, precum si īn cazul īn care trebuie prezentate imagini detaliate ca de exemplu o harta. Īn toate aceste cazuri imaginile finale vor contine maxim 256 de culori. Īn cazul banerelor publicitare acestea pot contine un numar mai mare de culori, caz īn care se vor utiliza fisiere JPEG sau se va utiliza un program specializat pentru a face o conversie de la o imagine cu un numar mai mare de culori la o imagine gif care sa arate acceptabil. Pe masura ce numarul de culori utilizate īntr-o imagine de tip GIF creste va creste si dimensiunea fisierului.

        Cea mai recenta varianta de fisier GIF este cunoscuta sub numele de GIF89a si dispune de urmatoarele optiuni care nu se regasesc la fisierele JPEG si nici la varianta mai veche a formatului GIF (este vorba de GIF87):

    • Īntretesere (Interlacing) - un fisier GIF care a fost salvat cu optiunea "interlacing" activa este un fisier grafic care permite afisarea gradata sau treptata a imaginii. Cu alte cuvinte, la īnceput se va afisa o imagine neclara (īncetosata) urmānd ca pe masura ce se īncarca aceasta sa se clarifice. Īn acest fel se creaaza senzatia unei īncarcari mai rapide si, pe de alta parte, se mentine interesul vizitatorului.
    • Transparenta (Transparency) - consta īn proprietatea unui fisier gif de a avea o culoare transparenta. Cu alte cuvinte, fundalul pe care este plasata imaginea poate fi vizibil acolo unde avem o culoare transparenta.

    • Animatie - fisierele de tip GIF care contin animatie sunt cunoscute sub denumirea de "GIF-uri animate". Prin utilizarea unor programe speciale se pot realiza fisiere GIF care sa contina un numar de imagini. Aceste imagini vor fi ciclate dānd iluzia de animatie.


  • JPEG - reprezinta initialele de la Joint Photographic Expert Group si este formatul utilizat pentru comprimarea imaginilor de calitate fotografica (numarul de culori nu mai este limitat la 256). Fisierele JPEG pot avea extensii de forma .jpg, .jpe etc. Schema de comprimare utilizata se bazeaza pe reducerea marimii fisierului prin eliminarea unor detalii. Īn functie de gradul de comprimare ales detaliile vor fi mai mult sau mai putin vizibile. Īn general se alege o comprimare medie astfel īncāt sa nu poata fi percepute diferentele fata de imaginea originala.

         Formatul JPEG se utilizeaza pentru imagini de dimensiuni mari care contin un numar mare de culori (de regula acestea sunt poze). Spre deosebire de formatul GIF, formatul JPEG nu are decāt optiunea "Progressive", optiune ce permite afisarea gradata a imaginii (similar cu gifurile īntretesute). Utilizarea acestei optiuni face ca fisierul JPEG sa aiba o dimensiune ceva mai mare, inconvenient care este compensata de faptul ca vizitatorul va putea vedea cum arata imaginea fara ca aceasta sa fie īncarcata complet īn browser.

  • XPM(X PixMap) -imagini color de tip X-Pixelmap


  • XBM(X BitMap) -imagini alb-negru de tip X-Bitmap




Imagini interne

Imaginile interne pot fi introduse in documentul HTML prin tagul vid <IMG> care este folosit in conjuctie cu atributele:

InstructiuneaAtributeDescriere
< img atribute > - marcajul de includere a imaginii
src = " url " adresa fisierului grafic (url absolut sau relativ)
alt = " text " textul alternativ care este afisat celor care navigheaza fara imagini
align = alinierea imaginii in pagina: right (dreapta), left (stanga = implicit)
alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)
height = inaltimea imaginii (in pixeli sau %)
width = latimea imaginii (in pixeli sau %)
border = marimea chenarului din jurul imaginii (in pixeli)
hspace = spatiu pe orizontala in jurul imaginii (in pixeli)
vspace = spatiu pe verticala in jurul imaginii (in pixeli)




Imagini externe

    De cele mai multe ori este preferabil sa nu folosim imagini interne deoarece, mai ales daca au o dimensiune mare, incetineste incarcarea paginii , lucru contraindicat (nu e bine sa abuzezi de timpul si asa limitat al vizitatorului). Imaginile externe se introduc prin stabilirea unui link catre fisierul imagine:

<A HREF="tom3.jpg"> Poza externa </A>
Se obtine urmatorul link:

Poza externa

     Atunci cand dorim sa inseram in document mai multe imagini de mari dimensiuni (un album, de exemplu) este bine sa folosim un tabel in celulele caruia sa afisam imaginile micsorate (prin precizarea latimii si inaltimii) iar printr-un clic pe imaginea respectiva sa se faca incarcarea imaginii in marime naturala. In exemplul urmator se aplica aceasta tehnica.


Harti de imagini


         Sunt imagini care sunt "impartite" in mai multe zone, in functie de zona pe care se executa click, browserul afiseaza o alta pagina.
         De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click in zona Brasov se incarca o pagina care descrie diverse obiective turistice din judet si/sau contine o imagine a hartii judetului, pe care definim alte zone in jurul localitatilor, iar un click pe o localitate ar duce la alta pagina care descrie obiectivele turistice din localitate.
         O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate se poate folosi o imagine care reprezinta toate butoanele - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data.
         Pana aici numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va intelege mai nimic (putem totusi folosi marcajul alt de specificare a textului alternativ pentru imagini).

InstructiuneAtributeDescriere

< img atribute >

-

marcaj de includere a imaginilor

ismap

specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)

usemap = " nume_harta "

specifica harta de imagine la client

lowscr = " url "

imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)

< map atribute >
< / map >

-

specifica regiunile unei harti de imagine la client

name = " nume_harta "

numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)

< area atribute >

-

defineste o regiune a unei harti de imagine

shape = " forma "

forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
!!! Netscape 4.51 nu a "inteles" decat circle, nu si circ

coords = " coordonate "

coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau coordonatele colturilor din stg. sus si dr. jos ale regiunii
- pentru circ (cerc) se dau coordonatele centrului cercului si raza
- pentru point (punct) se dau coordonatele punctului
- pentru poly (poligon) se dau coordonatele colturilor poligonului

href = " url "

URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL

alt = " text "

textul alternativ asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini
!!! Netscape 4.51 nu a afisat decat primul text dat cu alt


Exemplul urmator arata constructia unei harti de imagini.


Prima pagina       Inapoi Sus Inainte