Lectia 6- Crearea legaturilor in HTML

Legatura catre o alta pagina

Pentru a folosi legaturi in paginile web pe care le vom face, vom folosi perechea de taguri <a> si </a>. Numele acestor taguri vine de la cuvantul anchor care tradus in romana inseamna ancora. Tagul <a> va trebui folosit impreuna cu atributul HREF . Linia de cod pentru inserarea unei legaturi in cadrul paginii web va avea 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 acum cum poti adauga o legatura dintr-o pagina web din folderul Pagini catre pagina imagini.html din acelasi folder. Deschide Notepad si scrie urmatorul cod HTML:

<html>

<head><title>Legaturi</title></head>

<body>

<center><b>Legatura catre o alta pagina web</b></center>

<br><br>

<a href=euro3.html>Imagine invat HTML</a>

<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
 
Legatura catre un site
Acum vei invata cum poti folosi o legatura catre un site, in acest caz in loc de numele paginii.html vom pune adresa (link-ul) siteu-lui catre care dorim legatura. Deci vom avea urmatoarea linie de cod.
<a href=”http://www.marinelpadurice.ro”>Legatura catre MarinelPadurice.ro</a>
In cazul liniei de mai sus, avem o legatura catre site-ul www.marinelpadurice.ro pe textul Legatura catre MarinelPadurice.ro
 
Acum vom face o pagina web care va contine legaturi catre siteu-rile unor ziare din Romania. Scrie in Notepad urmatorul cod:
 

<HTML>

<HEAD>

<TITLE>Legaturi catre site-uri particulare</TITLE>

</HEAD>

<BODY>

<CENTER>

<B>Legaturi catre site-urile unor ziare din Romania</B>

<BR><A HREF=”http://www.evz.ro”>Evenimentul Zilei</A>

<BR><A HREF=”http://www.jurnalul.ro”>Jurnalul National</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>

</CENTER>

</BODY>

</HTML>

Salveaza pagina cu numele de ziare.html in folderul 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 paginilor prezentate ca exemple, se deschide o pagina html in aceeasi fereastra a browseru-lui in locul paginii ce contine legatura. Pentru a se deschide o noua fereastra atunci cand dai click pe legaura, va trebui sa folosim 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>Legaturi catre site-urile unor ziare din Romania</B>

<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 National”>Jurnalul National</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>

</CENTER>

</BODY>

</HTML>

Salveaza pagina cu numele ziare.html peste pagina existenta.

Iata cum ar trebui sa arate pagina finala ziare.html click aici

Utilizarea unei imagini ca legatura

Pentru a folosi o imagine ca legatura, intre tagurile <a> si </a> va trebui scrisa adresa imaginii

<a href=”numepagina.html><img src=”adresa imaginii”></a>

Exercitiu:

  1. Click dreapta pe imagine si selectati save image as
  2. Salvati imaginea in folderul Poze cu numele imagine.jpg

Acum vom deschide iar notepad si vom crea o pagina web care sa contina aceasta imagine cu legatura catre site-ul MarinelPadurice.ro.

<html>

<head>

<title>Imagine cu legatura</title>

</head>

<body>

<center>

<b>Voi invata sa creez o pagina web cu imagini</b>

</center>

<br><br>

<a href=”http://www.marinelpadurice.ro”><img src=”../Poze/imagine.jpg”></a>

</body>

</html>

Salveaza pagina in folderul Pagini cu numele linkimg.html. Rezultatul ar trebui sa fie: 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=”FF6600″>

    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.

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *