Diferențe

Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.

Link către această vizualizare comparativă

--- module:11-basic-web-dev:lectie-01 [2014/02/21 22:01]
mariana [2. Taguri de bază]
+++ module:11-basic-web-dev:lectie-01 [2014/05/23 23:37] (curent)
mariana [Exerciții]
@@ Linia 32: / Linia 32: @@
 ==== 1. Ce este HTML? De ce avem nevoie de el? ====
-Când scriem cod HTML ne bazăm pe o serie de "tag-uri" pentru a forma o structură a site-ului.
+HTML este limbajul principal care se află în spatele paginilor web. Dacă vă duceți pe o pagină web oarecare, și dați ''click dreapta'' --> '' View page source'' / ''Vezi sursa paginii'', se va deschide o noua fereastră. Aceasta va conține codul HTML care face pagina web să arate așa cum o vedeți. Limbajul HTML este interpretat de browser.
+Când scriem cod HTML ne bazăm pe o serie de "tag-uri" pentru a forma o structură a site-ului.
 Imaginați-vă un set de jucării lego: cu fiecare piesă adăugată, rezultatul la care vreți să ajungeți este din ce în ce mai aproape. Așadar, pe baza unei structuri ajungeți la un rezultat final. Exact la fel se întâmplă și cu HTML: Fiecare element pe care îl adăugați în cod, aduce pagina web mai aproape de cum doriți să arate în final.
@@ Linia 107: / Linia 109: @@
 Haideți să scriem prima noastră pagină ''<html>'':
-Intrați pe site-ul [[codepen.io]]. În stânga sus, aveți un buton ce se numește ''New Pen''. Apăsați-l, urmând să scriem cod în box-ul din stânga ce se numește HTML. Priviți exemplul următor. După ce l-ați înțeles încercați să scrieți și voi același lucru.
+Intrați pe site-ul [[http://codepen.io/ | codepen]]. În stânga sus, aveți un buton ce se numește ''New Pen''. Apăsați-l, urmând să scriem cod în box-ul din stânga ce se numește HTML. Priviți exemplul următor. După ce l-ați înțeles încercați să scrieți și voi același lucru.
 <html>
 <div data-height="268" data-theme-id="4329" data-slug-hash="xHbFh" data-default-tab="html" class='codepen'><pre><code>&lt;html&gt;
@@ Linia 196: / Linia 198: @@
 Pentru a putea oferi cât mai multe opțiuni, tag-urile HTML pot avea atribute. Un atribut este declarat de forma:
-<code html> <tag atribut="valoare_atribut"> Continut </tag>.
+<code html> <tag atribut="valoare_atribut"> Continut </tag>. </code>
 Exemple de tag-uri ce sunt folosite foarte des cu atribute:
@@ Linia 211: / Linia 213: @@
   * Atributul ''src'' specifică locul unde se găsește imaginea. Acesta poate să fie o adresă web, sau un fișier local.
-Aproape toate tagurile pot să aibă atribute, unele sunt generale, adică pot fi folosite la mai multe tag-uri, precum atributul ''style'', altele depind de tag-ul asociat. Dacă sunteți interesați de mai multe taguri, puteți deasemnea să căutați [[ https://developer.mozilla.org/en-US/docs/Web/HTML/Element | aici ]].
+Aproape toate tagurile pot să aibă atribute. Unele atribute sunt generale, adică pot fi folosite la mai multe tag-uri, precum atributul ''style''. Altele depind de tag-ul asociat, spre exemplu ''src'' sau ''href''. Dacă sunteți interesați să folosiți mai multe taguri, puteți deasemnea să căutați [[ https://developer.mozilla.org/en-US/docs/Web/HTML/Element | aici ]].
 <note todo>
-În continuare veți urmări un exemplu cu toate tagurile de bază prezentate mai sus. Încercați să înțelegeți tot ceea ce e scris sau întrebați asistentul. Este foarte important să înțelegi lucrurile de bază încă de pe acum. Nu ezitați să puneți întrebări.
+Mai jos este un exemplu cu tag-urile ''<a>'' și ''<img>''. Înlocuiți textul, imaginea și link-ul cu ce vreți voi, și observați cum se modifică conținutul din partea de jos a paginii.
 </note>
 <html>
-<p data-height="268" data-theme-id="4329" data-slug-hash="xBmCp" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/mateioprea/pen/xBmCp'>xBmCp</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<p data-height="263" data-theme-id="0" data-slug-hash="oDnCe" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/marianamarasoiu/pen/oDnCe'>oDnCe</a> by Mariana Mărășoiu (<a href='http://codepen.io/marianamarasoiu'>@marianamarasoiu</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
 <script async src="//codepen.io/assets/embed/ei.js"></script>
 </html>
@@ Linia 224: / Linia 226: @@
 ===== Exerciții =====
-Urmați linkul de aici [[http://codepen.io/mateioprea/pen/hlutG]] pentru exerciții. Există și un bonus pentru cei ce termină toate celelalte exerciții. Pentru a putea modifica codul scris, trebuie să apăsați pe butonul "Fork" din stânga sus.
+Urmați linkul de [[http://codepen.io/mateioprea/pen/hlutG | aici]] pentru exerciții. Există și un bonus pentru cei ce termină toate celelalte exerciții.
-<hidden>
-=== Tutorial ===
-  - Prezentare componente ale programarii web - HTML, CSS, JS. Prezentare interfata codepen.io
-  - Exemplu initial in HTML
-  - Scurta introducere in HTML. Structura unei pagini HTML (taguri html, head, body etc.)
-  - taguri de baza: <p>, <div>, <b>, <i>, <h1>, <h2>, <em>, <a> etc.
-=== Task-uri ===
-  - mai multe task-uri pe acelasi schelet (de adaugat paragrafe, de aplicat formatari: <b>, <i>, <u>
-  - headings <h1>, <h2>...
-  - imagini
-=== Tema ===
-  - le dam cum sa arate o pagina si sa scrie ei codul pentru ea.
-=== Recapitulare ===
-  - test grila din taguri si elemente de baza
-</hidden>
+===== Temă =====
+Realizați o pagină HTML în care să aveți cel puțin o imagine, o listă (ordonată sau neordonată, la alegere) și un link. Pagina poate să fie despre voi, despre ceva ce vă place vouă și vreți să-l prezentați colegilor, sau despre un subiect interesant.

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină