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:18] astoican [Mai multe pagini pe un site] |
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]] | ||
| + | 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”. | 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”. | ||
| Linia 30: | 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> | ||
| - | === Task-uri === | + | ==== Task-uri ==== |
| Task-urile de la această lecție nu vor mai fi realizate în CodePen precum cele de până acum. | 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ă: | 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 | + | *//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 | + | *//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: | + | 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"> | <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 aceast 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 . | + | 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ă. | *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.1412360308.txt.gz · Ultima modificare: 2014/10/03 21:18 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
