Curriculum
Curs Tehnologii Web
Introducere in dezvoltarea web
0/2
HTML
0/7
CSS
0/12
DOM (Document Object Model)
0/8
JavaScript
0/23
OOP (Object-Oriented Programming)
0/5
Extra
0/9
Introducere
Tehnologii WEB
Tehnologiile WEB au evoluat semnificativ din anii 1990, până în prezent cand sunt la fel de importante ca și orice altă tehnologie și afectează modul în care interacționăm cu lumea digitală.
Iată câteva etape importante în evoluția tehnologiilor web:
-
HTML (1991) – Primul limbaj de marcă dezvoltat de Tim Berners-Lee în 1991, pentru a crea pagini web simple.
-
CSS (1996) – O limbă de stiluri care a fost dezvoltată pentru a separa prezentarea de conținutul web.
-
JavaScript (1995) – Un limbaj de programare pentru web care a adus interactivitate pe paginile web.
-
AJAX (2005) – O tehnologie care a permis actualizarea dinamică a conținutului web fără a fi necesară încărcarea întregii pagini.
-
HTML5 (2014) – O versiune actualizată a limbajului de marcă, care a adus o serie de caracteristici noi, inclusiv suport pentru multimedia și dispozitive mobile.
-
CSS3 (2011) – O versiune actualizată a limbii de stiluri care a adus o serie de caracteristici noi, inclusiv animații și gradienturi.
-
JavaScript modern (2015-prezent) – JavaScript a evoluat semnificativ în ultimii ani și este acum folosit în mod extensiv pentru a crea aplicații web complexe.
Diagrama evoluției tehnologiilor web
- HTML este prescurtarea pentru HyperText Markup Language, care este un limbaj de marcare folosit pentru a crea pagini web.
- Acesta definește structura și semantica conținutului unei pagini web, inclusiv text, imagini, link-uri și alte elemente.
- HTML utilizează tag-uri sau etichete pentru a marca diferite elemente ale paginii web, precum antetul, paragrafele, imagini și liste.
- Aceste tag-uri sunt închise pentru a indica sfârșitul elementului și sunt interpretate de către browser pentru a afișa paginile web într-un mod organizat și structurat.
De exemplu, o pagină web poate avea o structură HTML simplă, cu un antet (head), un corp (body) și un subsol (footer), fiecare dintre acestea fiind definit prin tag-uri specifice. Conținutul textului și imaginile pot fi plasate în cadrul acestor elemente.
- CSS este prescurtarea pentru Cascading Style Sheets, care este un limbaj de stilizare folosit pentru a descrie aspectul și prezentarea unei pagini web scrise în HTML sau alt limbaj de marcare.
- CSS permite web designerilor să definească aspectul și stilul paginii web, inclusiv culorile, fonturile, dimensiunile, marginile, imagini de fundal și multe alte aspecte ale prezentării.
- Acesta permite separarea conținutului și structurii paginii de aspectul și stilul acesteia, ceea ce face mai ușor pentru designeri să modifice sau să actualizeze aspectul paginilor web.
- CSS utilizează selecții și declarații pentru a defini stilurile. Selecțiile sunt utilizate pentru a identifica elementele HTML care vor fi stilizate, iar declarațiile sunt utilizate pentru a specifica stilurile aplicate acestor selecții.
De exemplu, o selecție poate fi utilizată pentru a identifica toate titlurile h1 de pe o pagină, iar o declarație poate fi utilizată pentru a specifica fontul, dimensiunea și culoarea textului acestora.
- JS este prescurtarea pentru JavaScript, care este un limbaj de programare folosit pentru a crea pagini web interactive.
- JavaScript permite dezvoltatorilor web să creeze pagini web dinamice, care reacționează la interacțiunea utilizatorilor, cum ar fi acțiuni de click, trageri, selectări și altele.
- Acesta poate fi utilizat pentru a adăuga interactivitate paginilor web, cum ar fi efecte de animație, validare de formular, încărcarea datelor în fundal, afișarea de alerte sau prompt-uri și multe altele.
- Acesta poate fi inclus în paginile web prin intermediul etichetelor <script> în fișierele HTML sau poate fi încărcat dintr-un fișier separat.
Exemplu
See the Pen Untitled by DianaScurtu (@dianascurtu) on CodePen.
- În acest exemplu, am definit un mesaj de bun venit cu id-ul
welcome-messageși l-am stilizat folosind CSS pentru a-i seta fontul, dimensiunea, culoarea și alte proprietăți vizuale. - Am folosit de asemenea și CSS transitions pentru a crea animația de apariție și dispariție.
- În JS, am utilizat funcția
setInterval()pentru a schimba vizibilitatea mesajului la fiecare 2 secunde. - Am definit două clase CSS,
showșihide, pe care le aplicăm mesajului în funcție de starea curentă. Prin alternarea între cele două clase, mesajul va apărea și va dispărea la fiecare 2 secunde.