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 specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()
var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can
 Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gusta
Me gustan las frutas dulces.
- Imi plac fructele dulci.
Creare link-uri

Last accessed pages

  1. Pacea Inseptita (452)
  2. Pronumele in limba engleza - Pronouns (55070)
  3. Scriere scripturi PHP elementare (6461)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (129169)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (279268)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (61)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (52)
  3. Limba spaniola curs online incepatori si avansati (26)
  4. Accentul si Pronuntia (24)
  5. Teste spaniola - Tests y ejercicios de Español - Gramática (23)