'' reprezinta titlul paginii, adică numele tab-ului din Chrome spre exemplu. Cum nu reprezintă text care apare în pagină, îl punem în ''<head>''. - tagul ''<body>'' reprezintă conținutul propriu-zis - ceea ce trebuie să apară în pagina web. - tagul ''<h1>'' este folosit pentru titlu. - tagul ''<p>'' este folosint pentru a separa paragrafe (aliniate). - tagurile folosite pentru listă le vom explica mai târziu în detaliu, dar pentru moment puteți să rețineți următoarele: - folosim ''<ul>'' când dorim o listă neordonată (în engleză: "unordered list") - folosim ''<li>'' pentru fiecare element din listă (în engleză: "list element") Toate paginile HTML sunt structurate în felul următor: {{:module:11-basic-web-dev:table.jpg?200|}} Cum am spus și mai devreme, trebuie să începem pagina cu tagul ''<html>'' și s-o încheiem cu ''</html>''. În general, informațiile despre titlul site-ului sau descrierea lui se află între tag-urile ''<head></head>''. În final, tag-ul ''<body>'' va conține toate informațiile ce vor fi afișate pe site: poze, sunete, text. Haideți să scriem prima noastră pagină ''<html>'': 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><html> <head> <title> Hello, DigitalKids </title> </head> <body> <p>Hello, DigitalKids</p> </body> </html></code></pre> <p>See the Pen <a href='http://codepen.io/mateioprea/pen/xHbFh'>xHbFh</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p> </div><script async src="//codepen.io/assets/embed/ei.js"></script> </html> Felicitări, tocmai ați scris prima voastră pagină HTML. Haideți să urmărim un alt exemplu, ca cel de mai sus, dar puțin modificat: <html> <div data-height="322" data-theme-id="0" data-slug-hash="EHtGu" data-default-tab="html" class='codepen'><pre><code><html> <head> <title> Hello, DigitalKids </title> </head> <body> <p>Hello, DigitalKids</p> </body> </html></code></pre> <p>See the Pen <a href='http://codepen.io/mateioprea/pen/EHtGu'>EHtGu</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p> </div><script async src="//codepen.io/assets/embed/ei.js"></script> </html> Ați observat că s-a introdus tag-ul ''<div></div>''. Nu ne vom concentra foarte mult pe acest lucru, ci vom trece mai departe. Observați că clasa "DK" din HTML are un corespondent în CSS ce se apelează cu .DK{}. Ce vreau să spun este că fiecare clasă din HTML, este "reprezentată" de aceeăsi "clasă" și în CSS. Încercați să creați și voi o astfel de pagină, urmând ca împreună cu trainerul să faceți modificările aferente. ==== 2. Taguri de bază ==== În continuare vom urmări niște taguri de bază, împreună cu exemple de folosire. <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. <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. <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**. <code html> Text <i> înclinat </i>. </code> * Tagul ''<i>'' specifică un text înclinat. 'I' vine de la 'Italic' din engleză. * Rezultat: Text //înclinat//. <code html> Text <u> subliniat </u>. </code> * Tagul ''<u>'' specifică un text subliniat. 'U' vine de la 'Underline' din engleză. * Rezultat: Text __subliniat__. <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. <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> <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> ==== 3. Taguri cu atribute ==== 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> Exemple de tag-uri ce sunt folosite foarte des cu atribute: <code html> <a href="http://digitalkids.ro"> DigitalKids </a> </code> * 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="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> ===== Exerciții ===== 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. ===== 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.

====== Lecția 1: Introducere in Web Dev. HTML ====== ===== Tutorial ===== În această lecție ne vom familiariza cu ceea ce numim Web Development, adică crearea paginilor web. Principalele limbaje folosite pentru aceasta, și pe care le vom prezenta de-a lungul modulului, sunt HTML, CSS și JavaScript. ==== 0. Prezentare interfață Codepen ==== În acest modul vom folosi ca mediu de dezvoltare Codepen. Acesta ne oferă un mediu ideal pentru dezvoltarea în toate cele trei limbaje. - Intrați pe [[http://codepen.io]]. - Apăsați pe 'New Pen' - este butonul din stânga sus. După cum observați, pagina deschisă are următoarele elemente: - HTML * aici veți scrie voi codul HTML (HyperText Markup Language) * folosit pentru conținut și structură - CSS * aici veți scrie codul CSS (Cascading Style Sheets) * folosit pentru aspect și formatare - JS * aici veți scrie codul Javascript * folosim Javascript de cele mai multe ori pentru animații și interactivitate - partea de jos alba a ecranului * aici va apărea rezultatul din urma rulării codului din ferestrele anterioare * practic, aici va fi pagina voastră de web În continuare, vom prezenta și discuta pe rând fiecare dintre cele 3 limbaje ale dezvoltării web. ==== 1. Ce este HTML? De ce avem nevoie de el? ==== 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. Aceste "tag-uri" îi spun browserului vostru cum să interpreteze elementele grafice pe care le adăugați. "Tag-urile" sunt de două tipuri: de deschidere (open tag) si de închidere (close tag). Tagul de deschidere este de forma: '''', iar cel de închidere este de forma ''''. "tag" este numele tagului. Mai târziu vom explora câteva "tag-uri" de bază. Pentru moment, mai trebuie amintit faptul că fiecărui tag de deschidere trebuie să îi corespundă un tag de închidere. Documentul de mai jos are o structură simplă. Sunt 3 mari părți: un titlu (antet), două paragrafe (aliniate), și o listă. '' TITLU '' **Ce este Digital Kids.** ''PARAGRAF'' Digital Kids este un program pentru copii cu vârste cuprinse între 8 și 14 ani care oferă cursuri de programare și competențe digitale. Aici, copiii vor putea dezvolta pagini web, aplicații pentru echipamente mobile și propriile lor jocuri. ''PARAGRAF'' Programul este structurat pe 3 niveluri, fiecare având mai multe module: ''LISTA'' - începători - intermediari - avansați Pornind doar de la textul de mai sus, pentru a obține aceeași structură trebui să punem tag-uri. Codul HTML pentru ce am descris mai sus este următorul:



  
    Digital Kids
  
  
    
      Ce este Digital Kids?
    
    
    
      Digital Kids este un program pentru copii cu vârste cuprinse între 8 și 14 ani care oferă cursuri de programare și competențe digitale. Aici, copiii vor putea dezvolta pagini web, aplicații pentru echipamente mobile și propriile lor jocuri.
    
    
    
      Programul este structurat pe 3 niveluri, fiecare având mai multe module:
    
    
    
       începători 
       intermediari 
       avansați

Cum interpretăm codul de mai sus? - tagul '''' îi spune browserului faptul că următorul conținut urmează să fie scris în limbaj HTML - tagul '''' reprezintă o colecție de date suplimentare despre document, nu conținut. - tagul '''' reprezinta titlul paginii, adică numele tab-ului din Chrome spre exemplu. Cum nu reprezintă text care apare în pagină, îl punem în ''<head>''. - tagul ''<body>'' reprezintă conținutul propriu-zis - ceea ce trebuie să apară în pagina web. - tagul ''<h1>'' este folosit pentru titlu. - tagul ''<p>'' este folosint pentru a separa paragrafe (aliniate). - tagurile folosite pentru listă le vom explica mai târziu în detaliu, dar pentru moment puteți să rețineți următoarele: - folosim ''<ul>'' când dorim o listă neordonată (în engleză: "unordered list") - folosim ''<li>'' pentru fiecare element din listă (în engleză: "list element") Toate paginile HTML sunt structurate în felul următor: {{:module:11-basic-web-dev:table.jpg?200|}} Cum am spus și mai devreme, trebuie să începem pagina cu tagul ''<html>'' și s-o încheiem cu ''</html>''. În general, informațiile despre titlul site-ului sau descrierea lui se află între tag-urile ''<head></head>''. În final, tag-ul ''<body>'' va conține toate informațiile ce vor fi afișate pe site: poze, sunete, text. Haideți să scriem prima noastră pagină ''<html>'': 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><html> <head> <title> Hello, DigitalKids </title> </head> <body> <p>Hello, DigitalKids</p> </body> </html></code></pre> <p>See the Pen <a href='http://codepen.io/mateioprea/pen/xHbFh'>xHbFh</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p> </div><script async src="//codepen.io/assets/embed/ei.js"></script> </html> Felicitări, tocmai ați scris prima voastră pagină HTML. Haideți să urmărim un alt exemplu, ca cel de mai sus, dar puțin modificat: <html> <div data-height="322" data-theme-id="0" data-slug-hash="EHtGu" data-default-tab="html" class='codepen'><pre><code><html> <head> <title> Hello, DigitalKids </title> </head> <body> <p>Hello, DigitalKids</p> </body> </html></code></pre> <p>See the Pen <a href='http://codepen.io/mateioprea/pen/EHtGu'>EHtGu</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p> </div><script async src="//codepen.io/assets/embed/ei.js"></script> </html> Ați observat că s-a introdus tag-ul ''<div></div>''. Nu ne vom concentra foarte mult pe acest lucru, ci vom trece mai departe. Observați că clasa "DK" din HTML are un corespondent în CSS ce se apelează cu .DK{}. Ce vreau să spun este că fiecare clasă din HTML, este "reprezentată" de aceeăsi "clasă" și în CSS. Încercați să creați și voi o astfel de pagină, urmând ca împreună cu trainerul să faceți modificările aferente. ==== 2. Taguri de bază ==== În continuare vom urmări niște taguri de bază, împreună cu exemple de folosire. <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. <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. <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**. <code html> Text <i> înclinat </i>. </code> * Tagul ''<i>'' specifică un text înclinat. 'I' vine de la 'Italic' din engleză. * Rezultat: Text //înclinat//. <code html> Text <u> subliniat </u>. </code> * Tagul ''<u>'' specifică un text subliniat. 'U' vine de la 'Underline' din engleză. * Rezultat: Text __subliniat__. <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. <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> <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> ==== 3. Taguri cu atribute ==== 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> Exemple de tag-uri ce sunt folosite foarte des cu atribute: <code html> <a href="http://digitalkids.ro"> DigitalKids </a> </code> * 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="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> ===== Exerciții ===== 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. ===== 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.