HTML Si CSS

HTML
și CSS
v3.0
1
Agenda cursului
1. Învățarea HTML și CSS 13. Modelul Box
2. Ateliere HTML și CSS 14. Poziționarea elementelor
3. Ce este HTML? 15. Culori și unități în CSS
4. Structura tag-urilor HTML 16. Unități
5. Structura documentului HTML 17. Stilizarea textelor
6. Formatarea textului HTML 18. Culoare și fundal în CSS
7. Hyperlink-uri 19. Chenar și umbră
8. Imaginile în documentele HTML 20. Stilizarea listelor
9. Tabele 21. Stilizarea tabelelor
10. Elemente bloc și inline(în linie) 22. Design-ul formularelor
11. ID-uri și clase 23. Relații între elemente HTML
12. CSS cascading style sheets(foi de stilizare) 24. Resurse online recomandate
2
Învățarea
HTML și CSS
3
Învățarea HTML și CSS
Este necesar să cunoști HTML și CSS, deoarece reprezintă bazele dezvoltării Web. Prin urmare:
Citește această prezentare Dacă ai timp:
Copiază fiecare exemplu inclus în Dacă ai timp și vrei să creezi rapid website-uri
prezentare- Asta te va ajuta să reții. și aplicații care să arate bine, e o idee bună
să înveți un framework CSS. Cele mai
Verifică-ți cunoștințele despre populare framework-uri CSS sunt: Bootstrap
selectoarele CSS: - http://getbootstrap.com/getting-started/
Dacă ai parcurs prezentarea îțî poți verifica Foundation -
cu ușurință cunoștințele despre selectoarele http://foundation.zurb.com/sites/getting-
CSS.. here: http://flukeout.github.io/ started.html
4
HTML și CSS
Workshops
5
Ateliere HTML și CSS
Pentru a-ți verifica cunoștințele despre HTML și CSS (și pentru a-i arăta mentor-ului tău
aptitudinile tale) parcurge exercițiile de pe Github:
Prezentarea explică cum să faci exercițiile și Reține că trimiterea codului către mentorul
cum să le trimiți mentorului tău. tău înainte de termenul limită impus este
condiția pentru promovarea stadiului de
pregătire a cursului.
6
Ce este HTML?
7
Cum arată HTML?
Să începem <!doctype html>

<html lang="en">
Mai întâi, analizează un exemplu de cod HTML, ce <head>
<meta charset="utf-8">
este, ce elemente include și la ce se folosește.
<title>Home page</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
8
HyperText Markup Language (HTML)
HyperText Markup Language. Markup – acestea sunt elementele care

definesc structura unui document HTML.
Un limbaj(folosit pentru a comunica cu un
computer) folosit pentru a crea site-uri web. HTML doar descrie structura, nu design-ul
(aspectul) unei pagini.
Nu este un limbaj de programare - sintaxa nu
permite calcule, iterări sau instrucțiuni
condiționale.
9
Un pic de istorie
HTML4 – aprobat oficial in 1999

Organizații care se ocupă cu dezvoltarea
HTML:
W3C (World Wide Web Consortium),
WHATWG (Web Hypertext Application
Technology Working Group).
HTML5 – primul draft de lucru a fost publicat
de către W3C în 2008
HTML5 – Începând din 28 Octombrie 2014
recomandat de către W3C
10
Structura tag-
urilor HTML
11
Tag-uri
12
Comentarii în HTML
Ce sunt comentariile? Exemplu
Poți folosi comentarii în HTML. 

<nav>
Comentariile sunt partea dintr-un document <ul>
HTML care nu este afișată în pagina web. <li>Start</li>
<li>Despre noi</li>
</ul>
</nav>
13
Comentarii în HTML
Ce sunt comentariile? Exemplu
Poți folosi comentarii în HTML. 

<nav>
Comentariile sunt partea dintr-un document <ul>
HTML care nu este afișată în pagina web. <li>Start</li>
<li>Despre noi</li>
</ul>
</nav>
Acesta este un comentariu
14
Tag-uri – atribute
Atributele sunt de obicei perechi de nume și valoare cu un semn de ecuație între nume și valoare.
Atributele sunt asociate tag-urilor, de exemplu: html, p, section.
Valoarea atribuită unui atribut poate fi încadrată între ghilimele sau apostroafe.
Atributele trebuie întotdeauna specificate într-un tag de început. Un tag poate conține mai multe
atribute.

<html lang="en">
...
</html>
15
Tag-uri – atribute
16
Structura unui
document HTML
17
Declararea tipului de document
DOCTYPE Notația în HTML5
Primul tag care trebuie plasat la începutul oricărui <!DOCTYPE html>

document HTML este DOCTYPE. Informează
browser-ul că acesta este un document HTML și
că poate fi afișat.
18
Declararea HTML
HTML Exemplu
Conținutul unui site web trebuie încadrat intre <html>

aceste două tag-uri: <html> </html>. 
</html>
19
Declararea limbajului
Limbajul unui site web Exemplu
Limbajul unui site web (a nu se confunda cu <html lang="en-GB">

HTML) este declarat cu atributul lang . 
Primele două litere (litere mici) declară </html>
limbajul, următoarele două litere (litere mari)
declară locul în care este folosit limbajul.
20
Secțiunea antet
Antetul paginii Exemplu
Antetul paginii se găsește în tag-ul <head> <head>

Descrie setările documentului HTML. 
</head>
Conținutul său nu este afișat pe site-ul web.
21
Codificarea caracterelor
Tag-ul meta, atributul charset Exemplu
Tag-ul <meta> cu atibutul charset este <meta charset="UTF-8">

responsabil cu codificarea decvată a website-
ului.
Este necesar pentru ca anumite litere cu
diacritice să fie afișate corect etc.
22
Descrierea site-ului web
Descriere meta
tag-ul <meta> cu atributul name setat la description și atributul content sunt elemente de
descriere a website-ului.
Descrierea unui website nu este afișată pe website, dar este vizibilă în rezultatele căutării și este
importantă pentru SEO.
O descriere trebuie să fie inteligibilă atât pentru om, cât și pentru browser (motor de căutare).
Limita recomandată pentru descriere este de maxim 160 de caractere.
Exemplu
<meta name="description" content="HTML, CSS, tutorial">
23
Viewport
Meta viewport width=device-width face lățimea unui

site egală cu lățimea ecranului pe care este
tag-ul <meta> cu atributul name setat afișat, în pixeli, îndiferent de dispozitivul pe
la viewport și un atribut content este care este afișat. initial-scale=1
responsabil de lățimea site-ului web. păstrează pixelii dispozitivuluiproporționali
(1:1) cu pixelii CSS, indiferent de orientarea
dispozitivului.
24
Viewport
Meta viewport
iPhone6 are o rezoluție fizică de 1334px x 750px. Să presupunem că folosești un tag <meta> ce
conține atributul name cu viewport ca valoare. Rezoluția site-ului web pe un iPhone va fi 667px x
375px și se va adapta indiferent de orientarea dispozitivului.
Exemplu
<meta name="viewport" content="width=device-width, initial-scale=1">
25
Titlul site-ului web
Titlu Exemplu
Tag-ul <title> este responsabil de titlul site- <title>Acesta este un titlu</title>

ului web.
Nu este afișat pe website, dar apare în tab-ul
browser-ului.
Este important din perspectiva SEO și
afectează poziționarea site-ului în motoarele
de căutare.
Limita recomandată de caractere este de
maxim 65.
26
Secțiunea body (corp)
Body Exemplu
Corpul unui site web este încadrat, ai ghicit, în <body>

interiorul tag-urilor body 
Tot ce vedem într-un site este cuprins între </body>
<body> și </body>.
27
Alte elemente
<div>, <span>
<div> este un element bloc al markup-ului HTML. Cuprinde bucăți mari de cod, de exemplu o
secțiune. Scopul acestuia nu este la fel de precis ca, de exemplu, scopul tag-ului <p> (paragraf).
<span> este un element inline. Conține bucăți mai mici de cod, de exemplu cuvinte, text și imagini.
Exemplu
<body>
<div class="header">
<h1>
Acesta este un <span>header de primul nivel</span>
</h1>
</div>
</body>
28
Structura unui document HTML – rezumat
29
Structura unui document HTML – rezumat
Exemplu
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="key1, key2">
<title>acesta este un titlu</title>
</head>
<body>

</body>
</html>
30
Formatarea
textului în HTML
31
Formatarea textului în HTML
Poți formata un text folosind un set particular de Tag-urile permit formatarea de bază..
tag-uri. Acele tag-uri pun un site în ordine și Formatul mai avansat este disponibil în CSS(Foi
definesc ce anume reprezintă acea bucată de de stil cascadă).
text(de exemplu: un antet, un paragraf, o listă).
Browser-ele au metode predefinite de afișare a
conținutului acestor tag-uri(de exemplu: mărimea
font-ului unui antet va fi mai mare).
32
Antete
From <h1> to <h6> Exemplu
Antetele sunt folosite pentru a evidenția mai multe 
bucăți de text pe un site Web. Ele sunt similare <body>
titlurilor unui articol. <h1>Bun venit pe site-ul meu</h1>
<h2>Despre mine</h2>
<h1> Este un antet de primul nivel (afișat cu o <h3>Proiectele mele</h3>
mărime mare a caracterelor), </body>
<h6> – este un antet de nivel inferior.
Începând de acum, în exemplele noastre de cod,
Cele mai comune antete sunt: <h1>, <h2>, <h3>. vei vedea numai partea care se află între tag-urile
body .
33
Antete
Pe un site web În cod
<h1>Bun venit pe site-ul meu</h1>
<h2>Despre mine</h2>
<h3>Proiectele mele</h3>
34
Paragraf
Pe un site web
<p> (paragraf) este folisit pentru a împărți un text în paragrafe.
Vei vedea cât este de util când vei începe să folosești CSS!
În cod
<h1>Terry Pratchett</h1>
<p>
Prostia reală bate inteligența artificială de fiecare dată.
</p>
Pe un site web
35
Caractere speciale
De la ampersand la punct și virgulă
Caracterele speciale codificate în HTML se
numesc entități.
Ele încep întotdeauna cu un ampersand (&), și se
termină cu punct și virgulă (;).
Ele sunt folosite pentru a afișa caractere rezervate
sau caractere care nu sunt disponibile pe o
tastatură.
36
Caractere speciale
Pe un site web În cod
– spațiu neîntrerupt – spațiu neîntrerupt

™ – semnul mărcii comerciale ™ – semnul mărcii comerciale
< – semnul mai mic ca < – semnul mai mic ca
> – semnul mai mare ca > – semnul mai mare ca
© – semnul copyright
© – semnul copyright
® – semnul marcă înregistrată
® – semnul marcă înregistrată
α – semnul literii grecești alfa (lite
α – semnul literii grecești alfa (literă mică)
37
Caracterul spațiu neîntrerupt
Caracterul spațiu neîntrerupt ar trebui folosit pentru a preveni întreruperi automate de rând care lasă
un singur cuvânt pe un rând nou.
Se codează astfel:
Previne întreruperea unui rând în locul în care este folosit.
Nu ar trebui folosit ca spațiu adițional (șir de caractere ).
În cod
<p>
Give me more coffee.
</p>
Pe un site
Give me more coffee.
38
Rând nou
<br>
Line break este un simbol ce reprezintă întreruperea unui rând într-un corp de text dintr-un document
HTML. Browser-ele ignora spațiile albe (enter, tab, spațiu) în codul HTML.
Trebuie să folosești <br> În locul acestora.
<br> nu are un tag de închidere, se numește self-closing tag.
În cod
<p>
Să verificăm cum
interpretează un browser spațiile goale.
Dacă vrei să întrerupi un rând, folosește
<br> line break.
</p>
Pe un site web
Să verificăm cum interpretează un browser spațiile goale. Dacă vrei să întrerupi un text, folosește
line break.
39
Linia orizontală
Suprascriere
Tag-ul <sup> suprascrie textul.
Subscriere
Tag-ul <sub> subscrie textul.
În cod
<p>
Un chimist știe că, formula chimică a acidului sulfuric este H<sub>2</sub>SO<sub>4<
<br>
Un matematician știe că 2<sup>0</sup> = 1.
</p>
Pe un site web
Un chimist știe că, formula chimică a acidului sulfuric este H2SO4.
0
Un matematician știe că 2 = 1.
40
Lise
Există trei tipuri de liste în HTML: Listele constau din elemente care sunt
numerotate sau marcate cu buline (sau alte
o listă ordonată <ol> , simboluri)
o listă neordonată <ul> , Fiecare listă constă dintr-un tag care definește
o listă de definiții <dl> . tipul listei (<ol>, <ul> or <dl>) și tag-uri
care definesc elemente singulare din listă.
Listele pot fi imbricate între ele.
41
Lista ordonată
Lista ordonată are elemente care sunt puse în <ol>

ordine și marcate cu numere sau litere.. <li>Elementul 1</li>
Elementele de listă implicite sunt marcate cu <li>Elementul 2</li>
numere (începând cu 1). <li>Elementul 3</li>
Numerele romane pot fi introduse cu CSS. </ol>
42
Lista neordonată
Lista neordonată - toate elementele sale sunt <ul>

marcate cu același simbol. <li>Elementul 1</li>
Elementele din listă sunt marcate în mod <li>Elementul 2</li>
implicit cu un disc. <li>Elementul 3</li>
Nu contează ordinea elementelor </ul>
Un simbol poate fi schimbat cu CSS.
43
Lista de definiții
O listă de definiții constă din perechi de <dl>

definiții de termeni. <dt>Termen 1</dt>
Fiecare termen are o definiție atribuită. <dd>Definiția termenului 1</dd>
Termenii sunt definiți în tag-uri <dt> (termen <dt>Termen 2</dt>
de definiție). <dt>Termen 3</dt>
Definițiile sunt definite în tag-uri <dd> <dd>Definiția termenilor 2 și 3</dd>
(descrierea definiției). <dt>Termen 4</dt>
<dd>Prima definiție a termenului 4</dd>
O definiție poate descrie mai mulți termeni.
<dd>A doua definiție a termenului 4</dd>
Un termen poate avea mai multe definiții. </dl>
44
Liste imbricate
O listă poate fi imbricată în alta. <ol>

Toate tipurile de liste pot fi imbricate. <li>
Element 1
Poți imbrica liste în mod nedefinit (nu există
limită pentru numărul de liste pe care le poți <ul>
imbrica). <li>Sub element 1.1</li>
Vezi cum este imbricată lista internă. Este <li>Sub element 1.2</li>
plasată într-un element <li> . </ul>
</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>
45
Hyperlink-uri
46
Hyperlink-uri
Link-urile
Leagă site-urile și permit navigarea dintr-un
site în altul.
Putem împărți link-urile în două grupuri:
interne și eterne.
Link-urile interne pot
redirecționa către o altă secțiune a
aceluiași site sau
redirecționa către o subpagină a
aceluiași site.
47
Hyperlink-uri
elementul <a>
Un text care trebuie să fie afișat în link trebuie <a>Link</a>
pus între aceste tag-uri: 
<a> <a>Click aici!</a>
</a>
Se numește text ancoră.
48
Elementul <a> – atributul href
Atributul href
Valoarea atributului href (hypertext reference) informează un site web unde (către ce site web) dorim să
mergem.
<a href="http://www.coderslab.ro">IT school</a>
49
Elementul <a> – atributul rel
Atributul rel
Atributul rel este folosit pentru poziționare.
Informează Googlebot, care este un site web de indexare, ce ar trebui să facă.
Valorile sale pot fi
dofollow (follow) – implicit,
nofollow (no follow).
<a href="http://www.coderslab.ro" rel="nofollow">

IT School
</a>
50
Elementul <a> – nofollow
Urmărește sau nu urmări Rangul extern al paginii.
Cu cât mai multe legături externe Un website care are link-uri externe fără un
redirecționează către un site web, cu atât are atribut nofollow, cedează o parte din
rang mai ridicat. reputația sa acestor site-uri externe.
Când un bot efectuează căutări pe un site Prin urmare, folosim atributul nofollow,
web, acesta analizează conținutul acestuia. astfel încât publicitatea pe internet să nu
crească rangurile paginilor.
Dacă găsește un link (un element <a>) intră
pe un site pe care link-ul redirecționează. Link-uri cu atributul nofollow se folosesc de
Acest lucru crește rangul paginii. asemenea pentru a preveni spam-ul pe
forumuri. Altfel, spammerii ar copia link-uri pe
Dacă nu dorești să crești rangul unei pagini site-urile lor în comentarii pentru a-și crește
externe, dar dorești să incluzi linkul acesteia rangul.
pe site-ul tău, poți utiliza un atribut
nofollow. Boții motoarelor de căutare nu
vor urma link-ul și nu vor afecta rangul paginii.
51
Elementul <a> – atributul target
Atributul target
Acest atribut definește cum ar trebui deschis un link.
Opțiuni disponibile:
_blank – tab nou,
_self – același tab.
Atributul _self este implicit. Nu trebuie să îl introduci dacă vrei ca un link să se deschidă în același tab al
browser-ului.
<a href="http://www.coderslab.ro" target="_blank">

IT School
</a>
52
Inline frame
Un website într-un alt website
Elementul<iframe> (inline frame) <iframe src="http://www.coderslab.ro">
încorporează un document HTML într-un alt </iframe>
document HTML.
Atributulsrc al tag-ului <iframe> indică
URL-ul unui site web, care ar trbuie să fie
afișat într-un inline frame.
53
Elementul <a> – secțiuni
Link-uri pentru secțiuni
Secțiunile ajută la navigarea pe un site, în <p id="section1">
special când acesta conține multă informație Lorem ipsum dolor sit amet
și găsirea bucătii căutate de conținut </p>
presupune derulare verticală.
O secțiune este orice element html, pentru
care a fost definit un atribut id.
54
Elementul <a> element – secțiuni
Links for sections
Fiecare element poate primi un atribut id. <a href="#section1">
Acest atribut poate avea orice valoare și Mergi la secțiunea 1
identifică un emelemt pe un site web. </a>
Dacă vrei să creezi un link către un element 
care are un atribut id asociat, trebuie să scrii <p id="section1">
id-ul acelui element cu un hashtag (#) într-un Lorem ipsum dolor sit amet
atribut href al unui element <a>.
</p>
55
Link-uri către subpagini
Mai multe fișiere HTML
Fiecare subpagină este un fișier HTML <a href="subpage1.html">
separat, împreună formează un site web. Mergi la subpagina 1
Dacă vrei să creezi un link către o subpagină, </a>
trebuie să scrii un nume al unui fișier, <a href="subpage2.html">
incluzând o extensie într-un atribut href al Mergi la subpagina 2
link-ului. </a>
<a href="#">
Mergi la pagina curentă
</a>
56
Imagini în
documentele
HTML
57
Cum adaugi imagini
Links
Un element image este utilizat pentru <img src="images/coderslab_logo.png">
adăugarea de imagini pe un site web. Este un <img src="images/html5_sticker.png">
element cu închidere în linie (nu are tag de
închidere și deschidere).
Acest element are un atribut src (sursa) care
ne oferă informații despre locul în care găsim
imaginea pe care vrem să o folosim.
Cele mai populare formate de fișiere imagine
sunt:
JPG,
PNG,
GIF.
58
Imagini - lățime și înălțime
Links
Specificarea lățimii și înălțimii unei imagini este opțională, dar permite păstrarea unui spațiu potrivit
pe site-ul web, înainte ca imaginea să fie complet încărcată.
Ajută la păstrarea layout-ului unui site web, atunci când sunt încărcate imagini mari, sau când o
imagine pe care vrem să o încărcăm a fost eliminată.
<img src="images/coderslab_logo.png" width="350" height="351">

<p>
Lorem ipsum dolor sit amet
</p>
<img src="images/coderslab_logo_deleted.png">
<p>
Lorem ipsum dolor sit amet
</p>
59
Imagini - text alternativ
Atributul alt
Este o etichetă care descrie ce este în imagine.
Este afișat atunci când o imagine nu poate fi încărcată.
Contează pentru poziționarea site-ului în motoarele de căutare.
Este citit de către crawler-ele web (agenții software ai motoarelor de căutare)(Google - graphic
tab).
<img src="coderslab_logo.png" alt="Logo Coders Lab" width="350" height="351">

<img src="some__image.png" alt="Logo Coders Lab" width="350" height="351">
60
Imagini - titlu
Atributul title
Este un text care descrie ce este într-o imagine.
Este afișat atunci când cursorul se mișcă deasupra unei imagini.
La fel ca și alt, contează pentru rangul SEO.
<img src="coderslab_logo.png" alt="Logo Coders lab"

width="350" height="351" title="Coders Lab">
61
Tabele
62
Tabele
Cum arată un tabel?
<table> – acesta este tag-ul care închide un <table>
tabel. <tr>
<tr> (table row) – acesta este tag-ul care <td>1.1.</td>
include datele pentru un rând de tabel. <td>1.2.</td>
<td> (table data) – acest tag include valoare </tr>
unei celule. <tr>
În mod implicit, bordurile unui tabel, rândurile <td>2.1.</td>
si celulele nu sunt vizibile. <td>2.2.</td>
</tr>
Poți modifica modul în care este afișat un
tabel cu ajutorul CSS. </table>
63
Tabele – anteturi
Anteturi de tabele
<th> (table header) – un tag care marchează <table>
conținutul unei coloane sau a unui rând. <tr>
Fontul pentru conținutul antetelor de tabele <th>coloana 1</th>
este implicit setat ca bold. <th>coloana 2</th>
Acest tag este folosit în același fel ca și tag- </tr>
ul <td>. <tr>
<td>1.1.</td>
<td>1.2.</td>
</tr>
<tr>
<td>2.1.</td>
<td>2.2.</td>
</tr>
</table>
64
Tabele – gama de anteturi
scope
Atributul scope (scopul atributului <th> ) – include infirmații privitoare la scopul datelor la care se
referă antetul.(de exemplu o coloană sau un rând anume).
Atunci când definim un antet de coloană, atributul scope trebuie setat col.
Atunci când definim un antet de rând, acesta trebuie setat row.
<th scope="col">
65
<table>
<tr>
<th></th>
<th scope="col">Nume și prenume</th>
<th scope="col">Locul nașterii</th>
<th scope="col">Începutul activității</th>
</tr>
<tr>
<th scope="row">Drake</th>
<td>Aubrey Drake Graham</td>
<td>Toronto</td>
<td>2001</td>
</tr>
<tr>
<th scope="row">Rihanna</th>
<td>Robyn Rihanna Fenty</td>
<td>Saint Michael</td>
<td>2005</td>
</tr>
</table>
66
Tabele – combinarea celulelor
colspan și rowspan
Atributul colspan definește câte coloane trebuie să aibă o anumită celulă a tabelului.
Atributul rowspan definește câte rânduri trebuie să aibă o anumită celulă a tabelului.
Ambele atribute sunt întregi pozitiv. Celulele pot fi combinate vertical și orizontal.
<th colspan="" rowspan="">
67
Tabele – combinarea celulelor
<table border="1">
<tr>
<th></th>
<th scope="col">Limbă</th>
<th scope="col">Populație</th>
</tr>
<tr>
<th scope="row">Germania</th>
Atributul border este folosit doar cu rol
<td rowspan="2">germană</td>
<td>80,62</td> demonstrativ. Atât în timpul cursului cât și în
</tr> proiectele tale, vei folosi pentru stilul tabelelor o
<tr> foaie de stil externă.
<th scope="row">Austria</th>
<td>8,475</td>
</tr>
</table>
68
Tabele – secțiuni
Putem împărți tabelele în trei secțiuni în ordinea următoare:

antet <thead>,
corp <tbody>,
subsol <tfoot>.
Antetul include antete de coloane, corpul conținutul efectiv al tabelului și subsolul este un rezumat.
Această diferențiere nu este cerută, dar permite păstrarea conținutului tabelului în ordine și este
folositoare atunci când formatăm ulterior tabelul folosind CSS.
69
Tabele – secțiuni
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
70
Elemente inline
și bloc
71
Elemente inline și bloc
Toate elementele HTML sunt fie inline fie bloc.

Este o clasificare bazată pe spațiul pe care îl ocupă.
Elementele inline ocupă cât spațiu au nevoie - Elementele bloc ocupă întreaga lățime a site-ului
cât este necesar pentru conținutul lor. web, indiferent de conținutul lor și încep într-o linie
Poți pune mai multe astfel de elemente, unul după nouă.
celălalt. Elementele inline includ:<a>, <em>, În mod implicit, un element bloc ocupă o linie. Un
<strong>, <img>. element plasat după un element bloc va fi afișat
într-o linie nouă (aceste lucruri se pot schimba
ambele în CSS).
Elemente bloc sunt: <p>, <ul>, <ol>,
<h1>-<h6>.
72
În cod
<h3>Antetul este un element bloc.</h3>

<div>
<a href="http://google.com">Link este un element inline.</a>.
<strong>Mai multe elemente inline</strong> pot fi afișate într-o linie.
</div>
<p>Un paragraf este un element bloc.</p>
<ul>
<li>O listă este de asemenea un element bloc.</li>
<li>Elementele bloc pot include
<em>elemente linie.</em>
</li>
</ul>
73
Pe un site web
Antetul este un element bloc.

Link este un element inline.. Mai multe elemente inline pot fi afișate într-o linie.
Un paragraf este un element bloc.
O listă este de asemenea un element bloc.
Elementele inline pot fi plasate în elemente bloc.
74
ID-uri și clase
75
ID-uri
Câteva cuvinte despre ID-uri
Elementul ID permite denumirea individuală a elementelor unui fișier HTML.
Fiecare element poate fi asociat cu un ID, dacă dorești, poți folosi un atribut id.
Atributul id este un identificator unic pentru un element particular.
Un identificator poate fi asignat unui singur element.
<h3 id="smallHeader">Header with id</h3>

<a href="http://google.com" id="link">
Acest link poate avea propriul său ID.
</a>
<p id="text">Paragraful cu ID-ul.</p>
76
Clase
Căteva cuvinte despre clase
Clasele, la fel ca ID-urile, permit deosebirea elementelor particulare ale unui document.
Poți asocia o clasă folosind un atribut class .
Contrar ID-urilor, poți asocia aceeași clasă mai multor elemente.
Un element poate avea mai mult de o clasă, iar în acest caz, numele claselor trebuie separate prin
spații.
<h3 class="smallHeader">Antet cu clasă</h3>

<a href="http://google.com" class="link text">
Acestui link îi sunt asociate două clase.
</a>
<p class="text">
Paragraful este asociat aceleiași clase ca link-ul de mai sus.
</p>
77
CSS
Foi de stil în
cascadă
(Cascading Style
Sheets)
78
CSS
CSS (Cascading Style Sheets) Reguli CSS - structură
CSS este un limbaj care descrie cum ar trebui Fiecare regulă CSS constă într-o proprietate
să arate un site. și valoarea sa.
CSS îți permite să schimbi modul în care sunt Numele unei proprietăți este întotdeauna
afișate elementele pe o pagină: urmat de o coloană și în final este
fonturi, întotdeauna o semicoloană.
link-uri, Dacă numele unei proprietăți conține mai
multe cuvinte, acestea sunt legate printr-o
margini, cratimă.
poziția unui element relativ la o fereastră Dacă numele unei valori conține mai multe
de browser sau alte elemente. cuvinte, acestea sunt separate prin spațiu.
p {
color: red;
font-size: 12px;
border: 1px solid black;
}
79
Reguli CSS - selectoare
Selectoare Codul CSS
Selectoarele sunt șabloane care asociază reguli p {
CSS cu elemente HTML. Există mai multe moduri color: red;
de a crea selectoare. Selectoarele sunt folosite în font-size: 24px;
principal pentru: atributul id, atributul class și border: 1px solid black;
}
tag-uri HTML.
Regulile CSS sunt puse între acolade și sunt Pe un site web
utilizate pentru toate elementele specificate de un Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi placeat suscipit
enim porro deleniti.
selector. În exemplu, un selector invocă elementul
p.
Regulile dintre acolade vor fi folosite pentru toate
paragrafele dintr-un document.
80
Reguli CSS
IDs
Ce ar trebui să facem dacă vrem să asociem Ar trebui să asociem un atributid acestui element
reguli CSS unui singur element HTML? și apoi să îi atribui reguli, folosind un selector.
Atributul id este un element identificator unic
HTML, așa că putem crea reguli CSS doar pentru
acest element particular.
81
Reguli CSS - identificatori
#identificator Cod HTML
Un selector precedat de un hashtag (#), se referă <p id="intro">
numai la acele elemente care au un id, care Acest paragraf a fost asocia
corespunde cu acest selector. Îl vom modifica folosind CSS
</p>
Cod CSS
#intro {
color: red;
font-size: 12px;
border: 1px solid black;
}
Pe un site web
Acest paragraf a fost asociat cu un identificator "intro". Îl vom modifica folsind
CSS.
82
Reguli CSS - clase
.class
Să presupunem că dorim să asociem reguli Trebuie să precizăm un atribut class și să
CSS mai multor elemente HTML. asociem reguli folosind un selector potrivit.
Un atribut class poate fi specificat pentru fiecare
element HTML.
83
Reguli CSS - clase
.class Cod CSS
Un selector precedat de un punct se referă numai
.content {
la elementele din site cu o anumită clasă. color: #00f;
Cod HTML font-weight: bold;
font-style: italic;
<h2 class="content"> }
Header-ului i-a fost asociată o clasă numită "content".
</h2> On a website
<p class="content"> Header-ului i-a fost asociată o clasă numită
Acestui paragraf i-a fost asociată o clasă numită "content".
"content".
</p>
<p class="content"> Acestui paragraf i-a fost asociată o clasă
numită "content".
Și următorului paragraf i-a fost asociată o clasă numită "content".
</p>
Și următorului paragraf i-a fost asociată o
clasă numită "content".
84
CSS pe un site HTML
Cum adăugăm un stil unui site web?
Deja știm cum să definim reguli și selectoare CSS și cum să le atribuim anumitor elemente particulare
HTML.
Există trei opțiuni:
Atributul style pentru un element HTML (un stil inline) - nu folosim un selector CSS în acest caz,
acest stil este asociat numai acestui element.
Elementul style.
O foaie CSS externă.
<p style="letter-spacing: 2px; word-spacing: 5px;">
Aspectul acestui paragraf este definit de stilurile inline.
</p>
Modul în care o foaie CSS este atașată unui site, nu afectează formatarea elementelor HTML.
85
CSS pe un site web HTML - stiluri inline
Un stil atașat unui tag
Definirea stilurilor cu un atribut style pentru fiecare element separat ar cauza timp pierdut (poți folosi
clase) și ar amesteca cod HTML cu reguli CSS.
Daca am vrea să asociem același stil tuturor elementelor dintr-un site, ar trebui să copiem atributul
style pentru fiecare element.
Nu ar trebui să aplicăm stiluri elementelelor în acest mod.

Primul paragraf
</p>
Al doilea paragraf
</p>
86
CSS pe un site web HTML – atributul<style>
Stilul într-o secțiune de antet
Dacă nu vrei să amesteci codul HTML cu codul <head>
CSS, poți aplica un element style. <style>

Este un element special, care conține toate </style>
regulile CSS care sunt folosite pe un site web. Ne </head>
ajută să le păstram pe toate la un loc. <body>

Un element style poate fi pus în orice loc din
</body>
document, dar trebuie să se afle înaintea
elementului căruia i se aplică.
Este o practică bună să pui elementul style într-
o secțiune <head>.
87
CSS pe un site web HTML – atributul <style>
<style> în <head> – exemplu
<!DOCTYPE html>
<html lang="en-GB">
<head>
<style>
p {
color: red;
}
<∕style>
</head>
<body>
<p>
Felul în care arată acest paragraf este definit de către elementul <style>.
</p>
<p>Paragraf 1</p>
</body>
88
CSS pe un site web HTML– atributul <style>
Mai multe reguli CSS
Putem pune mai multe reguli în elementul <head>
style,putem de asemenea să folosim orice fel de <style>
selectori. p {
letter-spacing: 1px;
word-spacing: 3px;
}
.blue {
color: blue;
}
#content {
font-size: 12px;
}
</sty
</head>
89
Foaia CSS externă
Aceasta este cea mai bună metodă.
Putem defini toate regulile într-o foaie externă care este atașată unui site web cu un element link. Acest
element este plasat în secțiunea head a site-ului. Separă HTML de CSS și face mult mai convenientă
modificarea ambelor fișiere. Un browser încarcă fișiere CSS din cache în loc să le încarce dintr-un
server. Foile CSS funcționează ca pielea - poți schimba o foaie CSS ca să îi oferi unui site un look nou,
diferit. Foile CSS conțin numai reguli CSS, fără tag-uri HTML>.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

</body>
</html>
90
Elemetul<link>
Atribute
Elementul <link> importă fișiere externe într-un site web - în acest caz este o foaie CSS. Poate avea
următoarele atribute:
rel (relation) - definește un tip al unui fișier importat. Pentru CSS valoarea va fistylesheet.
href (hypertext reference) definește o locație a unui fișier importat.
<head>
<link rel="stylesheet" href="css/style.css">
</head>
91
Foaia externă CSS și fișierul HTML
index.html style.css
<!DOCTYPE html> ul {
<html lang="en-GB"> list-style-type: square;
<head> }
<link rel="stylesheet" p.shadow {
href="css/style.css"> text-align: center;
</head> text-shadow: 1px 1px;
<body> }
<ul>
<li>first</li>
<li>second</li>
</ul>
<p class="shadow">
Text umbrit.
</p>
</body>
</html>
92
Imbricare - moștenire
Copiii au grijă de părinții lor. HTML
Dacă un tag HTML este imbricat în altul, acesta <div class="myClass">
moștenește unele dintre stilurile lui. <p>Lorem ipsum...</p>
</div>
Da nu pe toate!
CSS
.myClass {
font-size: 28px;
border: 1px groove black;
}
Care va fi fontul acestui p?
93
Cascade in CSS
Suprascrierea CSS
Unul dintre principiile de bază ale cascadării este p {
că unele stiluri pot suprascrie alte stiluri, dacă cel color: black;
de-al doilea selector va fi aplicat pe același font-size: 12px;
element HTML. will be applied on the same HTML }
p {
element.
color: red;
}
What will be the colour of p?
94
Cascade în CSS
HTML
Stilurile pot f definite în mai multe locuri. În acest <p>
caz, literele în paragraful p vor fi albastre, iar Sunt un paragraf obișnuit.
paragraful p cu o clasă with-background va </p>
avea litere albastre și fundal verde. <p class="withBackground">
Și eu sunt unul cu clasă ;-)
Pe un site web </p>
Sunt un paragraf obișnuit CSS
Și eu sunt unul cu clasă ;-) p {
color: blue;
}
p.withBackground {
background-color: green;
}
95
Cascade în CSS
Dacă proprietățile se vor suprapune? HTML
Paragraful p are un background albastru, iar <p>
paragraful cu clasa with-background are Sunt un paragraf obișnuit.
background-ul verde. </p>
<p class="withBackground">
Se întâmplă deoarece browser-ele oferă prioritate Și eu sunt unul cu clasă ;-)
stilului care este mai aproape de un element sau </p>
unui stil care descrie un element mai precis. Vom
CSS
detalia ulterior în cadrul cursului.
p {
On a website
background-color: blue;
Sunt un paragraf obișnuit }
p.withBackground {
Și eu sunt unul cu clasă ;-)
background-color: green;
}
96
Modelul Box
97
Ce elemente sunt afișate?
Afișarea elementelor de exemplu
Sunt două tipuri de tag-uri în html: p {
tag-uri block – care ocupă întreg spațiul display: block;
aferent liniei lor (numai dacă CSS-ul nu indică }
altfel), div {
tag-uri inline – se dimensionează pe măsura display: inline;
conținutului }
h1 {
Datorită atributului de stil 'display', putem schimba display: none;
modul de afișare al unui element. /* acest element nu va fi afișat */
}
98
Cum sunt afișate aceste elemente?
Schimbare a modului de afișare a elementului
– inline-block p {
Atributulul de stil display, poate lua valoarea inline- display: inline-block;
block . În acest caz el păstrează toate }
caracteristicile unui block și este afișat în linie cu
celelalte elemente.
99
Modelul Box
Box model
FIecare element css poate fi privita ca fiind o cutie,
căreiai îi pot fi atribuite o anumită poziție sau un
anumit fundal
Fiecare box (cutie) are urmptoarele straturi:
width (lățimea elementului),
height (înălțimea elementului),
padding (distanța dintre conținutul cutiei și
chenar),
border (chenarul cutiei),
margin (distanța dintre chenar și cutiile
alăturate).
100
Atributele width și height
Dimensiuni
width div {
width: 350px;
Atributul width stabilește lățimea absolută a
}
elementului. În cazul unor elemente cum ar fi liniile aside {
acesta nu e luat în considerare. Pentru elementele height: 200px;
afișate ca block aceasta este implicit 100%. }
height
Atributul stabilește înălțimea absolută
a elementului.. În cazul elementelor afișate
inline, acesta nu e luat în cosiderare.
101
Atributul margin – marginea exterioară
Păstrează distanța
Acest atribut stabilește distanța de la chenarul .class_1 {
cutiei la următorul element. La elementele afișate margin-bottom: 30px;
inline, funcționează doar pe lățime. }
.class_2 {
margin-top: 15px;
Dacă două elemente stilizate diferit sun plasate }
unul lângă altul, atunci distanța dintre ele va fi mai
mare sau egală cu suma marginilor lor.
102
Valori posibile pentru atributul margin
Păstrarea distanței
.class_1 {
În primul exemplu, aceeași distanță este margin: 12em;
definită pentru toate direcțiile }
.class_2 {
În al doilea exemplu valorile sunt definite margin: 12em 6em;
separat pentru margin-ul orizontal și pentru }
.class_3 {
margin-ul vertical
margin: 12em 5em 3em 6em;
}
În al treilea și al patrulea exemplu - distanța .class_4 {
este definită pentru ficare direcție separat. margin-top: 12em;
margin-right: 5em;
margin-bottom: 3em;
margin-left: 6em;
}
103
Atributul padding – marginea interioară
Padding
Acest atribut definește distnața dintre conținutul div {
cutiei și chenarul ei padding: 12em;
}
Adesea este definită în unități em. div {
padding: 12em 5em 3em 6em;
}
104
Valori posibile ale atributului padding
Padding
.class_1 {
În primul exemplu padding-ul este definit padding: 12em;
pentru toate direcțiile. }
.class_2 {
În al doilea exemplu valorile sunt definite padding: 12em 6em;
separat pentru padding-ul orizontal și cel }
.class_3 {
vertical
padding: 12em 5em 3em 6em;
}
În al treilea și al patrulea exemplu - este definit .class_4 {
pentru fiecare direcție separat. padding-top: 12em;
padding-right: 5em;
padding-bottom: 3em;
padding-left: 6em;
}
105
Atributul border
Borders
Atributul border definește chenarul unui element. Un element poate avea următoarele stiluri:
dotted,
Poate primi următoarele valori de mai jos în
ordinea dată: dashed,
solid,
grosimea border-ului,
double (linie dublă).
culoare border-ului.
stilul border-ului, Diferite forme 3D sunt disponibile, dar rar sunt
folosite în Flat Design.
http://jsfiddle.net/CodersLab/ukhkuewc
106
Exemple de chenare
Borders
.class_1 {
În primul exemplu definim un chenar gros de border: 2px solid red;
2px (2 pixeli) cu stil solid și culoare roșie. }
.class_2 {
În exemplul al doilea, chenarul de jos (bottom) border-bottom: 2px solid #949599;
e definit ca în primul exemplu. }
.class_3 {
border-style: solid;
În al treilea exemplu fiecare chenar e definit
border-width: 4px;
separat. border-bottom-width: 12px;
border-left-color: green;
}
107
Să înțelegem dimensiunea cutiei
div {
height: 150px;
width: 400px;
border: 2px solid #949599;
padding: 10px;
margin: 15px;
}
108
Dimensiunea totală a cutiei
Calcularea dimensiunii totale nu-i chiar complicată.
Lățimea totală poate fi caclulată prin formula: Înălțimea totală poate fi calculată prin formula:
margin-right + border-right + margin-top + border-top + padding-

padding-right + width + padding-left top + height + padding-bottom +
+ border-left + margin-left border-bottom + margin-bottom
109
Overflow (revărsare)
Trimming (scurtare)
În CSS putem controla modul în care un anumit Overflow poate avea următoarele valori:
element își tratează conținutul. Uneori conținutul visible,
depășește dimensiunile elementului. hidden,
Pentru aceste cazuri avem opțiunea overflow. auto,
scroll,
inherit.
div {
overflow: hidden;
}
110
Poziționarea
elementelor
111
Atributul float (plutire)
Punerea a două elemente unul lângă altul
Ne permite să punem două elemente block pe .box-left {
aceeași linie. float: left;
}
Le putem alinia la dreapta sau la stânga. .box-right {
Aici e un tutorial video interesant despre float float: right;
și clear: }
CSS float și clear Explicate – Cum funcționează?
112
Atributul float
Plasarea elementelor unul lângă altul
Elementul cu atributul de stil float, plutește după celelalte elemente.
CSS
.box-left {
float: left;
}
.box-right {
float: right;
}
113
Prevenirea plutirii – clear
Acesta e un pas de întoarcere la fluxul natural
al documentului Ne putem întoarce la fluxul natural al documentului
Putem reveni la cursul natural folosind atributul de folosind proprietaea clear.
stil clear:
left – împingem toate elementele care au
proprietatea setată float: left (dar nu și
float: right),
right – împingem toate elementele care au
proprietatea setată float: right (dar nu
și float: left),
both – împingem toate elementele care au
proprietatea setată float,
none – aceasta este proprietea implicită care
anulează proprietatea clear.
114
float vs inline-block
Ce metodă să alegem?
dacă vrem ca elementele să fie afișate alăturat Proprietatea float e folosită atunci când vrem ca
fără să plutească - atunci folosim display: un element să plutească după un alt element.
inline-block în loc de float.
De reținut că elementele inline-block sunt
susceptibile de formatare CSS, cum ar fi text-
align, letter-spacing, line-height.
115
Culori și unități
în CSS
116
Culori CSS
Cum descriem culorile?
Putem descrie culorile CSS în diverse moduri:
un nume(cuvânt cheie),
RGB sau RGBa,
HSL sau HSLa,
valoare hexazecimală.
117
Culori: cuvinte cheie
Cuvinte cheie Exemplu:
Valori predefinite, cel mai convenabil mod de a p {
folosi culori în CSS. color: maroon;
}
Găsești o listă completă a numelor de culori aici: div {
www.w3.org/TR/css3-color. background-color: yellow;
}
118
Culori: RGB
Red, Green, Blue
RGB este cel mai popular mod de descriere a
culorilor. Culorile sunt descrie indicând valori
specifice pentru fiecare dintre culorile primare
(roșu, verde și albastru) pe o scară de la 0 la 255.
Exemplu
p {
color: rgb(255, 0, 0); /* red */
}
div {
background-color: rgb(255, 255, 255); /* white */
}
119
Culori RGBa
Canalul Alpha
RGBa este RGB cu un element în plus, ce
definește opacitatea. Este definit pe o scară de la
0 (total transparent) la 1 (total opac).
Exemplu
p {
color: rgba(255, 0, 0, .25); /* 25% visibility of the color */
}
div {
background-color: rgba(255, 255, 255, 1); /* 100% transparency */
}
120
Cul: HSL i HSLa
Hue (Nuanță), Saturation (Saturație), Light Exemplu
(Lumină) și Alpha
p {
Un standard HSL descrie culorile, bazat pe color: hsl(0, 100%, 25%);
nuanță, saturație și lumină. Hue indică un grad pe }
roata culorilor (de la 0 0 360). Saturația și Lumina div {
sunt procentaje de la 0% la 100%. color: hsl(0, 100%, 25%);
}
Adițional, standardul HSLa are o opacitate - de la h1 {
0 la 1. color: hsla(0, 100%, 25%, .25);
}
h2 {
color: hsla(60, 60%, 50%, .75);
}
121
Culori: valori hexazecimale
Hexazecimal
Culorile pot fi definite prin coduri hexazecimale. Anumite componente decid ce proporții vor intra în
Fiecare dintre culorile primare (red, green, blue) alcătuirea culorii dorite .
sunt notate cu o valoare hexazecimală de la 00 la Valoarea este precedată de semnul #.
ff (e.g.: #2f329f).
122
Culori: valori hexazecimale
Hexazecimal - varianta scurtă
dacă valorile hexazecimale sunt aceleași pentru
culoarea primară dată le putem scrie ca în
exemplul următor. Roșu poate fi definit ca f, în loc
de ff, verde ca 6, în loc de 66, și albastru ca0, în
loc de 00, dar numai în cazul în care perechile
sunt egale.
Exemplu
p {
color: #ff00ff; /* purple */
}
a {
color: #f0f; /* purple */
}
123
Culori - website-uri utile
Această unealtă te va ajuta să combini culori:

http://color.hailpixel.com
Această unealtă ajută la crearea de palete de
culori:
http://paletton.com
Exemple de site-uri cu scheme de culori foarte
bune:
http://blog.crazyegg.com/2012/07/11/website-
color-palettes
Ascult-o peLea Verou vorbind despre culori:
https://youtube.com/watch?v=8xjR7QXQKJ0
124
Unități
125
Unități în CSS
Relativ și absolut
Unitățile în CSS pot fi descrise în diverse moduri. Fiecare din ele a fost concepută pentru un scop diferit.
Unitățile pot fi
absolute
sau
relative.
126
Valori absolute
Reguli de pixel Exemplu
Valorile absolute corespund dimensiunii fizice (cum h1 {
ar fi un centimetru sau un inch). Nu sunt scalabile, font-size: 24px;
iar în era designului responsiv, devin redundante. }
Cea mai obișnuită unitate absoluta exte pixel-ul h2 {
font-size: 20px;
(1/96 inch). Cel mai adesea e folosit pentru
}
dimensiunea font-ului.
p {
font-size: 14px;
}
127
Valori relative
Rem, em, %(procentaj)
Valorile relative sunt ceva mai dificile.Nu au dimensiune constantă, dimensiunea lor depinde de alte
elemente
Cele mai populare sunt:
% (procentaj),
em,
rem.
128
Valori relative - procentaj
% – percentage
Procentajele sunt folosite de regulă atunci când vine vorba despre dimensiunile elementelor. Sunt destul
de ușor de înțeles.
În acest exemplu să stabilim lățimea elementului la 50% din lățimea părintelui său
Exemplu
div {
width: 50%;
background-color: hsl(120, 100%, 50%);
}
129
Valori relative – em
Em
O altă unitate relativă populară em.
Este calculată pe baza dimensiunii font-ului.
Un em este egal cu dimensiunea medie a font-ului.
Unitatea em e relativă, însemnând că, e în relație cu dimensiunea fontului. Dacă dimensiunea fontului
este 20px, 2em va fi 40px.
Dimensiunea reală a fontului depinde de locul în care a fost definită.
130
HTML CSS
<section> html {
<h1>Header</h1> font-size: 16px;
</section> }
section {
font-size: 20px;
}
h1 {
font-size: 2em; /* 20px*2 = 40px */
}
131
HTML CSS
<section> html {
</section> }
section {
font-size: 20px;
}
h1 {
font-size: 2em; /* 20px*2 = 40px */
}
Dimensiunea fontului este legată de dimensiunea

părintelui.
132
Valori relative – rem
Root em
rem este calculat direct în rădăcina documentului The rem este relativă, dar imbricarea anumitor
(de regulă html), și nu din elemente superioare. elemente nu afectează dimensiunea textului. asta
înseamnă că valoare superioară este definită o
dată în documentul HTML și apoi ne referim la ea
atunci când dăm dimensiunea fontului pentru un
anumit element din site
133
HTML CSS
<section> html {
</section> }
section {
font-size: 20px;
}
h1 {
font-size: 2rem; /* 16px*2 = 32px */
}
134
HTML CSS
<section> html {
</section> }
section {
font-size: 20px;
}
h1 {
font-size: 2rem; /* 16px*2 = 32px */
}
Nu contează ce dimensiune de font a fost stabilită

în tag-ul <section>. Referința noastră e stabilită în
tag-ul <html>.
135
Unități - un website util
Cum să folosești dimensiuni în CSS:

https://css-tricks.com/the-lengths-of-css
136
Stilizarea textului
137
Colorarea textului
Culori Exemplu
Poți adăuga o culoare textului folosind atributul de .text {
stil color. color: rgb(255, 0, 0);
}
Acesta acceptă culori definite în standardul descris
anterior.
138
Proprietatea font-family
Font
Atributul de stil font-family specifică fontul unui anumit element.
Dacă atribui mai multe, CSS îl va folosi pe primul. Dacă nu e disponibil, îl va încerca pe următorul.
Ultimul font din listă ar trebui să fie unul de rezervă - un font 'sigur', care se va afișa mereu corect. În
exemplul nostru un font de rezervă este sans-serif, un nume generic pentru întreaga clasă de fonturi
sans-serif.
Exemplu
p {
font-family: "Arial Light", Arial, sans-serif;
}
139
Familiile de fonturi
Fonturi
Cele cinci mari familii de fonturi sunt:
serif,
sans-serif,
monospace,
cursive,
fantasy.
140
Proprietaea font-size
Dimensiunea fontului
Proprietatea font-size reglementează dimensiunea fontului.
Este indicată prin unitățile:
px
em
%
Exemplu
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
}
141
Exemple de dimensiuni
Un exemplu: 12px
px % em
h1 24px h1 200% h1 2em
h2 18px h2 150% h2 1,5em
h3 14px h3 117% h3 1,17em
body 12px body 100% body 1em
142
Proprietatea font-style
Italice
Proprietatea font-style este folosită pentru a scrie text cursiv.
Putem folosi următoarele valori: normal, italic, oblique, inherit.
Exemplu
p {
font-size: 24px;
font-style: italic;
}
143
Proprietaeta font-weight
Bold
Proprietatea font-weight setează greutatea textului la bold.
Putem folosi valorile: normal, bold, bolder, inherit.
Putem folosi și valori numerice de la: 100 la 900, unde 700 înseamnă bold.
Valorile sunt date în incrementări de câte 100.
p {
font-size: 24px;
font-weight: bold;
}
div {
font-size: 24px;
font-weight: 700;
}
144
Proprietaeta line-height
Leading Exemplu
Proprietatea line-height controlează distanța p {
dintre liniile de text (leading). line-height: 2em;
}
145
Proprietatea text-align
Alinierea orizontală Exemplu
Proprietatea text-align aliniază orizontal textul p {
dintr-un element cutie. text-align: center;
}
Putem folosi valorile: left, right, center,
justify, inherit.
Reține, text-align este folosit pentru a alinia
elemente inline într-un element block.
146
Proprietatea text-decoration
Subliniere și tăiere text Exemplu
Proprietatea text-decoration ne permite să .failed {
subliniem sau să tăiem cu o linie un text. text-decoration: line-through;
}
We can use the following values: none,
underline, overline, line-through,
inherit.
147
Proprietatea text-indent
Indentarea primului cuvânt Example
Proprietatea text-indent indentează primul #article {
cuvânt al textului. Indentarea este adesea folosită text-indent: 20px;
în articole, blocuri de text etc. }
Dimensiunea indentării e dată în unități specifice.
148
Proprietatea text-shadow
Un text care lasă umbră
Prorpietatea text-shadow e folosită pentru a atașa o umbră textului, valorile disponibile sunt:
a position of a horizontal shadow,
a position of a vertical shadow,
blur,
color.
Exemplu
div {
text-shadow: 0 5px 5px LightGray;
}
http://jsfiddle.net/CodersLab/bf2t6f1q
149
Proprietatea text-transform
Schimbarea dimensiuneii font-ului Exemplu
Proprietaeta text-transform este folosită la .headline {
schimbarea dimensiunii literelor într-un corp de text-transform: uppercase;
text. }
Proprietatea poate avea valorile: none,

capitalize, uppercase, lowercase,
inherit.
Este adesea folosită în proiecte profesionale.

Elementele de meniu pot fi stocate într-un fișier
HTNL ca litere mici, care ulterior să fie schimbate
după nevoi.
150
Proprietatea letter-spacing
Distanța dintre litere Exemplu
Proprietatea letter-spacing reglează distanța .close_text {
dinte litere. Ea descrie distanța în unități specifice: letter-spacing: -5em;
px, em). }
Dacă folosești o valoare negativă, literele se pot

apropia până la suprapunere.
151
Proprietatea word-spacing
Distanța dintre cuvinte Exemplu
Proprietaeta word-spacing este folosită pentru .close_word {
a defini distanța dintre cuvintele unui text. word-spacing: .3em;
}
Proprietatea primește valori specifice. Dacă
primește o valoare negativă, cuvintele se vor
apropia.
Ce înseamnă . înainte de 2? Este prescurtarea

lui0.3.
152
Culoare și fundal
în CSS
153
Culoare și fundal în CSS
Colors
Fundalurile contează, ele joacă un ro important în
aspectul general și atmosfera unui site.
În CSS fundalul poate fi:
o culoare,
o imagine,
un gradient,
o combinație a celor de mai sus.
154
Folosirea unei culori ca background
Culori
Este cel mai rapid și mai simplu mod de a crea un fundal. Trebuie să definești o culoare (în orice format -
cuvânt cheie, RGB, Hex).
Exemplu
article {
background-color: #b2b2b2;
}
section {
background-color: rgb(150, 90, 210);
}
div {
background-color: rgba(135, 25, 110, .3);
}
span {
background-color: red;
}
155
Transparența fundalului
Transparența
Daca vrei să folosești transparența în culoarea fundalului, anumite browsere pot întâmpina probleme la
afișarea acesteia.
În acest caz, trebuie să folosești o caracteristică denumită "overriding".
Exemplu
div {
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, .3);
}
156
Transparența fundalului – opacitate
Moștenire Exemplu
Transparența poate fi setată și cu opacity. În .transparent_back {
acest caz, toate elementele din cadrul său vor background-color: #b2b2b2;
moșteni această valoare. opacity: .3;
}
Dacă vrei să setezi un fundal transparent doar într-
un element, folosește RGBa sau HSLa.
157
Gradient ca background
Gradient circular și liniar
Un element poate fi umplut cu un gradient bi- sau
multi-colorat.
În CSS3 poți crea două feluri de gradiente:
liniar,
circular.
158
Gradientul liniar
div {
/* browsere care nu suportă gradient */
background-image:
linear-gradient (180deg, /* angle */
red, /* colour1 */
yellow); /* colour2 */
}
159
Gradient circular
div {
/* browsere care nu suportă gradient */
background-image:
radial-gradient (circle, /* angle */
red, /* colour1 */
yellow); /* colour2 */
}
160
Gradient și prefixuri
Prefixuri
Nu uita că unii utilizatori folosesc browsere vechi. Codul de gradient trebuie să includă cel puțin prefixele
corespunzătoare. Din fericire, nu trebuie să le scrii tu. Poți folosi un generator de gradient, să copiezi
codul și să îl lipești în fișierul tău.
Acesta este un generator de gredient pe care îl poți folosi:
http://www.cssmatic.com/gradient-generator
161
Imagini de background
Cum setăm o imagine ca background?
Putem folosi o imagine ca și fundal.
În acest sens, trebuie să folosești proprietatea background-image .
Această proprietate folosește adresa unei imagini ca valoare.
.image_back {
background-image: url("background.png");
}
162
Imagine de background image – tdouă puncte
Imaginea trebuie pusă într-un folder anume. Dar

cum să indici calea către fișier în CSS?
Mai întâi trebuie să părăsești folderul CSS, în
care ai pus fișierul tău style.css. Folosește
două puncte. Ești acum în folderul principal al
proiectului(project).
Calea ulterioară indică folderul imaginii
(images) și fișierul de background
(background.png).
url("../images/background.png");
163
Background-repeat
Repetarea imaginii de background
Putem gestiona imaginea care este conectată la site-ul nostru cu atributul background-repeat.
Aceasta se repetă în mod implicit pe site (repeat), dar poți alege de asemenea:
să se repete orizontal(repeat-x),
să se repete vertical(repeat-y),
să nu se repete(no-repeat).
.imageBack {
background-image: url("../images/background.png");
background-repeat: repeat-x;
}
164
Background-repeat
165
Background-position
Setarea unui fundal
Proprietatea background-position aranjează poziția imaginii de fundal.
Această proprietate poate lua valori în diverse unități:
lungime (de exemplu: 15px, 50px),
procent (de exemplu: 20%, 50%),
cuvinte cheie (top, right, bottom, center).
#threeValues {
background-position: top center;
}
#fourValues {
background-position: right 45px bottom 20px;
}
166
Border și box-
shadow
167
Proprietatea border-radius
Rounded corners (colțuri rotunjite)
Utilizând acest atribut putem seta colțuri rotunjite .class_1 {
pentru întregul chenar. border-radius: 50%;
}
Exemple de folosire: .class_2 {
http://jsfiddle.net/CodersLab/307c4z1v border-radius: 20em 10em 1em 20em;
}
Prezentare de Lei Verou:
.class_3 {
http://lea.verou.me/humble-border-radius border-top-left-radius: 20em;
border-top-right-radius: 10em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 20em;
}
168
Proprietatea box-shadow
Umbra din spatele unui element
Valoarea adițională inset (adăugată la sfârșit)
Atributul box-shadow este folosit pentru a crea este responsabilă pentru direcția umbrei - o va
umbre în spatele elementelor. Sunt necesare între direcționa câtre interiorul elementului.
două și patru valori. Primele două valori definesc
poziția umbrei. Al treilea setează valoarea lui blur, Exemple:
iar al patrulea setează dispersia.
div {
box-shadow: -5px -5px 10px 10px #888;
}
Exemple de folosire:
http://jsfiddle.net/CodersLab/fwd35nxr
Generator de umbră:
http://www.cssmatic.com/box-shadow
169
Box-shadow vs border-radius
Umbra de sub element și colțurile rotunjite
Forma chenarelor influențează și forma umbrei. div {
Dacă rotunjim colțurile, atunci și umbra se va border-radius: 5%;
rotunji. box-shadow: -5px -5px 10px 10px #888;
}
Exemplu de folosire: Exemple:

http://jsfiddle.net/CodersLab/ts40jppy
170
Filtre grafice
Verifică în ce mod sunt suportate filtrele grafice de către browsere
Filtrele grafice sunt o opțiune interesantă în CSS, ele pot înlocui funcții de bază specifice unui software
de editare a imaginilor. Următoarele efecte sunt disponibile prin folosirea filtrelor:
blur (estomparea),
brightness (lumina),
contrast (contrastul),
greyscale (nuanțe de gri),
sepia.
Umbra poate fi setată și cu ajutorul filtrului potrivit.
171
Filtre grafice
div {
-webkit-filter:
drop-shadow(10px 10px 8px rgba(0, 0, 0, .5));
filter:
drop-shadow(10px 10px 8px rgba(0, 0, 0, .5));
}
img {
-webkit-filter: sepia(80%);
filter: sepia(80%);
}
img#top {
-webkit-filter: blur(10px);
filter: blur(10px);
}
http://www.cssreflex.com/css-generators/filter/
http://www.html5rocks.com/en/tutorials/filters/understanding-css
172
Stilizarea listelor
173
Stilizarea listelor
Liste
În HTML sunt mai multe tipuri de liste: Pentru fiecare tip de listă, poți schimba bulinele
afișate înaintea elementului <li>.
liste ordonate, cu tag-ul <ol>,
liste neordonate, cu tag-ul <ul>, Putem face chiar și o listă ordonată cu buline și
liste de definiții, cu tag-ul <dl>, una neordonată cu numere.
Listele pot fi imbricate una în cealaltă. ul {

list-style-type: square;
}
174
Parametrul list-style-type
Lists
Atributul list-style-type poate avea Lista completă a valorilor predefinite:
http://developer.mozilla.org/en-
numai una din următoarele valori: US/docs/Web/CSS/list-style-type
none,
disc,
circle,
square,
decimal,
decimal-leading-zero,
lower-roman,
upper-roman.
175
Cum să afișezi liste orizontal
Liste
Uneori vrem să creem o listă în care elementele li {
să fie afișate unul lângă celălalt, nu unul sub altul. display: inline-block;
(este o metodă de creare a unui meniu orizontal). margin: 0 20px;
}
Pentru a crea o listă orizontală, trebuie să schimbi
atributul display din tag-ul <li> în inline-
block.
Asta îți va permite să păstrezi modelul casetei și
elementele se vor afișa într-o singură linie, cât timp
este loc suficient.
176
Stilizarea
tabelelor
177
Chenare de tabele
Border
Folosirea chenarelor va face tabelele mai ușor de th, td {
citit. Poți crea chenare folosind atributul border border: 1px solid black;
în <th> și <td>. padding: 10px 15px;
}
178
Proprietatea border-collapse (fuzionarea chenarelor)
O problemă cu fuzionarea chenarelor
Atunci când adaugi chenare elementelor unui Poți preveni asta folosind proprietatea border-
tabel, chenarele fuzionează - în loc de o linie între collapse, care schimbă felul în care sunt afișate
celule, efiecare celulă are chenarul propriu și nu chenarele. Proprietatea border-collapse
așa ar trebui să arate. poate lua următoarele valori:
collapse – combină chenarele într=unul,
separate – dublează chenarele,
inherit – moștenește o valoare de la
părinții săi.
Un exemplu despre cum poate fi folosită

această proprietate.
http://jsfiddle.net/CodersLab/4fwz2vaw
179
Proprietatea border-spacing (spațierea chenarului)
Distanța dintre celule
Dacă decizi să folosești un chenar separat pentru table {
fiecare celulă, poți alege care să fie distanța dintre border-collapse: separate;
celule. border-spacing: 10px;
}
Pentru a seta distanța trebuie să folosești
proprietatea border-spacing, care ia valori în
unități standard.
Un exemplu:
http://jsfiddle.net/CodersLab/11fvuw23
180
Designul
formularelor
181
Formulare
Le vei găsi prin toate felurile de website-uri, de la Toate câmpurile unui formular trebuie incluse
site-uri de linii aeriene la magazine online. Ele între tag-urile elementuli <form>, care
îngăduie utilizatorilor să transmită datele de definește un formular în HTML.
autentificare și înregistrare.
<form>
Un form tipic include: ...
...
câmpuri pe care utilizatorul le completează,
...
câmpuri pe care utilizatorul le bifează sau ...
selectează, ...
un buton de trimitere. </form>
182
Input
Input este elementul de bază al formularului. El Iată cele mai obișnuite tipuri de input-uri și
permite ca diferite tipuri de date să fie obținute de exemple de utilizare a lor în formulare:
la utilizator. Îți introduci numele și bifezi diferite text – numele și prenumele utilizatorului,
opțiuni când cumperi un bilet sau adaugi un
email – adresă de email,
comentariu la o comandă - toate acestea sunt
number – numărul de oameni pentru o
posibile datorită diverselor tipuri de elemente input. rezervare,
date – data de expirare a unui document,
url – o adresă web,
password – parolă (afișează puncte în loc
de caractere),
submit – buton de trimitere.
183
Label
Ar trebui să-l informezi pe utilizator despre ce trebuie introdus într-un anumit câmp de formular. Pentru
acest scop folosim tag-ul label. Ce este important, un label nu este niciodată folosit de sine stătător.
Iată două moduri de a conecta un label cu un input. Alege o cale și folosește-o consistent, cel puțin în
cadrul aceluiași proiect.
Modul #1: dă-i label-ului un atribut for, și dă-i input-ului un atribut id, ambele cu aceeași valoare.
<form>
<label for="user">Type in your name</label>
<input type="text" id="user">
</form>
Modul #2: imbricarea unui input într-un label.

<form>
<label>Type in your name
<input type="text">
</label>
</form>
184
Proprietatea name
Input-ul trebuie să aibă asociat un alt atribut important, acesta este name. Datorită acestui câmp, serverul
știe să preia informația aferentă și s-o interpreteze adecvat.
De-asta, atributul name nu doar că trebuie să fie prezent în fiecare input dar trebuie să fie și unic, adică
nu mai trebuie repetat nicăieri în formular.
Există o excepție de la această regulă, în cazul checkbox-urilor și în cazul butoanelor exclusive de
selecție, numite radio buttons. Le vom detalia în slide-urile următoare
<form>
<label>Type in your last name
<input type="text" name="name">
</label>
<label>Type in your first name
<input type="text" name="surname">
</label>
</form>
185
Placeholder
example
Dacă vrem să-i indicăm utilizatorului (pe scurt) ce
are de introdus într-un câmp de formular ar trebui
să folosim atributul placeholder. Ne
permite să afișăm un text în câmpul formularului,
când utilizatorul introduce primul caracter, acest
text dispare.
Reține că folosirea unui placeholder trebuie privită
ca suplimentară. Nu înlocuiește elementul label .
Vezi exemplul de mai jos.
<form>
<label>Login
<input type="text" name="login" placeholder="Nu folosi caractere cu diacritice">
</label>
</form>
186
Valoare
Funcția acestui atribut este diferită, după cazul Dacă folosim atributul value pentru câmpul
tipului de input. submit, valoarea acestuia va deveni textul
butonului respectiv. Astfel utilizatorul va vedea e.g.
În input-urile text sau password vede câmpuri
"Trimite".
precompletate când atributul value este
folosit. Poate fi numele lor obținut printr-un proces Atributul value este necesar în cazul câmpurilor
de autentificate. value este folosit pentru a umple cu selecție multiplă (checkbox sau radio).
câmpul, spre deosebire de placeholder care Acesta permite serverului să primească informația
doar sugerează ce ar trebui să conțină câmpul. Nu din ele. Mai multe detalii în paginile următoare.
trebuie să le confundăm.
submit – exemplu
<input type="submit" name="registeruser" value="Register">
187
Primul formular
fieldset legend
Folosim elementul fieldset pentru a grupa Am grupat elementele. Acum folosim tag-ul
diferite câmpur într-un formular. Îți permite să legend pentru a le denumi . E timpul să creezi
trasezi un chenar în jurul lor. primul tău formular.
<form>
<fieldset>
<legend>Personal data</legend>
<label>Name:
<input type="text" name="username" placeholder="Your name">
</label>
<label>Email:
<input type="email" name="useremail" placeholder="Your email">
</label>
<input type="submit" value="Send">
</fieldset>
</form>
188
Checkbox
checked
Un checkbox este câmpul tipic pe care îl putem
marca atunci când un site ne cere să bifăm Dacă dorim ca respectivul câmp să fie bifat de la
anumite opțiuni. De asemena e folosit la Termeni început, atunci adăugăm atributul checked la
și Condiții pentru a cere utilizatorului să își dea input. Exemplul ulterior arată două input-uri
acordul cu privire la documentul respectiv, sau să independente, al doilea fiind bifat implicit .
fie de acord cu primirea unui newsletter.
<form>
<label>Accept
<input type="checkbox" name="agreement">
</label><br>
<label>Order
<input type="checkbox" name="orderproduct" checked>
</label>
</form>
189
Opțiuni multiple - checkbox-uri
Checkbox-urile pot fi grupate cu ajutorul atributului name. Observați că atributul nume are aceeași
valoare pentru ambelec câmpuri. Utilizatorul poate alege să nu bifeze nimic, sau doar o parte dar nu
neapărat pe toate.
<form>
<fieldset>
<legend>Select additional options</legend>
<label>Priority boarding
<input type="checkbox" name="extras" value="priorityboarding">
</label><br>
<label>Luggage insurance
<input type="checkbox" name="extras" value="luggageinsurance">
</label>
</fieldset>
</form>
190
Opțiune singulară - radio buttons
În acest caz utilizatorul trebuie să aleagă o singură opțiune. Acest tip de input este numită radio
button. Atributul name pentru elementele mutual exclusive este tratat la fel ca în cazul checkbox-urilor.
<form>
<fieldset>
<legend>Select the preferred seat</legend>
<label>Window
<input type="radio" name="seats" value="window">
</label><br>
<label>Aisle
<input type="radio" name="seats" value="aisle">
</label>
</fieldset>
</form>
191
Câmp mare de text: <textarea>
Acest element ne permite să introducem texte mari, pe mai multe linii.

Utilizatorul îl poate redimensiona folosind mânerul din dreapta jos al câmpului.
O înălțime și o lățime inițială pot fi stabilite - un utilizator poate mări un astfel de câmp, dar nu-l poate
face mai mic decât dimensiunea inițială.
Pentru a stabili lățimea unui element text area folosești atributul cols (coloane) și atributul rows
(rânduri). Ele primesc valori numerice - cols reprezintă numărul de caractere, rows – numărul de linii.
192
Câmp mare de text: <textarea>
<form>
<fieldset>
<label>
Your remarks:
<textarea cols="50" rows="10"></textarea>
</label>
<input type="submit" value="Submit">
</fieldset>
</form>
193
Relații între
elemente HTML
194
Relații între elemente HTML
Deja cunoști mai multe elemente HTML. Putem spune că unele elemente sunt asemenea
unor părinți pentru alte elemente. De exemplu
Poți observa că într-un document HTML ele
<html> este un părinte pentru tag-ul <head> și
creează o structură ramificată.
pentru tag-ul <body>.
Principalul element este tag-ul <html>.
Această structură este o parte din modelul DOM
(Document Object Model). Vei studia despre
acesta ulterior.
195
Relații între elemente HTML
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>Site web simplu</title>
</head>
<body>
<p>Conținutul paragrafului</p>
<div>
<strong>Text important</strong>
<em>Alt text important</em>
<p>Următorul paragraf</p>
</div>
</body>
</html>
196
Resurse online
recomandate
197
Acestea sunt câteva locuri unde poți studia mai mult despre
HTML și CSS
HTML CSS
http://www.w3schools.com/html http://www.w3schools.com/css
http://www.html5rocks.com/en http://css-tricks.com
http://www.codecademy.com/en/tracks/web http://www.w3.org/Style/CSS
http://www.w3.org/TR/html5 http://developer.mozilla.org/en-
US/docs/Web/CSS
http://developer.mozilla.org/en-
US/docs/Web/HTML http://cssreference.io
198

HTML Si CSS

Î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

HTML Si CSS

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

Să începem <!doctype html>

HyperText Markup Language. Markup – acestea sunt elementele care

HTML4 – aprobat oficial in 1999

Ce sunt comentariile? Exemplu

Poți folosi comentarii în HTML.

Ce sunt comentariile? Exemplu

Poți folosi comentarii în HTML.

Acesta este un comentariu

DOCTYPE Notația în HTML5

Primul tag care trebuie plasat la începutul oricărui <!DOCTYPE html>

Conținutul unui site web trebuie încadrat intre <html>

Limbajul unui site web Exemplu

Limbajul unui site web (a nu se confunda cu <html lang="en-GB">

Antetul paginii Exemplu

Antetul paginii se găsește în tag-ul <head> <head>

Tag-ul meta, atributul charset Exemplu

Tag-ul <meta> cu atibutul charset este <meta charset="UTF-8">

Meta viewport width=device-width face lățimea unui

Tag-ul <title> este responsabil de titlul site- <title>Acesta este un titlu</title>

Corpul unui site web este încadrat, ai ghicit, în <body>

– spațiu neîntrerupt &nbsp; – spațiu neîntrerupt

Lista ordonată are elemente care sunt puse în <ol>

Lista neordonată - toate elementele sale sunt <ul>

O listă de definiții constă din perechi de <dl>

O listă poate fi imbricată în alta. <ol>

<a href="http://www.coderslab.ro">IT school</a>

<a href="http://www.coderslab.ro" rel="nofollow">

<a href="http://www.coderslab.ro" target="_blank">

<img src="images/coderslab_logo.png" width="350" height="351">

<img src="coderslab_logo.png" alt="Logo Coders Lab" width="350" height="351">

<img src="coderslab_logo.png" alt="Logo Coders lab"

Putem împărți tabelele în trei secțiuni în ordinea următoare:

Toate elementele HTML sunt fie inline fie bloc.

<h3>Antetul este un element bloc.</h3>

Antetul este un element bloc.

<h3 id="smallHeader">Header with id</h3>

<h3 class="smallHeader">Antet cu clasă</h3>

<p style="letter-spacing: 2px; word-spacing: 5px;">

Care va fi fontul acestui p?

What will be the colour of p?

margin-right + border-right + margin-top + border-top + padding-

Elementul cu atributul de stil float, plutește după celelalte elemente.

Această unealtă te va ajuta să combini culori:

Dimensiunea fontului este legată de dimensiunea

Nu contează ce dimensiune de font a fost stabilită

Cum să folosești dimensiuni în CSS:

Dimensiunea indentării e dată în unități specifice.

Proprietatea poate avea valorile: none,

Este adesea folosită în proiecte profesionale.

Dacă folosești o valoare negativă, literele se pot

Ce înseamnă . înainte de 2? Este prescurtarea

Imaginea trebuie pusă într-un folder anume. Dar

Exemplu de folosire: Exemple:

Listele pot fi imbricate una în cealaltă. ul {

Un exemplu despre cum poate fi folosită

Modul #2: imbricarea unui input într-un label.

Acest element ne permite să introducem texte mari, pe mai multe linii.

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

– spațiu neîntrerupt – spațiu neîntrerupt