In acest tutorial html vei invata cum sa adaugi imagini intr-o pagina web si cum sa faci legaturi(link-uri) intre paginile unui site.
IMAGINI
Imaginea a devenit un element omniprezent in toate paginile web actuale . Bazat pe faptul recunoscut ca o imagine are un impact mult mai mare asupra privitorului decat un text precum si pe necesitatea oferirii unor informatii cat mai rapid si direct catre utilizator imaginea s-a impus ca elementul indispensabil oricarei prezentari a oricarui subiect .
In cadrul paginilor web introducerea elementelor grafice – la acest moment ne referim la imaginile de tip GIF sau JPG – se face cu ajutorul tag-ului
![]()
.
Urmatorul cod are ca efect introducere imaginii imagine.gif in pagina noastra , cu dimensiunile specificate in atributele WIDTH ( latime ) si HEIGHT ( inaltime ) ale tag-ului .
<IMG src="/imagine.gif" mce_src="/imagine.gif" WIDTH=190 HEIGHT=70> Atributul SRC specifica sursa de unde browser-ul va incarca imaginea respectiva .
Aceasta locatie poate fi in sistemul respectiv ( in directorul paginii sau in orice alt director ce va fi specificat in cale ) sau in orice alta locatie pe web ( ex. http://www.tutorialul.ro/tutoriale-html/poza1.gif ) .
In cazul in care nu se introduce o cale catre aceasta imagine ci doar numele ei atunci browser-ul va cauta in directorul curent al paginii web .
Atributele WIDTH si HEIGHT pot lipsi iar browser-ul va recunoaste imaginea la dimensiunile ei originale ; chiar in cazul in care imaginea a fost special creat pe dimensiunile necesare paginii noastre este de preferat folosirea celor doua atribute care ajuta la incarcarea mai rapida a imaginii ( in caz contrar browser-ul va mai pierde timp calculand dimensiune si asezarea in pagina a imaginii respective ) .
Atributul ALT -Un alt atribut care este preferabil sa fie prezent este atributul ALT . Cu ajutorul acestui atribut putem oferi o alternativa browser-ului in cazul in care imaginea respectiva nu a putut fi incarcata
<img src="/1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea generata"> ag-ul anterior va face ca in cazul in care poza dorita nu este gasita browser-ul sa afiseze textul atributului ALT intr-o fereastra de dimensiunile specificate pentru imagine .
Tag-ul BORDER - Un alt atribut al tag-ului IMG este si BORDER - cu ajutorul sau putem specifica grosimea unui chenar care inconjoara imaginea dorita .
Tag-ul IMG accepta si el atributul ALIGN , intalnit de exemplu si in cadrul tag-ului
Text care va apare alaturi de imagine neacoperind imaginea .
Rezultatul introducerii codului de mai sus:
Text care va apare alaturi de imagine neacoperind imaginea .
Comanda anterioara va pozitiona imaginea la dreapta liniei si va face ca textul sa apara in stanga imaginii ( analog pentru folosirea atributului ALIGN=”left” ) .
In cazul folosirii valorii CENTER pentru atributul ALIGN se va obtine pozitionare in stanga a imaginii ( lucru default ) iar textul va incepe pe linia pozitionata in dreptul mijlocului imaginii , dupa umplerea acestei linii textul continuand pe linia urmatoare de sub imagine – aceasta optiune este in general evitata .
Pentru a obtine centrarea imaginii se va apela la incadrarea tag-ului IMG intre doua taguri complemetare
si .
Tot in cadrul atributului ALIGN mai putem intalni alte trei valori :
- “bottom” – aliniaza partea inferioara a imaginii pe linia curenta
- “top” – aliniaza partea superioara a imaginii cu cel mai inalt element de pe linia curenta
- “middle” – aliniaza mijlocul imaginii cu linia curenta
