Curs 2

Introducere n Proiectarea Web
Informatica Aplicata 1 - Cursul 2
Victor Bucata
Facultatea de Inginerie Electrica - U.P.B.
26 octombrie 2016
Cuprins:
1
Introducere
Ce este hipertextul?
Cum funct,ioneaza Web-ul?
Ce sunt HTML s, i CSS?
Istoricul HTML s, i CSS
Cuprins:
1
Introducere
Exemple HTML s, i CSS
Cuprins:
1
Introducere
2
3

HTML - definirea continutului
,
Ce sunt elementele, atributele s, i tagurile?
Elementele bloc s, i de linie
Structura documentului
Exemple HTML
Cuprins:
1
Introducere
2
3

,
Exemple HTML
CSS - definirea aspectului

,ile s, i valorile?
Ce sunt selectorii, proprietat
Exemple CSS
Cuprins:
1
Introducere
2
3

,
Exemple HTML

,ile s, i valorile?
Exemple CSS
Proiectare Web Front-End

Sintaxa limbajului HTML
Elementele HTML
Lista tagurilor HTML pe categorii
Atribute HTML
Sintaxa limbajului CSS
Cteva elemente (taguri) mai amanunt

,it
Cuprins:
1
Introducere
2
3

,
Exemple HTML

,ile s, i valorile?
Exemple CSS
Proiectare Web Front-End

Elementele HTML
Lista tagurilor HTML pe categorii
Atribute HTML

,it
Noile elemente HTML5

Elementul HTML5 Canvas
Elemente HTML multimedia
Elementul HTML5 Video
Geolocalizarea
Cacheul de aplicat,ii
Introducere
I
, ile, tiparite
nainte de a exista World Wide Web-ul, cart

pe hrtie s, i
strns legate erau principala sursa de informat, ii. Aceasta implica un
efort deosebit pentru gasirea

informat, iei dorite.
Introducere
I
Azi deschidet, i un broser web, un motor de cautare

s, i cautat
, i ce
dorit, i. Este foarte probabil ca cineva, undeva sa fi construit un site
web avnd n minte informat, ia pe care o cautat

, i.
I
Ted Nelson, filozof, sociolog s, i informatician american introduce

termenii de hypertext s, i hypermedia. El defineste n 1965
hipertextul (text non-linear) ca fiind un "material scris sau grafic
interconectat ntr-o maniera complexa care n mod conventional nu
poate fi reprezentat pe hrtie. El poate contine cuprinsuri ale
continut s i relatiile dintre diverse par
ti componente;
propriului sau
adaugiri
poate de asemenea sa contina adnotari,

s i note de subsol
examineze.
pentru cei care doresc sa-l
Metoda de organizare a informatiilor n care datele sunt memorate
ntr-o retea de noduri si

legaturi,
putnd fi accesata prin
intermediul browserelor s i manipulata de un editor.
Componentele unui sistem hipertext

I
Noduri (concepte) = blocuri de informatii cuprinse n reteaua

n mod uzual, un concept
sistemului hipertext. Un nod reprezinta,
animatie, audio, video,
unic (o idee), putnd contine text, grafica,
imagini sau programe.
Legaturi
(relatii) = conexiuni ntre nodurile din reteaua hipertextului,
ce permit utilizatorului sa treaca de la un nod la altul.
Ce este WWW?
Definitie (WWW)
World Wide Web-ul este o retea globala de documente, imagini s i alte
resurse legate logic prin hyperlink-uri s i adresate prin URI-uri (Uniform
Resource Identifier).
Definitie (HTTP)
HyperText Transfer Protocol (Protocol de transmitere a hipertextului) este
protocolul principal de acces la WWW.
Ce este WWW? (continuare)

I
Browserele pentru WWW precum MS Edge, MS Internet Explorer,

Mozilla Firefox, Opera, Apple Safari s i Google Chrome permit
utilizatorilor sa navigheze de la o pagina web la alta prin intermediul
hyperlink-urilor incluse n documente.
Aceste documente pot contine orice combinatie de date: grafica,

sunete, text, video, multimedia s i continut interactiv.
Comparativ cu mediul tiparit,

World Wide Web-ul a permis
descentralizarea informatiei la scara mare
nceputurile WWW
I
12 noiembrie 1990: Tim Berners-Lee de la CERN, cu ajutorul lui

Robert Cailliau publica o propunere de a construi un "Proiect
Hypertext" denumit "WorldWideWeb" (cunoscut s i ca "W3") ca fiind o
retea de documente hypertext care sa fie vazute

de browsere
folosind o arhitectura de tip client-server.
Pna la sfrsitul lui 1990, Berners-Lee construieste toate

instrumentele necesare pentru un Web functional: primul browser
web (care era n acelasi timp s i editor web), primul server web s i
prima pagina web care constituia proiectul.
1992: 20 de servere web n ntreaga lume
1993: apare browserul Mosaic
de atunci a cunoscut o dezvoltare spectaculoasa
Primul server web
Acest calculator (NeXT) a fost folosit de Tim Berners-Lee de la CERN s i a

devenit primul server Web din lume.
Cum funct, ioneaza Web-ul?
o pagina web? - pasul 1

Ce se ntmpla cnd accesam
Introducet, i adresa URL (Uniform Resource Locator) n browser (este util
sa se puna un slash dupa adresa daca aceasta corespunde unui
director).
La baza World Wide Web sta protocolul HTTP (HyperText Transfer

Protocol).
Observat, ie: vom investiga ce se ntmpla la nivelul aplicat, ie
(protocolul HTTP), deci peste nivelul transport (protocolul TCP) ce ofera
Datele sunt ncapsulate pe masur
o conexiune sigura.
a ce coboara pe
a ce urca stiva TCP/IP la
stiva TCP/IP s, i apoi sunt extrase pe masur
destinat, ie. Cel mai jos nivel n stiva TCP/IP este nivelul fizic (ret, ele
Ethernet, WLAN etc).

DNS (Domain Name System) = metoda prin care unei adrese IP
(ns, iruire de numere) i se asociaza un URL (nume de site de exemplu).
Browserul cauta adresa IP pentru numele de domeniu (n ordinea
urmatoare:
cacheul browserului, cacheul sistemului de operare, cacheul
routerului, cacheul DNS al furnizorului de Internet, cautare

recursiva).

Browserul trimite o cerere HTTP GET serverului web. Cmpul
Connection cere serverului sa pastreze

conexiunea TCP deschisa pentru
cereri ulterioare.
Mostra din comunicat, ia HTTP:

GET http://facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
1
2
3
4
5
6
7

Serverul raspunde
cu o redirect, ionare permanenta.
www.google.ro sau google.ro? (V. search engine rankings,
cache-friendly)

HTTP/1.1 301 Moved Permanently
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Location: http://www.facebook.com/
P3P: CP="DSP LAW"
Pragma: no-cache
Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT; path=/;
domain=.facebook.com; httponly
Content-Type: text/html; charset=utf-8
X-Cnection: close
Date: Fri, 12 Feb 2010 05:09:51 GMT
Content-Length: 0
1
2
3
4
5
6
7
8
9
10
11

Browserul urmeaza redirectarea.

GET http://www.facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
Host: www.facebook.com
1
2
3
4
5
6
7
8

Serverul proceseaza cererea.

Serverul trimite un raspuns

cu cod HTML.

HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP="DSP LAW"
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
X-Cnection: close
Transfer-Encoding: chunked
Date: Fri, 12 Feb 2010 09:05:55 GMT
1
2
3
4
5
6
7
8
9
10

Browserul ncepe sa afis, eze HTML.

Browserul trimite cereri pentru obiecte incluse n HTML (procesul este
similar cu cel prin care a trecut pagina HTML).

Browserul trimite cereri ulterioare asincrone (AJAX)
n ce limbaje sunt scrise majoritatea paginilor Web?
HTML
CSS
Limbaj de marcare care ofera

cont, inutului structura s, i semnificat, ie.
Limbaj de prezentare care ofera

cont, inutului stil s, i aspect.
HTML
CSS
Cont, inut
Stil
Ce este HTML?
HTML este limbajul de marcare folosit pentru descrierea cont, inutului
documentelor web (pagini web).
I
HTML este acronimul de la Hyper Text Markup Language (Limbajul

de Marcare a HiperTextului).
As, a cum am vazut

anterior, Tim Berners-Lee pune bazele WWW n
anul 1989 pentru comunicarea pe Internet ntre fizicienii de la CERN.
HTML este un limbaj bazat pe SGML (Standard Generalized Markup

Language) standardizat n 1986.
HTML nu este un limbaj de programare, e un limbaj de marcare.
Un limbaj de marcare este format dintr-un set de etichete (taguri)

de marcare cuprinse ntre semnele < s, i >.
Cont, inutul documentelor HTML este descris folosind etichete

(taguri) HTML.
Fiecare eticheta (tag) HTML descrie un tip de cont, inut diferit.
ti oferite de limbajul HTML

Facilita
Limbajul HTML ofera autorilor mijloace pentru:
I
publicarea de documente cu antete, texte, tabele, liste, fotografii

etc.
regasirea
on-line de informatii prin intermediul hiperlegaturilor
accesate printr-un simplu click de mouse.
proiectarea de formulare pentru realizarea tranzactiilor cu servere

pentru caut
ari
de informatie sau pentru activita
ti
aflate la distanta,
specifice comertului.
includerea de foi de calcul tabelar, clipuri video, sunete s i alte

aplicatii direct n documente.
Ce este CSS?
I
CSS este acronimul de la Cascading Style Sheets (Foi de Stil n
Cascada).
CSS descrie modul n care sunt afis, ate elementele HTML pe

ecran, hrtie sau alte suporturi.
CSS cres, te eficient, a. Poate controla aspectul mai multor pagini

Web foarte us, or.
Foile de stil externe sunt stocate n fis, iere CSS.
Dar 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.
HTML 5 cont, ine s, i descrierea unor funct, ii API (Application

Programming Interface) JavaScript care interact, ioneaza cu
documentul HTML prin intermediul arborelui DOM (Document
Object Model).
Demonstrat, ie CSS: O singura pagina HTML - mai multe

stiluri!
, i exemplul de mai jos - o pagina HTML afis, ata cu patru foi de stil
Urmarit
, i pe "Foaia de stil 1", "Foaia de stil 2", "Foaia de stil 3",
diferite. Apasat
"Foaia de stil 4" pentru a vedea diferitele stiluri:
http://itee.elth.pub.ro/~vbucata/ia/cursuri/
demo-css.html
Momente cheie n proiectarea Web
Momente cheie n proiectarea Web

I
1991 HTML
1996 CSS1 + JavaScript
1997 HTML 3.2
1998 CSS2
1999 HTML 4.01, bazele CSS3
2000 XHTML 1
a tabele
2002 Design Web far
2005 Ajax
2009 HTML 5 versiunea draft
2014 recomandarea HTML 5.0
La nceput era doar textul... s, i nu exista stil.
HTML provine din SGML (Standard Generalized Markup Language)

standardizat n 1986.
a fost conceput init, ial pentru a structura un document bazat pe text
text formatat cu niveluri multiple de titluri s, i n corpul paginii (body)
a fost creat n 1990

Apoi au aparut
imaginile.
O imagine face ct o mie de cuvinte
Tagul IMG pentru imagini a fost introdus cu HTML 2.0 (aprilie 1994 septembrie 1995)
singurul atribut suplimentar disponibil, atributul alt.

Apoi au aparut
tabelele.
ncepnd cu versiunea HTML 3.0 au fost introduse tabelele.
HTML 3.0 nu a fost niciodata "aprobat" ci HTML 3.2
"Manipularea" tabelelor
Dezvoltatorii observa ca tabelele pot fi folosite s, i pentru altceva

dect prezentarea datelor.
Tabelele sunt folosite pentru structurarea paginii web.
n general sunt folosite pe desktop
Web designerii intra n act, iune.
O data cu HTML 3.2, devine posibila stabilirea fonturilor, culorilor,

fundalurilor etc.
S, i astfel se nas, te designerul web.
Afirmat, ia "Cont, inutul este cel mai important" nu mai este general
valabila.
HTML 3.2 este standardizat n ianuarie 1997

Browserele evolueaza.
La nceput existau doar browsere bazate pe text.
Apare Mosaic s, i apoi apar alte browsere.
Netscape s, i IE introduc taguri proprii pentru atractivitate
Unele taguri proprii vor fi scrise n specificat, ii => Razboiul

browserelor
Nu toate browserele afis, au aceeas, i pagina la fel.
O solut, ie mai buna - CSS1
n decembrie 1996 apare CSS1 pentru a separa modul de afis, are

de cont, inut.
Proprietatea "float" permite pozit, ionarea unor elemente precum

imaginile
Pozit, ionarea CSS2
a a folosi tabele.
Permite structurarea paginilor far
Exemple (proprietatea position): absolute, relative, static s, i fixed
Apare avantajul as, a numitelor print sheets (necesare imprimarii

corecte a paginilor)
Avantajele folosirii CSS

I
Aspect unitar pentru site
Cu un fis, ier sau doua CSS se ment, ine stilul pentru ntreg siteul nefiind nevoie de implementarea lui n fiecare pagina
Cu CSS se cs, tiga timp
Des, i la nceput ia mai mult dect un editor de tip WYSIWYG, ulterior

viteza cres, te
Se poate schimba aspectul ntregului site prin modificarea unui

singur fis, ier de stil
La introducerea unui aspect, nu mai este nevoie de verificarea

pagina cu pagina a siteului
CSS3
CSS3 nu este o singura specificat, ie - este formata din module
Aceasta abordare permite W3C prioritizarea specificat, iilor s, i timp de

react, ie rapid la cererile noi
Starea actuala a CSS3:
http://www.w3.org/Style/CSS/current-work
HTML5
HTML4.01 - cel mai de succes standard de pna acum

(recomandare n anul 2000)
HTML5 nu este o singura specificat, ie - este formata din

caracteristici (geolocalizare, canvas, audio, video, formulare etc)
Recomandarea HTML5 publicata la sfrs, itul lui 2014.
Pentru o mai buna familiarizare cu limbajele HTML s, i CSS, putet, i urmari
exemplele de pe slideurile urmatoare.
Ex1
ex-html-css/exemple/ex01.html
Ex2
Ex3
Ex4
Ex5
Ex6
Ex7
Ex7
Ex8
Ex9
Ex10
Ex11
Ex12
Ex13
Ex14
Ex15
Ex16
Ex17
Ex18
Ex19
Ex20
Ex20
Ex21
Ex22
Ex22
Ex23
Ex23
Ex23
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum
risus nibh, at rhoncus urna maximus et. Etiam et interdum urna. Ut non
nulla a libero facilisis tempus non eget nibh. Nullam ut lectus dictum,
pretium nunc eu, fringilla leo. Praesent efficitur nisl sem, non porta sapien
pharetra sit amet. Morbi laoreet eros ut nisl hendrerit volutpat. Maecenas
vitae tellus arcu. Nunc erat sapien, pharetra at orci at, eleifend tempus
risus. Ut gravida, dui in iaculis hendrerit, mauris ante hendrerit nisi, at
interdum ligula nunc vel arcu. Etiam risus lacus, interdum eu volutpat at,
tempus quis urna. Morbi vel blandit nibh, ut ultrices felis. Morbi dignissim
odio ac dictum iaculis. In et ullamcorper nunc, ullamcorper ullamcorper
arcu. Praesent dignissim eros eu dui tristique imperdiet.
Ex24
Ex25
Ex26
Ex27
Ex28
Ex29
Ex30
Ex31
Ex32
Ex33
Ex34
Ex35
Ex36
Ex37
Ex38
Ex39
Ex39
Ex40
Ex41
Ex42
Ex43
Ex44
Ex45
Ex46
Ex47
Ex48
Ex49
Ex50
Ex51
Ex52
Ex53
Ex54
Ex55
Ex56
Ex57
HTML - definirea cont, inutului

Hyper Text Markup Language

I
Elementele
body, h1, p, div, strong, em, span

Elementele sunt cuvinte cheie ce definesc obiecte n cadrul paginii
web. Uneori aceste obiecte sunt denumite generic elemente.
I
Atributele
href="http://itee.elth.pub.ro" title="ABC"
Atributele ofera informat, ii unui anumit element
I
Tagurile
<div id="titlu" class="prezentare"></div>

Tagurile = ce este ntre semnele < s, i > (de obicei tag de
deschidere + tag de nchidere, uneori nu exista tag de nchidere)

I
Elementele de bloc
header, footer, article, section, aside,

div, h1...h6, p, table, form, ul, ol, li,
dl, dt, dd
Elementele bloc ncep pe o linie noua a documentului s, i ocupa
, ime disponibila
ntreaga lat
I
Elementele de linie
span, a, strong, em, img, br, input, abbr

Elementele de linie nu ncep pe o linie noua ci se introduc n fluxul
, imea necesara lor.
documentului ment, inndu-s, i doar lat
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Acesta este un site web</p>
</body>
</html>
Declaratia tipului de document HTML

I
DTD = Document Type Definition
DTD-ul Strict HTML 4.01 include toate elementele s i atributele care

nu au fost depasite sau care nu apar in documentele frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
I
DTD-ul HTML5, simplu s, i elegant:
<!DOCTYPE html>
Mostra HTML pentru navigare

<ul id="retele-socializare">
<li class="facebook">
<a href="http://ro-ro.facebook.com/MinisterulEducatiei">
Ministerul Educatiei pe Facebook
</a>
</li>
<li class="mail">
<a href="mailto:info@edu.ro">
Adresa email Ministerul Educatiei
</a>
</li>
<li class="twitter">
<a href="http://twitter.com/#!/ministeruleducatiei">
Ministerul Educatiei pe Twitter
</a>
</li>
...
</ul>
Mostra CSS pentru navigare

ul#retele-socializare {
list-style: none; }
ul#retele-socializare li {
float: left;
margin: 12px 0 0 0;
padding: 0 20px; }
ul#retele-socializare li a {
background: url("fundal.png") 0 0 no-repeat;
display: block;
height: 100px;
text-indent: -9999px;
width: 100px; }
ul#retele-socializare li.facebook a {
border: 10px solid red ; background-position: 0 -64px; }
ul#retele-socializare li.mail a {
border: 10px solid NavyBlue ; background-position: 0 -81px; }
ul#retele-socializare li.twitter a {
border: 10px solid green; background-position: 0 -81px; }
Tagurile
</a>
</li>
<li class="mail">
</a>
</li>
</a>
</li>
...
</ul>
Elementele
</a>
</li>
<li class="mail">
</a>
</li>
</a>
</li>
...
</ul>
Atributele
</a>
</li>
<li class="mail">
</a>
</li>
</a>
</li>
...
</ul>
ID-urile s, i clasele
</a>
</li>
<li class="mail">
</a>
</li>
</a>
</li>
...
</ul>
Referent, ierea unui fis, ier CSS

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="stiluri.css">
</head>
<body>
<h1>Hello World</h1>
<p>Acesta este un site web</p>
</body>
</html>

Cascading Style Sheets
, ile s, i valorile?
I
Selector
h1 {
font: bold 16px/24px Arial, sans-serif; }
Un selector determina carui

element sa i se aplice stilul.
I
Proprietate
h1 {
O proprietate este un tip de stil care se aplica elementului.
I
Valoare
h1 {
, i.
O valoare determina comportamentul unei proprietat
Ce sunt seturile de reguli s, i declarat, iile?

I
Set de reguli
h1 {
Un set de reguli cuprinde un selector s, i toate declarat, iile
corespunzatoare.
I
Declarat, ii
h1 {
Declarat, iile sunt linii individuale n CSS din cadrul unui set de
reguli.

Ce sunt selectorii de element, ID s, i de clasa?
I
Selectorul de element
h1 {
Un selector de element precizeaza elementul prin numele sau.

I
Selectorul ID
#logo {
background: url("fundal.png") 0 0 no-repeat; }
Un ID apare o
Un selector ID precizeaza elementul prin ID-ul sau.
singura data pe pagina.

I
Selectorul de clasa
.coloana {
width: 200px; }
Un selector de clasa precizeaza elementul prin clasa sa. O clasa
poate aparea
de mai multe ori pe o pagina.
Exemple CSS
list-style: none; }
float: left;
margin: 12px 0 0 0;
padding: 0 20px; }
display: block;
height: 100px;
width: 100px; }
Selectorii
list-style: none; }
float: left;
margin: 12px 0 0 0;
padding: 0 20px; }
display: block;
height: 100px;
width: 100px; }
, ile
Proprietat
list-style: none; }
float: left;
margin: 12px 0 0 0;
padding: 0 3px; }
display: block;
height: 100px;
width: 100px; }
border: 10px solid green ;
background-position: 0 -98px; }
Valorile
list-style: none; }
float: left;
margin: 12px 0 0 0;
padding: 0 3px; }
display: block;
height: 17px;
width: 16px; }
border: 10px solid green ;
background-position: 0 -98px; }
Ce sunt etichetele (tagurile) HTML?

I
Etichetele (tagurile) HTML sunt cuvinte cheie (nume de etichete)

cuprinse ntre semnele < s, i >
Exemplu: <numetag>cont, inut</numetag>
Etichetele HTML sunt de obicei pereche, de exemplu: <p>s, i </p>
Primul tag al perechii este tagul de nceput, al doilea este cel de

sfrs, it.
Tagul de sfrs, it este la fel ca tagul de nceput dar cont, ine un semn
slash nainte de numele tagului.
Tagul de nceput se numes, te adesea tag de deschidere iar cel de

sfrs, it, tag de nchidere.
Browserele Web
Scopul unui browser web (Chrome, IE, Firefox, Safari) este de a citi
documente HTML s, i de a le afis, a. Browser-ul nu afis, eaza etichetele
HTML, dar le foloses, te pentru a determina modul de afis, are a
documentului:
Standarde HTML
HTML este standardizat de Consort, iul W3C. De la nceputurile Web-ului,
au existat mai multe versiuni de HTML:
I
1991 HTML
1995 HTML 2.0
1997 HTML 3.2
24 decembrie 1999 HTML 4.01
26 ianuarie 2000 XHTML 1.0 nlocuitor al limbajului HTML
iunie 2004 ia fiint, a grupul de lucru WHAT (desprins din W3C) care
va pune bazele HTML 5
octombrie 2009, W3C a desfiint, at Grupul de lucru XHTML 2
16 septembrie 2014 este publicata recomandarea HTML 5.0
Un exemplu minimal HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titlul paginii
</title>
</head>
<body>
<h1>Primul titlu</h1>
<p>Primul paragraf.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
I
I
I
I
I
I
I
I
Declarat,ia DOCTYPE defines, te tipul de

document ca fiind HTML.
Textul dintre <html>s, i </html>defines, te
cont, inutul documentului HTML.
Textul dintre <head>s, i </head>ofera informat, ii
despre document.
Textul dintre <title>s, i </title>furnizeaza titlul
documentului.
Textul dintre <body>s, i </body>defines, te
cont, inutul vizibil al paginii.
Textul dintre <h1>s, i </h1>defines, te un titlu de
nivel 1.
Textul dintre <p>s, i </p>defines, te un paragraf.
http://itee.elth.pub.ro/~vbucata/
ia/cursuri/ex-html-css/exemple/
ex1v0.html
Structura unei pagini HTML
este afis, ata de catre

Numai domeniul <body>(suprafat, a alba)
browser.
Declarat, ia <!DOCTYPE>
Declarat, ia <!DOCTYPE>ajuta browserul sa afis, eze pagina web corect.
Pe web exista mai multe tipuri de documente.
Pentru a afis, a documentul corect, browserul trebuie sa cunoasca tipul s, i
versiunea.
Declarat, ia doctype nu este obligatoriu sa fie scrisa cu majuscule.
Urmatoarele
cazuri sunt acceptate:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
1
2
3
4
5
6
7
Declarat, ii <!DOCTYPE>uzuale
I
HTML 5:
<!DOCTYPE html>
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
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.
Modul de editare a documentelor HTML

Paginile HTML pot fi editate folosind editoare HTML profesionale
precum Microsoft WebMatrix sau Sublime Text.
, a HTML se recomanda un editor de text precum Notepad
Pentru a nvat
sau Notepad++.
, a HTML.
Folosirea unui editor de text simplu este o cale buna de a nvat
Urmat, i cei 4 pas, i de mai jos pentru a crea o prima pagina web cu
Notepad:
I
Deschidet, i Notepad.
Scriet, i codul HTML de mai sus (v. Un exemplu minimal HTML).
Salvat, i pagina HTML cu extensia .htm sau .html avnd grija sa fie
folosita codarea UTF-8 pentru caractere.
Deschidet, i pagina HTML n browser.
Elementele HTML
Elementele HTML sunt scrise folosind un tag de nceput, un tag de
sfrs, it s, i tot ceea ce se afla ntre ele:
<numetag>cont, inut</numetag>
Elementul HTML este totul ncepnd cu tagul de deschidere s, i pna la
tagul de nchidere, inclusiv tagul de nchidere:
<p>Primul meu paragraf HTML.</p>
Tagul de nceput
<h1>
<p>
<br>
Cont, inutul elementului

Primul titlu
Primul paragraf.
Tagul de sfrs, it
</h1>
</p>
Observat, ie: unele elemente HTML nu au un tag de nchidere.
Elementele HTML imbricate

I
Elementele HTML pot cont, ine alte elemente HTML imbricate.
Toate documentele HTML constau din elemente HTML imbricate.
Exemplul de mai jos cont, ine 4 elemente HTML:
<html>
<body>
<h1>Primul titlu</h1>
<p>Primul paragraf.</p>
</body>
</html>
1
2
3
4
5
6
7
8
I
I
I
I
I
I
I
I
Elementul <html>defines, te ntregul document.

El are un tag de nceput <html>s, i un tag de sfrs, it
</html>.
Cont,inutul elementului este un alt element HTML
(elementul <body>).
Elementul <body>defines, te corpul
documentului. El are un tag de nceput <body>s, i
un tag de sfrs, it </body>.
Acesta cont,ine doua alte elemente HTML
(<h1>s, i <p>).
Elementul <h1>defines, te un titlu. El are un tag
de nceput <h1>s, i un tag de sfrs, it </h1>.
Cont,inutul elementului este: Primul titlu.
Elementul <p>defines, te un paragraf. El are un
tag de nceput <p>s, i un tag de sfrs, it </p>.
Cont,inutul elementului este: Primul paragraf.
Nu uitat, i tagul de sfrs, it

Unele elemente HTML vor fi afis, ate corect, chiar daca uitat, i tagul de
sfrs, it:
<html>
<body>
<p>Acesta este un paragraf
<p>Acesta este un paragraf
</body>
</html>
Exemplul de mai sus funct, ioneaza n toate browserele deoarece tagul de

sfrs, it este considerat opt, ional.
Dar nu va bazat, i pe asta! Se pot genera rezultate neas, teptate s, i/sau
erori daca uitat, i tagul de sfrs, it.
1
2
3
4
5
6
7
8
Elemente HTML vide

I
a cont, inut sunt denumite elemente vide.

Elementele HTML far
a tag de sfrs, it (tagul

Elementul <br>este un element vid far
<br>determina un salt pe linia urmatoare

- line break).
Elementele vide pot fi "nchise" n cadrul tagului de deschidere

astfel: <br />.
n HTML 5 nu este obligatoriu ca elementele vide sa fie nchise. Dar

daca dorit, i sa fit, i mai strict, i sau daca dorit, i ca documentul sa poata fi
citit de un browser XML, atunci va trebui sa nchidet, i toate
elementele HTML.
Sfat pentru scrierea HTML

I
Folosit, i litere mici pentru numele tagurilor
Tagurile HTML nu depind de majuscule sau minuscule:

<P>nseamna acelas, i lucru ca <p>.
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.
Lista tagurilor HTML grupate pe categorii
Taguri HTML de baza

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 rndul urmator
I <hr> = defines, te trecerea la o alta tema 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 scrisa n sens invers fat, a de textul
principal
I <bdo> = schimba 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 alta sursa.
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 lucrari.
I <code> = defines, te un fragment de cod program.

I <del> = defines, te text ce a fost scos din document.
I <dfn> = reprezinta 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
marimea
textului.
I <i> = defines, te o parte a textului ce apart, ine unei schimbari

de voce/dispozit, ie.
I <ins> = defines, te un text care a fost inserat n document.
I <kbd> = defines, te un text de la tastatura.

I <mark> = element nou HTML5, defines, te un text marcat.
I <meter> = element nou HTML5, afis, eaza un nivel ntr-o bara de marime
cunoscuta.
I <pre> = defines, te text preformatat.
I <progress> = element nou HTML5, afis, eaza progresul ntr-o bara 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 suporta
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.

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
taiat.
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 data/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, a de textul normal.
I <var> = defines, te o variabila.
I <wbr> = element nou HTML5, defines, te un posibil salt la un rnd nou.
Taguri HTML pentru formulare s, i introducerea datelor

I <form> = defines, te un formular HTML pentru introducerea datelor de catre
utilizator.
I <input> = defines, te un cmp de intrare.
I <textarea> = defines, te un cmp de intrare pe mai multe rnduri (suprafat, a text).
I <button> = defines, te un buton.
I <select> = defines, te o lista auto derulanta.
I <optgroup> = defines, te un grup de opt, iuni corelate ntr-o lista auto derulanta.
I <option> = defines, te o opt, iune ntr-o lista auto derulanta.
I <label> = defines, te o eticheta pentru un element <input>.

I <fieldset> = grupeaza elemente corelate dintr-un formular.
I <legend> = defines, te un titlu pentru un element <fieldset>.
I <datalist> = element nou HTML5, specifica o lista de opt, iuni predefinite pentru
cmpurile de intrare.
I <keygen> = element nou HTML5, defines, te un cmp 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 fereastra (un

cadru) dintr-un set de cadre.
<frameset> = nu este suportat n HTML5, defines, te un set de

cadre.
<noframes> = nu este suportat n HTML5, defines, te un cont, inut

alternativ pentru utilizatorii care nu pot vedea cadre.
<iframe> = defines, te un cadru inline.
Taguri HTML pentru imagini

I
<img> = defines, te o imagine.
<map> = defines, te o harta imagine.
, i imagine.
<area> = defines, te o suprafat, a n interiorul unei hart
<canvas> = element nou HTML5, folosit pentru a desena grafica

de obicei prin scripting (JavaScript).
<figcaption> = element nou HTML5, defines, te un titlu pentru

elementul <figure>.
<figure> = element nou HTML5, specifica un cont, inut propriu.
Taguri HTML pentru Audio/Video

I
<audio> = element nou HTML5, defines, te un cont, inut audio.
<source> = element nou HTML5, defines, te mai multe resurse

media pentru elementele audio s, i video.
<track> = element nou HTML5, defines, te textele asociate pentru

elementele video s, i audio.
<video> = element nou HTML5, defines, te un cont, inut video sau

film.

Taguri HTML pentru legaturi
I
<a> = defines, te un hyperlink.
<link> = defines, te relat, ia dintre un document s, i o resursa externa

a la o foaie de stil CSS)
(cel mai adesea o legatur
<nav> = element nou HTML5, defines, te legaturi

pentru navigare.
Taguri HTML pentru liste

I
<ul> = defines, te o lista neordonata.
<ol> = defines, te o lista ordonata.
<li> = defines, te un element al unei liste.
<dir> = nu este suportat n HTML5 (a se folosi <ul>, defines, te o

lista director.
<dl> = defines, te o lista de definit, ii.
<dt> = defines, te un termen.
<dd> = defines, te definit, ia unui termen.
<menu> = defines, te un meniu de comenzi.
<menuitem> = element nou HTML5, defines, te un element de

meniu.
Taguri HTML pentru tabele

I
<table> = defines, te un tabel.
<caption> = defines, te titlul unui tabel.
<th> = defines, te o celula din antetul tabelului.
<tr> = defines, te un rnd dintr-un tabel.
<td> = defines, te o celula dintr-un tabel.
<thead> = grupeaza cont, inutul antetului unui tabel.
<tbody> = grupeaza cont, inutul corpului unui tabel.
<tfoot> = grupeaza cont, inutul subsolului unui tabel.
, ile coloanelor dintr-un element

<col> = specifica proprietat
<colgroup>.
<colgroup> = Specifica un grup de una sau mai multe coloane

dintr-un tabel pentru formatare.
Taguri HTML pentru stiluri s, i semantica

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 bara laterala.
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 fereastra.
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.
<meta> = defines, te meta datele despre un document HTML.
acina
<base> = defines, te rad

pentru URL-urile din document.
<basefont> = nu este suportat n HTML5 (a se folosi CSS).,
defines, te o culoare, marime

s, i font implicite pentru textul din
document.
Taguri HTML pentru programare

I
<script> = defines, te un script pe partea de client.
<noscript> = defines, te un cont, inut alternativ pentru utilizatorii

care nu suporta scripturi.
<applet> = nu este suportat n HTML5 (a se folosi <embed>

sau <object>). defines, te un applet.
<embed> = element nou HTML5, defines, te un container pentru o

aplicat, ie externa non-HTML.
<object> = defines, te un obiect inclus.
<param> = defines, te un parametru pentru un obiect.
Atribute HTML
Atributele HTML
I
Atributele furnizeaza informat, ii suplimentare despre elementele

HTML.
Elementele HTML pot avea atribute care sunt specificate

ntotdeauna n tagul de nceput.
Atributele sunt perechi: nume="valoare"
Atributul lang
Limba n care este scris documentul este declarata n tagul <html>.
Pentru aceasta se foloses, te atributul lang.
Declararea limbii este importanta pentru aplicat, ii specifice (screen
readers - pentru cei cu deficient, e de vedere) s, i pentru motoarele de
cautare:
<html lang="en-US">
Primele doua litere specifica limba (en). Daca este un dialect, folosit, i
nca doua litere (US).
Atributul title
Paragrafele HTML sunt definite cu eticheta <p>.
n exemplul urmator,
elementul <p>are un atribut title. Valoarea
atributului este "Lorem Ipsum":
<p title="Lorem Ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget quam id neque
tincidunt consequat. Etiam eros nisi, tincidunt at posuere ac, tristique sed ligula
. Vivamus dictum est libero, at dictum nibh sodales ac. Cras efficitur risus nec
enim interdum egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque semper vestibulum odio eget iaculis.
</p>
Observat, ie: Atunci cnd cursorul este mutat peste element, titlul va fi
afis, at ca un comentariu.
1
2
Atributul href
Linkurile HTML sunt definite cu eticheta <a>tag.
Adresa linkului este specificata cu ajutorul atributului href.
<a href="http://itee.elth.pub.ro">Acesta este un link</a>
Atribute referitoare la dimensiuni

Imaginile HTML sunt definite cu ajutorul tagului <img>.
Numele fis, ierului sursa s, i dimensiunile imaginii (width s, i height) sunt
deasemenea date ca atribute:
<img src="smiles.jpg" width="104" height="142">
Dimensiunile imaginii sunt specificate n pixeli: width="104" nseamna

, ime pe ecran de 104 pixeli.
o lat
Atributul alt
Atributul alt specifica un text alternativ care sa fie folosit atunci cnd un
element HTML nu poate fi afis, at.
Valoarea atributului poate fi citita de "screen readers" (pentru cei cu
pagina web, de
deficient, e de vedere). Astfel cineva care "asculta"
poate "auzi" elementul.
exemplu o persoana oarba,
<img src="smiles.jpg" alt="smiles.com" width="104" height="142">
Sugestii
Sugestii:
1. Sa folosit, i mereu atributele scrise cu minuscule, des, i standardul
HTML 5 nu necesita litere mici pentru numele atributelor. De exemplu
atributul title poate scris Title s, i/sau TITLE. n HTML 4 este recomandat
sa se foloseasca minuscule, lucru obligatoriu pentru standarde mai stricte
precum XHTML.
Observat, ie: Minusculele sunt cele mai utilizate s, i sunt mai us, or de scris.
2. Folosit, i ntotdeauna apostrofuri sau ghilimele pentru valorile
atributelor. Totus, i standardul HTML 5 nu necesita apostrofuri sau
ghilimele n jurul valorilor atributelor.
Sugestii
Atributul href de mai sus poate fi scris ca:
<a href=http://itee.elth.pub.ro>
Uneori este necesar sa folosit, i ghilimele. Ceea ce urmeaza nu este

corect, deoarece cont, ine un spat, iu:
<p title=Lorem Ipsum>
Observat, ie: Omiterea apostrofurilor sau a ghilimelelor poate produce

erori.
Apostrofuri sau ghilimele?

Ghilimelele sunt cele mai uzuale n HTML dar pot fi folosite s, i
apostrofurile.
Uneori, atunci cnd valoarea atributului cont, ine ghilimele, este necesar
sa folosim apostrofuri:
<p title=Echipa "Petrolul" Ploiesti>
sau viceversa:
<p title="Echipa Petrolul Ploiesti">
Atribute HTML
Mai jos este data o lista a celor mai uzuale atribute folosite n HTML:
Atribut
Descriere
alt
disabled
href
id
src
style
title
value
Specifica un text alternativ pentru o imagine

Specifica dezactivarea unui element de intrare
Specifica adresa URL pentru un link
Specifica un identificator unic pentru un element
Specifica adresa unei imagini
Specifica stilul CSS inline pentru un element
Specifica informat, ii suplimentare despre un element
Specifica valoarea pentru un element de intrare
Modificarea aspectului HTML folosind CSS
Aspectul poate fi adaguat

elementelor HTML n 3 moduri:
I
Inline - folosind atributul style n elementele HTML
Internal - folosind un element <style>n sect, iunea <head>
External - folosind unul sau mai multe fis, iere externe CSS
Sintaxa CSS
CSS are urmatoarea

sintaxa:
element { proprietate:valoare; proprietate:valoare }
Elementul este un nume de element HTML. Proprietatea este o
proprietate CSS. Valoarea este o valoare CSS.
Stilurile multiple sunt separate prin punct s, i virgula.
CSS inline
CSS inline este util pentru aplicarea unui stil unic unui singur element
HTML:
CSS inline foloses, te atributul style.
n continuare se modifica culoarea unui singur titlu:
<h1 style="color:NavyBlue">Acesta este un titlu albastru</h1>
CSS intern
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1
{color:NavyBlue}
p
{color:green}
</style>
</head>
<body>
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
I Poate fi folosita o foaie de
stil interna pentru a defini un

stil comun tuturor elementelor
de pe o pagina.
I CSS intern se defines, te n
cadrul sect, iunii <head> a

paginii HTML folosind un
element <style> :
CSS extern
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.
css">
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
I CSS extern este ideal atunci
cnd stilul este aplicat mai

multor paginii.
I Folosind foi de stil externe, se
poate schimba aspectul unui

ntreg site web modificnd
un singur fis, ier.
I Stilurile externe sunt definite
n fis, iere externe CSS s, i

referent, iate n sect, iunea
<head>a unei pagini HTML.
Fonturi CSS
<!DOCTYPE html>
<html>
<head><style>
h1 {
color:NavyBlue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}</style></head>
<body>
<h1>Un titlu</h1>
<p>Un paragraf.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
I Proprietatea CSS color
defines, te culoarea textului

care urmeaza sa fie folosita
pentru elementul HTML.
I Proprietatea CSS
font-family defines, te fontul

care sa fie folosit pentru
elementul HTML.
I Proprietatea CSS font-size
defines, te marimea
textului
care sa fie folosita pentru
elementul HTML.
Modelul cutie (Box Model)

Orice element HTML are un cadru n jurul lui, chiar daca nu este vizibil.
Proprietatea CSS border defines, te un chenar vizibil n jurul unui
element HTML:
p {
border:1px solid black;
}
1
2
3

a (un spat, iu) n interiorul
Proprietatea CSS padding defines, te o t, esatur
chenarului pna la elementul propriu-zis:
p {
padding:10px;
}
1
2
3
4

Proprietatea CSS margin defines, te o margine (spat, iu) n exteriorul
chenarului:
p {
padding:10px;
margin:30px;
}
Observat, ie: n exemplele CSS de mai sus am folosit px pentru a defini
marimile
n pixeli.
1
2
3
4
5
Atributul id
n exemplele de mai sus am folosit CSS pentru a modifica aspectul
elementelor HTML de o maniera generala.
Pentru a defini un stil anume pentru un element anume, adaugat

, i mai
nti un atribut id elementului:
<p id="p01">Sunt diferit</p>
apoi definit, i un stil anume elementului identificat:

p#p01 {
color:NavyBlue;
}
1
2
3
Atributul clasa
special de elemente, adaugat
Pentru a defini un stil pentru un tip (clasa)

,i
mai nti un atribut de clasa elementului:
<p class="error">Sunt diferit</p>
Apoi definit, i un stil anume pentru elementele din clasa respectiva:

p.error {
color:red;
}
Observat, ie: Folosit, i id pentru a adresa elemente unice. Folosit, i o clasa

pentru a adresa grupuri de elemente.
1
2
3
, ite n HTML 5
Taguri s, i atribute depas
n versiuni mai vechi de HTML au folosite mai multe taguri s, i atribute
pentru a modifica aspectul documentelor HTML.
Aceste taguri s, i atribute nu sunt compatibile cu HTML 5!
Evitat, i sa folosit, i elementele <font>, <center> s, i <strike>.
Deasemenea evitat, i sa folosit, i atributele color s, i bgcolor.
Folosit, i n loc de aceasta limbajul CSS!

, it
Titluri HTML
Titlurile sunt elemente importante din punct de vedere semantic n
documentele HTML.
Titlurile (antetele) sunt definite cu etichetele de la <h1>la <h6>.
<h1>defines, te cel mai important titlu iar <h6>defines, te cel mai put, in
important titlu.
Observat, ie: Browserele adauga n mod automat spat, ii albe (o margine)

nainte s, i dupa fiecare titlu.
1
2
3
Titlurile reflecta ceva important

Folosit, i etichetele h1...h6 pentru titluri. Nu le folosit, i pentru a face
corpul de litere mai mare sau aldin.
Motoarele de cautare
folosesc titlurile pentru a indexa structura s, i
cont, inutul paginilor web.
Utilizatorii rasfoiesc
paginile prin titluri. Este importanta folosirea titlurilor
pentru a structura documentul.
Titlurile h1 ar trebui sa fie titlurile cele mai importante, urmate de h2, h3
etc.
Linii orizontale HTML

Eticheta <hr>creaza o linie orizontala ntr-o pagina HTML.
Elementul hr poate fi folosit pentru a separa cont, inutul:
<hr>
<hr>
1
2
3
4
5
Elementul <head>
Elementul <head>nu are nimic de a face cu titlurile antet.
Elementul <head>cont, ine metadate. Metadatele nu sunt afis, ate.
Elementul <head>se plaseaza ntre etichetele <html>s, i <body>:
<!DOCTYPE html>
<html>
<head>
<title>Un fisier HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Observat, ie: Metadatele sunt date despre date. Metadatele HTML sunt
date despre documentul HTML.
1
2
3
4
5
6
7
8
9
10
11
12
Elementele <title>s, i <meta>

Defines, te titlu documentului.
Elementul <title> constituie metadata.
Titlul nu va fi afis, at n document, poate fi afis, at nsa n titlul ferestrei
browserului.
Elementul <meta> constituie deasemenea metadate.
El poate fi folosit pentru a defini setul de caractere s, i alte informat, ii
despre documentul HTML.
Alte elemente meta
n cadrul capitolului despre stilurile HTML vom vedea s, i urmatoarele

elemente meta:
Elementul <style> este folosit pentru a defini foile de stil CSS interne.
Elementul <link> este folosit pentru a defini foi de stil CSS externe.
Cum se poate vedea sursa paginilor HTML?

Pentru a vedea sursa unei pagini web, ceea ce se afla n spatele a ce
se afis, eaza 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, innd codul HTML
al paginii.
Paragrafe n HTML
, ite n paragrafe.
Documentele HTML sunt mpart
Paragrafele sunt definite folosind elementul <p>.
<p>Acesta este un alt paragraf.</p>
Observat, ie: Browserele adauga suplimentar cte o linie goala nainte s, i

dupa paragraf.
1
2
Paragrafe n HTML
<p>
Acest paragraf
contine multe linii
in codul sursa,
dar browserul
le ignora.
</p>
<p>
Acest paragraf
contine
multe
in codul
sursa,
dar
browserul
le ignora.
</p>
linii
1
2
3
4
5
6
7
8
9
10
11
12
13
14
I Nu putet, i fi complet siguri pe

modul n care este afis, ata pagina
HTML.
I Pe ecrane mici sau mari, n
ferestre redimensionate vor fi
rezultate diferite.
I n HTML nu poate fi modificat
rezultatul adaugnd
spat, ii sau
linii suplimentare n codul HTML.
I Browserul va elimina spat, iile
s, i liniile suplimentare atunci
cnd afis, eaza pagina.
I Oricte spat, ii sau linii vor
determina doar un singur spat, iu.
Nu uitat, i eticheta de sfrs, it

Majoritatea browserelor vor afis, a pagina corect chiar daca uitat, i tagul
, it:
de sfars
<p>This is a paragraph
<p>This is another paragraph
Exemplul de mai sus va funct, iona n majoritatea browserelor dar nu va

bazat, i pe asta, se pot obt, ine rezultate nedorite.
Observat, ie: Versiuni mai stricte de HTML precum XHTML nu permit
omiterea etichetei de sfrs, it.
1
2
Trecerea pe rnd nou

Elementul <br> defines, te un salt pe un rnd nou.
a a ncepe un nou
Folosit, i <br>daca dorit, i un salt la o linie noua far
paragraf:
<p>Acesta este un <br>para-<br>graf cu salt la linie noua.</p>
Elementul <br>este un element HTML vid, nu are tag de sfrs, it.
Scrierea preformatata
<p>Aceasta strofa va fi afisata pe un singur rand:</p>
<p>
Pe langa plopii fara sot
Adesea am trecut;
Ma cunosteau vecinii toti
Tu nu m-ai cunoscut...
</p>
1
2
3
4
5
6
7
8
9
10
Scrierea preformatata
Elementul <pre> defines, te text preformatat.
Textul din interiorul unui element <pre>defines, te este afis, at cu un corp de
litera monospat, iat (de obiecei Courier) s, i pastreaz

a spat, iile s, i rndurile
noi:
<pre>
Pe langa plopii fara sot
Adesea am trecut;
Ma cunosteau vecinii toti
Tu nu m-ai cunoscut...
</pre>
1
2
3
4
5
6
7
8
9
Stiluri HTML
Orice element HTML are un stil implicit (culoarea de fundal este alba iar
culoarea textului este neagra).

a folosind
Modificarea stilului implicit al unui element HTML poate fi facut
atributul style.
Exemplul urmator
modifica culoarea fundalului din alb n gri deschis:
<body style="background-color:lightgrey">
</body>
Observat, ie: Atributul bgcolor suportat n versiuni mai vechi de HTML nu

mai este valabil n HTML 5.
1
2
3
4
5
6
Atributul HTML style
Atributul HTML style are urmatoarea

sintaxa:
style="property:value"
Proprietatea reprezinta o proprietate CSS. Valoarea este o valoare CSS.

Observat, ie: Vom reveni la CSS put, in mai departe.
Culoarea s, i fontul n HTML

Proprietatea color defines, te culoarea textului folosita pentru elementul
HTML:
<h1 style="color:NavyBlue">Acesta este un titlu</h1>
<p style="color:red">Acesta este un paragraf.</p>
1
2
Proprietatea font-family defines, te fontul care sa fie folosit pentru un

element HTML:
<h1 style="font-family:verdana">Acesta este un titlu</h1>
<p style="font-family:courier">Acesta este un paragraf.</p>
Observat, ie: Tagul <font>, tag suportat n versiuni mai vechi de HTML
nu mai este valabil n HTML 5.
1
2

Marimea
s, i alinierea textului n HTML
Proprietatea font-size defines, te marimea

textului care sa fie folosita
pentru un element HTML:
<h1 style="font-size:300\%">Acesta este un titlu</h1>
<p style="font-size:160\%">Acesta este un paragraf.</p>
1
2
Proprietatea text-align defines, te modul de aliniere orizontala a textului

pentru elementele HTML:
<h1 style="text-align:center">Titlu centrat</h1>
Observat, ie: Eticheta <center> din versiuni mai vechi ale HTML nu mai
este valabila n HTML 5.
1
2
Elemente de formatare a textului

HTML defines, te elemente pentru definirea textului cu o semnificat, ie
aparte.
HTML foloses, te elemente precum <b>and <i>pentru formatarea textului
ca de exemplu:
I
Text bolduit
Text important
Text italic
Text accentuat
Text marcat
Text cu corp de litera mai mic
Text eliminat
Text inserat
Indice
Exponent
Formatarea cu aldine s, i importanta

a o important, a suplimentara.
Elementul <b>defines, te un text bolduit, far

<p>Acest text este obisnuit.</p>
<p><b>Acest text este bolduit</b>.</p>
Elementul <strong>defines, te text cu valoare semantica suplimentara.

<p><strong>Acest text este important</strong>.</p>
Formatarea cu italice s, i accentuata

a o important, a suplimentara.
Elementul <i>defines, te text italic, far

<p><i>Acest text este italic</i>.</p>
Elementul <i>defines, te text accentuat, cu o valoare semantica
suplimentara.
<p><em>Acest text este accentuat</em>.</p>
Observat, ie: browserele afis, eaza <strong>la fel ca <b>s, i <em>la fel ca
<i>.
Dar exista o diferent, a n semnificat, ia acestor taguri: <b>s, i <i>definesc
text bolduit s, i italic iar <strong>s, i <em>definesc un text "important".
Formatarea cu small s, i mark

Elementul <small>defines, te un text scris mai mic:
<h2>Formatare cu <small>Small</small></h2>
Elementul <mark>defines, te un text marcat sau evident, iat:

<h2>HTML <mark>Marked</mark> Formatting</h2>
Formatarea eliminarilor
s, i a inserarilor
Elementul <del>defines, te un text s, ters (eliminat).
<p>Culoarea mea preferata este <del>albastru</del> rosu.</p>
Elementul <ins>defines, te un text inserat (adaugat).

<p>Culoarea mea <ins>favorita</ins> este rosu.</p>
Formatarea indicilor s, i a exponent, ilor

Elementul <sub>defines, te un text la indice (subscript).
<p>Acesta este un text la <sub>indice</sub>.</p>
Elementul <sup>defines, te un text la exponent (superscript).

<p>Acesta este un text la <sup>exponent</sup>.</p>
Elementele citate
Elementul HTML <q> se foloses, te pentru citate scurte.
Browserele insereaza de obicei ghilimele n jurul elementului <q>.
<p>Obiectivul organizatiei WWF este sa: <q>Construiasca un viitor in care oamenii sa
traiasca in armonie cu natura.</q></p>
Elementele citate
Elementul HTML <blockquote> se foloses, te pentru citate mai lungi
Browserele indenteaza de obicei elementele <blockquote>.
<p>Un citat de pe siteul WWF:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The worlds leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
1
2
3
4
5
6
7
8
Elementele pentru abrevieri s, i contacte

Elementul <abbr> defines, te o abreviere sau un acronim.
Marcarea abrevierilor poate ajuta browserele, sistemele de traducere s, i
motoarele de cautare.
<p><abbr title="Organizatia Mondiala a Sanatatii">OMS</abbr> a fost fondata in 1948.</p>
Elementul <address> defines, te informat, iile de contact ale

autorului/proprietarului unui document sau articol.
Elementul <address>este de obicei afis, at cu italice. Majoritatea
browserelor vor adauga

cte un rnd nainte s, i dupa element.
<address>
Scris de Ion Popescu.<br>
Ne puteti vizita in:<br>
Brasov, ROMANIA
</address>
1
2
3
4
5
s, i pentru scrierea n sens

Elementele pentru titluri de lucrari
invers
Elementul <cite> defines, te titlul unei lucrari.

Browserele afis, eaza de obicei elementele <cite>cu italice.
<p><cite>The Scream</cite> pictat de Edward Munch in 1893.</p>
Elementul <bdo> defines, te modul de scriere dreapta-stnga sau

stnga-dreapta (Bi-Directional Override):
<bdo dir="rtl">Acest text va fi scris invers.</bdo>
Formatarea pentru cod program
De obicei HTML foloses, te marime

variabila a corpului de litera s, i spat, iere
variabila.
Aceasta nu este de dorit n cazul codului de programe.
Elementele <kbd>, <samp>s, i <code>conduc la dimeniuni fixate pentru
corpul de litera s, i spat, iere.
Elementul <kbd> defines, te o intrare de la tastatura:

<p>Pentru a deschide un fisier, selectati:</p>
<p><kbd>File | Open...</kbd></p>
1
2
unui program:
Elementul <samp> defines, te textul obt, inut n urma rularii
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
1
2
3
4

Elementul <code> defines, te cod program:
<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"NavyBlue" }
</code>
1
2
3
Elementul <code>nu pastreaz

a spat, ii albe suplimentare sau linii
multiple. Pentru a solut, iona aceasta, se poate folosi suplimentar un
element <pre>:
<p>Exemplu de cod program:</p>
<code>
<pre>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"NavyBlue"
}
</pre>
</code>
1
2
3
4
5
6
7
8
9
10
11
12
Formatarea matematica
Elementul <var> defines, te o variabila matematica:

<p>Einstein a demonstrat:</p>
<p><var>E = m c<sup>2</sup></var></p>
1
2
3
Comentarii n HTML
Etichetele pentru comentarii n HTML sunt <! s, i >.

nu s, i n
Observat, ie: n tagul de deschidere este un semnul exclamarii,
, it.
cel de sfars
Comentariile nu sunt afis, ate de browser dar pot servi la comentarea
documentului HTML, putnd fiind adaugate

observat, ii s, i note de
reamintire:

<p>Acesta este un paragarf.</p>

1
2
3
Comentarii n HTML
Comentariile pot servi s, i la deapanarea paginilor HTML deoarece pot fi
a sursa erorilor:
ascunse linii de cod una cte una, pna este gasit

1
2
3
Comentarii condit, ionale

Comentariile condit, ionale definesc tagurile HTML care sa fie executate
doar n Internet Explorer.

Exista s, i taguri de comentarii generate de programe gen FrontPage sau
Expression Web. E bine sa fie lasate

nemodificate.
1
2
3
Linkuri
Linkurile se gasesc
n aproape toate paginile web. Linkurile permit
utilizatorilor sa navigheze de la o pagina la alta.
Linkurile HTML se mai numesc s, i hiperlinkuri.
, i, sarit
, i la alt
Un hiperlink este un text sau o imagine pe care daca apasat
document.
Sintaxa linkurilor
n HTML linkurile sunt definite folosind eticheta <a>:
<a href="url">text link </a>
<a href="http://itee.elth.pub.ro/~vbucata/">Laboratorul de Informatica</a>
Atributul href specifica adresa destinat, ie

(http://itee.elth.pub.ro/ vbucata/)
Doar textul linkului este vizibil (Laboratorul de Informatica).
Apasnd
pe textul linkului vet, i fi redirect, ionat, i catre
adresa respectiva.
Sintaxa linkurilor
Observat, ie: Textul linkului nu trebuie sa fie obligatoriu text. Poate fi o
imagine HTML sau orice alt element HTML.
a semnul slash de la sfrs, itul adresei subfolderului, se
Observat, ie: Far
pot genera doua cereri serverului. Cele mai multe servere vor adauga
automat un slash la sfrs, itul adresei s, i apoi vor genera o noua cerere.
Exemplul de mai sus a folosit un URL absolut (adresa completa a unui
site web).
Un link local (catre

acelas, i site web) este specificat folosind un URL
a http://www....).
relativ (far
<a href="lectia1.html">Lectia 1</a>
Culorile linkurilor
<style>
a:link
{color:green; background-color
:transparent; text-decoration:none
}
a:visited {color:pink; background-color:
transparent; text-decoration:none}
a:hover
{color:red; background-color:
transparent; text-decoration:
underline}
a:active {color:yellow; backgroundcolor:transparent; text-decoration
:underline}
</style>
1
2
3
4
Atunci cnd se muta mouseul

peste un link, se produc n mod
normal doua lucruri:
Cursorul mouseului se va
transforma ntr-o mna iar
culoarea elementului link se va
modifica.
Implicit, un link apare astfel (n
toate browserele):
Un link nevizitat este subliniat s, i
albastru.
Un link vizitat este subliniat s, i
mov.
Un link activ este subliniat s, i ros, u
Culorile implicite pot fi modificate
folosind stilurile.
Atributul target
Atributul target specifica unde sa se deschida documentul vizat.
n exemplul urmator
linkul vizat se va deschide ntr-o fereastra noua a
browserului sau ntr-un tab nou:
<a href="http://www.w3schools.com/" target="_blank">Vizitati siteul W3Schools!</a>
Atributul target
Deschide documentul vizat...
Valoare target
Descriere
_blank
_self
_parent
_top
numele cadrului
ntr-o fereastra sau tab nou
n acelas, i cadru de unde a fost apasat

(implicit)
n cadrul parinte
n corpul principal al ferestrei
ntr-un cadru separat
Daca pagina web este blocata ntr-un cadru, se poate folosi target="_top"
pentru a "sparge" cadrul:
<a href="http://www.w3schools.com/html/" target="_top">Tutorial HTML 5</a>
Imagini pentru linkuri

Adesea se folosesc imagini drept linkuri:
<a href="default.asp">
<img src="html.gif" alt="Tutorial HTML" style="width:42px;height:42px;border:0">
</a>
Observat, ie: border:0 este adaugat

a pentru a mpiedica IE9 (sau
anterior) sa afis, eze un chenar n jurul imaginii.
1
2
3
Crearea unui semn de carte

I
Semnele de carte HTML sunt folosite pentru a permite utilizatorilor

sa sara la o anumita sect, iune a paginii Web.
Semnele de carte sunt utile daca siteul are pagini lungi.
Pentru a crea un semn de carte, trebuie specificat mai nti
semnul s, i apoi adaugat

un link catre
el.
, ura catre
Atunci cnd linkul este apasat,

pagina se va desfas
semnul
de carte.
un semn de carte cu atributul id:

Mai nti sa cream
<h2 id="sfaturi">Sectiunea cu sfaturi utile</h2>
Crearea unui semn de carte

I
Apoi trebuie creat un link catre

semnul de carte ("Sectiunea cu
sfaturi utile") din aceeas, i pagina:

<a href="#sfaturi">Vizitati sectiunea cu sfaturi utile</a>
sau sa se adauge un link catre

semnul de carte ("Sectiunea cu
sfaturi utile") din alta pagina:

<a href="html_tips.htm#tips">Vizitati sectiunea cu sfaturi utile</a>
Elemente imagine
n paginile web pot fi incluse imagini n diferite formate: jpg, gif, png
<!DOCTYPE html>
<html>
<body>
<h2>Peisaj montan</h2>
<img src="pic_mountain.jpg" alt="Peisaj montan" style="width:304px;height:228px;">
</body>
</html>
, imea s, i nalt
, imea unei imagini.
Observat, ie: specificat, i ntotdeauna lat
Daca acestea nu sunt specificate, pagina va fi afis, ata necorespunzator

n
timp ce se ncarca imaginea.
1
2
3
4
5
6
7
Sintaxa elementelor imagine

n HTML imaginile sunt definite folosind eticheta <img>.
Elementul <img>este vid, nu cont, ine dect atribute s, i nu are un tag de
, it.
sfars
Atributul src specifica adresa web (URL) a imaginii:
<img src="url" alt="un_text">
Atributul alt specifica un text alternativ pentru o imagine, n cazul n care

o eroare n atributul src sau
imaginea nu poate fi afis, ata (conexiune lenta,
daca utilizatorul foloses, te un screen reader).
<img src="numegresit.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
a el.
Atributul alt este obligatoriu. O pagina web nu va fi validata far

, imea s, i nalt
, imea
Marimea
imaginii - lat
, imea s, i nalt
, imea unei imagini poate fi folosit atributul
Pentru a specifica lat
style.
Valorile sunt specificate n pixeli (utilizat, i px dupa valoare):
<img src="html5.gif" alt="Emblema HTML 5" style="width:128px;height:128px;">
Pot fi utilizate s, i atributele width s, i height. Valorile sunt specificate

implicit n pixeli:
<img src="html5.gif" alt="Emblema HTML 5" width="128" height="128">
Width s, i Height sau Style?

Att atributele width s, i height precum s, i style sunt corecte n ultimul
standard HTML 5.
sa folosit, i atributul style, aceasta mpiedica
Va recomandam
modificarea dimensiunilor imaginii de catre

foile de stil.
<!DOCTYPE html>
<html>
<head><style>
img {
width:100%;
}</style>
</head>
<body>
<img src="html5.gif" alt="Emblema HTML 5" style="width:128px;height:128px;">
<img src="html5.gif" alt="Emblema HTML 5" width="128" height="128">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
Imagini din alt folder sau din alt server
Daca nu este specificat un director, browserul va cauta

o imagine n
acelas, i folder ca pagina web.
Mai uzual nsa imaginile sunt stocate ntr-un subdirector. El trebuie inclus
n atributul src:
<img src="/imagini/html5.gif" alt="Emblema HTML 5" style="width:128px;height:128px;">
Unele siteuri web stocheaza imaginile pe servere de imagini.

De fapt, imaginile pot fi accesate de pe orice adresa web din Internet:
<img src="http://itee.elth.pub.ro/imagini/zambet.jpg" alt="Un zambet">
Imagini animate
Standardul GIF permite imagini animate:
<img src="programming.gif" alt="Programator" style="width:48px;height:48px;">
de imagini animate nu este diferita de cea

Observat, i ca sintaxa inserarii
pentru imagini obis, nuite.
Imagini ca linkuri
Pentru a folosi o imagine ca link, includet, i un element img n interiorul
unui element a:
<a href="default.asp">
<img src="smiley.gif" alt="Lectia 3" style="width:42px;height:42px;border:0;">
</a>
Observat, ie: Adaugat

, i "border:0;" pentru a mpiedica IE9 (sau anterior)
afis, area unui chenar n jurul imaginii.
1
2
3
Imagini flotante
Folosit, i proprietatea CSS float pentru a extrage imaginea din fluxul
normal al documentului s, i flotarea ei.
Imaginea poate fi flotanta la dreapta sau la stnga textului:
<p>
<img src="smiley.gif" alt="Zambaret" style="float:right;width:42px;height:42px;">
Imaginea va fi flotanta la dreapta textului.
</p>
<p>
<img src="smiley.gif" alt="Zambaret" style="float:left;width:42px;height:42px;">
Imaginea va fi flotanta la stanga textului.
</p>
1
2
3
4
5
6
7
8
9
, i imagine
Hart
Folosit, i elementul <map> pentru a defini o harta imagine. O harta
imagine este o imagine cu zone ce pot trimite n alta parte.
Atributul name al tagului <map>este asociat cu atributul usemap al
elementului <img>s, i creeaza o relat, ie ntre imagine s, i harta.

Elementul <map>cont, ine mai multe elemente <area>care definesc
zonele din harta imagine ce trimit n alta parte:
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;
">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
1
2
3
4
5
6
7
Tabele n HTML - definirea tabelelor HTML
Tabele n HTML - definirea tabelelor HTML

<table style="width:100%">
<tr>
<td>Popescu</td>
<td>Ion</td>
<td>50</td>
</tr>
<tr>
<td>Popa</td>
<td>George</td>
<td>94</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
Tabelele sunt definite folosind

elementul <table>.
Tabelele sunt structurate n rnduri
folosind tagul <tr>.
Rndurile tabelelor sunt structurate
n celule (date) folosind tagul <td>.
Un rnd de tabel poate fi structurat
s, i n capete de tabel folosind
eticheta <th>.
Observat, ie: Datele tabelului
<td>sunt containerele de date ale
tabelului. Ele pot cont, ine orice fel
de elemente HTML precum text,
imagini, liste, alte tabele etc.
Atributul border
a linii.
Daca nu specificat, i un chenar pentru tabel, va fi afis, at far
Chenarul poate fi adaugat

folosind atributul border:
<table border="1" style="width:100%">
<tr>
<td>Popescu</td>
<td>Ion</td>
<td>50</td>
</tr>
<tr>
<td>Popa</td>
<td>George</td>
<td>94</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
Chenarul folosind CSS

Observat, ie: Atributul border este pe cale sa fie scos din standardul
HTML! Este mai bine de folosit CSS. Pentru a adauga

chenare, folosit, i
proprietatea CSS border:
table, th, td {
border: 1px solid black;
}
Nu uitat, i sa definit, i chenare att pentru tabel ct s, i pentru celulele

tabelului.
1
2
3
Chenare unice
Daca dorit, i ca tabelul sa aiba chenare formate dintr-o singura linie,
folosit, i proprietatea CSS border-collapse:
table, th, td {
border-collapse: collapse;
}
1
2
3
4

Adaugare
de spat, ii celulelor
T, esatura
(padding) celulelor reprezinta spat, iul dintre cont, inutul celulei s, i
chenarul ei.
Daca nu specificat, i un padding, celulele tabelui nu vor avea spat, iu ntre
cont, inut s, i chenar.
Pentru a stabili un padding, folosit, i proprietate CSS padding:
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 15px;
}
1
2
3
4
5
6
7
Antetele tabelelor
Antetele tabelelor se definesc folosind tagul <th>.
Implicit majoritatea browserelor afis, eaza antetele de tabel cu aldine s, i
centrate:
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Punctaj</th>
</tr>
<tr>
<td>Popescu</td>
<td>Ion</td>
<td>50</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
Antetele tabelelor
Pentru a alinia la stnga antetele tabelelor, folosit, i proprietatea CSS
text-align:
th {
text-align: left;
}
1
2
3
Spat, iul dintre chenare

Spat, iul dintre celule se stabiles, te cu proprietatea CSS border-spacing:
table {
border-spacing: 5px;
}
Observat, ie: daca tabelul are chenare formate dintr-o singura linie,
border-spacing nu are niciun efect.
1
2
3
Celule pe coloane multiple

Pentru a face o celula pe mai multe coloane, folosit, i atributul colspan:
<tr>
<th>Nume</th>
<th colspan="2">Telefon</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
Celule pe rnduri multiple

Pentru a face o celula pe mai multe rnduri, folosit, i atributul rowspan:
<tr>
<th>Nume:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telefon:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
Un tabel HTML cu titlu
Pentru a adauga
un titlu unui tabel, folosit, i eticheta <caption>:
<caption>Economii lunare</caption>
<tr>
<th>Luna</th>
<th>Economii</th>
</tr>
<tr>
<td>Ianuarie</td>
<td>200RON</td>
</tr>
<tr>
<td>Februarie</td>
<td>150RON</td>
</tr>
</table>
Observat, ie: Eticheta <caption>trebuie introdusa imediat dupa eticheta

<table>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Un aspect special pentru un tabel

Pentru a defini un aspect special
pentru un tabel, adaugat

, i un atribut
id tabelului:
<table id="t01">
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Punctaj</th>
</tr>
<tr>
<td>Popescu</td>
<td>Ion</td>
<td>94</td>
</tr>
</table>
Stilul este definit astfel:

1 table#t01 {
2
width: 100%;
3
background-color: #f1f1c1;
4 }
5
6
7
8
9
10
11
12
Un aspect special pentru un tabel
Pot fi adaugate
s, i alte stiluri:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
1
2
3
4
5
6
7
8
9
10
Liste HTML
Cele mai uzuale liste sunt cele neordonate s, i cele ordonate.
Liste neordonate
O lista neordonata ncepe cu eticheta <ul>. Fiecare element al listei
ncepe cu eticheta <li>.
Elementele listei vor fi marcate cu nis, te cercuri mici negre:
<ul>
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ul>
1
2
3
4
5
Liste neordonate - atributul style
La o lista neordonata poate fi adaugat

un atribut style pentru a defini
aspectul marcatorului:
Stil
Descriere - Elementele listei vor fi marcate:
list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-type:none
cu discuri (implicit).
cu cercuri.
at
, ele.
cu patr
nu vor fi marcate.
Liste ordonate
O lista ordonata ncepe cu eticheta <ol>. Fiecare element al listei ncepe
cu eticheta <li>.
Elementele listei vor fi marcate cu numere:
<ol>
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
1
2
3
4
5
Liste ordonate - atributul style
La o lista ordonata poate fi adaugat

un atribut style pentru a defini tipul
marcatorului:
Stil
Descriere - Elementele listei vor fi marcate
type="1"
type="A"
type="a"
type="I"
type="i"
cu numere (implicit).
cu litere mari.
cu litere mici.
cu cifre romane mari.
cu cifre romane mici.
Liste descrieri
O lista descriere este o lista de termeni, fiecare avnd o descriere.
O lista descriere ncepe cu eticheta <dl>. Fiecare termen se introduce cu
eticheta <dt> iar fiecare descriere cu eticheta <dd>.
<dl>
<dt>Cafea</dt>
<dd>- bautura fierbinte inchisa la culoare</dd>
<dt>Lapte</dt>
<dd>- bautura rece de culoare alba</dd>
</dl>
1
2
3
4
5
6
Liste imbricate
Listele pot fi imbricate (liste n interiorul altor liste):
<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Ceai negru</li>
<li>Ceai verde</li>
</ul>
</li>
<li>Lapte</li>
</ul>
Observat, ie: Elementele listelor pot cont, ine noi liste sau alte documente
HTML precum imagini s, i linkuri.
1
2
3
4
5
6
7
8
9
10
Liste orizontale
Listele HTML pot fi modificate n multe moduri folosind CSS.
Foarte uzual, listele pot fi afis, ate orizontal:
<!DOCTYPE html>
<html><head><style>
ul#menu li {
display:inline;
}
</style></head>
<body>
<h2>Lista orizontala</h2>
<ul id="menu">
<li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li>
</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
Liste orizontale
Adaugnd
CSS le putem face sa arate ca un meniu:
ul#menu {
padding: 0;}
ul#menu li {
display: inline;}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;}
ul#menu li a:hover {
background-color: orange;}
1
2
3
4
5
6
7
8
9
10
11
12
Liste orizontale
astfel:
Lista va arata
Elemente de bloc s, i de linie

Orice element HTML det, ine o valoare display n funct, ie de tipul lui. Cele
mai multe au valoarea display block sau inline.
Un element de nivel bloc ncepe ntotdeauna pe o linie noua s, i ocupa
, ime disponibila.
ntreaga lat
Elementul <div> este un element de nivel bloc.
Exemple de elemente de tip bloc:
<div>, <h1>- <h6>, <p>, <form>
Un element de nivel linie (inline) nu este obligatoriu sa nceapa pe o
, imea necesara afis, arii
lui.
linie noua s, i ocupa doar lat
Exemple de elemente de linie:
<span>, <a>, <img>
Elementul div
Elementul <div>este un element de bloc care este adesea folosit drept
container pentru alte elemente HTML.
Elementul <div>nu are atribute obligatorii dar se folosesc adesea
atributele style s, i class.
Atunci cnd este folosit mpreuna cu CSS, elementul <div>poate fi folosit
pentru a modifica aspectul unor blocuri de cont, inut. Exemplu:
<div style="background-color:black; color:white; padding:20px;">
<h2>Londra</h2>
<p>Londra este capitala Angliei. Este orasul cel mai important din Marea Britanie avand o
populatie de peste 13 milioane de locuitori (inclusiv zona metropolitana).</p>
</div>
1
2
3
4
5
6
Elementul span
Elementul <span>este un element de linie care este adesea folosit drept
container pentru un anumit text.
Elementul <span>nu are atribute obligatorii dar se folosesc adesea
atributele style s, i class.
Atunci cnd este folosit mpreuna cu CSS, elementul <span>poate fi
, i din text. Exemplu:
folosit pentru a modifica aspectul unor part
<h1>Titlu <span style="color:red">Important</span></h1>
Clase pentru elemente bloc

Atributul HTML class face posibila definirea aceloras, i stiluri pentru
elemente div "egale":
<!DOCTYPE html><html><head><style>
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;}
</style></head>
<body>
<div class="cities">
<h2>Londra</h2><p>...</p>
</div>
<div class="cities">
<h2>Paris</h2><p>...</p>
</div>
<div class="cities"><h2>Tokyo</h2>
<p>....</p>
</div></body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Clase pentru elemente de linie

Atributul HTML class face posibila definirea aceloras, i stiluri pentru
elemente span "egale":
<!DOCTYPE html>
<html>
<head><style>
span.note {font-size:120%;color:red;}
</style></head>
<body>
<h1>Titlu <span class="note">Important</span></h1>
<p>Acesta este un text <span class="note">important</span>.</p>
</body></html>
1
2
3
4
5
6
7
8
9
ncadrarea HTML folosind elemente div

Siteurile web afis, eaza adesea cont, inutul pe mai multe coloane (precum
revistele sau ziarele).
Observat, ie: elementul div este folosit adesea ca un instrument de
ncadrare deoarece poate fi ncadrat us, or folosind CSS.
n exemplul urmator
sunt folosite 4 elemente div pentru a realiza o
ncadrare pe mai multe coloane:
ncadrarea HTML folosind elemente div

<body>
<div id="header"><h1>City Gallery</h1></div
>
<div id="nav">
Londra<br>
Paris<br>
Tokyo<br>
</div>
<div id="section"><h1>London</h1><p>...</p>
<p>...</p></div>
<div id="footer">Copyright www.unsite.com</
div>
</body>
1
2
<style>#header { background-color:black;
color:white;
text-align:center;
3
padding:5px;}
4 #nav { line-height:30px;
5
background-color:#eeeeee;
6
height:300px;
7
width:100px;
8
float:left;
padding:5px;}
9 #section { width:350px;
float:left;
10
padding:10px;}
#footer { background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;}</style>
ncadrarea folosind HTML 5

, i ale
HTML 5 ofera noi elemente semantice care definesc diferitele part
paginii web.
Element
Descriere
header
nav
section
article
aside
footer
details
summary
antet pentru un document sau sect, iune

container pentru navigare
sect, iunea unui document
ator
articol de sine stat

bara laterala
subsolul unui document sau al unei sect, iuni
detalii suplimentare
antet pentru detalii
ncadrarea folosind HTML 5

Exemplul foloses, te <header>, <nav>, <section>s, i <footer>pentru a crea o
ncadrare pe mai multe coloane:
<body>
<header><h1>Orase</h1></header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section><h1>Londra</h1><p>...</p>
</section>
<footer>Copyright www.unsite.ro</footer>
</body>
1 <style>header { background-color:black;
2
color:white;
3
text-align:center;
4
padding:5px;}
5 nav { line-height:30px;
6
background-color:#eeeeee;
7
height:300px;
8
width:100px;
9
float:left;
10
padding:5px;}
11 section { width:350px;
float:left;
padding:10px;}
footer { background-color:black;
color:white; clear:both;
text-align:center; padding:5px;}
ncadrarea HTML folosind tabele

Observat, ie: Elementul table nu a fost creat cu scopul de a fi un
instrument de ncadrare.
<body>
<table class="lamp">
<tr>
<th><img src="/images/lamp.jpg" alt="Note
" style="height:32px;width:32px"></
th>
<td>Elementul table nu a fost conceput
pentru incadrare.</td>
</tr>
</table>
</body>
1
2
3
4
5
6
7
8
<style>table.lamp { width:100%;
border:1px solid #d4d4d4;}
table.lamp th, td { padding:10px;}
table.lamp th { width:40px;}</style>
Proiectarea web responsive
Proietcarea web responsive conduce la un aspect placut

al paginii web
indiferent de dispozitiv (desktop, tableta sau telefon).
<!DOCTYPE html>
<html lang="en-us">
<head><style>
.city { float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;}</style>
</head>
<body>
<h1>Proiectare web responsive</h1>
<div class="city"> <h2>Londra</h2> <p>....</p></div>
</body></html>
Observat, ie: Exista pe Internet foi de stiluri pentru proiectare web
responsive, gata facute,

de exemplu W3.CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Sintaxa iframe
Un cadru iframe este folosit pentru a afis, a o pagina web n cadrul altei
pagini web.
<iframe src="URL"></iframe>
Atributul src specifica adresa web a paginii cadrului iframe.
Cadrul iframe - stabilirea dimensiunilor
Pentru stabilirea dimensiunilor cadrului iframe se folosesc atributele

height s, i width specificate implicit n pixeli dar pot fi s, i n procente.
Exemplu:
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Cadrul iframe - eliminarea chenarului
Pentru a elimina chenarul cadrului iframe folosit, i proprietatea CSS border:

Exemplu:
<iframe src="demo_iframe.htm" style="border:none"></iframe>
Folosind CSS pot fi modificate s, i marimea,

stilul s, i culoarea cadrului
iframe:
<iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>
Cadrul iframe - t, inta a unui link
Un cadru iframe poate fi ales drept destinat, ie pentru un link.

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://itee.elth.pub.ro" target="iframe_a">Laboratorul de Informatica</a></p>
1
2
Scripturi HTML - JavaScript

Folosind JavaScript, paginile web devin mai interactive.
Scriptul de mai jos scrie Salut JavaScript! ntr-un element HTML cu
id="demo":
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Salut JavaScript!";
</script>
</body>
1
2
3
4
5
6
Tagul <script>este folosit pentru a defini un script pe partea de client ca

de exemplu cod JavaScript.
Daca browserul nu suporta JavaScript:
<noscript>Din pacate browserul dumneavoastra nu suporta JavaScript!</noscript>
<p>Un browser ce nu suporta JavaScript va afisa textul din cadrul elementului noscript.</
p>
1
2
3
JavaScript - Exemple
Elementul <script>cont, ine fie instruct, iuni de script fie face o trimitere
catre
un fis, ier script extern prin intermediul atributului src.
JavaScript este folosit uzual pentru manipularea imaginilor, validarea
dinamice de cont, inut.
formularelor s, i modificari
Exemple de ce poate face JavaScript:
Poate modifica cont, inutul HTML:
document.getElementById("demo").innerHTML = "Hello JavaScript!";
JavaScript poate modifica stilurile CSS:

document.getElementById("demo").style.fontSize = "25px";
JavaScript poate modifica atributele HTML:

document.getElementById("image").src = "picture.gif";
Formulare HTML - elementul <form>
Formularele HTML sunt folosite pentru a introduce date de catre

utilizatori.
<form>
.
elementele formularului
.
</form>
Formularele HTML cont, in elemente de formulare.

Elementele de formulare reprezinta diferite tipuri de elemente de intrare,
checkboxuri, butoane radio, butoane submit s, i altele.
1
2
3
4
5
Formulare HTML - elementul <input>
Elementul <input>este cel mai important element de formular.

Elementul <input>are mai multe variante n funct, ie de atributul type.
Tip
Descriere
text
radio
submit
Defines, te o intrare text standard

Defines, te un buton radio (pentru selectarea unei opt, iuni)
Defines, te un buton submit (pentru trimiterea unui formular)
Formulare HTML - intrare text standard

Linia
<input type="text">
defines, te un cmp de intrare text pe o singura linie:

<form>
Prenume:<br>
<input type="text" name="prenume">
<br>
Nume:<br>
<input type="text" name="nume">
</form>
Observat, ie: Formularul propriu-zis nu este vizibil. Lungimea maxima a

cmpului text este de 20 de caractere.
1
2
3
4
5
6
7
Formulare HTML - intrare de tip buton radio

Linia
<input type="radio">
defines, te un buton de intrare de tip radio:

<form>
<input type="radio" name="sex" value="barbat" checked>Barbat
<br>
<input type="radio" name="sex" value="femeie">Femeie
</form>
limitat de
Butoanele radio permit selectarea UNEIA dintr-un numar
variante.
1
2
3
4
5
Formulare HTML - butonul submit

Linia
<input type="submit">
defines, te un buton de trimitere a unui formular catre

un form-handler.
Acesta este reprezentat de obicei de o pagina server cu un script de
prelucrare a datelor de intrare
Elementul form-handler este specificat n atributul action al formularului:
<form action="paginaactiune.php">
Prenume:<br>
<input type="text" name="prenume" value="Ion">
<br>
Nume:<br>
<input type="text" name="nume" value="Popescu">
<br><br>
<input type="submit" value="Trimite">
</form>
1
2
3
4
5
6
7
8
9
Formulare HTML - atributul action

Atributul action defines, te o act, iune care sa fie urmata atunci cnd este
trimis formularul.
Calea cea mai uzuala prin care un formular este trimis serverului este
folosind un buton submit.
De obicei formularul este trimis catre

o pagina web de pe un server web.
n exemplul de mai sus este specificat un script pe partea de server care
sa preia formularul trimis:
Daca atributul action este omis, act, iunea este preluata de pagina curenta.
Formulare HTML - atributul method

Atributul method specifica metoda HTTP (GET sau POST) care sa fie
folosita pentru trimiterea formularelor:
<form action="paginaactiune.php" method="get">
sau
<form action="paginaactiune.php" method="post">
poate fi folosita atunci cnd:

Metoda GET (implicita)
Trimiterea formularului este pasiva (ca de exemplu n interogarea folosind
un motor de cautare)
s, i nu cont, ine informat, ii confident, iale.
Atunci cnd se foloses, te GET, datele formularului vor fi vizibile n adresa
paginii:
paginaactiune.php?prenume=Ion&nume=Popescu
Observat, ie: GET este potrivita pentru volume mici de date.
Metoda POST poate fi folosita atunci cnd:
Formularul actualizeaza date sau include informat, ii confident, iale (parole).
Metoda POST ofera elemente de securitate mai bune deoarece datele
trimise nu sunt vizibile n adresa paginii.
Formulare HTML - atributul name
Pentru a putea fi trimis corect, fiecare cmp de intrare trebuie sa aiba un

atribut nume.
Exemplul urmator
va trimite numai cmpul nume:
Prenume:<br>
<input type="text" value="Ion">
<br>
Nume:<br>
<br><br>
</form>
1
2
3
4
5
6
7
8
9
Formulare HTML - gruparea cmpurilor folosind <fieldset>

Elementul <fieldset>grupeaza datele corelate dintr-un formular.
Elementul <legend>defines, te un antet pentru elementul <fieldset>.
<fieldset>
<legend>Informatii personale:</legend>
Prenume:<br>
<input type="text" name="prenume" value="Ion">
<br>
Nume:<br>
<br><br>
</fieldset>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
Formulare HTML - atributele elementului form

astfel:
Un element <form>avnd definite toate atributele posibile va arata
<form action="paginaactiune.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
elementele formularului
.
</form>
1
2
3
4
5
6
Elemente HTML5
Noile elemente HTML5

I
Elemente semantice: <header>, <footer>, <article>, <section>etc.
Atribute de control pentru formulare: number, date, time, calendar,

range etc.
Elemente grafice: <svg>, <canvas>
Elemente multimedia: <audio>, <video>
Exemple HTML5: http://itee.elth.pub.ro/~vbucata/
ia/cursuri/exhtml5/html5.html
API-uri noi HTML5

API-urile (Application Programming Interface) sunt biblioteci de subrutine
JavaScript cu care se poate act, iona asupra paginii web prin intermediul
DOM (Document Object Model = Modelul Obiectual al Documentului).
Cele mai importante API-uri HTML5 sunt:
I
Geolocat, ie
Drag and Drop
Stocare locala
Cache pentru aplicat, ii
Fire de execut, ie
SSE (Server-sent events)

Elementul HTML5 Canvas este folosit pentru a crea desene pe o pagina
web.
Desenele de mai jos sunt create folosind elementul canvas. Sunt patru
elemente: un dreptunghi ros, u, un dreptunghi n degradeu, un dreptunghi
multicolor s, i un text multicolor.
Ce este Canvasul HTML?

Elementul HTML <canvas>este folosit pentru a desena grafica instant via
scripturi JavaScript.
Pentru a
Elementul <canvas>este doar un container pentru grafica.
desena propriu-zis grafica este nevoie de un script.
Canvas dispune de mai multe metode pentru a trasa curbe, forme,
cercuri, text s, i pentru adaugarea

de imagini.
Versiunile ncepnd cu care este suportat elementul Canvas sunt date
mai jos:
Element
Chrome
IE
Firefox
Safari
Opera
<canvas>
4.0
9.0
2.0
3.1
9.0
Exemple Canvas
Canvasul este o port, iune dreptunghiulara de pe o pagina HTML.
Canvasul nu are implicit niciun chenar s, i niciun cont, inut.
Codul HTML arata astfel:
<canvas id="myCanvas" width="200" height="100"></canvas>
Observat, ie: ntotdeauna trebuie specificat un atribut id (referent, iat n

script) s, i atributele dimensiune ale canvasului width s, i height.
Pentru a adauga
un chenar, folosit, i atributul style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
1
2
Desene folosind JavaScript

Dreptunghi ros, u:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
1
2
3
4
Deseneaza o linie:
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
1
2
3
4
5
Desene folosind JavaScript (continuare)

Deseneaza un cerc:
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
1
2
3
4
5
Scrie un text:
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
1
2
3
4

Scrie un text accentuat:
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
1
2
3
4
Traseaza un gradient liniar:

// Creeaza gradientul
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Umple gradientul
ctx.fillStyle = grd;
1
2
3
4
5
6
7
8
9

Traseaza un gradient circular:
// Creeaza gradientul
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Umple gradientul
ctx.fillStyle = grd;
1
2
3
4
5
6
7
8
9

Afis, eaza o imagine:
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
1
2
3
4
Elemente HTML5 multimedia
Ce este multimedia?
video, filme s, i animat, ii adica aproape tot ce se poate
Este sunet, muzica,
vedea sau auzi.
Paginile web cont, in adesea elemente multimedia de diverse tipuri s, i
formate.
Primele browsere web suportau doar text cu font, culoare s, i corp de litera
fixe.
Au aparut
apoi browsere cu suport pentru culori s, i fonturi s, i chiar cu
suport pentru poze.
Suportul pentru sunete, animat, ii s, i video sunt tratate diferit de browsere.
Unele formate necesita programe suplimentare (plug-in-uri) pentru a
funct, iona.
Din fericire HTML5 este dedicat multimedia.
Formate multimedia - formate video uzuale

Dintre toate formatele video, MP4 este cel mai recomandat.
Format
Extensie
Descriere
MPEG
.mpg,.mpeg
AVI
.avi
QuickTime
.mov
RealVideo
.rm,.ram
Flash
.swf,.flv
Ogg
.ogg
WebM
.webm
MPEG-4 sau MP4
.mp4
Dezvoltat de Moving Pictures Expert Group.

Primul format folosit pe web. Era suportat n majoritatea
browserelor dar nu este suportat n HTML5.
AVI (Audio Video Interleave). Dezvoltat de Microsoft.
Folosit n videocamere s, i n hardware TV. Ruleaza bine
pe sisteme Windows dar nu s, i n browserele web.
Dezvoltat de Apple. Folosit n videocamere
s, i n hardware TV. Ruleaza bine pe sisteme Apple
dar nu s, i n browserele web.
Dezvoltat de Real Media pentru a permite
transmisia pe canale nguste. Este nca folosit pentru
online video s, i Internet TV dar nu n browsere.
Dezvoltat de Macromedia. Necesita adesea
un plug-in pentru a rula n browsere.
Theora Ogg. Dezvoltat de Xiph.Org Foundation.
Suportat n HTML5.
Dezvoltat de gigant,ii web, Mozilla, Opera,
Adobe s, i Google. Este suportat n HTML5.
Dezvoltat de Moving Pictures Expert Group.
Se bazeaza pe QuickTime. Este folosit adesea n videocamere s, i
hardware TV. Este suportat de toate browserele HTML5
s, i este recomdat de YouTube.
Observat, ie: Standardul HTML5 suporta doar MP4, WebM s, i Ogg.
Formate multimedia - formate audio uzuale

MP3 este cel mai nou format audio s, i a devenit sinonim cu muzica
Este cel mai recomandat.
digitala.
Format
Extensie
Descriere
MIDI
.mid,.midi
RealAudio
.rm,.ram
WMA
.wma
AAC
.aac
WAV
.wav
Ogg
MP3
.ogg
.mp3
MP4
.mp4
MIDI (Musical Instrument Digital Interface).
Este formatul de baza pentru sintetizatoare s, i placile

de sunet PC.
Fis, ierele MIDI cont,in note muzicale. Ruleaza bine pe toate
calculatoarele dar nu s, i n browserele web.
Dezvoltat de Real Media pentru a permite difuzarea
pe canale nguste. Nu funct,ioneaza n browsere.
WMA (Windows Media Audio). Dezvoltat de Microsoft.
Ruleaza bine pe stat,ii Windows, nu s, i n browsere.
AAC (Advanced Audio Coding). Dezvoltat de Apple ca format
implicit pentru iTunes. Funct,ioneaza pe sistemele Apple dar nu n browsere.
WAV. Dezvoltat de IBM s, i Microsoft. Funct,ioneaza pe Windows,
Macintosh s, i Linux. Este suportat de HTML5.
Ogg. Este dezvoltat de Xiph.Org Foundation. Este suportat de HTML5.
Fis, ierele MP3 sunt de fapt partea de sunet a fis, ierelor MPEG.
MP3 este cel mai folosit format audio. Combina compresia (fis, iere mici)
Este suportat de toate browserele.
cu calitatea ridicata.
MP4 este un format video dar poate fi utilizat s, i pentru audio.
Formatul video MP4 este formatul de viitor pe internet. Aceasta conduce
la suport pentru audio MP4 de catre

toate browserele.
Elementul HTML5 video
Exemplu Video HTML5
Rularea video n HTML

nainte de HTML5 nu exista un standard pentru prezentarea filmelor pe o
pagina web.
nainte de HTML5 filmele nu puteau fi rulate dect prin intermediul unui
plug-in (precum flash).
Elementul HTML5 <video>specifica o modalitate standard de a include
video n paginile web.
Suportul n browsere:
Element
Chrome
IE
Firefox
Safari
Opera
<video>
4.0
9.0
3.5
4.0
10.5
Elementul HTML <video>

Exemplu:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Browserul dumneavoastra nu suporta elementul video.
</video>
Atributul controls adauga butoane ca play, pause s, i volum.

Este bine sa fie incluse s, i atributele width s, i height.
Textul dintre <video>s, i </video>va fi afis, at doar n browserele ce nu
suporta elementul video.
Elemente multiple source pot trimite catre

fis, iere video diferite. Browserul
va folosi primul format recunoscut.
1
2
3
4
5
Atributul Autoplay
Pentru a porni un film automat, folost, i atributul autoplay:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Browserul dumneavoastra nu suporta elementul video.
</video>
Observat, ie: Atributul autoplay nu funct, ioneaza n Safari s, i Opera sau pe

dispozitive mobile precum iPad sau iPhone.
1
2
3
4
5
Elementul HTML video - suportul n browsere

n prezent exista trei formate suportate n HTML5: MP4, WebM s, i Ogg
Browser
MP4
WebM
Ogg
Internet Explorer
Chrome
Firefox
Safari
Opera
DA
DA
DA
DA
DA (ncepnd cu versiunea 25)
NU
DA
DA
NU
DA
NU
DA
DA
NU
DA
Formatul fis, ierului
Media Type
MP4
WebM
Ogg
video/mp4
video/webm
video/ogg
, i s, i evenimente
Elementul HTML video - metode, proprietat
, ile s, i evenimentele din DOM
HTML5 defines, te metodele, proprietat
(Document Object Model) pentru elementul video.
Aceasta permite ncarcarea,

rularea s, i ntreruperea filmelor precum s, i
stabilirea duratei s, i a volumului.
Exemplu folosind JavaScript:
Geolocalizarea
Geolocalizarea HTML
API-ul HTML Geolocation este folosit pentru a obt, ine pozit, ia geografica a
unui utilizator.
pozit, ia nu este disponibila dect
Deoarece este o informat, ie personala,
atunci cnd utilizatorul este de acord.
Suportul n browsere:
Element
Chrome
IE
Firefox
Safari
Opera
Geolocalizarea
5.0
9.0
3.5
5.0
16
Observat, ie: Geolocalizarea este mai precisa pentru dispozitive cu GPS

precum iPhone.
Geolocalizarea HTML - exemplu

Pentru a determina pozit, ia unui utilizator, folosit, i metoda
getCurrentPosition().
n exemplul de mai jos se determina latitudinea s, i longitudinea pozit, iei
utilizatorului:
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation nu este suportata in acest browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Geolocalizarea HTML - tratarea erorilor

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Utilizatorul a refuzat geolocalizarea."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Nu sunt informatii disponibile."
break;
case error.TIMEOUT:
x.innerHTML = "Cererea a expirat."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Eroare necunoscuta."
break;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Geolocalizarea HTML - afis, area rezultatului pe o harta

Trebuie folosit un serviciu gen Google Maps:
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src="+img_url+">";
}
1
2
3
4
5
6
7
8
Cacheul de aplicat, ii
Ce este cacheul de aplicat, ii?

Cacheul de aplicat, ii us, ureaza furnizarea unei versiuni offline a unei
aplicat, ii web, crend un fis, ier manifest cache. Aplicat, ia este accesibila
a a fi necesara o conexiune la internet.
far
Exista trei avantaje:
I
Offline browsing
Viteza
ncarcare
redusa pe server
Suport n browser:
Element
Chrome
IE
Firefox
Safari
Opera
Application Cache
4.0
10.0
3.5
4.0
11.5
Application Cache - exemplu

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
Continutul documentului......
</body>
</html>
1
2
3
4
5
6
7
8
?
ntrebari
Va mult, umesc pentru atent, ie!

Curs 2

Î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

Curs 2

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere n Proiectarea Web

Informatica Aplicata 1 - Cursul 2

Exemple HTML s, i CSS

Exemple HTML s, i CSS

Exemple HTML s, i CSS

CSS - definirea aspectului

Exemple HTML s, i CSS

CSS - definirea aspectului

Proiectare Web Front-End

Cteva elemente (taguri) mai amanunt

Exemple HTML s, i CSS

CSS - definirea aspectului

Proiectare Web Front-End

Cteva elemente (taguri) mai amanunt

Noile elemente HTML5

nainte de a exista World Wide Web-ul, cart

efort deosebit pentru gasirea

Azi deschidet, i un broser web, un motor de cautare

web avnd n minte informat, ia pe care o cautat

Ted Nelson, filozof, sociolog s, i informatician american introduce

poate de asemenea sa contina adnotari,

Metoda de organizare a informatiilor n care datele sunt memorate

ntr-o retea de noduri si

Componentele unui sistem hipertext

Noduri (concepte) = blocuri de informatii cuprinse n reteaua

Ce este WWW? (continuare)

Browserele pentru WWW precum MS Edge, MS Internet Explorer,

Aceste documente pot contine orice combinatie de date: grafica,

Comparativ cu mediul tiparit,

12 noiembrie 1990: Tim Berners-Lee de la CERN, cu ajutorul lui

retea de documente hypertext care sa fie vazute

Pna la sfrsitul lui 1990, Berners-Lee construieste toate

1992: 20 de servere web n ntreaga lume

1993: apare browserul Mosaic

de atunci a cunoscut o dezvoltare spectaculoasa

Primul server web

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

Cum funct, ioneaza Web-ul?

o pagina web? - pasul 1

La baza World Wide Web sta protocolul HTTP (HyperText Transfer

o pagina web? - pasul 2

routerului, cacheul DNS al furnizorului de Internet, cautare

o pagina web? - pasul 3

Connection cere serverului sa pastreze

Mostra din comunicat, ia HTTP:

o pagina web? - pasul 4

Mostra din comunicat, ia HTTP:

o pagina web? - pasul 5

Mostra din comunicat, ia HTTP:

o pagina web? - pasul 6

Serverul proceseaza cererea.

o pagina web? - pasul 7

Serverul trimite un raspuns

Mostra din comunicat, ia HTTP:

o pagina web? - pasul 8

Browserul ncepe sa afis, eze HTML.

o pagina web? - pasul 9

o pagina web? - pasul 10

n ce limbaje sunt scrise majoritatea paginilor Web?

Limbaj de marcare care ofera

Limbaj de prezentare care ofera

HTML este acronimul de la Hyper Text Markup Language (Limbajul

As, a cum am vazut