Curs Html


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:

<a href='url' title='Titlu link'>Text link</a>
- href este atributul in care se adauga adresa link-ului.
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu (https://marplo.net/ ).
- Titlu link este un text ascuns care apare cand este pozitionat mouse-ul deasupra link-ului.
- Text link este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul.

Exemplu:
<h4>Exemplu link</h4>
<p>Acesta este un simplu link.</p>
 <a href='/html' title='Curs HTML'>Curs HTML</a>
• Culoarea link-urilor din pagina poate fi schimbata cu proprietatea CSS color.
In css:
<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>
- Exemplu:
<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>
• In loc de textul link-ului se poate folosi si o imagine:
<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:


  1) Link-uri catre pagini ale aceluiasi site. Adresa URL de la 'href' poate fi: Absoluta (Completa, include si domeniul site-ului [protocolul http:/https: poate fi omis]), sau Relativa (doar calea catre pagina din site, fara numele domeniului).
Exemplu:
<!-- 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>
  2) Link-uri externe catre alte site-uri. Aici, adresa URL din link trebuie sa contina si domeniul (numele site-ului) paginii tinta (protocolul 'http' sau 'https' poate fi omis).
- Exemplu:
<a href='//gamv.eu/jocuri' title='Jocuri'>Jocuri Flash</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.
Exemplu:
<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' ).


• Link-urile interne si externe pot fi combinate. Astfel putem face saltul la un anumit loc aflat intr-o alta pagina. In pagina respectiva (externa) se scrie codul de la pasul 1 (in locul unde se va face saltul), iar in pagina in care va fi link-ul se scrie:
<a href='adresa_pagina#indice'>Nume</a>

Atributul target

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


Urmatorul exemplu va deschide o pagina intr-un tab nou in browser:
<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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut face ca optiunea din <select> sa fie selectata?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>
Care din aceste valori CSS creaza culoare gradient pentru fundal?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
Care cod creaza un array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicati functia PHP folosita pentru redirect la alta pagina.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".
An The A
The garden is a place with flowers.
- Gradina este un loc cu flori.
Indicati articolul corect pentru cuvantul: "jardín" (gradina)
la los el
El jardín es un lugar de flores.
- Gradina e un loc cu flori.
Creare link-uri

Last accessed pages

  1. Conditional IF in Limba Engleza - Fraze Conditionale (64761)
  2. Curs si Tutoriale Ajax (46613)
  3. Liste HTML - UL, OL (4845)
  4. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (37831)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (60583)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (493)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (458)
  3. Curs si Tutoriale JavaScript (289)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (262)
  5. Curs CSS Online Tutoriale CSS3 (251)