Inserarea Unei Legaturi Intr-O Pagina Web

Crearea legaturilor in HTML
Legatura catre o alta pagina

Pentru a folosi legaturi in paginile web pe care le vom face, trebuie sa
folosim 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>
Aplicatie
Sa presupunem ca in folderul Pagini exista deja create o pagina web cu
numele imagini.html, pagina care contine o imagine cu o floare.
Cream o alta pagina care va face legatura catre pagina imagini.html
<HTML>
<HEAD>
<TITLE>Legaturi</TITLE>
</HEAD>
<BODY>
<CENTER>Legatura catre o alta pagina 
 
<A HREF="imagini.html">Imagine floare</A>
</CENTER>
</BODY>
</HTML>
Salveaza pagina (File/Save As) cu numele de link.html in folderul

Pagini.
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.
Legatura catre un site
<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>
Legaturi catre site-urile unor ziare din Romania 
</CENTER>
 <A HREF="http://www.evz.ro">Evenimentul Zilei</A>
 <A HREF="http://www.jurnalul.ro">Jurnalul National</A>
 <A HREF="http://www.capital.ro">Capital</A>
 
</BODY>
</HTML>
Salvam pagina cu numele de ziare.html in directorul Pagini.
Asa cum am 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>
Legaturi catre site-urile unor ziare din Romania 
</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 National">Jurnalul National</A>
 <A HREF="http://www.capital.ro" TARGET="_blank"
TITLE="Ziarul Capital">Capital</A>
 
</BODY>
</HTML>
Salveaza pagina cu numele ziare.html peste pagina existenta.
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:
<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>
 
<CENTER>Anotimpurile</CENTER>
 
<A HREF="#ancora1">1. Primavara</A> 
<A HREF="#ancora2">2. Vara</A> 
<A HREF="#ancora3">3. Toamna </A> 
<A HREF="#ancora4">4. Iarna </A> 
 
<HR>
<A NAME="ancora1">1. Primavara</A> 
Primavara este unul din cele patru anotimpuri ale zonei temperate,
marcând tranzitia de la iarna spre vara. Din punct de vedere astronomic,
marcarea începutului primaverii este, de cele mai multe ori, legata de
echivalenta dintre durata temporala zilei si a noptii, timp al anului numit
echinoctiu în astronomie. Astfel, în emisfera nordica, echinoctiul de
primavara este datat astronomic în jur de 21 martie al fiecarui an, în timp
ce în emisfera sudica, acelasi echinoctiu este în jurul datei de 23
septembrie. Simultan cu existenta unui echinoctiu într-una din cele doua
emisfere ale Terrei, echinoctiul "opus" marcheaza cealalta emisfera.
 
<A NAME="ancora2">2.Vara</A>
 
In zonele cu clima temperata, vara este cel mai cald dintre cele patru
anotimpuri. Solstitiul ce are loc în timpul sau se numeste solstitiul de vara
si marcheaza momentul în care, în emisfera respectiva, ziua are cea mai
mare durata. Data de început si de final al verii este aproximativa, si
variaza de la o cultura la alta. În zonele polare aflate între pol si cercul
polar, în preajma solstitiului are loc fenomenul de „nopti albe”.
În cele mai multe tari, în aceasta perioada copiii sunt în vacanta. În unele
tari vacanta începe la mijlocul lunii mai, pe când în Anglia copiii încep
vacanta abia în mijlocul lui iulie. Vacanta de vara în Australia începe cu
câteva zile înaintea Craciunului si se termina în ultimele zile a lui ianuarie
sau chiar mijlocul lui februarie, depinzând de stat.
 
<A NAME="ancora3">3.Toamna</A>
 
Toamna este unul din cele patru anotimpuri ale climei temperate. Este
anotimpul care face legatura între vara si iarna. În emisfera nordica
toamna începe în jurul lunilor august sau septembrie, pe când în emisfera
sudica începutul toamnei este considerat în jurul lunii martie. În aceasta
perioada frunzele foioaselor încep sa cada.
Acestea se îngalbenesc, treptat capata o culoare rosiatica sau bruna, dupa
care cad. De aceea, în America de Nord toamna este numita si fall
însemnând cadere. Este anotimpul în care zilele devin din ce în ce mai
scurte si mai racoroase, nop?ile devin din ce în ce mai lungi si mai
friguroase iar în unele tari precipitatiile tind sa creasca
treptat. 
<A NAME="ancora4">4.Iarna</A>
 
Iarna este unul din cele patru anotimpuri ale zonei temperate. Vremea este
mai rece în perioada iernii, fiind anotimpul cu cele mai mici temperaturi,
zilele cele mai scurte si noptile cele mai lungi.
Iarna astronomica de pe planeta noastra dureaza de la solstitiul de iarna
pâna la echinoctiul de primavara, adica în emisfera nordica din 22
decembrie pâna în 21 martie, iar în emisfera sudica din 22 iunie pâna în
21 septembrie. În diferiti ani, aceste momente astronomice cad în
momente diferite adica în zilele specificate.
 
</BODY>
</HTML>
Salveaza pagina cu numele anotimpuri.html in directorul Pagini.
Observatie. Am pus mai multe ca textul sa treca pe mai multe

pagini si sa se abserve ca atunci cand dam clic pe o optiune cursorul se
pozitioneaza la capitolul corespunzator
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:
 
Pentru a afla r&#259spunsul la alte &#238ntreb&#259ri, trimite un mail
la:

<A HREF="mailto:contact@ecursuri.ro" TITLE="Daca vrei sa pui o
intrebare nu ezita sa o faci">P&#259rerea ta</A> 
Salveaza pagina intrebari.html peste cea existenta.

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 legauri</H1>
 
<A HREF="intrebari.html"><IMG SRC="../Poze/intreb.jpg"></A>
</CENTER>
</BODY>
</HTML>
Salveaza pagina cu numele linkimg.html in directorul Pagini.

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.

Inserarea Unei Legaturi Intr-O Pagina Web

Î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

Inserarea Unei Legaturi Intr-O Pagina Web

Încărcat de

Drepturi de autor:

Formate disponibile

Crearea legaturilor in HTML

Legatura catre o alta pagina

Salveaza pagina (File/Save As) cu numele de link.html in folderul

Legatura catre un site

<A HREF="adresa site-ului">Textul legaturii</A>

Salvam pagina cu numele de ziare.html in directorul Pagini.

Sa vedem un exemplu: sa schimbam codul paginii ziare.html astfel incat

Legatura catre o sectiune de pagina

Pentru a intelege mai bine cum functioneaza legaturile catre sectiunile

Observatie. Am pus mai multe<BR> ca textul sa treca pe mai multe

Legatura catre o adresa de e-mail

In codul HTML al paginii intrebari.html adauga inainte de linia de cod

Salveaza pagina intrebari.html peste cea existenta.

Salveaza pagina cu numele linkimg.html in directorul Pagini.

• o culoare pentru legaturile active (atunci cand cursorul mouse-ului se

Fiecarui atribut i se va atribui un nume de culoare sau codul unei culori.

Pentru a folosi culorile preferate pentru legaturile paginilor tale nu trebuie

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