Inițiere în limbajul HTML

Tatiana Pașa
USM, Departamentul Informatică
Tema 2
 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). Scopul
HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele
ș.a.m.d. – decât descrierea semanticii documentului.

HTML - o formă de marcare orientată către prezentarea documentelor text pe o singura pagină,
utilizând un software (browsere).
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 se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP
sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează
pagini HTML.

HTML - 1991, HTML 2.0 – 1995, HTML 3.2 – 1997, HTML 4.01 – 1999, XHTML - 2000, HTML5 - 2014
 Hipertext
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.

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.
Hipertext (1945 ) - document care conține, text, grafică, imagini, animație, înregistrări audio, legături către alte
documente. Un hipertext poate fi gândit într-un spațiu cu mai multe dimensiuni, fiecare axă reprezentând un alt
mijloc de comunicare: text, audio, video etc.

Hipertextul permite părăsirea modului tradițional de citire a unui document: linie după linie, pagină după pagină
etc. Legăturile activate produc o desfășurare a documentului după nevoile utilizatorului plus posibilitatea de
păstrare a atenției cititorului prin utilizarea legăturilor grafice, audio etc.
Structura unui proiect

Se vor folosi adrese relative pentru a accesa

fâșiere din mape:
Din fâșierul index.html accesăm o imagine
din mapa Imagini:
Imagini/img.png
Din fâșierul index.html accesăm un fâșier din
mapa JS:
JS/js1.js
Din mapa CSS accesăm o imagine din mapa
Imagini:
../Imagini/img1.png

Adrese absolute se vor utiliza când avem

elemente care se păstrează direct pe server
Web.
 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: Comentarii HTML:
• &lt; reprezintă < <!– Acesta e un comentariu -->
• &gt; reprezintă > - nu are efect în tagul title și style
• &amp; reprezintă &
• &apos; reprezintă '
• &quot; reprezintă "
• &nbsp; reprezintă un “spaţiu alb” – în
HTML mai multe spaţii simple sunt tratate
ca un singur spaţiu
 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>
✓ Tag-ul <body> este utilizat pentru a defini conţinutul corpului paginii.
Continutul
</body> ✓ Tag-ul body este un element de tip container care conţine
</html> elementele care definesc conţinutul paginii: text, imagini, tabele,
hyperlink-uri etc.
 Structura documentului 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.

<html>
<head>
<title> Adresa</title>
</head>
<body>
Adresa institutiei noastre
</body>
</html>
 Structura documentului HTML
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.

Author în meta: se dă numele celui ce a realizat websitul.

<meta name="author" content="Tatiana Pasa " />

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 "
/>
Revised în meta: pentru a specifica ultima actualizare a websitului.
<meta name="revised" content="1/09/20019" />
 Structura documentului HTML
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>Introducere in 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>
 Structura documentului HTML
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 Fără viewport Cu viewport
funcție de dispozitiv).
initial-scale=1.0 setează nivelul de zoom inițial când prima
pagină este încărcată de browser.
 Structura documentului HTML
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"/>
 Structura documentului HTML

O iconiță pentru site reprezintă un mod de

promovare a unei imagini pentru site. Este <head>
foarte des folosită această metodă. Această <link rel=”shortcut icon” href=”im3.ico”/>
apariție a logo-ului în câmpul de adresă, dă o </head>
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ă.

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
 Structura documentului HTML
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, Poziţionarea conţinutului paginii Web faţă de
gray, green, lime, maroon, navy, olive, purple, red, marginile ferestrei browserului se face cu
silver, teal, white si yellow. ajutorul a două atribute ale etichetei <body>:
• Prin constructia #rrggbb se pot defini astfel 65536 • leftmargin (distanţa dintre marginea stângă
de culori, unde r (red), g (green), sau b (blue) sunt a ferestrei browserului şi marginea stângă a
cifre hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, conţinutului paginii );
6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F. • topmargin (distanţa dintre marginea de sus
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = a ferestrei browserului şi marginea de sus a
valoare3> conţinutului paginii );
Ex: <body bgcolor="orange" text="red" link="blue"
alink="green“ vlink="black"> </body> Ex 17.html
Tabele de culori
Tabele de culori
 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
 Blocuri de text 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> <q>…</q> - citat scurt, ex. mai jos
</html>
 Blocuri de text HTML
<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
 Blocuri de text 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
 Blocuri de text 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>
 Blocuri de text 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>
<h5> Titlu de marime 5 aliniat la stanga (implicit) </h5>
<h6> Titlu de marime 6 aliniat la stanga (implicit) </h6>
</body>
</html>
 Blocuri de text 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.
<center>…</center> - aliniază centrat toate elementele pe care le conține.
<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>
 Blocuri de text HTML

<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>
 Blocuri de text 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>
 Blocuri de text HTML
<div>...</div> - modalitatea cea mai eficientă de <html>
delimitare și de formatare a unui bloc de text . <head>
• Pentru stabilirea caracteristicilor unui bloc <title> Blocul <div></title>
</head>
<div> este align: left, center, right.
<body>
• Un bloc <div>...</div> poate include alte Aceasta linie este o linie simplă.
subblocuri iar alinierea precizată de atributul <div align="right">
align al blocului are efect asupra tuturor Bloc aliniat pe dreapta.Bloc aliniat pe dreapta.<br>
subblocurilor incluse în blocul <div>; Bloc aliniat pe dreapta.Bloc aliniat pe dreapta.<br>
• Un bloc <div>...</div> admite atributul nowrap Bloc aliniat pe dreapta.Bloc aliniat pe dreapta.<br>
ce interzice întreruperea rândurilor de browser. </div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body>
</html>
 Blocuri de text HTML
<abbr>...</abbr> - prescurtare. <HTML>
<HEAD>
<acronym>...</acronym> - acronim.
<TITLE>Abrevieri si acronime</TITLE>
</HEAD>
Atributul title (pentru tag-ul abbr și
Abreviere:
acronym) este folosit pentru a afişa
<abbr title=" United Nations ">UN</abbr> <br>
denumirea completă atunci când
Acronim:
mouse-ul este deasupra elementului.
<acronym title=" World Wide Web">WWW</acronym> <br>
<del>2018</del>
<del>...</del> - text șters
<ins>2019</ins>
<ins>...</ins> - text înserat </BODY>
</HTML>
<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 SIZE=2 FACE=COURIER NEW> font COURIER NEW cu dimensiune 2 </font></p>
<p> <font SIZE=3 FACE=COURIER NEW> font COURIER NEW cu dimensiune 3 </font></p>
<p> <font SIZE=4 FACE=COURIER NEW> font COURIER NEW cu dimensiune 4 </font></p>
<p> <font SIZE=5 FACE=COURIER NEW> font COURIER NEW cu dimensiune 5 </font></p>
<p> <font SIZE=6 FACE=COURIER NEW> font COURIER NEW cu dimensiune 6 </font></p>
<p> <font SIZE=7 FACE=COURIER NEW> font COURIER NEW cu dimensiune 7 </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.
_... - text ca indice jos.
^... - 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_subscript <br>
Textul este scris^superscript <br>
</div>
</body>
</html>
 Spații în HTML
Indiferent câte spaţii vom introduce atunci <html>
când edităm documentul HTML, browserul le va <head>
ignora şi va afişa cuvintele cu un singur spaţiu <title>text</title>
între ele. Pentru a forţa introducerea spaţiilor </head>
suplimentare se foloseşte comanda &nbsp; (no <body>
break space). <h1 align="center">inserarea caracterelor
Comanda începe cu simbolul & (ampersand) speciale</h1><hr>
şi se termină cu ; (punct şi virgulă). <font size="2" face="arial">
Cuvintele&nbsp; &nbsp; &nbsp; din&nbsp; &nbsp;
&nbsp; acest&nbsp; &nbsp; &nbsp;
text&nbsp; &nbsp; &nbsp; sunt&nbsp; &nbsp;
&nbsp; despartite&nbsp; &nbsp; &nbsp; de&nbsp;
&nbsp; &nbsp; grupuri&nbsp; &nbsp; &nbsp;
de&nbsp; &nbsp; &nbsp; trei&nbsp; &nbsp; &nbsp;
spatii.
</font>
</body>
</html>
 Referințe HTML
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.
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.
 Referințe 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>

<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>...
<br><a id=jos href=#sus>Du-te sus</a>
<h2 id="studenti">STUDENTI</h2>
Prof. Negrea <br>...
<br><a id=jos href=#sus>Du-te sus</a>
</body>
</html>
 Referințe HTML
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>
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>
<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
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: <a href=“page.html" target="_blank">Se deschide in pagina noua</a>

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.
Exemplu: /...../HTML/HTML%20exemple/Ex%20test.html
 Referințe HTML

Download – descarcă fişierul când se face click pe link, fără a naviga

spre el și nu este suportat de toate browserele (IE).
<a href="/imagini/stefan.jpg" download>
Hreflang – se utilizează pentru a specifica în link limba documentului și
este suportat de toate browserele. Este un atribut doar informativ.
<a hreflang="id_language">
id_language corespunde codurilor limbilor conform standardelor ISO.
Câteva exemple:
en – l. engleză, md – l. moldovenească, ro – l. română, ru – l. rusă, etc.