Crearea legaturilor in HTML |
|
|
|
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ătură către o altă pagină </B>
<BR><BR>
<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>
<B>Legături către site-urile unor ziare din România </B>
</CENTER>
<BR><A HREF="http://www.evz.ro">Evenimentul Zilei</A>
<BR><A HREF="http://www.jurnalul.ro">Jurnalul Naţ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>
<BR>
</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ături către site-urile unor ziare din România </b>
</CENTER>
<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ţional">Jurnalul Naţ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>
<BR>
</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). 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 prima 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>
<BR><BR><BR><BR><BR><BR>
<CENTER><B>Întrebări
frecvente</B></CENTER>
<BR><BR><BR><BR><BR><BR>
<A HREF="#intrebarea1">1.
Ce pot găsi pe site-ul ecursuri.ro?</A><BR><BR><BR>
<A HREF="#intrebarea2">2.
Ce este un curs online?</A><BR><BR><BR>
<A HREF="#intrebarea3">3.
De ce să învăţ online?</A><BR><BR><BR><BR>
<HR><BR><BR><BR><BR><BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times
New Roman">
<A NAME="#intrebarea1">1.
Ce pot găsi pe site-ul ecursuri.ro?</A></FONT><BR> <BR>
Site-ul
ecursuri.ro îşi propune să ofere
vizitatorilor săi cât mai multe resurse pentru
a învăţa online. În aces
moment, pe site, sunt disponibile peste 20 de cursuri online,
din diverse domenii, dar cu ajutorul vostru sperăm
ca numărul acestora să crească.<BR>
Pe lângă cursurile online vei
găsi, în cadrul
site-ului nostru, mai mult de 1000 de referate şi peste 100 de jocuri
online.
<BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR> <BR><BR> <BR><BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial,
Times New Roman">
<A NAME="#intrebarea2">2.
Ce este un curs online?</A></FONT><BR><BR>
Un
curs online presupune ca toate materialele necesare,
să fie disponibile pe internet. Aşadar, viitorii cursanţi
vor avea la dispoziţie toate resursele necesare pentru învăţat,
la fel ca şi în cazul unui curs tradiţional, singura
deosebire fiind că totul se petrece online.
<BR><BR><BR><BR><BR> <BR><BR><BR> <BR><BR><BR><BR><BR> <BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial,
Times New Roman">
<A NAME="#intrebarea3">3.
De ce să învăţ online?</A> </FONT><BR> <BR>
Cursurile
online prezintă, indiscutabil, foarte multe avantaje
faţă de alte tipuri de cursuri. În
primul rând cursurile online pot fi
consultate oricând, ele fiind disponibile non stop pe internet. Un lucru
extrem de important în alegerea unui curs online este şi preţul
scăzut al
unui astfel de curs comparativ cu preţurile cursurilor tradiţionale. În
cazul cursurilor prezente pe site-ul ecursuri.ro, acestea sunt 100% GRATUITE.
<BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR>
<BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR>
</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? Foarte 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:
|
<BR><BR><BR><FONT
FACE="Arial" COLOR="#FF9900">
Pentru a afla răspunsul la alte întrebări, trimite un
mail la:
</FONT>
<A HREF="mailto:contact@ecursuri.ro" TITLE="Dacă
vrei să pui o întrebare nu ezita să o faci">Părerea
ta</A><BR>
|
Salveaza pagina intrebari.html peste cea existenta. Pentru a vedea rezultatele: click aici.
|
Utilizarea unei imagini ca legatura |
Pentru a folosi o imagine 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 imagine 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ături</H1>
<BR><BR>
<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 schimba 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 culoare sau codul unei culori. Spre exemplu daca vrei ca in cadrul paginii tale web, legaturile sa fie de culoare rosie atunci cand nu au fost vizitate, de culoare 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.
|
