Programare Web Front End

Partea I-a

Victor BUCATĂ

Facultatea de Inginerie Electrică - U.P.B.

Proiectul HTML
I Proiectul valorează 20 de puncte
I Tema proiectului trebuie să fie din domeniul ingineriei electrice
I Trebuie să cont, ină minim 3 fis, iere HTML s, i 1 fis, ier CSS
I Trebuie să-mi trimitet, i tema aleasă până la data de 3 noiembrie 2019
la adresa proiecthtml@yahoo.com
I Trebuie să-mi trimitet, i proiectul până la data de 14 decembrie 2019
la adresa proiecthtml@yahoo.com
1 Elemente introductive
Ce este hipertextul?
Ce sunt HTML, CSS s, i JavaScript?
Momente cheie ı̂n proiectarea Web

2 Ce metode avem pentru a crea site-uri web?

Cod direct
Editoare WYSIWYG
Website Builder
Content Management System

3 Sintaxa limbajului HTML

Not,iuni fundamentale
Elementele HTML
Lista tagurilor HTML pe categorii

4 Exemple HTML
World Wide Web

I Internet = World Wide Web?

I WWW partea cea mai interesantă, mai inovatoare, cea mai vizibilă,
cu dezvoltarea cea mai rapidă a Internetului.
I ”navigarea pe Internet” = utilizarea World Wide Web-ului.
I Dar conceptul care stă la baza WWW (hipertextul) nu este chiar as, a
de nou...
Ce este hipertextul?
Ce este hipertextul?
I Ted Nelson, filozof, sociolog s, i informatician american introduce
termenii de hypertext” s, i hypermedia”. El defineşte ı̂n 1965
” ”
hipertextul (text non-linear) ca fiind un ”material scris sau grafic
interconectat ı̂ntr-o manieră complexă care ı̂n mod convenţional nu
poate fi reprezentat pe hârtie. El poate conţine cuprinsuri ale
propriului său conţinut şi relaţiile dintre diverse părţi componente;
poate de asemenea să conţină adnotări, adăugiri şi note de subsol
pentru cei care doresc să-l examineze”.

I Metodă de organizare a informaţiilor ı̂n care datele sunt memorate

ı̂ntr-o reţea de noduri şi legături, putând fi accesată prin
intermediul browserelor şi manipulată de un editor.
Ce crede azi Ted Nelson despre hipertext (v. visible connections):
https:
//www.youtube.com/watch?reload=9&v=hMKy52Intac
Un vizionar al WWW - Vannevar Bush - 1945
Vannevar Bush (n. 11 martie 1890) a fost un inginer american cunoscut
pentru activitatea sa ı̂n domeniul computerelor analogice, pentru rolul său
politic ı̂n dezvoltarea bombei atomice, fiind unul din oamenii important, i ai
Proiectului Manhattan s, i pentru Memex, un concept (apărut ı̂n anii 1930)
pe care se bazează ret, eaua de internet WWW-World Wide Web apărută
zeci de ani mai târziu (eseul ”As we may think” 1945).
Definition (WWW)
World Wide Web-ul este o reţea globală de documente, imagini şi alte
resurse legate logic prin hyperlink-uri şi adresate prin URI-uri (Uniform
Resource Identifier).

Definition (HTML)
HyperText Markup Language (Limbajul de marcare a hipertextului) este
limbajul ı̂n care sunt scrise majoritatea paginilor web.

Definition (HTTP)
HyperText Transfer Protocol (Protocol de transmitere a hipertextului)
este protocolul principal de acces la WWW.

Definition (Programarea Web Front End)

Programarea Web Front End este programarea paginilor web ı̂n care
codul este vizibil pe partea de client s, i este rulat pe el.
Ce este WWW? (continuare)
I Browserele pentru WWW precum MS Edge, MS Internet Explorer,
Mozilla Firefox, Opera, Apple Safari şi Google Chrome permit
utilizatorilor să navigheze de la o pagină web la alta prin intermediul
hyperlink-urilor incluse ı̂n documente.
I Aceste documente pot conţine orice combinaţie de date: grafică,
sunete, text, video, multimedia şi conţinut interactiv.
I Comparativ cu mediul tipărit, World Wide Web-ul a permis
descentralizarea informaţiei la scară mare
Începuturile WWW
I 12 noiembrie 1990: Bazându-se pe conceptul de hipertext creat de
Ted Nelson s, i pe ideile lui Vannevar Bush, Tim Berners-Lee de la
CERN, cu ajutorul lui Robert Cailliau publică o propunere de a
construi un ”Proiect Hypertext” denumit ”WorldWideWeb”
(cunoscut şi ca ”W3”) ca fiind o reţea de documente hypertext care
să fie văzute de browsere folosind o arhitectură de tip client-server.
I Până la sfârşitul lui 1990, Berners-Lee construieşte toate
instrumentele necesare pentru un Web funcţional: primul
browser web (care era ı̂n acelaşi timp şi editor web), primul server
web şi prima pagină web care constituia proiectul.
I 1992: 20 de servere web ı̂n ı̂ntreaga lume
I 1993: apare browserul Mosaic
I de atunci a cunoscut o dezvoltare spectaculoasă
Primul server web

Acest calculator (NeXT) a fost folosit de Tim Berners-Lee de la CERN şi a

devenit primul server Web din lume.
Ce spune Tim Berners-Lee ı̂n 2018 despre invent, ia sa

Tim Berners-Lee, celebrul inventator britanic al World Wide Web-ului,

vine cu o idee considerată revoluţionară şi propune o platforma
descentralizată numită Solid unde fiecare utilizator să-şi poată gestiona
datele şi să poate decide dacă vrea să le partajeze cu cineva.
Berners-Lee a spus de multe ori că este ı̂ngrozit de ce a ajuns internetul
şi de faptul că oamenii nu mai au deloc control asupra datelor personale.
Cele mai utilizate browsere - 2019
Ce sunt HTML, CSS s, i JavaScript?
Ce este HTML?
HTML este limbajul de marcare folosit pentru descrierea cont, inutului
paginilor web.
I Tim Berners-Lee pune bazele lui ı̂n anul 1989 pentru comunicarea
pe Internet ı̂ntre fizicienii de la CERN.
I HTML este un limbaj bazat pe SGML (Standard Generalized Markup
Language) standardizat ı̂n 1986.
I HTML nu este un limbaj de programare, e un limbaj de marcare.
I Un limbaj de marcare este format dintr-un set de etichete (taguri)
de marcare.
I Cont, inutul documentelor HTML este descris folosind etichete
(taguri) HTML.
I Fiecare etichetă (tag) HTML descrie un tip de cont, inut diferit.
Ce este CSS?
I CSS este acronimul de la Cascading Style Sheets (Foi de Stil ı̂n
Cascadă).
I CSS descrie modul ı̂n care sunt afis, ate elementele HTML pe
ecran, hârtie sau alte suporturi.
I CSS cres, te eficient, a. Poate controla aspectul mai multor pagini
Web foarte us, or.
I Foile de stil externe sunt stocate ı̂n fis, iere CSS.
Ce este JavaScript?
I JavaScript este un limbaj de programare de script (codul este
vizibil utilizatorului), interpretat ı̂n browser, dezvoltat de Netscape s, i
Sun s, i cu care pot fi create pagini web interactive.
I HTML 5 cont, ine s, i descrierea unor funct, ii API (Application
Programming Interface) JavaScript care interact, ionează cu
documentul HTML prin intermediul arborelui DOM (Document
Object Model).
Momente cheie ı̂n proiectarea Web
I 1991 HTML
I 1996 CSS1 + JavaScript
I 1997 HTML 3.2
I 1998 CSS2
I 1999 HTML 4.01, bazele CSS3
I 2000 XHTML 1
I 2002 Design Web fără tabele
I 2005 Ajax
I 2009 HTML 5 versiunea draft
I 2014 recomandarea HTML 5.0
La ı̂nceput era doar textul... s, i nu exista stil.

I HTML provine din SGML (Standard Generalized Markup Language)

standardizat ı̂n 1986.
I a fost conceput init, ial pentru a structura un document bazat pe text
I text formatat cu niveluri multiple de titluri s, i ı̂n corpul paginii (body)
Apoi au apărut imaginile.

I O imagine face cât o mie de cuvinte

I Tagul IMG pentru imagini a fost introdus cu HTML 2.0 (aprilie 1994 -
septembrie 1995)
I singurul atribut suplimentar disponibil, atributul alt.
Apoi au apărut tabelele.

I Începând cu versiunea HTML 3.0 au fost introduse tabelele.

I HTML 3.0 nu a fost niciodată ”aprobat” ci HTML 3.2
”Manipularea” tabelelor

I Dezvoltatorii observă că tabelele pot fi folosite s, i pentru altceva

decât prezentarea datelor.
I Tabelele sunt folosite pentru structurarea paginii web.
I În general sunt folosite pe desktop
Web designerii intră ı̂n act, iune.

I O dată cu HTML 3.2, devine posibilă stabilirea fonturilor, culorilor,

fundalurilor etc.
I S, i astfel se nas, te designerul web.
I Afirmat, ia ”Cont, inutul este cel mai important” nu mai este general
valabilă.
I HTML 3.2 este standardizat ı̂n ianuarie 1997
Browserele evoluează.
I La ı̂nceput existau doar browsere bazate pe text.
I Apare Mosaic s, i apoi apar alte browsere.
I Netscape s, i IE introduc taguri proprii pentru atractivitate
I Unele taguri proprii vor fi scrise ı̂n specificat, ii - Războiul browserelor
I Nu toate browserele afis, au aceeas, i pagină la fel.
O solut, ie mai bună - CSS1

I În decembrie 1996 apare CSS1 pentru a separa modul de afis, are
fat, ă de cont, inut.
I Proprietatea ”float” permite pozit, ionarea unor elemente precum
imaginile
Pozit, ionarea CSS2

I Permite structurarea paginilor fără a folosi tabele.

I Exemple (proprietatea position): absolute, relative, static s, i fixed
I Apare avantajul as, a numitelor print sheets (necesare imprimării
corecte a paginilor)
Avantajele folosirii CSS
I Aspect unitar pentru site
I Cu un fis, ier sau două CSS se ment, ine stilul pentru ı̂ntreg siteul -
nefiind nevoie de implementarea lui ı̂n fiecare pagină
I Cu CSS se câs, tigă timp
I Des, i la ı̂nceput ia mai mult decât un editor de tip WYSIWYG, ulterior
viteza cres, te
I Se poate schimba aspectul ı̂ntregului site prin modificarea unui
singur fis, ier de stil
I La introducerea unui aspect, nu mai este nevoie de verificarea
pagină cu pagină a siteului
Demonstrat, ie CSS: O singură pagină HTML - mai multe
stiluri!
Urmărit, i exemplul de mai jos - o pagină HTML afis, ată cu patru foi de stil
diferite. Apăsat, i pe ”Foaia de stil 1”, ”Foaia de stil 2”, ”Foaia de stil 3”,
”Foaia de stil 4” pentru a vedea diferitele stiluri:

http://itee.elth.pub.ro/˜vbucata/ia/cursuri/
ex-html-css/demo-css.html
CSS3

I CSS3 nu este o singură specificat, ie - este formată din module

I Această abordare permite W3C prioritizarea specificat, iilor s, i timp de
react, ie rapid la cererile noi
I Starea actuală a CSS3:
http://www.w3.org/Style/CSS/current-work
HTML5

I HTML4.01 - cel mai de succes standard de până acum

(recomandare ı̂n anul 2000)
I HTML5 nu este o singură specificat, ie - este formată din
caracteristici (geolocalizare, canvas, audio, video, formulare etc)
I Recomandarea HTML5 publicată la sfârs, itul lui 2014.
Ce metode avem pentru a crea site-uri
web?
Ce metode avem pentru a crea site-uri web?
1 direct HTML, CSS s, i JavaScript, folosind editoare de gen
Notepad++, Sublime Text, Atom
2 Editoare grafice profesionale de tip WYSIWYG, ex: Adobe
Dreamweaver. Microsoft Expression Web
3 Website Builder (nu este nevoie de experient, ă ı̂n domeniu), ex:
WIX,GoDaddy,Weebly
4 Content Management System (CMS), ex: Wordpress, Drupal,
Joomla
Metoda 1: Direct cod HTML,CSS, JavaScript
I cea mai laborioasă metodă dar s, i cea mai flexibilă
I necesită cunos, tint, e speciale, curbă de ı̂nvăt, are lentă
I poate fi folosită cu succes ı̂n paralel cu celelalte metode
I se pot folosi editoare de gen Notepad++, SublimeText, Atom
I O select, ie bună a instrumentelor indispensabile:
https://blog.udacity.com/2015/04/
13-useful-web-dev-tools-cant-live-without.
html
I Se pot folosi biblioteci de cod (Bootstrap, JQuery)
I Noi vom studia not, iunile de bază HTML, CSS s, i JavaScript
Metoda 2: Editoare Web profesionale
I WYSIWYG = What You See Is What You Get
I nu este nevoie de cunos, tint, e avansate de HTML, CSS s, i JavaScript
dar trebuie cunoscute programele
I Exemple: Adobe DreamWeaver, Microsoft Expression Web
I Rezultatul este profesional!
Metoda 3: Website Builder
Metoda 3: Website Builder
I Care este cel mai bun Website Builder?
diverse facilităt, i: teme responsive... eCommerce
I Cum scriu un site web?
nu este nevoie să fii expert, oricine poate crea un site web
I Cum aleg un serviciu de gen Website Builder?
pentru un blog personal este suficient un serviciu simplu.
pentru facilităt, i suplimentare gen eCommerce, este nevoie de un
serviciu mai avansat.
Top Website Builders (Octombrie 2018)
1 http://www.wix.com
2 http://www.godaddy.com
3 http://www.weebly.com
4 http://www.networksolutions.com
5 http://www.site123.com
6 http://www.register.com
Metoda 4: CMS
Metoda 4: CMS
I CMS = Content Management System
I Metodă potrivită atunci când avem un site complex, cu mult, i
utilizatori ı̂nscris, i
I Datele noi se introduc us, or prin intermediul unei interfet, e facile
I Dezavantaj: viteză scăzută
Sintaxa limbajului HTML
Ce sunt etichetele (tagurile) HTML?
I Etichetele (tagurile) HTML sunt cuvinte cheie ı̂nsot, ite de semnele
<” s, i >”
” ”
I Exemplu: <numetag>cont, inut</numetag>
I Etichetele HTML sunt de obicei pereche, de exemplu: <p>s, i </p>
I Primul tag al perechii este tagul de ı̂nceput, al doilea este cel de
sfârs, it.
I Tagul de sfârs, it este la fel ca tagul de ı̂nceput dar cont, ine un semn
slash ı̂nainte de numele tagului.
I Tagul de ı̂nceput se numes, te adesea tag de deschidere iar cel de
sfârs, it, tag de ı̂nchidere.
Elementele/Etichetele HTML
Elementele HTML sunt formate dintr-un tag de ı̂nceput, un tag de
sfârs, it s, i tot ceea ce se află ı̂ntre ele:
<numetag>cont, inut</numetag>
<p>Primul meu paragraf HTML.</p>

Tagul de ı̂nceput Cont, inutul elementului Tagul de sfârs, it

<h1> Primul titlu </h1>
<p> Primul paragraf. </p>
<br>
Observat, ie: unele elemente HTML nu au un tag de ı̂nchidere.
Structura unei pagini HTML
Numai domeniul <body>(suprafat, a albă) este afis, ată de către browser.
Elementele HTML imbricate
I Elementele HTML pot cont, ine alte elemente HTML imbricate.
I Toate documentele HTML constau din elemente HTML imbricate.
I Exemplul de mai jos cont, ine 4 elemente HTML:

I Elementul <html>defines, te ı̂ntregul

1 <html> document. El are un tag de ı̂nceput <html>s, i
2 <body> un tag de sfârs, it </html>.
3 I Cont,inutul elementului este un alt element HTML
(elementul <body>).
4 <h1>Primul titlu</h1>
I Elementul <body>defines, te corpul
5 <p>Primul paragraf.</p>
documentului. El are un tag de ı̂nceput
6 <body>s, i un tag de sfârs, it </body>.
7 </body> I Acesta cont,ine două alte elemente HTML
8 </html> (<h1>s, i <p>).
I Elementul <h1>defines, te un titlu. El are un tag
de ı̂nceput <h1>s, i un tag de sfârs, it </h1>.
I Cont,inutul elementului este: Primul titlu.
I Elementul <p>defines, te un paragraf. El are un
tag de ı̂nceput <p>s, i un tag de sfârs, it </p>.
I Cont,inutul elementului este: Primul paragraf.
Nu uitat, i tagul de sfârs, it
Unele elemente HTML vor fi afis, ate corect, chiar dacă uitat, i tagul de
sfârs, it:
1 <html>
2 <body>
3
4 <p>Acesta este un paragraf
5 <p>Acesta este un paragraf
6
7 </body>
8 </html>

Exemplul de mai sus funct, ionează ı̂n toate browserele deoarece tagul de
sfârs, it este considerat opt, ional.
Dar nu vă bazat, i pe asta! Se pot genera rezultate neas, teptate s, i/sau
erori dacă uitat, i tagul de sfârs, it.
Elemente HTML vide
I Elementele HTML fără cont, inut sunt denumite elemente vide.
I Elementul <br>este un element vid fără tag de sfârs, it (tagul
<br>determină un salt pe linia următoare - line break).
I Elementele vide pot fi ”ı̂nchise” ı̂n cadrul tagului de deschidere
astfel: <br />.
I În HTML 5 nu este obligatoriu ca elementele vide să fie ı̂nchise. Dar
dacă dorit, i să fit, i mai strict, i sau dacă dorit, i ca documentul să poată fi
citit de un browser XML, atunci va trebui să ı̂nchidet, i toate
elementele HTML.
Sfat pentru scrierea HTML
I Folosit, i litere mici pentru numele tagurilor
I Tagurile HTML nu depind de majuscule sau minuscule:
<P>ı̂nseamnă acelas, i lucru ca <p>.
I Standardul HTML 5 nu prevede minuscule pentru taguri dar sunt
recomandate ı̂n HTML 4 s, i obligatorii ı̂n tipuri de documente mai
stricte precum XHTML.
 Un exemplu minimal HTML

I Declarat,ia DOCTYPE defines, te tipul de

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Titlul paginii
document ca fiind HTML.
I Textul dintre <html>s, i </html>defines, te
cont, inutul documentului HTML.
I Textul dintre <head>s, i </head>oferă
informat, ii despre document.

6 </title> I Textul dintre <title>s, i </title>furnizează titlul

documentului.
7 </head>
I Textul dintre <body>s, i </body>defines, te
8 <body> cont, inutul vizibil al paginii.
9 I Textul dintre <h1>s, i </h1>defines, te un titlu
10 <h1>Primul titlu</h1> de nivel 1.
11 <p>Primul paragraf.</p> I Textul dintre <p>s, i </p>defines, te un
12 paragraf.
13 </body> I http:
14 </html> //itee.elth.pub.ro/˜vbucata/ia/
cursuri/ex-html-css/ex1v0.html
Modul de editare a documentelor HTML
Paginile HTML pot fi editate folosind editoare WYSIWYG HTML
profesionale precum Adobe DreamWeaver sau Microsoft Expression
Web.
Pentru a ı̂nvăt, a HTML se recomandă un editor de text precum Notepad
sau Notepad++.
Folosirea unui editor de text simplu este o cale bună de a ı̂nvăt, a HTML.
Urmat, i cei 4 pas, i de mai jos pentru a crea o primă pagină web cu
Notepad:
I Deschidet, i Notepad.
I Scriet, i codul HTML de mai sus (v. Un exemplu minimal HTML).
I Salvat, i pagina HTML cu extensia .htm sau .html având grijă să fie
folosită codarea UTF-8 pentru caractere.
I Deschidet, i pagina HTML ı̂n browser.
Declarat, ia <!DOCTYPE>
Declarat, ia <!DOCTYPE>ajută browserul să afis, eze pagina web corect.
Pe web există mai multe tipuri de documente.
Pentru a afis, a documentul corect, browserul trebuie să cunoască tipul s, i
versiunea.
Declarat, ia doctype nu este obligatoriu să fie scrisă cu majuscule.
Următoarele cazuri sunt acceptate:
1 <!DOCTYPE html>
2
3 <!DOCTYPE HTML>
4
5 <!doctype html>
6
7 <!Doctype Html>
Declarat, ii <!DOCTYPE>uzuale
I HTML 5:
<!DOCTYPE html>
I HTML 4.01:
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01
Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>
I XHTML 1.0:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0
Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
În continuare vom folosi doar HTML 5.
Cum se poate vedea sursa paginilor HTML?

Pentru a vedea sursa unei pagini web, ceea ce se află ı̂n spatele a ce
se afis, ează selectat, i ”View Page Source” (ı̂n Chrome) sau ”View
Source” (ı̂n IE) sau ceva similar ı̂n alte browsere.
Aceasta va conduce la deschiderea unei ferestre cont, inând codul HTML
al paginii.
Lista tagurilor HTML grupate pe categorii
Taguri HTML de bază
I <!DOCTYPE> = apare pe prima linie s, i defines, te tipul de HTML folosit
I <html> = defines, te un document HTML
I <title> = defines, te titlul documentului
I <body> = defines, te corpul documentului
I <h1>...<h6> = defines, te titluri pe 6 niveluri posibile
I <p> = defines, te un paragraf
I <br> = trece pe rândul următor
I <hr> = defines, te trecerea la o altă temă de cont, inut
I <!--...--> = defines, te un comentariu
Taguri HTML pentru formatare
I <acronym> = nu este suportat ı̂n HTML5, a se folosi <abbr>. Defines, te un acronim.
I <abbr> = defines, te o abreviere sau un acronim.
I <address> = defines, te informat, iile de contact pentru autorul paginii.
I <b> = defines, te un text cu aldine
I <bdi> = element nou HTML5, defines, te o parte de text scrisă ı̂n sens invers fat, ă de textul
principal
I <bdo> = schimbă direct, ia de scris a textului
I <big> = nu este suportat ı̂n HTML5 (a se folosi CSS). Defines, te text scris mai mare.
I <blockquote> = defines, te o sect, iune citat din altă sursă.
I <center> = nu este suportat ı̂n HTML5 (a se folosi CSS). Defines, te un text centrat.
Taguri HTML pentru formatare (continuare)
I <cite> = defines, te titlul unei lucrări.
I <code> = defines, te un fragment de cod program.
I <del> = defines, te text ce a fost scos din document.
I <dfn> = reprezintă definit, ia unui termen.
I <em> = defines, te un text accentuat.
I <font> = nu este suportat ı̂n HTML5 (a se folosi CSS). Defines, te fontul, culoarea s, i
mărimea textului.
I <i> = defines, te o parte a textului ce apart, ine unei schimbări de voce/dispozit, ie.
I <ins> = defines, te un text care a fost inserat ı̂n document.
I <kbd> = defines, te un text de la tastatură.
Taguri HTML pentru formatare (continuare)
I <mark> = element nou HTML5, defines, te un text marcat.
I <meter> = element nou HTML5, afis, ează un nivel ı̂ntr-o bară de mărime cunoscută.
I <pre> = defines, te text preformatat.
I <progress> = element nou HTML5, afis, ează progresul ı̂ntr-o bară de progres.
I <q> = defines, te un citat scurt.
I <rp> = element nou HTML5, defines, te ceea ce se va afis, a ı̂n browserele care nu suportă
adnotarea ruby - pentru limbile asiatice.
I <rt> = element nou HTML5, defines, te o explicat, ie/mod de pronunt, ie a caracterelor (pentru
limbile asiatice)
I <ruby> = element nou HTML5, defines, te o adnotare ruby - pentru limbile asiatice.
I <s> = defines, te un text care nu mai este corect.
Taguri HTML pentru formatare (continuare)
I <samp> = defines, te un text de ies, ire generat de un program.
I <small> = defines, te un text mai mic.
I <strike> = nu este suportat ı̂n HTML5 (a se folosi <del>sau <s>) Defines, te un text
tăiat.
I <strong> = defines, te un text important.
I <sub> = defines, te un text indice.
I <sup> = defines, te un text exponent.
I <time> = element nou HTML5, defines, te o dată/moment de timp.
I <tt> = nu este suportat ı̂n HTML5 (a se folosi CSS). Defines, te un text monospat, iat.
I <u> = defines, te un text diferit stilistic fat, ă de textul normal.
I <var> = defines, te o variabilă.
I <wbr> = element nou HTML5, defines, te un posibil salt la un rând nou.
Taguri HTML pentru formulare s, i introducerea datelor
I <form> = defines, te un formular HTML pentru introducerea datelor de către utilizator.
I <input> = defines, te un câmp de intrare.
I <textarea> = defines, te un câmp de intrare pe mai multe rânduri (suprafat, ă text).
I <button> = defines, te un buton.
I <select> = defines, te o listă auto derulantă.
I <optgroup> = defines, te un grup de opt, iuni corelate ı̂ntr-o listă auto derulantă.
I <option> = defines, te o opt, iune ı̂ntr-o listă auto derulantă.
I <label> = defines, te o etichetă pentru un element <input>.
I <fieldset> = grupează elemente corelate dintr-un formular.
I <legend> = defines, te un titlu pentru un element <fieldset>.
I <datalist> = element nou HTML5, specifică o listă de opt, iuni predefinite pentru
câmpurile de intrare.
I <keygen> = element nou HTML5, defines, te un câmp cheie-pereche pentru formulare.
I <output> = element nou HTML5, defines, te rezultatul unui calcul.
Taguri HTML pentru cadre
I <frame> = nu este suportat ı̂n HTML5, defines, te o fereastră (un
cadru) dintr-un set de cadre.
I <frameset> = nu este suportat ı̂n HTML5, defines, te un set de
cadre.
I <noframes> = nu este suportat ı̂n HTML5, defines, te un cont, inut
alternativ pentru utilizatorii care nu pot vedea cadre.
I <iframe> = defines, te un cadru inline.
Taguri HTML pentru imagini
I <img> = introduce o imagine.
I <map> = defines, te o hartă imagine.
I <area> = defines, te o suprafat, ă ı̂n interiorul unei hărt, i imagine.
I <canvas> = element nou HTML5, folosit pentru a desena grafică
de obicei prin scripting (JavaScript).
I <figcaption> = element nou HTML5, defines, te un titlu pentru
elementul <figure>.
I <figure> = element nou HTML5, specifică un cont, inut propriu.
Taguri HTML pentru Audio/Video
I <audio> = element nou HTML5, defines, te un cont, inut audio.
I <source> = element nou HTML5, defines, te mai multe resurse
media pentru elementele audio s, i video.
I <track> = element nou HTML5, defines, te textele asociate pentru
elementele video s, i audio.
I <video> = element nou HTML5, defines, te un cont, inut video sau
film.
Taguri HTML pentru legături
I <a> = defines, te un hyperlink.
I <link> = defines, te relat, ia dintre un document s, i o resursă externă
(cel mai adesea o legătură la o foaie de stil CSS)
I <nav> = element nou HTML5, defines, te legături pentru navigare.
Taguri HTML pentru liste
I <ul> = defines, te o listă neordonată.
I <ol> = defines, te o listă ordonată.
I <li> = defines, te un element al unei liste.
I <dir> = nu este suportat ı̂n HTML5 (a se folosi <ul>, defines, te
o listă director.
I <dl> = defines, te o listă de definit, ii.
I <dt> = defines, te un termen.
I <dd> = defines, te definit, ia unui termen.
I <menu> = defines, te un meniu de comenzi.
I <menuitem> = element nou HTML5, defines, te un element de
meniu.
Taguri HTML pentru tabele
I <table> = defines, te un tabel.
I <caption> = defines, te titlul unui tabel.
I <th> = defines, te o celulă din antetul tabelului.
I <tr> = defines, te un rând dintr-un tabel.
I <td> = defines, te o celulă dintr-un tabel.
I <thead> = grupează cont, inutul antetului unui tabel.
I <tbody> = grupează cont, inutul corpului unui tabel.
I <tfoot> = grupează cont, inutul subsolului unui tabel.
I <col> = specifică proprietăt, ile coloanelor dintr-un element
<colgroup>.
I <colgroup> = Specifică un grup de una sau mai multe coloane
dintr-un tabel pentru formatare.
Taguri HTML pentru stiluri s, i semantică
I <style> = defines, te un stil pentru un document.
I <div> = defines, te o sect, iune ı̂ntr-un document.
I <span> = defines, te o sect, iune ı̂ntr-un document.
I <header> = element nou HTML5, defines, te un antet pentru un document sau o sect, iune.
I <footer> = element nou HTML5, defines, te un subsol pentru un document sau o sect, iune.
I <main> = element nou HTML5, defines, te cont, inutul principal pentru un document.
I <section> = element nou HTML5, defines, te o sect, iune ı̂ntr-un document.
I <article> = element nou HTML5, defines, te un articol.
I <aside> = element nou HTML5, defines, te o bară laterală.
I <details> = element nou HTML5, defines, te detalii suplimentare pe care utlizatorul le
poate vedea sau ascunde.
I <dialog> = element nou HTML5, defines, te o cutie de dialog sau o fereastră.
I <summary> = element nou HTML5, defines, te un antet vizibil pentru un element <details>.
Taguri HTML pentru meta informat, ii
I <head> = defines, te informat, ii despre document.
I <meta> = defines, te meta datele despre un document HTML.
I <base> = defines, te rădăcina pentru URL-urile din document.
I <basefont> = nu este suportat ı̂n HTML5 (a se folosi CSS).,
defines, te o culoare, mărime s, i font implicite pentru textul din
document.
Taguri HTML pentru programare
I <script> = defines, te un script pe partea de client.
I <noscript> = defines, te un cont, inut alternativ pentru utilizatorii
care nu suportă scripturi.
I <applet> = nu este suportat ı̂n HTML5 (a se folosi
<embed>sau <object>). defines, te un applet.
I <embed> = element nou HTML5, defines, te un container pentru o
aplicat, ie externă non-HTML.
I <object> = defines, te un obiect inclus.
I <param> = defines, te un parametru pentru un obiect.
Recapitulare prin exemple HTML
Putet, i urmări exemplele de mai jos:

http://itee.elth.pub.ro/˜vbucata/ia/cursuri/
ex-html-css/index.html

Vom continua ı̂n cursul următor cu not, iuni legate de HTML5, CSS s, i
JavaScript.
Vă mult, umesc pentru atent, ie!