Crearea Legăturilor În HTML

Crearea legturilor n HTML Navigarea n cadrul site-urilor este posibil cu ajutorul link-urilor (legturilor).
n aceast lecie vei nva cum s foloseti diferite tipuri de legturi n cadrul site-ului tu. Legtura ctre o alt pagin Pentru a folosi legturi n paginile web pe care le vei face, trebuie s foloseti perechea de tag-uri <A> i </A>. Numele acestor tag-uri vine de la cuvntul anchor care se traduce ancor. Tag-ul <A> va trebui folosit mpreun cu atributul HREF. Linia de cod pentru inserarea unei legturi n cadrul unei pagini web va avea urmtoarea form: <A HREF=numelepaginii.html>Textul legturii</A> Dac pagina respectiv se afl n acelai folder cu pagina pe care se afl legtura atunci nu sunt necesare ghilimelele. S vedem mpreun, cum poi aduga o legtur ntr-o pagin web din folderul Pagini ctre pagina imagini.html din acelai folder. Deschide editorul de texte (de exemplu: Notepad) i scrie urmtorul 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 (File/Save As) cu numele de link.html n folderul Pagini. Pagina link.html ar trebui s arate astfel: click aici. Dac pagina ctre care vrem s facem o legtur, nu se afl n acelai folder cu pagina noastr atunci nu mai putem folosi dect numele paginii HTML ca valoare a atributului HREF. S vedem cteva exemple de legturi ctre pagini din alte directoare sau subdirectoare. Fie urmtoarea structur:
Pentru a nelege ct mai bine cum funcioneaz legturile ctre diverse pagini web, este bine s faci i tu, pe calculatorul tu, o structur asemntoare cu cea de mai sus, iar apoi s faci cteva pagini HTML n diverse directoare sau subdirectoare i s ncerci s creezi legturi din fiecare pagin HTML ctre celelate. Iat cteva exemple: - pentru a aduga o legtur n cadrul unei pagini HTML din directorul Contabilitate ctre o pagin HTML din directorul Firma 1, vom folosi urmtoarea valoare a atributului HREF: <A HREF="Firma 1/numelepaginii.html">Text link</A> - pentru a aduga o legtur n cadrul unei pagini HTML din directorul Site ctre o pagin HTML din directorul Carti, vom folosi urmtoarea valoare a atributului HREF: <A HREF="Documente/Carti/numelepaginii.html">Text link</A> - pentru a aduga o legtur n cadrul unei pagini HTML din directorul Matematica ctre o pagin HTML din directorul Scoala, vom folosi urmtoarea valoare a atributului HREF: <A HREF="../numelepaginii.html">Text link</A> - pentru a aduga o legtur n cadrul unei pagini HTML din directorul Bilanturi ctre o pagin HTML din directorul Site, vom folosi urmtoarea valoare a atributului HREF: <A HREF="../../numelepaginii.html">Text link</A> - pentru a aduga o legtur n cadrul unei pagini HTML din directorul Servici ctre o pagin HTML din directorul Matematica, vom folosi urmtoarea valoare a atributului HREF: <A HREF="../../Scoala/Matematica/numelepaginii.html">Text link</A> - pentru a aduga o legtur n cadrul unei pagini HTML din directorul Firma 2 ctre o pagin HTML din directorul Firma 3, vom folosi urmtoarea valoare a atributului HREF: <A HREF="../Firma 3/numelepaginii.html">Text link</A> Legtura ctre un site Dup ce ai vzut cum se folosesc legturile ctre alte pagini html locale acum vom vedea mpreun cum putem aduga o legtur ctre un site particular. Trebuie s foloseti urmtoarea linie de cod: <A HREF="adresa site-ului">Textul legaturii</A> S facem o pagin web care s conin legturi ctre site-uri ale unor ziare din Romania. Scrie urmtorul 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. Pentru a vedea cum ar trebui s arate aceast pagin: click aici. Aa cum ai observat pn acum, atunci cnd dai click pe una dintre legturile din paginile prezentate ca exemple, se deschide o pagin HTML n aceeai fereastr a browser-ului, peste pagina ce conine legtura. Pentru a deschide o nou fereastr a browser-ului atunci cnd se d click pe o legtur trebuie folosit atributul TARGET cruia i se atribuie valoarea "_blank". S vedem un exemplu: s schimbm codul paginii ziare.html astfel nct site-ul fiecrui ziar s se deschid ntr-o nou fereastr, atunci cnd se va efectua un click pe legtura ctre acesta. Dac n plus vrei ca, atunci cnd utilizatorii paginii tale web vor trece cursorul mouse-ului deasupra legturilor, s apar o mic not explicativ, trebuie s foloseti atributul TITLE. Ca valoare a acestui atribut trebuie s scrii textul care vrei s apar atunci cnd se va trece cursorul mouse-ului deasupra legturii respective. Pentru a nelege mai bine iat cum va arta codul paginii ziare.html dup adugarea atributelor TARGET i TITLE pentru fiecare legtur: <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> Salveaz pagina cu numele ziare.html peste pagina existent.
Iat cum ar trebui s arate pagina final ziare.html: click aici. Legtura ctre o seciune de pagin Atunci cnd avem de-a face cu pagini mai lungi, putem mpri aceste pagini n mai multe seciuni ctre care s adugm cte o legtur la nceputul paginii pentru ca utilizatorii s ajung mai repede la seciunea care i intereseaz. Un bun exemplu pentru o astfel de pagin l reprezint paginile care conin ntrebrile frecvente (Frecvently Asked Questions). Pentru a vedea cum arat o astfel de pagin: click aici. Fiecare titlu al seciunii trebuie definit ca ancor: <A NAME="#ancora1">Titlul primei seciuni</A> <A NAME="#ancora2">Titlul seciunii a doua</A> <A NAME="#ancora3">Titlul seciunii a treia</A> Legturile ctre ancorele din cadrul aceleiai pagini HTML vor avea urmtoarea form: <A NAME="#ancora1">Legtura ctre prima seciune</A> <A NAME="#ancora2">Legtura ctre a doua seciune</A> <A NAME="#ancora3">Legtura ctre a treia seciune</A> Legturile ctre ancore din cadrul altei pagini HTML vor avea urmtoarea form: <A NAME="numelepaginii.html#ancora1">Legtura ctre prima seciune</A> <A NAME="numelepaginii.html#ancora2">Legtura ctre a doua seciune</A> <A NAME="numelepaginii.html#ancora3">Legtura ctre a treia seciune</A> Atenie! Pentru crearea corect a legturilor ctre alte pagini HTML, vezi seciunea Legtura ctre o alt pagin, din cadrul acestei lecii. Pentru a nelege mai bine cum funcioneaz legturile ctre seciunile paginilor, s scriem mpreun codul unei pagini cu mai multe seciuni: <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 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. Dac totul a mers bine pagina ar trebui s fie la fel cu aceasta: click aici. Legtura ctre o adres de e-mail Dac vrei ca utilizatorii paginii tale web s ii poat scrie prerile lor despre site, de exemplu, atunci trebuie ca n cadrul paginii s existe o legtur ctre o adres de email. Cum faci asta? Foarte simplu. Forma general a unei legturi ctre o adres de e-mail este urmtoarea: <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 conine eticheta de ncheiere </BODY>, urmtoarea secven 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> 
Salveaz pagina intrebari.html peste cea existent. Pentru a vedea rezultatele: click aici. Utilizarea unei imagini ca legtur Pentru a folosi o imagine ca legtur 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 legtur ctre pagina intrebari.html. Deschide editorul de texte i scrie codul urmtor: <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. Pentru a vedea rezultatul click aici. Cum pot schimba culorile legturilor? Fiecare legtur din cadrul unei pagini web are trei culori: o culoare pentru legturile nevizitate (nu a fost efectuat nici un click pe ele) o culoare pentru legturile vizitate (s-a efectuat cel puin un click pe ele) o culoare pentru legturile active (atunci cnd cursorul mouse-ului se afl deasupra lor) Pentru fiecare culoare, din cele trei de mai sus, exist cte un atribut al tag-ului </BODY> cu ajutorul cruia putem schimba culoarea implicit: LINK pentru legturile nevizitate VLINK pentru legturile vizitate ALINK pentru legturile active Fiecrui atribut i se va atribui un nume de culoare sau codul unei culori. Spre exemplu dac vrei ca n cadrul paginii tale web, legturile s fie de culoare roie atunci cnd nu au fost vizitate, de culoare neagr cele vizitate i de culoare portocalie atunci cnd se trece cu mouse-ul pe deasupra lor, trebuie s foloseti urmtoarea linie de cod: <BODY LINK=#FF0000 VLINK=#000000 ALINK=FF9600>
Pentru a folosi culorile preferate pentru legturile paginilor tale nu trebuie dect s nlocuieti n linia de mai sus, codurile, cu cele ale culorilor dorite.

Crearea Legăturilor În HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Crearea Legăturilor În HTML

Uploaded by

Copyright:

Available Formats

Crearea legturilor n HTML Navigarea n cadrul site-urilor este posibil cu ajutorul link-urilor (legturilor).

You might also like