C1 AI

Limbajul HTML

Stocarea informaiilor pe Web este realizat sub un format special denumit HTML. Pentru a vizualiza o
pagin Web aceasta trebuie s fie n format HTML pentru ca browser-ul s o poat traduce n imagini, sunete, texte
etc.
HTML (HyperText Markup Language) a aprut la nceputul anilor '90, ca urmare a necesitii existenei
unui limbaj universal care s poat permite accesarea documentelor la nivel global. Crearea HTML a determinat
dezvoltarea spectaculoas a Internetului. Limbajul HTML a aprut odata cu apariia Web-ului, fiind utilizat ca un
limbaj de "comunicare" pe Web.
1. Istoric
HTML a fost dezvoltat iniial, n anul 1989, de Tim Berners-Lee (cercettor la Consiliul European pentru
Cercetare Nuclear -CERN, laboratorul european pentru fizica particulelor de la Geneva). Acesta fiind nevoit s
gaseasc o cale de a transmite informaii ntre cercettorii din domeniul fizicii energiilor nalte din diferite zone
geografice i totodat de a gsi o modalitate de a simplifica procesul de gsire a informaiilor pe Internet a propus
"un sistem hypertext" de comunicare ntre calculatoare. Acest sistem crea posibilitatea s se lege documente prin
intermediul unei reele de calculatoare, pentru utilizarea n comun a rezultatelor cercetrilor tiintifice. CERN a
promovat Web-ul, urmrind eventuala sa dezvoltare de la o reea local la o reea global, accesibil n ntreaga
lume. Web-ul a fost utilizat public pentru prima oar n ianuarie 1992, la Geneva, oferind acces la datele existente n
site-urile Web ale CERN. n cadrul acestui proiect documentele erau stocate pe unul sau mai multe calculatoare,
numite servere Web, iar acces la acestea se realiza utiliznd un program special numit browser Web. Astfel prin
intermediul Internet-ului utilizatorii se puteau conecta la un server Web pentru a solicita anumite documente Web.
Serverul Web ca rspuns, livra documentul utilizatorului, acesta putnd s-l parcurg i s-l afieze cu ajutorul
programului browser. Un server putea rspunde la cererile mai multor utilizatori n acelai timp. In aprilie 1993,
dupa aproape un an i jumatate numrul serverelor a ajuns la peste un milion.
Web-ul este utilizat de ctre browser-ul utilizatorului pentru a putea vizualiza paginile de pe Internet. Aceste
pagini conin n principal informaii sub form de text dar i sub form video (imagini statice sau animaie) sau
audio.
2. Trsturile limbajului HTML
HTML-ul este un set de convenii pentru marcarea poriunilor de document astfel nct fiecare poriune s apar
cu format distinct atunci cnd documentul este accesat de un program de analiza sintactica (parser). HTML este
limbajul de marcare ce stabilete aspectul documentelor WWW (World Wide Web), iar prin intermediul browserelor se poate vedea documentul gata formatat.
Pe parcursul anilor, limbajul a evoluat, oferind cu fiecare versiune noi faciliti.
La acest limbaj se remarc cteva trsturi cum ar fi:

independena de platform (modul de afiare al documentului este acelai, indiferent de calculator,

adic cu acelai font, grafic i culori);

structurarea formatrii;

posibilitile hypertext (orice cuvnt, imagine sau alt element al documentului vizualizat de
utilizator poate fi referin la un alt document, ceea ce uureaz navigarea n cadrul aceluiai document sau
ntre documente diferite).
HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaz ntr-un text pentru a
adauga informaii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem
pentru definirea tipurilor de documente structurate, destinat s reprezinte instae ale acestor tipuri de documente. La
baza SGML i a HTML se afl acelai principiu: descrierea coninutului unui document se face ntr-un fiier text
obinuit (ASCII). S-a urmrit ca aceste fiiere s poat fi create cu editoare de text simple cum este de exemplu
NotePad i WordPad. Modul de apelare al acestui editor este prezentat n figura 2.

Figura 2. Apelarea editorului Notepad

Un document HTML este un fiier text cu extensia html sau htm, cu urmtoarea sintax:
"numefiier.html". Un singur inconvenient al realizarii paginilor Web cu ajutorul editoarelor de texte este faptul c
trebuie cunoscut limbajul HTML.
Pentru a putea vizualiza un program scris ntr-un editor oarecare se va proceda n modul urmtor:
1.
se copiaz programul cu Edit/Copy
2.
se deschide Notepad prin Start/Programs/Accessories/Notepad
3.
se transfer programul n Notepad cu Edit/Paste
4.
se salveaz programul cu extensia .html
5.
se pornete Netscape Navigator sau Internet Explorer i se parcurge urmtoarea secven, dup cum se
poate vedea n figura 3 :
a) se d CTRL-O i se deschide fereastra Open;
b) n fereastra Open se selecteaz butonul Browse
c) n urma selectrii butonului Browse apare fereastra Microsoft Internet Explorer i se caut
fiierul pe care dorim s-l vizualizm;
d) se selecteaz fiierul dorit, dnd click pe numele acestuia, n exemplul nostru Program1;
e) se apas butonul Open i se nchide fereastra Microsoft Internet Explorer
f) n fereastra Open este selectat calea spre fiier i se apas butonul OK pentru a vizualiza
pagina corespunztoare programului selectat.

Figura 3. Specificarea cii unui fiier HTML n Internet Explorer

3. Marcajele HTML
Documentele HTML ncep cu notaia <html> i se termin cu </html>. Aceste marcaje se numesc n
literatura de specialitate tag-uri (adic marcaj n limba engleza), scrise ntre paranteze unghiulare de forma
<nume_marcaj>. Prin convenie, toate marcajele HTML ncep cu o parantez unghiular deschis "<" i se termin
cu o parantez unghiular nchis " > ". Parantezele unghiulare sunt elementele care indica prezena unui marcaj.
Numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive), adic
<html> =<HTML>=<Html>=<HtmL>.
Caracterele "spaiu" i "ENTER" ce apar ntre marcaje sunt ignorate de ctre browser.
Marcajele dintre aceste paranteze transmit comenzi ctre browser pentru a afia pagina ntr-un anumit mod.
Aceste marcaje sunt de dou tipuri:

individuale (ex. <br>)

perechi (ex. <p>...</p>) - de mentionat c sfritul unui marcaj este indicat prin utilizarea
caracterului "/" n faa numelui de marcaj.
n funcie de modul de formatare a paginii, avem marcaje de tip:

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

inline: este afiat dupa elementul anterior (ex. <span>)

table: este afiat sub forma unui tabel.

Marcajele de tip pereche pot fi imbricate:

<nume_marcaj1>
<nume_marcaj2>
................
</nume_marcaj2>
</nume_marcaj1>
Browser-ul ignor marcajele i opiunile pe care nu le recunoate.
Unele marcaje permit utilizarea unor atribute care se vor scrie n marcajul de nceput:
<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>
................
</nume_marcaj>
4. Structura unui program
Un document HTML are urmtoarea structur:
1. seciunea de antet HEAD, delimitata de marcajele <HEAD> </HEAD>
2. seciunea cu coninutul documentului BODY, delimitata de marcajele <BODY> </BODY> sau
<FRAMESET> </FRAMESET>
Programul HTML prezentat n figura 4 prezint structura cadru HTML. Vizualiznd acest program Internet
Explorer va arta o pagin goal.
<html>
<head>
</head>
<body>
...........
</body>
</html>
Figura 4. Structura unui program HTML
4.1. Seciunea de antet
Seciunea de antet este cuprins ntre marcajele <head> </head>. Informaiile cuprinse n aceast seciune
nu vor fi afiate de browser, cu excepia marcajului <title>. Marcajul <title> este obligatoriu i poate apare doar n
seciunea HEAD. El va conine un titlu relevant pentru pagin, fiind deosebit de important pentru motoarele de
cutare.
Dintre marcajele care nu sunt afiate de browser existente n seciune HEAD sunt:
<META> - poate conine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecvena
(teoretic) cu care motoarele de cutare ar trebui s reindexeze pagina, etc. Declaraiile META implic n
general declararea unei proprieti i a valorii asociate acelei proprieti.
<META NAME="nume" CONTENT="continut">
<base> - stabileste URL-ul de "baza" al documentului. Toate referinele din documentul respectiv vor fi
deschise relativ la marcajul <base>. (<a href="nume_pagina.html"></a>, respectiv
<img src="nume_imagine.gif">)
<head>
<base href="http://www.ace.ucv.ro/index.php" target="_top">
</head>
Seciunea HEAD a unui document HTML este prezentat n figura 5.
<head>
<title> Curs HTML </title>
<META name="author" content="Camelia Maican">
<META name="copyright" content=" 2010 ACE">
<META name="keywords" content="curs, html, anul_IV, ZI">
</head>
Figura 5. Seciunea de antet HEAD

Marcatorii existeni n aceast seciune sunt n numr de 6, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> prezentai
n figura 6, indicnd dimensiunea de scriere a textului pentru a da posibilitatea evidenierii titlului paginii fa de alte
texte din pagin.

Codul pentru editorul Notepad

Vizualizarea de Internet Explorer

<h1> PROIECT </h1>

PROIECT

<h2> PROIECT </h2>

Proiect

<h3> PROIECT </h3>

Proiect

<h4> PROIECT </h4>

Proiect

<h5> PROIECT </h5>

Proiect

<h6> PROIECT </h6>

Proiect

Figura 6. Marcaje folosite n seciunea de antet

Dac introducem mai multe linii de text ntr-o pagin de program, browser-ul va afia textul pe un singur
rnd, ntruct caracterele "ENTER" sunt ignorate de acesta.
Trecerea pe o linie nou se face la comanda explicit prin marcajul <br> (de la "line break" care nseamn
ntrerupere de linie) care trebuie s apar n pagin.
Pentru centrarea titlului n cadrul paginii se folosete marcajul <center> iar pentru terminarea aciunii se
utilizeaz </center>.
Ca n orice limbaj de programare i n HTML exist posibilitatea de a introduce comentarii, folosind marcajul
<!-- textul comentariului -->
Folosind marcajele prezentate programul va arata ca n figura7.
<!Programul 1-->

<html>
<head>
<title><center>PROIECT</center></title>
</head>
<body>
...........
</body>
</html>
Figura 7. Utilizarea marcajelor seciunii de antet
4.2. Sectiunea BODY
Aceast seciune este cuprins ntre marcajele <body>...... </body> i poate avea urmtoarele atribute:
<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]>
................
coninut document
.................
</body>
Marcajul de sfrit (</BODY>) nu este obligatoriu.
A. Culoarea de fond

O culoare poate fi precizat n dou moduri:

printr-un nume de culoare, conform sintaxei:

<body bgcolor="gray">
fiind disponibile cel puin 16 nume de culori: aqua, black, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white i yellow.

printr-o constant "#rrggbb", conform standardului de culoare RGB (Red, Green,

Blue). O astfel de constant se formeaz astfel: "#rrggbb" unde r,g i b sunt cifre hexazecimale care pot lua
valorile: 0,1,2,3,4,5,6,7,8,9,a,A,b,B,c,C,d,D,e,E,f,F i n acest fel pot fi definite 65536 culori, utiliznd
sintaxa:
<body bgcolor="#999999">
Culoarea paginii prin cele dou modaliti prezentate mai sus este gri ilustrat i n programul din figura 8.
B. Culoarea textului
Culoarea textului se realizeaz prin intermediul atributului text tot prin dou modaliti:

printr-un nume de culoare, conform sintaxei:

<body text="gray">

printr-o constant "#rrggbb", conform sintaxei

<body text="#999999">
n programul din figura 8 culoarea textului este rou.
<!Programul 2-->

<html>
<head>
<title> Curs HTML </title>
<META name="author" content="Camelia Maican">
<META name="copyright" content=" 2010 ACE">
<META name="keywords" content="curs, html, anul_IV">
</head>
<body bgcolor="#999999" text="red" leftmargin=0 topmargin=0>
<!Linia precedent nu este afiat de browser -->
<p>Textul primului paragraf </p>
<p>Textul urmtorului paragraf </p>
</body> <! Acest marcaj de sfrit al corpului documentului nu este
obligatoriu >
</html>
Figura 8. Utilizarea culorii de fond i a marcajului de paragraf
Pentru celelalte atribute culoarea se stabilete similar ca n cazul textului.
Poziionarea coninutului paginii Web fa de marginile ferestrei browser-ului se poate face cu ajutorul a dou
atribute leftmargin i topmargin (care sunt extensii Microsoft i nu funcioneaz dect n Internet Explorer 3+):

leftmargin stabilete, n pixeli, marginea stng a documentului adic distana dintre

marginea stng a fereastrei browser-ului i marginea stng a coninutului documentului;

topmargin stabilete, n pixeli, marginea de sus a documentului adic distana dintre

marginea de sus a fereastrei browser-ului i marginea de sus a coninutului documentului
care va fi afiat de browser (text, imagini, etc.).
Textul afiat este caracterizat de urmtoarele atribute:

marime (size)

culoare (color)

font (style)
Aceste atribute apar n cadrul marcajului <basefont>, conform sintaxei :
<basefont size=numr color=culoare style=font>
unde:

numr poate fi o valoare (1,2,3,4,5,6,7) ntre 1 i 7, 1 pentru font-ul cel mai mic i
7 pentru fontul cel mai mare;

culoare poate fi precizat prin nume sau constant RGB;

font poate fi un font generic ca "Times New Roman", "Helvetica" sau "Arial" ; se
accept ca valoare i o list de fonturi separate prin virgula, de exemplu : " Times New Roman,
Helvetica, serif, courier".
Acest marcaj este singular, fr delimitator de sfrit de bloc. Domeniul de valabilitate al caracteristicilor
precizate de aceast etichet se ntinde de la locul n care apare marcajul pn la sfritul paginii sau pn la un nou
marcaj <basefont>.
Dac acest marcaj lipsete atunci textul din pagina Web are atributele implicite stabilite de browser-ul utilizat.
Atributele implicite sunt:
size = 3, color = black i style = "Times New Roman".
n exemplul din figura 7 a aparut un marcaj nou <p> (paragraf). Pentru formatarea textului pot fi folosite
diferite stiluri utiliznd urmtoarele marcaje:

<b>...</b> - blocul de text apare cu caractere ngroate

<i>...</i> - blocul de text apare cu caractere inclinate

<u>...</u> - blocul de text apare cu caractere subliniate

<s>...</s> - blocul de text apare cu caractere "taiate"

<pre>...</pre> - marcajul de informie preformatat

o
conserva toata caracterele i spaierile de linii
o
utilizeaz un font diferit (Courier)

^... - secven de text aliniat ca exponent

_... - secven de text aliniat ca indice

<br> - textul dup acest marcaj este trecut pe o linie nou i poate apare oriunde n
text
<hr> - traseaz o linie subire orizontal
Programul din figura 8 evideniaz efectele marcajelor menionate mai sus.

C. Fontul unui text

Textul scris pe o pagin poate fi realizat utiliznd diverse fonturi (stiluri de caractere) pentru care se vor
preciza atributele. n cazul n care sunt utilizate mai multe fonturi, acestea vor fi separate prin virgul.
Un font este caracterizat de urmtoarele atribute:
o
Culoarea, stabilit prin atributul color, se precizeaz prin dou moduri similar culorii textului ;
o
tipul sau stilul este stabilit prin atributul face ;
o
mrimea definit prin atributul size ; valorile acestui atribut pot fi cuprinse ntre 1 (cel mai mic) i
7 (cel mai mare) ;
o
grosimea definit prin atributul weight ; valorile acestui atribut pot fi cuprinse ntre 100 (cel mai
subire) i 900 (cel mai gros) ;
Toate aceste atribute aparin etichetei permnd nserarea de blocuri de text personalizate (figura 9)
<!Programul 4-->

<html>
<head>
<title><h3><center>FONT </center> /h3></title>
</head>
<body> <pre>
<font size=7 color="green" face="Times New
Roman"><b><u>Cuprins </u></b> </font><br>
<font size=5 color="blue" face="Times New Roman">
<b>Capitolul 1</b> </font><br>
<font size=4 color="red" face="Arial">
Paragraful 1.1.
Paragraful 1.2. </font><br>
</pre>
</body>
</html>

Figura 9. Specificarea fontului unui text