Creare link-uri

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:

- 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:

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.
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:

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>.

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>

<<-Adaugare imagini in pagina -- Harti de imagini->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag afiseaza textul oblic?

<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>

Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Clic pe metoda ce returneaza primul element indicat de selectorii specificati.

getElementsByName() querySelector() querySelectorAll()

// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicati variabila PHP ce contine datele din formular trimise cu method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".

I They We

We speak english.
- Noi vorbim engleza.

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".

Ellos Vosotros Nosotros

Nosotros hablamos español.
- Noi vorbim spaniola.