<Dezvoltarea aplicațiilor Web />

<Conf. univ. Vasile Gorgan/>

are

apl

EB
ica
Curs 1
De

olt
zv

W
țiil
or
a
Evaluare:
 Test seminar 50%
 Evaluare finală 50%. Examen practic sau test grilă. Pentru
promovare nota la examen trebuie să fie minimum 5.

Bibliografie:
 cursul predat disponibil online pe platforma online.ase.ro
 https://www.w3schools.com/

Slide 2
are
Web design
apl

EB
ica
De

olt
zv

W
țiil
or
a
 Cuprinde activităţile de proiectare şi
realizare a paginilor web statice şi dinamice
puse la dispoziţie prin serviciul World Wide
Web (www) al reţelei Internet.
 Priveşte atât crearea elementelor vizuale
(aranjarea în pagină a informaţiei, culori şi
elemente grafice asociate) cât şi
funcţionalitatea paginilor web şi a site-
urilor în interacţiunea cu utilizatorul.
Slide 3
are

apl

EB
ica
World Wide Web
De

olt
zv

W
țiil
or
a
O colecţie de resurse publice sau private
aflate în reţeaua Internet, conţinând texte
şi informaţii multimedia, stocate în cadrul
unor site-uri web ce pot fi accesate prin
aplicaţii de tip browser (navigator Internet)
bazate pe standardul HTTP.
HTTP: (Hyper Text Transfer Protocol) –
standardul de facto pentru transferarea şi
afişarea informaţiei în reţeaua Internet.
Slide 4
are

apl

EB
ica
De

olt Comunicarea în reţeaua Internet

zv

W
țiil
or
a
Funcţionează potrivit tehnologiei Client-Server:
- Un program care poartă denumirea de client
web, iniţiază o cerere informaţională către un alt
program, denumit server web, capabil să
furnizeze răspunsul la cererea clientului .
Avantajul principal:
- accesul permanent la informaţii din orice locaţie,
prin interogarea permanentă a datelor serverului
web.

Slide 5
 Schema generală de comunicare utilizând
are

apl

EB
ica
De

olt
zv

W
țiil
or
a
protocolul HTTP

Slide 6
are

apl

EB
ica
De

olt URL – Uniform Resource Locator

zv

W
țiil
or
a
Defineşte adresa de internet a unui server web, fişier sau
document din cadrul acestuia.
Este modalitatea standard de adresare pentru serviciul
WWW, utilizând protocolul HTTP.
Este unică în cadrul reţelei Internet , fiind obţinută din
concatenarea a trei informaţii:
- Protocolul de comunicaţie utilizat (HTTP, FTP, etc.)
- Adresa sau numele serverului web
- Fişierul sau locaţia resursei accesate.
Exemplu: http://www.ase.ro/Cursuri/Informatica .html
172.217.20.4
Slide 7
are

apl

EB
ica
De

olt HyperText Markup Language (HTML)

zv

W
țiil
or
a
Reprezintă limbajul standard pentru definirea structurii unei pagini
Web. HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989
în încercarea de a oferi fizicienilor care utilizeaza computere diferite
posibilitatea de a schimba informaţie între ei prin intermendiul
Internetului.
Funcţionează pe principiul “marcării” unor părţi din conţinutul paginii
web astfel încât să comunice aplicaţiei de navigare (browser) modul
în care acestea vor fi afişate.
Face apel la un set de marcatori sau elemente HTML (tags) având o
denumire şi un anumit număr de proprietăţi sau atribute.
Furnizează metoda de creare a unor documente structurate prin
definirea de titluri, paragrafe, liste, tabele, legături, etc., şi prin
includerea imaginilor şi obiectelor interactive în cadrul paginilor web.

Slide 8
are

apl

EB
ica
Elemente (Tag-uri) HTML
De

olt
zv

W
țiil
or
a
Două tipuri de elemente HTML:
- Elemente pereche: se caracterizează prin existenţa a
două tag-uri :
• de deschidere, conţinând numele elementului şi atributele acestuia)
• de închidere, conţinând numele elementului precedat de semnul slash „/”

<p>Acesta reprezintă un paragraf</p>

<title>Titlul paginii</title>

- Elemente singulare: nu deţin partea de închidere

finalizându-se prin semnul slash conţinut pe ultima poziţie a tag-ului
elementului:
<hr />
<img src=“poza.jpg” />

Slide 9
are

apl

EB
ica
De

olt Atribute în cadrul elementelor HTML

zv

W
țiil
or
a
Atributul unui element: au, în general, forma unei perechi de
nume şi valori asociate, fiind utilizate pentru personalizarea
modului de afişare a conţinutului unui element HTML.
Atributul şi valoarea asociată sunt trecute în partea de
deschidere a unui element.
Valoarea unui atribut trebuie trecută între ghilimele.
Pot exista atribute cu mai multe valori, acestea fiind
separate prin semnul ;
Forma generală a unui atribut este:
Nume_atribut=“Valoare”
<img src=“poza.gif” width=“200px” height=“300px”/>

Slide 10
are

apl

EB
ica
De

olt Atribute comune elementelor HTML (I)

zv

W
țiil
or
a
Identificatorul unui element: pentru o regăsire uşoară a
blocurilor şi elementelor unei pagini HTML se utilizează
pentru fiecare tag atributul id, care trebuie să prezinte o
valoare unică la nivel de document HTML:

<p id=“paragraful1”>Paragraf</p>
<p id=“paragraful2”>Paragraf</p>
<img id=“imaginea1” src=“poza1.jpg” />

Slide 11
are

apl

EB
ica
De

olt Atribute comune elementelor HTML (II)

zv

W
țiil
or
a
Atributul “class”:
- Defineşte apartenenţa unui element la o clasă
de elemente cu proprietăţi comune:
<p class=“ParagrafComun”>Paragraful 1</p>
Atributul “style”:
- Defineşte un grup de proprietăţi aferente
stilului prin care un element este personalizat:
<p style=“background-color:yellow;”
>Paragraf cu fundal galben </p>

Slide 12
are

apl

EB
ica
De

oltStructura generală a unei pagini HTML

zv

W
țiil
or
a

Slide 13
are

apl

EB
ica
De

olt Declaraţia tipului de document

zv

W
țiil
or
a
O pagină web poate să fie definită şi poate fi
interpretată de către browser în mai multe feluri.
Tipurile de limbaje pentru afişarea documentelor web:
- HTML – HyperText Markup Language
- XHTML – eXtended HyperText Markup Language
- XML – eXtensible Markup Language
Pentru a declara tipul de document, pagina HTML
începe cu declaraţia:
<!DOCTYPE html>

Slide 14
are

apl

EB
ica
De

olt Formatări de bază. Titluri

zv

W
țiil
or
a
Se definesc cu ajutorul tag-ului <Hi> unde i poate lua valori de la 1 la
6. Există astfel titluri de nivelul 1 (H1), nivelul 2 (H2)… nivelul 6(H6).

Cod html Conţinut afişat în browser

<html>
<body>
<h1>Titlu nivel 1</h1>
<h2>Titlu nivel 2</h2>
<h3>Titlu nivel 3</h3>
<h4>Titlu nivel 4</h4>
<h5>Titlu nivel 5</h5>
<h6>Titlu nivel 6</h6>
</body>
</html>

Slide 15
are

apl

EB
ica
De

olt Formatări de bază. Paragrafe

zv

W
țiil
or
a
Pentru inserarea paragrafelor se utilizează tagul <p>. Un spaţiu este
plasat automat de către browsere înainte şi după paragraf. Alte
caracteristici de formatare se recomandă a fi precizate prin
intermediul CSS. Pentru întreruperea liniei curente se utilizează tagul
<br>.

Cod html Conţinut afişat în browser

<html>
<body>
<p>
Nu spera si nu ai teama,<br>
Ce e val ca valul trece;
</p>
</body>
</html>

Slide 16
are

apl

EB
ica
De

olt Formatări de bază. Formatare text

zv

W
țiil
or
a
Taguri utilizate pentru formatare
TAG Explicație
<b> Defineşte un text scris utilizând caractere aldine (îngroşat)
<em> Defineşte un text scos în evidenţă
<i> Defineşte un text scris cu caractere cursive (italic)
<small> Defineşte un text scris cu caractere micşorate
<strong> Defineşte un text important
<sub> Defineşte un text scris ca indice
<sup> Defineşte un text scris ca exponent
<ins> Defineşte un text inserat
<del> Defineşte un text eliminat

Tagurile <ins> şi <del> se utilizează pentru a urmări modificările realizate pe un

document. Browserele subliniază textul marcat cu <ins> şi taie cu o linie
orizontală pe cel marcat cu <del>.
Slide 17
are

apl

EB
ica
De

olt Formatări de bază. Paragrafe

zv

W
țiil
or
a
Textul marcat cu <strong> este afişat de majoritatea browser-elor similar textului
marcat cu <b> iar textul marcat cu <em> similar textului marcat cu <i>. Aceasta este
starea de fapt actuală pentru afişarea textelor importante sau scoase în evidenţă. Este
posibil ca în viitor să fie utilizate alte caracteristici de formatare pentru acestea.
Cod html Conţinut afişat în browser
<html>
<body>
<b>Text scris utilizând caractere aldine (îngroşat)</b><br>
<em>Text scos în evidenţă</em><br>
<i>Text scris cu caractere cursive (italic)</i><br>
<small>Text scris cu caractere micşorate</small><br>
<strong>Text important<strong></br>
Text normal_{Text scris ca indice}<br>
Text normal^{Text scris ca exponent}<br>
<ins>Text inserat</ins><br>
<del>Text eliminat</del>
</body>
</html>

Slide 18
are

apl

EB
ica
De

olt Caractere speciale

zv

W
țiil
or
a
Unele caractere au o însemnătate specială în HTML, cum ar fi semnul “<”. Dacă
se doreşte ca browserul să afişeze aceste caractere trebuie să se folosească fie
numelecaracterului respectiv fie codul asociat lui. Pentru inserarea acestor
caractere se începe cu semnul „&”, urmat de numele caracterului (sau de
semnul “#” şi codul caracterului); la final se plasează semnul „;”.
Caracter Descriere Numele Codul
caracterului caracterului
Spaţiu &nbsp; &#160;
<  Mai mic decât &lt; &#60;
>  Mai mare decât &gt; &#62;
& Ampersand &amp; &#38;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® Marcă înregistrată &reg; &#174;

Slide 19
are

apl

EB
ica
Specificare culori
De

olt
zv

W
țiil
or
a
Culorile pot fi precizate utilizând una din următoarele metode:
-numele culorii (de exemplu: color=”red”). HTML suportă 140 de
denumiri standard de culori:
https://www.w3schools.com/colors/colors_names.asp

-codul culorii specificat în unul din următoarele formate:

Format Exemplu Explicații
RGB rgb(255, 99, 71)
HEX #ff6347
HSL hsl(9, 100%, 64%)
RGBA rgba(255, 99, 71, 0.5)
HSLA hsla(9, 100%, 64%, 0.5)

Slide 20
are

apl

EB
ica
De

olt Specificare culori. Format RGB\RGBA

zv

W
țiil
or
a
Formatul RGB
Exemplu: color=“rgb(255, 99, 71)”
Specificarea culorii utilizând formatul presupune precizarea intensității
cu care participă fiecare dintre cele trei culor (red, green, blue) la
culoarea dorită. Intensitatea este exprimată ca un număr cuprins între 0
şi 255 (0 înseamnă că respectiva culoare nu participă la culoarea
finală, 255 înseamnă că acea culoare participă cu intensitate maximă).
Formatul RGBA
Exemplu: color=“rgba(255, 99, 71,0.7)”
În cazul formatului RGBA apare în plus față de formatul RGB o a patra
valoare numerică prin care se precizează nivelul de transparență al
culorii obținute. Valorile posibile pentru indicele de transparență sunt
cuprinse în intervalul [0,1], 0 însemnând transparent, 1 opac.

Slide 21
are

apl

EB
ica
De

olt Specificare culori. Format HSL\HSLA

zv

W
țiil
or
a
Formatul HSL (hue, saturation, lightness)
Exemplu: color=“hsl(240, 99, 71)”
hue (nuanța)- o valoarea din invervalul
[0,360] prin care se precizează nuanța în
conformitate cu imaginea alăturată
Saturation (saturația) – un procent prin
care se precizează saturația culorii (0%
fără culoare, 100% culoare de intensitate
maximă)
Lightness (luminozitatea) – procent prin
care se precizează nivelul de lumină (0% -
negru, 100%-alb)

Formatul HSLA (hue, saturation, lightness, alpha)

Exemplu: color=“hsl(240, 99, 71)”
Alpha –parametru cu valori în intervalul [0,1] prin care se precizează opacitatea

Slide 22
are

apl

EB
ica
De

olt Specificare culori. Format HSL\HSLA

zv

W
țiil
or
a
Formatul HSL
Exemplu: color=“hsl(120, 99, 71)”
Specificarea culorii utilizând formatul presupune precizarea intensității
cu care participă fiecare dintre cele trei culor (red, green, blue) la
culoarea dorită. Intensitatea este exprimată ca un număr cuprins între 0
şi 255 (0 înseamnă că respectiva culoare nu participă la culoarea
finală, 255 înseamnă că acea culoare participă cu intensitate maximă).
Formatul RGBA
Exemplu: color=“rgba(255, 99, 71,0.7)”
În cazul formatului RGBA apare în plus față de formatul RGB o a patra
valoare numerică prin care se precizează nivelul de transparență al
culorii obținute. Valorile posibile pentru indicele de transparență sunt
cuprinse în intervalul [0,1], 0 însemnând transparent, 1 opac.

Slide 23