Digital Kids

Unelte utilizator

Unelte site

Sidebar

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

Aceasta e o versiune anterioară a paginii.

Cuprins

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.

  1. Intrați pe http://codepen.io.
  2. Apăsați pe 'New Pen' - este butonul din stânga sus.

După cum observați, pagina deschisă are următoarele elemente:

  1. HTML
    • aici veți scrie voi codul HTML (HyperText Markup Language)
    • folosit pentru conținut și structură
  2. CSS
    • aici veți scrie codul CSS (Cascading Style Sheets)
    • folosit pentru aspect și formatare
  3. JS
    • aici veți scrie codul Javascript
    • folosim Javascript de cele mai multe ori pentru animații și interactivitate
  4. 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ă.

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

  1. începători
  2. intermediari
  3. 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: 

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

Cum interpretăm codul de mai sus?

  1. tagul <html> îi spune browserului faptul că următorul conținut urmează să fie scris în limbaj HTML
  2. tagul <head> reprezintă o colecție de date suplimentare despre document, nu conținut.
  3. 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>.
  4. tagul <body> reprezintă conținutul propriu-zis - ceea ce trebuie să apară în pagina web.
  5. tagul <h1> este folosit pentru titlu.
  6. tagul <p> este folosint pentru a separa paragrafe (aliniate).
  7. tagurile folosite pentru listă le vom explica mai târziu în detaliu, dar pentru moment puteți să rețineți următoarele:
    1. folosim <ul> când dorim o listă neordonată (în engleză: „unordered list“)
    2. folosim <li> pentru fiecare element din listă (în engleză: „list element“)

Toate paginile HTML sunt structurate în felul următor:

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>
  <head>
    
    <title> Hello, DigitalKids </title>
  
  </head>
  
  <body>
  
    <p>Hello, DigitalKids</p>
  </body>

</html>

See the Pen xHbFh by Matei Oprea (@mateioprea) on CodePen.

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>
  <head>
    
    <title> Hello, DigitalKids </title>
  
  </head>
  
  <body>
  
    <p>Hello, DigitalKids</p>
  
  </body>

</html>

See the Pen EHtGu by Matei Oprea (@mateioprea) on CodePen.

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ă + exemple de cum se folosesc.

<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 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div.

<b> Text </b>

- Tagul <b> specifică un text îngroșat.

<i> Text </i>

- Tagul <i> specifică un text înclinat.

<h1> Text </h1>

- Tagurile <h1> până la <h6> sunt folosite pentru definirea (nu știu echivalent în română).

<em> Text </em>

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

<a> Text / Imagine </a>

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

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.

Î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.

See the Pen xBmCp by Matei Oprea (@mateioprea) on CodePen.

Tutorial

  1. Prezentare componente ale programarii web - HTML, CSS, JS. Prezentare interfata codepen.io
  2. Exemplu initial in HTML
  3. Scurta introducere in HTML. Structura unei pagini HTML (taguri html, head, body etc.)
  4. taguri de baza: <p>, <div>, <b>, <i>, <h1>, <h2>, <em>, <a> etc.

Task-uri

  1. mai multe task-uri pe acelasi schelet (de adaugat paragrafe, de aplicat formatari: <b>, <i>, <u>
  2. headings <h1>, <h2>…
  3. imagini

Tema

  1. le dam cum sa arate o pagina si sa scrie ei codul pentru ea.

Recapitulare

  1. test grila din taguri si elemente de baza

Extra

  1. 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.
module/11-basic-web-dev/lectie-01.1392974539.txt.gz · Ultima modificare: 2014/02/21 11:22 de către matei.oprea

Unelte pagină

Exceptând locurile unde este altfel specificat, conținutul acestui wiki este licențiat sub următoarea licență: CC Attribution 3.0 Unported
CC Attribution 3.0 Unported Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki