Dark-Knight.MyForum.ro

Crystydica · Administrator Data inscrierii: 20/Mai/2008 Mesaje: 200

Crearea legaturilor in HTML

Navigarea in cadrul site-urilor este posibila cu susținerea link-urilor (legaturilor). In aceasta lectie vei invata cum sa folosesti distincte soiuri 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 necesită întrebuințat 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&#259tur&#259 c&#259tre o alt&#259 pagin&#259 
 
<A HREF=imagini.html>Imagine bebe</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:

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

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

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 numeroase sectiuni catre care sa adaugam cate o legatura la inceputul paginii pentru ca utilizatorii sa ajunga mai rapid la sectiunea care ii intereseaza. Un bun exemplu pentru o astfel de pagina il reprezinta paginile care contin intrebarile frecvente (Frecvently Asked Questions). Pentru a vedea cum arata o astfel de pagina: click aici.

Fiecare titlu al sectiunii trebuie definit ca ancora:
<A NAME="#ancora1">Titlul primei sectiuni</A>
<A NAME="#ancora2">Titlul sectiunii a doua</A>
<A NAME="#ancora3">Titlul sectiunii a treia</A>

Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma:
<A NAME="#ancora1">Legatura catre întâia sectiune</A>
<A NAME="#ancora2">Legatura catre a doua sectiune</A>
<A NAME="#ancora3">Legatura catre a treia sectiune</A>

Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma:
<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>

Atentie! Pentru crearea corecta a legaturilor catre alte pagini HTML, vezi sectiunea Legatura catre o alta pagina, din cadrul acestei lectii.

Pentru a intelege mai bine cum functioneaza legaturile catre sectiunile paginilor, sa scriem impreuna codul unei pagini cu mai multe sectiuni:
<HTML>
<HEAD>
<TITLE>Legatura catre o sectiune de pagina</TITLE>
</HEAD>
<BODY>
 
<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 recomandă s&#259 pune la dispoziție 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, destul de multe avantaje faţ&#259 de alte modele 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>

Salveaza pagina cu numele intrebari.html in directorul Pagini.

Daca totul a mers bine pagina ar trebui sa fie la fel cu aceasta: click aici.
Legatura catre o adresa de e-mail
Daca vrei ca utilizatorii paginii tale web sa iti poata scrie parerile lor despre site, de exemplu, atunci trebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail. Cum faci asta? Teribil de simplu. Forma generala a unei legaturi catre o adresa de e-mail este urmatoarea:
<A HREF="mailto:adresa de e-mail">Trimite-mi un e-mail</A>

In codul HTML al paginii intrebari.html adauga inainte de linia de cod ce contine eticheta de incheiere </BODY>, urmatoarea secventa de cod:
 
Pentru a afla r&#259spunsul la alte &#238ntreb&#259ri, trimite un mail la:

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

Salveaza pagina intrebari.html peste cea existenta. Pentru a vedea rezultatele: click aici.
Utilizarea unei imagini ca legatura
Pentru a folosi o poză ca legatura intre tag-urile <A> si </A>, va trebui scrisa adresa imaginii:
<A HREF=numepagina.html><IMG SRC="adresaimaginii"</A>

Sa vedem un exemplu. Copiaza imaginea de mai jos (click dreapta, Save Picture As) in directorul Poze cu numele de intreb.jpg.
Acum sa scriem codul unei pagini web care sa foloseasca aceasta fotografie ca legatura catre pagina intrebari.html. Deschide editorul de texte si scrie codul urmator:
<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>

Salveaza pagina cu numele linkimg.html in directorul Pagini.

Pentru a vedea rezultatul click aici.
Cum pot altera culorile legaturilor?
Fiecare legatura din cadrul unei pagini web are trei culori:
• o culoare pentru legaturile nevizitate (nu a fost efectuat nici un click pe ele)
• o culoare pentru legaturile vizitate (s-a efectuat cel putin un click pe ele)
• o culoare pentru legaturile active (atunci cand cursorul mouse-ului se afla deasupra lor)

Pentru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului </BODY> cu ajutorul caruia putem schimba culoarea implicita:
• LINK pentru legaturile nevizitate
• VLINK pentru legaturile vizitate
• ALINK pentru legaturile active

Fiecarui atribut i se va atribui un nume de colorație sau codul unei culori. Spre exemplu daca vrei ca in cadrul paginii tale web, legaturile sa fie de colorit rosie atunci cand nu au fost vizitate, de tentă neagra cele vizitate si de culoare portocalie atunci cand se trece cu mouse-ul pe deasupra lor, trebuie sa folosesti urmatoarea linie de cod:
<BODY LINK=”#FF0000” VLINK=”#000000” ALINK=”FF9600”>

Pentru a folosi culorile preferate pentru legaturile paginilor tale nu trebuie decat sa inlocuiesti in linia de mai sus, codurile, cu cele ale culorilor dorite