JSKids Hello World PDF

Hello World
Introducere in tehnologiile Web

HTML + CSS + JS
JSKids
Bucuresti 2020
1 / 93
Termeni si Conditii
Tot continutul acestui material si alte materiale conexe sunt detinute de JSKids (JS LEAGUE
TECHNOLOGIES SRL) si sunt protejate de drepturi de proprietate intelectuala prin legea aplicabila.
Nu aveti voie sa utilizati continutul in alte cursuri decat cele care fac natura predarii la clasa in sistemul de
invatamant public sau in alte activitati de natura comerciala. Nu este permis sa copiati, sa distribuiti, sa
publicati, sa transferati catre terti, sa modificati, sa folositi, sa transmiteti, sa reutilizati, sa vindeti, sa
acordati o licenta pentru utilizatori, creati continut nou derivat, includeti orice continut (cu exceptia celor
mentionate mai sus) in orice alt context decat cel intentionat de JSKids, cu exceptia acordului sau scris.
Utilizarea acestui material nu va ofera niciun drept de proprietate intelectuala asupra lui sau asupra
continutului pe care il accesati. Nu aveti dreptul de a utiliza continutul si materialul decat daca obtineti
permisiunea anterioara de la JSKids. Tot continutul trebuie creditat la JSKids atunci cand este utilizat.
Orice utilizare a continutului in alte scopuri decat cele permise expres de acest document sau de orice
acord de utilizare este interzisa si va fi sanctionata conform legislatiei in vigoare.
Versiunea 1.0
1 Sept 2020
2 / 93
Context
Obiectivele cursului
Obiectivele acestui curs este de a seta o serie de competente:
Competente digitale si folosire a calculatorului
Competente in programarea web si realizarea de pagini web cu ajutorul limbajelor HTML, CSS si
JavaScript
La finalul cursului elevii vor dobandi o serie de abilitati programatice cu ajutorul carora isi pot crea orice
pagina web folosind componente moderne ale tehnologiei web prin:
1.1 Analizarea unei probleme in scopul identificarii si clasificarii datelor necesare
1.2 Identificarea relatiilor dintre date
1.3 Identificarea modalitatilor adecvate de structurare a datelor care intervin intr-o problema
1.4 Utilizarea functiilor specifice de prelucrare a datelor structurate
2.1 Identificarea tehnicilor de programare adecvate rezolvarii unei probleme si aplicarea creativa a
acestora
2.2 Elaborarea strategiei de rezolvare a unei probleme
2.3 Analizarea comparativa a eficientei diferitelor tehnici de rezolvare a problemei respective si alegerea
celei mai eficiente variante
3.1 Utilizarea instrumentelor de dezvoltare a unei pagini web
3.2 Elaborarea si realizarea unei aplicatii, folosind un mediu de programare specific
3.3 Prezentarea unei pagini web
Pentru cine este acest curs ?
Acest curs este destinat profesorilor de informatica si TIC atat pentru profil real cat si uman, care au la
dispozitie cel putin 1h / saptamana pentru a preda curricula, pentru clasele VIII - XII.
Recomandarile noastre:
pentru specializarea matematica-informatica 4 ore/ saptamana, din care 1 ora pentru activitati
teoretice si 3 ore pentru activitati practice;
pentru specializarea matematica-informatica, intensiv informatica 7 ore/ saptamana, distribuite
astfel: do2ua ore pentru activitati teoretice si 5 ore pentru activitati practice, dintre care 3 ore vor fi
desfasurate cu colectivul de elevi organizat pe grupe.
Activitatile practice vor fi desfasurate obligatoriu in laborator.
Autori si contributori
. Diana Miron, Co-fondator JSLeague si JSKids, Programator Web
. Claudia Ifrim, Co-fondator JSKids, Inginer Software si PhD Universitatea Bucuresti (Facultatea
Matematica-Informatica)
. Valentin Ionita, Trainer JSKids si Inginer Software, student la Universitatea Politehnica Bucuresti
(Facultatea de Automatica si Calculatoare)
3 / 93
Cuprins
. Introducere in Web
. HTML, CSS si JavaScript
. Taguri HTML, stiluri CSS si functii JS
. Taguri HTML: Headings, liste, paragrafe
. Taguri HTML: imagini, iframe, audio, video
. Proprietati CSS ale elementelor
. Selectori CSS, clase si id-uri
. Transformari ale elementelor folosind CSS
. Structura de fisiere a unui website
. Taguri principale: HTML, HEAD si BODY
. Elemente de formulare: butoane, input-uri, select-uri
. Linkuri si legaturi intre paginile web
. Selectori CSS si specificitatea lor
. Proprietati avansate CSS
. Animatii folosind CSS
. CSS Grid
. CSS Bootstrap
. Accessibilitate - A11y
. Hello JavaScript
4 / 93
Introducere in Web
Notiuni
Ce este WWW?
World Wide Web, abreviat WWW este totalitatea site-urilor / documentelor si informatiilor de tip hipertext
legate intre ele, care pot fi accesate prin reteaua mondială de Internet. Documentele, care exista in
diferite locatii pe diverse calculatoare server, pot fi regasite cu ajutorul unui identificator univoc numit
URL.
Hipertextul inclusiv imagini etc. este afsșat cu ajutorul unui program de navigare in web numit browser,
care descarcă paginile web de pe un server web si le afiseaza pe un terminal „client” la utilizator.
Webul a fost inventat in 1989 la Centrul European de Cercetari Nucleare (CERN) din Geneva,
Elvetia. Propunerea initiala de creare a unei colectii de documente avand legaturi intre ele a fost
facuta de Tim Berners-Lee in martie 1989. Propunerea a aparut in urma problemelor de
comunicare pe care le intampinau echipele de cercetatori ce foloseau posta electronica. World
Wide Web Consortium (cunoscut și sub denumirea de W3C), care astăzi este condus de
Berners-Lee, dezvoltă standardele HTML și CSS.
Ce este un browser web?

Browserul este un software (program) ce permite utilizatorilor sa afiseze text, grafica, video, muzica si
alte informatii situate pe o pagina din World Wide Web. Exemple de browsere: Mozilla Firefox, Google
Chrome, Microsoft Edge, Opera, Apple Safari, Duck Duck Go.
Primul browser din istorie a fost Mosaic inventat in 1993, in 1994 a aparut Netscape urmat de
faimosul Internet Explorer in 1995 conceput de catre Microsoft.
5 / 93
Din ce este alcatuita o pagina web?
Orice pagina web are la baza 3 elemente: HTML, CSS si JavaScript.
HTML - HyperText Markup Language este un limbaj de marcare utilizat pentru crearea paginilor web
ce pot fi afisate intr-un browser (sau navigator). Scopul HTML este mai degraba prezentarea informatiilor
- text, paragrafe, fonturi, imagini, video etc. Cea mai noua versiune a limbajului este HTML5.
CSS - Cascading Style Sheets este un standard pentru formatarea elementelor unui document
HTML. Stilurile se pot atasa elementelor HTML prin intermediul unor fisiere externe sau in cadrul
documentului. Cea mai noua versiune a limbajului este CSS3.
JS - JavaScript este un limbaj de programare functional, imperativ, compilat la run-time bazat pe
evenimente. Motoarele JavaScript au fost utilizate initial doar in browserele web, dar acum sunt utilizate
si in servere, prin Node.js. JavaScript nu este acelasi limbaj de programare cu Java. Cea mai noua
specificatie de limbaj este ECMAScript 2020 (sau ES11).
JavaScript a fost dezvoltat initial de catre Brendan Eich de la Netscape Communications

Corporation in 1997 sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript in doar
10 zile.
Daca ar fi sa comparam o pagina web cu un functionalitatile unui corp uman, HTML ofera structura
osoasa, CSS-ul ofera atributele unice cum ar fi culoarea pielii, a ochilor sau a parului si in final JavaScript
reprezinta muschii si partea motorie prin care corpul se poate misca si face o serie de actiuni.
6 / 93
Front-End vs. Back-End
Front-End este un termen care defineste partea de client (interfata) al oricarei aplicatii. Limbajele web
(HTML, CSS si JS) sunt singurele limbaje de programare Front-End. Aplicatiile web moderne au la baza
framework-uri de JavaScript precum Angular, ReactJS sau Vue.js.
Back-End este un termen care defineste partea de server si baza de date a unei aplicatii. Dintre limbajele
Back-End fac parte PHP, Java, Python, C++, C#, Node.js, Ruby on Rails.
Pana in acest moment pe Pamant exista 700 de limbaje de programare si 1,744,517,326 website-
uri.
Resurse
W3C - Website Oficial
Prima pagina Web
Cum aratau website-urile in anii '96
Cum arata un website complex
Lista cu toate limbajele de programare care exista
7 / 93
HTML, CSS si JavaScript
Notiuni
HTML
Elementul definitoriu si de baza al codului HTML este tagul. Un tag are rolul de a encapsula informatia si
a-i oferi o structura. Denumirea tag-ului este incadrata intre simbolurile < si >. Sintaxa unui tag este
urmatoarea:
Exista 2 tipuri de tag-uri:

pereche care se deschid si inchid, de ex. <div></div> si care pot contine alte tag-uri in interiorul
lor
nepereche care doar se innchid, de ex. <img /> care nu poate contine alte tag-uri in interiorul lor
CSS
Elementul definitoriu al codului CSS este selectorul ca element HTML combinat cu stilurile elementului
respectiv. Acestea se vor incadra intre acolade { si }. Fiecare element are o serie de proprietati CSS
carora li se atribuie o valoare. Sintaxa unui element este urmatoarea:
8 / 93
JavaScript
Elementele de baza ale codului JS sunt variabilele si functiile. Cu ajutorul JS putem schimba continutul
elementelor HTML, stilul lor prin CSS si putem dezvolta algoritmi avansati cu ajutorul functiilor. Sintaxa JS
este:
var x, y, z; // Declararea variabilelor

x = 5; y = 6; // Asignarea valorilor
z = x + y; // Calculul valorilor
function suma(x,y,z) { // Definirea functiilor
z = x+y;
return z;
}
Cum incepem sa scriem cod?

Primul pas este sa folosim un editor text. Cel mai indemana este un editor text de tipul Codepen care
ofera posibilitatea de a scrie cod HTML, CSS si JS si de a arata output-ul paginii web innstantaneu.
Un editor de text este o aplicatie software (un program) folosita pentru editarea (crearea si
modificarea) de fisiere text. Editoarele de text se folosesc indeosebi pentru scrierea (dezvoltarea)
de programe, pagini web, administrarea sistemelor de operare. Un editor de text este, in general,
inclus in fiecare sistem de operare. Exemple de editoare text sunt: Notepad++, Sublime Text,
Atom, VS Code.
9 / 93
Taguri HTML, stiluri CSS si functii JS
Notiuni
Putem observa ca denumirea tag-urilor HTML este semantica, ele putand fi asociate cu usurinta
cuvinntelor reprezentative din limba engleza.
Cele mai des intalnite tag-uri HTML sunt:
<div></div> - diviziune
<h1></h1> - heading 1
<p></p> - paragraf
<span></span> - element text
<small></small> - text de marime mica
<a></a> - anchor/ link
<img /> - imagine
<ol></ol> - lista ordonata
<ul></ul> - lista neordonata
<section></section> - sectiune
<header></header> - antet
<footer></footer> - subsol
<aside></aside> - element in stanga sau dreapta
<form></form> - formular
<input/> - intrare
<select></select> - select cu optiuni
<button></button> - buton
<table></table> - tabel
Tag-urile care fac parte din structura logica a unei pagini HTML si sunt obligatorii sunt:
<html></html> - tagul parinte care defineste o pagina HTML
<head></head> - tagul in care se incarca meta-tag-uri si librarii externe
<body></body> - tagul in care se cuprinde toata informatia dintr-o pagina web
Conform celor mai noi specificatii, exista 119 taguri HTML. Lista completa se regaseste aici.
Utilitatea CSS este de a putea stiliza separat fiecare element HTML din pagina web.
10 / 93
CSS este proiectat pentru a permite separarea stilurilor elementelor si a continutului, inclusiv aspectul,
culorile, fonturile si animatiile. Aceasta separare imbunatateste accesibilitatea continutului, ofera
flexibilitate si control in specificarea caracteristicilor de prezentare, permite mai multor pagini web sa aiba
acces la aceeasi formatare print-un fisier CSS separat, care reduce complexitatea si repetarea
continutului structural.
Fisierul .css este memorat in memoria cache a browserului pentru a imbunatati viteza de incarcare a
paginii intre paginile care partajeaza fisierul si formatarea acestuia.
Exercitii
Exercitiul 1
Intra pe Codepen. Apasa butonul din stanga sus denumit Start Coding.
Alege 2 culori preferate de-ale tale.
In primul exercitiu trebuie sa schimbi culoarea de fundal al paginii folosind tag-ul <body> (care
momentan nu se vede in structura de elemente insa vom reveni ulterior la el) si culoarea textului afisat in
culorile tale preferate, schimband valorile color si background-color din fereastra destinata CSS.
Putem schimba si marimea default a fontului folosind proprietatea font-size.
Vei observa faptul primele schimbari ale paginii tale web in fereastra de output.
HTML
Hello World
CSS
body {
color: yellow;
background-color: purple;
font-size: 45px;
}
11 / 93
Rezultat
Exercitiul 2
Pentru a vedea cum functioneaza JavaScript, scrie o functie simpla de alertare cu textul Salut in
interiorul ei.
JS
alert("salut");
Rezultat
12 / 93
Exercitiul 3
Adauga inca un text sau propozitie in fereastra HTML. Vei observa faptul ca ambele texte au aceeasi
dimensiune si culoare. Acest lucru se datoreaza stilului CSS pus pe elementul body, care va afecta
impicit stilul tuturor elementelor din pagina.
Numele de cascada provine din schema de prioritate specificata pentru a determina ce regula de
stil se aplica daca mai multe reguli se potrivesc cu un anumit element. Fiecare selector CSS are
un anumit grad de speficitate, lucru pe care il vom descoperi pe parcursul cursului.
HTML
Hello World
JavaScript este super!
Rezultat
13 / 93
Taguri HTML: Headings, liste, paragrafe
Notiuni
Unele dintre cele mai importante tag-uri ale unei pagini HTML sunt Heading-urile. Ele se comporta ca
o serie de titluri si subtitluri care impart informatia ierarhic intr-o pagina web. Marimea lor implicita difera
de la cel mai mare, <h1></h1> (Heading 1) pana la cel mai mic, <h6></h6> (Heading 6).
In caz ca va intrebati daca mai exista tag-uri de heading dupa h6, de exemplu h7, h8, ele nu exista
in specificatiile HTML. Orice tag scris dupa h6 va fi interpretat de catre browser ca un paragraf.
Pentru a introduce liste intr-o pagina web, putem folosi tag-ul <ul></ul> pentru o lista neordonata
(unordered list - cu bullet points) sau <ol></ol> pentru a crea o lista ordonata (ordered list - cu
numere). Fiecare element din lista este definit prin tag-ul <li></li> (list item).
Pentru a introduce paragrafe text intr-o pagina web se foloseste tag-ul <p></p> (paragraph).
Exista mai multe moduri prin care putem defini culorile unul element folosind proprietatea color
(culoarea textului) sau background-color (culoarea de fundal):
prin specificarea semantica a culorii in limba engleza (ex. purple, red, green)
prin codul RGB (red, green, blue)
prin codul HEX al unei culori (o combinatie de 6 cifre si litere pentru o culoare RGB)
Orice culoare poate fi transformata din RGB in HEX si invers (fiind culori digitale ele reprezinta culoarea
fiecarui pixel a unei interfete).
Spatiul color RGB sau sistemul de culori RGB, construieste toate culorile din combinatia culorilor
Rosu, Verde si Albastru. Rosu, verde si albastru folosesc 8 biti fiecare, care au valori intregi de la
0 la 255. Acest lucru face ca 256 * 256 * 256 = 16777216 sa fie posibile culori.
Aici este o lista completa a tuturor numelor culorilor disponibile in HTML.
14 / 93
Exemplu
Culoarea ROSU (red) poate fi definita astfel:
p {
color: red;
color: rgb(255,0,0);
color: #FF0000;
}
Exercitii
Exercitiul 1
In fereastra destinata HTML insereaza cate un heading, un paragraf, o lista ordonata si o lista neordonata
folosind tag-urile corespunzatoare HTML.
In fereastra destinata CSS coloreaza textul fiecarui tag cu cate o culoare diferita.
Intra pe Color Picker si alege o culoare care iti place. Copiaza codul HEX care trebuie sa aiba 6 caractere
si inlocuieste-l in fereastra destinata CSS la culoarea paragrafului.
HTML
<p>Aici este un paragraf verde</p>

<h1>Acesta este un heading mov</h1>
<ol>
<li>Saptamana 1</li>
</ol>
<ul>
<li>Mere</li>
<li>Cirese</li>
<li>Struguri</li>
</ul>
15 / 93
CSS
p {
color: #16B8AE;
}
h1 {
color: purple;
}
ol {
color: blue;
}
Rezultat
Exercitiul 2
Adauga toate tipurile de heading pentru a vedea marimea lor, de la <h1> la <h6>. Coloreaza diferit fiecare
heading folosind denumirea semantica a culorilor, coduri HEX si RGB, la alegere.
HTML
<h1>Acesta este un heading mov</h1>

<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
16 / 93
CSS
h1 {
color: purple;
}
h2 {
color: #4d79ff;
}
h3 {
color: rgb(0, 153, 51);
}
h4 {
color: #7300e6;
}
h5 {
color: rgb(102, 255, 102);
}
h6 {
color: tomato;
}
In valoarea RGB a unei culori exista si posibilitatea de a aplica transparenta prin folosirea RGBA (a
= alpha). Daca nu este declarat, alpha are implicit valoarea 1 si poate avea orice valoare intre 0 si
1.
Exercitiul 3
n fereastra CSS, modifica culoarea de background a paginii intr-un gradient liniar din 3 culori folosind
proprietatea background-image: linear-gradient(grad, culoare 1, culoare 2, culoare
3);.
CSS
body {
background-image: linear-gradient(90deg, purple, blue, yellow);
}
17 / 93
Rezultat
Acum modifica-l intr-un gradient radial cu 5 culori folosind background-image: radial-

gradient(forma, culoare 1, culoare 2, culoare 3, culoare 4, culoare 5);
CSS
body {
background-image: radial-gradient(circle, red, yellow, green, purple,
blue);
}
Rezultat
18 / 93
Gradientele CSS permit afisarea unei tranzitii netede intre doua sau mai multe culori specificate.
In CSS exista 2 tipuri de gradiente:
- Gradiente lineare (coboara / in sus / stanga / dreapta / in diagonala)
- Gradienti radiali (definiti de centrul lor)
19 / 93
Taguri HTML: imagini, iframe, audio, video
Notiuni
Pentru a introduce o imagine in pagina web se foloseste tag-ul <img />. El este un tag nepereche
deoarece nu mai permite introducerea unui alt tag inauntrul lui (nu poate fi tag parinte). Pentru orice
imagine este nevoie de indicatia sursei imaginii prin atributul src (source), care poate fi un URL extern
sau calea locala din ierarhia fisierelor dintr-un website.
Elementul <iframe></iframe> permite introducerea cu usurinta a oricarui continut din alta pagina
HTML, de regula continut media.
Elementul HTML <audio></audio> este utilizat pentru redarea unui fisier audio pe o pagina web.
Atributul controls adauga controale audio, cum ar fi redare, pauza si volum. Elementul <source>
permite introducerea fisierelor audio alternative din care browserul poate alege. Browserul va folosi
primul format recunoscut, care poate fi un URL extern sau calea locala din ierarhia fisierelor dintr-un
website.
La fel ca elementul audio, tag-ul <video></video> permite redarea unor formate video in pagina web,
folosind aceleasi atribute de controls si <source>.
Exercitii
Exercitiul 1
Intra pe site-ul Unsplash si alege o poza preferata. Apasa click pe ea pentru a se deschide intr-o pagina
noua, si apoi click-dreapta > Copy Image Address.
Introdu link-ul copiat (prin paste) in atributul src al tagului imaginii img din fereastra HTML pentru a
introduce orice imagine iti doresti in pagina web.
Poti modifica dimensiunile originale ale pozei folosind proprietatile width SAU height in CSS ale tag-
ului de imagine. Imagine fiind un dreptunghi este suficient sa modifici doar una dintre proprietati si
cealalta se va modifica proportional.
HTML
<img src="https://images.unsplash.com/photo-1511029029301-60680e65f7c7?
ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2734&q=80"
/>
20 / 93
CSS
img {
width: 120px;
}
Rezultat
Exercitiul 2
Intra pe site-ul Youtube si cauta un video care iti place.
Apasa butonul de Share, si apoi butonul din casuta embed. Copiaza tot textul si pune-l in fereastra HTML
din website-ul tau. Astfel vei insera un video in pagina ta web.
Poti observa faptul ca, la fel ca elementul imagine, acest element este de tipul <iframe> cu acelasi
atribut src care indica sursa video-ului.
HTML
<iframe width="560" height="315"

src="https://www.youtube.com/embed/oSq5FlmYyCQ" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>
21 / 93
Rezultat
Exercitiul 3
Intra pe SoundHelix si alege una dintre melodii.
Copiaza URL-ul melodiei din bara browser-ului si introdu-o in tag-ul source in atributul src.
HTML
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-
1.mp3" type="audio/mp3">
</audio>
22 / 93
Rezultat
Resurse
Ce este HTML, CSS si JS
HTML alaturi de Caveman Lectia 1
HTML alaturi de Caveman Lectia 2
Lista completa de tag-uri HTML
23 / 93
Proprietati CSS ale elementelor
Notiuni
Dupa cum am observat in exemplele anterioare, fiecarui element HTML i se poate aplica cate un stil
propriu prin proprietati CSS. Din specificatia W3C, fiecare element are un stil implicit care este important
atunci cand vrem sa modificam si sa suprascriem stilurile elementelor, fortandu-le sa se comporte in alt
fel.
Cele mai utilizate proprietati CSS ale unui element definesc:

pozitia pe pagina web - position
vizibilitatea - visibility
display-ul - display
lungimea si inaltimea - width si height
culoarea textului - color
culoarea de fundal - background
bordura - border
marginile fata de celelalte elemente - margin-left, margin-top, marginn-right si margin-
bottom
Toate proprietatile CSS ale elementelor se pot gasi aici.
24 / 93
Atunci cand pozitionam un element relativ la alte elemente ale paginii web trebuie sa avem in vedere ceea
ce se cheama model de cutie (box model) - pe care fiecare element HTML il respecta. Toate
elementele HTML pot fi considerate ca niste cutii.
Modelul cutiei CSS este in esenta o cutie care se infasoara in jurul fiecarui element HTML. Se compune
din: margini, borduri, padding-uri si continutul real din interiorul elementului. Imaginea de mai jos
ilustreaza modelul cutiei:
Explicatia diferitelor parti:

Continut - continutul cutiei, unde apar text, imagini sau alte elemente
Padding - creaza o zona transparenta in jurul continutului
Bordura - granita care se intinde intre padding si continut
Margine - creaza o zona transparenta dupa bordura, de regula distantand elementele intre ele
Exercitii
Exercitiul 1
Intra pe Codepen.
In fereastra HTML, pune un element div gol.
In fereastra CSS, folosind atributele width si height, atribuie o inaltime si lungime de 80px pentru
elementul tau div pentru a deveni patrat.
Folosind background-color, pune-i o culoare patratului tau.
25 / 93
HTML
<div></div>
CSS
div {
width: 80px;
height: 80px;
}
Rezultat
Exercitiul 2
Pentru a vedea efectele modelui cutie, adauga inca 2 elemente div in fereastra HTML, fiecare continand
un text. Vei observa faptul ca toate patratele au acelasi stil datorita CSS-ului, in care sintaxa spune sa se
aplice acelasi stil la toate elementele de tipul div.
Adauga o bordura de 3px solida rosie, o margine sus si jos de 20px si un padding de 10px.
Exista o serie de scurtaturi pentru a aplica margini si padding-uri. De exemplu daca definim:
padding: 25px 50px 75px 100px;
top padding = 25px

right padding = 50px
bottom padding = 75px
left padding = 100px
26 / 93
padding: 25px;
top padding = 25px

right padding = 25px
bottom padding = 25px
left padding = 25px
La fel functioneaza si pentru margini. Mereu directia este in ordinea acelor de ceas: SUS DREAPTA JOS
STANGA.
HTML
<div>patrat 1</div>
<div>patrat 2</div>
<div>patrat 3</div>
CSS
div {
width: 80px;
height: 80px;
border: 3px solid red;
margin-top: 20px;
padding: 10px;
}
Rezultat
27 / 93
Selectori CSS, clase si id-uri
Notiuni
Am observat anterior cum putem aplica diverse stiluri pe un element. Atunci cand am pus mai multe
elemente de acelasi tip div, toate au avut aceleasi stil. Daca vrem totusi sa aplicam stiluri diferite pe
elemente diferite, CSS-ul ne ajuta cu conceptele de clasa si id.
Id-urile si clasese sunt nume date elementelor ca atribute HTML. Ele se definesc ca id="nume-id" si
class="nume-clasa" pe elementul HTML si #nume-id si .nume-clasa in CSS.
Singura diferenta intre id si clasa este faptul ca id-ul este unic intr-o pagina HTML, pe cand mai
multe elemente pot avea aceeasi clasa (si implicit acelasi stil CSS). Orice element poate avea mai multe
clase definite, despartine prin spatiu.
Exercitii
Exercitiul 1
Construieste un patrat mov de 80px. Apoi fa-l cerc folosind proprietatea border-radius. Un patrat
devine cerc atunci cand are colturile rotunjite la 50% sau cand valoarea colturilor este egala cu jumatatea
inaltimii sale (in acest caz 40px).
Creeaza inca un div in fereastra HTML. Vei observa ca acum ai 2 cercuri de aceeasi dimensiune si de
aceeasi culoare.
Pentru a colora diferit cercurile, fiecare trebuie sa aiba cate un nume diferit si pentru asta vei folosi
atributul HTML de id. Pune in HTML cate un id denumit diferit pentru fiecare div.
In CSS, poti schimba culorile fiecarui cerc folosindu-te de numele din HTML. Coloreaza al doilea cerc
folosind proprietatea linear-gradient invatata anterior.
HTML
<div id="mov"></div>
<div id="gradient"></div>
28 / 93
CSS
#mov {
width: 80px;
height: 80px;
border-radius: 40px;
}
#gradient {
width: 80px;
height: 80px;
background-image: linear-gradient(yellow, red);
}
Rezultat
Exercitiul 2
Adauga inca 2 cercuri in HTML si coloreaza-le in rosu. Pentru asta este suficient sa pui atributul class la
fiecare cu valoarea cerc-rosu.
In CSS pune pe clasa cerc-rosu culoarea de fundal red pentru a le face rosii. Vei observa ca ambele
cercuri care au aceeasi clasa vor fi la fel.
Cercurile stau fix unul sub altul, pune o distanta intre fiecare dintre ele folosind in CSS proprietatea
margin-bottom (pentru a pune marginea de jos). Alege ce distanta vrei tu in pixeli.
29 / 93
HTML
<div class="cerc-rosu"></div>
CSS
#mov {
width: 80px;
height: 80px;
margin-bottom: 70px;
}
#gradient {
width: 80px;
height: 80px;
background-image: linear-gradient(yellow, red);
}
.cerc-rosu {
width: 80px;
height: 80px;
background-color: red;
}
30 / 93
Rezultat
Exercitiul 3
Pune o bordura albastra solida ultimului cerc folosind in CSS proprietatea border. Ai grija doar ca ultimul
cerc sa aiba bordura, nu si cel de dinainte. Pentru acest lucru poti pune un id unic si separat pentru
ultimul cerc cu valoarea bordura.
HTML
<div class="cerc-rosu" id="bordura"></div>
CSS
#bordura {
border: 5px solid blue;
}
31 / 93
Rezultat
Resurse
Generator Gradiente
Homer Simpson
Frankenstein
Rainbow Mountains
Cubul Rubik
Animatii de baza CSS
Joc selectori CSS
Joc Target CSS
Joc X si O
32 / 93
Transformari ale elementelor folosind CSS
Notiuni
Proprietatea de transformare in CSS aplica o transformare 2D sau 3D unui element. Această proprietate
permite rotirea, scalarea, mutarea sau inclinarea elementelor (si multe altele).
Cele mai cunoscute transformari 2D sunt rotirea (rotate), scalarea (scale) sau inclinarea
(skew). Ele pot fi folosite pentru a oferi interactivitate paginii web si pentru a construi animatii.
In CSS exista conceptul de pseudoclase implicite in specificatiile W3C. Cea mai conoscuta pseudoclasa
este :hover si care defineste actiunea trecerii cursorului mouse-ului peste un element.
Combinand transformarile si actiunea de hover, putem obtine o serie de efecte pentru pagina web si
pentru a semnala utilizatorului o serie de actiuni pe care le poate face in pagina (de exemplu sa apese pe
link-uri).
Exercitii
Exercitiul 1
Construieste un patrat mov si unul verde cu ajutorul claselor. Folosind proprieteatea transform: skew ,
transforma patratul mov oblic cu 10 grade.
Folosind proprietatea transform: rotate, roteste patratul verde cu 30 grade.
HTML
<div class="patrat mov"></div>

<div class="patrat verde"></div>
CSS
.patrat {
width: 200px;
height: 200px;
}
.mov {
transform: skew(10deg);
}
.verde {
background-color: green;
33 / 93
transform: rotate(30deg);
}
Rezultat
Exercitiul 2
Construieste 3 patrate de culori diferite folosind clase.
Aplica transformarile doar la trecerea cursorului peste fiecare patrat in parte folosind atributul hover
atunci cand aplici CSS pe cate o clasa, de exemplu .mov:hover.
Folosind modelul de mai sus, aplica transform: skew, transform: rotate si transform: scale
doar atunci cand se face HOVER. Pune cursorul mouse-ului peste fiecare patrat ca sa vezi cum se
transforma.
HTML
<div class="patrat mov"></div>

<div class="patrat verde"></div>
<div class="patrat galben"></div>
CSS
.patrat {
width: 200px;
height: 200px;
}
.mov {
34 / 93
}
.verde {
background-color: green;
}
.galben {
background-color: yellow;
}
.mov:hover {
transform: skew(10deg);
}
.verde:hover {
transform: rotate(30deg);
}
.galben:hover {
transform: scale(2);
}
Rezultat
Resurse
Transformari 2D folosind CSS
Transformari 3D folosind CSS
35 / 93
Structura de fisiere a unui website
Notiuni
Fiecare website respecta o structura standard care face parte din bunele practici in construirea oricarei
pagini web. Vom incepe sa construim local un website. Primul pas este sa creem cate un fisier pentru
fiecare dintre cele 3 parti: HTML, CSS si JavaScript.
Toate paginile HTML au extensia .html, toate paginile in care vom scrie CSS au extensia .css si toate
paginile care tin cod JavaScript au extensia .js.
Prima pagina a oricarui website se denumeste index.html si este un standard pentru ca orice browser
sa stie de unde incepe fiecare website urcat pe Internet. Imaginile locale se vor pune intr-un folder
denumit images pentru usurinta conceperii website-ului.
Ierarhia de fisiere a unui website arata asa:
├── index.html
├── style.css
├── scripts.js
└── images
└── image-1.png
Aditional, atunci cand un website creste in complexitate si exista mai multe tipuri de fisire HTML, CSS si
JavaScript sau alte librarii externe, se pot crea sub-folodere separate pentru fiecare dintre ele, iar
warhitectura site-ului poate arata in acest fel:
├── pages
└── about.html
└── services.html
└── contact.html
├── styles
└── style.css
└── lib.css
├── scripts
└── myscripts.js
└── lib.js
└── images
36 / 93
Pentru a scrie cod avem nevoie de un editor text. Cel mai usor de folosit editor text este Sublime Text 3.
Acesta se downloadeaza si instaleaza pentru a fi folosit. Alternativ, se poate folosi Notepad++.
Avantajul in a folosi editoare de text moderne este faptul ca ele recunosc tipul de cod scris si
aplica culori diferite elementelor pentru a usura scrierea codului. In plus, ele ofera posibilitatea de
a semnala erorile de sintaxa.
Cel mai simplu mod de a crea fisierele de baza a oricarui site este sa creem un fisier .txt si apoi sa ii
schimbam denumirea. Pentru a vedea rezultatul oricarei pagini HTML putem sa o deschidem in orice
browser web (Chrome, Safari, IE).
Daca codul HTML este interpretat in regula, toate tag-urile HTML ar trebui sa se interpreteze conform
specificatiilor si sa obtinem:
37 / 93
Taguri principale: HTML, HEAD si BODY
Notiuni
Orice pagina HTML are o structura standard formata din tagul de identificare a tipului de document
DOCTYPE si cele 3 tag-uri esentiale, <html></html>, <head></head> si <body></body>.
<!DOCTYPE html> - specificatia W3C prin care se defineste o pagina HTML

<html></html> - tagul parinte care defineste o pagina HTML
<head></head> - tagul in care se incarca meta-tag-uri si librarii externe
<body></body> - tagul in care se cuprinde toata informatia dintr-o pagina web
Sintaxa si structura oricarei pagini web este standard pentru ca fiecare browser sa poata interpreta
fiecare tag HTML conform specificatiilor.
38 / 93
Exercitii
Exercitiul 1
Creaza un folder cu numele site-ului tau.
Deschide Sublime Text 3 si creeaza un fisier nou care cheama index.html si salveaza-l in folderul creat
anterior. Acolo va fi prima pagina a site-ului. Pune tag-urile de <html></html>, <head></head> si
<body></body> pentru a incepe structura paginii.
La fel cum am facut in exercitiile trecute, pune in HTML un titlu folosind tag-ul <title></title>, un
paragraf si o lista, fiind atent ca ele sa fie continute in interiorul tag-ului <body></body>.
Pentru a comenta anumite linii de cod HTML sau a insera explicatii in pagina, se poate scrie orice text
intre simbolurile . Comentariile nu vor aparea in pagina web, ci doar in fisierul codului.
39 / 93
HTML
<!DOCTYPE html>
<html>
<head>
<title>Site-ul meu</title>
</head>
<body>

<h1>Acesta este un site despre programare web</h1>

<p>Pentru a construi o pagina web ai nevoie de:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Exercitiul 2
Creaza un alt fisier numit style.css unde vei pune tot restul CSS-ului site-ului tau.
La fel cum am facut in exercitiile trecute, creaza un patrat si un cerc de culori diferite. HTML-ul il vei scrie
in fisierul index.html si CSS-ul il vei scrie in style.css.
Pentru a avea access la stilul din CSS si pentru ca pagina HTML sa stie de unde sa aplice stilurile, trebuie
sa importi fisierul in HTML in interiorul tag-ului <head></head> folosind un tag de <link />.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<h1>Acesta este un site despre programare web</h1>

<p>Pentru a construi o pagina web ai nevoie de:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
40 / 93
<div class="patrat"></div>
<div class="cerc"></div>
</body>
</html>
CSS
.patrat {
width: 200px;
height: 200px;
}
.cerc {
width: 200px;
height: 200px;
border-radius: 50%;
}
Rezultat
Pentru a vedea rezultatul si a te asigura ca fisierul CSS a fost importat, deschide pagina index.html in
browser.
41 / 93
Formulare: butoane, input-uri, select-uri
Notiuni
In orice website exista o serie de elemente comune formularelor. Ele se folosesc in completarea si
transmiterea de informatii catre server, spre exemplu atunci cand intram intr-un cont de mail sau
cumparam o pereche de tenisi de pe un website.
Cele mai folosite elementele de formular sunt:
<form></form> - formular
<button></button> - butoane
<select></select> - select-uri
<input /> - intrari
Tag-ul input poate fi de mai multe tipuri, in functie de atributul type definit in HTML:
un input de tip text - se poate scrie text in interiorul sau
un input de tip password - se poate scrie text insa este securizat
un input de tip color - se comporta ca un colorpicker
un input de tip date - va afisa un calendar
un input de tip range - va afisa un slider
un input de tip checkbox - va afisa o casuta selectabila
Exercitii
Exercitiul 1
Pune in index un buton folosind tag-ul <button>, un input folosind tag-ul <input> de tip text si un
select folosind tag-ul <select> si in interiorul lui optiunile folosind tag-ul <option>.
Stilizeaza butonul cum iti place tie si pune-i o culoare de fundal, margini si bordura.
HTML
<button>Apasa-ma</button>
<input type="text" />
<select>
<option disabled selected hidden>Alege fructul tau preferat:</option>
<option>Banane</option>
<option>Cirese</option>
<option>Portocale</option>
</select>
42 / 93
CSS
button {
color: white;
font-size: 30px;
padding: 10px;
border: 3px dotted yellow;
}
Exercitiul 2
Insereaza 5 elemente diferite definite de tag-ul input. Folosind atributul type, pune in pagina:
un input de tip checkbox
un input de tip password
un input de tip color
un input de tip date
un input de tip range
HTML
<input type="checkbox" />

<input type="password" />
<input type="color" />
<input type="date" />
<input type="range" />
Resurse
Tipuri de inputuri
Tag-ul select
43 / 93
Linkuri si legaturi intre paginile web
Notiuni
Un website are de obicei mai multe pagini web legate intre ele sau link-uri catre pagini externe. Acest
lucru se poate realiza prin tag-ul <a></a> (anchor = legatura).
Atributul href al tag-ului indica locatia (calea locala sau un URL extern) unde ar trebui sa duca link-ul.
De regula in interiorul unui tag de link poate sta orice tip de informatie: text, o poza, un video etc.
Exercitii
Exercitiul 1
Folosind tag-ul <a>, pune un link in pagina catre orice pagina web, de exemplu <a
href="https://google.com"></a>.
Pentru a deschide link-ul intr-o pagina separata, foloseste atributul target="_blank" in interiorul
tagului <a> de mai sus.
HTML
<a href="https://google.com">Du-ma catre Google</a>

<a href="https://google.com" target="_blank">Du-ma catre Google intr-o
pagina separata</a>
Exercitiul 2
Insereaza o imagine in pagina folosing tag-ul <img />. Pune un link poza, mutand elementul <img /> in
interiorul elementului de link <a></a>.
<a href="https://images.unsplash.com/photo-1511029029301-60680e65f7c7?
ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2734&q=80">
<img src="https://images.unsplash.com/photo-1511029029301-60680e65f7c7?
ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2734&q=80"
/>
</a>
44 / 93
Exercitiul 3
In folderul cu site-ul tau, mai creaza o pagina HTML, denumeste-o despre-mine.html in care pune un
alt heading <h1>. Pune un link din index catre a 2a pagina folosind tag-ul de link <a>.
Folosind exemplul de mai sus, pune un link in pagina despre-mine pentru a veni inapoi la index.
HTML index.html
<a href="despre-mine.html">Despre mine</a>
HTML despre-mine.html
<a href="index.html">Inapoi la index</a>
45 / 93
Selectori CSS si specificitatea lor
Notiuni
Pseudo-clasele si pseudo-elementele sunt o serie de specificatii CSS care ne ajuta sa stilizam
anumite stari ale elementelor sau sa selectam anumite proprietatin ale elementelor HTML.
Cele mai cunoscute pseudo-clase se aplica starilor tag-ului <a>. Pseudo-clasa :hover se poate aplica si
la celelalte tag-uri HTML.
a:link {
/* link nevizitat - implicit */
}
a:hover {
/* cursor peste link */
}
a:active {
/* link selectat */
}
a:visited {
/* link vizitat */
}
Pseudo-clasele se pot folosi pentru a selecta copiii unui anumit tag.
ul li:first-child {
/* primul element dintr-o lista */
}
ul li:last-child {
/* ultimul element dintr-o lista */
}
ul li:nth-child(3) {
/* al 3-lea element dintr-o lista */
}
ul li:nth-child(odd) {
/* elementele cu ordine impara dintr-o lista */
}
ul li:nth-child(even) {
/* elementele cu ordine para dintr-o lista */
}
ul li:nth-child(2n+1) {
/* elementele cu ordinea care respecta formula 2n+1 dintr-o lista */
}
ul li:not(.galben) {
/* elementele care nu au clasa "galben" dintr-o lista */
}
46 / 93
Pseudo-elementele ne ajuta sa selectam continutul unui tag. Ele nu se regasesc in structura HTML ci
apartin implicit de fiecare element HTML.
p::after {
/* insereaza continut inainte de fiecare paragraf */
}
p::before {
/* insereaza continut dupa fiecare paragraf */
}
p::first-letter {
/* selecteaza prima litera a fiecarui paragraf */
}
p::first-line {
/* selecteaza primul rand a fiecarui paragraf */
}
Lista completa de pseudo-clase si pseudo-elemente se ragseste aici.
Specificitatea selectorilor este un concept foarte important atunci cand definim stiluri CSS. Am observat
faptul ca elementele HTML pot contine si alte elemente in interiorul lor, ele denumindu-se parinte -
copil.
Conform specificatiilor de cascada ale CSS, stilul unui parinte se va propaga si copiilor implicit, daca nu
este specificat altfel. De aceea, specificitatea selectorilor ne ajuta sa stim cum sa definim corect stilurile
CSS si sa avem un cod curat si usor de inteles.
Specificitatea CSS este setul de reguli aplicate selectorilor CSS pentru a determina ce stil se
aplica unui element. Cu cat este mai specific un stil CSS, cu atat este mai mare valoarea
punctuala si este mai probabil sa se aplice stilul elementului.
De la cea mai slaba la cea mai puternica specificitate, stilul CSS se aplica astfel:
. La nivel de tag - aplica CSS pe toate elementele de tipul h1
h1 {
....
}
47 / 93
. La nivel de clasa - aplica CSS pe toate elementele cu clasa cerc
.cerc {
....
}
. La nivel parinte - copil - aplica CSS pe toate elementele copil p ale unui div
div p {
....
}
. La nivel de clasa + element - aplica CSS pe toate elementele de tipul div care au si clasa cerc
div.cerc {
....
}
. La nivel de id - aplica CSS pe toate elementele cu id-ul albastru
#albastru {
....
}
. La nivel id + element - aplica CSS pe toate elementele de tipul div care au si id-ul albastru
div#albastru {
....
}
Exista multe tipuri de combinatii de specificitate care se pot aplica elementelor, incluzand
pseudo-clase si pseudo-elemente. Specificitatea fiecarui selector se poate afla folosind acest
website.
48 / 93
Exercitii
Exercitiul 1
Insereaza o lista cu 5 elemente. Adauga o clasa listei si coloreaza elementele din 2 in 2 din lista cu cate o
culoare diferita.
HTML
<ul class="fructe">
<li>mere</li>
<li>pere</li>
<li>cirese</li>
<li>banane</li>
<li>capsuni</li>
</ul>
CSS
ul.fructe li:nth-child(odd) {
color: yellow;
}
ul.fructe li:nth-child(even) {
color: blue;
}
Exercitiul 2
Insereaza 3 paragrafe. Coloreaza prima litera a fiecarui paragraf care nu are clasa "yellow" cu alta
culoare.
HTML
<p class="blue">Paragraf 1</p>

<p class="yellow">Paragraf 2</p>
<p class="green">Paragraf 3</p>
CSS
p:not(.yellow)::first-letter {
color: blue;
}
49 / 93
Proprietati avansate CSS
Notiuni
La nivel de CSS exista foarte multe optiuni de stilizare conform specificatiilor care ne ajuta sa contruim
design-uri de site-uri complexe.
Implicit, baza oricarui element sta in pozitionarea si afisarea lui pe o pagina web. Pentru acest lucru avem
proprietati precum position si display. Toate elementele in ordinea lor scrisa in fisierul HTML se
pozitioneaza incepand cu coltul STANGA-SUS al paginii (acesta fiind punctul 0 al axei de coordonate pe o
pagina web).
Display
Reprezinta proprietatea specifica comportamentul afisajului (tipul cutiei) al unui element.
block - latimea elementului este dimensionata de parinte si poate avea width si height setate.
Elementele de tip block se vor aseza unele sub celelalte
inline - inaltimea este determinata de continut si nu poate avea width si height setate.
Elementele de tip inline se vor aseza unele dupa celelalte
inline-block - o combinatie intre cele 2, poate avea width si height setate. Elementele de tip
inline-block se vor aseza unele dupa celelalte
Position
Reprezinta proprietarea specifica pozitiei unui element pe pagina web, pornind de la limitele elementului
in sus(top), dreapta(right), jos(bottom) si stanga(left).
static - orice proprietati de sus, dreapta, de jos sau stanga sunt ignorate
absolute - elementul va fi "scos" din pozitia initiala de dispunere si pozitionat in raport cu cel mai
apropiat parinte pozitionat relativ
fixed - elementul va fi "scos" din pozitia initială si pozitionat in raport cu fereastra (window)
relative - elementul ramane in pozitia initială de dispunere, si se pot aplica proprietatile de sus,
dreapta, jos sau stanga pentru a fi repozitionat
Aceste lucruri pot fi confuze, asa ca vom evidentia cateva aspecte importante:
Elementele absolute si fixe nu fac parte din aspectul normal al documentului. Atunci cand
dimensiunile lor se schimba, numai elementele copilului lor sunt afectate. Exista o exceptie subtila,
aceea ca elementele pozitionate absolut pot provoca o bara de defilare (scroll - in directia fluxului
de continut pozitiv: implicit, spre dreapta sau in jos), iar acest lucru poate afecta aspectul altor
elemente din pagina.
Elemente statice si relative fac parte din aspectul normal al documentului. Cand aspectul lor
se schimba, la fel si elementele vecine din cadrul paginii.
Atunci cand sunt mutate prin proprietatile de sus, dreapta, jos sau stanga, elementele relative
nu afecteaza vecinii documentelor. In schimb, acei vecini se comporta ca elementul nu a fost
niciodata mutat din pozitia sa initiala. Exceptia de defilare (scroll) se aplica si aici.
50 / 93
Fonts
Reprezinta proprietati de stilizare ale textelor si a fonturilor folosite intr-o pagina.
font-family — familia din care face parte un font
font-size — marimea fontului
font-weight — grosimea fontului
font-style — stilul fontului (ex. inclinat sau oblic)
font-variant — daca fontul este afisat doar cu litere mici
text-align — alinierea textului (stanga, centru, dreapta)
text-decoration — decoratiuni ale textului (taiat, subliniat)
text-indent — indentarea primului cuvant al unui paragraf
text-shadow — stilul umbrei textului
text-transform — transformari ale textului (litere mari, litere mici)
letter-spacing — spatiul dintre fiecare litera
line-height — spatiul dintre fiecare linie de text
word-spacing — spatiul dintre fiecare cuvant
Exercitii
Exercitiul 1
Creaza 3 patrate de culori diferite folosind clase, cu cate un element <p></p> in interiorul lui cu cate un
text. Pune cate o marime diferita fiecarui paragraf folosind proprietatea font-size, aliniaza diferit textul
folosind proprietatea text-align, aplica-i decoratii si umbre folosind proprietatea text-decoration si
text-shadow si cuprinde spatii intre litere
HTML
<div class="patrat albastru">

<p>Aici este un patrat colorat cu text in el.</p>
</div>
<div class="patrat mov">
</div>
<div class="patrat galben">
</div>
51 / 93
CSS
.patrat {
width: 100px;
height: 100px;
}
.albastru {
background-color: blue;
}
.mov {
}
.galben {
}
.albastru p {
text-align: left;
text-decoration: underline;
letter-spacing: 5px;
}
.mov p {
text-align: center;
text-transform: uppercase;
letter-spacing: 10px;
}
.galben p {
text-align: right;
text-shadow: 0 1px 3px red;
font-style: italic;
}
Exercitiul 2
Include si aplica fonturi diferite pentru fiecare dintre cele 3 paragrafe. Intra pe site-ul Google Fonts si
alege 3 font-uri care iti place.
Intra pe pagina fiecaruia si apasa butonul + Select this font. Acest lucru va genera automat link-ul
de includere in pagina HTML. Repeta apasarea butonului pentru fiecare font ales.
Se va genera in sectiunea "Selected families - Embed" un link HTML pe care il poti copia si pune in tag-ul
<head> al paginii HTML inainte de includerea fisierului CSS.
Este foarte important ca fonturile sa fie incarcate inainte de fisierul CSS, altfel ele nu vor fi
afisate. Acest lucru se intampla deoarece browserul interpreteaza informatia web in ordinea
scrierii ei, astfel fonturile trebuie sa existe inainte de a fi folosite de fisierul CSS (care le va aplica
pe o serie de texte).
52 / 93
HTML
<head>
<link href="https://fonts.googleapis.com/css2?
family=Abril+Fatface&family=Indie+Flower&family=Pacifico&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
CSS
.albastru p {
font-family: 'Abril Fatface', cursive;
}
.mov p {
font-family: 'Indie Flower', cursive;
}
.galben p {
font-family: 'Pacifico', cursive;
}
Exercitiul 3
Vom construi un curcubeu din literele cuvantului MAGIC. Pentru asta creaza un element <div></div> cu
5 elemente <span></span> in interiorul sau. Coloreaza diferita fundalul fiecarui element <span>.
HTML
<div class="magic">
<span>M</span>
<span>A</span>
<span>G</span>
<span>I</span>
<span>C</span>
</div>
53 / 93
CSS
.magic {
font-size: 3em;
text-align: center;
color: #fff;
}
.magic span {
display: inline-block;
width: 19%;
padding: .8125rem;
}
.magic span:nth-child(1) { background: #ff4136; }
.magic span:nth-child(2) { background: #ff851b; }
.magic span:nth-child(3) { background: #2ecc40; }
.magic span:nth-child(4) { background: #0074d9; }
.magic span:nth-child(5) { background: #b10dc9; }
Resurse
Efecte ale textului
54 / 93
Animatii folosind CSS
Notiuni
CSS ofera posibilitatea de a construi animatii fara a fi nevoie de JavaScript, alte librarii externe sau
cunostinte avansate de grafica computerizata.
Proprietatile CSS care ne ofera posibilitatea de a construi animatii complexe sunt:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
O animatie permite unui element sa se schimbe treptat de la un stil la altul. Se pot modifica aproape toate
proprietatile CSS ale elementelor, de cate ori este nevoie.
Pentru a utiliza animatii CSS, trebuie mai intai speicficate cadrele cheie pentru animatie. Cadrele cheie
contin ce stiluri va avea elementul in anumite momente (intr-un interval de la 0% - reprezentand inceputul
animatiei pana la 100% - cadrul final al unei animatii).
Atunci cand se specifica stilurile CSS din regula @keyframes, animatia se va schimba treptat de la stilul
curent la stilul nou in anumite momente. Pentru ca o animatie sa functioneze, trebuie sa legam animatia
definita de un element HTML.
Exercitii
Exercitiul 1
Schimba culoarea de fundal al unui element in cadrul unei animatii. Mai intai animatia trebuie definita si
apoi aplicata elementului HTML. Creaza animatia schimbareCuloare . Animatia va dura 4 secunde si va
schimba treptat culoarea de fundal a elementului <div> de la rosu la galben.
HTML
<div></div>
55 / 93
CSS
/* Codul animatiei */
@keyframes schimbareCuloare {
from {background-color: red;}
to {background-color: yellow;}
}
/* Elementul caruia i se aplica animatia */

div {
width: 100px;
height: 100px;
animation-name: schimbareCuloare;
animation-duration: 4s;
}
Exercitiul 2
Creaza o animatie care sa schimbe in acelasi timp si culoarea de fundal si pozitia unui element in 5 cadre
definite, folosind procentele. Daca vrei ca animatia sa inceapa mai tarziu, poti folosi proprietatea
animation-delay.
HTML
<div></div>
CSS
@keyframes schimbareCuloarePozitie {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

div {
width: 100px;
height: 100px;
position: relative;
animation-name: schimbareCuloarePozitie;
56 / 93
animation-duration: 4s;
animation-delay: 2s;
}
Exercitiul 3
Creaza un element care la actiunea de :hover sa animeze cu un efect de "leagan". Foloseste
proprietatea animation-iteration-count pentru a indica de cate ori se va produce animatia si
prescurtarea tuturor proprietatilor animation.
Efectul de leagan se poate obtine translatand pozitia pe axa X a elementului folosind proprietatea
transform: translateX().
HTML
<div class="swing"></div>
CSS
@keyframes swing {
15% { transform: translateX(5px);}
30% { transform: translateX(-5px);}
65% { transform: translateX(-3px);}
100% { transform: translateX(0);}
}

.swing:hover {
width: 100px;
height: 100px;
animation: swing 1s ease;
animation-iteration-count: 1;
}
Resurse
W3S Animatii CSS
Efect de loading folosind animatii CSS
Butoane Animate
Efecte animate la hover
Animatii complexe folosind CSS
57 / 93
CSS Grid
Notiuni
CSS Grid este o tehnica CSS care permite dezvoltatorilor web sa creeze interfete complexe si adaptate la
toate rezolutiile mai usor. CSS Grid nu este in prezent un standard oficial (este o recomandare W3C), desi
a fost adoptată de majoritatea browserelor majore.
Cu ajutorul CSS Grid se pot crea design-uri asimetrice atat pe randuri cat si pe coloane si permite un cod
mai standardizat care funcționează în browsere. Unul dintre numeroasele beneficii este posibilitatea
usoara de a centra continutul atat orizontal cat si vertical.
In octombrie 2017, Chrome, Firefox, Safari si Edge au introdus specificatiile CSS Grid in browsere.
IE 10 si 11 accepta CSS Grid, dar cu o specificatie depasita. Pe mobil, toate browserele moderne
accepta CSS Grid, cu excepția Opera Mini și UC Browser.
Exercitii
Exercitiul 1
Utilizând CSS Grid creaza un rand de 5 elemente care au latimi egale. Acest lucru poate fi realizat
folosind proprietatea grid-template-columns: repeat (5, 1fr); pe parintele cu clasa
container.
Modifica cel de-al 2-lea div sa se intinda pe 2 coloane in loc de una. Trebuie doar sa adaugi grid-
column: 2/4; pe CSS-ul sau si sa schimbi containerul pentru a avea 6 coloane (creand astfel spatiu
pentru incă una).
HTML
<div class="container">
<div>
1
</div>
<div class="span-2">
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
58 / 93
5
</div>
</div>
CSS
.container {
display: grid;
grid-template-columns: repeat(6, auto);
}
.container div:nth-child(odd) {
background-color: aqua;
}
.container div:nth-child(even) {
background-color: aquamarine;
}
.span-2 {
grid-column: 2 / 4;
}
Rezultat
Exercitiul 2
Pentru a face o grila de 3x2 cu coloane egale, adauga inca un div in interiorul containerului si schimba
proprietatea containerului in grid-template-column: 1fr 1fr 1fr; . Acest lucru va face 3 coloane
egale, iar restul elementelor vor fi adaugate pe un rand nou.
Poti defini inaltimea fiecarui rand folosind grid-template-lines: 100px 200px;. Daca vrei ca toate
randurile sa aibă aceeasi inăltime, foloseste proprietatea grid-auto-lines.
Pentru a adauga spatii intre coloane si randuri, adauga grid-column-gap sau grid-row-gap.
Pentru ca coloanele sa aibă latimi incrementale (si nu este nevoie sa stii latimea lor absolută in pixeli),
foloseste grid-template-column: 1fr 2fr 3fr; si asa mai departe.
Schimba vizualizarea containerului de la coloane la randuri folosind JavaScript.
HTML
<button class="toggler">Toggle view</button>

<div>
1
</div>
59 / 93
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
</div>
CSS
.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 100px 200px;
grid-column-gap: 20px;
grid-row-gap: 10px;
}
}
}
.viewRows {
grid-template-columns: 1fr;
}
JS
const button = document.querySelector(".toggler");

const grid = document.querySelector(".container");
button.onclick = () => grid.classList.toggle("viewRows");
60 / 93
Rezultat
Exercitiul 3
Schimba inaltimea div-urilor de cate 30px fiecare folosind grid-template-columns: repeat (3,
30px); si fiecare rand de asemenea de 30px in inaltime folosind grid-auto-rows. Containerul trebuie
sa aiba definita o inaltime mai mare de 30px pentru a vedea cum se centreaza elementele in interiorul
sau.
Pentru a centra orizontal continutului containerului, foloseste proprietatea justify-content:
center;. Pentru a centra vertical continutului containerului, foloseste align-content: center;.
Pentru a pozitiona atat vertical si orizontal, la stanga, centru sau dreapta fiecare <div>, foloseste pe
fiecare element din interiorul containerului proprietatile justify-self si align-self - left |
center | right.
61 / 93
HTML
<div>
1
</div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
</div>
CSS
.container {
display: grid;
grid-template-columns: repeat(3, 30px);
background-color: beige;
grid-auto-rows: 30px;
grid-row-gap: 10px;
height: 100vh;
justify-content: center;
align-content: center;
}
border: 1px dotted red;
justify-self: end;
align-self: end;
}
border: 1px dotted red;
justify-self: start;
align-self: start;
}
62 / 93
Rezultat
Exercitiul 4
Construieste o grilă de 3x5. Se pot folosi numere fractionare atunci cand definim inaltimea sau latimea,
cum ar fi 1.4.
Fa cel de-al doilea element sa se intinda intre coloanele 2 si 4 folosind grid-column-start si grid-
column-end, si intre randurile 2 si 6 folosind grid-row-start si grid-row-end.
Construieste primul element de o inaltime de 5 randuri folosind varianta scurta a proprietatii grid-row
pentru a defini in acelasi timp de unde incepe si unde se termina.
HTML
<div class="tall">
1
</div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
<div>
63 / 93
7
</div>
<div>
8
</div>
<div>
9
</div>
<div>
10
</div>
<div>
11
</div>
<div>
12
</div>
<div>
13
</div>
<div>
14
</div>
<div>
15
</div>
</div>
CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1.4fr);
grid-row-gap: 10px;
}
}
}
.span-2 {
background-color: rebeccapurple !important;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 6;
}
64 / 93
.tall {
background-color: navajowhite !important;
grid-row: 2 / 7;
}
Cand o regula !important este utilizata pe o declaratie de stil CSS, aceasta declaratie
inlocuieste (suprascrie) orice alte declaratii. Desi tehnic !important nu are nicio legatura cu
specificitatea selectorilor, interactioneaza direct cu aceasta. Folosirea !important este totusi o
practica nerecomandata si trebuie evitata, deoarece ingreuneaza felul natural de comportament
CSS. Atunci cand doua declaratii contradictorii cu regula !important sunt aplicate aceluiasi
element, se va aplica declaratia cu o specificitate mai mare.
Rezultat
Exercitiul 5
Cel mai bun mod de a vedea cum functionează grid-template-areas este sa construim board-ul unui
jocului cu camere Cluedo folosind CSS Grid.
Vom avea o grilă 3x3 cu fiecare element reprezentand o camera. Pentru usurinta, pune la fiecare element
denumirea clasei numele camerei. Defineste proprietatea grid-template-areas pe elementul
container. Fiecare zona din grila va fi separata de un spatiu si cuprinsă intre " ".
In final vom defini zona pentru fiecare element folosind grid-area corespunzatoare.
65 / 93
HTML
<div class="kitchen">
kitchen
</div>
<div class="ballroom">
ballroom
</div>
<div class="conservatory">
conservatory
</div>
<div class="gaming-room">
gaming room
</div>
66 / 93
<div class="pool">
pool
</div>
<div class="billiard-room">
billiard room
</div>
<div class="library">
library
</div>
<div class="lounge">
lounge
</div>
<div class="hall">
hall
</div>
</div>
CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10px;
grid-template-areas:
"kitchen ballroom conservatory"
"gaming-room pool billiard-room"
"gaming-room pool library"
"lounge hall hall";
}
.container div {
border: 2px solid red;
}
.kitchen {
grid-area: kitchen;
}
.ballroom {
grid-area: ballroom;
}
.conservatory {
grid-area: conservatory;
}
.gaming-room {
grid-area: gaming-room;
}
.pool {
grid-area: pool;
}
.billiard-room {
grid-area: billiard-room;
67 / 93
}
.library {
grid-area: library;
}
.lounge {
grid-area: lounge;
}
.hall {
grid-area: hall;
}
Rezultat
Exercitiul 6
Putem face o serie de animatii folosind proprietatile CSS Grid.
Construieste o grilă de 3x3. Putem anima randurile, coloanele si spatiile dintre ele.
Defineste 2 animatii folosind @keyframes, care schimba dimensiunile si culorile elementelor. Animatia
resize va fi aplicata pe elementul container si animatia colorChange pe fiecare element din grid
(copii).
HTML
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
68 / 93
</div>
<div>
6
</div>
<div>
7
</div>
<div>
8
</div>
<div>
9
</div>
</div>
CSS
.container {
display: grid;
grid-row-gap: 10px;
animation: resize 3000ms ease infinite both;
}
animation: colorChange 3000ms ease infinite both;
}
animation: colorChange 1000ms ease infinite both;
}
@keyframes resize {
0% {
grid-template-rows: 1fr 1fr 1fr;
}
25% {
}
50% {
}
75% {
69 / 93
}
100% {
}
}
@keyframes colorChange {
0% {
}
25% {
background-color: greenyellow;
}
50% {
background-color: blueviolet;
}
75% {
background-color: papayawhip;
}
100% {
background-color: tomato;
}
}
Rezultat
70 / 93
Exercitiul 7
Pentru a simula un efect de inchidere a unei perdele, putem anima spatiile dintre coloane.
Construieste o grilă 2x1 cu coloane de dimensiuni egale. Definere o animatie folosind @keyframes care
modifica spatiul dintre coloanele. Aplica animatia curtain pe container folosind si un functie cubic-
bezier pentru o animatie lina.
HTML
<div>
1
</div>
<div>
2
</div>
</div>
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr;
animation: 0.7s curtain cubic-bezier(0.86, 0, 0.07, 1) 0.4s both;
}
}
}
@keyframes curtain {
0% {
grid-gap: 100vw;
}
100% {
grid-gap: 0;
}
}
71 / 93
Rezultat
Resurse
Articole
Tutorial CSS Grid 1
Tutorial CSS Grid 2
Tutorial CSS Grid 3
Animatii folosind CSS Grid
Exemple de folosire a CSS Grid
Experimente
25 Exemple folosind CSS Grid
Patrate colorate
Tabelul periodic al web-ului
Banda desenata 1
Banda desenata 2
Banda desenata 3
Jocuri
CSS Grid Garden
Grid Critters
72 / 93
CSS Bootstrap
Notiuni
CSS Bootstrap este o librarie de componente HTML cu CSS predefinti pentru a fi folosite in constructia
unei pagini web de la A-Z. Cu ajutorul Bootstrap putem realiza foarte usor structura unei pagini porning
de la componentele principale, bazandu-se pe clase predefinte si un sistem grid de 12 coloane.
Bootstrap este gandit in a oferi o flexibilitate foarte mare atunci cand interfetele trebuie realizate adaptive
la diverse rezolutii ale ecranelor (laptop, tableta sau telefon).
CSS Bootstrap este un framework web gratis si open-source. Bootstrap, numit initial Twitter
Blueprint, a fost dezvoltat de Mark Otto si Jacob Thornton la Twitter in 2011 ca cadru pentru a
incuraja o dezvoltare rapida a interfetelor web. Inainte de Bootstrap, diverse librarii externe au
fost utilizate pentru dezvoltarea interfetelor, ceea ce a dus la incoerente in design si o sarcina
grea de intretinere a CSS-ului. Versiunea curenta a CSS Bootstrap este 4.5.2.
Primul pas in integrarea Bootsrap este de a importa libraria externa CSS in elementul <head></head> al
paginii HTML si libraria JS pentru a avea access la functionalitati dinamice. In ambele cazuri Boostrap se
importa inainte de stilurile CSS ale noastre si script-urile JS realizate de noi.
<head>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min
.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
</head>
<body>
...


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.j
s" integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
73 / 93
</body>
Exercitii
Exercitiul 1
Vom incepe sa construim o pagina web simpla cu cateva componente. Pentru inceput vom aseza
elementele parinte pentru a face structura de baza care va cuprinde: un meniu, cateva sectiuni si un
footer.
Apoi vom incepe sa punem continut in fiecare dintre componente. Vom avea asadar:
<nav></nav> - elementul de navigatie / meniul
<section></section> - elemente parinte care ofera o structura logica a continutului
<div class="container"></div> - parintele cu clasa Bootstrap care se comporta ca un
container
<div class="row"></div> - este nevoie de un element care defineste un rand
<div class="col-12"></div> - cate un element pentru fiecare coloana pe care vrem sa o
inseram
<footer></footer> - elementul final al oricarei pagini web
HTML
<nav class="navbar navbar-inverse bg-transparent navbar-expand-lg fixed-

top">
<a class="navbar-brand" href="#">
<img src="https://www.jskids.ro/images/logos/jskids-logo.png"
height="40" alt="logo jskids" />
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav3"
aria-controls="navbarNav3"
aria-expanded="false"
aria-label="Toggle navigation">
<span>
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav3">

<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Link 1</a>
74 / 93
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<a class="btn btn-secondary btn-sm btn-round ml-md-3" href="#"
style="outline: none; display: inline-block;">Buton</a>
</div>
</div>
</nav>
<section class="sectiune-1">
<div class="row">

</div>
</div>
</section>
<div class="row">
</div>
</div>
</section>
<div class="row">
</div>
</div>
</section>
<footer>
<div class="row">
</div>
</div>
</footer>
75 / 93
Exercitiul 2
Vom incepe sa contruim coloanele site-ului si a pune elemente de Bootstrap inauntru lor. Vom pune un
titlu si un subtitlu in elementul cu clasa sectiune-1.
In elementul cu clasa sectiune-2 vom construi un rand cu 2 coloane si un rand cu 3 coloane sub
acesta.
Clasele col-12 col-lg-6 col-md-6 col-sm-12 reprezinta cat spatiu (1/2 din 12 coloane = 6) vor
ocupa 2 coloane dintr-un rand pe diverse rezolutii (large, medium, small).
Clasele col-12 col-lg-4 col-md-4 col-sm-12 reprezinta cat spatiu (1/3 din 12 coloane = 4) vor
ocupa 3 coloane dintr-un rand pe diverse rezolutii (large, medium, small).
Exista clase predifinite pentru a aseza fiecare element dupa bunul plac, de exemplu text-left, text-
center sau text-right pentru text. Pentru a observa comportamentul fiecarei coloane introduce cate
un paragraf, o imagine si cate 1 buton in fiecare ca si continut.
Regula de baza a ierarhiei componentelor este .container > .row > .column.
HTML
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 text-center">
<h1>Aici este site-ul meu</h1>
<h2>Creat de echipa JSKids</h2>
</div>
</div>
</section>

<div class="row">
<div class="col-12 col-lg-6 col-md-6 col-sm-12">
<p>un paragraf aici</p>
</div>
<img src="" class="img-fluid" />
</div>
</div>

<div class="row">
<div class="col-12 col-lg-4 col-md-4 col-sm-12 text-left">
<h3>Un buton</h3>
<button type="button" class="btn btn-primary">Primary</button>
</div>
76 / 93
<div class="col-12 col-lg-4 col-md-4 col-sm-12 text-center">
<h3>Un buton</h3>
<button type="button" class="btn btn-warning">Warning</button>
</div>
<div class="col-12 col-lg-4 col-md-4 col-sm-12 text-right">
<h3>Un buton</h3>
<button type="button" class="btn btn-dark">Dark</button>
</div>
</div>
</div>
</section>
Exercitiul 3
In elementul cu clasa sectiune-3 vom introduce un rand cu 4 coloane in care vom pune o serie de
elemente numite cards. Construieste inca un rand row cu o singura coloana in care vei introduce un
element de tip media. In cel de-al treilea rand introdu un element de tipul progress-bar.
HTML

<div class="row">

<div class="card">
<img src="https://images.unsplash.com/photo-1511029029301-
60680e65f7c7?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2734&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Aici putem insera ce fel de text
vrem</p>
<a href="#" class="btn btn-primary">Link catre undeva</a>
</div>
</div>
</div>

aici inca un element de tip card
</div>
</div>
77 / 93
</div>
</div>


<div class="row">
<div class="media">
<img src="https://images.unsplash.com/photo-1511029029301-
60680e65f7c7?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2734&q=80"
class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Acesta este un element media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel
metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>


<div class="row">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width:
25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
</div>
</div>
</section>
Lista completa a tuturor componentelor Bootstrap se regaseste aici.
Resurse
Documentatia oficiala CSS Bootstrap
Componente Bootstrap pentru site-uir
Exemple de template-uri CSS Bootstrap
78 / 93
Accessibilitate - A11y
Notiuni
Accesibilitatea web (prescurtat A11y) este practica incluziva de a asigura ca nu exista bariere care sa
impiedice interactiunea cu sau cu acces la site-urile de pe World Wide Web de catre persoane cu
dizabilitati fizice, dizabilitati situationale si restrictii socio-economice la latimea de banda si viteza. Cand
site-urile sunt corect proiectate, dezvoltate si editate, in general toti utilizatorii au acces egal la informatii
si functionalitati.
De exemplu, atunci cand un site este codat folosind tag-uri HTML semantice, cu etichete pentru imagini
si cu link-uri numite in mod semnificativ, acest lucru ajuta utilizatorii nevazatori care folosesc software
text-to-speech si / sau hardware text-to-Braille. Atunci cand textul si imaginile sunt mari si / sau mari,
este mai usor pentru utilizatorii cu vedere slaba sa citeasca si sa inteleaga continutul. Atunci cand
linkurile sunt subliniate (sau altfel diferentiate), precum si colorate, acest lucru asigura ca utilizatorii de
blind-colors vor putea sa le observe. Atunci cand legaturile si zonele cu clic pot fi mari, acest lucru ajuta
utilizatorii care nu pot controla un mouse cu precizie. Atunci cand paginile nu sunt codificate intr-un mod
care impiedica navigarea doar cu tastatura sau cu un singur dispozitiv de acces la un singur switch, acest
lucru ajuta utilizatorii care nu pot utiliza un mouse sau chiar o tastatura standard. Atunci cand
videoclipurile sunt inchise din titlu sau este disponibila o versiune de limba a semnelor, utilizatorii surzi si
cei cu dificultati de auz pot intelege videoclipul. Atunci cand efectele intermitente sunt evitate sau
optionale, utilizatorii predispusi la convulsii cauzate de aceste efecte nu sunt expusi riscului. Si atunci
cand continutul este scris intr-un limbaj simplu si ilustrat cu diagrame instructionale si animatii, utilizatorii
cu dislexie si dificultati de invatare sunt mai capabili sa inteleaga continutul. Cand site-urile sunt
construite si intretinute corect, toti acesti utilizatori pot fi cazati fara a scadea capacitatea de utilizare a
site-ului pentru utilizatorii care nu au dizabilitati.
Nevoile carora isi propune accesul Web includ:
Vizuale: Deficiente vizuale, inclusiv orbire, diverse tipuri comune de vedere scazuta si vedere
slaba, diverse tipuri de orbire;
Motorii / mobilitate: de ex. dificultate sau incapacitate de a folosi mainile, inclusiv tremor,
incetinirea muschilor, pierderea controlului muscular fin etc., din cauza unor afectiuni precum boala
Parkinson, distrofie musculara, paralizie cerebrala, accident vascular cerebral;
Auditive: Surditate sau deficiente de auz, inclusiv indivizi cu dificultati auditive;
Crizele: crize foto-epileptice cauzate de stroba vizuala sau de efecte intermitente.
Cognitive si intelectuale: dizabilitati de dezvoltare, dificultati de invatare (dislexie, discalculie etc.)
si dizabilitati cognitive (PTSD, Alzheimer) de diverse origini, afectand memoria, atentia, abilitatile
de rezolvare a problemelor si logica etc.
In 1999, Web Accesibility Initiative, un proiect al World Wide Web Consortium (W3C), a publicat
Ghidul de accesibilitate pentru continutul web WCAG 1.0. In acest moment, exista versiunea
acceptata 2.1 aici.
79 / 93
De ce este importanta accesibilitatea web ?
Definitia teoretica a accesibilitatii este proiectarea unui produs sau servicii pentru persoanele cu
dizabilitati majore, care este una dintre cele mai mari conceptii gresite, deoarece, de asemenea, ar
trebui sa acopere handicapuri temporare, cum ar fi un brat rupt, conexiune la internet de mare
viteza sau probleme de mediu
Atunci cand ne gandim la construirea de interfete, ar trebui sa ne gandim la A11y ca una dintre cele
mai inalte prioritati in dezvoltarea de software si intelegerea persoanei din spatele ecranului,
comportamentul sau atunci cand folosesti produsul tau, limitarile si cum poti sa le abordezi.
In prezent, exista aproape 1 miliard de oameni pe lume care sufera de o forma de dizabilitate una
dintre cele mai mari probleme in ceea ce priveste a11y este contrastul de culoare, deoarece se
estimeaza ca 253 de milioane de persoane traiesc cu deficiente de vedere, cu 36 de milioane de
persoane nevazute si 217 de milioane care au deficienta de vedere moderata pana la severa
Momentan, punerea in aplicare a standardelor A11y nu este considerata obligatorie, este
considerata un bonus al produsului si este restrictionata in principal din motive financiare
Toata lumea din aceasta lume imbatraneste (da, chiar si programatorii), fapt care ii determina pe
oameni sa inceapa sa sufere de dizabilitati minore si sa afecteze modul in care interactioneaza cu
interfetele
Un produs / serviciu trebuie dezvoltat pentru a putea fi folosit de toti oamenii, nu numai de un grup
selectat
Momentan, singurele reglementari in ceea ce priveste a11y sunt de catre UE si sunt doar in relatie
cu site-urile web publice si administrative si in viitor, ar trebui sa ne asteptam din ce in ce mai multe
cerinte legale cu privire la A11y vor fi aplicate dezvoltarii de software
Cum includem tehnici de accesibilitate in website-uri ?
Incepeti cu ghidurile WCAG oficiale care definesc documentatia necesara implementarii celor 3
niveluri ale A11y: A, AA si AAA
Abordarea a11y poate fi impartita in partea vizuala (contrast de culori, animatii etc.), partea
semantica (etichete HTML, etichete aria etc.) si partea interactiunii (cum ar fi interactiunea
tastaturii)
Testati problemele site-ului, executand un audit Lighthouse - inclusiv cele A11y
Adaugati etichete pentru fiecare imagine din website
<img src="ciresi.png" alt="Ciresi infloriti">
Verificati contrastul de culoare al paginii (nivelul AA WCAG 2.0 necesita un raport de contrast de
cel putin 4,5: 1 pentru text normal si 3: 1 pentru text mare)
80 / 93
81 / 93
Asociati etichetele de culoare cu textul corespunzator (de exemplu, succesul si erorile)
Folositi fonturi citibile (persoanele care sufera de dislexie nu pot distinge b de p de anumite fonturi)
Fonturile trebuie sa aiba cel putin 14px (0,875rem)
Utilizati tag-uri semantice HTML
82 / 93
Subliniati doar linkurile din site-ul dvs., deoarece acesta este comportamentul implicit
Utilizati ordinea logica a tag-urilor h1 - h6
Utilizati elemente HTML in loc de text pe imagini

Asigurati-va ca aveti max. 80 de caractere pe linie
Asigurati-va ca aveti suficiente indentari si distante intre elemente
Dezactivati animatiile si efectele, deoarece unele persoane sufera de tulburare vestibulara sau
sensibilitate la miscare (puteti utiliza @media prefers-reduced-motion: reduce in CSS)
.animation {
-webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {

.animation {
animation: none;
-webkit-animation: none;
}
}
83 / 93
Permiteti controlul slide-urilor si ca aruselelor si impiedicati redarea automata a video-urilor
Utilizati videoclipuri HTML in loc de GIF-uri animate
Faceti tastatura accesibila (adaugati tabindex in ordine naturala, adaugati Tab, Enter / ESC,
suport pentru tasta space
Adaugati focus si outline catre linkuri si butoane
* {
outline: 1px dotted blue;
}
:focus {
outline: 1px dotted blue;
}
Adaugati titluri catre linkuri si chei de access (accesskeys)

Zona de apasare pe mobil/tableta trebuie sa fie de cel putin 44x44px
Resurse
Website-uri
Documentatia oficiala WCAG
A11y Project
Global Accessibility Awarness Day
Directive Europene
Articole
Latura umana a accesibilitatii
Accesibilitate pentru programatorii web
Ghidul complet de invatare a A11y
Diferentele intre cele 3 nivele A11y
Animatii web pentru probleme de miscare
Aria Labels
Meniuri accesibile
Tastatura navigabila folosind JS
Text in Vorbire folosind JS
Instrumente de testare
Verificarea Contrastului
Axe Core
WebAIM
Lighthouse
Total11y
Verificarea A11y
84 / 93
Pa11y
Necesare A11y
W3C A11y
Experimente
Raspuns la limbajul semnelor folosind Alexa si Webcam
Scris de la tastatura folosind miscari video
Text pentru imagini generat automat
Colectie de libarii pentru A11y
85 / 93
Hello JavaScript
Notiuni
JS - JavaScript este un limbaj de programare imperativ, compilat la rulare, bazat pe evenimente, cu
functii ca obiecte primare. Motoarele JavaScript au fost utilizate initial doar in browserele web, dar acum
sunt utilizate si in servere, prin intermediul Node.js. JavaScript nu este acelasi limbaj de programare cu
Java. Cea mai noua specificație de limbaj este ECMAScript 2020 (sau ES11).
Versiunea initiala de JavaScript a fost dezvoltata, in doar 10 zile, de catre Brendan Eich de la
Netscape Communications Corporation în 1995, sub numele de Mocha, redenumita apoi
LiveScript, dupa care, la trei luni de la lansare, limbajul a fost numit JavaScript si standardizat
oficial în 1997.
Sintaxa JavaScript pentru scrierea functiilor este asemanatoare oricarui alt limbaj de programare:
Cu ajutorul JavaScript putem face paginile web interactive. Asta înseamna faptul ca o sa avem diverse
comportamente cum ar fi:
animatii complexe
comunicarea cu serverul
functionalitati speciale (exemplu: nu poti accesa o pagina fara sa fii autentificat)
calcule matematice
86 / 93
Putem introduce JavaScript în pagina noastră HTML în mai multe feluri, cel mai popular fiind linkarea unui
fișier JavaScript extern, ca în secțiunea de mai jos:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js"></script>
</head>

</html>
O lunga perioada de timp, JavaScript nu a oferit programatorilor web posibilitatea de a avea o sintaxa
scurta pentru operatii frecvente, cum ar fi selectarea unui copil al unui element cu o clasa specifica. Cu
acest scop au aparut un numar de biblioteci frecvent utilizate intre 2005 si 2015. Una dintre cele mai
populare biblioteci este jQuery a carei caracteristica principala este, la fel cum zice si numele, este sa
execute "query-uri" in JavaScript pentru a selecta elemente.
VanillaJS este un nume dat limbajului JavaScript care se refera la utilizarea JavaScript simplu,
fara librarii suplimentare, cum ar fi jQuery sau folosirea unor framework-uri moderne.
O comparatie simpla intre JS si jQuery poate fi vazuta in exemplele de mai jos.

Exemplul 1
Pentru a selecta toate elementele cu clasa "rosu":
// VanillaJS
var rosii = document.getElementsByClassName("rosu");
// jQuery
var rosii = $(".rosu");
Exemplul 2
Pentru a selecta elementul cu clasa "pagina" din interiorul elementului cu clasa "container", daca există
un singur element container:
// VanillaJS
var pagina = document.querySelectorAll(".container")
[0].querySelectorAll(".rosu");
// jQuery
var pagina = $(".container .rosu");
87 / 93
După cum puteti vedea, translatia intre cele doua modalitati nu este mereu completa. De asemenea,
sintaxa jQuery este mult mai apropiata de cea CSS, folosind aceleasi reguli, in mod frecvent:
un nume de clasa este precedat de punct "."
un nume de id este precedat de diez "#"
un copil direct este precedat de ">" etc
Exercitii
Exercitiul 1
In folderul unde ai toate fisierele din site-ul tau, creaza un fisier nou numit scripts.js. Acolo vei pune
tot ce tine de JavaScript pentru site.
Include inainte de inchiderea tag-ului </body> din fisierul HTML libraria jQuery. Sub acest aceasta
librarie, include si fisierul tau scripts.js nou creat.
In interiorul fisierului JavaScript scripts.js adauga functia $(document).ready(function(){} care
va prelua tot codul JavaScript atunci cand se va incarca site-ul tau. Adauga o functie alert pentru a sti
daca fisierul JavaScript s-a incarcat cu succes.
HTML
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
<script type="text/javascript" src="scripts.js"></script>
JS
$(document).ready(function() {
// aici va sta tot codul JavaScript
alert("succes!");
})
Exercitiul 2
Pune un buton in pagina folosind elementul <button>.
In fisierul de JavaScript nou creat, construieste o functie cu numele alerteaza care va afisa un alert la
apasarea butonului.
Acum leaga functia creata de butonul din HTML folosind atributul onclick al butonului.
88 / 93
HTML
<button onclick="alerteaza()">Apasa-ma</button>
JS
alerteaza = function() {
alert('Sunt un buton apasat');
}
})
Exercitiul 3
Mai pune un buton langa cel anterior pe care sa scrii Albastru. Acesta va colora un element din site-ul tau
in culoarea albastra.
Construieste un patrat pe ii vei schimba culoarea de fundal si adauga-i clasa element.
Creaza o functie numita coloreazaAlbastru in fisierul de JavaScript, prin care vei schimba culoarea de
fundal al patratului cu clasa element.
Acum leaga functia creata de butonul din HTML folosind atributul onclick al butonului Albastru.
HTML
<button onclick="alerteaza()">Apasa-ma</button>
<button onclick="coloreazaAlbastru()">Va colora in Albastru</button>
JS
alerteaza = function() {
alert('Sunt un buton apasat');
}
coloreazaAlbastru = function() {
$('.element').css('background-color', 'blue');
}
})
89 / 93
Exercitiul 4
Mai adauga 2 butoane, unul pe care sa scrie Mov si unul Verde.
Creaza 2 functii in fisierul de JavaScript folosind modelul de dinainte, numite coloreazaMov si
coloreazaVerde. Butoanele vor schimba culoarea de fundal pentru acelasi element cu clasa element
in mov si verde atunci cand vei apasa pe ele.
Acum leaga functiile create de butoanele din HTML folosind atributul onclick.
HTML
<button onclick="coloreazaAlbastru()">Va colora in Albastru</button>

<button onclick="coloreazaMov()">Va colora in Mov</button>
<button onclick="coloreazaVerde()">Va colora in Verde</button>
JS
coloreazaAlbastru = function() {
$('.element').css('background-color', 'blue');
}
coloreazaMov = function() {
$('.element').css('background-color', 'purple');
}
coloreazaVerde = function() {
$('.element').css('background-color', 'green');
}
})
Exercitiul 5
Adauga un buton care va ascunde patratul atunci cand este apasat. Creaza o functie numita
ascundePatrat si in fisierul JavaScript modifica display-ul patratului cu clasa element, folosind
modelul de mai sus.
HTML
<button onclick="ascundePatrat()">Va ascunde patratul</button>
90 / 93
JS
ascundePatrat = function() {
$('.element').css('display', 'none');
}
})
Exercitiul 6
Adauga un buton care la apasare va construi cate un patrat nou. Creaza functia creazaPatrat si
folosind functia jQuery append, insereaza cate un patrat nou in elementul <body> al website-ului.
HTML
<div class="element"></div>
<button onclick="creazaPatrat()">Creaza Patrat</button>
CSS
.element {
width: 50px;
height: 50px;
background-color: blue;
}
JS
creazaPatrat= function () {
$("body").append('<div class="element"></div>');
}
})
91 / 93
Resurse
JavaScript | MDN
Javascript | Wikipedia
Prototype inheritance
jQuery homepage
Carte You Don't Know JS
Exercitii You Don't Know JS
92 / 93
Final
93 / 93

JSKids Hello World PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

JSKids Hello World PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Hello World

Introducere in tehnologiile Web

Ce este un browser web?

JavaScript a fost dezvoltat initial de catre Brendan Eich de la Netscape Communications

Exista 2 tipuri de tag-uri:

var x, y, z; // Declararea variabilelor

Cum incepem sa scriem cod?

Aici este o lista completa a tuturor numelor culorilor disponibile in HTML.

<p>Aici este un paragraf verde</p>

<h1>Acesta este un heading mov</h1>

Acum modifica-l intr-un gradient radial cu 5 culori folosind background-image: radial-

<iframe width="560" height="315"

Cele mai utilizate proprietati CSS ale unui element definesc:

Toate proprietatile CSS ale elementelor se pot gasi aici.

Explicatia diferitelor parti:

top padding = 25px

top padding = 25px

<div class="patrat mov"></div>

<div class="patrat mov"></div>

<!DOCTYPE html> - specificatia W3C prin care se defineste o pagina HTML

<h1>Acesta este un site despre programare web</h1>

<h1>Acesta este un site despre programare web</h1>

<input type="checkbox" />

<a href="https://google.com">Du-ma catre Google</a>

<a href="despre-mine.html">Despre mine</a>

<a href="index.html">Inapoi la index</a>

Pseudo-clasele se pot folosi pentru a selecta copiii unui anumit tag.

Lista completa de pseudo-clase si pseudo-elemente se ragseste aici.

. La nivel de id - aplica CSS pe toate elementele cu id-ul albastru

<p class="blue">Paragraf 1</p>

font-size — marimea fontului

font-weight — grosimea fontului

font-style — stilul fontului (ex. inclinat sau oblic)

font-variant — daca fontul este afisat doar cu litere mici

text-align — alinierea textului (stanga, centru, dreapta)

text-decoration — decoratiuni ale textului (taiat, subliniat)

text-indent — indentarea primului cuvant al unui paragraf

text-shadow — stilul umbrei textului

text-transform — transformari ale textului (litere mari, litere mici)

letter-spacing — spatiul dintre fiecare litera

line-height — spatiul dintre fiecare linie de text

word-spacing — spatiul dintre fiecare cuvant

<div class="patrat albastru">

/* Elementul caruia i se aplica animatia */

/* Elementul caruia i se aplica animatia */

/* Elementul caruia i se aplica animatia */

<button class="toggler">Toggle view</button>

const button = document.querySelector(".toggler");

button.onclick = () => grid.classList.toggle("viewRows");

<nav class="navbar navbar-inverse bg-transparent navbar-expand-lg fixed-

<div class="collapse navbar-collapse" id="navbarNav3">

Lista completa a tuturor componentelor Bootstrap se regaseste aici.

<img src="ciresi.png" alt="Ciresi infloriti">

Utilizati elemente HTML in loc de text pe imagini

@media (prefers-reduced-motion: reduce) {

Adaugati titluri catre linkuri si chei de access (accesskeys)

O comparatie simpla intre JS si jQuery poate fi vazuta in exemplele de mai jos.

<button onclick="coloreazaAlbastru()">Va colora in Albastru</button>

<button onclick="ascundePatrat()">Va ascunde patratul</button>

S-ar putea să vă placă și