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 tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminación
creer = a crede; camino = cale /drum; iluminación = iluminare
Creare link-uri

Last accessed pages

  1. Exercitii engleza - English Tests and exercises - Grammar (116803)
  2. CSS3 Flexbox Container (2941)
  3. Sintaxa JavaScript (11298)
  4. Coduri pt culori (74147)
  5. Cursuri limba engleza gratuite si lectii online (67397)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (509)
  2. Curs HTML gratuit Tutoriale HTML5 (331)
  3. Coduri pt culori (284)
  4. Exercitii engleza - English Tests and exercises - Grammar (227)
  5. Gramatica limbii engleze - Prezentare Generala (225)