Crearea legaturilor in HTML » HTML pe intelesul tuturor


	Am uitat utilizatorul Am uitat parola

Cursuri online
Cursuri online gratuite

Tutoriale
Cum sa faci orice

Teste online
Testeaza-ti cunostintele

Revista
Aboneaza-te gratuit

Referate
Descarca referate

Jocuri
Jocuri educative

Inregistreaza-te
Intra in comunitate

eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 6

Crearea legaturilor in HTML

6575 afisari

Navigarea in cadrul site-urilor este posibila cu ajutorul link-urilor (legaturilor). In aceasta lectie vei invata cum sa folosesti diferite tipuri de legaturi in cadrul site-ului tau.

Legatura catre o alta pagina

Pentru a folosi legaturi in paginile web pe care le vei face, trebuie sa folosesti perechea de tag-uri <A> si </A>. Numele acestor tag-uri vine de la cuvantul anchor care se traduce ancora. Tag-ul <A> va trebui folosit impreuna cu atributul HREF. Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web va avea urmatoarea forma:

<A HREF=numelepaginii.html>Textul legaturii</A>

Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu sunt necesare ghilimelele. Sa vedem impreuna, cum poti adauga o legatura intr-o pagina web din folderul Pagini catre pagina imagini.html din acelasi folder. Deschide editorul de texte (de exemplu: Notepad) si scrie urmatorul cod HTML:

<HTML>
<HEAD>
<TITLE>Legaturi</TITLE>
</HEAD>
<BODY>
<CENTER>Legătură către o altă pagină
 
<A HREF=imagini.html>Imagine Invat HTML</A>
</CENTER>
</BODY>
</HTML>

Salveaza pagina (File/Save As) cu numele de link.html in folderul Pagini.

Pagina link.html ar trebui sa arate astfel: click aici

Daca pagina catre care vrem sa facem o legatura, nu se afla in acelasi folder cu pagina noastra atunci nu mai putem folosi decat numele paginii HTML ca valoare a atributului HREF. Sa vedem cateva exemple de legaturi catre pagini din alte directoare sau subdirectoare. Fie urmatoarea structura:
cursuri

Pentru a intelege cat mai bine cum functioneaza legaturile catre diverse pagini web, este bine sa faci si tu, pe calculatorul tau, o structura asemanatoare cu cea de mai sus, iar apoi sa faci cateva pagini HTML in diverse directoare sau subdirectoare si sa incerci sa creezi legaturi din fiecare pagina HTML catre celelate. Iata cateva exemple:

pentru a adauga o legatura in cadrul unei pagini HTML din directorul Contabilitate catre o pagina HTML din directorul Firma 1, vom folosi urmatoarea valoare a atributului HREF:

<A HREF="Firma 1/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Site catre o pagina HTML din directorul Carti, vom folosi urmatoarea valoare a atributului HREF:

<A HREF="Documente/Carti/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o pagina HTML din directorul Scoala, vom folosi urmatoarea valoare a atributului HREF:

<A HREF="../numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Bilanturi catre o pagina HTML din directorul Site, vom folosi urmatoarea valoare a atributului HREF:

<A HREF="../../numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Servici catre o pagina HTML din directorul Matematica, vom folosi urmatoarea valoare a atributului HREF:

<A HREF="../../Scoala/Matematica/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Firma 2 catre o pagina HTML din directorul Firma 3, vom folosi urmatoarea valoare a atributului HREF:

<A HREF="../Firma 3/numelepaginii.html">Text link</A>

Legatura catre un site

Dupa ce ai vazut cum se folosesc legaturile catre alte pagini html locale acum vom vedea impreuna cum putem adauga o legatura catre un site particular. Trebuie sa folosesti urmatoarea linie de cod:

<A HREF="adresa site-ului">Textul legaturii</A>

Sa facem o pagina web care sa contina legaturi catre site-uri ale unor ziare din Romania. Scrie urmatorul cod HTML:

<HTML>
<HEAD>
<TITLE>Legaturi catre site-uri particulare</TITLE>
</HEAD>
<BODY>
<CENTER>
Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia
 <A HREF="http://www.evz.ro">Evenimentul Zilei</A>
 <A HREF="http://www.jurnalul.ro">Jurnalul Naţional</A>
 <A HREF="http://www.capital.ro">Capital</A>
 <A HREF="http://www.prosport.ro">Prosport</A>
 <A HREF="http://www.gsp.ro">Gazeta sporturilor</A>
 <A HREF="http://www.libertatea.ro">Libertatea</A>
</CENTER>
</BODY>
</HTML>

Salveaza pagina cu numele de ziare.html in directorul Pagini.

Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici

Asa cum ai observat pana acum, atunci cand dai click pe una dintre legaturile din paginile prezentate ca exemple, se deschide o pagina HTML in aceeasi fereastra a browser-ului, peste pagina ce contine legatura. Pentru a deschide o noua fereastra a browser-ului atunci cand se da click pe o legatura trebuie folosit atributul TARGET caruia i se atribuie valoarea "_blank".

Sa vedem un exemplu: sa schimbam codul paginii ziare.html astfel incat site-ul fiecarui ziar sa se deschida intr-o noua fereastra, atunci cand se va efectua un click pe legatura catre
acesta. Daca in plus vrei ca, atunci cand utilizatorii paginii tale web vor trece cursorul mouse-ului deasupra legaturilor, sa apara o mica nota explicativa, trebuie sa folosesti atributul TITLE. Ca valoare a acestui atribut trebuie sa scrii textul care vrei sa apara atunci cand se va trece cursorul mouse-ului deasupra legaturii respective. Pentru a intelege mai bine iata cum va arata codul paginii ziare.html dupa adaugarea atributelor TARGET si TITLE pentru fiecare legatura:

<HTML>
<HEAD>
<TITLE>Legaturi catre site-uri particulare</TITLE>
</HEAD>
<BODY>
<CENTER>
Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia
 <A HREF="http://www.evz.ro" TARGET="_blank" TITLE="Ziarul Evenimentul Zilei">Evenimentul Zilei</A>
 <A HREF="http://www.jurnalul.ro" TARGET="_blank" TITLE="Ziarul Jurnalul Naţional">Jurnalul Naţional</A>
 <A HREF="http://www.capital.ro" TARGET="_blank" TITLE="Ziarul Capital">Capital</A>
 <A HREF="http://www.prosport.ro" TARGET="_blank" TITLE="Ziarul Prosport">Prosport</A>
 <A HREF="http://www.gsp.ro" TARGET="_blank" TITLE="Ziarul Gazeta Sporturilor">Gazeta sporturilor</A>
 <A HREF="http://www.libertatea.ro" TARGET="_blank" TITLE="Ziarul Libertatea">Libertatea</A>
</CENTER>
</BODY>
</HTML>

Salveaza pagina cu numele ziare.html peste pagina existenta.

Iata cum ar trebui sa arate pagina finala ziare.html: click aici

Legatura catre o sectiune de pagina

Atunci cand avem de-a face cu pagini mai lungi, putem imparti aceste pagini in mai multe sectiuni catre care sa adaugam cate o legatura la inceputul paginii pentru ca utilizatorii sa ajunga mai repede la sectiunea care ii intereseaza. Un bun exemplu pentru o astfel de pagina il reprezinta paginile care contin intrebarile frecvente (Frecvently Asked Questions).

Fiecare titlu al sectiunii trebuie definit ca ancora. Pentru acest in mod normal foloseam atributul NAME pe care il asociam tagului <A>, dar pentru ca in browserul Mozilla Firefox nu merge in toate versiunile, vom folosi atributul ID care face acelasi lucru. Trebuie sa tinem cont ca fiecare ID trebuie sa inceapa cu o litera si sa fie unic intr-o pagina (adica nu putem avea mai multe ID-uri cu acelasi nume in aceeasi pagina).

Pentru a citi continuarea lectiei trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)

« Adaugarea imaginilor in paginile HTML

Crearea listelor in HTML »

24 comentarii

	florinsabin 15 septembrie 2011, 06:10	1
	Salutari. In primul rand felicitari pentru lucrare pe care ai facut-o si multumesc. Acum partea cu intrebarile... :) Atributul target cu valoarea _blank, afecteaza in vreun mod telefoanele mobile? Adica, poate un user cu un telefon mobil sa deschida un link cu atribut target _blank?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 15 septembrie 2011, 22:55	2
	@florinsabin: Salut, multumesc pentru aprecieri. Iti zic sincer ca ma depaseste intrebarea (in sensul ca nu folosesc netul pe telefon) si sa iti raspund doar de dragul de a-ti raspunde ... mai bine nu :) Ramane deschisa intrebarea sau daca ai aflat tu ... te asteptam cu amanunte
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	ciprian 27 septembrie 2011, 19:55	3
	Salut,am si eu o prb:urmez primii pasi pentru asocieri si nu-mi da ca in exmpl,de ce?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 15 octombrie 2011, 04:12	4
	@ciprian: Salut Ciprian, acum am vazut comentariul tau. S-a rezolvat intre timp?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	ciprian 27 septembrie 2011, 22:11	5
	imi apare:diagnose connction problems
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	ciprian 15 octombrie 2011, 12:09	6
	da! s-a rezolvat.A fost o greseala a mea,multumesc!
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	alinahodoroaba 28 octombrie 2011, 10:46	7
	si mie imi apare la fel ca lui ciprian... :(
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	alinahodoroaba 01 noiembrie 2011, 08:37	8
	si eu am rezolvat!!! m-as bucura daca la fiecare lectie ne-ai da si cate o tema " ptr acasa",ca sa aprofundam... cam duc lipsa de imaginatie cand e vorba sa concep eu ceva... merci!!!!
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 08 noiembrie 2011, 02:11	9
	@alinahodoroaba: Nu e rea ideea. O sa ma gandesc sa vad cum se poate aplica practic. Multumesc pentru sugestie.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	hgabry 18 noiembrie 2011, 00:36	10
	Buna seara! Nu inteleg ce e aia sectiune dintr-o pagina. Imi puteti expplica mai in detaliu, va rog? o seara frumoasa!
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	teneida 22 noiembrie 2011, 23:03	11
	foarte bun cursul
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	OanaGoga 30 noiembrie 2011, 19:53	12
	Este cel mai bun curs online !!! felicitari ! m-a ajutat foarte mult . Multumesc
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	al3xxandra17 06 decembrie 2011, 14:05	13
	Cum fac sa creez o legatura dintr-un site facut in html catre o pagina html?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 14 decembrie 2011, 00:13	14
	@al3xxandra17: Este un simplu link si poti folosi codul de la sectiunea Legatura catre o alta pagina. Practic vei folosi in cod: http://www.numesite.ro/numepagina.html
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	vyk27 05 ianuarie 2012, 12:10	15
	lucian te rog exlplicami si mie ca aceasta lectie e destul de grea pentru mine nu inteleg partea 1 din lectia cu legatura spre o alta pagina
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	vyk27 05 ianuarie 2012, 12:11	16
	explicami* sorry
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Amadeus-Robert 21 ianuarie 2012, 21:59	17
	Am si eu o intrebare: Cum pot face ca, atunci cand dau click pe linkul pt a "trimite intrebari" la mail-ul respectiv, sa mearga la o adresa reala de mail specificata ?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 31 ianuarie 2012, 07:18	18
	@Amadeus-Robert: Si acum se duce la o adresa de email reala: contact@ecursuri.ro. Daca vrei sa modifici adresa, inlocuieste contact@ecursuri.ro in cod (de dupa mailto:) cu adresa de email pe care o vrei tu.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Bogdan_Sorin 30 ianuarie 2012, 20:40	19
	Deci multumesc pentru acest tutorial dar cu toate ca tutorialul este destul de explicit eu ma chinui de 3 zile in continuu sa descopar aceasta chestie: la partea "Legatura catre o sectiune de pagina"am copiat cu grija acel exemplu si am si citit dar nu-mi intra in cap si nu fac ceva bine adica dupa ce scriu toata treaba aceea pagina mea nu arata ca in exemplu ci sub titlu la inceput vad doua exemplu de BR> iesite unu mai sus unu mai jos nitel si dupa vin intrebarile..daca dau click pe o intrebare nu ma duce la raspunsul din mai josul paginii ci imi zice ca nu exista si sa incerc din noi etc.. Te rog sa-mi raspunzi chiar vreau sa invat HTML dar aici m-am blocat!
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 31 ianuarie 2012, 07:16	20
	@Bogdan_Sorin: Salut, te rog da-mi pagina ta html pe contact@ecursuri.ro (mentioneaza in subiect: pentru Lucian). Este foarte greu daca nu vad codul sa imi dau seama de vreo eventuala greseala.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	manolemary 12 februarie 2012, 20:33	21
	Eu am facut un site pentru scoala mea iar unele legaturi spre alte pag web le deschide , altele nu. Unde gresesc. Mentionez ca cu explorer nu le deschide in schimb cu mozilla torul e ok.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Alch0oL 12 martie 2012, 20:36	22
	@manolemary: Eu iti recomand sa folosesti Mozila sau Chrome. IE este dupa parerea mea , cel mai slab browser.Daca nici asa nu ti le deschide , probabil ai gresit undeva.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	lucklucian 13 martie 2012, 21:17	23
	multumesc Lucian Iordache ....chiar daca pricep mai greu cursu imi place la nebunie nefiind obijnuit cu aceste limbaje coduri....etc.Bafta la totzi
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	rotaritzaaa 31 martie 2012, 10:12	24
	daca in loc de poza vreau sa folosesc un film facut in adobe flash trebuie sa mai schimb ceva ca sa imi acceseze filmul ca ancora pt. o anume pagina?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!