Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== Lecția 5: Link-uri ======

=== Tutorial ===

==== Scurta introducere ====
O singură pagină **HTML** este ușor de gestionat, dar din toate site-urile pe care ați ajuns, ați observat că un site are mai multe pagini. Și întrebarea vine singură: cum e posibil să avem și noi mai multe pagini? Hai să vedem.

==== Mai multe pagini pe un site ====
După cum spune și titlul lecției, **Link**-urile sunt baza realizării unui site complex. 

Până acum ați folosit **link**-uri către imagini, către site-uri de pe internet. O cale de pe o pagină pe o altă pagină este reprezentată tot de un link. În continuare vom folosi link-uri care conduc către o altă pagină făcută de voi.

Întai de toate, ne vom opri asupra teoriei și aflăm, ca să nu existe confuzii mai târziu, că exista doua tipuri de căi (paths din engleză):

1. cale relativă
* este folosită pentru a lega paginile între ele de pe un site
Exemple:
//index.html
/imagini/poza1.png//

2. cale absolută
* este folosită pentru a trimite către un site/imagine/fișier de pe internet

Mai există și un al treilea tip de link care direcționează către un element din pagina curentă.
În acest caz link-ul este de forma **#id-element**, iar elementul către care direcționează link-ul are atributul id='id-element'.

Exemple:
[[http://www.pagina-mea.com]]
[[http://www.pagina-mea.com/imagini/poza1.png]]

Link către un element din pagină: <html><a href="#task-uri">Mergi la task-uri</a></html>

Codul pentru exemplul de mai sus este următorul:
<code html>
<a href="#task-uri">Mergi la task-uri</a>

...

<h3 id="task-uri">Task-uri</h3>
</code>

Atunci când avem mai multe pagini, e de preferat ca pagina care duce către toate celelalte sau altfel spus “pagina de bază” să poarte denumirea de “index.html”. Este ceva standard. Dacă veți avea curiozitatea să descărcați un template de pe internet, prima pagină pe care o veți deschide va fi chiar “index.html”.

Sintaxa folosită pentru introducerea unui link, după cum probabil că știți din exercițiile anterioare, este următoarea:
<code html>
<a href=nume-pagina-secundara>pune aici textul pe care să poți da click</a>
</code>


==== Task-uri ====
Task-urile de la această lecție nu vor mai fi realizate în CodePen precum cele de până acum. 
Pentru rezolvarea task-urilor trebuie să creați un folder pe Desktop care să conțină 2 fișiere pentru început, după cum urmează:
*//index.html// în care să copiați codul din CodePen de la lecția precedentă din partea ce conține cod HTML
*//style.css// în care să copiați codul din CodePen de la lecția precendentă din partea ce conține cod CSS
Pentru a face legătura între fișierul ce conține codul HTML(//index.html//) si fișierul ce conține codul CSS (//style.css//) trebui să adăugați în fițierul index.html în tag-ul **<head>** următoarea structură de cod:
<code html>
<link rel="stylesheet" type="text/css" href="style.css">
</code>
După ce ați realizat cele de mai sus puteți vizualiza conținutul fișierului index.html în Browser. Pentru aceasta dați click dreapta pe fișierul index.html, dați la Open with și alegeți un Browser, de exemplu Google Chrome sau Mozilla FireFox .

*Creați acum alte 4 pagini HTML în folderul Desktop care să conțină informații despre fiecare erou pe care l-ați ales în lecția anterioară.
Daca vreti ca link-urile sa nu fie subliniate, puteti modifica asta din fisierul *.css
<code html>
a:link {
    text-decoration: none;
}
</code>
*Mai creați și un alt fișier CSS pe care să-l folosiți pentru stilurile din aceste paginii. 
*Pentru a crea un aspect plăcut acestor pagini folosiți elementele învățate în lecțiile anterioare cum ar fi class și id-uri si definiți-le în fisierul CSS nou creat.
*În contentul ce conține Eroii mei preferati înlocuiți numele eroului cu câte un link care să direcționeze către paginile create de voi.
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
