cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 6
Crearea legaturilor in HTML
124803 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><B>Leg&#259;tur&#259; c&#259;tre o alt&#259; pagin&#259;</B>
<BR><BR>
<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>
<B>Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia</B>
<BR><A HREF="http://www.evz.ro">Evenimentul Zilei</A>
<BR><A HREF="http://www.jurnalul.ro">Jurnalul Na&#355;ional</A>
<BR><A HREF="http://www.capital.ro">Capital</A>
<BR><A HREF="http://www.prosport.ro">Prosport</A>
<BR><A HREF="http://www.gsp.ro">Gazeta sporturilor</A>
<BR><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>
<B>Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia</B>
<BR><A HREF="http://www.evz.ro" TARGET="_blank" TITLE="Ziarul Evenimentul Zilei">Evenimentul Zilei</A>
<BR><A HREF="http://www.jurnalul.ro" TARGET="_blank" TITLE="Ziarul Jurnalul Na&#355;ional">Jurnalul Na&#355;ional</A>
<BR><A HREF="http://www.capital.ro" TARGET="_blank" TITLE="Ziarul Capital">Capital</A>
<BR><A HREF="http://www.prosport.ro" TARGET="_blank" TITLE="Ziarul Prosport">Prosport</A>
<BR><A HREF="http://www.gsp.ro" TARGET="_blank" TITLE="Ziarul Gazeta Sporturilor">Gazeta sporturilor</A>
<BR><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 »
58 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?
  -1    Raspunde
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
  3    Raspunde
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?
  -1    Raspunde
Lucian.Iordache 15 octombrie 2011, 04:12 4
@ciprian: Salut Ciprian, acum am vazut comentariul tau. S-a rezolvat intre timp?
  2    Raspunde
Rapunzell 08 iunie 2015, 18:24 5
@ciprian: poti sa il pui intre <center>si</center>.Incearca!
  0    Raspunde
ciprian 27 septembrie 2011, 22:11 6
imi apare:diagnose connction problems
  0    Raspunde
ciprian 15 octombrie 2011, 12:09 7
da! s-a rezolvat.A fost o greseala a mea,multumesc!
  -2    Raspunde
alinahodoroaba 28 octombrie 2011, 10:46 8
si mie imi apare la fel ca lui ciprian... :(
  -4    Raspunde
alinahodoroaba 01 noiembrie 2011, 08:37 9
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
Lucian.Iordache 08 noiembrie 2011, 02:11 10
@alinahodoroaba: Nu e rea ideea. O sa ma gandesc sa vad cum se poate aplica practic. Multumesc pentru sugestie.
  -2    Raspunde
hgabry 18 noiembrie 2011, 00:36 11
Buna seara! Nu inteleg ce e aia sectiune dintr-o pagina. Imi puteti expplica mai in detaliu, va rog?
o seara frumoasa!
  -5    Raspunde
shukly 19 martie 2014, 16:18 12
@hgabry: este o parte a unei pagini web foarte, foarte lungi, cum ar fi cele unde se dau raspunsuri la intrebari frecvente. ca sa nu te plictisesti cautand in toata pagina raspundul cautat, dai click pe intrebare si te duce direct unde ai nevoie
  0    Raspunde
teneida 22 noiembrie 2011, 23:03 13
foarte bun cursul
  -5    Raspunde
OanaGoga 30 noiembrie 2011, 19:53 14
Este cel mai bun curs online !!! felicitari ! m-a ajutat foarte mult . Multumesc
  -2    Raspunde
al3xxandra17 06 decembrie 2011, 14:05 15
Cum fac sa creez o legatura dintr-un site facut in html catre o pagina html?
  -3    Raspunde
Lucian.Iordache 14 decembrie 2011, 00:13 16
@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
  -2    Raspunde
vyk27 05 ianuarie 2012, 12:10 17
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
vyk27 05 ianuarie 2012, 12:11 18
explicami* sorry
  -1    Raspunde
Amadeus-Robert 21 ianuarie 2012, 21:59 19
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 ?
  -1    Raspunde
Lucian.Iordache 31 ianuarie 2012, 07:18 20
@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.
  -1    Raspunde
Rapunzell 08 iunie 2015, 18:38 21
@Lucian.Iordache: Minunaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaattttttttttttt
tttttttttttttttttttttttt
ttttttttttttttttttttttt
  0    Raspunde
Bogdan_Sorin 30 ianuarie 2012, 20:40 22
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!
  1    Raspunde
Lucian.Iordache 31 ianuarie 2012, 07:16 23
@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
shukly 19 martie 2014, 16:21 24
@Bogdan_Sorin: pune semnul # in <a href="#intrebarea1">. si eu aveam problema ta, pana am vz ca uitasem semnul
  0    Raspunde
manolemary 12 februarie 2012, 20:33 25
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.
  -6    Raspunde
Alch0oL 12 martie 2012, 20:36 26
@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.
  -3    Raspunde
lucklucian 13 martie 2012, 21:17 27
multumesc Lucian Iordache ....chiar daca pricep mai greu cursu imi place la nebunie nefiind obijnuit cu aceste limbaje coduri....etc.Bafta la totzi
  -3    Raspunde
rotaritzaaa 31 martie 2012, 10:12 28
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?
  -3    Raspunde
dima.ribac 08 iunie 2012, 15:02 29
Lucian.Iordache puteti sa-mi spuneti peste cit timp o sa fiu capabil sa fac un site??
  -2    Raspunde
adryan87 03 august 2012, 23:19 30
@dima.riba,depinde de capacitatea ta de a asimila aceste informatii:)
  -3    Raspunde
stefanitas80 06 februarie 2013, 22:11 31
Salutare tuturor!
Limbajul Html l-am mai parcurs si in facultate, acu incerc sa aprofundez (desi e mult spus)...e super! Felicitari!
  -3    Raspunde
capete 04 martie 2013, 22:15 32
Dumnezeu sa iti dea sanatate pentru tot ce ai facut aici.
  -1    Raspunde
irinutza67 07 martie 2013, 16:51 33
Buna ziua, domnule Iordache!
Va rog sa ma lamuriti asupra fragmentului de linie de cod FONT="Arial, Times New Roman"; de ce nu s-a folosit atributul FACE?
Va multumesc si va felicit pentru ceea ce faceti!
  -3    Raspunde
VladimirGH 11 martie 2013, 22:54 34
cine imi spune ce atributul ii lui target dau ca sa imi deschida lincul in alta pagina de browser.. va rog ajutatima
  -1    Raspunde
Bogdan92 15 aprilie 2013, 20:38 35
ma poate ajuta si pe mine cineva care stie cum se face o legatura intre un site si o prezentare powerpoit??va rog k imi trebuie...multumesc anticipat
  -2    Raspunde
andreiboss1997 17 aprilie 2013, 20:32 36
TAREEEEEEE!!!! FOARTE INTERESANT!!!
  -1    Raspunde
01alexandru 02 mai 2013, 19:09 37
Foarte fain si simplu de inteles!Multe multumiri Lucian!Multa rabdare in continuare:))
  -1    Raspunde
singureluelenamaria 10 mai 2013, 16:04 38
mia placut mesajul ultimei fotografii a acestei lectii :)
  -3    Raspunde
necromantress 30 mai 2013, 14:14 39
bravo...foarte bine va descurcati...as vrea sa faceti si unul despre java daca se poate
  -2    Raspunde
Dorinaandrei 11 septembrie 2013, 16:02 40
este ceva ce doream sa invat,este explicit si usor de aprofundat,
Multumesc !
  -1    Raspunde
ccristian 28 noiembrie 2013, 23:17 41
La adaugarea unei imagini ca legatura ce rol are BORDER="0" dupa TITLE? Astept o lamurire,multumesc
  -1    Raspunde
ccristian 28 noiembrie 2013, 23:17 42
La adaugarea unei imagini ca legatura ce rol are BORDER="0" dupa TITLE? Astept o lamurire,multumesc
  -1    Raspunde
shukly 19 martie 2014, 16:22 43
@ccristian: nu are chenar pe margine. daca inlocuiesti 0 cu 1-7, etc, o sa vezi ca iti apare imaginea in chenar
  0    Raspunde
Rapunzell 08 iunie 2015, 18:11 44
@ccristian: DE CE AI SCRIS DE DOUA ORI?
  0    Raspunde
florin567 06 decembrie 2013, 14:57 45
va rog sa ma ajutati am facut primul exemplu dar cand apas pe link, pagina imi spune ca fiserul nu a fost gasit in folderul respectiv dar imaginea e in folderul ala.
  0    Raspunde
Razor23 14 ianuarie 2014, 13:39 46
Salutare. In cazul in care continutul paginii este generat dinamic de catre PHP, cum putem face sa denumim titlurile astfel incat sa facem legaturi catre sectiuni ale paginii ?
  0    Raspunde
Mario67 01 mai 2014, 17:07 47
Cum culoare la butonul de legatura catre un anumit link?
  0    Raspunde
trezorier 14 noiembrie 2014, 15:17 48
Foarte bun site-ul! Am si on intrebare:
In urma unui click pentru download cum trec pe o alta pagina? Multumesc.
  0    Raspunde
Rapunzell 08 iunie 2015, 18:41 49
@trezorier: ??????????????????????
  0    Raspunde
Rapunzell 08 iunie 2015, 18:29 50
sunt dezamagita!!!!
1.trebuie sa ma loghez de fiecare data cand intru pe site!
2.e gresit cum scrie acolo!imaginile nu se pun asa!
  0    Raspunde
Rapunzell 08 iunie 2015, 18:36 51
trebuie sa scriii asa:<img src="file///C:unde vrei sa pui imaginea\numele imagini.JPG"alt="alceva da ca imginea nu iti apare" style="width:cateva px;height:tot aceleas px">
  0    Raspunde
Coyote.Wild 23 noiembrie 2015, 19:33 52
@Lucian.Iordache, scuza-mi intrebarea mediocra, dar de ce au fost necesare atatea coduri < BR > ?
  0    Raspunde
Coyote.Wild 23 noiembrie 2015, 19:52 53
Cred ca am inteles acum, sunt putin cam aerian de fel :))
  0    Raspunde
tobias.andreea 04 mai 2016, 10:27 54
buna,
nu inteleg unde trebuie sa asez in pagina ultima linie de cod...pentru a schimba culorile legaturilor :(...ma ajuta cineva?
  0    Raspunde
ABIS 15 septembrie 2016, 13:23 55
Totul este simplu si explicit. Dar singurul lucru care nu merge este legatura cu o adresa de e-mail. Mesaj "there is no email program associated to perform the requested action, Please install an email progream or, if one is already installed, create an association in the Default Programs control panel", indiferent ce adresa de mail pun; chiar si contact@ecursuri.ro. Ma poti lamuri?
  0    Raspunde
ABIS 15 septembrie 2016, 13:24 56
Uite, chiar din mesajul trimis mai inainte nu pot accesa contact@ecursuri.ro
  0    Raspunde
Bran 24 septembrie 2016, 18:05 57
Buna,am nevoie de o indrumare in legatura cu o legatura catre pagina principala a site-ului
  0    Raspunde
deniplant 31 octombrie 2017, 13:50 58
Buna ziua,
Am vazut in curs cum se face legatura cu o adresa de e-mail. Aveti idee ce ar trebui facut pentru a trimite continutul unui e-mail catre o pagina html. Stiu ca unele bloguri au aceasta facilitate, de a posta un mesaj in blog trimitand mesajul prin intermediul e-mail.Multumesc
  0    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera
7 lectii online
Excel prin exemple
10 lectii online
Windows XP prin exemple
10 lectii online
Infiintarea unei firme
6 lectii online
Gramatica limbii engleze
27 lectii online
Introducere in e-Business
25 lectii online
Curs de Machiaj
13 lectii online
Curs de Fashion
17 lectii online
Curs de Barman
10 lectii online
HTML pe intelesul tuturor
11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro Cursuri și certificări GDPR