Notiuni de Baza HTML

Notiuni de HTML
Ce este HTML
HTML sau HyperText Markup Language este, asa cum o sugereaz si deIinitia, un limbaj de
marcare pentru hvpertext.
Termenul Hipertext se reIer la modalitatea n care se Iac legturile intre diIerite documente
HTML. n Iapt, hipertext trebuie nteles ca un text mai proIund dect dect un text normal. De
exemplu, o pagin de hvpertext nu este doar o simpl pagin de text. Ea este o pagin care, pe lng
textul propriu-zis, mai contine si niste legturi (hiperlegturi) ctre alte texte care abordeaz acelasi
subiect ca si cel tratat n pagina de unde se Iac legturile (hiperlegturile sunt acele texte subliniate sau
nu, de cele mai mute ori scrise cu albastru si, la pozitionarea cu mouse-ul asupra lor, cursorul devine
activ).
AstIel se poate constata c, pentru un subiect oarecare, se dispune de o documentatie
impresionant ce poate Ii accesat de la o simpl pagin de hipertext (prin intermediul
hiperlegturilor). Datorit acestor trimiteri ctre alte texte se poate constata c textul initial are o
proIunzime mult mai mare, dect ar avea un text normal care este limitat doar la ceea ce se vede. In
esent, hypertextul trebuie nteles ca un text cu legturi ctre alte texte.
Pentru a vedea cum Iunctioneaz acest limbaj de marcare, se presupune c a Iost scris un
document cu un editor de texte precum Word, Wordpad sau orice alt editor mai perIormant. Ca orice
document, el va contine mai multe elemente cum ar Ii: un titlu, un paragraI sau poate chiar un tabel.
Pozitionarea n pagin a textului se realizeaz cu ajutorul tastaturii. Un browser de internet (Internet
Explorer, Netscape navigator, etc) nu poate citi dect Iisiere HTML, adic acele Iisiere cu extensia
.htm sau .html. Un asemenea browser nu poate aIisa corect elementele unui text, adic nu poate aIisa
un titlu sau un paragraI, dect dac i se sugereaz acest lucru cu ajutorul unor comen:i.
n concluzie, un Iisier HTML va contine pe lng textul care se doreste a Ii aIisat n Iereastra
browser-ului si niste elemente (tag-uri) care marcheau textul respectiv, sugernd n acest Iel browser-
ului care este titlul documentului, care este paragraIul sau care este tabelul.
Structura paginii HTML

Paginile pe internet sunt, de regula, realizate intr-un limbaj numit HTML - HyperText Mark-up
Language. Editarea acestora se poate Iace in orice program de editare texte, pornind chiar cu banalul
Notepad din Windows. Toate notiunile prezentate in acest ghid pot Ii puse in practica utilizand
Notepad.
Fisierul care se editeaza se va numi index.html. In general Iisierul principal al unui site internet
(cel care se incarca atunci cand tastam o adresa de genul www.abc.abc) este numit index.html.
Instructiunile Iolosite intr-o pagina HTML se numesc tag-uri si acestea indica browser-ului (Netscape,
Internet Explorer, etc) modul de prezentare a inIormatiei din pagina. Tag-urile se scriu intre semnele
si ~. Tag-urile nu trebuie scrise respectand reguli Ioarte stricte (nu e nevoie sa scrii numai cate un tag
pe rand sau sa Ioloseti numai litere mari, etc). Un exemplu de utilizare a tag-ului FONT este:

FONT FACEARIAL COLOR#FF0000~EED Facultatea de Inginerie Electrica/FONT~

Instructiunea de mai sus va determina aIisarea textului "EED Facultatea de Inginerie
Electrica" cu Iont arial si culoarea rosie. Dupa cum se poate observa, exista un tag inaintea textului si
unul care incheie textul respectiv. Majoritatea tag-urilor functioneaza in acest mod: se pun
inaintea informatiei pe care dorim sa o prezentam intr-un anume mod, iar apoi la sfarsitul
acesteia, ca in exemplul de mai sus.
Continutul oricarui Iisier HTML trebuie inclus intre tag-urile <HTML> si </HTML>. Aceasta
inseamna ca tag-ul HTML~ trebuie sa Iie primul lucru care apare intr-un Iisier HTML, iar tag-ul
/HTML~ trebuie sa Iie ultimul:

HTML~
...aici se completeaza inIormatia de prezentat in pagina...
/HTML~

Ca structura, o pagina HTML are doua parti: o parte delimitata de tag-urile <HEAD> si
</HEAD> ce contine inIormatii de identiIicare a paginii si o parte delimitata de tag-urile <BODY> si
</BODY> ce contine inIormatiile de prezentat eIectiv in pagina. Cel mai important tag utilizat in
sectiunea HEAD este cel care da titlul paginii. Acest titlu va Ii incadrat de <TITLE> si </TITLE>.
Un exemplu de pagina HTML Ioarte simpla, avand titlul "Hello, world!" este:

HTML~
HEAD~
TITLE~ Hello, world!/TITLE~
/HEAD~
BODY~
...aici se completeaz continutul paginii...
/BODY~
/HTML~

Tag-urile HTML~.../HTML~, HEAD~.../HEAD~, TITLE~.../TITLE~ si
BODY~.../BODY~ vor aparea o singura data in cadrul unui Iisier HTML, dupa cum arata exemplul
de mai sus.
Fereastra deschisa avea ca titlu " Hello, world!" si drept continut "...aici se completeaza
continutul paginii...". Se pot copia instructiunile de mai sus in Notepad, dup care se poate salva
Iisierul cu numele index.html si deschide acest Iisier in Netscape sau Internet Explorer pentru acelasi
rezultat.

Texte

Cel mai important element al unei pagini internet este, desigur, textul. Intr-o Iorma simpla,
acesta poate Ii scris eIectiv intr-o pagina HTML, dupa cum s-a vzut in exemplul anterior: am scris in
Iisierul HTML textul "...aici se completeaza inIormatia de prezentat in pagina..." si acesta s-a incarcat
in mod identic in browser.
Se vor studia in continuare elemente de formatare a textului. Doua lucruri trebuie mentionate
in primul rand, legate de Iormatarea textelor: utilizarea spatiilor si trecerea la un nou rand. Intr-un
Iisier HTML aIisarea mai multor spatii consecutive nu este posibila prin scrierea directa in Iisierul
html ci Iolosind de mai multe ori sintagma . AstIel, pentru a pune trei spatii intre cuvinte va
trebui sa se scrie in Iisierul HTML astIel:

nbsp; &nbsp

Desi este utilizat pentru inserarea de spatii, sintagma are o alt semniIicatie. &nbsp nseamn
caracterul special Non Breaking SPace deIinit cu ajutorul entittii . Prezenta acestui caracter
special ntre dou cuvinte mpiedic plasarea lor pe rnduri separate.
Pe lng aceast entitate, mai exist si altele. Entittile, constituie o metod de reprezentare a
caracterelor care nu ar putea Ii redate corect n cadrul unui document HTML dac ar Ii scrise ca atare,
direct de la tastatur, sau care nu sunt disponibile la tastatur. O entitate va Ii scris sub Iorma &nume
entitate;. Mai jos sunt exempliIicate cteva entitti precum si caracterele aIerente.
< ( ) - semnul mai mic dect
> ( ~ ) - semnul mai mare dect
© ( ) - semnul pentru copyright
& ( & ) - semnul ampersand
β () - litera beta din alIabetul grecesc
< ( ) - semnul mai mic dect
> ( ~ ) - semnul mai mare dect
& ( & ) - semnul ampersand
Trecerea la un nou rand nu se Iace apasand Enter in Iisierul HTML, ci utilizand tag-ul <BR>
(acest tag se utilizeaza singur; nu se Ioloseste cu /BR~).AstIel, pentru a scrie "EED" pe un rand, a
lasa un rand liber si "USV" pe un rand separat, se va Iolosi:

EEDBR~BR~USV

S-a utilizat mai sus de doua ori tag-ul BR~: o data pentru a trece la un nou rand si o data
pentru a lasa un rand liber. Tag-ul utilizat pentru Iormatarea modului de aIisare a textului este
<FONT>...</FONT>. Tag-ul FONT suporta mai multi parametri, printre care:
- SIZEx, unde x este dimensiunea Iontului (1 Iiind dimensiunea cea mai mica);
- COLOR#RRGGBB - culoarea cu care se va aIisa Iontul. Culoarea implicita este negru;
- FACEIont - Iontul cu care va Ii scris textul respectiv. Atentie! Vizitatorii paginii trebuie sa
aiba Iontul respectiv instalat pe calculator, deci este indicat s se utilizeze numai Ionturi
"clasice". Fontul implicit este Times New Roman. Acesti parametri poti Ii utilizati separat
sau simultan in cadrul tag-ului FONT. AstIel, instructiunea de mai jos aIiseaza text Iolosind
culoarea albastru:

FONT COLOR#0000AA~EED/FONT~

Instructiunea de mai jos aIiseaza acelasi text cu Iont arial, culoare albastra si dimensiune mai
mare:

FONT COLOR#0000AA SIZE4 FONTARIAL~EED/FONT~

Dupa cum se poate vedea, se pot utiliza mai multi parametri in cadrul aceluiasi tag FONT.
Acestia nu se despart prin virgula, ci printr-un spatiu. De retinut ca parametrul FACE poate primi mai
multe Ionturi. AstIel, un tag de tipul

FONT FACEVERDANA, ARIAL~.../FONT~

va instrui browserul sa utilizeze Iontul Verdana, iar daca acesta nu este gasit, sa utilizeze Arial. Mai
exista trei tag-uri utile pentru Iormatarea textelor: <B>...</B> - utilizat pentru scrierea textelor cu
bold, <I>...</I> - utilizat pentru scrierea textelor cu italics (litere inclinate) si <U>...</U> - pentru a
scrie text subliniat. Desigur, pot exista combinatii intre tag-ul FONT si tag-urile de subliniere,
ingrosare sau inclinare, ca de exemplu:

FONT COLOR#00AA00~B~Text verde ingrosat/B~/FONT~

Trebuie tinut cont ca tag-urile trebuie inchise in ordine invers Iat de cum au Iost deschise.
In Iisierul index.html deschis in Notepad, se va sterge randul cu "...aici se completeaza
inIormatia de prezentat in pagina..." si se inlocuieste cu:

BR~FONT SIZE4 COLOR#0000AA~B~EED/B~/FONT~BR~

Ca si n cazul editoarelor de texte, este posibil introducerea unor titluri (heading-uri). Pentru
aceasta HTML dispune de elementul H (heading). Forma general este:
Hnr~ TITLU /Hnr~
unde nr este un numr ce poate avea valori de la 1 la 6 n Iunctie de importanta care o are titlul
respectiv n cadrul documentului. H1 va duce la realizarea de titluri Ioarte evidente, iar H6 va
reprezenta Iorma cea mai putin evident. Mai jos sunt redate modurile de aIisare pentru valorile 1 si 2.
H1~Titlu realizat cu H1/H1~
H2~Titlu realizat cu H2/H2~
Textul care se doreste a Ii introdus n pagina HTML poate Ii organizat pe paragraIe (ca si la
editoarele de texte). n cazul unui browser acest lucru se speciIic prin elementul P~ in cadrul
Iisierului HTML. Browserul va aIisa ca un paragraI tot textul cuprins ntre tag-urile P~ si /P~. n
cazul n care este omis utilizarea acestor tag-uri ntregul text cuprins de tag-urile elementului BODY
va Ii tratat ca un paragraI unic.
ParagraIele pot Ii aliniate |n diverse moduri, prin utilizarea atributului ALIGN. De exemplu,

P ALIGN"RIGHT"~Acesta este un paragraI aliniat la dreapta/P~

ParagraIul poate a vea si ALIGN"JUSTIFY", care va avea drept rezultat alinierea textului la
ambele margini. Prin alinierea unui paragraI la ambele margini apare un inconvenient de ordin estetic
si anume Iaptul c, prin aceast Iortare, spatiul dintre cuvinte nu va mai Ii acelasi, spatiul variind
Iunctie de modul n care se va umple rndul respectiv.

Cteva observatii reIeritoare la utilizarea paragraIelor:

- Utilizarea repetat paragraIelor goale (adic o succesiune de elemente sub Iorma <P><P><P>)
n scopul realizrii unui spatiu mai mare ntre dou paragraIe nu constituie o solutie corect.
Chiar dac un browser poate interpreta corect acest lucru exist browsere care nu citesc dect
un singur paragraI gol, urmnd ca restul paragraIelor goale s Iie ignorate.
- ntre dou paragraIe va rmne un rnd liber. Distanta dintre paragraIe poate Ii modiIicat dar
acest lucru nu poate Ii realizat prin intermediul elementelor existente in HTML. Dac dorim s
modiIicm spatiul dintre paragraIe va trebui s utilizm CSS. Pn la aparitia CSS, distanta
dintre dou paragraIe putea Ii modiIicat cu ajutorul elementului BR. Aceast metod d
rezultate bune dar permite un control Ioarte riguros asupra spatiului dintre paragraIe.
- Chiar dac utilizarea tag-ului de sIrsit (</P>) nu este obligatorie este indicat s nu Iie omis.
Lipsa acestui tag va Iace ca elementul imediat urmtor s nu mai Iie pozitionat la un rnd
distant Iat de paragraI. Aceast regul este bine s Iie aplicat tuturor elementelor HTML. n
plus, utilizarea ambelor tag-uri usureaz munca atunci cnd este nevoie s se Iac modiIicri n
documentul initial. In acest mod citirea textului surs se Iace mai usor.
- Atributul ALIGN sugereaz alinierea pe orizontal. Acest atribut precum si valorile sale sunt
identice pentru mai multe elemente din cadrul HTML.

Alte Iormatri de text:

<B> Acest text este Bold
<I> Acest text este Italic (cursiv)
<TT> Acest text este TeleType
<U> Acest text este Underline
<STRIKE> Acest text este STRIKE
<BIG> Acest text este Big
<SMALL> Acest text este Small
<SUB> Acest text este
SUBscript

<SUP> Acest text este
SUPrascript

Textul mai poate Ii prezentat si sub Iorma unor liste. Acestea pot Ii de dou Ieluri: ordonate
(numerotate) sau neordonate. Tag-urile Iolosite pentru acestea sunt OL~/OL~, respectiv
UL~/UL~. Elementele listei sunt introduse prin intermediul tag/ului LI~. Exemple:

UL~
LI~Elementul 1
LI~Elementul 2
LI~Elementul 3
/UL~
OL~
LI~Text 1
LI~Text 2
LI~Text 3
/OL~

Se poate observa c Iolosirea tag-ului /LI~ nu este obligatorie.

Exemplu
<html>
<head><title>Exemplu liste 2</title></head>
<body><h1 align=center>O lista neordonata</h1><hr>
Glosar de termeni de World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
</body>
</html>

Listele neordonate pot Ii imbricate pe mai multe niveluri
<html>
<body><h1 align=center>O lista neordonata de liste neordonate</h1><hr>
Glosar de termeni de World Wide Web
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul>
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul>
</ul>
</body>
</html>

O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> ("
ol " vine de la " ordered list " lista ordonata). Fiecare element al listei este initiat de eticheta <li> (list
item). Lista va Ii indentata Iata de restul paginii Web si Iiecare element al listei incepe pe un rand
noua.
<html>
<body><h1 align=center>O lista ordonata</h1><hr>
<ol>Culori uzuale disponibile prin nume
</ol>
</body>
</html>
Tag-urile <ol> si <li> pot avea un atribut type care stabileste tipul de caractere utilizate pentru
ordonarea listei.Valorile posibile sunt:
" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );
" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
" I " pentru ordonare de tipul I , II , III , IV etc. ( ciIre romane mari );
" i " pentru ordonare de tipul i , ii , iii , iv etc. ( ciIre romane mici );
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( ciIre arabe - optiune prestabilita );
Urmatorul exemplu este o lista ordonata cu ciIre romane
<html>
<body><h1 align=center>O lista ordonata cu ciIre romane</h1><hr>
<ol type="I">Culori uzuale disponibile prin nume
</ol>
</body>
</html>
Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a secventei de
ordonare.Valoarea acestui atribut trebuie sa Iie un numar intreg pozitiv.
Urmatorul exemplu este o lista ordonata cu litere mari,incepand de la valoarea C.
<html>
<body><h1 align=center>O lista ordonata cu litere mari, incepand de la valoarea C</h1><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>
Tag-ul <li> poate avea un atribut value care satileste valoare pentru elementul respectiv al
listei. Valoarea acestui atribut trebuie sa Iie un numar intreg pozitiv (vezi urmatorul exemplu).
<html>
<body><h1 align=center>O lista ordonata avand itemi setati individual</h1><hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati Iisierul;
<li value="6">incarcati Iisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou Iisierul
</ol>
</body>
</html>
Listele ordonate pot Ii imbricate intre ele sau cu liste neordonate ,ca in exemplul urmator.
<html>
<head><title> Exemplu liste 8</title></head>
<body><h1 align=center>O lista ordonata de liste ordonate si neordonate</h1><hr>
<ol>Un sistem inIormatic include:
<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>SoItware:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>SoItware de aplicatie:
<ul type="disc">
<li>VisualC
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>

Utilizari speciale ale listelor
Daca intr-o lista, in loc de elementele acesteia introduse prin <li>, se insereaz un bloc de text,
aceasta va Ii indentat ( ntocmai ca elementele unei liste).
<html>
<body><h1>Un bloc de text indentat</h1><hr>
<ol> Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de
text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un
bloc de text indentat. Un bloc de text indentat.
</ol>
</body>
</html>
In exemplul urmtor lista de deIinitii are itemii <dt> si <dd> multipli.
<html>
<body><h1 align=center>O lista de deIinitii speciala</h1><hr>
<dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Inscriere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl>
</body>
</html>
Ultimul exemplu este o lista neordonata personalizata care utilizeaz pe post de elemente imagini si
texte.
<html>
<body><h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt:<br>
<img src="images/reddot.gif">GolI<br>
<img src="images/reddot.gif">Jetta<br>
<img src="images/reddot.gif">Passat<br>
<img src="images/reddot.gif">Bora<br>
<img src="images/reddot.gif">Corrado<br>
<img src="images/reddot.gif">Transporter<br>
</body>
</html>

Culori

S-a vazut in capitolul anterior ca textele din paginile HTML pot avea diverse culori cu un tag
de tipul

<FONT COLOR#00FF00>...</FONT>.

Se va prezenta in continuare sistemul de codificare a culorilor pentru paginile web. Fiecare
culoare este interpretata ca Iiind compusa din diverse procente ale culorilor rosu, verde si albastru
(RGB). Acestea sunt exprimate prin numere in baza 16. AstIel, numarul 00 reprezinta nivelul minim
dintr-o anumita culoare iar numarul FF reprezinta nivelul maxim. Acordand ponderi exprimate prin
aceste numere in baza 16 culorilor rosu, verde si albastru (Red, Green, Blue - RGB) se poate obtine
orice culoare:

black "#000000"
green "#008000"
silver "#C0C0C0"
lime "#00FF00"
gray "#808080"
olive "#808000"
white "#FFFFFF"
yellow "#FFFF00"

maroon "#800000"
navy "#000080"
red "#FF0000"
blue "#0000FF"
purple "#800080"
teal "#008080"
Iuchsia "#FF00FF"
aqua "#00FFFF"

Culorile de mai sus vor Ii mai putin "aprinse" daca in loc de FF se Ioloseste AA, spre exemplu:
#00AA00. Folosind acelasi sistem se va putea speciIica culoarea de Iundal (background) a unei
pagini web, in cadrul tag-ului BODY despre care s-a vorbit la inceput:

BODY BGCOLOR#DDFFFF~

Tag-ul BODY mai poate contine si alte inIormatii interesante, ca de exemplu culoarea cu care
vor Ii aIisate link-urile catre alte pagini (utilizand atributul LINK) si link-urile catre alte pagini care au
Iost vizitate deja (Iolosind atributul VLINK-visited link):

BODY BGCOLOR#DDFFFF LINK#0000AA VLINK#0000AA~

In Iisierul index.html din Notepad, se va inlocui randul ce contine tag-ul <BODY> cu cel de
mai sus si se va salva Iisierul (se inlocuieste tag-ul BODY de la inceputul Iisierului, nu cel de la sIarsit
care este /BODY~). Fundalul paginii ar trebui sa devina albastru deschis.

Exemple
1.
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
Un text de culoare rosie.
</body>
</html>

2.
<html>
<head>
<title>Atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>

Tabele

Tabelele se utilizeaza Iolosind tag-ul <TABLE>...</TABLE>. Tabelele sunt Iormate din
csute, care sunt organizate pe randuri (rows - linii orizontale de casute) si coloane (columns).

1

Tabelul de mai sus contine 3 randuri, Iiecare rand continand 5 elemente. In interiorul unui tag
de tip TABLE, randurile sunt declarate Iolosind tag-ul <TR>...</TR>, iar in cadrul Iiecarui tag TR
elementele sunt declarate cu tag-ul <TD>...</TD>. Fiecare element (casuta) poate contine text,
imagini, link-uri, etc. Un tabel de tipul celui de mai sus ar Ii codiIicat astIel:

TABLE~
TR~TD~1/TD~TD~/TD~TD~/TD~TD~/TD~TD~/TD~/TR~
TR~TD~/TD~TD~/TD~TD~/TD~TD~/TD~TD~/TD~/TR~
TR~TD~/TD~TD~/TD~TD~/TD~TD~/TD~TD~/TD~/TR~
/TABLE~

In exemplul de mai sus exista un tag <TABLE>...</TABLE> care delimiteaza tabelul si trei
tag-uri <TR>...</TR> corespunzand celor trei randuri ale tabelului. Fiecare tag TR contine cate 5 tag-
uri <TD>...</TD>. Intre TD~ si /TD~ se introduce continutul eIectiv al Iiecarei casute. In exemplul
de mai sus numai casuta din stanga-sus are continut - ciIra 1 (csutele Ir continut nu sunt aIisate).
Tag-urile de deIinire a tabelelor pot avea diverse atribute, pentru Iormatarea tabelului. AstIel,
tag-ul TABLE poate avea:
- WIDTH x sau WIDTH x - acesta speciIica lungimea intregului tabel in pixeli (de
exemplu WIDTH 500) sau in procente Iata de lungimea intregii Ierestre (de exemplu
WIDTH 50);
- HEIGHT x sau HEIGHT x - similar cu WIDTH, dar pentru inaltimea intregului tabel
(exemple: HEIGHT 300 sau HEIGHT 100);
- BORDER x - daca x este 1 atunci tabelul va avea si "cadru" (linii de delimitare a
elementelor. Daca x este 0, atunci acestea vor lipsi (deci BORDER0 sau BORDER1);
- CELLSPACING x - speciIica spatiul dintre casute, in pixeli;
- CELLPADDING x - speciIica spatiul dintre marginea unei casute si continutul acesteia,
in pixeli. Si in acest caz pot Ii Iolosite toate aceste atribute impreuna, numai o parte a lor,
sau nici unul. Un tag TABLE ce le Ioloseste pe toate ar arata astIel:

TABLE WIDTH80 HEIGHT200 BORDER1 CELLPADDING0 CELLSPACING5~
..........
/TABLE~

Si tag-ul TD poate avea tot Ielul de atribute interesante:
- WIDTH x sau WIDTH x - lungimea casutei in pixeli sau ca procent din lungimea
intregului tabel;
- HEIGHT x sau HEIGHT x - inaltimea casutei in pixeli sau ca procent din inaltimea
intregului tabel;
- BGCOLOR #RRGGBB - culoarea Iundalului casutei, ca de exemplu BGCOLOR
#EEEEDD.
- ALIGN RIGHT, ALIGN LEFT sau ALIGN CENTER - modul cum va Ii pozitionat
continutul casutei in casuta: la dreapta, la stanga sau central;
- VALIGN TOP, VALIGN BOTTOM sau VALIGN CENTER - similar, dar pentru
pozitionarea pe verticala: sus, jos sau central. Tine cont de Iaptul ca textul din interiorul
unei casute trebuie Iormatat si el la randul sau. O casuta ce ar contine un text rosu pe Iond
verde deschis s-ar codiIica astIel:

TD BGCOLOR #DDFFDD~FONT COLOR #AA0000~text/FONT~/TD~

Exist posibilitatea de a se insera ntr-o pagin HTML si tabele atipice, ca de exemplu:

CELULA 1 CELULA 2 CELULA 3
CELULA 4

Un asemenea tabel s-ar codiIica astIel:

TABLE~
TR~TD~CELULA 1/TD~TD~CELULA 2/TD~TD~CELULA 3/TD~/TR~
TR~TD COLSPAN3~CELULA 4/TD~/TR~
/TABLE~

Se poate remarca utilizarea atributului COLSPAN 3 in prima celula a celui de-al doilea rand.
Acesta spune ca celula respectiva se "intinde" pe lungimea a trei celule din structura normala a
tabelului.Desigur, acest al doilea rand va contine numai o singura celula, nu trei. Similar se poate
proiecta un tabel cu o celula care se intinde pe verticala pe spatiul a doua celule:

CELULA 1 CELULA 2
CELULA 4 CELULA 5
CELULA 3

Codul acestuia este:

TABLE~
TR~TD~CELULA 1/TD~TD~CELULA 2/TD~
TD ROWSPAN2~CELULA 3/TD~/TR~
TR~TD~CELULA 4/TD~TD~CELULA 5/TD~/TR~
/TABLE~

Se poate observa utilizarea atributului ROWSPAN2 in a treia celula a primului rand al
tabelului. Acesta spune ca aceasta celula se intinde pe verticala pe "inaltimea" a doua randuri. Desigur,
cel de-al doilea rand contine numai doua celule (nu trei), intrucat a treia vine din randul de sus.
Tabelele pot reprezenta un instrument Ioarte puternic in cadrul unui Iisier HTML. O tehnica
interesanta de pozitionare cat mai exacta a unor inIormatii consta in utilizarea unor tabele in tabele
(tag-uri TD care au drept continut un tabel, de exemplu). In acest caz este Ioarte importanta
succesiunea corecta a tag-urilor TD, TR si TABLE pentru o aIisare corecta. O alta tehnica interesanta
este utilizarea tabelelor cu BORDER0 (Iara cadru) pentru gruparea unor date Iara a da impresia
existentei unui tabel propriu-zis.

Exemple de tabele

In continuare se dau doua exemple de tabele care pot Ii incarcate si in Iisierul index.html
deschis in Notepad:

TABLE WIDTH700 BORDER0 CELLPADDING5 CELLSPACING5~
<TR>
TD WIDTH30 BGCOLOR#006666 ALIGNLEFT~
FONT FACEVERDANA,ARIAL SIZE2 COLOR#FFFFFF~
B~ Adresa: /B~/FONT~/TD~
TD BGCOLOR"#CCEEEE" ALIGNLEFT~
FONT FACEVERDANA,ARIAL SIZE2~
I~Strada Universitatii, Nr. 13/I~/FONT~/TD~
</TR>
<TR>
TD WIDTH30 BGCOLOR#006666 ALIGNLEFT~
FONT FACEVERDANA,ARIAL SIZE2 COLOR#FFFFFF~
B~ Descriere: /B~/FONT~/TD~
TD BGCOLOR"#CCEEEE" ALIGNLEFT~
FONT FACEVERDANA,ARIAL SIZE2~
I~Aici se scrie textul de prezentare/I~/FONT~/TD~
</TR>
/TABLE~

Exemplul de mai sus nu contine decat notiuni explicate deja in capitolele anterioare: este vorba
de un tabel "clasic" cu lungime de 700 pixeli (WIDTH700), Iara cadru (BORDER0) si cu spatiu de
5 pixeli atat intre casute (CELLSPACING5) cat si intre cadru si inIormatia din casuta
(CELLPADDING5); tabelul are doua randuri (continute intre cele doua perechi de tag-uri
<TR>...</TR>); Iiecare rand contine cate doua casute:
- prima de lungime 30 din total (WIDTH30) cu culoarea Iondului bleumarin
(BGCOLOR#006666) si textul aliniat la stanga. Textul din aceasta casuta este scris cu
Iont Verdana de dimensiune 2 si culoare alba (FONT FACEVERDANA,ARIAL SIZE2
COLOR#FFFFFF) si este ingrosat (B).
- a doua casuta cu Iond bleu (BGCOLOR#CCEEEE) si text aliniat de asemenea la stanga
(ALIGNLEFT). Contine text cu acelasi Iont Verdana de dimensiune 2, dar scris cu negru
(implicit) si cu litere inclinate (I).

Un tabel, ceva mai simplu:
TABLE WIDTH700 BORDER1 CELLPADDING5~
TR~
TD BGCOLOR#CCEEEE~FONT FACEVERDANA,ARIAL SIZE2~B~ NOU
/B~
.........
/TD~
/TR~
/TABLE~

Acest tabel are aceeasi lungime de 700 de pixeli (WIDTH700), are si cadru (BORDER1) si
un spatiu de la cadru la textul din casute de 5 pixeli (CELLPADDING5). Tabelul contine un singur
rand si o singra casuta in acest rand. Casuta are Iondul bleu (BGCOLOR#CCEEEE). In interiorul
casutei este un text scris cu Iont Verdana de dimensiune 2. Unele cuvinte din tabel sunt scrise cu bold
(B).
Alte prelucrri

Ul alt tag care poate apare n Iisierele HTML este <HR>. Acesta are un rol Ioarte simplu si
anume de a trasa o linie orizontala pe toata latimea Ierestrei. Acest tag Iunctioneaza la Iel ca si BR
(adica, nu se Ioloseste /HR~). Tag-ul HR~ primeste si atributul WIDTH sub Iorma WIDTH x sau
WIDTH x care speciIica lungimea liniei in pixeli sau ca procent din latimea totala a Ierestrei.
Exemplu:

HR WIDTH600~

In Iisierul index.html deschis in Notepad se vor introduce urmatoarele instructiuni intre ultimul
tag </TABLE> si tag-ul </CENTER> de la sIarsitul Iisierului:

BR~BR~BR~BR~BR~BR~HR~
FONT FACEARIAL SIZE1~Toate drepturile rezervate. Pagina realizata in anul 2004/FONT~

Se va Iolosi aceasta ocazie pentru a prezenta si modalitatea de includere a unor comentarii
intr-o pagina HTML. Acestea trebuie incluse intre  ca in exemplul urmator:

!-- acest text nu va Ii aIisat in pagina --~

Lucrul cu imagini

Pentru inserarea unor imagini n Iisierele HTML se va utiliza tag-ul IMG. Atributele acestuia
sunt urmtoarele:

- Atribut SemniIicatie Valoare
- SRC - reprezint adresa la care se aIl imaginea precum si numele acesteia
- ALT - text alternativ pentru descrierea imaginii text
- WIDTH - ltimea imaginii pixeli
- HEIGHT - nltimea imaginii pixeli
- ALIGN - pozitionarea pe vertical sau orizontal a imaginii top , middle , bottom , leIt , right
- HSPACE - spatiul orizontal dintre imagine si textul care o nconjoar pixeli
- VSPACE - spatiul orizontal dintre imagine si text pixeli
- USEMAP - atribut care speciIic adresa unde se gseste deIinitia unei imagini de tip hart
aIlat pe partea de client
- ISMAP - speciIic utilizarea unei imagini de tip hart al crei Iisier de deIinitie se aIl pe
server
- BORDER - stabileste dimensiunea marginilor care nconjoar o imagine ce este Iolosit drept
legtur pixeli

Atributul SRC indic adresa sau locul unde se aIl Iisierul imagine ce urmeaz a Ii introdus n
pagin precum si numele acestuia. n termeni tehnici se spune c acest atribut are drept valoare un
URL (UniIorm Resource Locators). Un URL trebuie nteles ca Iiind o simpl adres de Internet.
Exemple:
SRC"numeimagine.giI"
SRC"imagini/numeimagine.giI"
SRC"http://www.numesite.com/imagini/numeimagine.giI"
Primele dou URL-uri (adrese) se mai numesc si adrese relative. Aceste adrese au drept punct
de reIerint locul de unde se Iace adresarea. Mai concret, este vorba de locul unde se aIl pagina
HTML n care se doreste a Ii inserat imaginea aIlat n Iisierul "numeimagine.giI". n primul exemplu
ea se aIl n acelasi director cu pagina html. n al 2-lea exemplu, imaginea se aIl ntr-un subdirector
intitulat "imagini".
Ultimul exemplu reprezint o adres absolut, adic o adres de internet complet unde se
regseste un anumit Iisier. Spre deosebire de adresele relative care se modiIic odat cu modiIicarea
punctului de reIerint (n sensul c Iisiere HTML se pot aIla si n alte directoare), adresele absolute
rmn neschimbate. Exemple:

- SRC"imagine.giI" imaginea se aIl n acelasi director cu documentul HTML n care
urmeaz s Iie plasat
- SRC"imagini/imagine.giI" imaginea se aIl n subdirectorul imagini (la un nivel
imediat inIerior) n timp ce documentul exemplu.html se aIl n directorul probe
- SRC"../imagine.giI" imaginea se aIl n directorul imediat superior (pentru a Iace
acest reIerire n sens superior se utilizeaz "../"
- SRC"../../imagine.giI" imaginea se aIl la dou nivele superioare Iat de Iisierul
exemplu.html
- SRC"../imagini/imagine.giI" calea ce trebuie parcurs este un director n sus (pentru a
ajunge n directorul probe) si un director n jos pentru a ajunge n directorul imagini
- SRC"../../../media/imagini/imagine.giI" 3 nivele n sus (sunt numerotate) pentru a
ajunge n directorul principal si de 2 nivele n jos pentru a ajunge n subdirectorul
imagini. n practic ar trebui evitate asemenea structuri alambicate.
n ceea ce priveste adresele absolute, acestea nu se modiIic n Iunctie de pozitia Iizic a
Iisierului de unde sunt apelate. Revenind la ultimul exemplu, o adres absolut ar arta sub Iorma:

SRC"http://www.numesite.com/principal/media/imagini/imagine.giI"

Adresele relative sunt de preIerat celor absolute. Avantajul principal este dat de Iaptul c
Iisierele sunt accesate ceva mai rapid. La acesta se adaug si economia de eIort care se Iace prin
omiterea scrierii unei adrese complete. Utiliznd adresele relative, accesarea legturilor dintr-un site se
poate Iace att n Iaza de proiectare (atunci cnd directoarele se aIl pe HDD propriu) ct si n cazul n
care exist o variant "oIIline" care va Ii oIerit vizitatorilor. Adresele relative pot Ii utilizate numai n
cazul n care att Iisierele care sunt reIerite, ct si Iisierele din care se Iace reIerirea se regsesc pe
acelasi site.
Alinierea imaginilor se Iace utiliznd tag-ul ALIGN. Exemple:

IMG SRC"pics/calc.giI" ALIGN"top"~calculator
IMG SRC"pics/ calc.giI" ALIGN"middle"~calculator
IMG SRC"pics/ calc.giI" ALIGN"bottom"~calculator

Pentru a se Iurniza o descriere a imaginii, se utilizeaz atributul ALT. Acest lucru este util n
cazurile n care browser-ele nu au activat optiunea de redare a imaginilor sau n cazul n care, datorit
unei conexiuni mai lente la retea sau un server prea lent, nu se poate ncrca partea graIic a unei
pagini (sau se ncarc incomplet). n aceast situatie, n locul imaginii va aprea un chenar n care va Ii
scris textul alternativ. Exemplu:

Acesta este un calculator.
IMG SRC"calc.giI" ALIGN"leIt" ALT"Descriere imagine"~
Acesta este un calculator.

Dimensiunile exacte ale unei imagini se declar prin intermediul atributelor WIDTH si HEIGHT.
De exemplu:

IMG SRC"calc.giI" ALIGN"leIt" width"80" height"60" ALIGN"leIt"ALT"Descriere
imagine"~

CENTER~IMG SRC"cerc.giI" WIDTH"400" HEIGHT"4"~/CENTER~

Controlul spatiului pe orizontal si pe vertical se realizeaz prin atributele HSPACE si
VSPACE. De exemplu,

IMG SRC"calc.giI" width"80" height"60"HSPACE"20" VSPACE"20" align"leIt"~

Imaginile pot Ii Iolosite si n crearea unor liste, cum ar Ii n exemplul urmtor:

UL~
IMG SRC"a.giI" ALIGN"TOP"~Imaginea ABR~
IMG SRC"b.giI" ALIGN"TOP"~Imaginea B BR~
IMG SRC"ci.giI" ALIGN"TOP"~Imaginea C BR~
/UL~

Link-uri si pozitionare

Un element important al oricarei pagini web il constituie link-urile catre alte pagini. Acestea
pot Ii link-uri externe, care Iac reIerire catre un alt site, sau link-uri interne care Iac reIerire catre alte
pagini ale aceluiasi site. Ambele tipuri se codiIica asemanator prin Iolosirea unui tag de tipul

<A HREFlink.html>...</A>

(pentru un link intern) sau

<A HREFhttp://www.abc.abc>...</A>

pentru un link extern. AstIel codul de mai jos va aIisa textul "Apasati aici pentru pagina 2" care prin
apasare va incarca Iisierul pag2.html:

A HREFpag2.html~Apasati aici pentru pagina 2/A~
A HREF"http://www.google.com/"~Motor de cutare/a~

Codul de mai jos va aIisa "Apasati aici pentru pagina XYZ SRL", text care prin apasare va incarca
pagina www.xyz.xyz:

A HREFhttp://www.xyz/xyz~Apasati aici pentru pagina XYZ SRL/A~

In exemplul de mai sus se poate speciIica in ce mod se va incarca pagina respectiva Iolosind atributul
TARGET:
- TARGET"nume", unde nume este numele pe care vrei sa il dai unei noi Ierestre unde se
va incarca pagina. Poti Iolosi si TARGET"blank" pentru o Iereastra noua sau
TARGET"selI" pentru incarcarea in aceeasi Iereastra.

O alta varianta este posiblitatea transmiterii unui e-mail. AstIel, codul de mai jos aIiseaza "Scrie-ne!",
text care prin apasare va deschide o Iereastra pentru transmiterea unui mesaj la adresa oIIiceabc.abc:

A HREF"mailto:oIIiceabc.abc"~Scrie-ne!/A~

In acelasi mod o pagina HTML poate Ii impartita in mai multe "capitole" (sectiuni), in caz ca este
Ioarte lunga. AstIel, Iiecarei sectiuni i se va asigna un nume, nume ce va putea Ii utilizat in incarcarea
paginii respecitve, astIel incat sa se aIiseze exact sectiunea respectiva. Fie Iisierul lucrare.html care se
doreste a Ii impartit in doua sectiuni.Codul care Iace acest lucru ar Ii:

A NAMEunu~Sectiunea 1/A~
...text pentru sectiunea 1...
A NAMEdoi~Sectiunea 2/A~
..text pentru sectiunea 2...

Valoarea atributului NAME este unic pentru o pagin HTML. Acest atribut poate avea aceeasi
valoare, n dou pagini HTML diIerite.
Daca se doreste s se incarce Iisierul lucrare.html din alta pagina, dar astIel incat sa se incarce
direct sectiunea 2, se va utiliza:

A HREFlucrare.html#doi~Apasa aici/A~

In mod similar se pot aIisa Iisiere text (cu extensia txt) sau se poate da posibilitatea vizitatorului sa
salveze pe disc un alt tip de Iisier (zip de exemplu):

A HREFraport.txt~Raport/A~

sau

A HREFprogram.zip~Salveaza programul/A~

Un alt element util in Iormatarea paginii web este tag-ul <CENTER >...</CENTER>. Acesta
este utilizat pentru alinierea pe centru a unor elemente (texte, tabele imagini). Tot ce este scris intre
tag-ul CENTER~ si /CENTER~ va apare centrat.

B~A HREF"mailto:inIoabc.abc.ro"~e-mail/A~/B~
A HREFhttp://www.xyz.xyz TARGET"blank"~aici/A~

Acum toate elementele tabelului (titlul si cele doua tabele) sunt pozitionate pe centru si exista
link-uri pentru e-mail si pagina XYZ.

Exemple:

OL~
LI~A NAME"1" HREF"#raspuns1"~ntrebarea 1/A~
LI~A NAME"2" HREF"#raspuns2"~ntrebarea 2/A~
LI~ . . . . . . . . . . . . . . . . .
/OL~
OL~
LI~A HREF"raspuns1"~text raspuns 1.../A~A HREF"#1"~inapoi/A~
LI~A HREF"raspuns2"~text raspuns 2.../A~A HREF"#2"~inapoi/A~
LI~ . . . . . . . . . . . . . . . . . .
/OL~

Utilizarea imaginilor ca legturi:

A HREF"http://www.test.com/"~IMG SRC"Ioto/logo1.giI" ALT"Teste HTML"~/A~

Realizarea legturilor ctre elemente non-HTML:

A HREF"tutorial.pdI"~Tutorial HTML n Iormat PDF/A~

Notiuni de Baza HTML

Încărcat de

Informații document

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

Notiuni de Baza HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Notiuni de HTML

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