Page 1

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ţie target - în ce fereastră se va deschide fişierul destinaţie title - 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 <a href="http://www.google.ro">Cautare Google</a>

Afişare Cautare Google

Exemplu: link către pagina “http://librarialibertas.ro/carti/11177/atlasgeografic-al-romaniei " încarcată într-o nouă fereastră: HTML

Afişare

<a href=" http://librarialibertas.ro/carti/11177/atlasgeografic-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:balonasul2000@yahoo.com">Trimite e-mail</a>

Trimite e-mail

<a href='mailto: balonasul2000@yahoo.com?subject="curs HTML"'>Trimite e-mail</a>

Trimite e-mail

Culoarea linkurilor Poate 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.


Curs html online - http://videotutoriale35.blogspot.ro/  

Curs html online , web design php

Read more
Read more
Similar to
Popular now
Just for you