Embed Size (px)
DESCRIPTION
Curs html online , web design php
Citation preview
curs webdesign
Legături
Legături
Legătura (link-ul) este o etichetă foarte importantă în HTML deoarece conferă utilizatorului posibilitatea navigării de la o pagină la alta. De obicei link-ul este subliniat iar atunci când suntem deasupra lui cursorul îşi schimbă forma.
Link-ul este definit cu etichetele <a> şi </a> şi are atributele:href - adresa fişierului destinaţietarget - în ce fereastră se va deschide fişierul destinaţietitle - mică descriere asociată legăturii afişată în momentul în care mouse-ul se află deasupra legăturii.
<a href="adresa-fisier" target="_blank" title="titlu">
Adresa fişierului destinaţie poate fi exprimată astfel:nume fişier, daca se află în acelaşi folder cu pagina curentă
<a href="fisier.html">
folder/nume fişier,dacă se afla în alt folder
<a href="folder/fisier.html">
adresa URL, fiind adresa completă a paginii
<a href="http://www.w3schools.com">
Atributul target poate lua valorile:_blank pagina va fi încărcată într-o nouă fereastră_parent pagina va fi încărcată în fereastra părinte_top pagina va fi încărcată în fereastra top a cadrului_self pagina va fi încărcată în aceeaşi fereastră
Exemplu: link către pagina www.google.ro:
HTML Afişare<a href="http://www.google.ro">Cautare Google</a> Cautare Google
Exemplu: link către pagina “http://librarialibertas.ro/carti/11177/atlas-geografic-al-romaniei " încarcată într-o nouă fereastră:
HTML Afişare<a href=" http://librarialibertas.ro/carti/11177/atlas-geografic-al-romaniei " target="_blank">Atlasul Romaniei</a>
Atlasul Romaniei
curs webdesign
Putem insera un link către o adresă de e-mail putând asocia şi un subiect prestabilit.
HTML Afisare<a href="mailto:[email protected]">Trimite e-mail</a> Trimite
e-ma il <a href='mailto: [email protected]?subject="curs HTML"'>Trimite e-mail</a>
Trimite e-mail
Culoarea linkurilorPoate fi modificată introducând în eticheta body următoarele atribute:LINK legatură nevizitată (default albatru)VLINK legatură vizitată (default mov)ALINK legatură activă (default roşu)
Exemplu:
<html><head><title>Legaturi</title></head><body link="green" vlink="black" alink="yellow"><a href="pag.html">Link catre pag</a></body></html>
Ancore
Se pot adăuga puncte de reper (ancore) pentru o deplasare mai uşoară în cazul unor pagini HTML lungi sau către un loc anume aflat într-o altă pagină.Ancora se defineşte tot între etichetele <a> şi </a> dar cu atributul name. Pentru a face trimitere către ancoră se introduce un link cu atributul href având ca valoare denumirea ancorei.
Exemplu:
Ancora <a name="nume">Ancora</a>Link catre ancora aflata in aceeasi pagina
<a href="#nume">Inapoi la ancora</a>
Link catre ancora aflata in alta pagina
<a href="pagina.html#nume">Inapoi la ancora din pagina.html</a>
Link din imagine
Putem folosi o imagine pentru un link. Primul exemplu este cu border iar al doilea fără border.
curs webdesign
HTML Afisare<a href=" http://www.florarie.ro/"><img src="images/poza.jpg" width="100" height="75" alt="poza"></a>
<a href=" http://www.florarie.ro/"><img src="images/poza.jpg" width="100" height="75" alt="poza" border="0"></a>
Exemplu : Crearea unui meniu de legături în partea de sus a paginii:
<html><body> <a href=”pag.html”>Pagina mea</a>|<a href=”masini.html”>Masini</a>|<a href=”http://www.google.ro/”>Cautare pe Google</a>…</body></html>
TEMĂ
1. Creaţi o pagină HTML cu un meniu de link-uri în partea de sus sub ele urmând conţinutul paginii. În pagină trebuie să existe minim două liste şi o imagine, creată cu tag-ul
<img src="nume" width="nr" height="nr" alt="poza">
2. Creaţi pe o altă pagină mai multe legături interne şi externe, cele interne fiind pentru pagina creată la exerciţiul 1 şi alte pagini create în lecţiile trecute şi cele externe către site-uri despre geografie. Să se seteze culorile legăturilor cu maro, legăturile vizitate cu negru şi cele active cu roşu.
3. Creaţi o pagină web în care să existe un meniu de legături compus numai din imagini, ultima imagine fiind legătura către e-mail.
