Tema 3

TEMA 2: ELEMENTE HTML UTILIZATE ÎN
CONȚINUTUL DOCUMENTULUI WEB.

STILIZAREA ELEMENTELOR HTML
STUDIATE
Natalia Pleşca, lect. univ

CONȚINUT
 Elemente HTML utilizate în conținutul documentului

web pentru
 formatarea textului,
 liste cu date,
 tabele
 Stilizarea elementelor HTML studiate:
 câmpuri,
 borduri,
 înălțimi,
 lățimi
3 SINONIME... ASOCIERI
Pentru noțiunile:
-Tabel
-Celulă a tabelului
ELEMENTUL BODY
 Elementul <body> este utilizat pentru a defini

conţinutul corpului paginii web
 body este un element par, care conţine restul
elementelor ce definesc conţinutul paginii: text,
imagini, tabele, hyperlink-uri etc.
 Este suportat de toate browserele web cunoscute
 Poate dispune de mai multe atribute, care deja nu mai
sunt suportate de HTML5 – au fost substituite cu
proprietăți CSS
CULORI ÎN HTML ȘI CSS
Culoarea Culoare în baza 16 Culoare RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Alte exemple de culori vezi: http://www.w3schools.com/html/html_colors.asp

http://www.stm.dp.ua/web-design/color-html.php
TITLURI ÎN HTML
 Titlurile HTML se definesc cu elementele
<h1>...<h6>
 Sunt elemente cu tag-uri pereche
Exemplu:
<!DOCTYPE html>
<html>
<body>
<h1>Titlu de nivel 1</h1>
</body>
</html>
Rezultat:
PARAGRAFE ÎN HTML
 Paragrafele în HTML se definesc cu elementl <p>. Este un element cu taguri pereche
 Browserul automat va adăuga spatii înainte şi după paragraf
 Exemplu:
<!DOCTYPE html>
<html>
<body>
<p>"Fost-au acest Stefan, om nu mare la statu, manios, si degraba a varsa sange nevinovat: de multe ori, la ospete omoraia fara giudet. Amintrelea era om
intreg la fire, nelenesu si lucrul sau stia a-l acoperi si unde nu gandeai, acolo il aflai. La lucruri de razboaie mester, unde era nevoie, insusi se varaia ca
vazandu-l ai sai sa nu indarapteze si pentru aceia raru razboiu de nu-l biruia si unde-l biruiau altii nu pierdea nadejdea ca stiindu-se cadzut gios se ridica
deasupra biruitorilor.</p>
<p>Mai apoi, dupa moartea lui si fiul sau, Bogdan-voda, urma lui luase de lucruri vitejasti cum se tampla: den pom bun roade bune or sa iasa."</p>
</body>
</html>
Rezultat:
TRECERE DIN RÂND NOU ÎN
HTML
 Pentru a trece forţat din rand nou, în cadrul unui aliniat, se
foloseşte tag-ul <br>
 Acest element nu are conţinut şi de aceea, în ultimele versiuni,
tag-ul de deschidere conţine şi specificarea închiderii <br />
Exemplu:
<!DOCTYPE html>
<html>
<body>
<p>"Fost-au acest Stefan, om nu mare la statu, manios, si degraba a varsa sange nevinovat: de
multe ori, la ospete omoraia fara giudet. Amintrelea era om intreg la fire, nelenesu si lucrul sau
stia a-l acoperi si unde nu gandeai, acolo il aflai. La lucruri de razboaie mester, unde era nevoie,
insusi se varaia ca vazandu-l ai sai sa nu indarapteze si pentru aceia raru razboiu de nu-l biruia si
unde-l biruiau altii nu pierdea nadejdea ca stiindu-se cadzut gios se ridica deasupra biruitorilor.
<br />Mai apoi, dupa moartea lui si fiul sau, Bogdan-voda, urma lui luase de lucruri vitejasti cum
se tampla: den pom bun roade bune or sa iasa."</p>
</body>
</html>
AFIŞAREA TEXTULUI
PREFORMATAT
 Pentru a afişa un text pre-formatat se utilizează elementul
„pre”
 Este un element cu taguri pereche, cu următoarea sintaxă:
<pre>Continut</pre>
 Textul încadrat în elementul <pre> va fi afișat într-o formă
predefinită: font cu lățime fixă - de obicei Courier, păstrându-
se spațiile și trecerile din rând nou
 Este suportat de toate browserele cunoscute
 Recomandare: Nu exageraţi în utilizarea tag-ului „pre”
EXEMPLU UTILIZARE TAG „PRE”
…<p>Despre pisici...</p>
<pre>Cei care au pisici se vad pe ei insisi ca pe un fel de parinti ai pisicilor,
de vreme ce le poarta de grija, le alinta si le vorbesc. Pisicile, insa, sunt departe de a-si
vedea stapanii ca pe niste parinti: viziunea lor despre oamenii cu care impart locuinta este
cu totul diferita.
Dupa opinia dr. John Bradshaw, autorul unei carti numite Cat Sense, pisica nu-si vede stapanul
ca pe un parinte, ci ca pe o alta pisica, mult mai mare si neamenintatoare.
</pre>…
FORMATAREA TEXTULUI
• Sunt mai multe elemente care pot fi utilizate pentru formatarea
textului
• Toate sunt formate din tag-uri pereche
• Cele mai utilizate:
<b> - pentru scriere îngroşată

<i>, <em> - pentru scriere inclinata
<small> - pentru scrierea textului mărunt
<strong> - pentru evidenţierea textului important
<sup> - pentru a scrie text de tip superscript
<sub> - pentru a scrie text de tip subscript
<ins> - pentru a scrie textul care va fi inserat în text
<del> - pentru a tăia textul, evidenţiind textul lichidat
<mark> - pentru a evidenţia cu culoare o porţiune de text
EXEMPLU FORMATARE. II
 Exemplu pentru <del> şi <ins>:
<!DOCTYPE html>
<html>
<body>
<p>Imi plac <del>cactusii</del> <ins>orhideele</ins>!</p>
</body>
</html>
Rezultat:
INSERAREA CODURILOR DE
PROGRAM
 Se folosește elementul code pentru a defini o secvență de cod
 Este un element cu tag-uri pereche: <code>Content</code>
 Browserele de obicei afișează secvența utilizând fontul monospace
EXEMPLU
<body>
<p>Script în JQuery</p>
<pre>
<code>
var delay = 500;
$(document).ready(function() {
$(".block h1").bind("click", function(event) {
var parent = $(event.target).parent();
var p = parent.find("p");
if ($(p).is(":visible")) $(p).slideUp(delay);
else $(p).slideDown(delay);
});
});
</code>
</pre>
</body>
COMENTARII ÎN HTML ȘI CSS
Comentariile în codul HTML se adaugă respectând următoarea

sintaxă:

Comentariul specificat nu va fi afişat în pagina web, dar uneori
este necesar pentru explicitatea codului
Exemplu:

În CSS comentariile se introduce prin simbolurile
/*Comentarii*/
SEPARAREA CONŢINUTULUI
 Pentru a trasa o linie pe pagină sau, în versiunea 5, pentru a

separa contextul, se utilizează elementul <hr>
 Acest element nu are conţinut, de aceea se recomandă să se
închidă chiar din start <hr />
 Exemplu:
LISTE ÎN HTML
 În HTML pot fi definite 3 tipuri de liste:
• Marcate/neordonate. Exemplu:
o Mere
o Pere
o Prune
• Numerotate/Ordonate. Exemplu:
1. Se creează fişierul
2. Se salvează fişierul
3. Se lansează fişierul în execuţie
• Liste de definiţii / De descrieri. Exemplu:
Evaziune fiscală
sustragere prin orice mijloace de la plata impozitelor, taxelor și a altor sume datorate
bugetelor de stat de către persoanele fizice și juridice, care realizează venituri impozabile,
conform reglementărilor fiscal
On-line
mod de prelucrare a datelor, prin intermediul unui dispozitiv, conectat direct la calculator
LISTE NEORDONATE
 Listele neordonate se definesc folosind elementul <ul> (unordered list)
 Elementele listei se definesc cu elementul <li> - obligatoriu pentru
declararea elementelor listei
 Aceste elemente, UL și LI, sunt formate din tag-uri pereche şi sunt
suportate de toate browsere-le
 Forma generală:
<ul type=“valoare”>
<li>continut</li>
…
<li>continut</li>
</ul>
ATRIBUTUL “TYPE” AL ELEMENTULUI
“UL”
 Acest atribut nu mai poate fi utilizat în versiunea 5,

recomandându-se utilizarea stilurilor
 Atributul type poate lua una din 3 valori:
 disc – valoarea implicită
 circle
 square
EXEMPLU DEFINIRE LISTĂ
NEORDONATĂ
<!DOCTYPE html>
<html>
<head><title>Liste neordonate</title></head>
<body>
<p>Lista produselor necesare prepararii eclerelor:</p>
<ul type="square">
<li>Lapte</li>
<li>Unt</li>
<li>Oua</li>
</ul>
<p>Pentru crema veti avea nevoie de:</p>
<ul type="disc">
<li>Zahar</li>
<li>Lapte</li>
<li>Vanilie</li>
</ul>
</body>
</html>
REZULTAT
LISTE ORDONATE
 Listele ordonate se definesc folosind elementul <ol> (ordered list)

 Elementele listei se definesc cu <li> - obligatoriu pentru
declararea listei de elemente
 Lista poate fi ordonată, elementele fiind numerotate (valoarea
implicită) sau ordonate utilizând litere
 Aceste elemente, OL și LI, sunt formate din tag-uri pereche şi sunt
suportate de toate browsere-le web
 Sintaxa:
<ol atribut=“valoare”>
<li>continut</li>
…
<li>continut</li>
</ol>
ATRIBUTELE ELEMENTULUI “OL”
 Elementul ol poate avea câteva atribute
 Type
 Start
 Reversed – a apărut in versiunea 5
 Compact – nu mai este suportat în versiunea 5
 Type - acest atribut poate fi utilizat în versiunea 5 (nu şi

în 4.01, browserele însă îl suportau mereu)
 Atributul type are 5 valori, utilizate pentru a defini tipul ordonării
 1 (implicit)
 A
 a
 I
 i
ATRIBUTUL „TYPE”. EXEMPLU
<p>Lista persoanelor admise:</p>
<ol>
<li>Ivanov</li>
<li>Vasecikin</li>
<li>Petrov</li>
</ol>
<p>Obiecte necesare:</p>
<ol type="I">
<li>Geanta</li>
<li>Pasaport</li>
<li>Caciula</li>
</ol>
<p>Alege solutia corecta:</p>
<ol type="a">
<li>Cafea</li>
<li>Apa</li>
<li>Suc</li>
</ol>
ATRIBUTUL „START”
 Start – specifică de la ce număr să înceapă ordonarea listei
 Forma generală: <ol start="număr">, unde „număr” reprezintă o valoare
numerică de la care se doreşte startul numerotării listei
 Exemplu:
<ol start="5">
<li>Ivanov</li>
<li>Vasecikin</li>
<li>Petrov</li>
</ol>
Rezultat:
ATRIBUTUL „REVERSED”
 Atributul „reversed” este utilizat pentru a ordona elementele
listei în ordine descrescătoare
 Nu este suportat de browserul IE, Safari
 Exemplu:
<ol reversed>
<li>Ivanov</li>
<li>Vasecikin</li>
<li>Petrov</li>
</ol>
Rezultat:
ATRIBUTUL „COMPACT”
 Se utilizează pentru a specifica faptul, că spațiile dintre elementele
listei trebuie să fie mai mici
 Nu este suportat de aproape nici un browser cunoscut
 Nu mai este suportat în versiunea 5
 În cazul în care se doreşte totuşi ca elementele listei să fie scrise mai
compact se recomandă utilizarea stilurilor:
<ol style="line-height: 70%">
<li>Ivanov</li>
<li>Vasecikin</li>
<li>Petrov</li>
</ol>
LISTE DE DEFINIŢII (DE DESCRIERI)
 Lista de definiţii (în versiunea 5 – aceasta este numită listă de
descrieri) se defineşte cu elementul <dl>
 Pentru definirea elementelor listei se utilizează elementele <dt> şi
<dd>
 <dt> - se utilizează pentru definirea denumirii noţiunii
 <dd> - se utilizează pentru descrierea noţiunii
 Toate aceste 3 elemente sunt pare şi sunt suportate de majoritatea
browserelor
 Sintaxa:
<dl>
<dt>notiunea</dt>
<dd>descrierea</dd>
…
</dl>
EXEMPLU UTILIZARE DL, DT, DD
<p>Vom defini cateva notiuni:</p>
<dl>
<dt><b>Chisinau</b></dt>
<dd>Capitala Moldovei, tara amplasata in estul Europei. </dd>
<dt><b>Berlin</b></dt>
<dd>Capitala Germaniei, tara amplasata in vestul Europei.
</dd>
</dl>
Rezultat:
LISTE INCLUSE
 Listele incluse – sunt listele incluse în alte liste

 Fiecare element al listei poate fi de tip listă sau poate fi orice alt
element HTML
EXEMPLU LISTĂ INCLUSĂ
<dl>
<dt><b>Studii la zi</b></dt>
<dd>presupun frecventarea tuturor lectiilor din orar. Se pot inscrie persoane
care:
<ul>
<li>au absolvit liceul</li>
<li>au absolvit colegiul</li>
</ul>
</dd>
<dt><b>Studii cu frecventa redusa</b></dt>
<dd>presupun frecventarea lectiilor in anumite perioade din semestru.
Acceseaza aici pentru detalii:
<ol>
<li><a href="orar.html">Orar frecventa redusa</a></li>
<li><a href="orarM.html">Orar rectificat</li>
</ol>
</dd>
</dl>
REZULTATUL EXEMPLULUI
TABELE ÎN HTML
 Tabelul este format din linii şi coloane. La intersecţia liniilor şi coloanelor

se obţin celule
 Elementul <table> - se utilizează pentru definirea tabelului în HTML.
Poate conţine unul sau mai multe din elementele următoare:
 Elementul <caption> se folosește pentru definirea denumirii tabelului
 Elementul <tr> - se utilizează pentru definirea unei noi linii într-un
tabel
 Elementul <th> - se utilizează pentru definirea celulelor de tip
titlu/antet într-un tabel. Implicit textul e scris îngroşat şi centrat
 Elementul <td> - se utilizează pentru definirea unei celule standard,
într-o linie a tabelului. Implicit textul este standard, aliniat pe stânga
 Toate aceste 5 elemente – table, caption, tr, th, td - sunt pare şi sunt
suportate de majoritatea browsere-lor
EXEMPLU TABEL
<table>
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
</tr>
<tr>
<td>Ailiesei</td>
<td>Alina</td>
<td>18</td>
</tr>
<tr>
<td>Barusceac</td>
<td>Boris</td>
<td>19</td>
</tr>
</table>
ELEMENTUL „CAPTION”
 Se utilizează pentru a specifica denumirea tabelului
 Se specifică imediat dupa tag-ul „table” deschis şi doar o singura
dată, pentru un tabel. Este un element cu taguri pereche
 Sintaxa:
<table border= "1">
<caption>Denumire tabel</caption>
<tr>
<th>…</th>
<th>…</th>
</tr>
<tr>
<td>…</td>
<td>…</td>
</tr>
</table>
UNELE ATRIBUTE ALE ELEMENTULUI
„TD”
Atributul Valoarea Descrierea

colspan number Specifică numărul coloanelor care vor fi agregate
într-o celulă
rowspan number Specifică numărul de linii care vor fi agregate
STILURI PENTRU FUNDAL
Proprietățile CSS pentru fundal sunt utilizate la definirea

efectelor de fon ale unui element HTML
Exemple de proprietăţi CSS utilizate pentru specificarea
efectelor de fond:
background-color
background-image
background-repeat
background-attachment
background-position
PROPRIETATEA „BACKGROUND-
COLOR”
 Această proprietate este utilizată pentru a defini culoarea de fundal
al unui element HTML
 Culoarea de fundal se specifică prin cele 3 moduri cunoscute:
 Specificarea denumirii culorii (“red”, “blue” etc.)
 http://www.w3schools.com/cssref/css_colors.asp
 Specificarea culorii în baza 16 ("#ffaa22")
 Specificarea culorii în format RGB ("rgb(255,255,0)")
OBS: Culorile mai pot fi specificate în format RGBA – format suportat de IE9+,
Firefox 3+, Chrome, Safari, Opera 10+.
Valorile culorilor RGBA reprezintă o extensie a valorilor din RGB, cu un canal alfa -
care specifica opacitatea obiectului.
O valoare de culoare RGBA este specificată cu: rgba (red, green, blue, alfa).
Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet
opac)
PS: Vedeţi şi culori în format HSL şi HSLA
EXEMPLU DEFINIRE CULOARE,
ÎN FUNCȚIE DE INTENSITATE
EXEMPLU „BACKGROUND-COLOR”
body{
background-color: rgb(233, 198, 204);
}
h1{
background-color: whitesmoke;
font-size: 2em;
color: rgba(53, 10, 10, 0.8);
font-weight: bold;
text-align: center;
}
p{
font-size: 1.3em;
color: rgb(252, 249, 249);
}
REZULTAT EXEMPLU
IMAGE”
 Se utilizează pentru a specifica imaginea de fundal
 Implicit, imaginea de fundal, se va repeta şi va acoperi toată pagina
 Exemplu – imagine de fundal pentru BODY:
background-image:url("../images/back.png");
REPEAT”
 Implicit imaginea de fundal se va repeta şi pe orizontală şi pe
verticală
 Proprietatea „background-repeat” poate specifica repetarea
imaginii de fundal sau pe orizontală sau pe verticală
 Proprietatea „background-repeat” poate specifica faptul că
imaginea de fundal e fixată, nu se repetă
 Exemplu 1:
background-repeat: repeat-x;
 Exemplu 2:
background-repeat: repeat-y;
 Exemplu3:
background-repeat: no-repeat;
PROPRIETATEA BACKGROUND-
POSITION
 Proprietatea background-position gestionează cu locul
poziționării imaginii de fundal. Valoarea proprietății este
formată din două părți, separate prin ”spațiu”: x y
 x definește poziționarea imaginii pe orizontală, iar y - pe
verticală
 Pentru coordonata x pot fi utilizate și următoarele cuvinte-
cheie: left, center, right, dar și valori numerice specificate în
procente sau în pixeli
 Pentru coordonata y pot fi utilizate cuvintele-cheie: top, center,
bottom, dar și valori numerice specificate în procente sau în
pixeli
POSITION”
 Exemplu:
body{
background-image:url("../images/back.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
ALTE EXEMPLE DE DEFINIRE A
POZIȚIEI IMAGINII DE FUNDAL
Diferite valori pentru coordonate:
 background-position: 50% 50%;
 background-position: right bottom;
 background-position: 50px 100px;
 background-position: 0 100%;
 background-position: left bottom;
FORMA PRESCURTATĂ A
PROPRIETĂŢII „BACKGROUND”
 Pentru a specifica mai multe proprietăţi pentru background se poate
prescurta declaraţia, utilizând o singură proprietate – „background”
 Pentru exemplele anterioare se va scrie:
background: rgb(233, 198, 204) url("../images/back.png") no-repeat right top;
PROPRIETĂŢII „BACKGROUND”
 Atunci când se foloseşte forma prescurtată a proprietăţii
background trebuie să se respecte următoarea ordine a valorilor
proprietăţilor:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background-attachment – se foloseşte pentru a specifica faptul
că imaginea de fundal este fixată. Poate avea una din
următoarele valori: scroll|fixed
 Exemplu:
background: rgb(233, 198, 204) url("../images/back.png") no-repeat fixed right top;
ALTE EXEMPLE
 Dacă în forma prescurtată a proprietății pentru fundal nu sunt

specificate toate componentele, atunci browser-ul va interpreta
valorile specificate. Câteva exemple:
 background: #e74c3c; - se definește doar culoarea de fundal
 background: url("img.png") no-repeat; - se definește o imagine
de fundal care nu se repetă. Restul valorilor vor fi cele
predefinite: fundalul transparent, imaginea de fundal va fi plasată
în colțul din stânga-sus
 background: url("img.png") 10px 20px; - s-a definit imaginea de
fundal și poziționarea ei. Restul valorilor sunt cele predefinite:
imaginea se va repeta, culoarea de fundal - transparentă
PROPRIETATEA BACKGROUND-SIZE
Valori posibile: auto|length|cover|contain|initial|inherit
Valoarea Descrierea
auto Valoarea predefinită. Imaginea de fundal se va afișa cu dimensiunile ei
standarde
length Setează lățimea și înălțimea imaginii de fundal. Prima valoare stabilește
lățimea, a doua valoare stabilește înălțimea. Dacă este dată o singură
valoare, cea de-a doua este setată la "auto"
percentage Setează lățimea și înălțimea imaginii de fundal în procente din elementul

părinte. Prima valoare stabilește lățimea, a doua valoare stabilește
înălțimea. Dacă se dă o singură valoare, a doua este setată la "auto"
cover Redimensionează imaginea de fundal pentru a acoperi întregul container,
chiar dacă va trebui să întindă imaginea sau să taie puțin din margini
contain Redimensionează imaginea de fundal pentru a face imaginea pe deplin
vizibilă
initial Setează proprietatea la valoarea implicită
inherit Moștenește proprietatea din elementul părinte
EXEMPLU ȘI REZULTAT
body{
background: rgb(233, 198, 204) url("../images/back.png") no-repeat fixed center center;
background-size: cover;
}
STILURI PENTRU FORMATAREA
TEXTULUI
 Textul se aliniază pe pagină folosind proprietatea „text-align”

 Textul poate fi sau nu înfrumuseţat (tăiat, subliniat, linie
deasupra textului) utilizând proprietatea „text-decoration”
 Textul poate fi transformat din litere mici în litere mari şi invers,
utilizând proprietatea „text-transform”
 Textul poate avea aliniat/câmp utilizând proprietatea „text-
indent”
Alte proprietăţi: direction, letter-spacing, line-height, text-
shadow, vertical-align, word-spacing
DEFINIREA CULORII TEXTULUI
 Pentru a defini culoarea textului se utilizează proprietatea

color
 Culoarea poate fi specificată utilizând modalitățile deja
cunoscute
 Denumirea culorii - "red"
 Valoarea hexazecimală - "#ff0000"
 Valoarea în format RGB - "rgb(255,0,0)"
STILURI PENTRU FONTURI
 Reprezintă proprietăţi utilizate pentru definirea familiei de
fonturi, dimensiunii textului şi grosimii textului
 Pot fi utilizate grupuri de familii de fonturi (generic family) şi
familii de fonturi (font family)
OBS: În interfaţa UI fonturile din grupul Sans-serif sunt cele mai citibile
Generic family Font family Descrierea

Serif Times New Roman Fonturile din grupurile serif au linii mici
Georgia la marginilе caracterelor
Sans-serif Arial "Sans" înseamnă „fără” - aceste fonturi
Verdana nu au linii la marginile caracterelor
Monospace Courier New Toate caracterele monospace au

Lucida Console aceeași lățime
EXEMPLU UTILIZARE
PROPRIETATE FONT-FAMILY
body{
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}
IMPORTAREA FONTURILOR
 Accesați https://fonts.google.com/
 Selectați fontul care va place
 Alegeți opțiunea ”Import” sau ”Link” – eu am ales ”Import”
REZULTATUL
 În fișierul CSS voi avea:

@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta&display=swap');
body{
font-size: 1em;
font-family: 'Lexend Peta', sans-serif;
}
SAU DACĂ SCHIMB FONTUL...
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
body{
font-size: 1em;
font-family: 'Indie Flower', cursive;
}
EXEMPLU UTILIZARE
PROPRIETATE FONT-STYLE
 Această proprietate are trei valori:
 normal – textul este prezentat în format normal
 italic – textul este prezentat înclinat
 oblique – textul tot este înclinat, asemănător cu „italic”
Exemplu:
 <h1 style="font-style: italic;">Florile de cameră preferate</h1>
 Rezultat:
PROPRIETATEA FONT-SIZE
 Se foloseşte pentru definirea dimensiunii textului
 Dimensiunea fontului se specifică utilizând valori absolute şi relative:
 Mărimi absolute:
 Setează textul la o dimensiune specificată
 Nu permite unui utilizator de a modifica dimensiunea textului, în
diferite browserele (nu este comod pentru accesibilitate)
 Dimensiunea absolută este utilă atunci când dimensiunea fizică a
ieșirii este cunoscută
 Mărimi relative:
 Setează mărimea textului în raport cu alte elemente din context
 Permite unui utilizator de a modifica dimensiunea textului în
browsere
OBS: Implicit, dimensiunea textului în tag-ul „p” este 16px=1em
 Se recomanda utilizarea marimilor relative: em, px, %
EXEMPLU UTILIZARE
PROPRIETATE FONT-WEIGHT
 Poate lua una din 3 valori: normal, lighter, bold
 <h1 style="font-weight: lighter;">Florile de cameră preferate</h1>
 <h1 style="font-weight: bold;">Florile de cameră preferate</h1>
PROPRIETATEA FONT
 Exact la fel, ca şi la proprietatea „background”, şi

proprietatea „font” poate fi utilizată în formă prescurtată
 Trebuie respectată următoarea ordine:
font-style font-variant font-weight font-size/line-height
font-family
DEFINIREA STILURILOR PENTRU
LISTE
 Proprietatea “list-style-type” este utilizată pentru definirea marcajelor

de listă
 Proprietatea „list-style-image” este utilizată pentru definirea în calitate
de marcator, a unei imagini
 Exemplu:
ul {
list-style-type:square;
}
Sau
ol {
list-style-type:lower-alpha;
}
ALTE VALORI
Alte valori pentru proprietatea „list-style-type”:

disc, armenian, circle, cjk-ideographic, decimal, decimal-
leading-zero, georgian, hebrew, hiragana, hiragana-iroha,
katakana, katakana-iroha, lower-greek, lower-latin, lower-
roman, none, upper-alpha, upper-latin, upper-roman
STILURI PENTRU BORDURĂ
Utilizând proprietățile din grupul „border” se poate defini stilul,

grosimea şi culoarea bordurii unui element
Proprietatea „border-style” defineşte stilul bordurii
Proprietatea „border-width” – defineşte grosimea bordurii
Proprietatea „border-color” – defineşte culoarea bordurii
EXEMPLU PROPRIETATE
BORDER
body{background: radial-gradient(pink, white, pink);}
p.none {border-style: none;}
p.dotted {border-style: dotted; border-color: purple; border-width: 7px;}
p.dashed {border-style: dashed; border-color: purple; border-width: 7px;}
p.solid {border-style: solid; border-color: purple; border-width: 7px;}
p.double {border-style: double; border-color: purple; border-width: 7px;}
p.groove {border-style: groove; border-color: purple; border-width: 7px;}
p.ridge {border-style: ridge; border-color: purple; border-width: 7px; border-radius: 25px;}
p.inset {border-style: inset; border-color: purple; border-width: 7px;}
p.outset {border-style: outset; border-color: purple; border-width: 7px;}
p.hidden {border-style: hidden; border-color: purple; border-width: 7px;}
p.mixt { border-top-style: dotted; border-right-style: solid;
border-bottom-style: dotted; border-left-style: solid;
border-color: purple; border-width: 7px;}
REZULTAT EXEMPLU
PROPRIETĂŢII „BORDER”
 Forma prescurtată, „border”, poate fi utilizată dacă se respectă
următoarea ordine a proprietăţilor
 border-width
 border-style (obligatoriu)
 border-color
 Exemplu:
h1 {border:5px double pink;}
Rezultat:
ROTUNJIREA CONȚURILOR
BORDURII
 Pentru a rotunji bordura unui element se va utiliza
proprietatea
border-radius
 Exemplu: border-radius: 50%;
PROPRIETĂŢI PENTRU TABELE ŞI
ELEMENTELE LUI
 Proprietatea „border” se utilizează pentru a specifica bordura
elementelor „table”, „th” şi „td”
table, th, td {border:2px double magenta;}
 Dacă se specifică bordura şi pentru tabel şi pentru celule –

bordura va fi dubla. În acest caz, pentru eliminarea acestui
neajuns, se utilizează proprietatea „border-collapse”
 Proprietatea „border-collapse” se utilizează cu scopul
„restrângerii” bordurii
table, th, td {border:2px double magenta;}
table {border-collapse:collapse;}
PROPRIETĂŢI PENTRU TABELE ŞI
ELEMENTELE LUI
 Proprietatea „width” şi „height” se utilizează pentru a defini
lăţimea şi înălţimea tabelului sau a elementelor lui
table {
border-collapse:collapse;
width: 50%;}
th {height: 50px; background-color:#FFC7EE;}
td {height: 30px;}
REZULTAT EXEMPLU PROPRIETĂŢI
„WIDTH” ŞI „HEIGHT”
PROPRIETĂŢI PENTRU TABEL ŞI
ELEMENTELE LUI
 Alinierea textului în celulele tabelului se face cu ajutorul
proprietăţilor „text-align” , „vertical-align”
 Stabilirea distanţei de la bordură până la conţinutul tabelului se
defineşte cu proprietatea „padding”
Exemplu:
table {border-collapse:collapse; width: 50%;}
th {height: 50px; background-color:#FFC7EE;
padding: 10px;}
td {height: 30px; vertical-align:middle;
text-align:center; padding:10px;}
REZULTAT EXEMPLU PROPRIETĂŢI „TEXT-ALIGN”
, „VERTICAL-ALIGN”, „PADDING”
DEFINIREA DISTANŢEI DINTRE CONŢINUT ŞI
CHENAR (CÂMPURI INTERIOARE)
 Proprietățile padding definesc spațiul dintre marginea

elementului și conținutul elementului
 Proprietăţile padding ”curăţă” o zonă în jurul conținutului (în
interiorul chenarului) a unui element
 Aceste proprietăţi sunt afectate de culoarea de fundal a
elementului
 Poate fi definit spaţiul liber pe partea de sus, dreapta, jos şi
stânga
 Grosimea spaţiului liber poate fi definită utilizând diferite
unităţi de măsură: pixels, pt, em, % etc.
EXEMPLU
p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
Sau pot fi definite spaţiile pentru partea de sus şi jos, împreună, şi
stânga-dreapta împreună:
p{padding: 25px 50px;}
Sau toate 4 odată:

p{padding: 25px;}
PROPRIETĂŢILE MARGINILOR
UNUI ELEMENT
 Marginea reprezintă spaţiul din jurul unui element (ceea ce este
înafara bordurii)
 Marginea poate fi specificată pentru fiecare parte separat
 Ex: margin-top: 50px; margin-bottom: 70px;
margin-right: 10px; margin-left: 50px;}
 Sau se poate utiliza forma prescurtată
 Ex: margin: 25px 50px 75px 100px;
(sus - 25, dreapta – 50, jos – 75, stânga - 100)
 margin: 25px 50px 75px;
(sus – 25, dreapta – 50, jos – 75)
 margin: 25px 50px; sau margin: 25px;
STILIZAREA ELEMENTULUI HR
 Se va utiliza proprietatea border

 Exemplu:
hr{
border: 3px solid rgb(166, 199, 116);
box-shadow: 2px 3px 2px rgb(197, 223, 171);
}
Rezultat:
!!!
 3 noţiuni noi învăţate azi

 2 întrebări/neclarităţi care au apărut
 1 sugestie pentru tema următoare
Analizați sintaxe recomandate pentru denumiri corecte de:
foldere, fișiere, funcții, variabile, atribute etc.
https://en.wikipedia.org/wiki/Snake_case
https://en.wikipedia.org/wiki/Camel_case

Tema 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tema 3

Uploaded by

Copyright:

Available Formats

TEMA 2: ELEMENTE HTML UTILIZATE ÎN

CONȚINUTUL DOCUMENTULUI WEB.

Natalia Pleşca, lect. univ

 Elemente HTML utilizate în conținutul documentului

 Elementul <body> este utilizat pentru a defini

Alte exemple de culori vezi: http://www.w3schools.com/html/html_colors.asp

<pre>Cei care au pisici se vad pe ei insisi ca pe un fel de parinti ai pisicilor,

ca pe un parinte, ci ca pe o alta pisica, mult mai mare si neamenintatoare.

<b> - pentru scriere îngroşată

Comentariile în codul HTML se adaugă respectând următoarea

 Pentru a trasa o linie pe pagină sau, în versiunea 5, pentru a

 Acest atribut nu mai poate fi utilizat în versiunea 5,

 Listele ordonate se definesc folosind elementul <ol> (ordered list)

 Type - acest atribut poate fi utilizat în versiunea 5 (nu şi

 Listele incluse – sunt listele incluse în alte liste

 Tabelul este format din linii şi coloane. La intersecţia liniilor şi coloanelor

Atributul Valoarea Descrierea

Proprietățile CSS pentru fundal sunt utilizate la definirea

 Dacă în forma prescurtată a proprietății pentru fundal nu sunt

percentage Setează lățimea și înălțimea imaginii de fundal în procente din elementul

 Textul se aliniază pe pagină folosind proprietatea „text-align”

 Pentru a defini culoarea textului se utilizează proprietatea

Generic family Font family Descrierea

Monospace Courier New Toate caracterele monospace au

 În fișierul CSS voi avea:

 Exact la fel, ca şi la proprietatea „background”, şi

 Proprietatea “list-style-type” este utilizată pentru definirea marcajelor

Alte valori pentru proprietatea „list-style-type”:

Utilizând proprietățile din grupul „border” se poate defini stilul,

 Dacă se specifică bordura şi pentru tabel şi pentru celule –

th {height: 50px; background-color:#FFC7EE;}

 Proprietățile padding definesc spațiul dintre marginea

Sau toate 4 odată:

 Se va utiliza proprietatea border

 3 noţiuni noi învăţate azi

You might also like