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 11:22]
matei.oprea
+++ 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 156: / Linia 158: @@
 ==== 2. Taguri de bază ====
-În continuare vom urmări niște taguri de bază + exemple de cum se folosesc.
+În continuare vom urmări niște taguri de bază, împreună cu exemple de folosire.
-''<p>'' Textul tau aici ''</p>''
+<code html> <p> Paragraf (aliniat) aici. </p> </code>
+  * Tagul ''<p>'' definește un paragraf. Browserul va adăuga, automat, spațiu înainte și după fiecare text din interiorul tagului.
-- Tagul ''<p>'' definește un paragraf. Browserul va adăuga, automat, spațiu înainte și după fiecare text din interiorul tagului.
+<code html> <div> Codul tău aici </div> </code>
+  * Tagul ''<div>'' definește o secțiune din interiorul unei pagini HTML și cuprinde de cele mai multe ori mai multe alte elemente HTML. Este folosită, în special, pentru a o putea formata unitar utilizând CSS. [[ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div | Aici]] puteti găsi un exemplu.
-''<div>'' Codul tău aici ''</div''
+<code html> Text <b> îngroșat </b>. </code>
+  * Tagul ''<b>'' specifică un text îngroșat. 'B' vine de la 'Bold' din engleză.
+  * Rezultat: Text **îngroșat**.
-- Tagul ''<div>'' definește o secțiune din interiorul unei pagini HTML. Este folosită, în special, pentru a o putea formata utilizând CSS. Puteti găsi un exemplu [[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div]].
+<code html> Text <i> înclinat </i>. </code>
+  * Tagul ''<i>'' specifică un text înclinat. 'I' vine de la 'Italic' din engleză.
+  * Rezultat: Text //înclinat//.
-''<b>'' Text ''</b>''
+<code html> Text <u> subliniat </u>. </code>
+  * Tagul ''<u>'' specifică un text subliniat. 'U' vine de la 'Underline' din engleză.
+  * Rezultat: Text __subliniat__.
-- Tagul ''<b>'' specifică un text îngroșat.
+<code html> Text <em> accentuat </em>. </code>
+  * Tagul ''<em>'' este folosit pentru a accentua un text. Fără nicio modificare, rezultatul este identic folosirii tagului ''<i>''. Se poate folosi în combinație cu CSS pentru a schimba aspectul textului accentuat.
+  * Vine de la 'emphasis' din engleză.
+<code html> <h1> Titlu </h1> </code>
+  * Tagurile ''<h1>'' până la ''<h6>'' sunt folosite pentru definirea titlurilor și subtitlurilor. ''<h1>'' reprezintă cel mai mare titlu, iar, ''<h6>'' cel mai mic subtitlu.
-''<i>'' Text ''</i>''
+<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.
+</note>
-- Tagul ''<i>'' specifică un text înclinat.
+<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>
+<script async src="//codepen.io/assets/embed/ei.js"></script>
+</html>
-''<h1>'' Text ''</h1>''
-- Tagurile ''<h1>'' până la ''<h6>'' sunt folosite pentru definirea (nu știu echivalent în română).
+==== 3. Taguri cu atribute ====
-''<em>'' Text ''</em>''
+Pentru a putea oferi cât mai multe opțiuni, tag-urile HTML pot avea atribute. Un atribut este declarat de forma:
-- Cu toate că nu mai este așa de des folosit ( pentru că puteți obține același efect utilizând CSS ), puteți vedea un exemplu [[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em]].
+<code html> <tag atribut="valoare_atribut"> Continut </tag>. </code>
-''<a>'' Text / Imagine ''</a>''
+Exemple de tag-uri ce sunt folosite foarte des cu atribute:
-- Definește un hyperlink către o altă pagină. Cel mai important atribut al lui ''<a>'' este ''href'' care definește locația destinației. De exemplu ''<a href="http://digitalkids.ro">DigitalKids</a>'' va creea un link către ''http://digitalkids.ro''.
+<code html> <a href="http://digitalkids.ro"> DigitalKids </a> </code>
-Dacă sunteți interesați de mai multe taguri, puteți deasemnea să căutați aici [[https://developer.mozilla.org/en-US/docs/Web/HTML/Element]].
+  * Tag-ul <a> defineste un link ([[ http://ro.wikipedia.org/wiki/Hiperlink | hyperlink ]]) către o pagină.
+  * Folosește atributul ''href'' pentru a da adresa către care să trimită legătura - destinația.
+  * Ceea ce se află între ''<a> ... </a>'' reprezintă textul pe care se poate face click și care va duce către pagina definită de ''href''.
+<code html> <img src="calea/catre/fisierul/imagine.jpg" /> </code>
+  * Tag-ul ''<img>'' ajută la inserarea unei imagini în pagina web.
+  * 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 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>
-=== 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 ===
+===== Exerciții =====
-  - le dam cum sa arate o pagina si sa scrie ei codul pentru ea.
-=== Recapitulare ===
+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.
-  - test grila din taguri si elemente de baza
+===== Temă =====
-Extra
+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.
-    - header (în limba engleză) înseamnă antet, adică în partea superioară. Titlul (chiar și al unui document pe hârtie) se regăsește de cele mai multe ori în partea superioară a paginii, de aceea se află în header.

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină