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ă: Mergi la task-uri

Codul pentru exemplul de mai sus este următorul:

<a href="#task-uri">Mergi la task-uri</a>
 
...
 
<h3 id="task-uri">Task-uri</h3>

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:

<a href=nume-pagina-secundara>pune aici textul pe care să poți da click</a>

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:
```
<link rel="stylesheet" type="text/css" href="style.css">
```
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

a:link {
    text-decoration: none;
}

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.