Unelte utilizator
module:11-basic-web-dev:lectie-05
Diferențe
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:38] 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 21: | Linia 21: | ||
| 2. cale absolută | 2. cale absolută | ||
| * este folosită pentru a trimite către un site/imagine/fișier de pe internet | * 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: | Exemple: | ||
| [[http://www.pagina-mea.com]] | [[http://www.pagina-mea.com]] | ||
| [[http://www.pagina-mea.com/imagini/poza1.png]] | [[http://www.pagina-mea.com/imagini/poza1.png]] | ||
| - | Mai există și un al treilea tip de link care direcționează către un element din pagina curentă. | + | Link către un element din pagină: <html><a href="#task-uri">Mergi la task-uri</a></html> |
| - | <html> | + | |
| - | <p data-height="268" data-theme-id="0" data-slug-hash="rhIqj" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/rhIqj/'>rhIqj</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | + | Codul pentru exemplul de mai sus este următorul: |
| - | <script async src="//codepen.io/assets/embed/ei.js"></script> | + | <code html> |
| - | </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”. | 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: | 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 50: | 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 === | ||
module/11-basic-web-dev/lectie-05.1412361491.txt.gz · Ultima modificare: 2014/10/03 21:38 de către astoican
Exceptând locurile unde este altfel specificat, conținutul acestui wiki este licențiat sub următoarea licență: CC Attribution 3.0 Unported
