Document PDF 4

Sursa: http://www.ecursuri.
ro/
Lecția 4
Crearea legăturilor în HTML
Navigarea în cadrul site-urilor este posibilă cu ajutorul link-urilor (legăturilor). În aceasta lecţie vei
învăţa cum să foloseşti diferite tipuri de legături în cadrul site-ului tău.
Legătura către o altă pagină

Pentru a folosi legături în paginile web pe care le vei face, trebuie să foloseşti perechea de tag-uri <A>
şi </A>. Numele acestor tag-uri vine de la cuvântul anchor care se traduce ancoră. Tag-ul <A> va
trebui folosit împreună cu atributul HREF. Linia de cod pentru inserarea unei legături în cadrul unei
pagini web va avea următoarea formă:
<A HREF=numelepaginii.html>Textul legăturii</A>
Dacă pagina respectivă se află în acelaşi folder cu pagina pe care se află legătura atunci nu sunt
necesare ghilimelele. Să vedem împreună, cum poţi adăuga o legătură într-o pagina web din folderul
Pagini către pagina imagini.html din acelaşi folder. Deschide editorul de texte (de exemplu: Notepad)
şi scrie următorul cod HTML:
<HTML>
<HEAD>
<TITLE>Legaturi</TITLE>
</HEAD>
<BODY>
<CENTER>Leg&#259tur&#259 c&#259tre o alt&#259 pagin&#259 
 
<A HREF=imagini.html>Imagine bebe</A>
</CENTER>
</BODY>
</HTML>
Salvează pagina cu numele de link.html în folderul Pagini.
Dacă pagina către care vrem să facem o legătură, nu se află în acelaşi folder cu pagina noastră atunci nu
mai putem folosi decât numele paginii HTML ca valoare a atributului HREF. Să vedem câteva exemple
de legături către pagini din alte directoare sau subdirectoare. Fie următoarea structură:
Pentru a înţelege cât mai bine cum funcţionează legăturile către diverse pagini web, este bine să faci şi
tu, pe calculatorul tău, o structură asemănătoare cu cea de mai sus, iar apoi să faci câteva pagini HTML
în diverse directoare sau subdirectoare şi să încerci să creezi legături din fiecare pagina HTML către
celelalte. Iată câteva exemple:
- pentru a adăuga o legătură în cadrul unei pagini HTML din directorul Contabilitate către o
pagină HTML din directorul Firma1, vom folosi următoarea valoare a atributului HREF:
1
Sursa: http://www.ecursuri.ro/
Lecția 4
A HREF="Firma 1/numelepaginii.html">Text link</A>
- pentru a adăuga o legătura în cadrul unei pagini HTML din directorul Site către o pagină
HTML din directorul Carti, vom folosi următoarea valoare a atributului HREF:
<A HREF="Documente/Carti/numelepaginii.html">Text link</A>
- pentru a adăuga o legătură în cadrul unei pagini HTML din directorul Matematica către o
pagină HTML din directorul Scoala, vom folosi următoarea valoare a atributului HREF:
- <A HREF="../numelepaginii.html">Text link</A>
- - pentru a adăuga o legătura în cadrul unei pagini HTML din directorul Bilanturi către o pagină
HTML din directorul Site, vom folosi următoarea valoare a atributului HREF:
<A HREF="../../numelepaginii.html">Text link</A>
Legătura către un site

După ce ai văzut cum se folosesc legăturile către alte pagini html locale acum vom vedea împreună
cum putem adăuga o legătură către un site particular. Trebuie să foloseşti următoarea linie de cod:
<A HREF="adresa site-ului">Textul legăturii</A>
Să facem o pagina web care să conţină legături către site-uri ale unor ziare din România. Scrie
următorul 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 
</CENTER>
 <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>
 
</BODY>
</HTML>
Salvează pagina cu numele de ziare.html în directorul Pagini.
Aşa cum ai observat până acum, atunci când dai click pe una dintre legăturile din paginile
prezentate ca exemple, se deschide o pagina HTML în aceeaşi fereastră a browser-ului, peste
pagina ce conţine legătura. Pentru a deschide o nouă fereastră a browser-ului atunci când se dă click
pe o legătură trebuie folosit atributul TARGET căruia i se atribuie valoarea "_blank".
Să vedem un exemplu: să schimbăm codul paginii ziare.html astfel încât site-ul fiecărui ziar să se
deschidă într-o nouă fereastră, atunci când se va efectua un click pe legătura către acesta. Dacă în
plus vrei ca, atunci când utilizatorii paginii tale web vor trece cursorul mouse-ului deasupra
legăturilor, să apară o mica notă explicativă, trebuie să foloseşti atributul TITLE. Ca valoare a
acestui atribut trebuie să scrii textul care vrei să apară atunci când se va trece cursorul mouse-ului
deasupra legăturii respective. Pentru a înţelege mai bine iată cum va arata codul paginii ziare.html
după adăugarea atributelor TARGET si TITLE pentru fiecare legătură:
<HTML>
2
Lecția 4
<HEAD>
<TITLE>Legaturi catre site-uri particulare</TITLE>
</HEAD>
<BODY>
<CENTER>
Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia 
</CENTER>
 <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>
 
</BODY>
</HTML>
Salvează pagina cu numele ziare.html peste pagina existentă.
Legătura către o secţiune de pagină

Atunci când avem de-a face cu pagini mai lungi, putem împărţi aceste pagini în mai multe secţiuni
către care să adăugăm câte o legătură la începutul paginii pentru ca utilizatorii să ajungă mai repede
la secţiunea care îi interesează. Un bun exemplu pentru o astfel de pagină îl reprezintă paginile care
conţin întrebările frecvente (Frecvently Asked Questions).
Fiecare titlu al secţiunii trebuie definit ca ancoră:
<A NAME="#ancora1">Titlul primei sectiuni</A>
<A NAME="#ancora2">Titlul sectiunii a doua</A>
<A NAME="#ancora3">Titlul sectiunii a treia</A>
Legăturile către ancorele din cadrul aceleiaşi pagini HTML vor avea următoarea formă:
<A NAME="#ancora1">Legatura catre prima sectiune</A>
<A NAME="#ancora2">Legatura catre a doua sectiune</A>
<A NAME="#ancora3">Legatura catre a treia sectiune</A>
Legăturile către ancore din cadrul altei pagini HTML vor avea următoarea formă:
<A NAME="numelepaginii.html#ancora1">Legatura catre prima sectiune</A>
<A NAME="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A>
<A NAME="numelepaginii.html#ancora3">Legatura catre a treia sectiune</A>
Pentru a înţelege mai bine cum funcţionează legăturile către secţiunile paginilor, să scriem
împreună codul unei pagini cu mai multe secţiuni:
<HTML>
<HEAD>
<TITLE>Legatura catre o sectiune de pagina</TITLE>
</HEAD>
<BODY>
3
Lecția 4
 
<CENTER>&#206ntreb&#259ri frecvente</CENTER>
 
<A HREF="#intrebarea1">1. Ce pot g&#259si pe site-ul ecursuri.ro?</A> 
<A HREF="#intrebarea2">2. Ce este un curs online?</A> 
<A HREF="#intrebarea3">3. De ce s&#259 &#238nv&#259ţ
online?</A> 
<HR> 

<A NAME="#intrebarea1">1. Ce pot g&#259si pe site-ul ecursuri.ro?</A> 
Site-ul ecursuri.ro &#238şi propune s&#259 ofere vizitatorilor
s&#259i c&#226t mai multe resurse pentru a &#238nv&#259ţa online. &#206n aces
moment, pe site, sunt disponibile peste 20 de cursuri online, din diverse domenii, dar cu ajutorul
vostru sper&#259m ca num&#259rul acestora s&#259 creasc&#259. 
Pe l&#226ng&#259 cursurile online vei g&#259si, &#238n cadrul
site-ului nostru, mai mult de 1000 de referate şi peste 100 de jocuri online.
 
<A NAME="#intrebarea2">2. Ce este un curs online?</A> 
Un curs online presupune ca toate materialele necesare,
s&#259 fie disponibile pe internet. Aşadar, viitorii cursanţi vor avea la
dispoziţie toate resursele necesare pentru &#238nv&#259ţat, la fel ca şi
&#238n cazul unui curs tradiţional, singura deosebire fiind c&#259 totul se petrece online.
 
<A NAME="#intrebarea3">3. De ce s&#259 &#238nv&#259ţ online?</A>
 
Cursurile online prezint&#259, indiscutabil, foarte multe avantaje
faţ&#259 de alte tipuri de cursuri. &#206n primul r&#226nd cursurile online pot fi
consultate oric&#226nd, ele fiind disponibile non stop pe internet. Un lucru extrem de important
&#238n alegerea unui curs online este şi preţul sc&#259zut al
unui astfel de curs comparativ cu preţurile cursurilor tradiţionale. &#206n cazul
cursurilor prezente pe site-ul ecursuri.ro, acestea sunt 100% GRATUITE.
 
 
</BODY>
</HTML>
Salvează pagina cu numele intrebari.html în directorul Pagini.
Legătura către o adresa de e-mail

Dacă vrei ca utilizatorii paginii tale web să îţi poată scrie părerile lor despre site, de exemplu, atunci
trebuie ca în cadrul paginii să existe o legătură către o adresă de e-mail. Cum faci asta? Foarte
simplu. Forma generală a unei legături către o adresa de e-mail este următoarea:
<A HREF="mailto:adresa de e-mail">Trimite-mi un e-mail</A>
În codul HTML al paginii intrebari.html adaugă înainte de linia de cod ce conţine eticheta de
încheiere </BODY>, următoarea secvenţă de cod:
 
Pentru a afla r&#259spunsul la alte &#238ntreb&#259ri, trimite un mail la:
4
Lecția 4

<A HREF="mailto:contact@ecursuri.ro" TITLE="Dac&#259 vrei s&#259 pui o &#238ntrebare nu
ezita s&#259 o faci">P&#259rerea ta</A> 
Salvează pagina intrebari.html peste cea existenta.
Utilizarea unei imagini ca legătură

Pentru a folosi o imagine ca legătură, între tag-urile <A> şi </A>, va trebui scrisă adresa imaginii:
<A HREF=numepagina.html><IMG SRC="adresaimaginii"</A>
Să vedem un exemplu. Copiază imaginea de mai jos (click dreapta, Save Picture As) în directorul
Poze cu numele de intreb.jpg.
Acum să scriem codul unei pagini web care să folosească această imagine ca legătură către pagina
intrebari.html. Deschide editorul de texte si scrie codul următor:
<HTML>
<HEAD>
<TITLE>Folosirea unei imagini ca legatura</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Imagini ca leg&#259turi</H1>
 
<A HREF=intrebari.html><IMG SRC="../Poze/intreb.jpg"></A>
</CENTER>
</BODY>
</HTML>
Salvează pagina cu numele linkimg.html în directorul Pagini.
Cum pot schimba culorile legăturilor?

Fiecare legătură din cadrul unei pagini web are trei culori:
• o culoare pentru legăturile nevizitate (nu a fost efectuat nici un click pe ele)
• o culoare pentru legăturile vizitate (s-a efectuat cel putin un click pe ele)
• o culoare pentru legăturile active (atunci când cursorul mouse-ului se află deasupra lor)
Pentru fiecare culoare, din cele trei de mai sus, există câte un atribut al tag-ului </BODY> cu
ajutorul căruia putem schimba culoarea implicita:
• LINK pentru legaturile nevizitate
• VLINK pentru legaturile vizitate
• ALINK pentru legaturile active
Fiecărui atribut i se va atribui un nume de culoare sau codul unei culori. Spre exemplu dacă vrei ca
în cadrul paginii tale web, legăturile să fie de culoare roşie atunci când nu au fost vizitate, de
5
Lecția 4
culoare neagră cele vizitate şi de culoare portocalie atunci când se trece cu mouse-ul pe deasupra
lor, trebuie sa foloseşti următoarea linie de cod:
<BODY LINK=”#FF0000” VLINK=”#000000” ALINK=”FF9600”>
Pentru a folosi culorile preferate pentru legăturile paginilor tale nu trebuie decât să înlocuieşti în
linia de mai sus, codurile, cu cele ale culorilor dorite.

Document PDF 4

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Document PDF 4

Încărcat de

Drepturi de autor:

Formate disponibile

Sursa: http://www.ecursuri.

Legătura către o altă pagină

Legătura către un site

Legătura către o secţiune de pagină

Legătura către o adresa de e-mail

Utilizarea unei imagini ca legătură

Cum pot schimba culorile legăturilor?

S-ar putea să vă placă și