Creare link-uri

Curs Html

• Link-uri Externe
• Link-uri Interne
• Atributul target

Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la un document la altul sau la alt site.
Link-urile pot fi create cu tagul <a>.
Sintaxa:

<h4>Exemplu link</h4>
<p>Acesta este un simplu link.</p>
 <a href='/html' title='Curs HTML'>Curs HTML</a>

<style>
/*culoarea link-urilor */
a {
 color: #0000fe;
}

/*culoarea link-urilor cand mouse-ul e deasupra lor */
a:hover {
 color: #00d000;
}

/*culoarea link-urilor cand pagina respectiva a fost / este vizitata */
a:visited {
 color: #fe0000;
}
</style>

<style>
a { color: #f00000; }
a:visited { color: #00d000; }
a:hover { color: #0000e0; }
</style>

<h4>Exemplu link colorat</h4>
<p>Acesta este un link cu o culoare definita in CSS.</p>
 <a href='/html' title='Curs HTML'>Curs HTML</a>

<h4>Exemplu link cu imagine</h4>
<p>Clic pe imagine.</p>
<a href='/blog/' title='Spiritualitate'><img src='../imgs/smile_gift.png' alt='Smile' width='150' height='132'/></a>

Link-urile pot fi de doua feluri:

1. Link-uri externe - deschid alte pagini din site, sau alt site.
2. Link-uri interne - fac salt la o zona din aceeasi pagina.

Link-uri Externe

Aceste link-uri deschid documente externe; pot fi de doua feluri:

<!-- Link cu adresa URL absoluta /intreaga -->
<a href='//marplo.net/html/linkuri.html' title='Creare link-uri'>Creare link-uri</a>

<!-- Pagina index.php este in acelasi director -->
<a href='index.php' title='Free courses'>Home</a>

<!-- page.html se afla intr-un director anterior celui in care e pagina curenta -->
<a href='../page.html' title='Free courses'>Text</a>

<!-- page.html e intr-un subirector din cel in care e pagina curenta -->
<a href='folder/page.html' title='Free courses'>Text</a>

Link-uri Interne

Acestea fac salt la zone din aceeasi pagina (ca un 'scroll' direct). Se folosesc cand pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
- Pentru creare de link-uri interne se urmeaza acesti pasi:

1. Se scrie urmatorul cod in locatia unde se va face saltul si se afla in aceeasi pagina cu link-ul:

   <a id='indice'></a>

   - atributul 'id' indica tinta pentru link, e un fel de semn care indica locatia.
   - 'indice' poate fi orice cuvant, trebuie sa fie unic pentru fiecare link.

2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul), se scrie urmatorul cod:
   <a href='#indice'>Text link</a>
   - aici 'indice' este acelasi text scris la pasul 1.

<h4>Exemplu link intern</h4>

<a href='#next1'>Urmatoara sectiune</a>

<p style='height:990px;'>Mute paragrafe si continut...<br>
...</p>

<a id='next1'> </a>
<p>Aici e umatoarea sectiune.</p>
<p>Toate-s bune si frumoase cand le vezi asa cum sunt cu adevarat.</p><br>

Pentru link-ul intern se poate folosi ca indice in 'href' ID-ul oricarui element din pagina ( href='#id_div' ).

Atributul target

Tag-ul <a> poate avea si un atribut target, care specifica unde va fi deschisa pagina.
Atributul 'target' poate avea 4 valori:

• target='_top' - incarca pagina in toata fereastra browser-ului.
• target='_blank' - incarca pagina intr-o fereastra noua, ramane astfel si fereastra cu link-ul.
• target='_self' - pagina se va incarca in aceeasi fereastra (sau frame daca e intr-un <iframe>).
• target='_parent' - pagina se va incarca in fereastra parinte, daca e intr-un <iframe>.

<h4>Exemplu link cu target</h4>
<p>Urmatorul link are target='_blank', va deschide pagina intr-un tab nou.</p>
 <a href='//gamv.eu/' target='_blank' title='Flash Games'>Flash Games</a>