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:19]
matei.oprea [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 156: / Linia 158: @@
 ==== 2. Taguri de bază ====
-''<p>'' Textul tau aici ''</p>''
+În continuare vom urmări niște taguri de bază, împreună cu exemple de folosire.
-- Tagul ''<p>'' definește un paragraf. Browserul va adăuga, automat, spațiu înainte și după fiecare text din interiorul tagului.
+<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.
-''<div>'' Codul tău aici ''</div''
+<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.
-- 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 [[http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test]]. Nu știu cum să pun text aici și să dai click pe el. nu înțeleg cum se face.
+<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**.
-''<b>'' Text ''</b>''
+<code html> Text <i> înclinat </i>. </code>
+  * Tagul ''<i>'' specifică un text înclinat. 'I' vine de la 'Italic' din engleză.
+  * Rezultat: Text //înclinat//.
-- Tagul ''<b>'' specifică un text îngroșat.
+<code html> Text <u> subliniat </u>. </code>
+  * Tagul ''<u>'' specifică un text subliniat. 'U' vine de la 'Underline' din engleză.
+  * Rezultat: Text __subliniat__.
-''<i>'' Text ''</i>''
+<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.
-- Tagul ''<i>'' specifică un text înclinat.
+<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>
-''<h1>'' Text ''</h1>''
+<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>
-- Tagurile ''<h1>'' până la ''<h6>'' sunt folosite pentru definirea (nu știu echivalent în română).
-''<em>'' Text ''</em>''
+==== 3. Taguri cu atribute ====
-- 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]].
+Pentru a putea oferi cât mai multe opțiuni, tag-urile HTML pot avea atribute. Un atribut este declarat de forma:
-''<a>'' Text / Imagine ''</a>''
+<code html> <tag atribut="valoare_atribut"> Continut </tag>. </code>
-- 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''.
+Exemple de tag-uri ce sunt folosite foarte des cu atribute:
-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]].
+<code html> <a href="http://digitalkids.ro"> DigitalKids </a> </code>
-Î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.
+  * 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>
+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ă