Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== 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.

<note todo>
  - Intrați pe [[http://codepen.io]].
  - Apăsați pe 'New Pen' - este butonul din stânga sus.
</note>

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? ====

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: ''<tag>'', iar cel de închidere este de forma ''</tag>''. "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ă.

<note tip>
'' 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
</note>

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:

<code html>
<html>
  <head>
    Digital Kids
  </head>
  <body>
    <h1>
      Ce este Digital Kids?
    </h1>
    
    <p>
      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.
    </p>
    
    <p>
      Programul este structurat pe 3 niveluri, fiecare având mai multe module:
    </p>
    
    <ul>
      <li> începători </li>
      <li> intermediari </li>
      <li> avansați </li>
    </ul>
  </body>
</html>
</code>

Cum interpretăm codul de mai sus?
  - tagul ''<html>'' îi spune browserului faptul că următorul conținut urmează să fie scris în limbaj HTML
  - tagul ''<head>'' reprezintă o colecție de date suplimentare despre document, nu conținut.
  - tagul ''<title>'' 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 [[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.
<html>
<div data-height="268" data-theme-id="4329" data-slug-hash="xHbFh" data-default-tab="html" class='codepen'><pre><code>&lt;html&gt;
  &lt;head&gt;
    
    &lt;title&gt; Hello, DigitalKids &lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;p&gt;Hello, DigitalKids&lt;/p&gt;
  &lt;/body&gt;

&lt;/html&gt;</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>&lt;html&gt;
  &lt;head&gt;
    
    &lt;title&gt; Hello, DigitalKids &lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;p&gt;Hello, DigitalKids&lt;/p&gt;
  
  &lt;/body&gt;

&lt;/html&gt;</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.

==== 0. Taguri de bază ====

''<p>'' Textul tau aici ''</p>''
- 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''
- 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 [[aici http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test]].



=== 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


Extra
    - 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

Unelte pagină
