Cuprins

Lecția 1: Introducere in Web Dev. HTML

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

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

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

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:
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. Î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ă, împreună cu exemple de folosire.

 <p> Paragraf (aliniat) 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 ș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. Aici puteti găsi un exemplu.

 Text <b> îngroșat </b>.

Tagul <b> specifică un text îngroșat. 'B' vine de la 'Bold' din engleză.
Rezultat: Text îngroșat.

 Text <i> înclinat </i>.

Tagul <i> specifică un text înclinat. 'I' vine de la 'Italic' din engleză.
Rezultat: Text înclinat.

 Text <u> subliniat </u>.

Tagul <u> specifică un text subliniat. 'U' vine de la 'Underline' din engleză.
Rezultat: Text subliniat.

 Text <em> accentuat </em>.

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ă.
```
 <h1> Titlu </h1> 
```
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.

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

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:

 <tag atribut="valoare_atribut"> Continut </tag>.

Exemple de tag-uri ce sunt folosite foarte des cu atribute:

 <a href="http://digitalkids.ro"> DigitalKids </a>

Tag-ul <a> defineste un link ( 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.

 <img src="calea/catre/fisierul/imagine.jpg" />

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

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.

See the Pen oDnCe by Mariana Mărășoiu (@marianamarasoiu) on CodePen.

Exerciții

Urmați linkul de 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.