Professional Documents
Culture Documents
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.
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>
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 mouseului 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> <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> </CENTER> </BODY> </HTML> Salveaza pagina cu numele ziare.html peste pagina existenta. Iata cum ar trebui sa arate pagina finala ziare.html: click aici
<A ID="ancora1">Titlul primei sectiuni</A> <A ID="ancora2">Titlul sectiunii a doua</A> <A ID="ancora3">Titlul sectiunii a treia</A> Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma: <A HREF="#ancora1">Legatura catre prima sectiune</A> <A HREF="#ancora2">Legatura catre a doua sectiune</A> <A HREF="#ancora3">Legatura catre a treia sectiune</A> Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma: <A HREF="numelepaginii.html#ancora1">Legatura catre prima sectiune</A> <A HREF="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A> <A HREF="numelepaginii.html#ancora3">Legatura catre a treia sectiune</A> 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>Intrebari frecvente</B></CENTER> <BR><BR><BR><BR><BR><BR> <A HREF="#intrebarea1">1. Ce pot gasi 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 sa invat online?</A><BR><BR><BR><BR> <HR> <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 ID="intrebarea1">1. Ce pot gasi pe site-ul eCursuri.ro?</A></FONT><BR> Site-ul eCursuri.ro isi propune sa ofere vizitatorilor sai cat mai multe resurse pentru a invata online. In acest sens, oferim membrilor site-ului acces GRATUIT la cursuri online interactive, tutoriale in care poti invata sa faci aproape orice, teste online prin care iti poti verifica cunostintele din diverse domenii, jocuri educative si referate pentru scoala. <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 ID="intrebarea2">2. Ce este un curs online?</A></FONT><BR> Un curs online presupune ca toate materialele necesare, sa fie disponibile pe internet. Asadar, viitorii cursanti vor avea la dispozitie toate resursele necesare pentru invatat, la fel ca si in cazul unui curs traditional, singura deosebire fiind ca 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 ID="intrebarea3">3. De ce sa invat online?</A></FONT><BR> Cursurile online prezinta, indiscutabil, foarte multe avantaje fata de alte tipuri de cursuri. In primul rand cursurile online pot fi consultate oricand, ele fiind disponibile non stop pe internet. Un lucru extrem de important in alegerea unui curs online este si pretul scazut al unui astfel de curs comparativ cu preturile cursurilor traditionale. In cazul cursurilor prezente pe
site-ul eCursuri.ro, acestea sunt 100% GRATUITE. Un alt avantaj al cursurilor online de pe eCursuri.ro este acela ca permite interactiunea intre membrii site-ului si/sau intre membri si autorii cursurilor, astfel fiind foarte usor sa se lamureasca anumite notiuni care nu au fost intelese foarte bine. <BR><BR><BR><BR><BR><BR><BR><BR><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
Acum sa scriem codul unei pagini web care sa foloseasca aceasta imagine ca legatura catre site-ul Ghid-Culinar.ro. Deschide editorul de texte si scrie codul urmator: <HTML> <HEAD <TITLE>Folosirea unei imagini ca legatura</TITLE> </HEAD> <BODY> <CENTER><H1>Imagini ca legaturi</H1> <BR><BR> <A HREF="http://www.ghid-culinar.ro/retete-culinare/dulciuri-diverse/bomboaneraffaello.html" TITLE="Invata sa faci bomboane Raffaello" BORDER="0"><IMG SRC="../Poze/bomboane.jpg"></A> </CENTER> </BODY> </HTML> Salveaza pagina cu numele linkimg.html in directorul Pagini. Pentru a vedea rezultatul click aici
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:
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 mouseul 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.