Tutorial HTML

• Notiuni introductive
• Notiuni de baza
• Comentarii
• Formatare text
• Liste
• Legaturi
• Imagini
• Sunete
• Videoclipuri
• Tabele
• Cadre
• Formulare
• Harti de imagini
• HTML si CSS
• Verificarea paginii

Legături (link-uri)

Aşa cum am văzut în partea introductivă a acestui capitol, noţiunea de www este strâns legată de documentele de tip hipertext. Tot ceea ce am prezentat din limbajul HTML până în momentul de faţă, reprezintă doar partea descriptivă a acestuia, cu ajutorul căreia putem crea un conţinut static. Link-urile reprezintă mecanismul prin care:

• putem face ca un vizitator al paginii, prin executarea unui click, să poată accesa o altă pagină, la care dorim să-i creăm posibilitatea unui acces rapid şi, dacă acesta doreşte, să poată reveni în pagina iniţială prin apăsarea butonului Back al browser-ului de Internet;
• putem face ca un vizitator al paginii noastre să primească un anumit fişier, de orice tip, care se găseşte pe site-ul nostru (download);
• putem face ca un vizitator al paginii noastre să poată asculta un mesaj sonor sau chiar să poată viziona un film;
• putem ca, printr-un click, să putem vizualiza o pagină (inclusiv cea curentă) doar dintr-un anumit loc, fără a folosi barele de derulare;
• putem ca, prin accesarea unui click, cel care vizitează pagina să ne poată trimite un e-mail.

Pentru toate acestea, vom folosi tag-ul <a> şi </a>, numit şi Ancoră.

Ancore de legătură către alte pagini

Acestea permit ca un anumit element din document să conţină legătura către o altă pagină. Elementul care face legătura este de obicei un text sau o imagine. De regulă, elementul legat îşi schimbă aspectul faţă de cel clasic: textul va fi subliniat şi colorat altfel, iar imaginea va avea un chenar colorat. În momentul în care ducem cursorul deasupra elementului legat, acesta capătă forma unei mâini, indicându-ne astfel că este vorba de un link pe care îl putem utiliza. Printr-un simplu click, accesăm pagina către care este făcută legătura. Acest tip de legătură se realizează practic folosind atributul<href>, ca în exemplul de mai jos (a se remarca modul în care, elementul legat, este inclus între tag-urile <a href=...> şi </a>

Tagul <a> şi </a> are următoarele 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şata în momentul în care mouse-ul se află deasupra legăturii

Atributul href

Exemplu

Să vedem ce reprezintă fiecare element folosit:

• Tagul <a> reprezintă ancora
• Atributul<href> reprezintă referinţa hipertext pentru această ancoră, care este fişierul pagina.html. Atunci când o ancoră face o referinţă hipertext o numim legătură
• Pagina mea Web reprezintă textul care apare pe pagina Web. Acest text este evidenţiat prin sublinierea şi colorarea în albastru, pentru a indica faptul că este "hypertext" (printr-un simplu click, accesăm pagina spre care este făcută legătura)
• Tagul </a> reprezintă ancora închisă

Atributul target

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
• "_self" pagina va fi încărcată în aceeaşi fereastră
• "_top" pagina va fi încărcată în fereastra top a cadrului

Atributul title

Exemplu

Ancore

Ancora este punctul de reper pentru o deplasare mai uşoară în cazul unor pagini HTML lungi sau către un loc anume aflat într-o altă pagiă. Ancora se defineşte tot intre etichetele <a> şi </a> dar cu atributul name . Pentru a face trimitere către ancoră se introduce un link cu atributul href avand ca valoare denumirea ancorei.

Exemplu

Ancoră de legătură pentru trimiterea unui e-mail

Acestea permit ca, atunci când o persoană ne vizitează site-ul, dacă doreşte, să ne poată trimită un e-mail făcând un simplu click pe legătura respectivă. Totuşi, pentru ca acest lucru să fie funcţional, cel care vizitează site-ul trebuie să aibă configurat pe calculatorul său un client de e-mail (cel mai frecvent este Outlook Express). Iată un exemplu pentru o astfel de ancoră:

Exemplu

Observaţie

Tag-ul <address> ...</address> nu face altceva decât să afişeze textul din cadrul său italic După cum se observă, pentru trimiterea unui e-mail, după atributul href trebuie specificat mailto: urmat de adresa de e-mail a destinatarului.

Ancore de legătură către fişiere

Pentru a realiza legătura către un fişier, la atributul href, trebuind specificat adresa fişierului respectiv (dacă este în acelaşi director cu pagina din care facem legătura, e suficient să-i scriem numele şi extensia).

De exemplu în cazul în care fişierul pentru download este local: Pentru download arhiva executa un click

În cazul în care fişierul pentru download se află la altă adresă: Pentru a descarca subiectele de bacalaureat la disciplina informatica, dă un click

Legăturile către fişiere de tip sunet sau film se fac absolut în aceeaşi manieră. În funcţie de extensia lor (.wav, .mid, .mp3, .avi) în momentul executării unui click asupra obiectului care face legătura către ele, acestea vor fi deschise automat către browser cu programul corespunzător.

Culoarea linkuri-lor

Poate fi modificată introducand în eticheta body următoarele atribute:

• link legatura nevizitată(default albatru)
• vlink legatura vizitată (default rosu)
• alink legatura activă (nu prea se foloseste - default portocaliu)

Exemplu

Utilizarea unei imagini ca legatură

Pentru a se adauga o imagine ca legatură, se va folosi codul:

Exemplu

Rezultatul este: clik aici