HTML & CSS pentru începători.

HTML & CSS pentru începători (Partea 11): Definirea hyperlink-urilor (1)

Toate videoclipurile tutorialului HTML & CSS pentru începători

Definiția linkurilor în HTML se realizează prin elementul a. Înainte să vă arăt cum să le folosiți, câteva sfaturi generale cu privire la hyperlink-uri. Gândiți-vă la texte de referință bune. De obicei, o simplă înapoi nu ajută pe nimeni. (Deoarece atunci când un vizitator vine de pe o pagină externă, de obicei nu știe ce înseamnă înapoi). Încercați să alegeți texte de referință descriptive.

Hyperlink-urile urmează întotdeauna același principiu în HTML.

<a href="videos.html">Videoclipuri actuale</a>

Elementului a i se atribuie atributul href. Acest href așteaptă ca valoare destinația linkului. În exemplul anterior, s-a făcut referire către fișierul videos.html. Acesta se află în același director ca fișierul HTML în care a fost definit hyperlink-ul.

HTML & CSS pentru începători (Partea 11): Definirea hyperlink-urilor (1)

În rest, se aplică aceleași reguli la definirea hyperlink-urilor, precum cele prezentate în contextul includerii de imagini.

În plus, puteți defini nu numai referințe interne ale proiectului. La fel de bine, link-urile se pot seta și către fișiere sau domenii externe.

<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>



Textul dintre tagurile <a> și </a> este în cele din urmă textul de referință. În mod implicit, acest text este subliniat de browsere.

HTML & CSS pentru începători (Partea 11): Definirea hipertextelor (1)

Specificarea ferestrei țintă

Când faceți clic pe un hyperlink, destinația linkului este deschisă în fereastra curentă a browserului. De regulă, acest lucru este complet în regulă. Cu toate acestea, se poate întâmpla ca, de exemplu, să setați un link către un domeniu extern. Dacă un vizitator dă clic pe acest link, destinația linkului ar trebui să se deschidă într-o nouă fereastră de browser sau tab. Avantajul acestei variante: Site-ul dvs. rămâne deschis în fundal.

HTML & CSS pentru începători (Partea 11): Definirea hyperlink-urilor (1)

Cu toate acestea, nu ar trebui să deschideți fiecare hyperlink al paginii într-o fereastră externă, deoarece vizitatorii s-ar putea enerva repede.

Prin atributul target al elementului a, se poate specifica fereastra țintă în care urmează să fie deschisă destinația linkului respectiv. HTML oferă în primă instanță trei valori standard pentru target.

_blank – Destinația linkului este afișată într-o fereastră nouă a browserului.

_self – Deschide destinația linkului în fereastra curentă a browserului.

_parent – Aici se poate ieși din frame. (Vă rugăm să rețineți că frame-urile nu sunt acceptate în HTML5. În orice caz, această tehnică nu ar trebui să mai fie utilizată astăzi, deoarece există alternative mai bune pentru aceasta. Cine dorește să se aprofundeze mai mult în frame-uri, poate găsi informații pe pagina http://de.wikipedia.org/wiki/Frame_(HTML)).

_top – Acesta este folosit, de asemenea, în contextul frame-urilor. Puteți așa deschidea destinația linkului în afara seturilor de frame-uri.

Uite un exemplu pentru cum se utilizează atributul target:

<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>



În acest caz, destinația linkului http://www.psd-tutorials.de ar fi deschisă într-o fereastră/tab nouă. Același efect l-ați obține și utilizând un nume fictiv precum halligalli în locul numelor rezervate _blank. Cu toate acestea, atunci când folosiți target, recomand să utilizați unul dintre numele rezervate.

Stabilirea bazei de referință

Puteți defini în zona head a fișierului HTML o așa-numită bază de referință. Acest tip de bază de referință face ca toate destinațiile linkurilor să fie afișate într-o anumită fereastră a browserului. Þiți că este din nou în principal interesant în legătură cu frame-urile.

În practică, însă, totul devine util și atunci când doriți, de exemplu, să afișați întotdeauna toate linkurile utilizând _blank într-o nouă fereastră de browser. Imaginați-vă o listă de linkuri. Dacă doriți ca destinațiile lor să se deschidă întotdeauna într-o fereastră nouă, arată așa:

<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a>
<br />
<a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a>
<br />
<a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>



Așa că ar trebui să atribuiți un atribut target fiecărei definiții a.

Nu este prea eficient, așa cum vedeți. Va deveni și mai puțin eficient atunci când în câteva luni decideți că nu doriți să mai deschideți destinațiile linkurilor într-o fereastră nouă. Apoi va trebui să ajustați toate atributul target al tuturor linkurilor. Acest lucru poate fi prevenit printr-o bază de destinație menționată. Aceasta se definește folosind elementul base în interiorul capului. Elementului base i se atribuie atributul target cu valoarea dorită. Iată un exemplu despre cum ar putea arăta:

<!DOCTYPE html>
 <html lang="de">
 <head>
 <title>PSD-Tutorials.de</title>
 <meta charset="UTF-8" />
 <base target="_blank">
 </head>
 <body>
 <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a>
 <br />
 <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a>
 <br />
 <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a>
 </body>
 </html>



Aceasta economisește o mulțime de muncă de tastare.

Definirea ancoră

Cum puteți seta linkuri către alte fișiere, ați văzut deja. De asemenea, puteți defini și sogenitele ancore într-un fișier HTML. Ulterior, puteți seta referințe către aceste ancore. Este practic, de exemplu, în cazul paginilor extinse. Astfel, la începutul documentului puteți defini o tabelă de conținut, prin care vizitatorii pot sări la secțiunile relevante pentru ei, fără a trebui să deruleze fereastra browser-ului.

HTML & CSS pentru începători (Partea 11): Definirea hyperlinks-urilor (1)

Ancorele sunt create cu elementul a. Cu toate acestea, definițiile de ancore nu primesc atributul href, ci sunt atribuite un atribut name.

<a name="seitenanfang">Cuprins</a>
<a name="kapitel1">Cuprins Capitolul 1</a>
<p>Aici urmează mult text.</p>
<a name="kapitel2">Cuprins Capitolul 2</a>
<p>Aici urmează mult text.</p>



Numele ancoră pot fi acordate liber. Totuși, vă recomand să le alegeți cât mai scurte posibil, să utilizați doar litere mici și să renunțați la caractere speciale.

Pentru a face referire la o ancoră, se definește un hyperlink normal, așa cum s-a arătat la începutul acestui tutorial.

<a href="#seitenanfang">La începutul paginii</a>



Valoarea atributului href primește numele ancoră. Important este însă că numelui ancorei i se adaugă simbolul #.

De asemenea, puteți seta referințe către ancoră și între fișiere. În exemplul următor, presupun că există un fișier news.htm, care se află în același director ca fișierul HTML principal. În interiorul lui news.htm a fost definită ancoră seitenanfang. Pentru a face referire la ea, se scrie un simbol hash după numele fișierului țintă (news.htm). După aceea, urmează numele ancorei.

<a href="news.htm#seitenanfang">La începutul paginii</a>



Deci, puteți seta referințe la ancoră în orice fișier dorit.