Tutorial HTML Imagini si Link-uri

HTML - incepatori

 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:
Text in cazul lipsei pozei din calea generata


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 in cazul lipsei pozei din calea generata 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


Mai intai sa vedem ce este un link. .
Pentru a fi cat mai simplu : un link reprezinta o legatura (un cuvant, o imagine, o propozitie) in cadrul unei pagini si pe care poti da click pentru a naviga catre alte locatii .

Practic orice element al unei pagini web poate fi asociat unui link : un text , o imagine sau doar o portiune de imagine .

Secventa urmatoare reprezinta introducerea unui link catre pagina Tutorialul .
<a href="http://www.tutorialul.ro">Tutorialul.ro</a>
Rezultatul introducerii codului de mai sus:
Tutorialul.ro


Tagurile <a> si </a> ( = anchor ) transmit browser-ului faptul ca urmeaza definirea unui link . 

Adresa link-ului se incadreaza in href=” .." . Href provine de la Hypertext Reference si este un atribut al tag-ului . Dupa incheierea tag-ului urmeaza textul sau imaginea care urmeaza sa faca legatura catre linkul dorit .

In cazul in care dorim realizarea unei legaturi catre o alta pagina din acelasi director se va introduce in cadrul atributului href doar numele paginii :

<a href="/continut.htm">Continut</a>
Un alt tip comun de legatura este linkul in cadrul aceleiasi pagini . Pentru a crea un astfel de link trebuie realizati doi pasi .

In primul rand trebuie sa identificam sectiunea paginii unde vrem sa putem sari si apoi sa realizam linkul .

Pentru primul pas – definirea zonei la care dorim sa se faca legatura - avem doua posibilitati :

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

sau

<p id=”definitie_zona”> Text

Saltul propriu-zis la aceasta zona definita se face prin intermediul urmatoarei linii de cod :

<a href="#definitie_zona">Acest link va duce inapoi la zona definita</a>
Rezultatul introducerii codului de mai sus:
Acest link va duce inapoi la zona definita


Saltul se poate face si combinat – la o anumita zona definita in alta pagina , ca in exemplul urmator :

<a href="/pagina2.html#definitie_zona">Acest link va duce inapoi la zona definita in pagina 2</a>

Atributul MailTo - O alta intrebuintare foarte des intalnita a tag-ului tine de inserarea in pagina web a unei adrese de contact , mai exact o adresa de mail .

Urmatoarea linie de cod realizeaza exact acest lucru , cuvantul cheie mailto specificand browser-ului ca urmeaza o adresa de mail iar acesta va lansa clientul de mail al vizitatorului paginii cu adresa adresa@yahoo.com gata introdusa in cadrul mesajului :

<a href="mailto:adresa@yahoo.com">Trimite mail</a>
Rezultatul introducerii codului de mai sus:
Trimite mail


Atributul Subject
- Un atribut folositor al tag-ului este si SUBJECT , mail-ul trimis de vizitator primind astfel un subiect gata definit de dumneavoastra :

<a href="mailto:adresa@yahoo.com?subject=testare">Trimite Mail</a>

Tot in problema linkurilor mai trebuie sa amintim si posibilitatea de a defini o adresa de baza pentru linkurile din pagina noastra . In mod normal pentru un link catre o pagina din acelasi director se foloseste doar numele paginii . Sa presupunem ca toate linkurile din pagina noastra sunt catre pagini aflate intr-un acelasi director DIRECTOR_SURSE ; in acest caz putem reduce textul presupus de introducerea acestei cai in fiecare atribut HREF in modul urmator :
<HEAD>

<BASE HREF=http://www.site.com/director_surse>

</HEAD>


Dupa utilizarea acestui cod sursa putem utiliza in cadrul atributului HREF doar numele fisierului respectiv .

 

Aboneaza-te prin RSS
Comentarii (18)add comment

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

Adauga un comentariu
Micsoreaza | Mareste

busy