HTML Prin Exemple - Curs

Lecţia 1: Structura unui document HTML.
Notiuni de baza.
1.1 Ce este HTML?
HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in

anul 1989, ca urmare a necesitatii de publicare a informatiilor la nivel global. Pe
parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai recent
HTML 4.01), fiecare versiune oferind noi facilitati.
Se remarca cateva trasaturi cum ar fi:
• independenta de platforma (modul de afisare al unui document este acelasi,

indiferent de computerul pe care se realizeaza afisarea);
• structurarea formatarii;
• posibilitatile hypertext (orice cuvant, imagine sau alt element al documentului
vizualizat de utilizator poate face referinta la un alt document, ceea ce
usureaza navigarea in cadrul aceluiasi document sau intre documente diferite).
HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaza
intr-un text pentru a adauga informatii despre formatare. Este derivat din SGML
(Standard Generalized Markup Language), un sistem pentru definirea tipurilor de
documente structurate, destinat sa reprezinte instante ale acestor tipuri de
documente. La baza SGML si a HTML se afla acelasi principiu: descrierea continutului
unui document se face intr-un fisier text obisnuit (ASCII). S-a urmarit ca aceste
fisiere sa fie editabile cu aplicatii software nepretentioase (ex. NotePad, WordPad).
In cadrul unui document HTML, un marcaj (tag, in limba engleza) va avea forma
<nume_marcaj> . Parantezele unghiulare sunt elementele care indica prezenta unui
marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele
mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor
scrie in marcajul de inceput:
<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>

................
</nume_marcaj>
Exista doua tipuri de marcaje:
- individuale (ex. <br>)

- perechi (ex. <p>...</p>) - de mentionat ca sfarsitul unui marcaj este
indicat prin utilizarea caracterului '/' in fata numelui de marcaj
In functie de modul de formatare a paginii, avem marcaje de tip:
- block: este afisat sub elementul anterior (ex. <p>)
1
- inline: este afisat dupa elementul anterior (ex. <span>)
- table: este afisat sub forma unui tabel
Marcajele perechi pot fi imbricate:
<nume_marcaj1>
<nume_marcaj2>
................
</nume_marcaj2>
</nume_marcaj1>
Browserele vor ignora marcajele si optiunile pe care nu le recunosc.
1.2 Structura unui document HTML
Un document HTML 4 are urmatoare structura:
1. o linie continand versiunea HTML

2. sectiunea HEAD, delimitata de marcajele <HEAD> </HEAD>
3. sectiunea BODY, delimitata de marcajele <BODY> </BODY> sau
<FRAMESET> </FRAMESET>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Prima mea pagina web</title>
</head>
<body>
...........
</body>
</html>
Un document HTML valid contine declaratia versiunii HTML utilizate. Declaratia se face
prin intermediul DTD (document type definition). Pe scurt, fisierul DTD contine
definitiile marcajelor din versiunea respectiva de HTML.
HTML 4.01 specifica 3 variante DTD :
• HTML 4.01 Strict DTD include toate elementele si atributele care nu sunt
"invechite" (elemente si atribute a caror utilizare nu este recomandata
deoarece se doreste renuntarea la acestea pe viitor) sau care nu apar in
documentele ce contin cadre.
• HTML 4.01 Transitional DTD include Strict DTD plus elementele si atributele
"invechite".
• HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

DTD 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
HTML 4.01
Transitional//EN"
Transitional DTD
"http://www.w3.org/TR/html4/loose.dtd">
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
HTML 4.01
Frameset//EN"
Frameset DTD
"http://www.w3.org/TR/html4/frameset.dtd">
1.2.1 Sectiunea HEAD
Cuprinde informatii care nu vor fi afisate in browser, cu exceptia marcajului <title>.

Marcajul <title> este obligatoriu si poate apare doar in sectiunea HEAD. El va
contine un titlu relevant pentru pagina, fiind deosebit de important pentru motoarele
de cautare.
Alte marcaje care apar in sectiune HEAD:
• <META> - poate contine cuvinte cheie, o descriere a paginii, numele autorului

paginii, frecventa (teoretica) cu care motoarele de cautare ar trebui sa
reindexeze pagina, etc. Declaratiile META implica in general declararea unei
proprietati si a valorii asociate acelei proprietati.
<META NAME="nume" CONTENT="continut">
Declararea setului de caractere se face astfel:
<META http-equiv="Content-Type" content="text/html;

charset=set_caractere">
Precizarea setului de caractere face posibila afisarea in

browserul utilizatorului a caracterelor specifice unor limbi
precum romana, rusa, araba, etc.
• <style>- cascading style sheets - stiluri pentru formatarea textului din

documentul HTML.
<style type="text/css">...</style>
• <script> - scripturi JavaScript sau VBScript
<script language="JavaScript1.2" type="text/javascript"

src="lib.js"></script>
• <base> - stabileste URL-ul de "baza" al documentului. Toate referintele (<a

href=""></a>, respectiv <img src="">) din documentul respectiv vor fi
deschise relativ la marcajul <base>.
<head>
<base href="http://www.xprim.ro/index.php" target="_top">
</head>
• <link> - stabileste o legatura cu un document extern, spre exemplu un fisier

de definitii CSS.
3
<link rel="stylesheet" href="stiluri.css" type="text/css">
Sectiunea HEAD a unui document HTML poate arata in felul urmator:

<head>
<title>Titlul paginii mele</title>
charset=windows-1250">
<META name="author" content="Popescu Ion">
<META name="copyright" content="© 2003 InsideMedia">
<META name="keywords" content="curs, html, gratuit,
elearning">
</head>
1.2.2 Sectiunea BODY
Este inclusa intre marcajele <body>...... </body>
<BODY [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"] [

TEXT="#rrggbb"|"culoare"] [ LINK="#rrggbb"|"culoare"] [
VLINK="#rrggbb"|"culoare"] [ ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st]
[ TOPMARGIN=marg_top]>
................
continut document
.................
</BODY>
Marcajul de sfarsit (</BODY>) nu este obligatoriu
In sectiunea BODY se gaseste informatia care va fi afisata in browser (text, imagini,
etc.) (<body>.... </body>).
LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza decat

in Internet Explorer 3+).
• LEFTMARGIN precizeaza, în pixeli, marginea stanga a documentului

(distanta dintre fereastra si continutul documentului);
• TOPMARGIN precizeaza, in pixeli, marginea de sus a documentului
(distanta dintre fereastra si continutul documentului)
Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce

comentarii, folosind marcajul
4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titlul paginii mele</title>
charset=windows-1250">
<META name="author" content="Popescu Ion">
<META name="copyright" content="© 2003 InsideMedia">
<META name="keywords" content="curs, html, gratuit,
elearning">
</head>
<body bgcolor="#999999" leftmargin=0 topmargin=0>

<p>text text text text text text text text text text
</p>
<p>alt text alt text alt text alt text alt text </p>
</body>
</html>
In exemplul de mai sus a aparut un nou marcaj <p> (paragraf). Alaturi de el trebuie
mentionate marcajele <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (headings - toate
necesita marcaj de inchidere) care sunt folosite in general pentru evidentierea
titlurilor. (exemplu)
Pentru formatarea textului pot fi folosite si marcajele:
• <b>...</b> - caractere ingrosate

• <i>...</i> - caractere inclinate
• <u>...</u> - caractere subliniate
• <s>...</s> - caractere "taiate"
• <pre>...</pre> - marcajul de informatie preformatata
conserva toata caracterele si spatierile de linii
utilizeaza un font diferit (Courier)
• <sup>...</sup> - exponent
• <sub>...</sub> - indice
• <br> - "rupe" textul, trecand pe o linie noua - poate apare oriunde in text
• <hr> - traseaza o linie subtire orizontala
Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.

Marcajul <font>...</font> ofera posibilitatea modificarii dimensiunii, culorii si a
tipului de font utilizat (exemplu)
Ultimele 2 marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele
<span> si <div>(ambele necesita marcaj de inchidere):.
• <span> este un marcaj de tip "inline". Se foloseste in general in interiorul

marcajelor de tip "block" (ex. <p>) in combinatie cu stilurile CSS, pentru a
5
respectiv (exemplu).
• spre deosebire de <span>, marcajul <div> este de tip "block". Se foloseste
in general pentru pozitionare in cadrul documentului si pentru specificarea
unor proprietati CSS care sa fie aplicate textului din interiorul lui (exemplu).
<DIV [ ALIGN="left|center|right"] style="..">

.................................
</DIV>
1. Conform specificatiilor HTML 4.01, este recomandata folosirea

marcajului <div> pentru centrarea textului, in locul marcajului
<center> exemplu.
2. <div> poate fi folosit ca un container pentru alte elemente de tip
"block".
Exemplu: se pot include 2 sau mai multe paragrafe intr-un marcaj
<div>, insa pentru a se evita formatarea explicita pe fiecare paragraf
in parte (ex. fontul), se va defini stilul de formatare pentru marcajul
<div>, stil care va fi preluat de paragrafele mentionate.
1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

2. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate
marcajele prezentate in aceasta lectie. Valideaza pagina la adresa
http://validator.w3.org/
6
Lecţia 2: Liste si referinte
2.1 Liste
HTML ofera mai multe mecanisme pentru specificarea listelor de informatii. Exista 3 tipuri de liste,
fiecare tip trebuie sa includa cel putin un element:
1. liste de tip definitie

2. liste ordonate (numerotate)
3. liste neordonate (marcate)
2.1.1 Liste de tip definitie
Unul dintre cele mai obisnuite elemente in paginile HTML este un set de definitii, referinte sau
indexuri. Un exemplu concret il reprezinta glosarele; cuvintele sunt listate alfabetic, insotite de
definitiile termenilor respectivi.
Lista de tip definitie este introdusa de marcajele:
• <dl>...</dl> - lista definitii (definition list)

• <dt> - termenul definit (definition term)
• <dd> - definitie (definition)
<html>
<head>
<title>Lista de tip definitie</title>
</head>
<body>
<dl>
<dt>Applet Java
<dd>Aplicatie Java inclusa intr-un document HTML
<dt>Cookie
<dd>Mecanism de comunicare intre client si server
<dt>Domeniu
<dd>Nume unic prin care se identifica un site pe Internet
</dl>
</body>
</html>
Poti vizualiza exemplul de mai sus in browserul tau aici.
2.1.2 Liste neordonate
Sunt introduse de marcajele:
• <ul>...</ul> - lista neordonata (unordered list)

• <li> - element lista
7
<html>
<head>
<title>Lista neordonata</title>
</head>
<body>
<p>In HTML sunt disponibile 3 tipuri de liste:</p>
<ul type="square">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ul>
</body>
</html>

Atributul square precizeaza tipul maracatorului
2.1.3 Liste ordonate
Sunt introduse de marcajele:
• <ol>...</ol> - lista ordonata (ordered list)

• <li> - element lista
<html>
<head>
<title>Lista ordonata</title>
</head>
<body>
<p>In HTML sunt disponibile 3 tipuri de liste:
<ol start="2">
<li>liste de tip definitie
<li>liste neordonate
<li>liste ordonate
</ol>
</body>
</html>

Atributul start seteaza numarul de inceput pentru primul element al listei ordonate.
Diferenta dintre listele ordonate si cele neordonate consta in inlocuirea punctelor din enumerare cu
numere. Vizualizand in browser exemplele mentionate anterior, vei intelege diferentele in modul de
afisare a fiecarui tip de lista.
8
2. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate tipurile de liste.
Valideaza pagina la adresa http://validator.w3.org/
2.2 Referinte (link-uri)

Marcajul HTML principal pentru introducerea referintelor catre alte pagini HTML sau catre elemente
din cadrul aceleiasi pagini web este <a>. El trebuie sa contina atribute, in caz contrar neafectand
formatarea documentului.
Exemplul urmator nu va afecta formatarea documentului:

<a>Aici</a> ar trebui sa fie un link !
Pentru a activa linkul de mai sus vom adauga atributul href.
Exemplul urmator arata formatarea documentului:

<a href="pagina.html">Aici</a> este un link !
Referintele pot fi absolute (ex. <a

href="http://www.domeniu.ro/pagina.html">http://www.domeniu.ro/pagina.html<a>) sau
relative (ex. <a href="pagina.html">pagina.html<a>).
Referintele relative sunt folosite in interiorul siturilor. Ele functioneaza pe baza faptului ca browserul
adauga automat numele domeniului la fiecare referinta (presupunand ca exista o pagina la adresa
http://www.hostx.ro/director/pagina.html si o referinta relativa catre pagina2.html, browserul va
construi referinta http://www.hostx.ro/director/pagina2.html in momentul in care pagina2.html este
solicitata)
Referintele absolute le vei folosi atunci cand vrei sa trimiti utilizatorul pe un alt site (domeniu); pot
fi folosite si in interiorul unui site, insa va implica un efort mai mare in scrierea paginilor (pe scurt,
ai mai mult de tastat), iar in cazul in care muti situl pe un alt domeniu vei fi nevoit sa re-editezi
toate referintele.
Referintele pot fi catre pagini html, dar si catre alte tipuri de fisiere (imagini, fisiere audio, video,
documente in alte formate, etc.)
Presupunem ca ai un site cu urmatoare structura de directoare:
9
/director1
/director2
Pentru a apela o pagina HTML aflata in director2 dintr-o pagina aflata in director1 voi folosi
urmatoarea secventa:
<a href="../director2/pagina.html">Un link oarecare</a>
Pentru a apela o pagina HTML aflata in director1 dintr-o pagina aflata in radacina (nivelul
superior al sitului) voi folosi urmatoarea secventa:
<a href="director1/pagina.html">Un link oarecare</a>
2.2.1 Ancore
Pana acum am prezentat modul de realizare a referintelor externe, catre alte pagini sau catre alte
situri. Ce se intampla insa in cazul in care avem un document de dimensiuni mari si vrem sa
introducem referinte catre anumite sectiuni ale sale? Solutia consta in utilizarea ancorelor.
Ancorele asigura usurinta in navigare in paginile de dimensiuni mari.

O ancora are urmatorul format
<a name="nume_ancora">...</a>
Numele ancorelor nu poate contine spatii si trebuie sa fie unic in pagina respectiva !
In exemplul urmator vei vedea o greseala posibila in atribuirea numelui ancorelor:

<a name="xxx">...</a>
<a name="XXX">...</a>
In HTML xxx si XXX inseamna acelasi lucru!
Odata definita ancora trebuie definita si legatura activa catre ancora respectiva. Ea va fi o referinta
hypertext in formatul urmator: <a href="#nume_ancora">Link catre ancora</a>
Trebuie retinut ca exista posibilitatea de a crea referinte catre ancore aflate in documente externe:
<a href="pagina.htm#nume_ancora">Link catre ancora externa</a>

2. Realizeaza o pagina HTML (folosind NotePad) pe baza unui text existent, care sa
includa ancore. Folosind pagina realizata la exercitiul precedent (liste) si insereaza
10
linkuri catre ancorele create.
11

HTML Prin Exemple - Curs

Î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

HTML Prin Exemple - Curs

Încărcat de

Drepturi de autor:

Formate disponibile

Lecţia 1: Structura unui document HTML.

1.1 Ce este HTML?

HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in

• independenta de platforma (modul de afisare al unui document este acelasi,

<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>

Exista doua tipuri de marcaje:

- individuale (ex. <br>)

- block: este afisat sub elementul anterior (ex. <p>)

Marcajele perechi pot fi imbricate:

Browserele vor ignora marcajele si optiunile pe care nu le recunosc.

1.2 Structura unui document HTML

Un document HTML 4 are urmatoare structura:

1. o linie continand versiunea HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

1.2.1 Sectiunea HEAD

Cuprinde informatii care nu vor fi afisate in browser, cu exceptia marcajului <title>.

• <META> - poate contine cuvinte cheie, o descriere a paginii, numele autorului

<META NAME="nume" CONTENT="continut">

Declararea setului de caractere se face astfel:

<META http-equiv="Content-Type" content="text/html;

Precizarea setului de caractere face posibila afisarea in

• <style>- cascading style sheets - stiluri pentru formatarea textului din

• <script> - scripturi JavaScript sau VBScript

<script language="JavaScript1.2" type="text/javascript"

• <base> - stabileste URL-ul de "baza" al documentului. Toate referintele (<a

• <link> - stabileste o legatura cu un document extern, spre exemplu un fisier

Sectiunea HEAD a unui document HTML poate arata in felul urmator:

1.2.2 Sectiunea BODY

Este inclusa intre marcajele <body>...... </body>

<BODY [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"] [

LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza decat

• LEFTMARGIN precizeaza, în pixeli, marginea stanga a documentului

Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

• <b>...</b> - caractere ingrosate

Acest exemplu evidentieaza efectele marcajelor mentionate mai sus.

• <span> este un marcaj de tip "inline". Se foloseste in general in interiorul

<DIV [ ALIGN="left|center|right"] style="..">

1. Conform specificatiilor HTML 4.01, este recomandata folosirea

1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

1. liste de tip definitie

2.1.1 Liste de tip definitie

• <dl>...</dl> - lista definitii (definition list)

Poti vizualiza exemplul de mai sus in browserul tau aici.

2.1.2 Liste neordonate

Sunt introduse de marcajele:

• <ul>...</ul> - lista neordonata (unordered list)

Poti vizualiza exemplul de mai sus in browserul tau aici.

2.1.3 Liste ordonate

Sunt introduse de marcajele:

• <ol>...</ol> - lista ordonata (ordered list)

Poti vizualiza exemplul de mai sus in browserul tau aici.

2.2 Referinte (link-uri)

Exemplul urmator nu va afecta formatarea documentului:

Pentru a activa linkul de mai sus vom adauga atributul href.

Exemplul urmator arata formatarea documentului:

Referintele pot fi absolute (ex. <a

Presupunem ca ai un site cu urmatoare structura de directoare:

Ancorele asigura usurinta in navigare in paginile de dimensiuni mari.

In exemplul urmator vei vedea o greseala posibila in atribuirea numelui ancorelor:

1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

S-ar putea să vă placă și