Dezvoltarea Aplicatiilor Web

<Dezvoltarea aplicațiilor Web />
<Conf. univ. Vasile Gorgan/>

Dezvoltarea
aplicațiilor WEB Curs 1
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
Dezvoltarea
aplicațiilor WEB Web design
❑ 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
Dezvoltarea
aplicațiilor WEB World Wide Web
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
Dezvoltarea
aplicațiilor WEB Comunicarea în reţeaua Internet
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
Dezvoltarea Schema generală de comunicare utilizând
aplicațiilor WEB protocolul HTTP
Slide 6
Dezvoltarea
aplicațiilor WEB URL – Uniform Resource Locator
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
- Calea de acces a resursei
- Parametrii
- Fragment/ancora
Slide 7
Dezvoltarea
aplicațiilor WEB URL – Uniform Resource Locator
https://www.ase.ro/Cursuri/Info.html?codCurs=1&CodCentru=7#paragraf3
https – protocolul de acces
www.ase.ro - Adresa sau numele serverului web
Cursuri/Info.html – calea locală de acces a resursei
?codCurs=1&CodCentru=7 – parametri: listă de perechi formate din
cheie/valoare prin care se transmit informatii către server
#paragraf3 – o ancoră către o zonă a resursei solicitate
Slide 8
Dezvoltarea
aplicațiilor WEB HyperText Markup Language (HTML)
❑ 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 9
Dezvoltarea
aplicațiilor WEB Elemente (Tag-uri) HTML
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 10
Dezvoltarea
aplicațiilor WEB Atribute în cadrul elementelor HTML
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 11
Dezvoltarea
aplicațiilor WEB Atribute comune elementelor HTML (I)
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 12
Dezvoltarea
aplicațiilor WEB Atribute comune elementelor HTML (II)
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 13
Dezvoltarea
aplicațiilor WEB Structura generală a unei pagini HTML
Slide 14
Dezvoltarea
aplicațiilor WEB Declaraţia tipului de document
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 15
Dezvoltarea
aplicațiilor WEB Formatări de bază. Titluri
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>
</body>
</html>
Slide 16
Dezvoltarea
aplicațiilor WEB Formatări de bază. Paragrafe
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>.

<html>
<body>
<p>
Nu spera si nu ai teama,<br>
Ce e val ca valul trece;
</p>
</body>
</html>
Slide 17
Dezvoltarea
aplicațiilor WEB Formatări de bază. Formatare text
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 18
Dezvoltarea
aplicațiilor WEB Formatări de bază. Paragrafe
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.

<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<sub>Text scris ca indice</sub><br>
Text normal<sup>Text scris ca exponent</sup><br>
<ins>Text inserat</ins><br>
<del>Text eliminat</del>
</body>
</html>
Slide 19
Dezvoltarea
aplicațiilor WEB Caractere speciale
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
< Mai mic decât < <
> Mai mare decât > >
& Ampersand & &
€ euro € €
© copyright © ©
® Marcă înregistrată ® ®
Slide 20
Dezvoltarea
aplicațiilor WEB Specificare culori
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 21
Dezvoltarea
aplicațiilor WEB Specificare culori. Format RGB\RGBA
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 22
Dezvoltarea
aplicațiilor WEB Specificare culori. Format HSL\HSLA
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 23
Dezvoltarea
aplicațiilor WEB Specificare culori. Format HSL\HSLA
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 24
Dezvoltarea
aplicațiilor WEB
Curs 2
Slide 2
Dezvoltarea
aplicațiilor WEB Liste HTML
Există trei tipuri de liste care pot fi definite în HTML:
❑ liste ordonate
❑ liste neordonate
❑ liste de definiţii
Slide 3
Dezvoltarea
aplicațiilor WEB Liste ordonate
Au specific faptul că fiecare element este precedat de un număr sau o
literă. Întreaga listă este indentată. Lista este delimitată de tag-urile
<ol>…</ol>, fiecare element fiind încadrat de <li>…</li>. Atributul
start precizează numărul din dreptul primului element al listei, iar
atributul type este folosit pentru a specifica tipul numerotarii astfel:
❑ A pentru numerotare utilizând majuscule (A, B, C…)
❑ a pentru numerotare cu minuscule (a, b, c…)
❑ I pentru numerotare cu cifre romane majuscule (I, II, III, IV…)
❑ i pentru numerotare cu cifre romane majuscule (i, ii, iii, iv…)
❑ 1 pentru numerotare cu cifre arabe (valoarea implicită a atributului)
Atributul reversed introdus în specificaţia HTML 5 precizează faptul
că elementele vor fi ordonate descrescător
Slide 4
Dezvoltarea
aplicațiilor WEB Liste ordonate (Exemplu)
<html>
<body>
<h4>Lista discipline de studiu</h4>
<ol type="A" start="5">
<li>Contabilitate</li>
<li>Microeconomie</li>
<li>Tehnologia aplicatiilor Office</li>
<li>Statistica</li>
</ol>
</body>
</html>
Slide 5
Dezvoltarea
aplicațiilor WEB Liste neordonate
Prezintă aceleaşi caracteristici specifice listelor ordonate cu excepţia
faptului că fiecare element al listei este precedat de un semn grafic în
loc de un numar sau text. Pentru specificarea tipului elementului
grafic se recomandă utilizarea stilurilor CSS (de exemplu atributul
CSS list-style-type poate lua una din valorile: disc, circle, square)
Slide 6
Dezvoltarea
aplicațiilor WEB Liste neordonate (exemplu)
<html>
<body>
<ul style="list-style-type:square">
<li>Statistica</li>
</ul>
</body>
</html>
Slide 7
Dezvoltarea
aplicațiilor WEB Liste de definiţii
Fiecare element al unei astfel de liste este compus
la rândul său două elemente: termenul de definit
şi definiţia acestuia.
Ca mod de prezentare, aceste subelemente apar
pe rânduri distincte, definiţia fiind indentată
(plasată mai în dreapta) faţă de termenul de
definit .
Lista este încadrată de tag-urile <dl>…</dl>,
termenii de definit sunt încadraţi de <dt>…</dt>
iar definiţiile de <dd>…</dd>.
Slide 8
Dezvoltarea
aplicațiilor WEB Liste de definiţii (exemplu)
<html>
<body>
<h4>Lista de definitii</h4>
<dl>
<dt>Informatica</dt>
<dd>Stiinta care se ocupa cu studiul prelucrarii
informatiei cu ajutorul sistemelor automatice de
calcul</dd>
<dt>Cibernetica</dt>
<dd>Stiinta care are ca obiect studiul matematic al
legaturilor, comenzilor si controlului în sistemele
tehnice si în organismele vii din punctul de vedere
al analogiilor lor formale.</dd>
</dl>
</body>
</html>
Slide 9
Dezvoltarea
aplicațiilor WEB Liste imbricate
Listele se pot imbrica (intercala) fără vreo restricţie în privinţa tipurilor listelor implicate. Un exemplu de
liste imbricate este prezentat în continuare.
<html>
<body>
<ul>
<li>Discipline an 1</li>
<ol type="A">
<li>Statistica</li>
</ol>
<li>Discipline an 2</li>
<ol type="A">
<li>Contabilitate financiara II</li>
<li>Baze de date</li>
<li>Contabilitate consolidata</li>
<li>Finante</li>
</ol>
</ul>
</body> Slide 10
</html>
Dezvoltarea
aplicațiilor WEB Legaturi hipertext (linkuri)
Legaturile hipertext (linkurile), deşi un concept simplu reprezintă
fundamentul succesului de care se bucură World Wide Web. Un link
reprezintă o conexiune dinspre o resursă Web către alta.
Un link prezintă două repere numite ancore şi o direcţie. Linkul
începe de la ancora „sursă” şi are ca destinaţie ancora „ţintă” care
poate fi orice resursa Web (o imagine, un clip video, un program, o
secţiune dintr-un document HTML, etc)
Sintaxa generala a unei ancore sursă este:
<a href=”URL_resursa_Web” target=”fereastra_deschidere_resursa”
title=””>Descriptor</a>
Slide 11
Dezvoltarea
aplicațiilor WEB Legaturi hipertext (linkuri)
❑ Valoarea atributului href este o referinţă către resursa Web ţintă.
❑ Descriptorul este partea vizibilă a linkului (ceea ce este afişat
utilizatorului de către browser) şi este marcat diferit de restul
elementelor din pagina web. În mod implicit un link nevizitat este
subliniat si albastru, un link vizitat este subliniat şi mov iar un link activ
este subliniat şi roşu. Aceste caracteristici de formatare a linkurilor se
pot modifica, de preferat utilizând CSS.
❑ Atributul title are ca efect afisarea unei mici ferestre atunci cand
utilizatorul plasează mouse-ul deasupra linkului, fereastra care
afişează valoarea atributului.
❑ Valoarea atributului target specifică fereastra sau tab-ul browserului
în care se va deschide ţinta linkului.
- _blank deschide documentul ţintă într-o nouă fereastră sau tab
- _self deschide documentul ţintă în acelaşi cadru
- _parent deschide documentul ţintă în cadrul părinte
- _top deschide documentul ţintă în întreaga fereastră
Slide 12
Dezvoltarea
aplicațiilor WEB Legături externe
Este una dintre modalităţile cele mai uzuale de utilizare a linkurilor şi
presupune specificarea URL-ului paginii ţintă ca valoare a atributului href.
Exemplu:
<a href=”http://www.w3schools.com/tags/tag_a.asp”>Invata
HTML</a>
În continuare sunt prezentate componentele unui URL
Protocol Nume server Director (folder) Nume fişier

http: //www.w3schools.com /tags/ tag_a.html
Acest tip de URL are componentele separate prin următoarele caractere

❑ Protocolul este urmat de “:”
❑ Numele serverului este precedat de “//”
❑ Directorul sau directoarele care urmează sunt separate cu “/”
❑ Numele fişierului apare la final separat de restul URL-ului de semnul
“/”
Slide 13
Dezvoltarea
aplicațiilor WEB
HTML</a>
În exemplul de mai sus, când vizitatorul paginii web va da click pe

textul Invata HTML va accesa pagina web descrisă de fisierul
tag_a.html care se găseşte în directorul (folderul) tags de pe serverul
www.w3schools.com. În cazul în care linkul ar fi conţinut doar
protocolul şi numele serverului (http://www.w3schools.com) s-ar fi
realizat o legatura catre fisierul implicit de pe acel server (de obicei un
fişier cu numele index.htm, index.html, default.asp, default.aspx,
index.php etc).
Slide 14
Dezvoltarea
aplicațiilor WEB Legături locale
Sunt legături către fișiere aflate în același site web.
Exemplul prezentat mai devreme conţine un link absolut adică un link

care are întreaga cale de acces pornind de la protocol până la fişier.
HTML</a>
În cazul în care se realizează legături între paginile aceluiaşi site se
recomandă folosirea căilor de acces relative adică folosirea doar a
structurii de directoare pornind de la directorul radacină al site-ului în
funcţie de poziţia relativă a resursei destinaţie faţă de pagina din care se
realizează link-ul.
În măsura în care este posibil se recomandă utilizarea de căi de acces
relative. Astfel toate legăturile vor funcționa atât pe calculatorul local cât
și după publicarea site-ului pe domeniul public.
Slide 15
Dezvoltarea
aplicațiilor WEB Legaturi locale
Presupunâd că avem un site a cărui structură este prezentată în
imaginea alăturată, un link relativ din fişierul index.html către fişierul
capitolul1.html se realizează astfel:
<a href=”Cuprins/capitolul1.html”>Capitolul 1</a>
Calea de acces relativă Cuprins/capitolul1.html semnifică faptul că
din fişierul din care se realizează legătura (index.html), care se
găseşte în directorul Home, trebuie accesat directorul Cuprins şi, din
acesta fişierul capitolul1.html.
Un link din fişierul capitolul1.html către fişierul index.html se realizează
astfel:
<a href=”../index.html”>Acasa</a>
Calea de acces relativă ../index.html semnifică faptul că din fişierul
din care se realizează legătura (capitolul1.html), care se găseşte în
directorul Home/Cuprins, trebuie accesat directorul părinte (Home) al
directorului curent (Cuprins) şi, din acesta fişierul index.html.
Referirea directorului părinte se face cu ajutorul combinaţiei ../.
O cale de acces care începe cu ”/” face referire la un folder aflat în
directorul rădăcină al site-ului. De exemplu
”/Home/Cuprins/Capitolul1.html” reprezintă calea de acces către
fișierul ”Capitolul1.html” și este valabilă din orice fișier al site-ului.
Slide 16
Dezvoltarea
aplicațiilor WEB Legături interne
Sunt legături create în cadrul unei pagini web. Presupun crearea unei
ancore ţintă care să identifice zona din pagina web către care se doreşte
realizearea unui link. De exemplu dacă se doreşte realizarea unui link
către paragraful 7 de pe o pagină, acesta trebuie identificat astfel:
<html>
<body>
….
<a name=”cuvant_cheie”><H2>Paragraf 7</h2></a>
<P> Continut paragraf 7 ….</p>
…
</body>
</html>
Slide 17
Dezvoltarea
aplicațiilor WEB Legături interne
Un link către zona definită anterior se realizeză prin specificarea
cuvantului cheie ca valoare a atributului href precedat de semnul “#”.
Exemplu:
<a href=”#cuvant_cheie”>Click aici pentru paragraful 7</a>
Accesarea zonei definite de ancora ţintă din afara fişierului în care
aceasta este plasată se realizează prin plasarea URL-ului fişierui
înaintea semnului “#”. Se păstrează regulile privind linkurile relative
sau absolute. De exemplu, presupunând că ancora ţintă a fost plasată
în fişierul capitolul1.html, o legătură către acesta din fişierul index.html
se realizează astfel:
<a href=”Cuprins/capitolul1.html#cuvant_cheie”>Click aici pentru
paragraful 7</a>
Slide 18
Dezvoltarea
aplicațiilor WEB Inserarea imaginilor în paginile web
Majoritatea browserelor suportă câteva formate de imagine:
❑ GIF (Graphics Interchange Format) cu extensia .gif;
❑ JPEG (Joint Photographic Experts Group) cu extensia .jpeg
sau .jpg;
❑ PNG (Portable Network Graphics) cu extensia .png
❑ XPM (X PixMap) cu extensia .xmp;
❑ XBM (X BitMap) cu extensia .xbm;
❑ BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
❑ TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Dintre aceste formate cele mai uzitate sunt GIF, JPEG şi PNG.
Fiecare dintre acestea utilizează o metodă de comprimare astfel că
fişierele care conţin aceste imagini sunt mai mici în raport cu cele
care utilizează alte formate.
Slide 19
Dezvoltarea
aplicațiilor WEB Inserarea imaginilor în paginile web
Dintre aceste formate cele mai uzitate sunt GIF, JPEG şi PNG. Fiecare
dintre acestea utilizează o metodă de comprimare astfel că fişierele care
conţin aceste imagini sunt mai mici în raport cu cele care utilizează alte
formate.
Inserarea unei imagini într-o pagină web se realizează cu ajutorul tagului
img
<img src=”URL_imagine” alt=”text_alternativ” height=”n” width=”m”>
URL_imagine reprezintă URL-ul imaginii care se inserează şi repectă
aceleaşi reguli ca la realizearea linkurilor
text_alternativ reprezintă un text care va fi afişat atunci când imaginea nu
este disponibilă
n-o valoare numerică prin care se specifică înălţimea imaginii exprimată
în pixeli
m-o valoare numerică prin care se specifică lăţimea imaginii exprimată în
pixeli
Slide 20
Dezvoltarea
aplicațiilor WEB Blocuri HTML
Fiecare element HTML are o setare de afișare implicită în funcție de
tipul de element. Cele două tipuri de afișate sunt: bloc și inlinie.
Un element la nivel de bloc pornește întotdeauna pe o nouă linie și
ocupă toată lățimea disponibilă (se întinde spre stânga și spre
dreapta, cât poate).
<div>Text text text</div>
Un element inline nu pornește de pe o nouă linie și ocupă doar cât
este necesar din linia din care face parte sau din pagina web.
<p>Acesta este un element <span style="border: 1px solid
black">Conținut element</span> de tip span definit în cadrul unui
paragraf.</p>
Slide 21
Dezvoltarea
aplicațiilor WEB Blocuri HTML: <div>și <span>
Elementul <div> este folosit adesea drept container pentru alte
elemente HTML.
Elementul <div> nu are attribute obligatorii dar atributele style, class și
id sunt cele mai uzuale.
Elementul <span> este adesea utilizat drept container pentru text.
Slide 22
Dezvoltarea
aplicațiilor WEB Elemente HTML semantice
Elemente semantice = elemente cu semnificație.
Un element semantic descrie clar sensul său atât pentru browser
cât și pentru dezvoltator.
Exemple de elemente non-semantice: <div> și <span> - Nu spun
nimic despre conținutul lor.
HTML pune la dispoziție mai multe elemente semantice care
definesc diferitele părți ale unei pagini web:
o <header> - Definește un antet pentru document sau o secțiune
o <nav> - Definește un container pentru linkurile folosite la
navigare
o <section> - Definește o secțiune într-un document
o <article> - Definește un articol independent
o <aside> - Definește conținut colateral
o <footer> - Definește o zonă de subsol a unui document sau
secțiuni
o <details> - Definește detalii suplimentare
o <summary> - Definește un antet pentru elementul <details>
Slide 23
Dezvoltarea
aplicațiilor WEB
Curs 3
Slide 2
Dezvoltarea
aplicațiilor WEB Tabele HTML
Un tabel prezintă următoarele elemente:
▪ Linii
▪ Coloane
▪ Celule ale antetului
▪ Celule de conţinut
▪ Etichetă
▪ Linii ale antetutului
▪ Linii de conţinut
▪ Linii de subsol
Slide 3
Dezvoltarea Exemplu de cod HTML
aplicațiilor WEB pentru crearea unui tabel:
<html>
<body>
<table border="1">
<caption>Etichetă tabel</caption>
<thead>
<tr><td colspan="2">Antet tabel</td></tr>
</thead>
<tfoot>
<tr><td colspan="2">Subsol tabel</td></tr>
</tfoot>
<tbody>
<tr>
<th>Antet celula 1</th><th>Antet celula 2</th>
</tr>
<tr>
<td>Conţinut celula 1</td><td>Conţinut celula 2</td>
</tr>
</tbody>
</table>
</body>
</html>
Slide 4
Dezvoltarea
aplicațiilor WEB
Slide 5
Dezvoltarea
aplicațiilor WEB Tag-uri pentru tabele
<table> -tagul utilizat pentru descrierea unui tabel
<caption> -tag utilizat pentru ataşarea unei etichete tabelului
<thead> -tag utilizat pentru descrierea antetului tabelului
<tfoot> -tag utilizat pentru descrierea subsolului tabelului
<tbody>-tag utilizat pentru descrierea corpului tabelului
<tr> -tag utilizat pentru descrierea unei linii a tabelului
<td>-tag utlizat pentru descrierea unei celule standard a tabelului
(conţinutul unei astfel de celule este scris cu text normal, aliniat la
stânga)
<th> -tag utilizat pentru descrierea unei celule de tip antet (conţinutul
unei astfel de celule este automat aliniat pe centru, textul este
îngroşat)
Slide 6
Dezvoltarea
aplicațiilor WEB Fuzionare celule tabel
O celulă a unui tabel se poate întinde pe mai multe linii şi/sau
coloane. Atributele utilizate în acest scop sunt
▪ colspan
▪ rowspan
Atributul rowspan prin valoarea sa precizează pe câte linii în jos se va
extinde celula în cadrul căreia este plasat atributul. Atributul colspan
precizează prin valoarea luată pe câte coloane către dreapta se va
extinde celula în cadrul căreia este plasat.
Slide 7
Dezvoltarea
aplicațiilor WEB Rowspan-exemplu
</html> Se poate observa prezenţa în tagul <td> aferent celei

<body> de-a doua celule de pe prima linie a atributului
<table border="1" > rowspan cărui valoare are ca efect crearea unei
<tr> celule care va ocupa 3 linii.
<td>Linia 1 Celula 1</td> Pe următoarele 2 linii nu este necesară decât crearea
<td rowspan="3">Linia 1 a două celule deoarece a doua coloană este ocupată
Celula 2</td> de celula de pe prima linie
<td>Linia 1 Celula 3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Slide 8
Dezvoltarea
aplicațiilor WEB Colspan-exemplu
</html> Se poate observa prezenţa în tagul <td>
<body>
aferent celei de-a doua celule de pe
<table border="1" >
<tr> prima linie a atributului colspan cărui
<td>Linia 1 Celula 1</td> valoare are ca efect crearea unei celule
<td colspan="2">Linia 1 Celula care va ocupa 2 coloane.
2</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Slide 9
Dezvoltarea
aplicațiilor WEB Cascading Style Sheets (CSS)
Stilurile (Styles) - o modalitate eficientă de
formatare a conţinutului unui document.
Permite reutilizarea formatelor stabilite pentru mai
multe elemente.
O foaie de stil definită în cascadă (Cascade Style
Sheet) - o secvenţă de instrucţiuni definite într-un
limbaj specific utilizat pentru a descrie cum ar
trebui formatată o secţiune a unui document
HTML.
CSS permit realizarea de şabloane de formatare
apelabile pentru o formatare identică a unor
secţiuni multiple.
Slide 10
Dezvoltarea
aplicațiilor WEB
HTML nu a fost construit pentru a formata o pagina web ci pentru a

descrie conținutul unei pagini web.
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf>
Când etichetele precum <font> și atributele de culoare au fost
adăugate la specificația HTML 3.2, a început un coșmar pentru
dezvoltatorii web. Dezvoltarea de site-uri web mari, în care fonturile și
informațiile de culoare au fost adăugate la fiecare pagină, a devenit
un proces lung și costisitor. Pentru a rezolva această problemă, World
Wide Web Consortium (W3C) a creat CSS.
CSS a eliminat stilurile de formatare din HTML!
Slide 11
Dezvoltarea
aplicațiilor WEB Modalităţi de definire a stilurilor
1. Stiluri specifice tag-urilor (IN-LINE) –
definite în interiorul unui element prin
atributul Style;
2. Stiluri definite la nivel de document
HTML (în antet) – definite prin elementul
<style> situat în cadrul elementului
<head>;
3. Stiluri definite în fişiere distincte (foi de stil
externe) – prin apelarea lor prin elementul
<link> situat în <head>.
Slide 12
Dezvoltarea
aplicațiilor WEB
Definirea stilurilor IN LINE
Se realizează prin utilizarea atributului STYLE,

enumerând după semnul = proprietăţile şi valorile
acestora potrivit formatelor dorite.
Forma generală:
<NumeTag Style=“proprietate1:valoare1; ...
proprietaten:valoaren ”>Text </NumeTag>
Exemplu de formatare a unei secţiuni prin definirea
stilului de formatare IN-LINE:
<p style="font-family:courier new;
color:red">Text formatat</p>
Slide 13
Dezvoltarea Definirea proprietăţilor de stil
aplicațiilor WEB în antetul documentului
Permite reutilizarea stilurilor la nivelul aceluiaşi document. Definirea se
realizează în interiorul elementului <head>
<head>
<style type="text/css">
Tag {
proprietate1: valoare1;
proprietate2: valoare2 proprietaten:valoaren
}
Tag1, ...Tagn {
...
}
.NumeClasă {
.....
}
</style>
</head>
Slide 14
Dezvoltarea
aplicațiilor WEB Definirea stilurilor prin fişiere externe CSS
Permite separarea regulilor de formatare de codul
HTML care generează documentul web.
Definirea regulilor se realizează în acelaşi mod ca în
cazul precedent, însă într-un alt fişier, cu extensia .css.
Documentului HTML trebuie să i se comunice care este
sursa stilurilor ce vor fi utilizate în formatare:
<head>
<link rel=stylesheet type="text/css"
href=“fișier.css">
</head>
Slide 15
Dezvoltarea
aplicațiilor WEB Structura unei reguli CSS
Declaraţia
selector p {color:blue;font-size:12px}
proprietate valoare
Selectorul: specifică elementele sau

componente ale acestora pentru care se
aplică regula de formatare
Declaraţia: defineşte cum trebuie să fie
formatate elementele vizate prin selector
când regula este aplicată.
Slide 16
Dezvoltarea
aplicațiilor WEB Tipuri de selectori CSS
1. Selectori simpli (selectează elementele în funcție de nume, id,
clasă)
2. Selectori combinați (selectează elementele pe baza unor relații
specifice dintre acestea)
3. Pseudo-clase (selectează elementele pe baza unor anumite stări
ale acestora)
4. Pseudo-elemente (selectează anumite părți ale elementelor)
5. Selecteori de atribute (selectează elemente pe baza unor atribute
sau pe baza valorilor atributelor)
Slide 17
Dezvoltarea
aplicațiilor WEB 1. Selectori simpli
1.1. Selectori pentru elemente HTML:
- Formatarea se aplică tuturor elementelor HTML precizate:
Slide 18
Dezvoltarea
aplicațiilor WEB
1. Selectori simpli
Reguli de formatare aplicate pentru mai

mulţi selectori:
h1, h2, h3, h4, h5, h6
{color:blue;
font-weight:bold;}
p, h3 {text-decoration:underline}
Slide 19
Dezvoltarea
aplicațiilor WEB 1. Selectori simpli
Selectorul universal:
- Referă toate elementele din cadrul unei
pagini HTML
- Se defineşte în cadrul unei reguli de
fotmatare prin caracterul *
Exemple:
1. Să se afişeze toate elementele HTML pe
fundal galben:
* {background-color: yellow;}
Slide 20
Dezvoltarea
aplicațiilor WEB 1. Selectori simpli – clase de formatare
1.2. Selectori care vizează clase de formatare:
- Formatarea se aplică doar pentru elementele HTML care posedă
numele clasei de formatare definit de selector:
Slide 21
Dezvoltarea
aplicațiilor WEB 1. Selectori simpli- id
Selectori de tip id
Slide 22
Dezvoltarea
aplicațiilor WEB 2. Selectori combinați
Contextualizarea selectorilor de clasă:
- Presupune definirea explicită a unei reguli pentru un anumit element
HTML aferent unei clase de formatare:
Deşi ambele elemente din

exemplu prezintă aceeaşi
clasă de formatare, doar
pentru elementul h3 se aplică
formatarea specială Slide 23
Dezvoltarea
aplicațiilor WEB Moştenirea stilurilor - Exemplu
BODY
DIV P
SPAN
EM
Slide 24
Dezvoltarea
aplicațiilor WEB Modificarea stilurilor în cadrul unei ierarhii
Defineşte posibilitatea de a modifica stilul unor elemente doar
dacă acestea se constituie ca elemente copil ale unui selector.
- Să se formateze elementele <em> care se regăsesc în
interiorul elementelor de tip SPAN.
Slide 25
Dezvoltarea Reguli de stil aplicabile pentru
aplicațiilor WEB elementele copil ale unui selector
Element copil: descendentul direct al unui selector specificat.
Forma generală de referire:
Nume selector părinte > element copil {declaraţie}

Exemple:
Să se formateze cu roșu doar elementele copil de tip <em> ale
elementelor de tip paragraf.
p > em {color: red;}
Să se formateze distinct doar elementele copil de tip <span> ale clasei
font-special:
.textSpecial > span {
font-family: ’Monotype Corsiva’;
color:blue;
font-weight:bold;
}
Slide 26
Dezvoltarea
aplicațiilor WEB Pseudo-clase
Sunt utilizate pentru a gestiona o regulă de formatare care va fi
luată în considerare doar când survin anumite evenimente sau
condiţii (de exemplu sunt primul element de un anumit tip sau
mouse-ul este poziționat pe elementul respectiv).
Pseudo-clase pentru hiperlegături:
- link: defineşte modul cum arată legătura în starea de
aşteptare;
- visited: defineşte modul de formatare a unei legături care
a fost deja accesată;
- hover: precizează modul de formatare a unei legături
peste care trece cursorul;
- active: modul de afişare a unei legături când se
efectuează clic în cadrul ei.
Exemplu: a:link {color:green}
a:hover {color:blue; text-decoration:underline}
Slide 27
Dezvoltarea
Formatarea primului element copil al unui
selector:
X:first-child {declaraţii} → X defineşte un
element sau clasă de formatare
Exemplu: div p:first-child {color:red}
Formatarea unui element aferent unui formular la
plasarea cursorului în cadrul său:
X:focus {declaraţii}
Exemplu: input:focus {border:1px solid blue}
Slide 28
Dezvoltarea
aplicațiilor WEB Pseudo-elemente
Un pseudo-element CSS permite definirea de proprietăți
pentru părțile specificate ale unui element HTML.
Formatarea primei litere a unui paragraf:
p::first-letter {font-size:300%;float:left}
Formatarea primei linii dintr-un paragraf:
p::first-line {text-decoration:overline}
Plasarea unui text suplimentar înaintea sau după un
element:
span.varsta::before {content:”vârsta “}
span.varsta::after {content:” ani“}
<span class=“varsta”>34</span>
Slide 29
Dezvoltarea
aplicațiilor WEB Selectori pe bază de atribute
Selectori de atribute:
- Permit definirea de reguli de formatare pentru
anumite elemente care posedă anumite atribute:
- Mod de definire:
element[nume_atribut] {declaraţie}
element[nume_atribut=“valoare”] {declaraţie}
- Exemplu: Să se afişeze la dimensiunea 100x150
pixeli toate imaginile care posedă proprietatea de text
alternativ (alt)
img[alt] {width:100px;height:150px
- Exemplu: Să se seteze culoarea de fundal pentru
toate controalele de tip casetă de text
input[type=“text”] {background-color:#cccccc;}
Slide 30
Dezvoltarea
aplicațiilor WEB Aplicarea stilurilor în cascadă
Reguli de precedenţă:
1. Stilurile definite INLINE au prioritate
2. Regulile aferente selectorilor definiţi pentru id-uri suprascriu
regulile selectorilor cu clase.
3. Selectorii cu clase suprascriu formatările selectorilor aferente
elementelor.
4. Dacă aceeaşi proprietate se aplică în mai multe locuri în ierarhia
de formatare pentru un anumit element prioritate au regulile cele
mai apropriate de declaraţia elementului vizat.
4. Stilurile definite explicit suprascriu stilurile moştenite în cadrul
ierarhiei de elemente a paginii.
5. Toate regulile de stil sunt sortate şi aplicate de către browser în
funcţie de specificitatea acestora.
Slide 31
Dezvoltarea
Specificitate: gradul de importanţă
acordat unei reguli de formatare de
către browser.
Ierarhia specificității:
▪ Stilurile definite inline
▪ ID-uri
▪ Clase, atribute și pseudoclase
▪ Elemente și pseudoelemente
Slide 32
Dezvoltarea Calculul specificităţii unei reguli de
aplicațiilor WEB formatare prin stiluri
Specificitatea se reprezintă printr-un număr format din 4
caractere: abcd
Pentru calcul fiecare dintre cele 4 caractere prezintă
valoarea iniţială 0. a=0, b=0, c=0, d=0
a ia valoarea 1 când regula este definită INLINE.
b reprezintă numărul de id-uri din cadrul selectorului
regulii de formatare;
c – numărul de clase, pseudo-clase, selectori de tip
atribut;
d – numărul de nume de elemente sau pseudo-
elemente.
Slide 33
p.font-special {…} → a=0, b=0, c=1,d=1 →11
body #divContinut p.static span em {…}
a=0, b=1, c=1, d=4 →114
#antet img[alt=“logo”] {…}
a=0, b=1, c=1,d=1 → 111
<p style="color:#000000;">
a=1, b=0, c=0, d=0 → 1000
Slide 34
Dezvoltarea
aplicațiilor WEB Unități de măsură CSS
CSS dispune de câteva unități de măsură pentru exprimarea
dimensiunilor unor elemente.
O astfel de dimensiune este precizată în CSS printr-un număr urmat
de o unitate de măsură (de ex. 3px, 2em etc.)
Unitatea de măsură va apărea imediat după valoarea numerică (fără
spațiu între ele) iar în situația în care valoarea este 0 (zero) unitatea
de măsură poate fi omisă
Pentru unele proprietăți CSS se admit valori negative.
Există două tipuri de unități de măsură:
-absolute;
-relative
Slide 35
Dezvoltarea
aplicațiilor WEB Unități de măsură absolute
Unitățile de măsură absolută sunt fixe și o lungime exprimată în
oricare dintre acestea va avea exact acea dimensiune.
Unitate Descriere
cm Centimetru
mm Milimetru
in inches (1in = 96px = 2,54cm)
px * pixeli (1px = 1/96 din 1in)
pt points (1pt = 1/72 din 1in)
pc picas (1pc = 12 pt)
Pixelul depinde de dispozitivul de vizualizare
Slide 36
Dezvoltarea
aplicațiilor WEB Unități de măsură relative
Unitățile de măsură relativă specifică o dimensiune ca raport față de
altă dimensiune. Unitățile de lungime relativă scalează mai bine între
diferite medii de redare.
Unitate Descriere
em Unitate de măsură exprimată în raport cu mărimea literei

elementului (2em înseamnă de două ori mărimea literei
curente)
% Unitate de măsură exprimată în raport cu elementul părinte
Slide 37
Dezvoltarea
Proprietăţi referitoare la corpul de literă
aplicațiilor WEB
Proprietate Explicaţii
font Stabileşte toate proprietăţile într-o singură

declaraţie
font-family Stabileşte familia de fonturi
font-size Stabileşte mărimea fontului
font-style Stabileşte stilul fontului
font-variant Stabileşte dacă litera terbuie afişată având

caractere micşorate
font-weight Stabileşte grosimea fontului
Slide 38
Dezvoltarea
aplicațiilor WEB Proprietatea font-family
font-family stabileşte corpul sau corpurile de literă pentru textul din document sau
elementele cărora se ataşează stilul repectiv. Există două tipuri de familii de
fonturi:
familii-nume prin care se pecifică un nume cum ar fi: "times", "courier", "arial", etc.
familii-generice prin care se specifică numele unei familii generice cum ar fi "serif",
"sans-serif", "cursive", "fantasy", "monospace". Aceste familii generice sunt
delimitate în special în funcţie de ormanentele asociate fonturilor respective.
Imaginea care urmează prezintă fonturi din categoriile menţionate:
Se pot preciza mai multe familii separate de

semnul “,”. Acestea se vor preciza în ordinea
preferinţelor browserul alegând prima familie
disponibilă din listă. În situaţia în care numele
unei familii este compus din mai multe cuvinte,
numele acesteia va fi încadrat de ghilimele.
Exemplu :
Body {font-family: “Times New Roman”, Serif}
Slide 39
Dezvoltarea
aplicațiilor WEB Proprietatea font-style
Font-style este utliza pentru a stabili un text cursiv (italic). Valorile
posibile pentru valoarea atributului sunt:
- normal – text normal
- italic – text cursiv (italic)
oblique –foarte asemănător cu italic dar mai puţin suportat de către
browsere
Slide 40
Dezvoltarea
aplicațiilor WEB Proprietatea font-weight
Font-weight specifică grosimea fontului. Valori posibile pentru valorile
atributului:
Valoare atribut Explicaţie
normal Caractere normale
bold Caractere îngroşate
bolder Caractere mai îngroşate
lighter Caractere mai subţiri
100 Se defineşte grosimea caracterelor, 400 fiind valoarea pentru
200 caractere de grosime normală, 700 echivalând cu bold.
300
400
500
600
700
800
900
Slide 41
Dezvoltarea
aplicațiilor WEB
Curs 4
Slide 2
Dezvoltarea
aplicațiilor WEB Modificarea stilurilor în cadrul unei ierarhii
Defineşte posibilitatea de a modifica stilul unor elemente doar
dacă acestea se constituie ca elemente copil ale unui selector.
- Să se formateze elementele <em> care se regăsesc în
interiorul elementelor de tip SPAN.
Slide 3
Dezvoltarea Reguli de stil aplicabile pentru
aplicațiilor WEB elementele copil ale unui selector
Element copil: descendentul direct al unui selector specificat.
Forma generală de referire:
Nume selector părinte > element copil {declaraţie}

Exemple:
Să se formateze cu roșu doar elementele copil de tip <em> ale
elementelor de tip paragraf.
p > em {color: red;}
Să se formateze distinct doar elementele copil de tip <span> ale clasei
font-special:
.textSpecial > span {
font-family: ’Monotype Corsiva’;
color:blue;
font-weight:bold;
}
Slide 4
Dezvoltarea
aplicațiilor WEB Selectori pe bază de atribute
Selectori de atribute:
- Permit definirea de reguli de formatare pentru
anumite elemente care posedă anumite atribute:
- Mod de definire:
element[nume_atribut] {declaraţie}
element[nume_atribut=“valoare”] {declaraţie}
- Exemplu: Să se afişeze la dimensiunea 100x150
pixeli toate imaginile care posedă proprietatea de text
alternativ (alt)
img[alt] {width:100px;height:150px}
- Exemplu: Să se seteze culoarea de fundal pentru
toate controalele de tip casetă de text
input[type=“text”] {background-color:#cccccc;}
Slide 5
Dezvoltarea
aplicațiilor WEB Pseudo-clase în definirea stilurilor
Sunt utilizate pentru a gestiona o regulă de formatare care va fi
luată în considerare doar când survin anumite evenimente sau
condiţii.
Pseudo-clase pentru hiperlegături:
- link: defineşte modul cum arată legătura în starea de
aşteptare;
- visited: defineşte modul de formatare a unei legături care
a fost deja accesată;
- hover: precizează modul de formatare a unei legături
peste care trece cursorul;
- active: modul de afişare a unei legături când se
efectuează clic în cadrul ei.
Exemplu: a:link {color:green}
a:hover {color:blue; text-decoration:underline}
Slide 6
Dezvoltarea
aplicațiilor WEB Pseudo-clase în definirea stilurilor
Formatarea primului element copil al unui
selector:
X:first-child {declaraţii} → X defineşte un
element sau clasă de formatare
Exemplu: div p:first-child {color:red}
Formatarea unui element aferent unui formular la
plasarea cursorului în cadrul său:
X:focus {declaraţii}
Exemplu: input:focus {border:1px solid blue}
Slide 7
Dezvoltarea
Selector Exemplu Descriere
:first-child p:first-child Selectează fiecare element <p> care este primul
copil al părintelui său
:last-child p:last-child Selectează fiecare element <p> care este ultimul
copil al părintelui său
:nth-child(n) p:nth-child(2) Selectează fiecare al doilea element <p> dintr-
un element părinte
p:nth-child(n) Selectează toate elementele <p> dintr-un
element părinte
p:nth-child(2n) Selectează toate elementele <p> aflate pe poziții
pare dintr-un element părinte
p:nth-child(2n) Selectează toate elementele <p> aflate pe poziții
impare dintr-un element părinte
p:nth-child(-n+3) Selecteză primele 3 elemente de tip p dintr-un
element părinte
:nth-last-child(n) p:nth-last- La fel ca la :nth-child(n) doar că numerotarea se
child(2) face de la final
Slide 8
Dezvoltarea
aplicațiilor WEB Pseudo-elemente
Un pseudo-element CSS permite definirea de proprietăți
pentru părțile specificate ale unui element HTML.
Formatarea primei litere a unui paragraf:
p::first-letter {font-size:300%;float:left}
Formatarea primei linii dintr-un paragraf:
p::first-line {text-decoration:overline}
Plasarea unui text suplimentar înaintea sau după un
element:
span.varsta::before {content:”vârsta “}
span.varsta::after {content:” ani“}
<span class=“varsta”>34</span>
Slide 9
Dezvoltarea
Reguli de precedenţă:
1. Stilurile definite INLINE au prioritate
2. Regulile aferente selectorilor definiţi pentru id-uri suprascriu
regulile selectorilor cu clase.
3. Selectorii cu clase suprascriu formatările selectorilor aferente
elementelor.
4. Dacă aceeaşi proprietate se aplică în mai multe locuri în ierarhia
de formatare pentru un anumit element prioritate au regulile cele
mai apropriate de declaraţia elementului vizat.
4. Stilurile definite explicit suprascriu stilurile moştenite în cadrul
ierarhiei de elemente a paginii.
5. Toate regulile de stil sunt sortate şi aplicate de către browser în
funcţie de specificitatea acestora.
Slide 10
Dezvoltarea
Specificitate: gradul de importanţă
acordat unei reguli de formatare de
către browser.
Ierarhia specificității:
▪ Stilurile definite inline
▪ ID-uri
▪ Clase, atribute și pseudoclase
▪ Elemente și pseudoelemente
Slide 11
Specificitatea se reprezintă printr-un număr format din 4
caractere: abcd
Pentru calcul fiecare dintre cele 4 caractere prezintă
valoarea iniţială 0. a=0, b=0, c=0, d=0
a ia valoarea 1 când regula este definită INLINE.
b reprezintă numărul de id-uri din cadrul selectorului
regulii de formatare;
c – numărul de clase, pseudo-clase, selectori de tip
atribut;
d – numărul de nume de elemente sau
pseudoelemente.
Slide 12
p.font-special {…} → a=0, b=0, c=1,d=1 →11
body #divContinut p.static span em {…}
a=0, b=1, c=1, d=4 →114
#antet img[alt=“logo”] {…}
a=0, b=1, c=1,d=1 → 111
<p style="color:#000000;">
a=1, b=0, c=0, d=0 → 1000
a inline
b id*nrDeApariții
c clase,pseudoclase, atribut
d elemente, pseudoelemente
Slide 13
Dezvoltarea
aplicațiilor WEB Unități de măsură CSS
CSS dispune de câteva unități de măsură pentru exprimarea
dimensiunilor unor elemente.
O astfel de dimensiune este precizată în CSS printr-un număr urmat
de o unitate de măsură (de ex. 3px, 2em etc.)
Unitatea de măsură va apărea imediat după valoarea numerică (fără
spațiu între ele) iar în situația în care valoarea este 0 (zero) unitatea
de măsură poate fi omisă
Pentru unele proprietăți CSS se admit valori negative.
Există două tipuri de unități de măsură:
-absolute;
-relative
Slide 14
Dezvoltarea
aplicațiilor WEB Unități de măsură absolute
Unitățile de măsură absolută sunt fixe și o lungime exprimată în
oricare dintre acestea va avea exact acea dimensiune.
Unitate Descriere
cm Centimetru
mm Milimetru
in inches (1in = 96px = 2,54cm)
px * pixeli (1px = 1/96 din 1in)
pt points (1pt = 1/72 din 1in)
pc picas (1pc = 12 pt)
Pixelul depinde de dispozitivul de vizualizare

Slide 15
Dezvoltarea
aplicațiilor WEB Unități de măsură relative
Unitățile de măsură relativă specifică o dimensiune ca raport față de
altă dimensiune. Unitățile de lungime relativă scalează mai bine între
diferite medii de redare.
Unitate Descriere
em Unitate de măsură exprimată în raport cu mărimea literei

elementului (2em înseamnă de două ori mărimea literei
curente)
% Unitate de măsură exprimată în raport cu elementul părinte
Slide 16
Dezvoltarea
Proprietăţi referitoare la corpul de literă
aplicațiilor WEB
Proprietate Explicaţii
font Stabileşte toate proprietăţile într-o singură

declaraţie
font-family Stabileşte familia de fonturi
font-size Stabileşte mărimea fontului
font-style Stabileşte stilul fontului (normal/italic/oblique)
font-variant Stabileşte dacă litera trebuie afişată având

caractere micşorate
font-weight Stabileşte grosimea fontului
Slide 17
Dezvoltarea
aplicațiilor WEB Proprietatea font-family
font-family stabileşte corpul sau corpurile de literă pentru textul din document sau
elementele cărora se ataşează stilul repectiv. Există două tipuri de familii de
fonturi:
• familii-nume prin care se pecifică un nume cum ar fi: "times", "courier", "arial",
etc.
• familii-generice prin care se specifică numele unei familii generice cum ar fi
"serif", "sans-serif", "cursive", "fantasy", "monospace". Aceste familii generice
sunt delimitate în special în funcţie de ormanentele asociate fonturilor
respective. Imaginea care urmează prezintă fonturi din categoriile menţionate:
Se pot preciza mai multe familii separate de semnul
“,”. Acestea se vor preciza în ordinea preferinţelor
browserul alegând prima familie disponibilă din listă.
În situaţia în care numele unei familii este compus din
mai multe cuvinte, numele acesteia va fi încadrat de
ghilimele.
Exemplu :
Body {font-family: “Times New Roman”, Serif}
Slide 18
Dezvoltarea
aplicațiilor WEB Proprietatea font-style
Font-style este utliza pentru a stabili un text cursiv (italic). Valorile
posibile pentru valoarea atributului sunt:
- normal – text normal
- italic – text cursiv (italic)
- oblique – foarte asemănător cu italic dar mai puţin suportat de către
browsere
Slide 19
Dezvoltarea
aplicațiilor WEB Proprietatea font-weight
Font-weight specifică grosimea fontului. Valori posibile pentru valorile
atributului:
Valoare atribut Explicaţie
normal Caractere normale
bold Caractere îngroşate
bolder Caractere mai îngroşate
lighter Caractere mai subţiri
100 Se defineşte grosimea caracterelor, 400 fiind valoarea pentru
200 caractere de grosime normală, 700 echivalând cu bold.
300
400
500
600
700
800
900
Slide 20
Dezvoltarea
aplicațiilor WEB Modelul CSS bazat pe casete
Premisă: Conţinutul fiecărui element HTML este încadrat de o casetă
prezentând mai multe proprietăţi.
Formatarea blocurilor de conţinut: presupune modificarea valorilor
proprietăţilor aferente casetelor elementelor:
- Border: defineşte conturul casetei
https://www.w3schools.com/css/css_border.asp;
- Margin: defineşte distanţa dintre marginile elementului formatat şi
marginea elementelor adiacente
https://www.w3schools.com/css/css_margin.asp;
- Padding: distanţa dintre limita interioară a chenarului casetei şi
conţinutul casetei https://www.w3schools.com/css/css_padding.asp;
- Height, width, min-height, max-height, min-width, max-width: proprietăţi
pentru dimensionarea pe verticală şi pe orizontală a casetei elementului
formatat https://www.w3schools.com/css/css_dimension.asp.
https://www.w3schools.com/css/css_boxmodel.asp
Slide 21
Dezvoltarea
aplicațiilor WEB
Proprietatea box-sizing definește modul în care sunt calculate lățimea

și înălțimea unui element.
Valoare Descriere Demo
proprietate
content-box Implicit. Proprietățile width/min- Demo ❯
width/max-width and height/min-
height/max-height includ doar
conținutul. Valorile pentru border și
padding nu sunt incluse.
border-box Proprietățile width/min-width/max- Demo ❯
width and height/min-height/max-
height includ conținutul,valorile
pentru border și padding
Slide 22
Dezvoltarea
aplicațiilor WEB
Slide 23
Dezvoltarea
aplicațiilor WEB Modul de afişare a elementelor
Proprietatea DISPLAY: stabileşte cum va fi afişat un anumit
element în raport cu elementele alăturate:
none Elementul nu va fi afişat
block Elementul va fi afişat ca un bloc de text(cum sunt afişate paragrafele sau
antetele)
inline Implicit. Elementul este afişat în acelaşi rând cu elementele adiacente
(cum este afişat un text formatat cu span)
inline-block Elementul este plasat în acelaşi rând cu conţinutul adiacent dar se
comportă ca un element de tip bloc.
inline-table Elementul este afişat ca un tabel în linie cu elementele adiacente lui.
list-item Elementul este afişat ca un element al unei liste.

table Elementul este afişat ca tabel.
table-cell Elementul este afişat ca o celulă a unui tabel.
Slide 24
Dezvoltarea
<p>Acest paragraf contine
<span id=“TextFormatat”>un text</span>
formatat distinct</p>
span#TextFormatat
{font-style:italic; display:inline; }
span#TextFormatat
{font-style:italic; display:block; }
span#TextFormatat
{font-style:italic; display:list-item; }
span#TextFormatat
{font-style:italic; display:none; }
Slide 25
Dezvoltarea
aplicațiilor WEB Vizibilitatea elementelor HTML
Proprietatea visibility: desemnează dacă un element este
afişat sau ascuns:
Valori posibile:
visible (implicit) – elementul este afişat în funcţie de
valoare proprietăţii DISPLAY;
hidden – elementul este ascuns (dar încă mai ocupă
spaţiu în cadrul paginii HTML)
collapse – doar pentru elementele unui tabel: poate fi
folosită pentru a ascunde un rând al unui tabel fără ca
spaţiul acestuia să fie eliberat.
Slide 26
Dezvoltarea
aplicațiilor WEB Poziţionarea elementelor HTML
Proprietăţile de poziţionare permit definirea locaţiei unui element în
cadrul paginii.
Reprezintă locul unde va fi plasat elementul în raport cu un element de
referinţă.
Este utilizată împreună cu proprietăţile TOP şi LEFT;
Există patru metode diferite de poziţionare:
- Poziţionarea statică (implicită): elementul este afişat potrivit fluxului
normal a paginii HTML;
- Poziţionarea fixă: elementul este afişat în raport cu fereastra browser-
ului (derularea ferestrei nu afectează afişarea elementului);
- Poziţionarea relativă: elementul este poziţionat relativ cu poziţia sa
normală la o anumită distanţă specificată prin proprietăţile TOP şi
LEFT;
- Poziţionarea absolută: elementul este poziţionat relativ cu primul
element părinte care are o poziţie fixă sau relativă.
Slide 27
Poziţionarea elementelor HTML
p p#PozitionareAbsoluta
{ {
position:static; position:absolute;
} top:50px;
}
p#PozitionareRelativa
.pozitionareFixa
{
{
position:relative;
position:fixed;
top:30px;
top:15px;
left:20px;
left:20px;
}
}
Dezvoltarea
aplicațiilor WEB Efecte de formatare specială (I)
Umbre şi contururi personalizate în CSS3:
- Proprietatea box-shadow: deplasareOrizontală
deplasareVericală grosimea_umbrei distanţare_umbră culoare;
• deplasareOrizontală (pixeli) – pentru valori pozitive umbra
este deplasată spre dreapta, pentru valori negative la stânga;
• deplasareVerticală (pixeli) – valori pozitive – umbra se
deplasează în jos, valori negative – umbra se deplasează în
sus;
• grosimea_umbrei (pixeli) – cât de mare se afişează umbra;
• Distanţare_umbră – distanţa la care se va afişa efectul de
umbră;
• Culoare – culoarea umbrei.
Slide 29
Dezvoltarea
aplicațiilor WEB Efecte de formatare specială (II)
- Proprietatea border-radius: stânga-sus
dreapta-sus dreapta-jos stânga-jos;
• Valorile proprietăţii de formatare sunt
exprimate în pixeli (px), puncte
tipografice (pt), sau unităţi relative (em).
• Fiecare dintre valori defineşte raza de
rotunjire a colţului aferent chenarului.
• Funcţionează în corelaţie cu
proprietatea border.
Slide 30
Dezvoltarea
aplicațiilor WEB Exemplu de formatare specială
Slide 31
Dezvoltarea
aplicațiilor WEB
Curs 5
Slide 2
Dezvoltarea
aplicațiilor WEB Modelul CSS bazat pe casete
Premisă: Conţinutul fiecărui element HTML este încadrat de o casetă
prezentând mai multe proprietăţi.
Formatarea blocurilor de conţinut: presupune modificarea valorilor
proprietăţilor aferente casetelor elementelor:
- Border: defineşte conturul casetei
https://www.w3schools.com/css/css_border.asp;
- Margin: defineşte distanţa dintre marginile elementului formatat şi
marginea elementelor adiacente
https://www.w3schools.com/css/css_margin.asp;
- Padding: distanţa dintre limita interioară a chenarului casetei şi
conţinutul casetei https://www.w3schools.com/css/css_padding.asp;
- Height, width, min-height, max-height, min-width, max-width: proprietăţi
pentru dimensionarea pe verticală şi pe orizontală a casetei elementului
formatat https://www.w3schools.com/css/css_dimension.asp.
https://www.w3schools.com/css/css_boxmodel.asp
Slide 3
Dezvoltarea
aplicațiilor WEB
Proprietatea box-sizing definește modul în care sunt calculate lățimea

și înălțimea unui element.
Valoare Descriere Demo
proprietate
content-box Implicit. Proprietățile width/min- Demo ❯
width/max-width and height/min-
height/max-height includ doar
conținutul. Valorile pentru border și
padding nu sunt incluse.
border-box Proprietățile width/min-width/max- Demo ❯
width and height/min-height/max-
height includ conținutul,valorile
pentru border și padding
Slide 4
Dezvoltarea
aplicațiilor WEB
Slide 5
Dezvoltarea
Proprietatea DISPLAY: stabileşte cum va fi afişat un anumit
element în raport cu elementele alăturate:
none Elementul nu va fi afişat
block Elementul va fi afişat ca un bloc de text(cum sunt afişate paragrafele sau
antetele)
inline Implicit. Elementul este afişat în acelaşi rând cu elementele adiacente
(cum este afişat un text formatat cu span)
inline-block Elementul este plasat în acelaşi rând cu conţinutul adiacent dar se
comportă ca un element de tip bloc.
inline-table Elementul este afişat ca un tabel în linie cu elementele adiacente lui.
list-item Elementul este afişat ca un element al unei liste.

table Elementul este afişat ca tabel.
table-cell Elementul este afişat ca o celulă a unui tabel.
Slide 6
Dezvoltarea
<p>Acest paragraf contine
<span id=“TextFormatat”>un text</span>
formatat distinct</p>
span#TextFormatat
{font-style:italic; display:inline; }
span#TextFormatat
{font-style:italic; display:block; }
span#TextFormatat
{font-style:italic; display:list-item; }
span#TextFormatat
{font-style:italic; display:none; }
Slide 7
Dezvoltarea
aplicațiilor WEB Vizibilitatea elementelor HTML
Proprietatea visibility: desemnează dacă un element este
afişat sau ascuns:
Valori posibile:
visible (implicit) – elementul este afişat în funcţie de
valoare proprietăţii DISPLAY;
hidden – elementul este ascuns (dar încă mai ocupă
spaţiu în cadrul paginii HTML)
collapse – doar pentru elementele unui tabel: poate fi
folosită pentru a ascunde un rând al unui tabel fără ca
spaţiul acestuia să fie eliberat.
Slide 8
Dezvoltarea
aplicațiilor WEB Poziţionarea elementelor HTML
Proprietăţile de poziţionare permit definirea locaţiei unui element în
cadrul paginii.
Reprezintă locul unde va fi plasat elementul în raport cu un element de
referinţă.
Este utilizată împreună cu proprietăţile TOP şi LEFT;
Există patru metode diferite de poziţionare:
- Poziţionarea statică (implicită): elementul este afişat potrivit fluxului
normal a paginii HTML;
- Poziţionarea fixă: elementul este afişat în raport cu fereastra browser-
ului (derularea ferestrei nu afectează afişarea elementului);
- Poziţionarea relativă: elementul este poziţionat relativ cu poziţia sa
normală la o anumită distanţă specificată prin proprietăţile TOP şi
LEFT;
- Poziţionarea absolută: elementul este poziţionat relativ cu primul
element părinte care are o poziţie fixă sau relativă.
Slide 9
Poziţionarea elementelor HTML
p p#PozitionareAbsoluta
{ {
position:static; position:absolute;
} top:50px;
}
p#PozitionareRelativa
.pozitionareFixa
{
{
position:relative;
position:fixed;
top:30px;
top:15px;
left:20px;
left:20px;
}
}
Dezvoltarea
aplicațiilor WEB Efecte de formatare specială (I)
Proprietatea box-shadow
box-shadow: none|h-offset v-offset blur spread color inset
h-offset – deplasare orizontală (pixeli) – pentru valori pozitive
umbra este deplasată spre dreapta, pentru valori negative la
stânga;
v-offset – deplasare verticală (pixeli) – valori pozitive – umbra se
deplasează în jos, valori negative – umbra se deplasează în sus;
blur (pixeli) – intensitate efect de estompare
spread (pixeli) – distanţa pe care se va extinde efectul de umbră;
color – culoarea umbrei.
Slide 11
Dezvoltarea
aplicațiilor WEB Efecte de formatare specială (II)
- Proprietatea border-radius: stânga-sus
dreapta-sus dreapta-jos stânga-jos;
• Valorile proprietăţii de formatare sunt
exprimate în pixeli (px), puncte
tipografice (pt), sau unităţi relative (em).
• Fiecare dintre valori defineşte raza de
rotunjire a colţului aferent chenarului.
• Funcţionează în corelaţie cu
proprietatea border.
Slide 12
Dezvoltarea
aplicațiilor WEB Exemplu de formatare specială
Slide 13
Dezvoltarea
aplicațiilor WEB Layout-Tabele HTML
Elementul <table> nu a fost proiectat ca un instrument pentru
stabilirea aspectului unei pagini web!
Scopul elementului <tabel> este afișarea datelor tabelare. Așadar, nu
folosiți tabele pentru aspectul paginii dvs.!
Codul HTML care folosește tabele pentru poziționarea elementelor
este complicat și greu de modificat.
Slide 14
Dezvoltarea
aplicațiilor WEB Proprietățile Float și Clear
Float: utilizat pentru a permite unui element de tip bloc să accepte alt
element pe același rând cu el
Clear: anulează comanda proprietății float.
Scenarii:
- O imagine afișată în linie cu un text, textul înconjurând imaginea.
- Afișarea mai multor coloane ca stil de aranjare a conținutului unui
document HTML.
Mai multe informații despre Float
Slide 15
Dezvoltarea
aplicațiilor WEB Float și Clear - exemple
Rezultat:
Slide 16
Dezvoltarea
aplicațiilor WEB
Curs 7
Formulare HTML
Slide 2
Dezvoltarea
aplicațiilor WEB
Dacă la începuturile sale, limbajul HTML servea doar

ca instrument prin care date de pe un server erau
afisate utilizatorilor, fără ca aceştia din urmă să poată
interveni aupra acestora, mai târziu formularele
HTML au oferit utilizatorilor o modalitate prin care
date introduse de aceştia să fie preluate şi prelucrate.
Formularele HTML pun la dispoziţia utilizatorilor o
serie de controale (casete de text, liste derulante,
casete de validare, butoane de opţiune etc.) prin
intermediul cărora se preiau date care sunt
transmise unui program capabil să le prelucreze.
Slide 3
Dezvoltarea
aplicațiilor WEB Elemente HTML Forms
Elementul FORM
Crearea unui formular presupune în primul rând utilizarea tagului form astfel:
<form action=”URL_program_prelucrare_date”
method=”metoda_transmitere_date”>…</form>
<html>
<body>
<form
action=“http://www.google.ro/search”
method="get">
<input type="text" name="q">
<input type="submit"
value="Cauta">
</form>
</body>
</html>
Slide 4
Dezvoltarea
aplicațiilor WEB Elemente HTML Forms
URL_program_prelucrare_date reprezintă URL-ul programului care
va recepţiona şi prelucra datele formularului (un script CGI, o pagina
ASP, o pagina PHP etc.).
Atributul method specifică protocolul de transmitere a datelor. Când
valoarea atributului este get (method=get) protocolul utilizat este
HTTP GET ceea ce înseamnă că datele introduse în formular sunt
ataşate la URL-ul precizat ca valoarea a atributului action sub forma:
nume_control=valoare_introdusă. Pentru exemplul de mai sus
apăsarea butonului Caută va avea ca efect transmiterea datelor către
server utilizând URL-ul http://www.google.ro/search?q=test (q este
numele controlului din formular, test este valoarea introdusă de
utilizator). Când valoarea atributului method este post protocolul
utilizat este HTTP POST, datele fiind transmise criptat fără a fi vizibile
utilizatorului.
Slide 5
Dezvoltarea
aplicațiilor WEB Elementul input
Elementul <input> este afișat în mai multe moduri, în funcție de
valoarea atributului type.
Exemple:
Tip Descriere
<input type="text"> Definește o casetă de text cu o singură linie
<input type="radio"> Definește un buton radio (pentru selectarea
uneia dintre mai multe opțiuni)
<input type="submit"> Definește un buton de trimitere a datelor
(introduse pe formular)
Slide 6
Dezvoltarea
aplicațiilor WEB Input type=“text”
Definește o casetă de text cu o singură linie
Sintaxa:
<input type=”text” name=”nume_control” id=“id_control”
maxlength=”n” value=”valoare_predefinita” size=”n”>
Atributele tagului de mai sus au următoarea semnificaţie:
▪ type=”text” -specifică tipul controlului (casetă de text în
cazul de faţă)
▪ name - numele utilizat pentru identificarea controlului (de
asemenea numele parametrului transmis către server)
▪ id - un identificator unic pentru control
▪ maxlength-specifică numărul maxim de caractere
acceptate de către control
▪ value-valoarea predefinită afişată de către control
▪ size-lăţimea controlului specificată în număr de caractere
Slide 7
Dezvoltarea
aplicațiilor WEB Input type=“password”
Crearea unei casete de text de tip parolă se realizează similar
creării unei casete de text, singura diferenţă fiind dată de valoarea
aributului type (type=”password”). Caseta de text de tip password
ascunde textul introdus, afişând în locul caracterelor introduse un
caracter generic (*). În momentul transmiterii datelor către server
acesta este trimis însă în clar.
Slide 8
Dezvoltarea
aplicațiilor WEB Elementul label
Elementul <label> definește o etichetă pentru multe elemente de
formă.
Elementul <label> este util pentru utilizatorii programelor de tip cititor
de ecran, deoarece acesta va citi eticheta atunci când controlul pentru
care este definită eticheta este activ.
Elementul <label> ajută, de asemenea, utilizatorii care au dificultăți să
execute clic pe regiuni foarte mici (cum ar fi butoanele radio sau
casetele de selectare) - pentru că atunci când utilizatorul face clic pe
textul din elementul <label>, acesta comută butonul / caseta de
selectare radio.
Atributul for al etichetei <label> ar trebui să fie egal cu atributul id al
elementului <input>
Slide 9
Dezvoltarea
aplicațiilor WEB Elementul label - Exemplu
Exemplu
Cod HTML
<form>
<label
for="prenume">Prenume:</label><br>
<input type="text" id="prenume"
name="prenume"><br>
<label for="nume">Nume:</label><br>
<input type="text" id="nume"
name="nume">
</form>
Slide 10
Dezvoltarea
aplicațiilor WEB Input type=“radio”
Butoanele radio sunt controale de formă rotundă prin intermediul cărora se oferă
posibilitatea utilizatorului de a alege o singură opţiune din mai multe disponibile.
Sintaxa utilizată pentru crearea unui buton radio este:
<input type="radio" id="id_control" name="nume_grup" checked="checked"

value="valoarea_daca_este_selectat" /> Text descriptiv pentru buton
Semnificaţia atributelor este următoarea

▪ type="radio" specifică tipul butonului (buton radio în cazul de faţă)
▪ id_control - identificatorul controlului
▪ name – este utilizat pentru a specifica numele grupului din care face parte butonul
respectiv (va fi acelaşi pentru toate butoanele dintr-un grup, determinând şi
comportamenul acestora-este posibilă bifarea unui singur buton dintr-un grup)
▪ checked - atunci când este prezent, butonul radio în cadrul căruia este plasat este
bifat implicit
▪ value - atributul a cărui valoare este transmisă spre prelucrare atunci când butonul
este bifat. Fiecare buton din cadrul aceluiaşi grup trebuie să aibă propria valoare
unică.
Slide 11
Dezvoltarea
aplicațiilor WEB Input type=“checkbox”
Sunt controale de formă pătrată pe care utilizatorul le poate bifa independent (bifarea
unuia nu duce automat la debifarea altuia ca în cazul butoanelor radio).
Sintaxa utilizată pentru crearea unei casete de validare este:
<input type="checkbox" id="id_control" name="nume_grup" checked="checked"

value="valoarea_daca_este_selectat" /> Text descriptiv pentru buton
Semnificaţia atributelor este următoarea

▪ type=“checkbox" specifică tipul butonului (casetă de validare în cazul de faţă)
▪ id_control - identificatorul controlului
▪ name – este utilizat pentru a specifica numele grupului din care face parte butonul
respectiv (va fi acelaşi pentru toate butoanele dintr-un grup)
▪ checked - atunci când este prezent, butonul radio în cadrul căruia este plasat este
bifat implicit
▪ value - atributul a cărui valoare este transmisă spre prelucrare atunci când butonul
este bifat. Fiecare buton din cadrul aceluiaşi grup trebuie să aibă propria valoare
unică.
Slide 12
Dezvoltarea
aplicațiilor WEB Input type=“hidden”
Este folosit pentru crearea câmpurilor ascunse.
Câmpurile ascunse au rolul de a stoca valori fără ca acestea să fe
afişate utilizatorului. Sintaxa utilizată pentru crearea unui câmp
ascuns este următoarea:
<input type="hidden" id="id_camp" name="nume_camp"
value="valoare_camp" />
Semnificaţia atributelor:
▪ id - identificatorul controlului
▪ name - numele controlului
▪ value - valoarea câmpului
Slide 13
Dezvoltarea
aplicațiilor WEB input type=“button”
Este folosit pentru crearea unui buton.
Pentru crearea unui buton standard se utilizează sintaxa:
<input type="button" id="id_camp" name="nume_camp"
value="text_afisat_pe_buton" />
▪ value - textul afişat pe buton
Pentru a fi utile în cadrul formularelor este recomandat să se ataşeze
scripturi butoanelor, scripturi care să fie executate în momentul în
care un eveniment intervine asupra butonului (click, dubluclick etc.).
Slide 14
Dezvoltarea
aplicațiilor WEB input type="file"
Aceste câmpuri au rolul de a permite utilizatorului selectarea unui
fişier local în vederea transmiterii lui către server. Acest câmp este
afişat ca o casetă de text alături de un buton sau ca un buton alături
de care apare o etichetă (în funcţie de browser). Rolul butonului este
de a lansa fereastra care permite alegerea fişierului. Caseta de text
sau eticheta afişează numele fişierului selectat (caseta de text
permite şi editarea directă numelui fişierului).
Sintaxa utilizată pentru crearea unui câmp pentru fişier este:
<input type="file" id="id_camp" name="nume_camp"
size="dimensiune_camp" />
▪ id-identificatorul controlului
▪ name-numele controlului
▪ size-dimensiunea câmpului
Slide 15
Dezvoltarea
aplicațiilor WEB Input type=“date”
Este utilizat pentru crearea unui câmp în care se va introduce o dată
calendaristică. În funcție de suportul oferit de browser se va afișa un
calendar din care utilizatorul va selecta data.
<form>
<label for=“dn”>Data de naștere:</label>
<input type="date" id=“dn” name=“dn”>
</form>
Atribute:
min – utilizat pentru a restricționa data la un interval (valoarea
minimă)
max – utilizat pentru a restricționa data la un interval (valoarea
maximă)
Slide 16
Dezvoltarea
aplicațiilor WEB Input type=“email”
Este utilizat pentru crearea unei casete de text în care utilizatorul va
introduce o adresă e-mail.
În funcție de suportul oferit de browser adresa introdusă poate fi
validată automat la trimitere.
<form>
<label for="email">Introduceți email:</label>
<input type="email" id="email" name="email">
</form>
Slide 17
Dezvoltarea
aplicațiilor WEB input type=“range”
Definește un control utilizat pentru precizarea unui număr cu ajutorul
unui slider. Plaja de valori implicită este 0-100.
<form>
<label for="sal">Salariu (intre 2000 si 50000):</label>
<input type="range" id="sal" name="vol" min="2000" max="50000">
<input type="submit" value="Submit">
</form>
Atribute:
min - valoarea minimă
max - valoarea maximă
value - valoarea inițială
Slide 18
Dezvoltarea
aplicațiilor WEB Input type=“submit”
Creează un buton de tip Submit.
Butonul de trimitere a datelor (submit) are rolul de a trimite datele spre prelucrare.
Sintaxa acestui tip de buton:
<input type=”submit” id="id_camp" name="nume_camp"
value=”text_afisat”>
id-identificatorul controlului
name-numele controlului
value-text afişat pe buton (în cazul în care acest atribut lipseşte butonul va afişa
textul „Submit”)
Având aceeaşi funcţionalitate se poate utiliza şi sintaxa:
<input type="image" id="id_camp" name="nume_camp"
src="url_imagine" />
Diferenţa faţă de un buton de transmitere standard constă în faptul că butonul este
reprezentat de o imagine al cărei URL este precizat ca valoare a atributului src.
Slide 19
Dezvoltarea
aplicațiilor WEB Input type=“reset”
Creează un buton de resetare care are rolul de a reiniţializa formularul
anulându-se toate modificările efectuate de utilizator. Sintaxa este:
<input type=”reset” id="id_camp" name="nume_camp"
value=”text_afisat”>
id-identificatorul controlului
name-numele controlului
value-text afişat pe buton (în cazul în care acest atribut lipseşte butonul
va afişa textul „Reset”)
Slide 20
Dezvoltarea
aplicațiilor WEB Elementul select
Este folosit pentru crearea unei liste derulante.
Sintaxa pentru crearea listei de selecţie este următoarea:
<select id="id_lista" size="numar_de_linii_afisate" multiple="multiple” required>
<option value=”valoare” label=”eticheta” [selected] >
element_lista
</option>
…
<optgroup label=”eticheta_grup”>
…
<option [selected] value=”valoare” label=”eticheta”>
element_lista
</option>
</optgroup>
</select>
Slide 21
Dezvoltarea
aplicațiilor WEB Elementul select
Semnificația atributelor:
id – identificatorul controlului;
size – numărul de linii afișate;
multiple – specifică faptul că se pot selecta elemente multiple;
value – valoarea atașată elementului din listă;
selected – atribut care specifică fapul că elementul respectiv este
selectat implicit;
required – atribut care specifică faptul că trebuie selectată o valoare
din listă înainte de trimiterea spre prelucrare a valorilor listei;
Slide 22
Dezvoltarea
aplicațiilor WEB
Slide 23
Dezvoltarea
aplicațiilor WEB Elementul textarea
Este utilizat pentru crearea unei casete de text multilinie. Casetele de text
multilinie sunt controale care oferă utilizatorului posibilitatea introducerii unui
text mai lung.
Sintaxa generală utilizată pentru crearea unei casete de text multilinie este:
<textarea id="id_control" name="numele_campului"
cols="număr_de_coloane" rows="numar_de_linii"> Text implicit</textarea>
Atributele tagului textarea sunt:
▪ cols - numărul de coloane (numărul de caractere acceptate pe o linie)
▪ rows - numărul de linii de text afişate de casetă (în momentul în care textul
introdus depăşeşte capacitatea de afişare a acesteia apar barele de
derulare)
Dacă se doreşte afişarea unui text implicit în casetă, acesta se precizează între
<textarea…></textarea>.
Slide 24
Dezvoltarea
aplicațiilor WEB Elementul fieldset
În vederea sporirii lizibilităţii câmpurile formularului pot fi grupate.
Gruparea se realizează cu ajutorul tagului fieldset. Sintaxa este
următoarea:
<fieldset>
<p><legend> Gender </legend></p>
…
</fieldset>
Rezultatul utilizării tagului fieldset constă în crearea unui dreptunghi
care încadrează câmpurile plasate între tagul de deschidere şi cel de
închidere. Tagul legend este utilizat pentru a specifica o etichetă
pentru grupul respectiv.
Slide 25
Dezvoltarea
aplicațiilor WEB Elementul fieldset
Exemplu:

<html>
<body>
<fieldset>
<legend> Autentificare </legend>
Utilizator<input type="text"
value="user"><br>
Parola <input type="password"
value="user">
</fieldset>
</body>
</html>
Slide 26

Dezvoltarea Aplicatiilor Web

Încărcat de

Drepturi de autor:

Formate disponibile

S-ar putea să vă placă și

Dezvoltarea Aplicatiilor Web

Încărcat de

Informații document

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

Dezvoltarea Aplicatiilor Web

Încărcat de

Drepturi de autor:

Formate disponibile

<Dezvoltarea aplicațiilor Web />

<Conf. univ. Vasile Gorgan/>

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

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

Cod html Conţinut afişat în browser

Cod html Conţinut afişat în browser

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

Cod html Conţinut afişat în browser

Caracter Descriere Numele Codul

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

Formatul HSLA (hue, saturation, lightness, alpha)

Protocol Nume server Director (folder) Nume fişier

Acest tip de URL are componentele separate prin următoarele caractere

În exemplul de mai sus, când vizitatorul paginii web va da click pe

Exemplul prezentat mai devreme conţine un link absolut adică un link

Elementul <span> este adesea utilizat drept container pentru text.

</html> Se poate observa prezenţa în tagul <td> aferent celei

HTML nu a fost construit pentru a formata o pagina web ci pentru a

CSS a eliminat stilurile de formatare din HTML!

Se realizează prin utilizarea atributului STYLE,

Selectorul: specifică elementele sau

Reguli de formatare aplicate pentru mai

Deşi ambele elemente din

Nume selector părinte > element copil {declaraţie}

Pixelul depinde de dispozitivul de vizualizare

em Unitate de măsură exprimată în raport cu mărimea literei

font Stabileşte toate proprietăţile într-o singură

font-size Stabileşte mărimea fontului

font-style Stabileşte stilul fontului

font-variant Stabileşte dacă litera terbuie afişată având

font-weight Stabileşte grosimea fontului

Se pot preciza mai multe familii separate de

Nume selector părinte > element copil {declaraţie}

Pixelul depinde de dispozitivul de vizualizare

em Unitate de măsură exprimată în raport cu mărimea literei

font Stabileşte toate proprietăţile într-o singură

font-size Stabileşte mărimea fontului

font-style Stabileşte stilul fontului (normal/italic/oblique)

font-variant Stabileşte dacă litera trebuie afişată având

font-weight Stabileşte grosimea fontului

Proprietatea box-sizing definește modul în care sunt calculate lățimea

list-item Elementul este afişat ca un element al unei liste.

Proprietatea box-sizing definește modul în care sunt calculate lățimea

list-item Elementul este afişat ca un element al unei liste.

Dacă la începuturile sale, limbajul HTML servea doar

Sintaxa utilizată pentru crearea unui buton radio este:

<input type="radio" id="id_control" name="nume_grup" checked="checked"

Semnificaţia atributelor este următoarea

Sintaxa utilizată pentru crearea unei casete de validare este:

<input type="checkbox" id="id_control" name="nume_grup" checked="checked"

Semnificaţia atributelor este următoarea

Cod html Conţinut afişat în browser

S-ar putea să vă placă și