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 <IMG>.

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>

Rezultatul introducerii codului de mai sus:


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">

Rezultatul introducerii codului de mai sus:


Tag-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
<img align=”right” src="/1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea generata">
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 <CENTER> si </CENTER> .

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

LINKURI

<a name=”definitie_zona”> Text </a>

sau

Comentarii (18)

Subscribe to this comment's feed

cosminel4u said:

	sau de exemplu , pentru redirectionare : NUME SITE
	Reporteaza Abuz Displace Apreciaza

iunie 11, 2009
Voturi: +1

219412 said:

	Cum fac si eu un concurs pe forum cu premii id de mess: mstoica2000...
	Reporteaza Abuz Displace Apreciaza

iulie 19, 2009
Voturi: +3

martin said:

	Este dar ce editor HTML ati folosit pentru a pune aceste link-uri pe site...?ca sa fie mai clar...
	Reporteaza Abuz Displace Apreciaza

iulie 20, 2009 | url
Voturi: +1

admin said:

	Notepad sau Dreamweaver
	Reporteaza Abuz Displace Apreciaza

iulie 20, 2009
Voturi: +3

v5ly said:

	tare 8) 8)
	Reporteaza Abuz Displace Apreciaza

august 02, 2009 | url
Voturi: +0

hopsieu said:

	Interesant tutorialul o sa incerc si eu cateva, dar eu am o problema cu borderul de la poze. Din cauza linkurilor, pozele apar intr-un chenar, chiar si emoticoanele de la comentarii sunt incadrate in acel chenar ce pot face? Va rog ajutati-ma !
	Reporteaza Abuz Displace Apreciaza

februarie 23, 2010 | url
Voturi: +1

mozzartut said:

	@hopsieu 1. sau 2.
	Reporteaza Abuz Displace Apreciaza

martie 21, 2010 | url
Voturi: +1

mozzartut said:

	< a href= " " > < img src= " " border= "none" /> < / a>
	Reporteaza Abuz Displace Apreciaza

martie 21, 2010 | url
Voturi: +2

Yoan said:

	bun tutorial
	Reporteaza Abuz Displace Apreciaza

aprilie 18, 2010 | url
Voturi: +0

evening dresses said:

	Her material isn’t original, nor her stage presence exceptional. But she’s vivacious, and the work is
	Reporteaza Abuz Displace Apreciaza

septembrie 29, 2010 | url
Voturi: -1

silk scarf said:

	Whoever said fashion silk scarf is for ladies must look a small more closely in to the latest trend silk scarves
	Reporteaza Abuz Displace Apreciaza

iunie 22, 2011 | url
Voturi: +0

flem said:

	I would like to see more details about this topic. I'm going to keep coming back here.
	Reporteaza Abuz Displace Apreciaza

iulie 22, 2011 | url
Voturi: +0

Coach Outlet Online said:

	jhfjhfjhgHere you will find all the latest Coach Outlet coupons.
	Reporteaza Abuz Displace Apreciaza

iulie 28, 2011 | url
Voturi: +1

deyu16 said:

	mersi pt informatie
	Reporteaza Abuz Displace Apreciaza

august 24, 2011 | url
Voturi: +1

littlejohn said:

	Salut, Am si eu o intrebare: in html, am un link imagine si as vrea sa apara un text cand duc mousul peste imagine. Cum as putea face? Codul este mai jos: Mersi!
	Reporteaza Abuz Displace Apreciaza

octombrie 30, 2011
Voturi: +0

ugg tall boots said:

	All boots will have soft foam insole of sheep rind with light weight.
	Reporteaza Abuz Displace Apreciaza

noiembrie 11, 2011 | url
Voturi: +0

gucci outlet said:

	the son might have gucci outlet been abducted. Son Majian Yu, deaf, cheap gucci cheap gucci 21 gucci for sale years old, he left home on gucci outlet October 2 an... discount gucci
	Reporteaza Abuz Displace Apreciaza

noiembrie 17, 2011 | url
Voturi: +0

Ovy said:

	I recently found much useful information in your website especially this blog page. Among the lots of comments on your articles. Thanks for sharing.san antonio dentists
	Reporteaza Abuz Displace Apreciaza

decembrie 24, 2011
Voturi: +0