HTML

• În anii ’60, Communications Association (GCA) a fost prima organizaţie

care a studiat sistematic problema independenţei documentelor de
platformă şi a codării generice bazate pe etichete, prin intermediul
proiectului “GenCode”.

• După această primă încercare, a venit rândul celor de la IBM să facă

următorul pas în aceste direcţii, care s-a materializat prim limbajul
GML(Generalized Markup Language), creat de Charles Goldfarb,
Edward Mosher, şi Raymond Lorie.

• Se poate observa că literele ce formează prescurtarea numelui acestui

limbaj concid cu iniţialele numelor creatorilor săi.

• În 1980 ANSI (American National Standards Institute) a creat o variantă

a acestui limbaj numită SGML (Standard Generalized Markup
Language), care a fost adoptată imediat de departamentul apărării din
SUA şi de asociaţia editorilor americani (AAP).
• În 1986, organizaţia International Standards Organization
(ISO) a ratificat standardul SGML (ISO 8879:1986).

• În 1980 Tim Berners-Lee, angajat al CERN (European

Laboratory for Particle Physics), a început să lucreze la un
sistem independent de platformă care să poată gestiona o
varietate de documente şi date şi care să fie uşor de folosit.

• Ulterior, Anders Berglund a dezvoltat un sistem de publicare

pentru a testa SGML.

• Astfel, Berners- Lee şi Berglund au creat tipul de document

SGML pentru documente hypertext—compact şi efficient—
numit HTML (Hypertext Markup Language).
• Elementele de bază ale limbajului SGML au fost
moştenite în limbajul HTML.
• Creatorii de documente HTML nu trebuie să-şi scrie
singuri gramaticile documentelor, acestea fiind prescrise
în DTD-urile HTML.
• Pentru a reduce “un SGML atât de mare la un Web atât
de mic” a fost nevoie de o serie de simplificări majore,
astfel născându-se un alt limbaj: XML (eXtended Markup
Language).
• Limbajul XML, spre deosebire de HTML foloseşte la
maximum toate avantajele sale de limbaj structural şi
reprezintă o variantă intermediară între SGML şi HTML.
• Explozia utilizării internetului a luat amploare, după ce s-
a definit protocolul Hypertext Transfer Protocol (HTTP)
pentru a guverna transferul de documente.
• Dintr-un anumit punct de vedere, HTML a fost un pas înapoi
deoarece la crearea sa au fost încălcate o serie de principii.

• Dezavantajul major al acestui limbaj în raport cu alte limbaje

de tip markup constă în principal în faptul că este utilizat un
singur tip de document care descrie şi structura şi aspectul
documentului, supraîncărcându-şi etichetele.

• HTML se bucură de îngăduinţa browserelor şi a motoarelor

de căutare şi astfel încalcă o mulţime de reguli ale limbajelor
markup.

• Aceste standarde Web sunt reglementate de organizaţia: Web

Standards Project (WaSP) la adresa
http://www.webstandards.org.
• În 1990, documentele HTML şi toate celelalte servicii internet
erau bazate pe aplicaţii ce procesau numai text.
• În 1992, Mark Andersen, student la Univ. Illinois a creat
Mosaic—prima interfaţă grafică pentru documentele HTML.
• După terminarea facultăţii, acesta a fondat compania Netscape.
• Datorită simplităţii sale, HTML a devenit treptat foarte popular,
în prezent fiind principalul mijloc de transfer de date pe internet.
• Cel mai vechi “standard” HTML este HTML 2 şi este suportat
în prezent de aproape toate browserele.
• W3C a fost constituit in 1994 pentru a reglementa standardele
web
• HTML 2.0 a fost propus in noiembrie 1995.
• Următorul pas important a fost HTML 3 care a fost adoptat de
Netscape şi Microsoft;
• HTML 3 a devenit o recomandare oficiala a W3C (World Wide
Web Consortium) in ianuarie 1997.
• în acest standard sunt introduse multe trăsături care depăşesc
HTML standard şi care la început au fost suportate numai de
câteva browsere.
• In 2000 HTML a devenit un standard international (ISO/IEC
15445:2000).
• HTML 4.01 a fost publicat in 1999, pentru ca ulterior, in 2001
sa fie publicata o erata.
• In 2004 a fost propus primul draft al standardului HTML 5
Web Hypertext Application Technology Working Group
(WHATWG), grup care colaboreaza cu W3C din 2008.
• In ianuarie 2011 a fost propus standardul HTML 5
 Structura unui document HTML
• Documentele HTML sunt identificate prin elementul html, în
interiorul căruia se găsesc elementele head şi body.

• Elementul head conţine titlul, stilul şi funcţii JavaScript ce pot

fi utilizate în document, iar elementul body conţine corpul
documentului care va fi afişat de browser.

• Pentru ca documentul să poată fi validat de W3C, toate

exemplele vor conţine o declaraţie !DOCTYPE şi o codare a
caracterelor, ca în exemplul următor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Primul document HTML!</title>
<meta http-equiv="Content-Type" content= "text/html; charset=iso-
8859-1">
</head>
<body>
URA! Am reusit sa creez primul document HTML!
</body>
</html>
Toate documentele HTML trebuie să conţină, pe lângă o declaraţie
!DOCTYPE şi specificarea unui tip de codare a caracterelor, şi
următoarele elemente: html, head, title şi body.
Acestea definesc conţinutul minimal al unui document HTML.
Elementul meta este implementat pentru a specifica natura informaţiilor
conţinute în documentul HTML.
Acesta poate să apară în secţiunea head a documentului HTML şi suportă
următoarele atribute:

• name identifică numele unei proprietăţi

• content specifică tipul conţinutului documentului

• http-equiv are o semnificaţie specială pentru HTTP şi poate înlocui

atributul name.
o Dacă acestui atribut i se dă valoarea pragma, atunci browser-ul va dezactiva
cache-ul.
o Pentru a actualiza o pagină la fiecare 2 secunde se poate scrie codul:

<meta http-equiv="refresh" content="2; url=thispage.html">

• scheme specifică o serie de informaţii suplimentare despre datele meta.

• Caracterele HTML sunt Unicode, dar documentul poate fi transmis
utilizând orice codare, dacă serverul şi clientul utilizează aceeaşi
codare şi dacă aceasta se poate converti la Unicode.

• Un document HTML poate identifica codarea specificând parametrul

charset în header-ul Content-Type al HTTP, sau mai exact, în
elementul http-equiv meta:

<meta http-equiv="Content-Type" content= "text/html; charset=ISO-8859-1">

• Pentru a face ca o anumită pagină să poată fi găsită de motoarele de

căutare se dau valorile keywords sau description pentru atributul
name, ca în exemplul următor:

<meta name="keywords" content="PhD, matematica, informatică, profesor">

<meta name="description" content=" Tehnologii Web ">
•Din contră, pentru a face ca o anumită pagină să nu poată fi găsită şi indexată de
motoarele de căutare, se setează atributul name cu valoarea robots şi atributul
content cu valorile noindex şi nofollow, ca în exemplul următor:

<meta name="robots" content="noindex,nofollow">

•Motorul de căutare Google recunoaşte şi atributul googlebot al elementului name.

<meta name="googlebot" content="noarchive">

<meta name="robots" content="noindex, nofollow">

•Unele elemente HTML permit ataşarea de atribute, pentru a-şi rafina specificarea.
• De exemplu, elementul image are atribute care specifică imaginea care va fi
afişată, dimensiunile ei şi textul alternativ care va fi utilizat pentru aceasta.
•Atributele sunt plasate între apostroafe sau ghilimele, indiferent de
tipul datelor lor.

•Exemplul următor defineşte o imagine numită poza.jpg care este în

directorul imagini.

•Poza are lăţimea de 10 pixeli şi înâlţimea de 10 de pixeli

<img src="/imagini/poza.jpg" alt="poza" width="10" height="10">

•Este recomandată numai utilizarea ghilimelelor, ca în exemplul

anterior.

•Minimalizarea atributelor este ilegală în HTML, toate atributele

trebuind să aibă o valoare.
• Pentru a specifica un fundal pentru document, în general se utilizează
următoarele două atribute ale elementului body:

• background specifică o imagine care va fi fundalul paginii:

<body background="poza.jpg">
• bgcolor specifică o culoare de fundal a paginii:
<body bgcolor="blue">

• Pentru a utiliza o melodie ca fundal sonor pentru o pagină Web, se

implementează elementul bgsound, care este recunoscut numai de
Internet Explorer.
• Acest element suportă următoarele atribute:

• src specifică adresa fişierului audio (.wav); prezenţa acestui atribut este
obligatorie.
<bgsound src="audio/mozart.wav">

• loop specifică de câte ori va fi repetată melodia.

<bgsound src="audio/mozart.wav" loop=10>
 Organizarea fişierelor HTML în
interiorul unui site Web
• Pagina de bază a unui site Web se mai numeşte şi “home
page” şi deobicei este numită index.html.
• Atunci când este dată o adresă (de exemplu www.uaic.ro
sau www.google.com) fără a specifica exact documentul
HTML, browser-ul va încerca să deschidă fişierul
index.html al site-ului.
• Pe lângă documentul root index.html, un site mai conţine
şi alte fişiere .html sau .asp, etc.
• Orice site are o structură arborescentă, ca în figura
urmatoare.
 Încărcarea unui site pe un server
• Există o mulţime de posibilităţi de a încărca un site pe un
server.
• Cea mai simpla este utilizand “Total Commander”.
• De regulă, înainte de a transfera site-ul, trebuie creat pe server
un director public_html.
• După ce aţi creat acest director, alegeţi opţiunea FTP Connect
din meniul Net al programului “Total Commander”.
• În fereastra de dialog care va apare veţi apăsa butonul “New
Connection”.
• Astfel se va deschide o fereastră de dialog în care va trebui să
completaţi următoarele câmpuri:
•Session specifică numele conexiunii(puteţi utiliza ce nume doriţi)

•Port specifică adresa serverului(ex. ftp.math.uaic.ro )

•User name specifică numele de utilizator pe care îl obţineţi de la administratorul

serverului pe care aveţi cont

•Password specifică parola contului respectiv ( nu se recomandă completarea

acestui câmp în acest moment)

După ce aţi completat aceste câmpuri apăsaţi butonul OK pentru a închide

fereastra şi apoi apăsaţi butonul Connect pentru a realiza conexiunea cu server-ul.

După ce aţi realizat conexiunea şi v-aţi autentificat, puteţi începe să transferaţi

fişiere pe/de pe server.

După ce aţi încărcat pagina pe server, alegeţi opţiunea Disconnect a meniului Net,
pentru a închide conexiunea cu serverul.
 Elemente lista
Listele sunt o modalitate bună de a obţine informaţii structurate.
Există trei modalităţi principale de a utiliza liste într-un document HTML: liste
neordonate, liste ordonate şi liste de definiţie.
Elementele listă pot avea stiluri care să le modifice aspectul.

1. Liste neordonate

Elementul ul este utilizat pentru a crea o listă neordonată (o listă de articole care
nu are o ordine specificată, nu o listă indexată).
Articolele din listă sunt definite cu elementul li, ca în exemplul următor:

<ul>
<li>Liste neordonate</li>
<li>Liste ordonate</li>
<li>Definiţii</li>
</ul>
cu output-ul:
Browserele marchează automat cu un disc fiecare articol al unei liste.
Netscape recunoaşte şi un atribut type pentru elementele ul şi li, utilizat
pentru a specifica marker-ul listei şi respectiv al unui anumit articol din
listă.
Acest atribut poate avea valorile: disc, circle sau square.

2 Liste ordonate

Elementul ol este utilizat pentru a crea o listă ordonată(indexată).

În acest caz, articolele din listă sunt definite cu elementul li, ca în
exemplul următor:

<ol>
<li>Liste noordonate</li>
<li>Liste ordonate</li>
<li>Definiţii</li>
</ol>

cu output-ul:
În mod normal, browserele numerotează automat articolele ordonate începând cu
cifra 1.
Netscape şi Internet Explorer recunosc atributul start care poate fi utilizat cu
elementul ol.
Pentru a începe indexul listei de la 5, vom scrie:

<ol start=5>
<li> Acest articol are indexul 5.
<li> Acesta are numărul 6.
<li> ş.a.m.d.
</ol>

cu output-ul:
• Browserele numerotează implicit listele ordonate utilizând numerale
arabe.
• Ca şi în cazul listelor neordonate, Netscape şi Internet Explorer recunosc
şi atributul type care permite stilul indexului listei
• Atributul type poate avea următoarele valori. “A” pentru un index cu
majuscule, “a” pentru un index cu litere mici, “I” pentru un index cu
cifre romane majuscule, “i” pentru un index cu cifre romane mici, sau
“1” pentru un index cu cifre arabe.
• Atributele start şi type pot fi utilizate împreună, astfel:

<ol start=8 type="i">

<li> Acest articol are indexul 8 roman.
<li> Acesta are indexul 9.
<li> s.a.m.d.
</ol>

cu output-ul:
•Un posibil exemplu de implementare a atributului type ataşat elementului li, este:

<ol>
<li type=A>Acest articol are indexul A
<li type=a>Schimbarea tipului nu modifică ordinea
<li> &lt;-- Omiterea specificării tipului determină aplicarea tipului implicit.
<li type=I> Acest articol are indexul scris cu numerale romane majuscule
<li type=i> Acest articol are indexul scris cu numerale romane
<li type=1>S-a revenit la stilul implicit.
</ol>

cu output-ul:
• Netscape şi Internet Explorer recunosc şi atributul value care poate fi utilizat
pentru a schimba numărul unui anumit articol dintr-o listă şi numerele celor care
îl urmează.
• Acest atribut se poate utiliza numai cu un element li în interiorul unei liste
ordonate.
• Un posibil exemplu de implementare a acestui atribut este:

<ol>
<li>Primul articol
<li>Articolul cu indexul 2
<li value=9> Articolul cu indexul 9
<li>ş.a.m.d.
</ol>

cu output-ul:
3 Liste de definiţii

Pentru a crea o listă de definiţii este utilizat elementul dl.

Listele de definiţie constau în perechi Termen/Definiţie.
Termenii sunt definiţi cu elementul dt şi definiţiile cu elementul dd, astfel:

<dl>
<dt><strong>Liste neordonate</strong></dt>
<dd>Liste care nu au index</dd>
<dt><strong>Liste ordonate</strong></dt>
<dd>Liste care au index</dd>
<dt><strong>Definiţii</strong></dt>
<dd> Liste Termen/Definiţie</dd>
</dl>

Codul de mai sus va genera output-ul:

 Tabele în documente HTML
Elementul table poate fi utilizat pentru a afişa date tabelate, organizate în linii şi coloane.
Codul care generează structura de bază a unei tabele, este:

<table border=1>
<tr>
<td>linia 1 coloana 1</td>
<td>linia 1 coloana 2</td>
<td>linia 1 coloana 3</td>
</tr>

<tr>
<td>linia 2 coloana 1</td>
<td>linia 2 coloana 2</td>
<td>linia 2 coloana 3</td>
</tr>

<tr>
<td>linia 3 coloana 1</td>
<td>linia 3 coloana 2</td>
<td>linia 3 coloana 3</td>
</tr>

</table>

cu output-ul:
Fiecare linie este definită de etichetele „Table Row” <tr> ...</tr> şi celulele din interiorul fiecărei
linii sunt definite de etichetele „Table Data” <td>...</td>.
În interiorul elementului td se poate utiliza atributul align care controlează alinierea articolelor în
interiorul unei celule prin valorile sale:

Aliniere orizontală:

<td align=left> aliniază toate elementele în partea stângă a celulei ( setarea implicită)

<td align=right> aliniază toate elementele în partea dreaptă a celulei

<td align=center> aliniază toate elementele în centrul celulei

Aliniere verticală:

<td valign=top> aliniază toate elementele în partea superioară a celulei

<td valign=bottom> aliniază toate elementele în partea inferioară a celulei

<td valgn=middle> aliniază toate elementele în mijlocul celulei (setarea implicită)

Aceste atribute se pot combina astfel:

<td align=left valign=bottom>

În general browserele setează mărimea unei tabele astfel încât toate
elementele să fie vizibile.
Pentru a mări dimensiunile unei tabele peste aceste dimensiuni implicite, se
poate utiliza atributul width, care are valoarea dată în pixeli sau în procente
relative la dimensiunea ecranului:

<table width=400>
<table width="50%">
Elementul table suportă următoarele atribute:

• border specifică lăţimea cadrului tabelei (liniei din jurul tabelei) în pixeli.
Specificarea unei valori a acestui atribut permite distingerea între celulele
tabelei şi setarea acestei valori la zero face invizibil cadrul tabelei.

• cellpadding specifică distanţa dintre frontiera celului şi conţinutul acesteia.

Valoarea poate fi specificată în pixeli, sau procente.
Dacă este specificată în pixeli, padding-ul orizontal şi vertical au aceeaşi
valoare şi dacă este specificată în procente, sus şi jos au acelaşi padding şi
stânga, dreapta au acelaşi padding în funcţie de spaţiul orizonal şi vertical
disponibil.
• cellspacing specifică mărimea spaţiului dintre celule şi din exteriorul cadrului tabelei

• frame specifică care părţi ale cadrului ce înconjoară tabela sunt vizibile; valorile posibile
sunt:

– void – nici o parte (valoarea implicită)

– above – numai partea superioară
– below – numai partea inferioară
– hsides – numai părţile inferioară şi superioară
– vsides – numai părţile din stânga şi dreapta
– lhs – numai partea stângă
– rhs – numai partea dreaptă
– box – toate cele patru părţi
– border – toate cele patru părţi

• rules specifică exact care linii sunt desenate între celulele unei tabele şi are ca valori
posibile:

– none – nici o linie (valoarea implicită)

– groups – liniile care se desenează sunt numai între grupuri (thead, tfoot, tbody, colgroup, col)
– rows – liniile apar numai între rânduri (linii)
– cols – liniile apar numai între coloane
– all – liniile apar între toate liniile şi coloanele

• width specifică lăţimea în pixeli sau procente; dacă acest atribut lipseşte, lăţimea este
determinată de browser
Liniile tabelei

Toate tabelele trebuie să aibă cel puţin o linie.

Liniile unei tabele se specifică utilizând elementul tr.
O etichetă de final este opţională în HTML şi obligatorie în
XHTML.
Prima linie poate conţine un set opţional de elemente th (table
header), sau un set de elemente td (table data).
Celelalte linii pot avea o mulţime de elemente td.

Coloanele tabelei

Elementele th şi td se utilizează pentru datele celulelor dintr-o

coloană a unei tabele.
O tabelă poate specifica o linie numai cu elementul th, şi toate
liniile pot conţine elementul td.
Elementul td suportă următoarele atribute principale:

• abbr este utilizat pentru a furniza o abreviere pentru conţinutul

unei celule lungi.

• rowspan determină numărul de linii pe care le conţine celula.

Valoarea implicită a acestui atribut este 1.
Dacă are valoarea 0, celula va conţine toate liniile de la cea
curentă până la sfârşitul coloanei.

• colspan determină numărul de coloane pe care le conţine o

celulă.
Valoarea implicită a acestui atribut este 1.
Dacă are valoarea 0, atunci celula va conţine toate coloanele de
la cea curentă până la sfârşitul liniei.
O posibilă implementare a atributului colspan ar putea fi:

<table border>
<tr>
<td align=left colspan=2>linia 1 col 1-2</td>
<td>linia 1 coloana 3</td>
</tr>
<tr>
<td>linia2 2 coloana 1</td>
<td>linia 2 coloana 2</td>
<td>linia 2 coloana 3</td>
</tr>
<tr>
<td>linia 3 coloana 1</td>
<td>linia 3 coloana 2</td>
<td>linia 3 coloana 3</td>
</tr>
</table>
cu output-ul:
O posibilă implementare a atributului rowspan ar putea fi:
<table border>
<tr>
<td align=left colspan=2>linia 1 col 1-2</td>
<td>linia 1 coloana 3</td>
</tr>
<tr>
<td>linia2 2 coloana 1</td>
<td valign=top rowspan=2>linia 2 coloana 2</td>
<td>linia 2 coloana 3</td>
</tr>
<tr>
<td>linia 3 coloana 1</td>
<td>linia 3 coloana 3</td>
</tr>
</table>
cu output-ul:
Să considerăm în continuare şi un exemplu de tabelă completată cu date, generată de codul următor:

<table border>
<tr>
<th>Numele</th>
<th>Grupa</th>
<th>Nota obţinută</th>
</tr>
<tr>
<td>Ionescu</td>
<td align=center>101</td>
<td align=center>10</td>
</tr>
<tr>
<td>Popescu</td>
<td align=center>102</td>
<td align=center>9</td>
</tr>
<tr>
<td>Georgescu</td>
<td align=center>101</td>
<td align=center>10</td>
</tr>
</table>
cu output-ul:
Modalitatea de ataşare a atributelor border, cellpadding şi cellspacing la
elementul table este:

<table border=X cellpadding=Y cellspacing=Z>

Pentru a colora textul din interiorul unor celule se poate utiliza codul:

<tr>
<th><font color=blue>Studenti</font></th>
<th><font color=red>Nota</font></th>
<th><font color=navy>Data</font></th>
</tr>

Elementul caption este utilizat pentru a descrie natura unei tabele.

Acest element trebuie introdus imediat după eticheta de start a unei tabele.
O tabelă poate conţine numai un singur element caption.
Liniile unei coloane pot fi grupate utilizând elementele thead, tfoot, şi tbody.
Mai exact, elementele thead, şi tfoot se utilizează pentru a descrie coloanele
tabelei iar elementul tbody conţine liniile corpului tabelei.
Elementul tfoot trebuie să apară înaintea elementului tbody.
<table summary="Această tabelă reprezintă catalogul grupei 101">
<caption>Catalogul grupei 101</caption>
<thead>
<tr>
<th>Nume</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ionescu</td>
<td>10</td>
</tr>
<tr>
<td>Popescu</td>
<td>9</td>
</tr>
<tr>
<td>Georgescu</td>
<td>10</td>
</tr>
<tr>
<td>Ionescu</td>
<td>9</td>
</tr>
</tbody>
</table>

cu output-ul:
Există şi posibilitatea de a colora tabele, linii sau chiar celule individuale ale
tabelelor. Pentru aceasta se scrie:

<table>
<th bgcolor=yellow><font color=red>Text scris cu rosu pe fond
galben</font></th>
</table>

cu output-ul:

Tot în acest sens, mai există şi atributele bordercolor, bordercolorlight, şi

bordercolordark – recunoscute numai de Internet Explorer, care pot fi
utilizate pentru a specifica culoarea frontierei unei tabele, dacă este afişată.
Pentru a seta o anumită imagine ca fundal al unei tabele se implementează
codul:

<table background=”image.gif”>
 Legături
1 Legături între documente

Cea mai semnificativă trăsătură a Web-ului este posibilitatea de a face legături între
documente.
Elementul utilizat pentru a lega documente se numeşte anchor.
Legăturile nu pot fi imbricate(nested).
Atributul href este utilizat cu elementul anchor pentru a specifica adresa destinaţiei
ancorei utilizând o adresa:

<a href="http://www.uaic.ro">Universitatea “Al. I. Cuza”</a>

URL (Uniform Resource Locator) este ceea ce utilizează WWW pentru a găsi o adresă
de fişiere şi documente în Internet.
În general, în cazul unui browser o URL este afişată în partea superioară a ferestrei şi
include:

• un identificator al tipului serverului de internet

• o adresă de internet
• o cale spre un anumit articol de interes
Structura unei URL este:

type://adresă.de.internet/director/sub-director/.../nume_de_fişier

unde "type" indică tipul serverului de internet accesat; cele mai importante valori ale sale sunt:

• http (HyperText Transfer Protocol) şi semnifică un server web

• ftp semnifică un site FTP (File Transfer Protocol) anonim

• telnet lansează o sesiune telnet care gestionează o conectare cu un alt computer

• file reprezintă un fişier

type este întotdeauna urmat de simbolul "://" şi de o adresă de internet, care are următoarea
structură:

host.domeniu.domeniu
De exemplu:

math.uaic.ro 122.23.1.34 unibuc.ro

Dacă o URL este la nivelul cel mai înalt (home page), atunci aceasta este terminată cu un slash
"/". De regulă, orice adresă este “case sensitive”.
Atunci când se specifică o adresă absolută, protocolul http trebuie furnizat la
începutul adresei, împreună cu numele domeniului şi calea către documentul
HTML, astfel:

<a href="http://www.math.uaic.ro">Facultatea de Matematică</a>

<a href=" http://www.math.uaic.ro/~razvan/"> Răzvan Răducanu</a>

cu output-ul:

Acest cod poate fi gândit ca o prescurtare astfel: “a” pentru anchor link şi "href"
pentru "hypertext reference".
Pentru a seta culorile legăturilor se pot utiliza atributele: link( pentru legăturile
nevizitate), vlink (pentru legăturile vizitate) şi alink (pentru legăturile active);
aceste atribute se ataşează elementului body al documentului HTML astfel:

<body link=”blue” vlink=”navy” alink=”red”>

<a href="vita.html">Curriculum Vitae</a> <br>
<a href="răzvan/publications.html">Lista publicaţiilor</a> <br>
<a href="contact.html">Adresa</a> <br>
…..
cu output-ul:
O adresă locală se referă la un document aflat pe acelaşi server, iar o adresă relativă
este o URI care este specificată relativ la documentul curent.
Exemplul următor specifică diverse pagini relative la pagina curentă:
Următoarea legătură este în directorul curent <br>
<a href="vita.html">Curriculum Vitae</a> <br>
Următoarea legătură este în directorul răzvan, care se află în directorul curent <br>
<a href="răzvan/publications.html">Lista publicaţiilor</a> <br>
Următoarea legătură are target-ul în directorul părinte <br>
<a href="../books.html">Cărţi</a> <br>
Următoarea legătură este într-un director absolut <br>
<a href="/studenţi/ODBC.html">Baze de date</a> <br>

cu output-ul:
2 Legături în interiorul unei pagini

Legăturile sunt specificate în interiorul unei pagini în două etape: mai întâi prin adăugarea
unui identificator de fragment la URI, şi apoi definind un element cu un atribut name.
Un identificator de fragment este format dintr-un # urmat de un nume de identificator.
Destinaţia poate fi specificată utilizând sau atributul name sau atributul id în HTML.

<a name="Vita">Curriculum Vitae</a>

În XHTML atributul name este depreciat şi se recomandă utilizarea atributului id.
Unele browsere nu suportă atributul id, aşa că ar trebui specificate ambele, ca în exemplul
care urmează.
Pentru a face o legătură în interiorul unei pagini, în locul unde va fi legătura vom scrie:

<p>
<a href="#link1">Textul de legătură</a>
</p>
<p> ... conţinutul documentului ...</p>
<p>

iar în locul la care va pointa legătura, se va scrie:

<a id="link1" name=”link1">Target-ul legăturii</a>

Conţinutul target-ului!
</p>
Deoarece elementul paragraf suportă atributul id, o metodă mai bună de a
realiza legături în interiorul aceleiaşi pagini ar fi să mutăm atributul id la
elementul paragraf, şi astfel să eliminăm elementul ţintă anchor.
Deoarece atributele id şi name au acelaşi namespace, pot să apară conflicte
între name-uri şi id-uri.
Pentru a le evita o idee ar fi să se utilizeze id pentru elementul paragraf, şi
name pentru elementul anchor.
Astfel, pentru a face o legătură în interiorul unei pagini, în locul unde va fi
legătura vom scrie:

<p>
<a href="#link2">Alt text de legătură</a>
</p>
<p> ... conţinutul documentului ...</p>

iar în locul la care va pointa legătura, se va scrie:

<p id="link2">
Conţinutul target-ului!
</p>
Atributul target al etichetei a permite redirectarea conţinutului target-ului unei
legături pentru a fi încărcată şi a fi afişată într-o anumită fereastră, diferită de
cea care conţine legătura.
Pentru aceasta, atributul target al etichetei are ca valoare numele noii ferestre:

<a href=”studenţi.html” target=”ODBC”> Legătură la Baze de date</a>

Atributul target poate avea următoarele valori predefinite:

„_blank”(încărcarea noii pagini are loc într-o fereastră nouă),
„_parent”(încărcarea are loc în fereastra părinte), „_self”(încărcarea are loc în
aceeaşi fereastră”, şi „_top” (încărcarea are loc în zona „top” a ferestrelor
curente).

Elementul a suportă şi atributul title care poate fi utilizat cu legături pentru a

clarifica scopul legăturii.
Acest atribut permite specificarea unui titlu pentru documentul la care
pointează legătura, iar informaţia poate fi afişată ca un tooltip:

<a href="tutorials.html"
title="A list of tutorials available from this site">Tutorials</a>
 Frame-uri

• Un document HTML ce conţine frame-uri este format dintr-un

document de bază sau “master” – care defineşte harta site-ului
şi o serie de alte documente HTML ce definesc conţinutul
frame-urilor sau conţinutul zonelor definite în documentul
“master”.

• Forma generală a unui document HTML care conţine frame-

uri este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frames</title>
</head>

<frameset rows/cols="x,y,...z">
<frame src="frame1.html">
<frame src="frame2.html">
:
:
<frame src="frameN.html">
</frameset>
<noframes>
Acest text este afişat de browserele care nu suportă frame-uri.
</noframes>
</html>
Fiecare frame defineşte o serie de linii sau de coloane utilizând una din următoarele două
sintaxe:

<frameset rows=...>

sau

<frameset cols=...>

Valorile x, y şi z specifică dimensiunile ocupate de fiecare linie sau coloană.

Acestea pot fi date în procente din dimensiunea ferestrei browser-ului (COLS =10%, 30%,
60%) sau în valori absolute în pixeli (COLS= 100, 300, 80, 200).
Numărul de articole din această listă definită cu frameset specifică numărul liniilor şi
coloanelor documentului HTML.
Fiecare linie şi coloană definită în această listă trebuie asociată imediat cu un document
HTML, utilizând sintaxa:

<frame src=...>

Un browser care nu suportă frame-uri va afişa numai textul cuprins între etichetele:

<noframes> ... </noframes>.

În continuare vom prezenta o serie de layout-uri de frecvent utilizate în
documentele HTML:

1. implementarea layout-ului următor:

poate fi generată utilizând dimensiuni absolute de codul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frames1.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<!-- se definesc celke 2 linii-->

<frameset rows="80,*" frameborder="YES" border="2" framespacing="0">
<frame src="linia1.htm" name="topFrame" scrolling="NO" noresize >
<frame src="linia2.htm" name="mainFrame">
</frameset>

<noframes><body>
Acest text este afişat de browserele care nu suportă frame-uri.
</body></noframes>
</html>

sau, dacă se utilizează dimensiuni relative, de codul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frames1.2</title>
</head>

<!-- se definesc cele 2 linii-->

<frameset rows="20%,80%">
<frame src="linia1.html">
<frame src=”linia2.html">
</frameset>

<noframes>
Acest text este afişat de browserele care nu suportă frame-uri.
</noframes>
</html>
2. implementarea layout-ului următor:

poate fi generată utilizând dimensiuni absolute de codul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frames2.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<!-- se definesc cele 2 coloane-->

<frameset cols="80,*" frameborder="YES" border="2" framespacing="0">
<frame src="coloana1.htm" name="leftFrame" scrolling="NO" noresize>
<frame src="coloana2.htm" name="mainFrame">
</frameset>

<noframes><body>
Acest text este afişat de browserele care nu suportă frame-uri.
</body></noframes>
</html>

sau, dacă se utilizează dimensiuni relative, de codul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frames2.2</title>
</head>

<!-- se definesc cele 2 coloane-->

<frameset cols="20%,80%">
<frame src="coloana1.html">
<frame src="coloana2.html">
</frameset>

<noframes>
Acest text este afişat de browserele care nu suportă frame-uri.
</noframes>
</html>
3. implementarea layout-ului următor:

poate fi generată utilizând dimensiuni absolute de codul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frames3.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<!-- se definesc cele 3 linii-->

<frameset rows="80,*,80" framespacing="2">

<!-- linia1 are o singură coloană -->

<frame src="linia1.htm" name="topFrame" scrolling="NO" noresize>

<!-- linia2 are două coloane -->

<frameset cols="20%, 80%" >
<frame src="linia2col1.htm" name="mainFrame">
<frame src="linia2col2.htm" ></frameset>

<!-- linia3 are o singură coloană -->

<frame src=”linia3.htm" name="bottomFrame" scrolling="NO" noresize>
</frameset>

<noframes><body>
Acest text este afişat de browserele care nu suportă frame-uri.
</body></noframes>
</html>

sau, dacă se utilizează dimensiuni relative, de codul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frames3.2</title>
</head>

<!-- se definesc cele 3 linii-->

<frameset rows ="10%,80%,10%”>

<!-- linia1 are o singură coloană -->

<frame src="linia1.html">

<!-- linia2 are două coloane -->

<frameset cols="25%,75%>
<frame src="linia2col1.html">
<frame src="linia2col2.html">
</frameset>

<!-- linia3 are o singură coloană -->

<frame src="linia3.html">
</frameset>
</frameset>
</frameset>

<noframes>
Acest text este afişat de browserele care nu suportă frame-uri.
</noframes>
</html>
Implementati utilizand dimensiuni relative si absolute layout-urile: