Curs HTML Part1

INTRODUCERE IN HTML
Ce este HTML?
 HTML înseamnă Hyper Text Markup Language;
 HTML este limbajul standard pentru crearea paginilor Web;
 HTML descrie structura unei pagini Web;
 HTML constă dintr-o serie de elemente;
 Elementele HTML spun browserului cum să afișeze conținutul;
 Elementele HTML etichetează părți de conținut precum „acesta este un titlu”,
„acesta este un paragraf”, „acesta este un link”, etc.
Exemplu document HTML simplu

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Explicatia exemplului
 Declarația <!DOCTYPE html> definește că acest document este un document
HTML5;
 Elementul <html> este elementul rădăcină al unei pagini HTML;
 Elementul <head> conține meta informații despre pagina HTML;
 Elementul <title> specifică un titlu pentru pagina HTML (care este afișat în bara
de titlu a browser-ului sau în fila paginii);
 Elementul <body> definește corpul documentului și este un container pentru tot
conținutul vizibil, cum ar fi titluri, paragrafe, imagini, hyperlinkuri, tabele, liste etc.;
 Elementul <h1> definește un titlu mare;
 Elementul <p> definește un paragraph.
Ce este un element de HTML?

Un element HTML este definit de o etichetă de început, un conținut și o etichetă de
final:
<numetag>Continut</numetag>
Elementul HTML este totul, de la eticheta de început până la eticheta de final.

Notă: unele elemente HTML nu au conținut (cum ar fi elementul <br>). Aceste elemente
sunt numite elemente goale. Elementele goale nu au o etichetă de final!
EXEMPLE DE BAZĂ HTML
Documente HTML
Toate documentele HTML trebuie să înceapă cu o declarație de tip de document: <!
DOCTYPE html>.
Documentul HTML în sine începe cu <html> și se termină cu </html>.
Partea vizibilă a documentului HTML se află între <body> și </body>.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>
Declaratia !DOCTYPE
Declarația <!DOCTYPE> reprezintă tipul de document și ajută browserele să afișeze
corect paginile web.
Trebuie să apară o singură dată, în partea de sus a paginii (înaintea oricăror etichete
HTML).
Declarația <!DOCTYPE> nu face distincție între majuscule și minuscule.
Declarația <!DOCTYPE> pentru HTML5 este:
<!DOCTYPE html>
Titluri HTML
Titlurile HTML sunt definite cu etichetele <h1> până la <h6> (heading).
<h1> definește cel mai important titlu. <h6> definește titlul cel mai puțin important:
<h1>This is heading 1</h1>

Paragrafele HTML
Paragrafele HTML sunt definite cu eticheta <p> (paragraph):
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Legături HTML
Legăturile HTML sunt definite cu eticheta <a> (anchor – ancora):
<a href="https://www.w3schools.com">This is a link</a>
Destinația linkului este specificată în atributul href.

Atributele sunt folosite pentru a furniza informații suplimentare despre elementele
HTML.
Imagini HTML
Imaginile HTML sunt definite cu eticheta <img>.
Sursa fișierului (src), textul alternativ (alt), lățimea (width) și înălțimea (height) sunt
furnizate ca atribute:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
ELEMENTE HTML
Un element HTML este definit de o etichetă de început, un anumit conținut și o etichetă

de final.
Elementul HTML este totul, de la eticheta de început până la eticheta de final:
Elemente HTML îmbrăcate
Elementele HTML pot fi îmbrăcate (aceasta înseamnă că elementele pot conține alte
elemente).
Următorul exemplu conține patru elemente HTML (<html>, <body>, <h1> și <p>):
<!DOCTYPE html>
<html>
<body>

</body>
</html>
Explicatia exemplului
Elementul <html> este elementul rădăcină și definește întregul document HTML.
Are o etichetă de început <html> și o etichetă de final </html>. Apoi, în interiorul
elementului <html> există un element <body>.
Elementul <body> definește corpul documentului. Are o etichetă de început <body> și
o etichetă de final </body>. Apoi, în interiorul elementului <body> există alte două
elemente: <h1> și <p>.
Elementul <h1> definește un titlu. Are o etichetă de început <h1> și o etichetă de final
</h1>.
Elementul <p> definește un paragraf. Are o etichetă de început <p> și o etichetă de
final </p>.
Elemente HTML goale
Elementele HTML fără conținut sunt numite elemente goale. Eticheta <br> definește o
întrerupere de linie și este un element gol fără o etichetă de închidere:
<p>This is a <br> paragraph with a line break.</p>
Referințe pentru etichete HTML:

 <html> - Definește rădăcina unui document HTML
 <body> - Definește corpul documentului
 <h1> până la <h6> - Definește titlurile HTML
ATRIBUTE HTML
Atributele HTML oferă informații suplimentare despre elementele HTML.

 Toate elementele HTML pot avea atribute;
 Atributele oferă informații suplimentare despre elemente;
 Atributele sunt întotdeauna specificate în eticheta de început;
 Atributele vin de obicei în perechi, cum ar fi: nume="valoare".
Atributul href
Eticheta <a> definește un hyperlink. Atributul href specifică adresa URL a paginii către
care merge linkul:
<a href="https://www.w3schools.com">Visit W3Schools</a>
Atributul src
Eticheta <img> este folosită pentru a încorpora o imagine într-o pagină HTML. Atributul
src specifică calea către imaginea care urmează să fie afișată:
<img src="img_girl.jpg">
Există două moduri de a specifica adresa URL în atributul src:
1. Adresa URL absolută - Legături către o imagine externă care este găzduită pe un
alt site web.
Exemplu: src="https://www.w3schools.com/images/img_girl.jpg".
2. Adresa URL relativă - Legături către o imagine care este găzduită pe site. Aici,
adresa URL nu include numele domeniului. Dacă adresa URL începe fără bară oblică,
va fi relativ la pagina curentă.
Exemplu: src="img_girl.jpg".
Dacă adresa URL începe cu o bară oblică, va fi relativ la domeniu.
Exemplu: src="/images/img_girl.jpg".
Atributele width și height
Eticheta <img> ar trebui să conțină și atributele width și height, care specifică lățimea și
înălțimea imaginii (în pixeli):
<img src="img_girl.jpg" width="500" height="600">
Atributul alt
Atributul alt necesar pentru eticheta <img> specifică un text alternativ pentru o imagine,
dacă imaginea din anumite motive nu poate fi afișată. Acest lucru se poate datora unei
conexiuni lente sau unei erori în atributul src sau dacă utilizatorul folosește un cititor de
ecran.
<img src="img_girl.jpg" alt="Girl with a jacket">
Atributul style
Atributul style este folosit pentru a adăuga stiluri unui element, cum ar fi culoarea,
fontul, dimensiunea și multe altele.
<p style="color:red;">This is a red paragraph.</p>

Atributul lang
Ar trebui să includeți întotdeauna atributul lang în interiorul etichetei <html>, pentru a
declara limba paginii Web. Acesta este menit să ajute motoarele de căutare și
browserele.
Următorul exemplu specifică engleza ca limbă:
<!DOCTYPE html>
<html lang="en">
Atributul title
Atributul title definește câteva informații suplimentare despre un element.
Valoarea atributului title va fi afișată ca un sfat explicativ atunci când treceți cu mouse-ul
peste element:
<p title="I'm a tooltip">This is a paragraph.</p>
Rezumatul capitolului
 Toate elementele HTML pot avea atribute
 Atributul href al lui <a> specifică adresa URL a paginii la care merge linkul
 Atributul src al <img> specifică calea către imaginea care urmează să fie afișată
 Atributele de width și height ale <img> oferă informații despre dimensiunea
imaginilor
 Atributul alt al <img> oferă un text alternativ pentru o imagine
 Atributul style este folosit pentru a adăuga stiluri unui element, cum ar fi
culoarea, fontul, dimensiunea și multe altele
 Atributul lang al etichetei <html> declară limba paginii Web
 Atributul title definește câteva informații suplimentare despre un element
TITLURI IN HTML
Titlurile HTML sunt titluri sau subtitluri pe care doriți să le afișați pe o pagină web.
Titlurile HTML sunt definite cu etichetele <h1> până la <h6>, <h1> definește cel mai
important titlu, <h6> definește titlul cel mai puțin important.
Notă: Browserele adaugă automat niște spații albe (o marjă) înainte și după un titlu.
Titlurile sunt importante. Motoarele de căutare folosesc titlurile pentru a indexa structura
și conținutul paginilor dvs. web. Utilizatorii parcurg adesea o pagină după titluri. Este
important să folosiți titluri pentru a afișa structura documentului.
Titlurile <h1> ar trebui folosite pentru titlurile principale, urmate de titlurile <h2>, apoi
cele mai puțin importante <h3> și așa mai departe.
Notă: utilizați titluri HTML numai pentru titluri. Nu folosiți titluri pentru a face textul MARE
sau aldine.
Fiecare titlu HTML are o dimensiune implicită. Cu toate acestea, puteți specifica
dimensiunea oricărui titlu cu atributul style, folosind proprietatea CSS font-size:
<h1 style="font-size:60px;">Heading 1</h1>
PARAGRAFE HTML
Un paragraf începe întotdeauna pe o linie nouă și este de obicei un bloc de text.

Elementul HTML <p> definește un paragraf.
Un paragraf începe întotdeauna pe o linie nouă, iar browserele adaugă automat niște
spații albe (o marjă) înainte și după un paragraf.
Linii orizontale HTML
Eticheta <hr> definește o pauză tematică într-o pagină HTML și este afișată cel mai
adesea ca o linie orizontală.
Elementul <hr> este folosit pentru a separa conținutul (sau a defini o modificare) într-o
pagină HTML:
<hr>
Eticheta <hr> este o etichetă goală, ceea ce înseamnă că nu are etichetă de final.
Întreruperi de linie HTML
Elementul HTML <br> definește o întrerupere de linie.
Folosiți <br> dacă doriți o întrerupere de linie (o linie nouă) fără a începe un nou
paragraf:
<p>This is<br>a paragraph<br>with line breaks.</p>
Eticheta <br> este o etichetă goală, ceea ce înseamnă că nu are etichetă de final.
Elementul HTML <pre>
Elementul HTML <pre> definește textul preformatat.
Textul din interiorul unui element <pre> este afișat într-un font cu lățime fixă (de obicei
Courier) și păstrează atât spațiile, cât și întreruperile de linie:
<pre>
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
Referințe pentru etichete HTML:

 <p> - Definește un paragraf
 <hr> - Definește o modificare tematică a conținutului
 <br> - Inserează o singură întrerupere de linie
 <pre> - Definește textul preformatat
STILURI IN HTML
Atributul style este folosit pentru a adăuga stiluri unui element, cum ar fi culoarea,
fontul, dimensiunea și multe altele.
Setarea stilului unui element HTML se poate face cu atributul style. Atributul style HTML
are următoarea sintaxă:
<tagname style="property:value;"></tagname>
property este o proprietate CSS, value este o valoare CSS.

Culoare de fundal
Proprietatea CSS background-color definește culoarea de fundal pentru un element
HTML.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
</body>
Culoarea textului
Proprietatea color CSS definește culoarea textului pentru un element HTML:
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
Fonturi
Proprietatea CSS font-family definește fontul care trebuie utilizat pentru un element
HTML:
<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>
Mărimea textului
Proprietatea CSS font-size definește dimensiunea textului pentru un element HTML:
<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size: 20px;">This is a paragraph.</p>
Alinierea textului
Proprietatea CSS text-align definește alinierea orizontală a textului pentru un element
HTML:
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
 Utilizați atributul style pentru stilarea elementelor HTML
 Utilizați background-color pentru culoarea de fundal
 Utilizați color pentru culorile textului
 Utilizați font-family pentru fonturile de text
 Utilizați font-size pentru dimensiunile textului
 Utilizați text-align pentru alinierea textului,
FORMATAREA TEXTULUI HTML
HTML conține mai multe elemente pentru definirea textului cu o semnificație specială.
Elemente de formatare HTML
Elementele de formatare au fost concepute pentru a afișa tipuri speciale de text:
 <b> - Text îngroșat
 <strong> - Text important
 <i> - Text italic
 <em> - Text accentuat
 <mark> - Text evidentiat
 <small> - Text mai mic
 <del> - Text taiat
 <ins> - Text subliniat
 <sub> - Text indice
 <sup> - Text putere
Elemente HTML <b> și <strong>

Elementul HTML <b> definește textul aldine, fără nicio importanță suplimentară.
Elementul HTML <strong> definește textul cu o importanță puternică. Conținutul din
interior este de obicei afișat cu caractere aldine.
<b>This text is bold</b>

<strong>This text is important!</strong>
Elemente HTML <i> și <em>

Elementul HTML <i> definește o parte a textului într-o voce sau o dispoziție alternativă.
Conținutul din interior este afișat de obicei cu caractere cursive.
Sfat: Eticheta <i> este adesea folosită pentru a indica un termen tehnic, o expresie
dintr-o altă limbă.
Elementul HTML <em> definește textul accentuat. Conținutul din interior este afișat de
obicei cu caractere cursive.
Sfat: un cititor de ecran va pronunța cuvintele în <em> cu accent, folosind accent
verbal.
<i>This text is italic</i>

<em>This text is emphasized</em>
Element HTML < small>

Elementul HTML <small> definește text mai mic:
<small>This is some smaller text.</small>

Element HTML <mark>
Elementul HTML <mark> definește textul care ar trebui să fie marcat sau evidențiat:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Elementul HTML <del>

Elementul HTML <del> definește textul care a fost șters dintr-un document. Browserele
vor trasa de obicei o linie prin textul șters:
<p>My favorite color is <del>blue</del> red.</p>
Elementul HTML <ins>

Elementul HTML <ins> definește un text care a fost inserat într-un document.
Browserele vor sublinia de obicei textul inserat:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
Elementul HTML <sub>

Elementul HTML <sub> definește textul indicelui. Textul indicelui apare cu o jumătate
de caracter sub linia normală și uneori este redat într-un font mai mic. Textul indicelui
poate fi folosit pentru formule chimice, cum ar fi H2O:
<p>This is <sub>subscripted</sub> text.</p>
Elementul HTML <sup>

Elementul HTML <sup> definește textul superscript. Textul în indice apare cu o
jumătate de caracter deasupra liniei normale și uneori este redat într-un font mai mic.
Textul suprascript poate fi folosit pentru note de subsol, cum ar fi WWW[1]:
<p>This is <sup>superscripted</sup> text.</p>

ELEMENTE DE CITARE HTML
În acest capitol vom parcurge elementele HTML <blockquote>, <q>, <abbr>,

<address>, <cite> și <bdo>.
Elementul HTML <blockquote> pentru Citate
Elementul HTML <blockquote> definește o secțiune care este citată dintr-o altă sursă.
Browserele de obicei indentează elementele <blockquote>.
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's
leading conservation organization, WWF works in nearly 100 countries. At every
level, we collaborate with people around the world to develop and deliver
innovative solutions that protect communities, wildlife, and the places in which
they live.
</blockquote>
Eticheta HTML <q> pentru citate scurte

Eticheta HTML <q> definește un citat scurt. Browserele introduc în mod normal
ghilimele în jurul <q>.
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
Eticheta HTML <abbr> pentru abrevieri

Eticheta HTML <abbr> definește o abreviere sau un acronim, cum ar fi „HTML”, „CSS”,
„Mr.”, „Dr.”, „ASAP”, „ATM”.
Marcarea abrevierilor poate oferi informații utile browserelor, sistemelor de traducere și
motoarelor de căutare.
Sfat: utilizați atributul titlu global pentru a afișa descrierea abrevierei/acronimului atunci
când treceți cu mouse-ul peste element.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>
Eticheta HTML <address> pentru informațiil de contact
Eticheta HTML <address> definește informațiile de contact ale autorului/proprietarului
unui document sau al unui articol.
Informațiile de contact pot fi o adresă de e-mail, o adresă URL, o adresă fizică, un
număr de telefon, un handle de rețele sociale etc.
Textul din elementul <address> este redat de obicei în cursiv, iar browserele vor
adăuga întotdeauna o întrerupere de linie înainte și după elementul <address>.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Eticheta HTML <cite> pentru titlul lucrării

Eticheta HTML <cite> definește titlul unei lucrări creative (de exemplu, o carte, o
poezie, un cântec, un film, un tablou, o sculptură etc.).
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
Elemente de citare HTML

 <abbr> - Definește o abreviere sau un acronim
 <address> - Definește informațiile de contact ale autorului/proprietarului unui
document
 <bdo> - Definește direcția textului
 <blockquote> - Definește o secțiune care este citată dintr-o altă sursă
 <cite> - Definește titlul unei lucrări
 <q> - Definește o citare scurtă în linie
COMENTARII HTML
Comentariile HTML nu sunt afișate în browser, dar vă pot ajuta să documentați codul
sursă HTML.
Etichetă de comentariu HTML
Puteți adăuga comentarii la sursa HTML utilizând următoarea sintaxă:

Observați că există un semn de exclamare (!) în eticheta de început, dar nu și în

eticheta de final.
Notă: comentariile nu sunt afișate de browser, dar vă pot ajuta să documentați codul
sursă HTML.
Adaugă comentarii
Cu comentarii puteți plasa notificări și mementouri în codul HTML:

Ascunde conținut
Comentariile pot fi folosite pentru a ascunde conținutul.
Acest lucru poate fi util dacă ascundeți temporar conținutul:

<p>This is a paragraph too.</p>
De asemenea, puteți ascunde mai multe rânduri. Tot ceea ce este între  va fi
ascuns de pe afișaj.
p>This is a paragraph.</p>

<p>This is a paragraph too.</p>
Comentariile sunt, de asemenea, grozave pentru depanarea HTML, deoarece puteți
comenta liniile de cod HTML, pe rând, pentru a căuta erori.
Ascunde conținutul inline
Comentariile pot fi folosite pentru a ascunde părți în mijlocul codului HTML.
<<p>This  is a paragraph.</p>
CULORI IN HTML
Culorile HTML sunt specificate cu nume de culori predefinite sau cu valori RGB, HEX,
HSL, RGBA sau HSLA.
Nume de culori
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
HTML acceptă 140 de nume de culori standard.

Culoare de fundal
Puteți seta culoarea de fundal pentru elementele HTML:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
Hello World d
Culoarea textului
Puteți seta culoarea textului:
<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Culoarea chenarului
Puteți seta culoarea chenarelor:
<h1 style="border:2px solid Tomato;">Hello World</h1>
Hello World
Valori de culoare
În HTML, culorile pot fi specificate și folosind valori RGB, valori HEX, valori HSL, valori
RGBA și valori HSLA.
Culori HTML RGB și RGBA

O valoare de culoare RGB reprezintă sursele de lumină ROȘU, VERDE și ALBASTRU.
O valoare de culoare RGBA este o extensie a RGB cu un canal alfa (opacitate).
Valori de culoare RGB
În HTML, o culoare poate fi specificată ca valoare RGB, folosind această formulă:
rgb (rosu, verde, albastru).
Fiecare parametru (roșu, verde și albastru) definește intensitatea culorii cu o valoare
între 0 și 255. Aceasta înseamnă că există 256 x 256 x 256 = 16777216 culori posibile!
De exemplu, rgb(255, 0, 0) este afișat ca roșu, deoarece roșu este setat la cea mai
mare valoare (255), iar celelalte două (verde și albastru) sunt setate la 0.
<h1 style="background-color:rgb(255, 0, 0);">ROSU</h1>

Un alt exemplu, rgb(0, 255, 0) este afișat ca verde, deoarece verdele este setat la cea
mai mare valoare (255), iar celelalte două (roșu și albastru) sunt setate la 0.
<h1 style="background-color:rgb(0, 255, 0);">VERDE</h1>
Pentru a afișa negru, setați toți parametrii de culoare la 0, astfel: rgb(0, 0, 0).
<h1 style="background-color:rgb(0, 0, 0);">NEGRU</h1>
Pentru a afișa alb, setați toți parametrii de culoare la 255, astfel: rgb(255, 255, 255).
<h1 style="background-color:rgb(255, 255, 255);">ALB</h1>
Umbre de gri
Nuanțele de gri sunt adesea definite folosind valori egale pentru toți cei trei parametri:
<h1 style="background-color:rgb(100, 100, 100);">GRI</h1>
Valori de culoare RGBA

Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa -
care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu:
rgba (rosu, verde, albastru, alfa)
Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (deloc transparent):
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
Valori de culoare HEX

În HTML, o culoare poate fi specificată folosind o valoare hexazecimală sub forma:
#rrggbb, unde rr (roșu), gg (verde) și bb (albastru) sunt valori hexazecimale între 00 și ff
(la fel ca zecimalul 0-255).
De exemplu, #ff0000 este afișat ca roșu, deoarece roșu este setat la cea mai mare
valoare (ff), iar celelalte două (verde și albastru) sunt setate la 00.
Un alt exemplu, #00ff00 este afișat ca verde, deoarece verdele este setat la cea mai
mare valoare (ff), iar celelalte două (roșu și albastru) sunt setate la 00.
Pentru a afișa negru, setați toți parametrii de culoare la 00, astfel: #000000.
Pentru a afișa albul, setați toți parametrii de culoare la ff, astfel: #ffffff.
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
Nuanțele de gri sunt adesea definite folosind valori egale pentru toți cei trei parametri.
Culori HSL și HSLA
HSL înseamnă nuanță, saturație și luminozitate. Valorile de culoare HSLA sunt o
extensie a HSL cu un canal alfa (opacitate).
Valori de culoare HSL
În HTML, o culoare poate fi specificată folosind nuanța, saturația și luminozitatea (HSL)
sub forma:
hsl (nuanță, saturație, luminozitate)
Nuanța este un grad pe roata de culori de la 0 la 360. 0 este roșu, 120 este verde și 240
este albastru.
Saturația este o valoare procentuală. 0% înseamnă o nuanță de gri, iar 100% este
culoarea completă.
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
Saturația
Saturația poate fi descrisă ca intensitatea unei culori.
 100% este culoare pură, fără nuanțe de gri.
 50% este 50% gri, dar puteți vedea în continuare culoarea.
 0% este complet gri; nu mai vezi culoarea.
Luminozitatea
Luminozitatea unei culori poate fi descrisă ca câtă lumină doriți să dați culorii, unde 0%
înseamnă lipsă de lumină (negru), 50% înseamnă 50% lumină (nici întuneric, nici
lumină) și 100% înseamnă luminozitate totală (alb). ).
Umbre de gri
Nuanțele de gri sunt adesea definite prin setarea nuanței și a saturației la 0 și ajustând
luminozitatea de la 0% la 100% pentru a obține nuanțe mai închise/mai deschise.
Valori de culoare HSLA
Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL, cu un canal Alpha
- care specifică opacitatea unei culori.
O valoare de culoare HSLA este specificată cu:
hsla (nuanță, saturație, luminozitate, alfa)
Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (deloc transparent).
STILURI HTML - CSS
CSS înseamnă Cascading Style Sheets. CSS economisește multă muncă. Poate
controla aspectul mai multor pagini web simultan.
Ce este CSS?
Cascading Style Sheets (CSS) este folosit pentru a formata aspectul unei pagini web.
Cu CSS, puteți controla culoarea, fontul, dimensiunea textului, distanța dintre elemente,
modul în care sunt poziționate și aranjate elementele, ce imagini de fundal sau culori de
fundal vor fi utilizate, diferite afișaje pentru diferite dispozitive și dimensiuni de ecran și
mult mai mult!
Sfat: Cuvântul cascadă înseamnă că un stil aplicat unui element părinte se va aplica și
tuturor elementelor copii din cadrul părinte. Deci, dacă setați culoarea textului corpului
la „albastru”, toate titlurile, paragrafele și alte elemente de text din corp vor avea, de
asemenea, aceeași culoare (dacă nu specificați altceva)!
Utilizarea CSS
CSS poate fi adăugat documentelor HTML în 3 moduri:
 Inline - prin utilizarea atributului de stil în interiorul elementelor HTML
 Intern - prin utilizarea unui element <style> în secțiunea <head>
 Extern - prin utilizarea unui element <link> pentru a conecta la un fișier CSS
extern
Cea mai obișnuită modalitate de a adăuga CSS este păstrarea stilurilor în fișiere CSS
externe. Cu toate acestea, în acest tutorial vom folosi stiluri inline și interne, deoarece
acest lucru este mai ușor de demonstrat și mai ușor pentru tine să îl încerci singur.
CSS inline
Un CSS inline este folosit pentru a aplica un stil unic unui singur element HTML. Un
CSS inline folosește atributul de stil al unui element HTML.
Următorul exemplu setează culoarea textului elementului <h1> la albastru și culoarea
textului elementului <p> la roșu:
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>
CSS intern
Un CSS intern este folosit pentru a defini un stil pentru o singură pagină HTML. Un CSS
intern este definit în secțiunea <head> a unei pagini HTML, în cadrul unui element
<style>. Următorul exemplu setează culoarea textului TOATE elementele <h1> (pe
pagina respectivă) la albastru, iar culoarea textului TOATE elementele <p> la roșu. În
plus, pagina va fi afișată cu o culoare de fundal „powderblue”:
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
CSS extern
O foaie de stil externă este folosită pentru a defini stilul pentru multe pagini HTML.
Pentru a utiliza o foaie de stil externă, adăugați un link către aceasta în secțiunea
<head> a fiecărei pagini HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
Foaia de stil externă poate fi scrisă în orice editor de text. Fișierul nu trebuie să conțină
niciun cod HTML și trebuie să fie salvat cu extensia .css. Iată cum arată fișierul
„styles.css”:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Sfat: Cu o foaie de stil externă, puteți schimba aspectul unui întreg site web, schimbând
un fișier!
Culori, fonturi și dimensiuni CSS
Proprietatea CSS color definește culoarea textului care trebuie utilizat.
Proprietatea CSS font-family definește fontul care trebuie utilizat.
Proprietatea CSS font-size definește dimensiunea textului care trebuie utilizat.
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
</style>
CSS border
Proprietatea border CSS definește un chenar în jurul unui element HTML.
Sfat: Puteți defini un chenar pentru aproape toate elementele HTML.
p {
border: 2px solid powderblue;
}
CSS padding
Proprietatea de padding CSS definește o umplutură (spațiu) între text și chenar.
p {
padding: 30px;
}
CSS margin
Proprietatea CSS margin definește spațiu în afara chenarului (border).
p {
margin: 30px;
}
Link către CSS extern

Foile de stil externe pot fi referite cu o adresă URL completă sau cu o cale relativă la
pagina web curentă.
Exemplu referinta URL extern:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Exemplu referinta interna:

<link rel="stylesheet" href="styles.css">
 Utilizați atributul style HTML pentru stilul inline
 Utilizați elementul HTML <style> pentru a defini CSS intern
 Utilizați elementul HTML <link> pentru a vă referi la un fișier CSS extern
 Utilizați elementul HTML <head> pentru a stoca elementele <style> și <link>
 Utilizați proprietatea CSS color pentru culorile textului
 Utilizați proprietatea CSS font-family pentru fonturile text
 Utilizați proprietatea CSS font-size pentru dimensiunile textului
 Utilizați proprietatea CSS border pentru margini
 Utilizați proprietatea de CSS padding pentru spațiul din interiorul chenarului
 Utilizați proprietatea CSS margin pentru spațiul din afara chenarului.
Etichete de stil HTML
 <style> - Definește informațiile de stil pentru un document HTML
 <link> - Definește o legătură între un document și o resursă externă.
LEGĂTURI HTML - HYPERLINKURI
Legăturile HTML sunt hyperlinkuri. Puteți face clic pe un link și puteți sări la alt
document. Când mutați mouse-ul peste o legătură, săgeata mouse-ului se va
transforma într-o mână mică.
Notă: un link nu trebuie să fie text. Un link poate fi o imagine sau orice alt element
HTML!
Legături HTML - Sintaxă
Eticheta HTML <a> definește un hyperlink. Are următoarea sintaxă:
<a href="url">link text</a>
Cel mai important atribut al elementului <a> este atributul href, care indică destinația
link-ului. Textul linkului este partea care va fi vizibilă pentru cititor.
Acest exemplu arată cum să creați un link către W3Schools.com:
<a href=”https://www.w3schools.com/” target=”_blank”>Visit W3Schools.com!</a>
În mod implicit, linkurile vor apărea după cum urmează în toate browserele:
 Un link nevizitat este subliniat și albastru
 Un link vizitat este subliniat și violet
 Un link activ este subliniat și roșu
Sfat: linkurile pot fi, desigur, stilate cu CSS, pentru a obține un alt aspect!
Legături HTML - Atributul target
În mod implicit, pagina legată va fi afișată în fereastra curentă a browserului. Pentru a
schimba acest lucru, trebuie să specificați un alt target pentru link.
Atributul target specifică unde să deschidă documentul legat.
Atributul target poate avea una dintre următoarele valori:
 _self - Implicit. Deschide documentul în aceeași fereastră/filă în care a fost făcută
click
 _blank - Deschide documentul într-o fereastră sau filă nouă
 _parent - Deschide documentul în cadrul părinte
 _top - Deschide documentul în întreg corpul ferestrei
Adrese URL absolute vs. Adrese URL relative
Ambele exemple de mai sus folosesc o adresă URL absolută (o adresă web completă)
în atributul href.
Un link local (un link către o pagină din același site web) este specificat cu o adresă
URL relativă (fără partea „https://www”):
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
Legături HTML - Utilizați o imagine ca link

Pentru a utiliza o imagine ca link, trebuie doar să puneți eticheta <img> în interiorul
etichetei <a>:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link către o adresă de e-mail

Utilizați mailto: în interiorul atributului href pentru a crea un link care deschide programul
de e-mail al utilizatorului (pentru a-i permite să trimită un nou e-mail):
<a href="mailto:someone@example.com">Send email</a>
Link Titluri
Atributul title specifică informații suplimentare despre un element.
Informațiile sunt afișate cel mai adesea ca un text de indicație atunci când mouse-ul se
deplasează peste element.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML

section">Visit our HTML Tutorial</a>
 Utilizați elementul <a> pentru a defini o legătură
 Utilizați atributul href pentru a defini adresa linkului
 Utilizați atributul target pentru a defini unde să deschideți documentul legat
 Utilizați elementul <img> (în interiorul <a>) pentru a utiliza o imagine ca link
 Utilizați schema mailto: din cadrul atributului href pentru a crea un link care
deschide programul de e-mail al utilizatorului.
Etichete de link HTML
 <a> - Definește un hyperlink.
Legături HTML - Creați marcaje

Legăturile HTML pot fi folosite pentru a crea marcaje, astfel încât cititorii să poată sări la
anumite părți ale unei pagini web.
Legăturile HTML pot fi folosite pentru a crea marcaje, astfel încât cititorii să poată sări la
anumite părți ale unei pagini web.
Creați un marcaj în HTML
Marcajele pot fi utile dacă o pagină web este foarte lungă.
Pentru a crea un marcaj - creați mai întâi marcajul, apoi adăugați un link către acesta.
Când se face clic pe link, pagina va derula în jos sau în sus până la locația cu marcajul.
Exemplu
Mai întâi, utilizați atributul id pentru a crea un marcaj:
<h2 id="C4">Chapter 4</h2>
Apoi, adăugați un link către marcaj („Săriți la capitolul 4”), din aceeași pagină:
<a href="#C4">Jump to Chapter 4</a>
De asemenea, puteți adăuga un link către un marcaj pe altă pagină:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
 Utilizați atributul id (id="valoare") pentru a defini marcaje într-o pagină
 Utilizați atributul href (href="#value") pentru a crea un link către marcaj
IMAGINI IN HTML
Imaginile pot îmbunătăți designul și aspectul unei pagini web.

Sintaxa imaginilor HTML
Eticheta HTML <img> este folosită pentru a încorpora o imagine într-o pagină web.
Imaginile nu sunt inserate din punct de vedere tehnic într-o pagină web; imaginile sunt
legate de pagini web. Eticheta <img> creează un spațiu de stocare pentru imaginea de
referință.
Eticheta <img> este goală, conține numai atribute și nu are o etichetă de închidere.
Eticheta <img> are două atribute obligatorii:
 src - Specifică calea către imagine
 alt - Specifică un text alternativ pentru imagine
Sintaxă
<img src="url" alt="alternatetext">
Atributul src
Atributul src specifică calea (URL-ul) către imagine.
Notă: Când se încarcă o pagină web, browserul este cel care primește imaginea de la
un server web și o inserează în pagină. Prin urmare, asigurați-vă că imaginea rămâne
de fapt în același loc în raport cu pagina web, altfel vizitatorii dvs. vor primi o pictogramă
de link rupt. Pictograma linkului întrerupt și textul alternativ sunt afișate dacă browserul
nu poate găsi imaginea.
Atributul alt
Atributul alt oferă un text alternativ pentru o imagine, dacă utilizatorul din anumite
motive nu o poate vizualiza (din cauza conexiunii lente, a unei erori în atributul src sau
dacă utilizatorul folosește un cititor de ecran).
Valoarea atributului alt ar trebui să descrie imaginea:
<img src="img_chania.jpg" alt="Flowers in Chania">
Dacă un browser nu poate găsi o imagine, va afișa valoarea atributului alt.

Sfat: Un cititor de ecran este un program software care citește codul HTML și permite
utilizatorului să „asculte” conținutul. Cititoarele de ecran sunt utile pentru persoanele cu
deficiențe de vedere sau cu dizabilități de învățare.
Dimensiunea imaginii - lățime și înălțime
Puteți utiliza atributul style pentru a specifica lățimea și înălțimea unei imagini.
<img src="img_girl.jpg" alt="Girl in a jacket"

style="width:500px;height:600px;">
Alternativ, puteți utiliza atributele width și height:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Atributele width și height definesc întotdeauna lățimea și înălțimea imaginii în pixeli.
Notă: specificați întotdeauna lățimea și înălțimea unei imagini. Dacă lățimea și înălțimea
nu sunt specificate, pagina web poate pâlpâi în timp ce imaginea se încarcă.
Imagini într-un alt folder
Dacă aveți imaginile într-un subdosar, trebuie să includeți numele folderului în atributul
src:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Imagini pe un alt server/site web

Unele site-uri web indică o imagine pe alt server.
Pentru a indica o imagine pe alt server, trebuie să specificați o adresă URL absolută
(completă) în atributul src:
<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">
Note despre imaginile externe: imaginile externe pot fi protejate prin drepturi de autor.
Dacă nu obțineți permisiunea de a-l folosi, este posibil să încălcați legile privind
drepturile de autor. În plus, nu puteți controla imaginile externe; ele pot fi eliminate sau
schimbate brusc.
Imagini animate
HTML permite GIF-urile animate:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Imagine ca Link
Pentru a utiliza o imagine ca link, puneți eticheta <img> în interiorul etichetei <a>:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Imagine plutitoare
Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească la dreapta sau la
stânga unui text:
<p>
<img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
 Utilizați elementul HTML <img> pentru a defini o imagine
 Utilizați atributul HTML src pentru a defini adresa URL a imaginii
 Utilizați atributul HTML alt pentru a defini un text alternativ pentru o imagine,
dacă aceasta nu poate fi afișată
 Utilizați atributele HTML lățime și înălțime sau proprietățile CSS lățime și înălțime
pentru a defini dimensiunea imaginii
 Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească la stânga sau
la dreapta
Notă: încărcarea imaginilor mari necesită timp și poate încetini pagina dvs. web. Folosiți
imaginile cu atenție.
Etichete de imagine HTML
 <img> - Definește o imagine
 <map> - Definește o hartă imagine hartă
 <area> - Definește o zonă pe care se poate face clic în interiorul unei hărți
imagine
 <picture> - Definește un container pentru mai multe resurse de imagine
Hărți imagine HTML

Cu hărți imagine HTML, puteți crea zone pe care se poate face clic pe o imagine.
Hărți imagine
Eticheta HTML <map> definește o hartă de imagine. O hartă imagine este o imagine cu
zone pe care se poate face clic. Zonele sunt definite cu una sau mai multe etichete
<area>.
Acesta este codul sursă HTML pentru harta imaginii:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Cum functioneazã?
Ideea din spatele unei hărți imagine este că ar trebui să puteți efectua diferite acțiuni în
funcție de locul în care faceți clic pe imagine.
Pentru a crea o hartă de imagine aveți nevoie de o imagine și de un cod HTML care
descrie zonele pe care se poate face clic.
Imaginea
Imaginea este inserată folosind eticheta <img>. Singura diferență față de alte imagini
este că trebuie să adăugați un atribut usemap:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Valoarea usemap începe cu o etichetă hash # urmată de numele hărții imaginii și este
folosită pentru a crea o relație între imagine și harta imaginii.
Sfat: puteți utiliza orice imagine ca hartă!
Creați o hartă imagine, apoi, adăugați un element <map>.
Elementul <map> este folosit pentru a crea o hartă a imaginii și este legat de imagine
folosind atributul de name necesar:
<map name="workmap">
Atributul name trebuie să aibă aceeași valoare ca atributul usemap al <img>.

Eticheta area
Apoi, adăugați zonele pe care se poate face clic.
O zonă pe care se poate face clic este definită folosind un element <area>.
Atributul shape
Trebuie să definiți forma zonei pe care se poate face clic și puteți alege una dintre
aceste valori:
 rect - definește o regiune dreptunghiulară
 circle - definește o regiune circulară
 poly - definește o regiune poligonală
 default - definește întreaga regiune
De asemenea, trebuie să definiți niște coordonate pentru a putea plasa zona pe care se
poate face clic pe imagine.
Shape="rect"
Coordonatele pentru shape="rect" vin în perechi, una pentru axa x și una pentru axa y.
 Deci, coordonatele 34,44 sunt situate la 34 de pixeli de la marginea din stânga și

la 44 de pixeli de sus;
 Coordonatele 270.350 sunt situate la 270 de pixeli de la marginea din stânga și
la 350 de pixeli de sus;
Acum avem suficiente date pentru a crea o zonă dreptunghiulară pe care se poate face
clic:
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
HTML FAVICON
O favicon este o imagine mică afișată lângă titlul paginii în fila browser.
Cum să adăugați o favicon în HTML
Puteți folosi orice imagine care vă place ca favicon. De asemenea, vă puteți crea
propria favicon pe site-uri precum https://www.favicon.cc.
Sfat: un favicon este o imagine mică, deci ar trebui să fie o imagine simplă, cu contrast
ridicat.
O imagine favicon este afișată în stânga titlului paginii în fila browser, astfel:
Pentru a adăuga o favicon pe site-ul dvs. web, fie salvați imaginea favicon-ului în
directorul rădăcină al serverului dvs. web, fie creați un folder în directorul rădăcină numit
imagini și salvați imaginea favicon-ului în acest folder. Un nume comun pentru o
imagine favicon este „favicon.ico”.
Apoi, adăugați un element <link> în fișierul dvs. „index.html”, după elementul <title>,
astfel:
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
 Utilizați elementul HTML <link> pentru a insera o favicon
TITLUL PAGINII HTML
Fiecare pagină web ar trebui să aibă un titlu pentru a descrie sensul paginii.
Elementul <title> adaugă un titlu paginii dvs.:
<head>
<title>My Page Title</title>
</head>
Titlul trebuie să descrie conținutul și semnificația paginii.

Titlul paginii este foarte important pentru optimizarea motorului de căutare (SEO).
Textul este folosit de algoritmii motoarelor de căutare pentru a decide ordinea când
afișează paginile în rezultatele căutării.
Elementul <title>:
 definește un titlu în bara de instrumente a browserului
 oferă un titlu pentru pagină atunci când este adăugată la favorite
 afișează un titlu pentru pagină în rezultatele motorului de căutare
Așadar, încercați să faceți titlul cât mai exact și semnificativ posibil!
Etichetă de titlu HTML
 <title> - Definește titlul documentului
TABELELE HTML
Tabelele HTML permit dezvoltatorilor web să aranjeze datele în rânduri și coloane. Un

tabel în HTML constă din celule de tabel în interiorul rândurilor și coloanelor.
Exemplu
Un tabel HTML simplu:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Celule de tabel
Fiecare celulă de tabel este definită de o etichetă <td> și (td înseamnă tabel data - date
de tabel).
Tot ceea ce este cuprins între <td> și </td> este conținutul celulei tabelului.
Notă: O celulă de tabel poate conține tot felul de elemente HTML: text, imagini, liste,
link-uri, alte tabele etc.
Rânduri de tabel
Fiecare rând de tabel începe cu o etichetă <tr> (tr înseamnă tabel row - rând de tabel).
Puteți avea câte rânduri doriți într-un tabel; asigurați-vă doar că numărul de celule este
același în fiecare rând.
Cap de tabel
Uneori doriți ca celulele dvs. să fie celule de cap de tabel. În aceste cazuri, utilizați
eticheta <th> în loc de eticheta <td> (th înseamnă tabel header – cap de tabel)
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
În mod implicit, textul din elementele <th> este aldin și centrat, dar îl puteți schimba cu
CSS.
Etichete de tabel HTML
 <table> - Definește un tabel
 <th> - Definește o celulă antet într-un tabel
 <tr> - Definește un rând într-un tabel
 <td> - Definește o celulă dintr-un tabel
 <caption> - Definește o legenda de tabel
 <colgroup> - Specifică un grup de una sau mai multe coloane într-un tabel pentru
formatare
 <col> - Specifică proprietățile coloanei pentru fiecare coloană dintr-un element
<colgroup>
 <thead> - Grupează conținutul antetului într-un tabel
 <tbody> - Grupează conținutul corpului într-un tabel
 <tfoot> - Grupează conținutul subsolului într-un tabel
Borduri de tabel HTML

Tabelele HTML pot avea chenare de diferite stiluri și forme.
Cum se adaugă o chenar
Când adăugați un chenar la un tabel, adăugați și chenaruri în jurul fiecărei celule de
tabel:
Pentru a adăuga o chenar, utilizați proprietatea CSS border pe elementele table, th și

td:
table, th, td {
border: 1px solid black;
}
Chenarele tabelului restrânse

Pentru a evita chenarele duble, ca în exemplul de mai sus, setați proprietatea CSS
border-collapse la colaps.
table, th, td {
border-collapse: collapse;
}
Stiluri de chenare de tabel

Dacă setați o culoare de fundal pentru fiecare celulă și dați chenarului o culoare albă (la
fel ca fundalul documentului), aveți impresia unui chenar invizibil:
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Chenare de tabel rotunjite

Cu proprietatea border-radius, granițele devin colțuri rotunjite:
table, th, td {
border-radius: 10px;
}

Curs HTML Part1

Î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

Curs HTML Part1

Încărcat de

Drepturi de autor:

Formate disponibile

INTRODUCERE IN HTML

Exemplu document HTML simplu

<h1>My First Heading</h1>

Ce este un element de HTML?

Elementul HTML este totul, de la eticheta de început până la eticheta de final.

EXEMPLE DE BAZĂ HTML

<h1>My First Heading</h1>

<h1>This is heading 1</h1>

<a href="https://www.w3schools.com">This is a link</a>

Destinația linkului este specificată în atributul href.

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Un element HTML este definit de o etichetă de început, un anumit conținut și o etichetă

<h1>My First Heading</h1>

<p>This is a <br> paragraph with a line break.</p>

Referințe pentru etichete HTML:

Atributele HTML oferă informații suplimentare despre elementele HTML.

<a href="https://www.w3schools.com">Visit W3Schools</a>

<img src="img_girl.jpg" width="500" height="600">

<img src="img_girl.jpg" alt="Girl with a jacket">

<p style="color:red;">This is a red paragraph.</p>

<p title="I'm a tooltip">This is a paragraph.</p>

<h1 style="font-size:60px;">Heading 1</h1>

Un paragraf începe întotdeauna pe o linie nouă și este de obicei un bloc de text.

<p>This is<br>a paragraph<br>with line breaks.</p>

Oh, bring back my Bonnie to me.

Referințe pentru etichete HTML:

property este o proprietate CSS, value este o valoare CSS.

<h1 style="color:blue;">This is a heading</h1>

<h1 style="font-family:verdana;">This is a heading</h1>

<h1 style="font-size:300%;">This is a heading</h1>

<h1 style="text-align:center;">Centered Heading</h1>

FORMATAREA TEXTULUI HTML

Elemente HTML <b> și <strong>

<b>This text is bold</b>

Elemente HTML <i> și <em>

<i>This text is italic</i>

Element HTML < small>

<small>This is some smaller text.</small>

<p>Do not forget to buy <mark>milk</mark> today.</p>

Elementul HTML <del>

<p>My favorite color is <del>blue</del> red.</p>

Elementul HTML <ins>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Elementul HTML <sub>

<p>This is <sub>subscripted</sub> text.</p>

Elementul HTML <sup>

<p>This is <sup>superscripted</sup> text.</p>

În acest capitol vom parcurge elementele HTML <blockquote>, <q>, <abbr>,

Eticheta HTML <q> pentru citate scurte

Eticheta HTML <abbr> pentru abrevieri

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

Eticheta HTML <cite> pentru titlul lucrării

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

Elemente de citare HTML

Observați că există un semn de exclamare (!) în eticheta de început, dar nu și în

<p>This is a paragraph too.</p>

<<p>This  is a paragraph.</p>

HTML acceptă 140 de nume de culori standard.

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<h1 style="color:Tomato;">Hello World</h1>

<h1 style="border:2px solid Tomato;">Hello World</h1>