Unelte utilizator

Unelte site


module:11-basic-web-dev:lectie-01

Diferențe

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

Link către această vizualizare comparativă

Both sides previous revision Previous revision
Next revision
Previous revision
module:11-basic-web-dev:lectie-01 [2014/02/21 11:11]
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? ==== ==== 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. ​ 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>'':​ 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>​ <​html>​
 <div data-height="​268"​ data-theme-id="​4329"​ data-slug-hash="​xHbFh"​ data-default-tab="​html"​ class='​codepen'><​pre><​code>&​lt;​html&​gt;​ <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ă ==== ==== 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 elnu î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 ș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țiunitag-urile HTML pot avea atributeUn 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>
  
-=== Tutorial === +  * Tag-ul <a> defineste un link ([[ http://ro.wikipedia.org/​wiki/​Hiperlink | hyperlink ]]) către o pagină
-  ​Prezentare componente ale programarii web - HTML, CSS, JSPrezentare interfata codepen.io +  ​* Folosește atributul ''​href''​ pentru a da adresa către care să trimită legătura ​destinația
-  - Exemplu initial in HTML +  ​* Ceea ce se află între ''​<a... </a>''​ reprezintă textul pe care se poate face click șcare va duce către pagina definită de ''​href''​.
-  - Scurta introducere in HTMLStructura unei pagini HTML (taguri html, head, body etc.) +
-  ​- taguri de baza: <p><div>, <b>, <i>, <h1>, <h2>, <em>, <a> etc.+
  
-=== Task-uri === +<code html> <img src="​calea/​catre/​fisierul/​imagine.jpg"​ /> </​code>​ 
-  - mai multe task-uri pe acelasi schelet (de adaugat paragrafe, de aplicat formatari: <b><i>, <u+ 
-  headings ​<h1><h2>... +  ​* Tag-ul ''<​img>''​ ajută la inserarea unei imagini în pagina web. 
-  - imagini+  * 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>''​ ș''<​img>''​. Înlocuiți textulimaginea ș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="​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</aby 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>​
  
-=== 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 voidespre ceva ce vă place vouă și vreți să-l prezentați colegilorsau despre un subiect interesant.
-    - header (în limba engleză) înseamnă antetadică î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 paginiide aceea se află în header.+
module/11-basic-web-dev/lectie-01.1392973872.txt.gz · Ultima modificare: 2014/02/21 11:11 de către matei.oprea