Cursul Web Essentials with HTML & CSS

Acest curs oferă cursanților o înțelegere temeinică a tehnologiilor fundamentale care stau la baza oricărui site – HTML și CSS. Cursanții învață cum să structureze corect paginile web folosind HTML, să adauge conținut multimedia, linkuri și formulare, precum și să stilizeze paginile utilizând CSS. Cursul acoperă concepte CSS de bază și avansate, inclusiv culorile, tipografia, gruparea elementelor, modelul box și Flexbox, dezvoltând astfel abilități de realizare a paginilor web statice, funcționale și vizual bine organizate.

Scopul cursului

Scopul cursului este ca participanții să dobândească abilități practice de creare a paginilor web statice prin combinarea HTML și CSS, să înțeleagă principiile de bază ale funcționării webului – inclusiv domeniile, protocolul HTTP, funcțiile browserelor și ale serverelor web – și să învețe cum să utilizeze instrumente precum Notepad++ și Chrome DevTools. După finalizarea cursului, participanții vor fi capabili să creeze pagini estetice și funcționale de calitate, inclusiv site-uri e-commerce simple, cu navigare, imagini, text, butoane și formulare de contact.

Cursul Web Essentials with HTML & CSS vă va răspunde la întrebări:

Ce este HTML și de ce este el baza fiecărui site?

Dacă ne imaginăm o pagină web ca pe o casă, HTML este scheletul acesteia – pereții, podelele și acoperișul. El oferă structura de bază pentru tot ceea ce vedem pe internet. Indiferent dacă creați un blog, un ziar online sau un magazin e-commerce, HTML – HyperText Markup Language – este primul limbaj care determină ce va fi afișat utilizatorului: titluri, paragrafe, imagini, linkuri și formulare.

Termenul HyperText indică modul în care paginile sunt conectate prin linkuri, în timp ce Markup Language înseamnă că conținutul este marcat cu taguri speciale care îi explică browserului cum să-l afișeze. Atunci când dați clic pe butonul „Adaugă în coș” de pe un site, HTML este cel care determină existența acelui buton. În cadrul cursului Web Essentials with HTML & CSS veți învăța cum HTML construiește baza fiecărei pagini și de ce înțelegerea lui reprezintă primul pas către implicarea serioasă în dezvoltarea web.

Ce sunt elementele HTML și de ce sunt ele importante pentru interacțiunea cu utilizatorul?

HTML este alcătuit din elemente – acestea sunt blocurile de construcție prin care definim ce se află și unde pe pagină. Există elemente pentru afișarea textului, pentru inserarea imaginilor și a conținutului video, pentru crearea listelor și tabelelor, precum și elemente speciale pentru realizarea formularelor.

De ce sunt importante formularele? Pentru că ele reprezintă locul unde utilizatorul interacționează cu site-ul. Atunci când un client introduce adresa sa sau numărul cardului, el folosește de fapt un formular HTML. Când caută produse sau lasă un comentariu – este tot vorba despre un formular.

În cadrul cursului veți parcurge toate elementele HTML de bază, de la cele mai simple până la cele complexe, și veți vedea cum se combină pentru a forma o unitate funcțională. De asemenea, veți învăța cum formularele stau la baza fiecărui magazin online și cum permit comunicarea cu utilizatorul.

Ce este CSS și cum aduce viață unei pagini web?

Dacă HTML este scheletul unei pagini, CSS este ceea ce îi conferă stil, culoare și caracter. CSS (Cascading Style Sheets) stabilește identitatea vizuală a site-ului – de la alegerea fonturilor și a culorilor, până la aranjamentul elementelor și efectele la trecerea mouse-ului peste ele.

Imaginați-vă că deschideți un site e-commerce în care totul este doar text negru pe fundal alb. Pagina funcționează, dar nu este atrăgătoare. CSS transformă această bază într-un magazin profesional: produsele primesc carduri clare și organizate, navigarea este evidențiată, iar butoanele de cumpărare au culori care invită la acțiune.

În cadrul cursului veți învăța cum să separați conținutul (HTML) de prezentare (CSS), ceea ce ușurează întreținerea site-ului și permite ca același conținut să aibă un aspect complet diferit cu doar câteva linii de cod.

Cum funcționează selectorii CSS și ce permit ei?

Selectorii reprezintă inima CSS-ului. Ei determină asupra căror elemente se aplică regulile. Puteți alege toate titlurile, doar anumite linkuri sau o anumită secțiune a paginii și puteți seta pentru ele culori, fonturi sau dimensiuni. În practică, asta înseamnă că puteți crea ușor o regulă prin care toate titlurile produselor vor avea aceeași dimensiune, iar butoanele „Adaugă în coș” vor avea întotdeauna aceeași culoare și formă. Cu cât folosiți selectorii mai precis, cu atât veți controla mai rapid și mai eficient aspectul site-ului.

În cadrul cursului veți învăța despre tipurile de selectori, de la cei care aleg elemente după nume, până la cei care țintesc elementele în funcție de poziția sau clasa lor. Veți exersa pe exemple reale, învățând cum să gestionați pagini complexe cu numeroase elemente.

Ce este modelul box din CSS și de ce trebuie să-l cunoască orice dezvoltator web?

Fiecare element de pe pagină – fie că este un buton, o imagine sau un bloc de text – se comportă ca o casetă. Această casetă are spațiu interior (padding), margine (border), spațiu exterior (margin) și dimensiuni (width și height). Acesta este celebrul box model.

Înțelegerea acestui model este esențială pentru realizarea unor aranjamente ordonate. De exemplu, doriți ca chenarele produselor de pe pagină să aibă același spațiu între ele și să arate simetric. Dacă nu știți cum funcționează padding și margin, rezultatul poate fi un aspect neîngrijit și nealiniat. În cadrul cursului veți stăpâni în detaliu box model și veți învăța cum să-l folosiți pentru ca pagina să arate și să funcționeze profesional, clar și optimizat pentru utilizatori.

Cum se construiește layoutul unei pagini?

Un aranjament bine organizat al elementelor face diferența dintre un site amator și unul profesional. Nu este suficient ca conținutul să existe – acesta trebuie să fie dispus astfel încât să faciliteze navigarea și cumpărăturile pentru utilizator.

CSS oferă diferite tehnici pentru crearea layoutului: de la poziționarea simplă și proprietatea float, până la metode moderne folosite în dezvoltarea actuală. Atunci când combinați aceste abordări cu elemente HTML pentru grupare (div, span), obțineți control complet asupra aspectului paginii. În cadrul cursului veți învăța, pas cu pas, cum să creați primul layout funcțional – de la organizarea secțiunilor de bază ale site-ului, până la finalizarea paginii unui produs care arată clar și atractiv.

Cum se stilizează elementele de bază ale unui site?

Titluri, tabele, liste, linkuri, formulare – toate acestea formează componentele de bază ale unei pagini web. Stilizarea lor face ca site-ul să arate consecvent, profesional și vizual atractiv. În cadrul cursului veți exersa cum să stilizați textul pentru a fi lizibil și ușor de remarcat, cum să arate clar listele de categorii, cum să fie formularele de introducere a datelor clare și ușor de utilizat și cum să fie integrate frumos imaginile și conținutul multimedia în design.

Prin exemple practice din contextul e-commerce, veți învăța să creați o pagină de produs care combină toate aceste elemente: titlu, imagine, preț, tabel cu caracteristici și buton de cumpărare – toate într-un stil care motivează utilizatorul să rămână pe site și să cumpere.

Conținutul cursului

Modulul 1 – Bazele HTML-ului: Structură, conținut și elemente multimedia

• Introducere în HTML
• Elemente HTML
• Structura de bază a unui document HTML
• Elemente HTML pentru formatarea textului
• Rânduri și spații
• Entități și limbaje în HTML
• Liste
• Tabele
• Linkuri
• Imagini
• Multimedia

Modulul 2 – Interacțiunea cu utilizatorul: Formulare în HTML

• Formulare
• Elemente de intrare HTML: Poarta către interacțiunea cu utilizatorul
• Elemente de intrare: Mai mult decât text și parolă
• Elemente de formular care nu sunt de intrare

Modulul 3 – Fundamentele CSS: Stil, spațiu și structură

• CSS box model – width i height
• CSS box model – borders
• CSS box model – padding
• CSS box model – margin
• Magia stilurilor: Cum modelează CSS paginile web
• Selectorii CSS de bază: Cum să stilizați elementele cu precizie
• Selectorii bazați pe relații
• Modelul box din CSS – width și height
• Modelul box din CSS – borders
• Modelul box din CSS – padding
• Modelul box din CSS – margin

Modulul 4 – Bazele designului web: De la aspect la stil

• Bazele aranjării elementelor HTML
• Elemente pentru grupare
• Crearea primului layout
• Poziționarea elementelor – proprietatea position
• Poziționarea elementelor – proprietățile float și clear
• Proprietăți CSS suplimentare care influențează fluxul elementelor HTML
• Culorile pe web
• Stilizarea textului
• Stilizarea imaginilor
• Stilizarea listelor
• Stilizarea tabelelor

Competențe

Modulul 1 – Bazele HTML-ului: Structură, conținut și elemente multimedia

Cursanții înțeleg conceptele de bază ale HTML-ului și scopul acestui limbaj în crearea paginilor web. Ei recunosc componentele de bază ale mediului web și înțeleg noțiunile fundamentale legate de internet, inclusiv diferența dintre site-urile web și aplicațiile web.

Cursanții știu să creeze un document HTML valid, cu o structură de bază, și să utilizeze titluri, paragrafe, liste și tabele pentru organizarea conținutului.

Cursanții știu să formateze textul în HTML și să gestioneze spațiile, rândurile și caracterele speciale folosind elemente și entități HTML corespunzătoare.

Cursanții știu să adauge și să utilizeze linkuri, imagini și conținut multimedia (audio și video) pe paginile web.

Modulul 2 – Interacțiunea cu utilizatorul: Formulare în HTML

Cursanții înțeleg rolul formularelor HTML în interacțiunea cu utilizatorii și folosesc elemente de intrare de bază și avansate (text, parolă, checkbox, radio, select, textarea) pentru colectarea datelor.

Cursanții aplică elemente de formular care nu sunt de intrare, inclusiv fieldset, legend și label, pentru o organizare și o accesibilitate mai bună.

Cursanții creează pagini funcționale pentru înregistrare și formulare de contact, cu câmpuri și butoane de trimitere corect structurate.

Cursanții combină elementele învățate pentru a realiza formulare web clare și interactive.

Modulul 3 – Fundamentele CSS: Stil, spațiu și structură

Cursanții înțeleg modul în care CSS modelează paginile web și aplică selectori de bază și relaționali pentru a viza elementele dorite.

Cursanții folosesc modelul box din CSS pentru a defini lățimea și înălțimea elementelor.

Cursanții aplică proprietățile border, padding și margin pentru a controla spațiul și aspectul elementelor.

Modulul 4 – Bazele designului web: De la aspect la stil

Cursanții înțeleg metodele de bază de aranjare a elementelor HTML și aplică diverse proprietăți CSS pentru a controla fluxul elementelor, inclusiv position, float și clear.

Cursanții utilizează elemente HTML pentru grupare și creează structuri de bază ale paginilor, combinând blocurile de conținut în secțiuni clare.

Cursanții aplică culori, fonturi, stiluri de text și stilizează imagini, liste și tabele pentru a obține o ierarhie vizuală și o estetică plăcută a paginii.

Cursanții combină aranjarea și stilizarea pentru a crea pagini e-commerce coerente și funcționale, incluzând pagina principală, afișarea mai multor produse, pagina unui singur produs, formularul de autentificare și coșul de cumpărături.

Cunoștințe anterioare necesare

Pentru înțelegerea acestui curs nu sunt necesare cunoștințe anterioare.

Software necesar și cerințe tehnice

Pentru acest curs nu este necesar niciun software în afară de platforma de învățare DL pe care participanții o au la dispoziție și pe care o pot accesa de pe diferite dispozitive.