Perechea_1 ro.pdf

Elemente HTML, tag-uri, atribute.
Elemente HTML utilizate în antetul
documentului web.
Foi de stil în cascadă.
Metode de implementare
Tatiana Pașa, doctor în informatică
USM, Departamentul Informatică

HTML
HyperText Markup Language (HTML) este un limbaj de marcare
utilizat pentru crearea paginilor web ce pot fi afișate într-un
browser (sau navigator).
HTML furnizează mijloacele prin care conținutul unui document poate conține diverse
tipuri de metadate și indicații de redare: decorațiuni ale textului (sublinierea), imagini,
hărți de imagini și formulare, informații despre titlul și autorul documentului, informații
structurate despre cum este împărțit documentul în diferite segmente, paragrafe, liste,
titluri etc. și informații care permit ca documentul să poată fi legat de alte documente
pentru a forma astfel hiperlink-uri (sau web-ul).
HTML - 1991, HTML 2.0 – 1995, HTML 3.2 – 1997, HTML 4.01 – 1999, XHTML - 2000, HTML5 - 2014

Hipertext
Hipertext - orice cuvânt, frază, imagine sau alt element al documentului
văzut de un utilizator poate face referintță la un alt document, ceea ce
ușurează navigarea între multiple documente sau chiar în interiorul unui
aceluiași document. Structurarea riguroasă a documentelor permite
convertirea acestora dintr-un format în altul precum și interogarea unor
baze de date formate din aceste documente.
Caracteristicile HTML:
1. Independența de platformă - modul de afișare al unui document este același, indiferent
de computerul pe care se realizează afișarea (va depinde de cum interpretează
browserul);
2. structurarea formatării;
3. nu este case-sensitive, adică nu face distincţia între literele mici şi cele mari (majuscule);
4. transformarea unui element într-un hipertext prin introducerea unor marcaje, care indică
modul cum se efectuează legăturile documentului, cum vor apărea paginile
documentului etc.

Structura unui proiect
Adrese absolute se vor utiliza când
avem elemente care se păstrează
direct pe server Web.
Se vor folosi adrese relative pentru a
accesa fișiere din mape:
Din fișierul index.html accesăm o
imagine din mapa Imagini:
Imagini/img.png
Din fișierul index.html accesăm un
fișier din mapa JS:
JS/js1.js
Din mapa CSS accesăm o imagine din
mapa Imagini:
../Imagini/img1.png

Etichete (tag– uri) și atribute
Elementele HTML sunt definite folosind tag-uri HTML.
• Sunt delimitate de < şi >
• De regulă sunt în pereche <nume_tag> ... </nume_tag>
• Textul dintre două tag-uri (de început şi sfârşit) este conţinutul elementului
Tag-urile pot avea atribute care oferă o informaţie suplimentară în legătură cu un element.
• Sunt perechi: nume și valoare
• Sintaxa: nume = “valoare”
• Sunt specificate în tag-ul de start
La închiderea etichetelor (tag-urilor), se respectă principiul LIFO. În caz contrar, secvenţa
de cod din pagină nu va funcţiona corect.
• Folosire corectă a două etichete: <tag1><tag2>Etichete utilizate corect <tag2><tag1>
• Folosire incorectă a două etichete: <tag1><tag2> Etichete utilizate incorect <tag1><tag2>

Entități
Anumite caractere precum <, > au o
semnificație specială în limbajul HTML. Pentru a
putea utiliza aceste caractere într-o pagină au
fost introduse entităţile.
Cele mai utilizate entităţi:
• < reprezintă <
• > reprezintă >
• & reprezintă &
• ' reprezintă '
• " reprezintă "
•   reprezintă un “spaţiu alb” – în
HTML mai multe spaţii simple sunt tratate
ca un singur spaţiu
Comentarii HTML:
<!– Acesta e un comentariu -->
- nu are efect în tagul title și style

Structura documentului HTML
• Un fişier HTML este un fişier text care conţine anumite tag-uri pentru marcarea
textului. Tag-urile informează browser-ul cum să afişeze pagina web.
• Fişierul HTML trebuie să aibă extensia html.
• Un fişier HTML poate fi creat folosind un simplu editor text (Notepad++, SublimeText
sau Visual Studio Code).
<!DOCTYPE html>
<html>
<head>
<title> Titlul paginei
</title>
</head>
<body>
Continutul
</body>
</html>
ü Tag-ul <body> este utilizat pentru a defini conţinutul corpului paginii.
ü Tag-ul body este un element de tip container care conţine
elementele care definesc conţinutul paginii: text, imagini, tabele,
hyperlink-uri etc.

<html>
<head>
<title> Adresa</title>
</head>
<body>
Adresa institutiei noastre
</body>
</html>
<!DOCTYPE html> definește că documentul este HTML5
<html> ... </html> este inclus întregul document HTML și comunică browserului unde
începe şi unde se termină documentul
<head> - </head> conține titlul şi alte informaţii despre document importante pentru ca
pagina să fie cât mai bine cotată de motoarele de căutare
<title> - </title> titlul documentului, important deoarece este unul din criteriile folosite de
motoarele de căutare pentru indexarea paginii.

Tagul meta cu atributul name, http-equiv și charset este folosit pentru a genera informații
adiționale motorului de căutare prezent în tagul head. Vor fi puse cele mai importante
cuvinte cheie care pot localiza situl. Informațiile nu vor fi vizibile unui vizitator decât dacă
va selecta view "Source" din meniul "View" unde are acces la partea HTML a paginii.
Keyword în meta: pot fi puse cuvinte sau fraze cheie separate prin virgulă.
<meta name="keywords" content="tutoriale, html, resurse, webmasteri, tutorial web, " />
Description în meta: este o descriere a sitului. Se va folosi o frază cel mult două.
<meta name="description" content="Un website de resurse pentru cei ce vor sa invete HTML "
/>
Author în meta: se dă numele celui ce a realizat websitul.
<meta name="author" content="Tatiana Pasa " />
Revised în meta: pentru a specifica ultima actualizare a websitului.
<meta name="revised" content="1/09/20019" />

Refresh în meta: se face cu ajutorul atributului http-equiv="refresh" pentru a reîncărca
pagina și a afișa noi informații în cazul unei actualizări. O aplicație destul de folositoare
unui forum.
<meta http-equiv="refresh" content="10; url=http://www.tutorialehtml.com" />
Redirect în meta: se face cu ajutorul atributului http-equiv="refresh" pentru a schimba
adresa paginii web cu cea spre care se dorește redirecționarea. Este bine venită atunci
când se cumpară un nou domeniu și se dorește redirecționarea vizitatorilor spre locația
noii pagini.
<meta http-equiv="refresh" content="5; url=http://www.etutoriale.ro" />
<HEAD>
<TITLE>Introducerein limbajul HTML</TITLE>
<META name="author" content="Mihai Gabroveanu">
<META name="keywords" content="curs, limbaj, web, html">
<META name="description" content="Pagina de introducere">
</HEAD>

Tagul meta (continuare)
HTML5 a introdus o metodă pentru a permite proiectanților
web să preia controlul asupra viewport-ului, prin eticheta
<meta>.
Viewport este zona vizibilă a utilizatorului unei pagini web,
oferă instrucțiuni browserului despre modul de control al
dimensiunilor și scalării paginii. Acesta variază în funcție de
dispozitiv și va fi mai mic pe un telefon mobil decât pe
ecranul computerului.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
width=device-width stabilește lățimea paginii pentru a
urma lățimea ecranului dispozitivului (care va varia în
funcție de dispozitiv).
initial-scale=1.0 setează nivelul de zoom inițial când prima
pagină este încărcată de browser.
Fără viewport Cu viewport

Tagul meta (continuare)
<meta charset="UTF-8"/> specifică codificarea
caracterelor pentru documentul HTML
Pentru înserarea în pagină a diacriticelor:
1. se poate folosi codul lor unicode conform șablonului:
&#cod_unicod_in_baza_10;
2. se poate folosi tastatura setată pe "romaneste", facilitate oferită de
sistemul de operare și folosirea următorului tag meta în secțiuna
head a paginii:
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

O iconiță pentru site reprezintă un mod de
promovare a unei imagini pentru site. Este
foarte des folosită această metodă. Această
apariție a logo-ului în câmpul de adresă, dă o
impresie a unui site profesional și de incredere.
Imaginea trebuie să fie:
• de formatul .ico
• de marimea 16×16 sau 32×32.
1. se salvează iconița sub denumirea de
im3.ico de exemplu
2. se uploadează iconița direct în folderul
rădăcină.
<head>
<link rel=”shortcuticon” href=”im3.ico”/>
</head>
Notă: Puteți găsi iconițe pe: https://www.iconfinder.com/iconsets/6x16-free-application-icons
https://www.iconfinder.com/iconsets/32x32-free-design-icons

Atributele etichetei <body> permit setarea
culorilor fundalului, textului şi linkurilor:
bgcolor - culoarea fundalului
text - culoarea textului
link - culoarea linkurilor
vlink - culoarea linkurilor vizitate
alink - culoarea linkului activ
O culoare poate fi precizată în două moduri:
• Printr-un nume de culoare: aqua, black, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white si yellow.
• Prin constructia #rrggbb se pot defini astfel 65536
de culori, unde r (red), g (green), sau b (blue) sunt
cifre hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5,
6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F.
Poziţionarea conţinutului paginii Web faţă de
marginile ferestrei browserului se face cu
ajutorul a două atribute ale etichetei <body>:
• leftmargin (distanţa dintre marginea stângă
a ferestrei browserului şi marginea stângă a
conţinutului paginii );
• topmargin (distanţa dintre marginea de sus
a ferestrei browserului şi marginea de sus a
conţinutului paginii );
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 =
valoare3>
Ex: <body bgcolor="orange" text="red" link="blue"
alink="green“ vlink="black"> </body> Ex 17.html

CSS
Tag-urile HTML au avut rolul de a defini conținutul unui document, de a face distincția între
titlul unui paragraf, conținutul paragrafului, tabele etc. Aspectul și modul de afișare al unui site
erau în sarcina browserului.
Deoarece Internet Explorer și Netscape Navigator au continuat să adauge noi tag-uri și
atribute limbajului HTML original, a devenit tot mai dificil crearea unui site în care conținutul
documentului HTML să fie separat de modul său de prezentare. Pentru a rezolva această
problemă, consorțiul W3C, responsabil de standardizarea specificațiilor HTML, a creat stilurile și
le-a adăugat specificațiilorHTML 4.0.
Cu HTML 4.0 au apărut specificațiile pentru modele de stiluri, cunoscute ca Modele de Stiluri
în Cascadă (Cascading Style Sheets - CSS). Acestea ajută la afișarea grafică și încadrarea
conținutului în pagină. Modelele de stiluri pot fi aplicate aproape oricărui element HTML, folosind
proprietăți și valori specifice codului CSS.

Sintaxa. Reguli
selector - identifică elementul HTML, căreia i se aplică stilul dat;
acoladele - delimitează, care proprietăți și cu ce valori se aplică elementului HTML;
proprietăți - sunt elementele de aspect care vrem să le modificăm;
valori ale proprietăților - sunt noile valori pe care vrem să le atribuim proprietății respective.
O construcție CSS are forma generală:
selector{
proprietate1 : valoare1;
proprietate2 : valoare2;
...
proprietatek : valoarek;
}
• Un fişier CSS este un fişier text cu extensia ".css" definind stiluri pentru paginile html.
• Fişierele CSS permit stilizarea în bloc a documentelor HTML cu un efort semnificativ mai
mic decât în cazul stilizării elementelor de pagină în cadrul fiecărui document HTML în
parte, prin intermediul atributelor tag-urilor.

Modele de stiluri
Modelele de stiluri pot fi aplicate în mai multe moduri:
1. Inline - direct în eticheta HTML
Pentru adăugarea unui STYLE intern la un element se folosește atributul style urmat de
proprietăți și valori, folosindurmătoarea sintaxă:
<element style="proprietate:valoare; proprietate:valoare;"></element>
Exemplu:
<h4 style="color:#ff1111;"> Text test </h4>
Folosind CSS-ul sub această formă vom pierde toate avantajele pentru care a fost creat și anume
pentru a nu amesteca tagurile HTML cu formatarea și prezentarea lor.
<p style="text-align:right; color:green; font-family:'times new roman’; margin-left:15px;"> Acesta
este un paragraf formatat cu ajutorul CSS.</p>
Obs: Valoarea fontului este o valoare compusă din trei cuvinte și în loc de ghilimele duble am folosit ghilimele
simple pentru a evita conflictul cu ghilimele duble pentru a încapsula valoarea atributului style. Secvența de cod
CSS care va fi interpretată de browser style="text-align:right; color:green; font-family:" restul codului CSS fiind
ignorat.

Modele de stiluri (inline)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<h2>Este un test</h2>
<p>Salutare.</p>
<h4 style="color:blue;"> Text test </h4>
<p style="text-align:right; color:#ff1111; background-color: aqua;">
Acesta este un paragraf formatat cu ajutorul CSS.</p>
</body>
</html>

Modele de stiluri
2. Intern, în antetul (header-ul) fișierului
Se adaugă în secțiunea head a documentului HTML următoarea
sintaxă:
<style type="text/css"> ... </style>
Aceasta spune browser-ului că sunt adăugate elemente de stil CSS.
Această metodă este utilă când se dorește folosirea acelorași stiluri
pentru mai multe elemente din pagină, sunt scrise o singură dată și nu
la fiecare element.
Codul CSS în head, nu ar trebuii folosit prea mult cu excepția faptului
că este o pagină care are nevoie de un stil propriu și nu îl împarte cu
nici o altă pagină.
Proprietățile și valorile de sti CSS se întrodc în elementul style, ca în
exemplul următor:

Modele de stiluri (în header)
<body>
Salutare.
<h2>Stiluri in head, testare</h2>
</body>
CSS
HTML
<head>
<style type="text/css">
h2 { color:red;
text-decoration:underline;
} </style>
</head>
fără css cu css

Modele de stiluri
3. Extern
Proprietățile și valorile pentru diverse stiluri sunt specificate într-un fâșier extern, cu extensia ".css"
(construit cu un editor de texte Notepad).
Avantajul folosirii fișierelor externe CSS este faptul că aceleași coduri de stil pot fi folosite de mai
multe pagini din site, chiar tot site-ul, fiind scrise o singură dată. Ajută la micșorarea ca mărime (în
bytes) a documentului HTML care astfel se încarcă mai repede. În fâșierul extern CSS se scriu direct
elementele cu proprietățile și valorile dorite, nu se adaugă eticheta style.
Pentru a adăuga acest stil CSS într-o pagină web, se adaugă în secțiunea între <head> ... </head>
a documentului HTML care va folosi acel fișier cu stiluri:
<link href="fisier.css" rel="stylesheet" type="text/css">
- rel specifică relația dintre documentul apelant și documentul legat, valoarea sa trebuie să fie
stylesheet;
- type specifică tipul documentului legat, adică definește ce fel de resursă este (extensia fișierului nu
este suficientă pentru a determina aceasta), trebuie să aibă valoarea text/css;
- href specifică adresa (URL) de unde se introduce fișierul .css.
Deci: <head> <link rel="stylesheet" type="text/css" href="fisier_extern.css"/> </head>
Pentru a permite paginii să se încarce mai rapid, aceiași secțiune se adaugă înainte de tagul </body>.

Modele de stiluri (extern)
@charset "UTF-8";
p
{
color:aqua;
background-color:coral;
}
h2
{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="fisier_extern.css"/>
</head>
<body>
<p>Salutare.</p>
</body>
</html>
CSS
HTML
fără css cu css

Modele de stiluri (extern)
@charset "UTF-8";
p
{
color:aqua;
background-color:coral;
}
h2
{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Este un test!</h2>
<p>Salutare!</p>
<h2>Este un test!!!</h2>
<p>Salutare!!!</p>
<h2>Este un test!!!!!</h2>
<p>Salutare!!!!!</p></body>
</html>
CSS
HTML
fără css cu css

Prevalența metodelor CSS în documentele HTML
Codul CSS se poate însera în HTML după cum
urmează:
• fâșier extern (.css)
• intern - în head
• în tagul care se vrea personalizat (inline)
• toate cele trei anterioare.
Când formătam un element și folosim mai
multe modalități de înserare a CSS-ului
ordinea de reproducere în browser va fi
următoarea:
1. Formatare CSS inline (în interiorul tag-ului
HTML)
2. Formatare CSS internă în secțiunea head)
3. Formatare CSS externă (fîșier .css extern)
4. Standardul browser-ului (valori CSS atribuite
standard)
Exemplu, într-o foaie de stil externă, selectorul h3
are setate următoarele trei proprietăți:
h3 {
color:red;
text-align:left;
font-size:8pt; }
în foaia de stil intern se setează pentru h3
următoarele proprietăți:
h3 {
text-align:right;
font-size:20pt; }
atunci proprietățile pentru h3 vor fi:
color:red;
text-align:right;
font-size:20pt;

Prevalența metodelor CSS în documentele HTML
Exceptie:
În cazul în care tagul <link> este pus după tagul <style> codul CSS aflat în fisierul .css
extern va anula codul CSS intern.
<head>
body { background-image: url("img/imagine.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}
</style>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>
Deci, vor prevala proprietățile din fisier_extern.css
Același efect îl avem când <link rel="stylesheet" type="text/css" href="fisier_extern.css"/> este
înserat înaintea tagului </body>.

Sintaxa. Reguli
• Dacă valoarea elementului se
compune din două cuvinte le vom
pune între ghilimele:
p { font-family: "times new roman";}
• Dacă scriem mai mult decât o proprietate le vom
separa una de cealaltă prin punct și virgulă (;).
p {
text-align: right;
color: green;}
• Se recomandă scrierea tuturor propietăților una
sub alta și de pus (;) după toate proprietățile
elementului.
p {
text-align:right;
color:green;
font-family:"times new roman";}
• Mai multe elemente cu aceleași proprietăți le
grupăm:
h1, h2, h3, p {
font-family:arial;
color:green;}
Comentarii CSS
/* Un comentariu se marcheaza asa */
p {
text-align:right;
color:green; /* Ex: Aici s-a definic
culoarea verde pentru elementul; "p" */
/* mai sus am comentatcodul pentru a
nu fi interpretat de catre browser */ }

ARBORE IERARHIC
• Structura unui document HTML este un arbore ierarhic.
• Aceasta înseamnă că fiecare element (cu excepția rădăcinii) are un singur părinte, adică
elementul în care se află.
Se ia în considerare pagina:
<html>
<head></head>
<body>
<p>Текст документа</p>
<p class="text">Выделенная <span>строка</span></p>
</body>
</html>
• Arborele ierarhic afișează schematic structura de imbricare a elementelor. Structura
ierarhică a documentului definește fundamentele conceptului de moștenire.

ARBORE IERARHIC
<!DOCTYPE html>
<html>
<head><title> Incercare</title></head>
<body>
<div><h1>Titlul paginii</h1><p>Text in paragraf</p></div>
<div class="empty"></div>
<ul>
<li class="first">A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>

MOȘTENIRE
• Moștenirea în CSS — un mecanism cu ajutorul căruia valorile proprietăților unui element-
părinte este transmis elementelor-urmași.
• Stilurile atribuite unui element sunt moștenite de toți urmașii dacă acestea nu sunt
redefinite direct. De exemplu, dimensiunea și culoarea fontului este destul să fie definit
pentru body ca toate elementele din interior să aibă aceleași proprietăți.
• Moștenirea permite scurtarea tabelului de stiluri, dar dacă sunt multe stilui este foarte
complicat de urmărit care element-părinte a primit careva proprietate.
• În cele mai dese cazuri sunt moștenite proprietățile textului: font-size, font-family, font-
style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-
spacing, word-spacing, white-space, direction.
• Restul se referă la cele ce nu pot fi moștenite, acestea sunt proprietățile de poziționare,
dimensiuni, bordură : background, border, padding, margin, width, height, position ș. a.

Blocuri de text HTML
Se referă la funcțiile pe care le poate avea un bloc de text în cadrul paginii Web. Toate aceste
etichete produc automat trecerea la un rând nou și adăugarea unui spatiu suplimentar.
<br> - trecere din rând nou, va genera un marcaj de sfârşit de linie (caracterele ASCII Carriage
Return / Line Feed).
<address>…</address> - dacă într-o pagină web trebuie inclusă o adresă;
<html>
<head>
<title> Adresa</title>
</head>
<body>
Adresa institutiei noastre este :<address> Universitatea
de Stat din Moldova<br> Str: A. Mateevici, 60<br>
Chișinău</address>
</body>
</html>
Ex 5.html

<blockquote>…</blockquote> - indentarea unui bloc de text (marginea din stânga textului să fie
deplasată la dreapta la o anumită distanță față de marginea paginii);
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmează este indentat:<blockquote> Aceste etichete nu
se referă la particularitățiile caracterelor ce compun textul, ci la
funcțiile pe care le poate avea un bloc de text în cadrul paginii
Web. Toate aceste etichete produc automat trecerea la un rând
nou și adăugarea unui spațiu suplimentar. </blockquote>
</body>
</html>
<q>…</q> - citat scurt, ex. mai jos

<pre>…</pre> - blocul preformatat, este indicat pentru a însera rânduri vide (spațiu între rândurile
succesive). Caracterul „spațiu” poate fi luat în considerare de browser dacă este înserat explicit.
Semnificația marcajelor HTML se păstrează.
<html>
<head>
<title> Bloc preformatat</title>
</head>
<body>
Orar:<pre>
Ora/Ziua Luni Marti Miercuri
8:00 FP Algebra HTML
9:45 SO Geometria POO
</pre>
</body>
</html>
Ex 7.html

<p> - este posibil trecerea la o linie nouă și permite:
• înserarea unui spațiu suplimentar înainte de blocul paragraf;
• înserarea unui spațiu suplimentar după blocul paragraf, dacă se folosește delimitatorul </p>;
• alinierea textului cu ajutorul atributului align: cu valorile posibile left, center, justify sau right.
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Linie generata de un paragraf (implicit paragraful este aliniat la stanga). </p>
<p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. </p>
<p align="center"> Paragraf aliniat in centru.Paragraf aliniat in centru. </p>
</body>
</html>
Ex 8.html

<nobr>...</nobr> - blocul de text cuprins între etichete va fi afișat pe o singură linie.
<html>
<head>
<title> Blocul <nobr></title>
</head>
<body>
<nobr> O singura linie.O singura linie.O singura linie.O
singura linie.O singura linie. O singura linie.O singura
linie.O singura linie.O singura linie.O singura linie. O
singura linie.O singura linie.O singura linie.O singura
linie.O singura linie.
</nobr>
</body>
</html>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - titluri (headers) de capitole
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align="center"> Titlu de marime 1 aliniat in centru </h1>
<h2 align="right"> Titlu de marime 2 aliniat la dreapta. </h2>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>

<hr> - pot fi înserate linii orizontale.
Pentru a configura o linie orizontală se utilizează următoarele atribute ale etichetei <hr>:
• align permite alinierea liniei orizontale. Valorile posibile sunt ” left ”, ” center ” și ” right ”;
• width permite alegerea lungimii liniei;
• size permite alegerea grosimii liniei;
• noshade când este prezent definește o linie fără umbră;
• color permite definirea culorii liniei.
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr
width=100%> <hr width=70%> <hr width=40%> <hr width=10%>
</center>
</body>
</html>
<center>…</center> - aliniază centrat toate elementele pe care le conține.

<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<hr size=3px color=red width="70px"align=left>
<hr size=5px color=blue width="50px" align=center>
<hr size=7px color=green>
<hr size=7px width="100px">
<hr size=7px width="100px" noshade align=right>
<hr>
</body>
</html>

<html>
<head>
<title> Linii</title>
</head>
<body>
<h1 align="center"> Tipuri de linii </h1>
O linie implicită alinierea stânga, lățime 100%, grosime 2 cu umbră.
<hr>
O linie aliniată în centru, de lățime 50%, grosime 5 pixeli, fără umbră.
<hr align="center" width="50%" size="5" noshade>
O linie aliniată la dreapta, de lîțime 150 de pixeli, grosime 12 pixeli, de culoare roșie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>

<div>...</div> - modalitatea cea mai eficientă de
delimitare și de formatare a unui bloc de text .
• Pentru stabilirea caracteristicilor unui bloc
<div> este align: left, center, right.
• Un bloc <div>...</div> poate include alte
subblocuri iar alinierea precizată de atributul
align al blocului are efect asupra tuturor
subblocurilor incluse în blocul <div>;
• Un bloc <div>...</div> admite atributul nowrap
ce interzice întreruperea rândurilor de browser.
<html>
<head>
<title> Blocul <div></title>
</head>
<body>
Aceasta linie este o linie simplă.
<div align="right">
Bloc aliniat pe dreapta.Bloc aliniat pe dreapta.<br>
</div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body>
</html>

<abbr>...</abbr> - prescurtare.
<acronym>...</acronym> - acronim.
Atributul title (pentru tag-ul abbr și
acronym) este folosit pentru a afişa
denumirea completă atunci când
mouse-ul este deasupra elementului.
<HTML>
<HEAD>
<TITLE>Abrevierisi acronime</TITLE>
</HEAD>
Abreviere:
<abbr title=" United Nations ">UN</abbr> <br>
Acronim:
<acronym title=" World Wide Web">WWW</acronym>
<br>
<del>2018</del>
<ins>2019</ins>
</BODY>
</HTML>
<del>...</del> - text șters
<ins>...</ins> - text înserat
<mark>... <mark> - marcarea textului
Ex: Va fi <mark>marcat un text</mark> formatat

Formatare text HTML
<font>... </font> - fontul utilizat de browser pentru
vizualizarea textului.
Dacă în document nu sunt precizate nici un fel de
informaţii referitoare la font, browserul va utiliza fontul
său implicit.
Atributele admise sunt:
color – culoare (color = valoare );
face - tipul sau stilul (face = valoare);
size – mărimea (size = valoare);
weight - grosime.
Valoarea dimensiunii fontului poate fi specificată:
Ø în mod absolut (un număr natural cuprins între 1 şi 7)
Ø sau relativ la dimensiunea curentă a caracterelor:
― +n, caracterele vor fi cu n mărimi mai mari
― -n, caracterele vor fi cu n mărimi mai mici
Dimensiunea efectivă cu care sunt vizualizate caracterele
depinde de browser.

Formatare text HTML
<BODY bgcolor="bluemarin" link="blue" alink="green">
<p align=center> Text de diferite dimensiuni cu fontul COURIER NEW </p>
<p> <font size=1 FACE=COURIER NEW color=red> font COURIER NEW cu dimensiune 1
</font></p>
<p> <font SIZE=1 FACE=COURIER NEW> font COURIER NEW cu dimensiune 1 </font></p>
<p> <font FACE=COURIER NEW> font COURIER NEW cu dimensiune implicita </font></p>
<p> <font SIZE=+2 FACE=COURIER NEW> font COURIER NEW cu dimensiune cu 2 marimi mai
mare decat dimensiunea implicita </font></p>
<p align=CENTER> Text de diferite dimensiuni cu fontul Arial </font></p>
<p> <font SIZE=3 FACE=Arial> font Arial cu dimensiune 3 </font></p>
<p> <font SIZE=1 FACE=Arial> font Arial cu dimensiune 1 </font></p>
<p> <font FACE=Arial> font Arial cu dimensiune implicita </font></p>
<p> <font SIZE=-2 FACE=Arial> font Arial cu dimensiune cu doua marimi mai mica decat
dimensiunea implicita </font></p>
<A href="test.html">Legatura catre primul exemplu</A>
</BODY>

Formatare și efecte text HTML
<b>...</b> - text îngroșat.
<strong>...</strong> - text îngroșat
evidnțiat când e citită pagina.
<big>... </big> - text mai mare.
<i>...</i> - text cursiv.
<u>...</u> - text subliniat.
<small>...</small> - text mai mic.
<strike>...</strike> - text tăiat.
<sub>...</sub> - text ca indice jos.
<sup>...</sup> - text ca indice sus.
<html>
<head>
<title> Blocul <div></title>
</head>
<body>
<I> Textul este scris cursiv </I> <br>
<U> Textul este scris subliniat </U> <br>
<B> Textul este scris ingrosat </B> <br>
<BIG> Textul este scris mai mare </BIG> <br>
<SMALL> Textul este scris mai mic </SMALL> <br>
<STRIKE> Textul este scris taiat </STRIKE> <br>
Textul este scris<sub>subscript</sub> <br>
Textul este scris<sup>superscript</sup> <br>
</div>
</body>
</html>

Spații în HTML
Indiferent câte spaţii vom introduce atunci
când edităm documentul HTML, browserul le
va ignora şi va afişa cuvintele cu un singur
spaţiu între ele. Pentru a forţa introducerea
spaţiilor suplimentare se foloseşte
comanda   (no break space).
Comanda începe cu simbolul &
(ampersand) şi se termină cu ; (punct şi
virgulă).
<html>
<head>
<title>text</title>
</head>
<body>
<h1 align="center">inserarea caracterelor
speciale</h1><hr>
<font size="2" face="arial">
Cuvintele      din   
  acest     
text      sunt   
  despartite      de 
    grupuri     
de      trei     
spatii.
</font>
</body>
</html>

Referințe HTML
Poate fi adăugat un cuprins unei pagini Web de dimensiune mare pentru a permite
utilizatorului să se deplaseze într-un anumit loc din aceeași pagină. Locurile în care dorim
să se facă deplasarea se numesc țintele salturilor interne din paginile Web sau ancore cu
nume și sunt specificate, în cadrul documentului HTML prin utilizarea atributului name al
etichetei <A>...</A> astfel: <A name=valoare>Mesaj</A>
- valoarea parametrului name poate fi orice secvență de caractere, numere sau semn
de punctuație. Corespondentul ancorei care definește saltul către țintă este:
<A HREF=#NumeAncora>Mesaj</A>
În calitate de referință poate servi un cuvânt, frază, imagine sau orice alt element al
paginii Web.
Principala caracteristică a hipertextelor o constituie legăturile (links). Un link este o
conexiune către altă resursă Web, resursă care poate fi accesată din fereastra browser -
ului printr-un singur clic.
Link-urile pot fi de două tipuri: interne și externe.
Marcajul principal atât pentru referințele interne cât și pentru cele externe este:
<A>...</A> (ancora - ancora), acesta trebuie să conțină parametrul HREF=valoare.

Referințe HTML
<html>
<body text="steelblue">
<Font color="green" size="5">
<P><a HREF=#jos id=sus>Du-te jos</a>
<P><a HREF="#baza">Baza materiala</A>
<P><a HREF="#profile"> Profile</A>
<P><a HREF="#profesori"> Profesori</A>
<P><a HREF="#studenti"> Studenti</A>
<h2 id="baza">BAZA MATERIALA</h2></A>
12 facultati <br>...
<br><a HREF=#sus id=jos >Du-te sus</a>
<h2 id="profile">PROFIL Pedagogic</h2>
Profesori de informatică
<br>Profesori de Matematică <br>...
<br><a id=jos href=#sus>Du-te sus</a>
<h2 id="profesori">PROFESORI</h2>
Gorbanescu <br>...
<h2 id="studenti">STUDENTI</h2>
Prof. Negrea <br>...
</body>
</html>
Pot fi utilizante referințele interne(de exemplu pentru crearea meniurilor), definite cu
ajutorul atributului id: <A HREF=“#cuvant_cheie">Mesaj</A>
iar în text se utilizază: <A id="cuvant_cheie">Mesaj</A>

Referințe HTML
Dacă referirea este către o pagină HTML din directorul curent atunci eticheta este:
<A HREF=fisier.extensie>Mesaj</A>
Dacă referirea se face către o ancoră internă dintr-o altă pagină Web (din alt fâșier)
eticheta este:
<A HREF=fisier.extensie#NumeAncoraTinta>Mesaj</A>
Limbaful HTML permite deplasarea dintr-o pagină Web către o altă pagină Web de
pe același sistem de calcul, referințe externe, către site-uri din Internet.
<A HREF=AdresaSite>Mesaj</A>
Ex.: <A HREF=http://www.usm.md> Aceasta este legătura către site-ul Universității de Stat
a Moldovei</A>
<html>
<body >
<a HREF=http://www.usm.md>USM</a>
<a href="Ex 27.html"> Liste </a>
</body>
</html> Ex 21_1.html

Referințe HTML
Notă: Când vorbim despre o referință hipertext (legături spre alte pagini folosind un text sau o
imagine) între " și " nu trebuie să existe spații; dacă dorim să introducem legături spre fișiere sau
directoare al căror nume conține spații (adică sunt formate din cel puțin 2 cuvinte) trebuie să
înlocuim spațiile cu %20.
Poate fi utilizat atributul target = "nume_cadru" pentru a alege modalitatea de
încărcare a paginii utilizând diferite valori speciale pentru numele cadrului, deoarece
implicit, când se face click pe un link, resursa se deschide în acelaşi tab:
_top = încarcă pagina într - o fereastră nouă, deasupra altor ferestre de pe ecran;
_self = încarcă pagina în cadrul curent, este valoarea implicită;
_parent = încarcă pagina în fereastra părinte;
_blank = încarcă pagina într - o fereastră nouă, fără nume.
Exemplu: /...../HTML/HTML%20exemple/Ex%20test.html
Exemplu: <a href=“page.html"target="_blank">Se deschide in pagina noua</a>

Selectorii Class și id
Ca să folosim aceleași proprietăți pentru mai
multe elemente eliminăm folosim clasele.
De exemplu pentru un titlu, un paragraf și o
imagine putem folosi aceași clasă:
.center {text-align:center}
unde numele clasei ".center", este un nume generic
și nu are nimic cu acțiunea asupra unui tag.
Se putea numi ".asavreau", deci avem:
.asavreau {text-align:center}
În HTML vom avea:
<h1 class=" asavreau ">Un titlu centrat</h1>
<p class=" asavreau ">Exemplu de paragraf centrat.</p>
NU este recomandată începerea numelui
cu un număr.
<html>
<head>
.center {
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Acesttitlu este aliniat
la centru cu CSS</h1>
<p class="center">Acest paragraf este
de asemenea aliniat la centru cu
CSS.</p>
</body>
</html>

Sintaxa de definire a Id-ului: se folosește un diez (#)
în loc de punct pentru a defini id-ul în CSS.
#center {
text-align:center;
color:blue;
font-family:"sans serif" }
• Atributul id este folosit în general în JAVASCRIPT,
pentru a localiza un element HTML și a execută
acțiuni asupra lui.
• Atributul id trebuie să fie unic în pagină, nu poate
exista un alt element HTML cu același id. Prezența
mai multor elemente cu același id, poate genera
errori JAVASCRIPT și un corp HTML invalid.
<html>
<head>
#elem {
text-align:center;
color:red; }
</style>
</head>
<body>
<p id="elem">Buna ziua!</p>
<p>Acest paragraf nu este
afectat de declaratia de stil.</p>
</body>
</html>

Se crează două clase în CSS:
p.center {text-align:center}
p.right {text-align:right}
Aplicăm aceste clase în HTML astfel:
<p class="center">Paragraf centrat.</p>
<p class="right">Paragraf aliniat la dreapta.</p>
<html>
<head>
p.center {
text-align:center; }
</style>
</head>
<body>
<h1 class="center">Acesttitlu nu este
afectat de stilul CSS</h1>
<p class="center">Acestparagraf este
aliniat la centru cu CSS.</p>
</body>
</html>
Selectorul class este utilizat pentru a specifica
stilul unui grup de elemente. Se poate seta un stil
particular pentru toate elementele HTML care
face parte din aceeași clasă. Selectorul class
folosește atributul HTML class și este definit cu ".".

Gruparea și imbricarea selectorilor
În foile de stil se regăsesc deseori elemente care
au același stil:
h1{ color:green; }
h2{ color:green; }
p{ color:green; }
Care pot fi grupate ca în exemplul de mai jos:
<html>
<head>
h1,h2,p { color:green; }
</style>
</head>
<body>
<h1>Un titlu!</h1>
<h2>Un titlu mai mic!</h2>
<p>Un paragraf oarecare.</p>
</body>
</html>

Gruparea și imbricarea selectorilor
Este posibilă aplicarea unui stil unui selector aflat în
interiorul unui alt selector.
Mai jos este precizat un stil pentru toate elementele
p, și un alt stil pentru elementele p aflate în clasa „col":
p{
color:blue;
text-align:center;
}
.col{
background-color:blue;
}
.col p{
color:yellow;
}
</style>

Familii de fonturi
Pentru a specifica fontul cu CSS-ul folosim codul:
p { font-family: "Times New Roman", Georgia, Serif; }
Se pot prestabili mai multe fonturi în cazul în care userul nu are instalat fontul principal, sau
browser-ul nu suportă fontul respectiv.
Dacă nu avem un careva font el poate fi găsit în Google Fonts (https://fonts.google.com/)
unde putem să și vedem cum arată în browser.
<body>
<h2>Este un test!</h2>
<p>Salutare!</p>
<h2>Este un test!!!</h2>
<p>Salutare!!!</p>
<h2>Este un test!!!!!</h2>
<p>Salutare!!!!!</p>
</body>
@charset "UTF-8";
p
{
font-family: Oswald,
Verdana,
"Times New Roman",
Georgia,
Serif;
}
fără css cu css
CSS
HTML

Fonturi
Pentru marimea textului folosim atributul font-
size pentru care putem folosi cuvinte cheie:
xx-small;
small;
medium;
large;
larger;
sau dimensiunea în pixeli:
h1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }
Exemplele de mai sus funcționează foarte bine
în Firefox Opera și Google Chrome, dar nu și în
Internet Explorer problema apare atunci când se
marește textul.
Ca să eliminăm problema se poate folosi em ca
unitate de măsură și 1em=16px. Formula pentru a
calcula mărimea textului în em este
em=numar_pixeli/16.
h1 { font-size: 1.875em; }
h2 { font-size: 1.25em; }
p { font-size: 0.75em; }
Sau în %, unde 100% este text obișnuit iar dacă
vrem să mărim vom scrie un număr mai mare
decât 100 iar pentru un text mai mic vom scrie un
număr mai mic decât 100.
h1 { font-size: 100%; }
h2 { font-size: 150%; }
p { font-size: 80%; }

Fonturi
@charset "UTF-8";
p.dim_10
{
font-size: 10px;
}
p.dim_20
{
font-size: 20px;
}
p.dim_50
{
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css" href="fisier_extern.css"/>
</head>
<body>
<p class="dim_10">Salutare!</p>
<p class="dim_20">Salutare!!!</p>
<p class="dim_50">Salutare!!!!!</p>
</body>
</html>
fără css
cu css
CSS
HTML

Fonturi
Font-style în CSS se referă la text normal sau
înclinat obținut și cu tagul <i>…</i>.
p { font-style: normal; }
p { font-style: italic; }
Proprietatea font-style este utilizată frecvent
pentru a seta textul italic și are trei valori:
normal – textul este afișat normal;
italic – textul este afișat italic;
oblique – foarte similar cu italic, dar mai puțin
recunoscut de browsere.
<html>
<head>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">Acestparagraf este scris cu
fontul normal.</p>
<p class="italic">Acest paragraf este scris cu
fontul italic.</p>
<p class="oblique">Acest paragraf este scris cu
fontul oblic.</p>
</body>
</html>

Fonturi
font-weight în CSS se referă la text normal
sau îngroșat
p { font-weight: bold; }
Proprietatea font-weight este utilizată
pentru a seta textul bold și are valorile:
- bold (identic cu 700)
- bolder (identic cu 900)
- inhering
- lighter (identic cu 100)
- normal (identic cu 400)
sau putem folosi numerele: 100, 200, 300,
400, 500, 600, 700, 800, 800, 900.
<html>
<head>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">Acesta este un paragraf.</p>
<p class="light">Acesta este un paragraf.</p>
<p class="thick">Acesta este un paragraf.</p>
<p class="thicker">Acesta este un paragraf.</p>
</body>
</html>

Fonturi
font-variant în CSS permite convertirea
fontului în litere mici
p { font-variant: small-caps; }
și are valorile:
- small-caps
- normal
- inhering
Nu toate fonturile susțin acestă proprietate,
deci trebuie testat înaite de utilizare.
p
{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 20px;
font-family: Oswald,
Verdana,
"Times New Roman",
Georgia,
Serif;
}
p
{
font: italic small-caps bold 20px Oswald, Verdana,
"Times New Roman", Georgia, Serif; }
sau

Formatarea textului
Culoarea textului se poate exprima la fel ca și
culoarea de background în sistemul
hexadecimal, RGB sau cu numele în engleză a
culorii respective.
body { color: #efefef; }
h1 { color: red; }
p { color: rgb(255,0,0); }
Cu ajutorul atributului body vom specifica
culoarea întregului text conținut în pagină cu
excepția cazului în care specificăm altceva.
Conform cerințelor W3C, dacă am definit
proprietatea color în body, trebuie să definim și
proprietatea background-color.
<html>
<head>
body {color:red;}
h1 {color:#00ff00;}
p.paragr {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>Acesta este un titlu</h1>
<p>Paragraf obisnuit ce are culoarea
rosie. Culoarea implicita a textului paginii
este definita in selectorulbody.</p>
<p class="paragr">Acesta este un
paragraf din clasa "paragr" si are
culoarea albastra.</p>
</body>
</html>

Formatarea textului
Alinierea textului
h1.clasa { text-align: center; }
.clasa { text-align: center; }
În CSS ca și în HTML textul poate fi aliniat la
dreapta (right = end), la stânga (left = auto) și
justificat (justified).
<html>
<head>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>Exemplu de aliniere a textului cu CSS</h1>
<p class="date">Octombrie, 2019</p>
<p class="main">CSS, prescurtarea de la
Cascading Style Sheets, sunt etichete folosite pentru
formatarea paginilor web (de exemplu formatare
text, background sau aranjare in pagina, etc.).
<br />Profesorul</p><p><b>Observatie:</b>
Modificati dimensiunea ferestrei browser-uluipentru
a vedea cum arata alinierea justified.</p>
</body>
</html>

Formatarea textului
<!DOCTYPE html>
<html>
<head>
type="text/css" href="fisier_extern.css" />
</head>
<body>
<h1>Salutare!</h1>
<h2>Salutare!!!</h2>
<h3>Salutare!!!!!</h3>
</body>
</html>
@charset "UTF-8";
h1
{ text-align: left;
}
h2
{ text-align: right;
}
h3
{ text-align: center;
}

Formatarea textului
Proprietatea text-decoration este utilizată pentru a
stabili decorarea unui text.
Decorarea textului se folosește pentru stabilirea și
înlăturarea anumitor proprietăți.
none;
overline;
line-through;
underline;
blink;
Inhering;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Salutare!</h1>
<a href="usm.md">Aici este un link </a>
</body>
</html>
Cel mai des este utilizată pentru a înlătura
sublinierea link-urilor din motive de aspect, ca în
exemplul următor:
@charset "UTF-8";
h1
{
text-shadow: 3px 2px 3px;}
a{
text-decoration: none;}
cu css
CSS
HTML
fără css

Formatarea textului
<html>
<head>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>Acesta este un titlu 1</h1>
</body>
</html>
h1 {text-decoration: overline line-through underline;}

Formatarea textului
@charset "UTF-8";
p.up
{ text-transform: uppercase; }
p.lo
{ text-transform: lowercase; }
p.ca
{ text-transform: capitalize; }
Proprietatea text-transform este utilizată pentru
a specifica literele mici și literele mari dintr-un text.
Poate fi utilizată pentru a transforma tot textul în
minuscule sau majuscule, sau pentru a transforma
în majusculă prima literă din fiecare cuvânt.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="up">Salutare! Avem un text scris cu
litere mari.</p>
<p class="lo">Salutare!! Avem un text scris cu
litere mici.</p>
<p class="ca">Salutare!!! Avem un text in care
fiecare cuvint incepe cu litera mare</p>
</body>
</html>

Formatarea textului
Proprietatea text-indent este utilizată pentru
a specifica indentarea primei linii dintr-un text,
mărimea este dată în px sau em.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="up">Salutare! Avem un text scris cu
litere mari.</p>
<p class="lo">Salutare!! Avem un text scris cu
litere mici.</p>
<p class="ca">Salutare!!! Avem un text in care
fiecare cuvint incepe cu litera mare</p>
</body>
</html>
@charset "UTF-8";
p.up
{ text-transform: uppercase;
text-indent: 20px; }
p.lo
{ text-transform: lowercase;
p.ca
{ text-transform: capitalize;
Sau in HTML pentru toate paragrafele astfel:
p { text-indent:50px; }

Formatarea textului
<html>
<head>
p {text-indent:50px;}
p.uppercase {text-transform:uppercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">CSS, prescurtarea de la Cascading Style Sheets, sunt
etichete folosite pentru formatarea paginilor web (de exemplu formatare text,
background sau aranjare in pagina, etc.).</p>
<p class="capitalize">tatiana pasa</p>
</body>
</html>

Formatarea textului
Proprietatea text-shadow este utilizată pentru a stabili umbră unui text.
none - anulează adăugarea unei umbre.
color - culoarea umbrei în orice format CSS disponibil. În mod implicit, culoarea umbrei
se potrivește cu cea a textului și este parametru opțional.
h-shadow (pe x) - decalarea orizontală a umbrei în raport cu textul. O valoare pozitivă
a acestui parametru stabilește umbra la dreapta, negativă - la stânga. Obligatoriu.
v-shadow (pe y) - decalarea verticală a umbrei în raport cu textul. De asemenea, este
acceptabilă utilizarea unei valori negative care ridică umbra deasupra textului.
Obligatoriu.
blur-radius (rază) - setează raza de estompare a umbrei. Cu cât această valoare este
mai mare, cu atât umbra este mai fină, devine mai largă și mai strălucitoare. Dacă acest
parametru nu este setat, valoarea implicită este 0. Rețineți: algoritmul de netezire din
browsere este de obicei diferit, astfel încât aspectul umbrei poate varia ușor în funcție
de parametrii de netezire specificați.

Formatarea textului
@charset "UTF-8";
h1 { text-shadow: 3px 2px 3px;}
h2 { text-shadow: 5px 5px 5px red;}
h3 { text-shadow: 5px 0px 0px red;}
h4 { text-shadow: 0px 5px 0px green;}
h5 { text-shadow: 0px 0px 5px blue;}
h6 { text-shadow: -5px 5px 5px coral;}
<!DOCTYPE html>
<html>
<head>
type="text/css" href="fisier_extern.css" />
</head>
<body>
<h1>Salutare!</h1>
<h2>Salutare!!!</h2>
<h3>Salutare!!!!!</h3>
<h4>Salutare!!!!!!</h3>
<h5>Salutare!!!!!<!!/h3>
<h6>Salutare!!!!!!!!</h3>
</body>
</html>
Forma generală:
text-shadow : h-shadow v-shadow blur-radius color;

Formatarea textului
letter-spacing mărește sau micșorează spațiul
dintre caractere:
Inhering
normal
npx
-mpx
<html>
<head>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<p>CSS, prescurtarea de la Cascading Style
Sheets, sunt etichete folosite pentru formatarea
paginilor web (de exemplu formatare text,
background sau aranjare in pagina, etc.).</p>
</body>
</html>

Formatarea textului
word-spacing mărește sau micșorează spațiul
dintre cuvinte: Inhering, normal, npx, -mpx
<html>
<head>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<p>CSS, prescurtarea de la Cascading Style
Sheets, sunt etichete folosite pentru
formatarea paginilor web (de exemplu
formatare text, background sau aranjare in
pagina, etc.).</p>
</body>
</html>

Formatarea textului
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="fisier_extern.css"
/>
</head>
<body>
<p class="a">Salutare! Avem un text1 scris de la stinga. Avem
un text2 scris de la stinga. Avem un text3 scris de la stinga.</p>
<p class="b">Salutare! Avem un text1 scris de la dreapta. Avem
un text2 scris de la dreapta. Avem un text3 scris de la
dreapta.</p>
</body>
</html>
Atributul direction este utilizat în
paginile web unde are importanță
direcția de citire a textului.
Valorile posibile:
lrt – de la stânga la dreapta;
rtl – de la dreapta la stânga;
inherit - moștenește de la părinți.
@charset "UTF-8";
p.a
{
direction: ltr;
}
p.b
{
direction: rtl;
}

Perechea_1 ro.pdf

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Perechea_1 ro.pdf

Semelhante a Perechea_1 ro.pdf (20)

Perechea_1 ro.pdf