Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision | ||
module:11-basic-web-dev:lectie-05 [2014/10/03 21:46] astoican |
module:11-basic-web-dev:lectie-05 [2015/02/18 11:33] (curent) astoican |
||
---|---|---|---|
Linia 1: | Linia 1: | ||
- | ====== Lecția 5: Link-uri. ====== | + | ====== Lecția 5: Link-uri ====== |
=== Tutorial === | === Tutorial === | ||
Linia 23: | Linia 23: | ||
Mai există și un al treilea tip de link care direcționează către un element din pagina curentă. | 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". | + | Î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: | Exemple: | ||
Linia 34: | Linia 34: | ||
<code html> | <code html> | ||
<a href="#task-uri">Mergi la task-uri</a> | <a href="#task-uri">Mergi la task-uri</a> | ||
+ | |||
+ | ... | ||
<h3 id="task-uri">Task-uri</h3> | <h3 id="task-uri">Task-uri</h3> | ||
Linia 42: | Linia 44: | ||
Sintaxa folosită pentru introducerea unui link, după cum probabil că știți din exercițiile anterioare, este următoarea: | Sintaxa folosită pentru introducerea unui link, după cum probabil că știți din exercițiile anterioare, este următoarea: | ||
<code html> | <code html> | ||
- | <a href=”pune-aici-calea-către-pagină“>pune aici textul pe care să poți da click</a> | + | <a href=nume-pagina-secundara>pune aici textul pe care să poți da click</a> |
</code> | </code> | ||
Linia 58: | Linia 60: | ||
*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ă. | *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. | *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. | *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. | *Î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. | ||
- | === Tema === | ||
- | |||
- | === Recapitulare === | ||