Documente Academic
Documente Profesional
Documente Cultură
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_marcaj1>
<nume_marcaj2>
................
</nume_marcaj2>
</nume_marcaj1>
Browserele vor ignora marcajele si optiunile pe care nu le recunosc.
1
Cursuri 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 DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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
2
Cursuri HTML
<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.
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
3
Cursuri HTML
</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 impune o formatare diferita de restul continutului din marcajul "block" 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).
4
Cursuri HTML
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.
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
5
Cursuri HTML
<dt>Domeniu
<dd>Nume unic prin care se identifica un site pe Internet
</dl>
</body>
</html>
<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>
<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>
6
Cursuri HTML
</html>
7
Cursuri HTML
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.
3.1 De ce imagini ?
In principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop imbunatatirea modului de transmitere
a mesajului catre utilizatori. Imagineaza-ti cum ar arata Academia Online fara imagini !
8
Cursuri HTML
O pagina in care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine decat o pagina care
contine doar text. Selectarea imaginilor care vor fi utilizate este foarte importanta; cateva imagini care "clipesc" nu
sunt suficiente pentru a face o pagina atractiva.
<html>
<head>
<title>Pagina mea</title>
</head>
<body>
<img src="imagine.gif">
</body>
</html>
Atributul src specifica locatia imaginii. Alaturi de src, marcajul <img> are urmatoarele atribute:
9
Cursuri HTML
alt - specifica un text alternativ pentru cazul in care imaginea nu poate fi afisata. Este important si pentru motoarele
de cautare.
border - traseaza un chenar in jurul imaginii.
width, height - specifica latimea, respectiv inaltimea imaginii. Nu sunt obligatorii, insa utilizarea lor este
recomandata deoarece va reduce timpul de procesare a paginii web de catre browser.
hspace, vspace - specifica spatiul care va fi pastrat in jurul unei imagini.
Poti vizualiza in browserul tau ce se intampla in cazul in care imaginea lipseste sau calea catre imagine este gresita,
aici.
<html>
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src="imagine.gif" width="100" height="100" border="0"
hspace="10" vspace="10">
</body>
</html>
<html>
<head>
<title>Pagina cu imagine</title>
</head>
<body>
<img src="imagine.gif" width="100" height="100" border="0"
hspace="10" vspace="10" align="left">
</body>
</html>
10
Cursuri HTML
2. Realizeaza o pagina HTML (folosind NotePad) care sa contina una sau mai multe imagini, alaturi de un text pe care
sa il formatezi folosind marcajele studiate in primele doua lectii. Modifica valorile atributelor marcajului <img> si
vizualizeaza pagina in browser.
3.4 Inserarea de fisiere audio in paginile HTML
In general, inserarea de fisiere audio in paginile HTML nu este recomandata (bineinteles exista si exceptii).
Dimensiunile mari, timpul mare de download precum si "agresarea" utilizatorului cu o melodie care se repeta la infinit
sunt cateva din argumentele contra. In acelasi timp noile tehnologii (ex. FLASH) largesc posibilitatile, existand multe
pagini web care combina in mod fericit parte audio cu cea vizuala.
Referindu-ma strict la posibilitatile HTML, introducerea de secvente audio se poate face in doua modalitati:
sub forma unei referinte(link)
prin intermediul marcajelor embed sau bgsound
<html>
<head>
<title>Inserare referinta audio</title>
</head>
<body>
Apasa pe linkul de mai jos.
<a href="sunet.au">
Fisierul audio va fi rulat intr-o aplicatie instalata
in calculatorul tau (ex. Media Player)
</body>
</html>
<html>
<head>
<title>Inserare secventa audio cu embed</title>
</head>
<body>
<embed src="aaa.wav" width="200" height="200">
</body>
</html>
Exista trei formate de fisiere care sunt recomandate pentru utilizarea cu acest marcaj: wav, au si midi. Daca esti
interesat de fisierele midi iti recomand http://www.ifni.com/ sau http://www.midifarm.com. Atentie insa la drepturile
de autor!
Poti vizualiza exemplul de mai sus in browserul tau aici.
Marcajul embed are urmatoarele atribute:
autostart - daca este setat true, fisierul audio va fi rulat imediat dupa incarcarea paginii HTML
hidden - daca este setat true, interfata pentru rularea fisierului audio nu va fi afisata
loop - daca este setat true, secventa audio va fi reluata la "nesfarsit"
volume - seteaza volumul cu care va fi redata secventa audio
11
Cursuri HTML
<html>
<head>
<title>Inserare secventa audio cu embed</title>
</head>
<body>
<embed src="aaa.wav" width="200" height="200"
autostart=false hidden=false loop=true volume=50>
</body>
</html>
<html>
<head>
<title>Inserare secventa audio cu bgsound</title>
</head>
<body>
<bgsound src="aaa.wav" loop=10>
</body>
</html>
In HTML 4 embed este inlocuit de marcajul object care va fi insa prezentat in ultima lectie.
Lecţia 4: Tabele
Prezentarea datelor sub forma de tabele prezinta avantaje din punct de vedere al claritatii si sistematizarii. Marcajele
HTML dedicate formatarii tabelelor permit operatiuni asemanatoare celor din procesoarele de texte (ex. MS Word).
Definirea unui tabel in HTML se face folosind perechea de marcaje <table>...</table>. Prin intermediul acestei
perechi de marcaje se definesc atribute valabile pentru intregul tabel. Majoritatea acestor atribute pot fi insa redefinite
pentru anumite celule ale tabelului.
12
Cursuri HTML
<table [border=n]
[frame=above|below|border|box|hsides|vsides|lhs|rhs|void]
[rules=none|groups|rows|cols|all] [width=abs|rel]
[height=abs|rel] [bgcolor="#rrggbb"] [bordercolor="#rrggbb"]
[bordercolorlight="#rrggbb"] [bordercolordark="#rrggbb"]
[background="URL-imagine"] [cellspacing=n] [cellpadding=n]
[align=left|center|right] [valign=top|middle|bottom]
[summary="sumar"]>
...
</table>
13
Cursuri HTML
<thead>...</thead> este un marcaj care contine unul sau mai multe randuri de celule care reprezinta antetul tabelului.
Poate aparea o singura data in cadrul unui tabel.
<tbody>...</tbody> este un marcaj care contine unul sau mai multe randuri de celule. Pot fi definite mai multe astfel
de sectiuni in cadrul aceluiasi tabel (ex. in cazul in care exista stiluri de formatare diferite pentru sectiuni diferite ale
tabelului).
<tfoot>...</tfoot> este un marcaj care contine unul sau mai multe randuri de celule care reprezinta subsolul tabelului.
Poate aparea o singura data in cadrul unui tabel. Este obligatoriu sa apara inaintea marcajului <tbody>.
14
Cursuri HTML
<table border=1>
<tr>
<th>Col 1</th>
<th><font color=red>Col 2</th>
</tr>
<tr>
<td><center>Celula 1.1</center></td>
<td><i>Celula 1.2</i></td>
</tr>
<tr>
<td><s>Celula 2.1</s></td>
<td><font color=blue>Celula 2.2</font></td>
</tr>
</table>
Poti vizualiza exemplele de mai sus in browserul tau, aici.
Un alt marcaj care poate aparea in cadrul unui tabel este <caption>. Are urmatoarea sintaxa:
Marcajul caption adauga o scurta descriere (titlu) a tabelului. Poate fi utilizat numai in cadrul unui marcaj <table>,
imediat dupa acesta.
Are urmatoarele atribute:
15
Cursuri HTML
align - in mod normal browser-ul va afisa titlul aliniat central si deasupra/dedesubtul tabelului. In HTML 4.0 atributul
align a fost abandonat in favoarea formatarii prin CSS (text-align si vertical-align).
valign - precizeaza pozitia titlului in raport cu tabelul (sus/jos).
16
Cursuri HTML
17
Cursuri HTML
</tbody>
</table>
Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, in cazul marcajului <th>.
Ultimele atribute pe care le voi prezenta sunt colspan si rowspan. Ele extind o celula pe mai multe coloane,
respectiv linii ale tabelului.
18
Cursuri HTML
Lecţia 5: Cadre
Incepand cu Netscape Navigator 2, autorii paginilor HTML au posibilitatea de a imparti fereastra browserului in cadre,
fiecare cadru afisand un document HTML diferit. Foarte rapid, cadrele au castigat popularitate, fiind adoptate de
Internet Explorer, iar mai tarziu incluse in specificatiile HTML 4.
Cadrele ofera autorilor de pagini HTML posibilitatea de a pastra vizibila o parte a informatiei, in timp ce o alta parte a
informatiei este derulata (scroll) sau inlocuita.
Avantaje:
dimensiunea (KB) mai mica a fiecarui cadru in parte, comparativ cu cazul in care ar fi existat o singura pagina,
determina un timp de incarcare mai redus.
Dezavantaje:
unele motoare de cautare nu indexeaza siturile realizate cu cadre
autorul trebuie sa tina evidenta unui numar mare de pagini HTML
exista unele browsere care nu pot afisa pagini realizate cu cadre
este dificil de printat intreaga pagina
Cadrele sunt introduse prin perechea de marcaje <frameset>...</frameset>, respectiv marcajul <frame>.
Frameset defineste modul de impartire al ferestrei (spatiul alocat fiecarui cadru in parte).
19
Cursuri HTML
<li><a href="continut_cadru3.html">continut</a>
</ul>
</noframes>
</frameset>
</html>
Asa cum se vede mai sus, pentru a imparti un cadru in doua sau mai multe cadre, se folosesc marcaje frameset
imbricate.
Poti vizualiza exemplul de mai sus in browserul tau, aici.
20
Cursuri HTML
name - atribuie un nume cadrului curent. Acest nume poate fi folosit in combinatie cu marcajul a (<a
href="pagina.html" target="RightFrame">...</a>) pentru a incarca o pagina intr-un anumit cadru.
noresize - cadrele pot fi redimensionate de catre utilizatori. Prin folosirea atributului noresize browserul va bloca
redimensionarea cadrelor de catre utilizator.
scrolling - specifica browserului afisarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate lua urmatoarele
atribute:
o auto - afisarea barei de scroll se face atunci cand este necesar (continutul depaseste spatiul afisabil)
o yes - bara de scroll este permanent afisata
o no - bara de scroll nu va fi afisata, chiar si in eventualitatea in care este necesara.
marginwidth, marginheight - specifica distanta dintre marginea interioara a cadrului si continutul afisabil. Atributul
marginheight stabileste distanta pentru marginea superioara/inferioara a cadrului. Atributul marginwidth stabileste
distanta pentru marginea stanga/dreapta a cadrului.
Exemplul de mai jos defineste un <frameset> cu doua coloane:
21
Cursuri HTML
</head>
<frameset rows="30%, 70%">
<frame src="continut_cadru1.html">
<frame src="continut_cadru2.html">
<noframes>
<p>Acest document contine:
<ul>
<li><a href="continut_cadru1.html">continut</a>
<li><img src="continut_cadru2.html" alt="imagine">
</ul>
</noframes>
</frameset>
</html>
Poti vizualiza exemplul de mai sus in browserul tau, aici.
Exemplul de mai jos defineste un <frameset> cu doua cadre orizontale, primul cadru avand alocat 25% din spatiul
disponibil pe verticala, iar cel de al doilea cadru 75%:
text...
</noframes>
</frameset>
</html>
2. Realizeaza o pagina HTML (folosind NotePad), care sa contina 2 cadre verticale. Primul cadru (stanga) trebuie sa
contina 3 meniuri (linkuri), fiecare facand trimitere catre o pagina HTML diferita, care se va incarca in cadrul 2
22
Cursuri HTML
(dreapta). Toate paginile din cadrul 2 vor avea bara de scroll; schema de culori va fi diferita de la pagina la pagina
(font + fundal).
Lecţia 6: Formulare
Formularele HTML reprezinta o modalitate de comunicare intre utilizatori si server; prezinta o utilitate deosebita in
momentul in care sunt folosite in combinatie cu scripturi server-side (ex. PHP, Perl).
Intr-un limbaj mai "normal", formularele permit administratorului unui site sa adune informatii, respectiv sa intre in
contact cu utilizatorii site-ului sau.
Formularele sunt introduse prin marcajul <form>...</form>. Perechea <form>...</form> este o sectiune a
paginii HTML (container) care include mai multe controale (elemente). In general, utilizatorii modifica aceste elemente
(introducand text, selectand diferite optiuni, etc.); in final, aceste informatii sunt trimise serverului pentru a fi
prelucrate.
Intr-o pagina HTML pot exista mai multe formulare, insa numai informatiile dintr-un singur formular pot fi trimise la
un anumit moment catre server.
<input [type=button|checkbox|file|hidden|image|
password|radio|reset|submit|text] [name=nume]
[value=valoare] [size=identificator]
23
Cursuri HTML
24
Cursuri HTML
25
Cursuri HTML
</form>
</body>
</html>
2. Realizeaza o pagina HTML (folosind NotePad), care sa contina un formular avand o structura asemanatoare cu cel din
pagina de inscriere la Academia Online. Elementele formularului vor fi integrate intr-un tabel.
Impreuna cu colegii tai de echipa, construiti un site cu 5 pagini care sa relationeze intre ele. Folositi in
mod logic notiunile invatate in acest curs: inserare de imagini, liste, cel putin un formular, cadre
(optional), tabele.
Incercati sa imbinati armonios notiunile de formatare a paginilor cu cele de prezentare vizuala.
Alegeti un subiect/scop/tematica/destinatie pentru site-ul realizat. Validati fiecare pagina in parte din
computerul personal.
Gazduiti gratuit site-ul realizat (ex: home.ro)
Lecţia 7: Continut executabil (Java, JavaScript, VBScript)
Paginile HTML reprezinta o combinatie statica de text si imagini; odata incarcat in browser, continutul paginilor HTML
nu poate fi modificat decat prin folosirea unor tehnologii (sau limbaje) precum JAVA, JavaScript, VBScript, DHTML,
FLASH.
Prin intermediul acestor tehnologii poti obtine efecte interesante, prin care sa captezi interesul celor care viziteaza
pagina ta. HTML contine o serie de marcaje dedicate introducerii continutului executabil in paginile HTML: <applet>,
<object>, <script>.
26
Cursuri HTML
Un applet va ocupa o zona dreptiunghiulara in browser; in unele cazuri, prin intermediul marcajului <param> pot fi
transmisi parametri catre applet. Daca esti interesat sa utilizezi applet-uri in paginile tale, insa nu stii sa programezi in
JAVA, poti gasi applet-uri gratuite pe Internet (ex. www.free-applets.com)
Poti vizualiza exemplul de mai sus in browserul tau aici.
In exemplul de mai sus, in cazul in care secventa de film nu poate fi rulata in browser, se va incerca afisarea celui de-
al doilea marcaj <object>
7.4 Cum introduc o secventa de cod JavaScript sau VBScript intr-o pagina
HTML?
In general, secventele de cod JavaScript sau VBScript se gasesc in sectiunea HEAD, insa pot fi declarate si in fisiere
externe.
In cazul in care secventele de cod nu sunt declarate ca functii, ele vor fi executate in momentul incarcarii paginii in
browser. In acelasi timp, secventele de cod declarate ca functii pot fi apelate de anumite evenimente (onLoad,
onClick, onMove, etc.) asociate anumitor marcaje.
Poate unii dintre voi vor fi dezamagiti, insa aceasta lectie nu contine decat un singur exemplu. De ce? Inserarea
continutului executabil intr-o pagina HTML implica cunostinte de JavaScript, VBScript, FLASH sau JAVA, cunostinte
care nu fac obiectul acestui curs; mi-ar fi imposibil sa prezint facilitatile oferite de fiecare tehnologie sau limbaj in
parte. In acelasi timp, este bine sa stii care sunt posibilitatile si alternativele pe care le ai atunci cand realizezi o
pagina HTML.
In final, iti recomand sa folosesti echilibrat efectele pe care le poti introduce intr-o pagina HTML folosind tehnologii precum
JavaScript, FLASH, JAVA, etc.
27