Sunteți pe pagina 1din 34

Ghidul nceptorului

pentru

H TM L

CUPRINS
PORNII LA DRUM .............................................................................................1
Termeni care trebuie cunoscuti ........................................................................................ 1
Ce nu este acoperit .......................................................................................................... 1
DOCUMENTE HTML .............................................................................................2
Ce este un document HTML............................................................................................. 2
Editoare HTML ................................................................................................................. 2
Punei-va fiierele pe un server ........................................................................................ 2
Etichete explicate ............................................................................................................. 2
Documentul HTML minim ................................................................................................. 3
ETICHETE DE MARCARE .....................................................................................4
HTML ............................................................................................................................... 4
HEAD ............................................................................................................................... 4
TITLE [Denumirea documentului] ..................................................................................... 4
BODY [Corp] .................................................................................................................... 4
Titluri ................................................................................................................................ 5
Paragrafe.......................................................................................................................... 5
Liste .................................................................................................................................. 7
Liste nenumerotate .......................................................................................................................... 7
Liste numerotate .............................................................................................................................. 7
Liste de definire ............................................................................................................................... 8
Liste incrucisate............................................................................................................................... 9
Text preformatat ............................................................................................................... 9
Citate extinse.................................................................................................................. 10
ntreruperi forate de linie/Adrese potale ....................................................................... 10
Linii orizontale ................................................................................................................ 11
FORMATAREA CARACTERELOR ........................................................................12
Stil logic sau fizic ............................................................................................................ 12
Stiluri logice .................................................................................................................................. 12
Stiluri fizice .................................................................................................................................... 13
Secvene de scpare (sau Entitati de caractere) ............................................................ 13
LEGATURI .........................................................................................................15
Cale relativa sau cale absoluta....................................................................................... 15
URL-uri ........................................................................................................................... 16
Legaturi ctre anumite seciuni....................................................................................... 17
Legaturi ctre seciuni ale altor documente .................................................................... 17
Legaturi ctre anumite seciuni in documentul curent .................................................... 17
Trimitei e-mail ................................................................................................................ 18

IMAGINI IN DIRECT .........................................................................................19


Caracteristicile mrimii imaginilor ................................................................................... 19
Alinierea imaginilor ......................................................................................................... 19
Alinierea textului cu o imagine ...................................................................................................... 19
Imagini fara text ............................................................................................................................ 20
Alternarea text pentru imagini ...................................................................................................... 20
Imagini ca hiper-legaturi .............................................................................................................. 20
Grafice pentru fond......................................................................................................... 21
Culoare pentru fond........................................................................................................ 22
Imagini, sunete si animaii externe ................................................................................. 22
TABELE .............................................................................................................24
Elementele tabelului ....................................................................................................... 24
Element .......................................................................................................................................... 24
Descriere ....................................................................................................................................... 24
Caracteristicile tabelelor ................................................................................................. 25
Caracteristica ................................................................................................................................ 25
Descriere ....................................................................................................................................... 25
Formatul general al unui tabel ........................................................................................ 25
Tabele pentru informaii netabelare ................................................................................ 26
FORME ..............................................................................................................27
EVITAREA PROBLEMELOR ................................................................................28
Evitai suprapunerea etichetelor ..................................................................................... 28
Incrustai doar ancore si etichetele pentru caractere ...................................................... 28
Ultimii pai ...................................................................................................................... 29
Validai-va codul ........................................................................................................................... 29
Aducei-va fiierele la zi ................................................................................................................ 29
Browserele difer .......................................................................................................................... 29
Comentai-va fiierele ..................................................................................................... 30
ALTE INFORMATII ............................................................................................31
Ghid pentru stil ............................................................................................................... 31
Alte documente introductive ........................................................................................... 31
Alte informaii in direct .................................................................................................... 31

*1*

Pornii la drum
Termeni care trebuie cunoscui
WWW - World Wide Web [Reea rspndita in toata lumea]
Web - World Wide Web [Reea rspndita in toata lumea]
SGML - Standard Generalized Markup Language [Limbaj de marcare generalizat standard]
DTD - Document Type Definition [Specificarea formala a unui limbaj de marcare, scrisa folosind SGML]
HTML - HyperText Markup Language [HTML este un DTD tip SGML]
In cuvinte obinuite, HTML este o colecie de stiluri independente de platforma (indicate prin etichete de marcare)
care definesc variatele componente ale unui document WWW. HTML a fost inventat de Tim Berners-Lee pe cnd se
afla la CERN, Laboratorul European pentru Fizica Particulelor in Geneva.

Ce nu este acoperit
Acest abecedar presupune ca:
stiti sa folosii un browser de Internet
avei cteva cunostinte generale despre modul cum functioneaza serverele de Internet si browserele
avei acces la un server de Internet (sau dorii sa creai documente HTML pentru folosire personala in modul de
vizualizare locala)

http://cristeis.go.ro

cristeis@yahoo.com

*2*

Documente HTML
Ce este un document HTML
Documentele HTML sunt fiiere formate din texte simple (cunoscute si sub numele de ASCII) care pot fi create
folosind orice editor de text (de exemplu: Emacs pe aparatele UNIX; SimpleText pe Macintosh; Notepad pe
aparatele ce folosesc Windows). De asemenea putei folosi un program de procesare a cuvintelor daca va amintii sa
va salvai documentul ca "text only with line breaks" [doar text cu ntreruperi de linie].

Editoare HTML
Sunt disponibile si alte editoare WYSIWYG: Claris Home Page sau Adobe PageMill, amndou pentru Windows si
Macintosh. Poate vei dori sa incercati unul din ele dup ce vei invata cteva lucruri de baza despre etichetele
HTML. WYSIWYG este un acronim pentru "what you see is what you get" [Ce vezi este ce obii]; adic va
proiectai documentele HTML in mod vizual, ca si cum ai folosi un procesor de cuvinte, in loc sa scriei etichete de
marcare intr-un fiier format din text simplu si imaginndu-va cum va arata pagina care va rezulta. Este folositor sa
cunoasteti destul HTML in cazul in care dorii sa adaugati etichete HTML pe care editorul vostru WYSIWYG nu le
suporta.
Daca inca nu v-ai ales programul, vizitai pagina lui Tom Magliery despre editoare HTML
http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/ (organizate dup platforma) pentru a va ajuta in cutarea
programului corespunztor.

Punei-va fiierele pe un server


Daca avei acces la un server de Internet la coala sau la munca, contactai webmasterul (persoana care se ocupa cu
intretinerea serverului) pentru a vedea cum putei sa va punei fiierele pe Internet. Daca nu avei acces la un server
la coala sau la munca, vedei daca local gasiti un FreeNet, care furnizeaz acces gratuit la Internet. Daca nu gasiti
aa ceva, va trebui sa contactai un furnizor de Internet local care va va pune fiierele pe Internet pentru o taxa.
(Verificai ziarele locale pentru publicitate sau la Camera de Comer pentru numele firmelor.)

Etichete explicate
Un element este o componenta fundamentala din structura unui document format din text. Exemple de elemente sunt
titlurile-urile, tabelele, paragrafele si listele. Ganditi-va la aceasta in felul urmtor: folosii etichete HTML pentru a
marca elementele unui fiier pentru browserul vostru. Elementele pot conine text simplu, alte elemente sau
amndou.
Pentru a indica variatele elemente intr-un document HTML, folosii etichete. Etichetele HTML constau intr-o
paranteza ascuita la stnga (<), un nume al etichetei si o paranteza ascuita la dreapta (>). Etichetele de obicei se
gsesc in perechi (de exemplu <H1> si </H1>) pentru a ncepe si a termina instrucia etichetei. Eticheta de ncheiere
arata ca eticheta de ncepere cu excepia liniei (/) care precede textul in paranteze. Etichetele HTML se gsesc mai
jos.
Unele elemente pot conine o caracteristica, ceea ce reprezint o informaie in plus care este inclusa in eticheta de
ncepere. De exemplu, putei specifica alinierea imaginilor (sus, la mijloc sau jos), incluznd caracteristica
corespunztoare in codul HTML reprezentnd sursa imaginii. Etichetele care au caracteristici opionale sunt notate
mai jos.
NOTA: HTML nu este sensibil la scrierea cu litere mici sau mari. <title> este echivalent cu <TITLE> sau <TiTlE>.
Sunt si cteva excepii care sunt notate in Secvenele de scpare de mai jos.
Nu toate etichetele sunt suportate de ctre toate browserele de Internet. Daca un browser nu suporta o eticheta, pur si
simplu o ignora. Totui, textul care se gaseste intre o pereche de etichete necunoscute va fi afiat.

http://cristeis.go.ro

cristeis@yahoo.com

*3*

Documentul HTML minim


Fiecare document HTML ar trebui sa contina anumite etichete HTML standard. Fiecare document consta din head si
textul din body. Head-ul conine titlul [title] iar body-ul conine textul propriu-zis care este format din paragrafe,
liste si alte elemente.
Elementele necesare sunt artate mai jos:
<html>
<head>
<TITLE>Un exemplu HTML simplu</TITLE>
</head>
<body>
<H1>HTML este uor de invatat</H1>
<P>Bine ai venit in lumea HTML.
Acesta este primul paragraf.
Dei scurt, este totui un paragraf!</P>
<P>Si acesta este al doilea paragraf.</P>
</body>
</html>
Elementele necesare sunt <html>, <head>, <title>, <body> (si etichetele de ncheiere corespunztoare). Deoarece ar
trebui sa includei aceste etichete in fiecare fiier, ai putea lua in cosideratie sa creai un document "template" cu ele.
(Unele browsere vor formata fiierul vostru HTML in mod corect dei aceste etichete nu sunt incluse. Dar unele
browsere nu o vor face! Aa ca asigurai-va ca le-ai inclus.)

Un instrument de invatare
Pentru a vedea o copie a fiierului pe care browserul vostru l citete pentru a genera informaiile din fereastra
curenta, selectai View Source (Vezi Sursa) (sau echivalentul acesteia) din meniul browserului. (Majoritatea
browserelor au un meniu "View" sub care se gaseste aceasta comanda.) Coninutul fiierului, cu toate etichetele
HTML apare intr-o fereastra noua.
Aceasta este o modalitate excelenta pentru a vedea cum se folosete HTML. Desigur, HTML este posibil sa nu fie
corect din punct de vedere tehnic. Odat familiarizai cu HTML si dup ce ai vzut resursele informaionale despre
subiect, vei putea sa distingei intre HTML "bun" si "ru".
Nu uitai ca putei salva un fiier sursa cu coduri HTML si sa-l folosii ca un document "template" pentru paginile
voastre Web sau sa-i modificai formatul pentru a se potrivi scopului vostru.

http://cristeis.go.ro

cristeis@yahoo.com

*4*

Etichete de marcare
HTML
Acest element spune browserului ca fiierul conine informaie codificata in HTML. Extensia fiierului "*.html" de
asemenea indica ca acesta este un document HTML si trebuie folosita. (Daca nu putei folosi dect nume de fiiere
de tipul 8.3 (de exemplu: CasaLee.htm) folosii doar extensia "*.htm".

HEAD
Elementul head identifica prima parte a documentului codificat in HTML care conine titlul. Titlul este artat ca
parte a ferestrei browserului vostru. (vezi mai jos).

TITLE [Denumirea documentului]


Elementul title conine denumirea documentului si identifica coninutul acestuia intr-un context global. Denumirea
este afiata in bara de denumire in partea de sus a ferestrei browserului si nu in interiorul ferestrei (vezi imaginea de
mai jos). De asemenea denumirea apare in lista fierbinte a unei persoane si in lista de bookmark, aa ca alegei ceva
descriptiv, unic si cat de cat scurt. De asemenea denumirea documentului este folosita pentru a identifica pagina
voastr pentru motoarele de cutare. [cum ar fi: HotBot (http://www.hotbot.com/), Yahoo! (http://www.yahoo.com/)
sau Infoseek (http://www.infoseek.com/)].
De exemplu, ai putea include o denumire prescurtata a unei carti mpreuna cu coninutul capitolului: NCSA Ghid
Mosaic (Windows): Instalare. Acesta spune numele software-ului, platforma si coninutul capitolului, ceea ce este
mult mai simplu dect numind documentul pur si simplu Instalare. In general ar trebui sa avei in titlu 64 de
caractere sau mai puin.

BODY [Corp]
A doua -- si cea mai mare -- parte a documentului HTML o reprezint corpul, in care intra coninutul documentului
(afiat in zona de text a ferestrei browserului). Etichetele explicate mai jos sunt folosite in corpul documentului tip
HTML.
Eticheta <body> controleaz culorile, imaginile de fond si alte trasaturi. Pentru a le controla, aceasta eticheta se scrie
astfel:
<body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">

http://cristeis.go.ro

cristeis@yahoo.com

*5*

Putei include sau nu oricare element (bgcolor [culoare de fond], text [text], link [legtura], vlink [legtura vizitata],
alink [legtura activa]). Pentru a stabili culoarea de fond, culoarea textului, legturii, legturii vizitate sau a celei
active, inlocuiti xxxxxx cu valoarea unei culori. Nu le facei aceeai culoare pe toate deoarece nu vei putea vedea
nimic pe pagina.
Pentru valoarea unei culori citii seciunea Culoare pentru fond.

Titluri
HTML are sase nivele de titluri, numerotate de la 1 la 6, 1 fiind cel mai mare. Titlurile in mod normal sunt afiate
intr-un font mai mare i/sau mai gros dect textul normal al corpului. Primul titlu in fiecare document ar trebui sa fie
format <H1>.
Sintaxa elementului titlu este:
<Hy>Textul titlului</Hy>
unde y este un numr intre 1 si 6 specificnd nivelul titlului.
Nu sariti peste nivele de titlu in documentul vostru. De exemplu, nu incepeti cu un titlu de nivelul 1 (<H1>) ca apoi
sa folosii un titlu de nivelul 3 (<H3>).

Titlurile:
<h1>Titlu de nivelul 1</h1>
<h2>Titlu de nivelul 2</h2>
<h3>Titlu de nivelul 3</h3>
<h4>Titlu de nivelul 4</h4>
<h5>Titlu de nivelul 5</h5>
<h6>Titlu de nivelul 6</h6>
Vor arata astfel:

Titlu de nivelul 1
Titlu de nivelul 2
Titlu de nivelul 3
Titlu de nivelul 4
Titlu de nivelul 5
Titlu de nivelul 6

Paragrafe
Spre deosebire de majoritatea procesoarelor de cuvinte orice cantitate de spaiu alb este in mod automat compresata
intr-un singur spaiu cnd documentul tip HTML este afiat in browser. Aa ca nu trebuie sa va facei griji in privina
liniilor lungi. ntreruperea liniilor [word wrapping] poate avea loc in orice punct in documentul sursa fara sa afecteze
modul de afiare al paginii.
In exemplul artat in seciunea Documentul HTML minim, primul paragraf este codificat dup cum urmeaz:
<P>Bine ai venit in lumea HTML.
Acesta este primul paragraf.
Dei scurt, este totui un paragraf!</P>
http://cristeis.go.ro

cristeis@yahoo.com

*6*
In documentul sursa apare o ntrerupere a liniei intre propoziii. Un browser de Internet ignora aceasta ntrerupere a
liniei si ncepe un nou paragraf doar cnd intalneste o alta eticheta <P>.
Important: Trebuie sa indicai paragrafele prin elemente <P>. Un browser ignora liniile albe in textul din sursa.
Fara elementele <P>, documentul devine un paragraf mare. (O excepie o reprezint textul formatat ca "preformatat",
ceea ce se explica mai jos.)
Pentru a face uoara citirea documentelor HTML, punei titlurile pe linii separate, folosii o linie goala sau doua
acolo unde ajuta la identificarea nceputului unei noi seciuni si separai paragrafele cu linii goale (pe lng eticheta
<P>). Aceste extra spatii va vor ajuta cnd va editai fiierele (browserul vostru va ignora aceste extra-spatii deoarece
el are propriul lui set de reguli in ceea ce privete spatiile care nu depind de spatiile pe care le facei in documentul
sursa).
NOTA: Eticheta </P> de ncheiere poate fi omisa. Acest lucru este posibil deoarece browserele inteleg ca atunci
cnd ntlnesc o eticheta <P> nseamn ca paragraful anterior s-a terminat. Totui, de vreme ce HTML permite acum
includerea unor caracteristici in eticheta <P> ar fi mai bine sa o includei.
Folosind <P> si </P> pentru a arata un paragraf nseamn ca putei include caracteristica ALIGN=aliniament in
documentul vostru sursa.
<TT><P ALIGN=CENTER></TT>
Acesta este un paragraf centrat.
[Vezi versiunea formatata mai jos.]
</P>
Acesta este un paragraf centrat.
De asemenea este posibil sa aliniai un paragraf la dreapta incluznd caracteristica ALIGN=RIGHT; la stnga
ALIGN=LEFT este alinierea de baza; daca nu este inclusa nici o caracteristica ALIGN, paragraful va fi aliniat la
stnga.
Caracterele mai pot fi aliniate orizontal folosind etichetele <left>...</left>,<center>...</center>,<right>...</right>
De exemplu, acesta linie
<center>Acesta este un text.</center>
va aprea astfel:
Acesta este un text.
Daca textul respectiv inclus in eticheta <center>...</center> are mai mult dect o linie, toate liniile vor fi centrate.
Pentru a schimba culoarea textului si mrimea lui folosii eticheta:
<font face="Arial" size=9 color="#ff0000">Aici este textul.</font>
Textul va arata astfel:

Aici este textul.


Ca sa facei textul sa clipeasc, folosii eticheta <blink>...</blink>.
De exemplu:
<blink>Acest text clipeste!</blink>

http://cristeis.go.ro

cristeis@yahoo.com

*7*

Liste
HTML suporta liste nenumerotate, numerotate si de definire. Putei intercala listele dar folosii acesta opiune cu
grija deoarece vei urmri cu greu elementele listelor.

Liste nenumerotate
Pentru a crea o lista nenumerotata, cu semne, incepeti cu o eticheta de ncepere a listei <UL> (pentru liste
nenumerotate) scriei eticheta <LI> (parte a listei) urmata de partea individuala; nu este necesara eticheta de
nchidere </LI> incheiati lista cu o eticheta de ncheiere </UL>
Mai jos este o lista model cu trei pari:
<UL>
<LI> mere
<LI> banane
<LI> grep
</UL>
Aceasta se va vedea astfel:
mere
banane
grep
Elementele <LI> pot conine paragrafe multiple. Indicai paragrafele cu o eticheta de paragraf <P>.

Liste numerotate
O lista numerotata (numita si lista ordonata, de unde deriva si numele etichetei) este identica cu o lista
nenumerotata, excepie fcnd folosirea etichetei <OL> in locul etichetei <UL>. Partile listei vor fi formate folosind
tot <LI>.
Urmtorul cod HTML:
<OL>
<LI> portocale
<LI> piersici
<LI> struguri
</OL>
va fi afiat pe ecran astfel:
1. portocale
2. piersici
3. struguri

http://cristeis.go.ro

cristeis@yahoo.com

*8*

Liste de definire
O lista de definire (codificata ca <DL>) de obicei consta din alternarea termenului definiiei (codificat ca <DT>) si o
definire a definiiei (codificata ca <DD>). Browserele in general formateaza definiia pe o linie noua si las un spaiu
la nceputul ei.
In continuare vei gsi un exemplu de lista de definire:
<DL>
<DT> CNAS
<DD> CNAS, Centrul Naional pentru Aplicaii
Supercomputerizate, este localizat pe campusul
Universitatii din Illinois, in Urbana-Champaign.
<DT> Centrul Teoriei Cornell
<DD> CTC este localizat pe campusul Universitatii
Cornell din Ithaca, New York.
</DL>

Rezultatul va arata astfel:


CNAS
CNAS, Centrul Naional pentru Aplicaii Supercomputerizate, este localizat pe campusul Universitatii din Illinois, in
Urbana-Champaign.
Centrul Teoriei Cornell
CTC este localizat pe campusul Universitatii Cornell din Ithaca, New York.
Etichetele <DT> si <DD> de ncepere pot conine paragrafe multiple (indicate prin etichetele de paragraf <P>), liste,
sau alte informaii despre definiie.
Caracteristica COMPACT poate fi folosita deseori daca termenii definiiei sunt foarte scuri. Daca, de exemplu,
aratati nite opiuni pentru calculator, opiunile pot fi scrise pe aceeai linie cu nceputul definiiei.
<DL COMPACT>
<DT> -i
<DD>invoca Mosaic-ul CNAS pentru Microsoft Windows
folosind fiierul de iniializare definit in poteca.
<DT> -k
<DD>invoca Mosaic-ul CNAS pentru Microsoft Windows in
modul chiosc.
</DL>
Rezultatul va arata astfel:
-i invoca Mosaic-ul CNAS pentru Microsoft Windows folosind fiierul de iniializare definit in poteca.
-k invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

http://cristeis.go.ro

cristeis@yahoo.com

*9*

Liste incrucisate
Listele pot fi incrucisate. De asemenea putei avea un anumit numr de paragrafe, fiecare continand o lista
incrucisata intr-un singur element al unei listei.
Urmeaz un model de lista incrucisata:
<UL>
<LI> Cteva state din Noua Anglie:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Doua state din vestul mijlociu:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
Lista incrucisata apare astfel:
Cteva state din Noua Anglie:
Vermont
New Hampshire
Maine
Doua state din vestul mijlociu:
Michigan
Indiana

Text preformatat
Folosii eticheta <PRE> (care vine de la "preformatat") pentru a genera un text intr-un font cu mrime fixa. Aceasta
eticheta de asemenea face sa apar spatiile, noile linii si taburile -- spatiile multiple apar ca spatii multiple iar liniile
se ntrerup in acelai loc ca in fiierul sursa HTML. Aceasta este foarte folositoare pentru listrile de programe.
De exemplu, liniile urmtoare:
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>

http://cristeis.go.ro

cristeis@yahoo.com

* 10 *
apar astfel:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Eticheta <PRE> poate fi folosita cu o caracteristica WIDTH care specifica numrul maxim de caractere pentru o
linie. De asemenea WIDTH semnaleaz browserului sa aleag fontul corespunztor pentru text.
Hiper-legaturile pot fi folosite in cadrul seciunilor <PRE>. Ar trebui sa evitai folosirea altor etichete HTML in
cadrul seciunilor <PRE>.
Deoarece <, > si & au inteles special in HTML, trebuie sa folosii secvenele lor de scpare (&lt;, &gt; si &amp;)
pentru a utiliza aceste caractere. Vezi seciunea Secvene de scpare pentru mai multe informaii.

Citate extinse
Folosii eticheta <BLOCKQUOTE> pentru a include citate lungi intr-un bloc separat pe ecran. Majoritatea
browserelor schimba marginile citatului pentru a-l separa de textul nconjurtor.
In exemplul:
<P>Omiteti cuvintele fara rost.</P>
<BLOCKQUOTE>
<P>Scrisul viguros este concis. O propoziie ar trebui
sa nu contina cuvinte inutile, un paragraf propoziii inutile,
din acelai motiv din care un desen nu ar trebui sa aib
linii inutile si o maina piese inutile.
</P>
<P>--William Strunk, Jr., 1918 </P>
</BLOCKQUOTE>

rezultatul este:
Omitei cuvintele fara rost.
Scrisul viguros este concis. O propoziie ar trebui sa nu contina cuvinte inutile, un paragraf propoziii inutile, din
acelai motiv din care un desen nu ar trebui sa aib linii inutile si o maina piese inutile.
--William Strunk, Jr., 1918

ntreruperi forate de linie/Adrese potale


Eticheta <BR> forteaza o ntrerupere de linie fara nici un spaiu (alb) intre linii. Folosirea elementelor <P> pentru
linii scurte de text cum ar fi adresele potale are ca rezultat un spaiu alb nedorit, in plus.
De exemplu, pentru:
Centrul Naional pentru Aplicaii Supercomputerizate<BR>
Bulevardul East Springfield, nr. 605<BR>
Champaign, Illinois 61820-5518<BR>
http://cristeis.go.ro

cristeis@yahoo.com

* 11 *
Rezultatul este:
Centrul Naional pentru Aplicaii Supercomputerizate
Bulevardul East Springfield, nr. 605
Champaign, Illinois 61820-5518

Linii orizontale
Eticheta <HR> produce o linie orizontala lata cat fereastra browser-ului. O linie orizontala este folositoare pentru
separarea seciunilor importante ale documentului.
Putei modifica latimea (grosimea = size) si lungimea (procentul de fereastra acoperit de linie = width) unei linii. De
asemenea se poate controla alinierea cu eticheta align=left/right/center (stnga/dreapta/centru). Pentru crearea unei
linii negre se adaug eticheta noshade. Experimentai cu setrile pana cnd suntei mulumit de prezentare.
De exemplu:
<HR SIZE=4 WIDTH="50%" align=center>
este afiata astfel:
Nota: liniile artistice folosite pe multe pagini web (cum este si cea de mai jos) nu sunt fcute cu eticheta <hr>. Ele
sunt imagini.

http://cristeis.go.ro

cristeis@yahoo.com

* 12 *

Formatarea caracterelor
HTML are doua tipuri de stiluri pentru cuvintele sau propoziiile individuale: logic si fizic. Stilurile logice [Logical
Styles] formateaza textul conform intelesului sau, in timp ce stilurile fizice [Physical Styles] indica aparenta specifica
a unei seciuni. De exemplu, in propoziia anterioara, cuvintele "stiluri logice" au fost formatate ca "scoatere in
evidenta = emphasis". Acelai efect (formatarea acelorai cuvinte in stil aplecat) ar fi putut fi obinut printr-o eticheta
diferita care spune browserului sa "pun aceste cuvinte in forma aplecata".

Stil logic sau fizic


Daca stilurile fizice si cele logice au acelai rezultat pe ecran, de ce exista doua?
In universul SGML ideal, coninutul difer de prezentare. Astfel SGML marcheaz un titlu [heading] de nivelul unu
ca titlu de nivelul unu, dar nu specifica ca titlul de nivelul unu ar trebui sa fie, de exemplu, mare de 24 de puncte,
ingrosat, centrat si cu fontul Times [24-point bold Times centered]. Avantajul acestei apropieri (este similara in
concept cu foile de stil din multe procesoare de cuvinte) este ca daca va hotarati sa schimbai titlurile de nivelul unu
sa fie mari de 20 de puncte, aezat la stnga si cu fontul Helvetica [20-point left-justified Helvetica], nu trebuie dect
sa schimbai definirea titlului de nivelul unu din browserul vostru de internet. Intr-adevr, in ziua de astzi multe
browsere va las sa definii cum dorii sa fie afiate pe ecran diferite etichete HTML, folosind aa numitele
cascading style sheets [foi de stil in cascada], sau CSS. CSS este mai avansat dect HTML totui, si nu va fi acoperit
in acest ghid. (Putei afla mai multe despre CSS la adresa de internet CSS World Wide Web Consortium
http://www.w3c.org/Style/.)
Alt avantaj al etichetelor logice este ca ele sunt mai simple. Este mai simplu sa marchezi ceva ca <H1> dect sa-ti
aminteti ca titlurile de nivelul unu sunt mari de 24 de puncte, centrate, ingrosate si cu fontul Times, sau orice alt
ceva. De exemplu, considerai eticheta <STRONG>. Majoritatea browserelor o afiseaza printr-un text ingrosat.
Totui, este posibil ca o persoana sa doreasc ca aceste seciuni sa fie afiate in culoarea roie. (Acest lucru este
posibil folosind un cascading style sheet local pe calculatorul persoanei respective.) Stilurile logice ofer aceasta
flexibilitate.
Desigur, daca dorii ca ceva sa fie afiat aplecat (de exemplu) si nu vrei ca setarea browserului sa-l afieze altfel, ar
trebui sa folosii stilurile fizice. Deci, daca folosii stilurile fizice, marcnd ceva intr-un anumit fel, ntotdeauna acel
lucru va fi afiat in acel fel pentru cei care citesc documentul vostru.
Incercati sa folosii un singur fel de stil. Daca incepeti folosind stilurile fizice, folosii-le pana la sfarsit. Daca la
folosii pe cele logice, folosii-le doar pe acestea. Nu uitai ca viitorul HTML e posibil sa nu suporte anumite stiluri
logice, ceea ce nseamn ca browserele nu vor afia codificarea voastr cu stiluri logice. (De exemplu, eticheta
<DFN> -- prescurtare pentru "definition [definiie]", si de obicei afiata in litere aplecate -- nu este suportata peste tot
si va fi ignorata daca browserul cititorului nu o intelege.)

Stiluri logice
<DFN>
pentru un cuvnt care este definit. In mod normal este afiat aplecat. (NCSA Mosaic este un browser de internet.)
<EM>
pentru scoatere in evidenta. In mod normal este afiat aplecat. (Consultanii nu va pot reseta parola dect daca
sunai la linia de ajutor.)
<CITE>
pentru titluri de carti, filme, etc. In mod normal este afiat aplecat. (Ghidul nceptorului pentru HTML)
<CODE>
pentru cod de calculator. Afiat intr-un font cu latimea fixa [fixed-width font]. (Fiierul titlu <stdio.h>)
<KBD>
pentru introducere de la tastatura. In mod normal afiat intr-un font cu latimea fixa simplu. (Introducei parola pentru
a va schimba parola.)

http://cristeis.go.ro

cristeis@yahoo.com

* 13 *
<SAMP>
pentru o secvena de caractere literale. Afiat intr-un font cu latimea fixa. (Eroare de segmentare: Miez pierdut.)
<STRONG>
pentru scoatere in evidenta puternica. In mod normal afiat ingrosat. (NOTA: ntotdeauna verificai-va legaturile.)
<VAR>
pentru o variabila, unde vei nlocui variabila cu o informaie specifica. In mod normal afiata cu litere aplecate.
(rmnumeledocumentului terge documentul.)

Stiluri fizice
<B>
text ingrosat: <b>text</b> apare text
<I>
text aplecat: <I>text</I> apare text
<U>
text subliniat: <u>text</u> apare text
<TT>
text de maina de scris, de ex. font cu latimea fixa.

Secvene de scpare (sau Entitati de caractere)


Entitatile de caractere au doua funcii:

nlocuirea caracterelor speciale


afiarea altor caractere care nu sunt disponibile in setul de caractere simple ASCII (caractere primare cu semne
diacritice)

Trei caractere ASCII -- paranteza ascuita la stnga (<), paranteza ascuita la dreapta (>), si ampersand-ul (&) -- au
inteles special in HTML si de aceea nu pot fi folosite "cum sunt" ["as is"] in text. (Parantezele ascuite sunt folosite
pentru a indica nceputul si sfarsitul etichetelor HTML, iar ampersand-ul este folosit pentru a indica nceputul unei
secvene de scpare.) Semnele de citare duble pot fi folosite cum-sunt dar se poate folosi si o entitate de caracter (").
Pentru a folosi unul din cele trei caractere intr-un document HTML, trebuie sa introducei secvena lui de scpare [its
escape sequence]:
&lt;
secvena de scpare pentru <
&gt;
secvena de scpare pentru >
&amp;
secvena de scpare pentru &
Alte secvene de scpare suporta caractere accentuate, cum ar fi:
&ouml;
un o mic cu doua puncte deasupra:
&ntilde;
un n mic cu un "aproximativ" deasupra:
&Egrave;
un E mare cu accent grav:
Putei substitui literele o, n si E de deasupra cu altele. Vizitai World Wide Web Consortium pentru o lista completa
cu secvene de scpare la adresa
http://www.w3.org/hypertext/WWW/MarkUp/html-spec/html-spec_13.html.
http://cristeis.go.ro

cristeis@yahoo.com

* 14 *
sau vizitai adresa
http://cristeis.go.ro/ghid-pt-HTML/secvente.html
pentru o lista cu 95 de caractere de scpare pe care am pus-o eu acolo pentru cine are nevoie.
Pentru a scrie caracterele in documentul vostru copiai secvena corespunztoare si lipii-o (paste) in documentul
vostru sursa.
NOTA: Spre deosebire de restul HTML, secvenele de scpare sunt sensibile la mrimea literelor (litere mari sau
mici). De exemplu, nu putei folosi &LT; in loc de &lt;.

http://cristeis.go.ro

cristeis@yahoo.com

* 15 *

Legturi
Puterea principala a HTML se trage din posibilitatea de a lega text i/sau imagini de alt document sau seciuni din
document. Un browser scoate in evidenta textul identificat sau imaginea cu culoare i/sau l subliniaz pentru a
indica ca este o legtura hipertext (adesea prescurtata ca hiperlegatura sau doar legtura).
Singura eticheta legata de hipertext a HTML este <A>, care vine de la ancora [anchor].
Pentru a introduce o ancora in documentul vostru:
1.
2.
3.
4.

incepeti ancora cu <A> (includei un spaiu dup A)


specificai documentul de care va legai introducnd parametrul HREF="filename" urmat de paranteza de
nchidere ascuita la dreapta (>)
introducei textul care va servi drept hiperlegatura in documentul curent
introducei eticheta de nchidere a ancorei: </A> (fara spaiu nainte de eticheta de nchidere a ancorei)

Exemplu de hiperlegatura intr-un document numit Romania.html:


<A HREF="JudeteleRomaniei.html">Judete</A>
Aceasta intrare face ca cuvntul Judee sa fie hiperlegatura ctre documentul JudeteleRomaniei.html, care se gaseste
in acelai director cu primul document (Romania.html).

Cale relativ sau cale absolut


Va putei lega de documente din alte directoare specificnd calea relativa de la documentul vostru la documentul de
care va legai. De exemplu, o legtura la un fiier JudetulBuzau.html aflat in subdirectorul Muntenia ar arata:
<A HREF="Muntenia/JudetulBuzau.html">Buzau</A>
Acestea se numesc legaturi relative deoarece specificai calea ctre fiierul la care va legai tinand cont de locul unde
se afla fiierul curent. De asemenea putei folosi calea absoluta (ntregul URL) a fiierului, dar legaturile relative sunt
mai eficiente cnd se acceseaz un server. De asemenea ele au avantajul de a face documentele voastre "mai
portabile" -- de exemplu, putei crea mai multe pagini de internet intr-un singur director pe calculatorul vostru,
folosind legaturi relative pentru a lega o pagina de alta, si apoi upload-ati ntregul director cu pagini web la serverul
vostru web. Paginile pe server se vor lega de alte pagini pe server, iar copiile pe hard-drive-ul vostru tot vor arata
spre celelalte pagini nmagazinate acolo.
Este important de reinut ca UNIX este un sistem operaional sensibil la mrimea literelor in ceea ce privete numele
fiierelor, in timp ce DOS si Mac-urile nu sunt. De exemplu, pe un Macintosh, "DOCUMENT.HTML",
"Document.HTML", si "document.html" reprezint aceeai denumire. Daca facei o legtura relativa ctre
"DOCUMENT.HTML", iar fiierul se numete de fapt "document.html", legtura va funciona. Dar daca upload-ati
paginile pe un server web UNIX, legtura nu va mai funciona. Asigurai-va ca ai verificat numele fiierelor nainte
de upload-are.
Caile folosesc sintaxa standard UNIX. Sintaxa UNIX pentru directorul printe (directorul care conine directorul
curent) este "..". (Pentru informaii suplimentare consultai un text referitor la UNIX pentru nceptori cum ar fi
Learning the UNIX Operating System [Invatati sistemul de operare UNIX] de O'Reilly and Associates, Inc.)
Daca v-ai afla in documentul JudeteleRomaniei.html si ai face referire la documentul original Romania.html,
legtura voastr ar arata astfel:
<A HREF="../Romania.html">ROMANIA</A>

http://cristeis.go.ro

cristeis@yahoo.com

* 16 *
In general, ar trebui sa folosii legaturi relative ori de cate ori posibil, deoarece:
1.
2.
3.

este mai uor sa mutai un grup de documente in alt loc (deoarece caile relative vor funciona)
conectarea la server este mai eficienta
scriei mai puin

Totui, folosii cai absolute cnd va legai de documente care nu sunt asemntoare intre ele in mod direct. De
exemplu, sa consideram un grup de documente care alctuiesc un manual. Legaturile intre acestea ar trebui sa fie
relative. Legaturile la alte documente (poate o referire la un program folositor) ar trebui sa foloseasc cai absolute. In
acest fel, daca mutai manualul intr-alt director, nici una din legaturi nu va trebui adusa la zi.

URL-uri
Reeaua rspndita in toata lumea [The World Wide Web] folosete locatori de resurse uniforme [Uniform Resource
Locators] (URL-uri) pentru a specifica locaia fiierelor pe alte servere. Un URL include tipul de resursa care este
accesata (de exemplu, Web, gopher, FTP), adresa serverului si localizarea fiierului.
Sintaxa este:
schema://domeniu.gazda[:port]/calea/numele_fisierului
unde schema este una din
file [fiier]
un fiier (document) pe calculatorul vostru
ftp [File Transfer Protocol - Protocol de transferare a fiierelor]
un fiier pe un server FTP anonim
http
un fiier pe un server de internet
gopher
un fiier pe un server Gopher
WAIS
un fiier pe un server WAIS
news
un grup de tiri Usenet
telnet
o conectare la un serviciu bazat pe Telnet
Numrul de port in general poate fi omis. (Adic daca nu va spune cineva altceva, nu-l folosii.)
De exemplu, pentru a include o legtura ctre pagina mea in documentul vostru, introducei:
<A HREF="http://cristeis.go.ro">cristeis HomPage</A>
Din aceasta reiese ca textul cristeis HomePage este o legtura la pagina mea de internet.
Exista de asemenea o schema de trimis e-mail folosita pentru a hiperlega adresele de e-mail, dar aceasta scheme este
unica in sensul ca folosete doar doua puncte (:) in loc de :// intre schema si adresa. Putei citi mai multe despre
aceasta mai jos.
Pentru informaii suplimentare despre URL-uri, urmai legtura:
http://www.w3.org/hypertext/WWW/Addressing/Addressing.html
http://cristeis.go.ro

cristeis@yahoo.com

* 17 *

Legaturi ctre anumite seciuni


Se pot folosi ancore pentru a muta cititorul ctre o anumita seciune a unui document (ori acelai document, ori altul)
dect sa fie mutat in partea de sus, ceea ce se ntmpla in mod normal. Acest tip de ancora se numete a ancora
numita deoarece pentru a crea legaturi, inserai nume HTML in document.
Legaturile interne sunt folosite pentru a crea un "cuprins" in partea de sus a documentului. Aceste legaturi va muta
dintr-un loc in altul in cadrul acestui document. De asemenea va putei lega de a anumita seciune din alt document.
Aceasta informaie este prezentata mai nti deoarece daca intelegeti acest lucru vei intelege cum sa va legai in
cadrul aceluiai document.

Legaturi ctre seciuni ale altor documente


Sa presupunem ca vrei sa construii o legtura de la documentul A (documentA.html) ctre o anumita seciune a
altui document (Buzau.html).
Introducei codul HTML pentru o legtura ctre o ancora:
documentA.html:
Dintre toate cartierele din Judeul Buzau, unul dintre cele mai vechi este
<a href="Buzau.html#CMV">Cartierul Micro V</a>.
In continuare, sa cream ancora (in acest exemplu "CMV") in Buzau.html:
<A NAME="CMV">Cartierul Micro V</a>
Cu aceste doua elemente la locul lor, putei aduce un cititor direct la locul unde se face referire la Cartierul Micro V
in Buzau.html. Ancora se afla naintea cuvintelor "Cartierul Micro V".
NOTA: Nu putei sa creai legaturi ctre anumite seciuni dintr-un document dect daca avei permisiunea de a scrie
in sursa de cod a documentului respectiv sau daca acel document conine deja ancore. De exemplu, putei include
legaturi ctre acest ghid (http://cristeis.go.ro/Ghid-pt-HTML/Ghid_pt_HTML.html) in documentul vostru deoarece
exista ancore in acest ghid (folosii View Source in browserul vostru pentru a vedea codul HTML). Dar daca acest
document nu avea ancore, nu puteai crea legaturi ctre anumite seciuni deoarece nu putei edita fiierul original de
pe server.

Legaturi ctre anumite seciuni in documentul


curent
Tehnica este aceeai, cu excepia faptului ca se omite numele_fisierului.
De exemplu, pentru a va lega de ancora CMV din cadrul Buzau.html, introducei:
...Alte informaii despre
<A HREF="#CMV">Cartierul Micro V</a>
sunt disponibile in alta parte in acest document.
Avei grija sa includei eticheta <A NAME=> in locul din documentul vostru unde dorii sa duca legtura (<A
NAME="CMV">Cartierul Micro V</a>).
Ancorele sunt in mod deosebit folositoare cnd credei ca cititorii vor tipri un document in ntregime sau cnd avei
o mulime de informaii scurte pe care dorii sa le punei online intr-un singur fiier.

http://cristeis.go.ro

cristeis@yahoo.com

* 18 *

Trimitei e-mail
Putei face ca cititorul sa trimit uor un mesaj electronic unei anumite persoane incluznd caracteristica mailto intr-o
legtura. Formatul este:
<A HREF="mailto:nume@gazda">Nume</a>
De exemplu, introducei:
<A HREF="mailto:cristeis@yahoo.com">Trimiteti-mi un mesaj</a>
pentru a crea o fereastra de mesaj care este configurata deja sa deschid o fereastra de mesaj pentru
cristeis@yahoo.com (adic pentru mine). Voi, desigur, vei introduce alta adresa de e-mail!

http://cristeis.go.ro

cristeis@yahoo.com

* 19 *

Imagini in direct
Majoritatea browserelor de internet pot afia imaginile in direct (adic, imagini lng text), imagini care sunt in
formatul X Bitmap (XBM), GIF sau JPEG. Alte formate de imagini sunt de asemenea incorporate in browserele de
internet [de exemplu, formatul Grafic de Reea Portabil (Portable Network Graphic) (PNG)]. Fiecare imagine cere
timpul ei pentru ncrcare si incetineste afiarea iniiala a unui document. Alegei cu grija imaginile voastre si
numrul de imagini intr-un document.
Pentru a include o imagine in direct, introducei:
<IMG SRC=NumeleImaginii>
unde NumeleImaginii reprezint URL-ul imaginii.
Sintaxa pentru URL-uri <IMG SRC> este identica cu cea folosita intr-o ancora HREF. Daca imaginea este in format
GIF, atunci partea numele_imaginii din NumeleImaginii trebuie sa se termine cu .gif. Imaginile X Bitmap trebuie sa
se termine cu .xbm; Imaginile JPEG trebuie sa se termine cu .jpg sau .jpeg; iar imaginile Portable Network Graphic
trebuie sa se termine cu .png.

Caracteristicile mrimii imaginilor


Ar trebui sa includei inca doua caracteristici in eticheta <IMG> pentru a spune browserului vostru mrimea
imaginilor pe care le ncarc mpreuna cu textul. Caracteristicile HEIGHT [Inaltime] si WIDTH [Latime] fac ca
browserul sa lase gol spaiul necesar (in pixeli) pentru imagini in timp ce ncarc restul documentului. (Putei obine
mrimea in pixeli din programul de procesare al imaginilor pe care-l avei, cum ar fi Adobe Photoshop. Unele
browsere vor afia dimensiunile unei imagini in bara de titlu daca imaginea este vzuta singura fara un document
HTML care s-o contina.)
De exemplu, pentru a include o imagine autoportret intr-un document mpreuna cu dimensiunile portretului,
introducei:
<IMG SRC=Autoportret.gif HEIGHT=100 WIDTH=65>
NOTA: Unele browsere folosesc caracteristicile HEIGHT si WIDTH pentru a micora sau mari imaginea pentru a
ncpea in spaiul alocat cnd imaginea nu se potrivete exact cu numerele caracteristicelor. Nu toi cei care produc
browsere cred ca marirea/micsorarea este o idee buna, aa ca nu toi cititorii vor avea acces la aceasta trstura.
Verificai-va dimensiunile si folosii-le pe cele corecte.

Alinierea imaginilor
Dispunei de anumita flexibilitate in afiarea imaginilor. Putei avea imagini separate de text si aliniate la stnga,
dreapta sau pe centru. Sau putei avea o imagine aliniata cu text. Incercati mai multe posibilitati pentru a vedea cum
arata informaia voastr cel mai bine.

Alinierea textului cu o imagine

In mod normal partea de jos a imaginii este aliniata cu textul care urmeaz, dup cum se vede in acest
paragraf. Putei alinia imagini in partea de sus sau pe centrul unui paragraf folosind caracteristicile ALIGN=TOP si
CENTER.
http://cristeis.go.ro

cristeis@yahoo.com

* 20 *

Acest text este aliniat cu partea de sus a imaginii (<IMG SRC = "autorul.gif"

ALT="[AUTORUL]" ALIGN=TOP>). Observai cum browserul aliniaz doar o linie si apoi sare in partea de jos a
imaginii pentru restul textului.

Iar acest text este pe centrul imaginii (<IMG SRC = "autorul.gif"


ALT="[AUTORUL]" ALIGN=CENTER>). Din nou, doar o linie a textului este pe centru, iar restul este sub imagine.

Imagini fara text


Pentru afiarea unei imagini fara nici un text asociat (de exemplu, logo-ul organizaiei voastre), facei-o un paragraf
separat. Folosii caracteristica de paragraf ALIGN= pentru a centra imaginea sau a o ajusta in partea dreapta a
ferestrei dup cum vedei mai jos:
<p ALIGN=CENTER>
<IMG SRC = "autorul.gif" ALT="[AUTORUL]">
</p>
care are ca rezultat:

Imaginea este centrata; acest paragraf ncepe sub ea si este aliniat la stnga.

Alternarea text pentru imagini


Unele browsere -- in principal cele de text cum ar fi Lynx http://lynx.browser.org/ -- nu pot afia imagini. Unele
persoane dezactiveaz ncrcarea imaginilor, chiar daca programul lor poate afia imagini (mai ales daca folosesc un
modem sau au o legtura slaba). HTML furnizeaz un mecanism pentru a-i informa pe cititori ce pierd daca nu
ncarc imaginile.
Caracteristica ALT va da voie sa specificai textul care sa fie afiat in loc de o imagine.
De exemplu:
<IMG SRC="sageata_sus.gif" ALT="Sus">
unde sageata_sus.gif este imaginea unei sageti care arata in sus. Folosind programe care pot vedea imagini si care au
ncrcarea acestora activata vedei imaginea. Folosind un browser de text sau dezactivnd ncrcarea imaginilor,
cuvntul Sus apare in locul acelei imagini.
Ar trebui sa includei text de alternare pentru fiecare imagine in documentul vostru, ceea ce ii va ajuta foarte mult pe
ceilali.

Imagini ca hiper-legaturi
Imaginile in direct pot fi folosite ca legaturi exact ca textul. Urmtorul cod HTML:
<A HREF="autorul.html"><IMG SRC="autorul.gif" ALT="[AUTORUL]"></A>

http://cristeis.go.ro

cristeis@yahoo.com

* 21 *
Produce urmtorul rezultat:

Bordura albastra care nconjoar imaginea indica ca aceasta este o imagine legtura. Poate ca nu dorii aceasta
bordura mereu. In acest caz putei folosi caracteristica BORDER a etichetei IMG pentru a face ca imaginea sa apar
normal.
Adugnd caracteristica BORDER si setnd-o la zero:
<A HREF="autorul.html"><IMG SRC="autorul.gif" BORDER=0 ALT="[AUTORUL]"></A>
Are ca rezultat (imaginea este tot o legtura):

Caracteristica BORDER poate fi setata la valori diferite de zero, chiar daca imaginea este o legtura sau nu. In acest
caz bordura va aprea cu culoarea pe care o are textul in pagina. De exemplu, daca ai vrea sa punei o bordura
imaginii voastre pentru a se evidenia pe pagina, ai putea ncerca:
<IMG SRC="autorul.gif" BORDER=6 ALT="[AUTORUL]">
Si vei obine rezultatul:

Grafice pentru fond


Versiunile mai noi de browsere pot ncrca o imagine si o pot folosi ca fond cnd afiseaza o pagina. Unor persoane le
plac imaginile de fond pe cnd altora nu. Daca vrei sa includei un fond, asigurai-va ca textul poate fi citit cu
usurinta cnd este afiat deasupra imaginii.
Imaginile de fond pot fi o textura sau imaginea unui obiect (logo). Creai imaginea de fond exact cum creai orice
alta imagine.
Nu trebuie sa creai dect o mica parte din imagine. Folosind o caracteristica numita tiling [acoperire cu igla], un
browser ia imaginea si o repeta pana acoper fereastra. Creai o singura imagine iar browserul o multiplica de cate
ori este necesar pentru a umple fereastra. Aciunea este automata cnd folosii eticheta de fond artata mai jos.
Eticheta de a include o imagine de fond se include in eticheta <BODY> ca o caracteristica a acesteia:
<BODY BACKGROUND="numele_fisierului.gif">

http://cristeis.go.ro

cristeis@yahoo.com

* 22 *

Culoare pentru fond


In mod normal browserele afiseaza textul culoarea neagra pe un fond gri. Se pot schimba aceste doua elemente daca
dorii. Unii autori de HTML aleg o culoare de fond si o coordoneaz cu schimbarea culorii textului.
Vizionai schimbrile pentru a va asigura ca paginile pot fi citite cu usurinta. (De exemplu, multe persoane considera
ca textul rou pe fond negru este greu de citit!) In general, Incercati sa evitai folosirea imaginilor contrastante sau a
imaginilor care folosesc culoarea unui text din imagine.
Schimbai culoarea textului, legaturilor, legaturilor vizitate si active (legaturile pe care se efectueaz un clic) folosind
alte caracteristici in eticheta <BODY>. De exemplu:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">
Aceasta creeaza o fereastra cu un fond negru (BGCOLOR), text alb (TEXT), si legaturi argintii (LINK).
Combinaia de numere si cifre de sase caractere reprezint culori, dnd valoarea lor RGB (red, green, blue - rou,
verde, albastru). Cele sase caractere sunt de fapt numere de cate doua caractere, reprezentnd cantitatea de rou,
verde sau albastru ca o valoare hexadecimala in gama 00-FF. De exemplu, 000000 este negru (nici o culoare),
FF0000 este rou aprins, 0000FF este albastru strlucitor, iar FFFFFF este alb (saturat la maxim cu cele trei culori).
Aceste combinaii de numere si litere sunt in general criptice. Din fericire exista o sursa online care sa va ajute sa
obtineti combinaia care sa reprezinte culorile dorite si de asemenea exista programe care sa fac acest lucru pentru
voi:

http://www.hidaho.com/colorcenter/

De asemenea putei gsi la adresa

http://cristeis.go.ro/ghid-pt-HTML/culori.html

60 de culori cu valoarea lor hexadecimala.


Pentru unele culori de baza -- de obicei cele din paleta standard de 16 culori a Windows 3.1 -- putei folosi si numele
culorii in loc de valoarea RGB corespunztoare. De exemplu, "black [negru]", "red [rou]", "blue [albastru]", and
"cyan [ocru]" sunt toate valide pentru a fi folosite in locul valorilor RGB. Totui tineti cont ca nu toate browserele
suporta numele culorilor, in timp ce valorile RGB sunt suportate.

Imagini, sunete si animaii externe


Poate vei dori ca o imagine sa se deschid ca un document separat cnd o persoana activeaz o legtura fie pe un
cuvnt fie pe o versiune mai mica a imaginii inclusa in document. Aceasta se numete o imagine externa si este
folositoare daca nu dorii sa incetiniti ncrcarea documentului cu imagini mari in direct.
Pentru a include o referina la o imagine externa, introducei:
<A HREF="ImagineaMea.gif">ancora legaturii</A>
De asemenea putei folosi o imagine mai mica ca o legtura ctre o imagine mai mare. Introducei:
<A HREF="ImagineMaiMare.gif"><IMG SRC="ImagineMaiMica.gif"></A>
Cititorul vede imaginea ImagineMaiMica.gif si efectueaz clic pe ea pentru a deschide imaginea
ImagineMaiMare.gif.

http://cristeis.go.ro

cristeis@yahoo.com

* 23 *
Folosii aceeai sintaxa pentru legaturi ctre animaii si sunete externe. Singura diferena o reprezint extensia
fiierelor la care se face legtura. De exemplu,
<A HREF="Adam.mov">ancora legaturii</A>
specifica o legtura ctre un film QuickTime.
Unele tipuri de fiiere obinuite si extensiile lor sunt:
plain text [text simplu]
.txt
HTML document [document HTML]
.html
GIF image [imagine GIF]
.gif
TIFF image [imagine TIFF]
.tiff
X Bitmap image [imagine X Bitmap]
.xbm
JPEG image [imagine JPEG]
.jpg sau .jpeg
PostScript file [fiier PostScript]
.ps
AIFF sound file [fiier sunet AIFF]
.aiff
AU sound file [fiier sunet AU]
.au
WAV sound file [fiier sunet WAV]
.wav
QuickTime movie [fiier film MOV]
.mov
MPEG movie [fiier film MPEG]
.mpeg sau .mpg

http://cristeis.go.ro

cristeis@yahoo.com

* 24 *

Tabele
nainte sa fie finalizate etichetele HTML pentru tabele, autorii trebuiau sa-si formateze cu grija informaiile tabelare
in etichete <PRE>, numrnd spatiile si vizionnd rezultatul. Tabelele sunt foarte folositoare pentru prezentarea
informaiilor tabelare si reprezint un avantaj pentru autorii de HTML creativi care folosesc etichetele de tabel pentru
a-si prezenta paginile Web. (Ducei-va la pagina NCSA - (http://www.ncsa.uiuc.edu/) pentru un exemplu excelent de
folosire a tabelelor pentru a controla aternerea in pagina.)
Ganditi-va informaiile tabelare in lumina codurilor explicate mai jos. Un tabel are capete in care explicai ce includ
coloanele/randurile, rnduri pentru informaii, celule pentru fiecare parte. In urmtorul tabel, prima coloana conine
informaia titlu, fiecare rnd explica o eticheta de tabel HTML iar fiecare celula conine o eticheta pereche sau o
explicare a funciunii acestei etichete.

Elementele tabelului
Element

Descriere

<TABLE> ... </TABLE>

definete un tabel in HTML. Daca caracteristica BORDER este prezenta,


browserul afiseaza un tabel cu o bordura.
definete legenda pentru titlul tabelului. Poziia normala a titlului este
centrata in partea de sus a tabelului. Se poate folosi caracteristica
ALIGN=BOTTOM pentru a poziiona legenda in partea de jos a tabelului.
NOTA: Se poate folosi orice cod HTML in legenda.
specifica un rnd in cadrul unui tabel. Putei defini caracteristicile din setare
pentru ntregul rnd: ALIGN (LEFT, CENTER, RIGHT) i/sau VALIGN
(TOP, MIDDLE, BOTTOM). Vedei Caracteristicile tabelelor la sfarsitul
acestui tabel pentru informaii suplimentare.
definesc o celula titlu a tabelului. Din setare textul in aceasta celula este
ingrosat si centrat. Celulele titlu ale tabelului pot conine alte atribute pentru
a determina caracteristicile celulei i/sau coninutul ei. Vedei Caracteristicile
tabelelor la sfarsitul acestui tabel pentru informaii suplimentare.
definesc o celula de date a tabelului. Din setare textul in aceasta celula este
aliniat la stnga si centrat pe verticala. Celulele de date ale tabelelor pot
conine alte atribute care sa determine caracteristicile celulei i/sau
coninutul ei. Vedei Caracteristicile tabelelor la sfarsitul acestui tabel pentru
informaii suplimentare.

<CAPTION> ... </CAPTION>

<TR> ... </TR>

<TH> ... </TH>

<TD> ... </TD>

http://cristeis.go.ro

cristeis@yahoo.com

* 25 *

Caracteristicile tabelelor
NOTA: Caracteristicile definite in cadrul celulelor <TH> ... </TH> sau <TD> ... </TD> nlocuiesc alinierea din
setare a <TR> ... </TR>.

Caracteristica

Descriere

ALIGN (LEFT, CENTER, RIGHT) Alinierea orizontala a unei celule.


VALIGN
(TOP,
MIDDLE, Alinierea verticala a unei celule.
BOTTOM)
COLSPAN=n
Numrul (n) de coloane pe care o celula le unete.
ROWSPAN=n
Numrul (n) de rnduri pe care o celula le unete.
Dezactiveaz ntreruperea textului la capt de rnd si revenirea pe linia
NOWRAP
urmtoare intr-o celula.

Formatul general al unui tabel


Formatul general al unui tabel arata astfel:
<TABLE>
<!-- nceputul definiiei tabelului -->
<CAPTION> coninutul legendei </CAPTION>
<!-- definiia legendei -->
<TR>
<!-- nceputul definiiei rndului titlu -->
<TH> coninutul celulei care conine primul titlu </TH>
<TH> coninutul celulei care conine ultimul titlu </TH>
</TR>
<!-- sfarsitul definiiei rndului titlu -->
<TR>
<!-- nceputul definiiei primului rnd -->
<TD> coninutul primului rnd si a primei celule </TD>
<TD> coninutul primului rnd si a ultimei celule </TD>
</TR>
<!-- sfarsitul definiiei primului rnd -->
<TR>
<!-- nceputul definiiei ultimului rnd -->
<TD> coninutul ultimului rnd si a primei celule </TD>
<TD> coninutul ultimului rnd si a ultimei celule </TD>
</TR>
<!-- sfarsitul definiiei ultimului rnd -->
</TABLE>
<!-- sfarsitul definiiei tabelului -->
Putei copia codul de mai sus in propriul document HTML, adugnd rnduri sau celule noi.

http://cristeis.go.ro

cristeis@yahoo.com

* 26 *
Etichetele <TABLE> si </TABLE> trebuie sa nconjoare intreaga definiie a tabelului. Primul element din tabel este
CAPTION, care este opional. Apoi putei avea orice numr de rnduri definite de etichetele <TR> si </TR>. Intr-un
rnd putei avea orice numr de celule definite de etichetele <TD>...</TD> sau <TH>...</TH>. Fiecare rnd al
tabelului este, in mod esenial, formatat independent de rndurile de deasupra sau de dedesubt. Aceasta va permite sa
afisati cu usurinta tabele ca cel de deasupra cu o singura celula, cum ar fi Caracteristicile tabelelor, unind coloane din
tabel.

Tabele pentru informaii netabelare


Unii autori de HTML folosesc tabele pentru a prezenta informaii netabelare. De exemplu, deoarece in celulele
tabelelor se pot include legaturi, unii autori folosesc un tabel fara bordura pentru a crea "o" imagine din mai multe
imagini separate. Browserele care pot afia tabelele in mod corespunztor arata imaginile ca si cum ar fi o harta
imagine (o imagine cu cadrane legaturi).
Folosirea bordurilor tabelelor poate crea un afiaj impresionant. Facei experimente si vedei ce va place.

http://cristeis.go.ro

cristeis@yahoo.com

* 27 *

Forme
Formele permit unei persoane sa rentoarc informaii unui server de internet pentru anumite aciuni. De exemplu, sa
presupunem ca strangeti nume si adrese e-mail pentru a trimite anumite informaii unor persoane care le cer. Pentru
fiecare persoana care isi introduce numele si adresa, avei nevoie de anumite informaii ca sa fie trimise, iar
caracteristicile celor care rspund sa fie adugate la o baza de date.
Aceasta procesare a informaiilor de intrare este de obicei ndeplinita de un script sau un program scris in Perl sau alt
limbaj care folosete text, documente si informaii. Daca nu putei scrie un program sau un script pentru informaiile
de intrare, avei nevoie sa gasiti pe cineva care sa fac acest lucru pentru voi.
Formele insesi nu sunt greu de codat. Ele urmresc aceleai modele de cutare ca alte etichete HTML. Ceea ce ar
putea fi dificil este programul sau scriptul care preia informaia trimisa prin forma de completat si o proceseaz.
Datorita nevoii de scripturi specializate pentru a procesa informaiile intrate prin formele de completat, acestea nu
sunt discutate in acest ghid. Verificai seciunea cu Alte informaii pentru informaii suplimentare.

http://cristeis.go.ro

cristeis@yahoo.com

* 28 *

Evitarea problemelor
Evitai suprapunerea etichetelor
Considerai acest exemplu de HTML:
<B>Acesta este un exemplu de <I>suprapunere</B> a etichetelor HTML.</I>
Cuvntul suprapunere se gaseste intre etichetele <B> si <I>. Un browser ar putea fi confuz procesnd acest cod si sar putea sa nu afieze lucrurile cu ai dori. Singura modalitate de a ti este sa verificai fiecare browser cunoscut.
(ceea ce nseamn consum de timp si este foarte nepractic).
In general, evitai suprapunerea etichetelor. Incercati sa folosii etichetele in pereche. Etichetele (cu excepiile
evidente ale elementelor ale cror etichete de ncheiere pot fi omise, cum ar fi paragrafele) ar trebui folosite in
pereche fara a intercala o alta eticheta intre eticheta de ncepere si cea de ncheiere. Uitai-va din nou la exemplul de
mai sus. Nu putei crea o pereche pentru eticheta de ingrosare fara o alta eticheta in mijloc (prima eticheta de
definire).

Incrustai doar ancore si etichetele pentru


caractere
Protocolul HTML va permite sa incrustai legaturi in alte etichete HTML:
<H1><A HREF="Destinatie.html">Titlul meu</A></H1>
Nu incrustai etichete HTML intr-o ancora:
<A HREF="Destinatie.html">
<H1>Titlul meu</H1>
</A>
Dei majoritatea browserelor se descurca cu acest al doilea exemplu, specificaiile HTML oficiale nu suporta aceasta
construcie si fiierul vostru probabil nu va funciona cu browserele viitoare. Codificai-va documentele in
concordanta cu specificaiile HTML (vezi Alte informaii mai jos).
Etichetele de caractere modifica afiarea textului in alte elemente:
<UL>
<LI><B>Un element de lista ingrosat</B>
<LI><I>Un element de lista aplecat</I>
</UL>
Evitai incrustarea altor etichete de elemente HTML. De exemplu, ai putea fi tentat sa incrustai un titlu intr-o lista
pentru a mari scrisul:
<UL>
<LI><H1>Un titlu mai mare</H1>
<LI><H2>Ceva puin mai mic</H2>
</UL>

http://cristeis.go.ro

cristeis@yahoo.com

* 29 *

Pentru compatibilitate cu toate browserele evitai aceste tipuri de construcii. (Eticheta Netscape <FONT>, care va
permite sa specificai cat de mare vor fi caracterele afiate in fereastra voastr, inca nu face parte din specificaiile
HTML oficiale.)
Care este diferena dintre incrustarea unei etichete <B> intr-una <LI> si incrustarea unei etichete <H1> intr-una
<LI>? In cadrul HTML intelesul semantic al <H1> este ca el reprezint titlul principal al documentului si ca ar trebui
urmat de coninutul documentului. Deci nu are sens gsirea unei etichete <H1> intr-o lista.
De asemenea etichetele pentru caractere nu pot fi adugate. De exemplu, ai crede ca:
<B><I>un text</I></B>
ar produce un text ingrosat si aplecat. Unele browsere aa-l afiseaza; altele interpreteaz doar eticheta cea mai din
interior.

Ultimii pai
Validai-va codul
Cnd punei un document pe un server de internet, asigurai-va ca ai verificat formatarea si fiecare legtura
(incluznd ancorele). Ideal ar fi sa punei pe altcineva sa fac acest lucru si sa va comenteze documentul nainte sa
considerai ca l-ai terminat.
Va putei verifica documentele codificate cu unul din serviciile de validare de la adresa
http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Validation_a
nd_Checkers/ care va vor spune daca codul vostru este in conformitate cu specificaiile HTML. Din fericire acest
serviciu va permite sa alegei nivelul de conformitate pe care-l dorii (de exemplu, strict, nivelul 2, nivelul 3). Daca
dorii sa folosii coduri care nu fac parte din specificaiile HTML aceasta opiune este folositoare.
Imagini nlocuitoare
Cnd o eticheta <IMG SRC> este ndreptata ctre o imagine care nu exista, browserul afiseaza o imagine
nlocuitoare.

Aducei-va fiierele la zi
Daca coninutul unui fiier este static (cum ar fi biografia lui George Washington), nu este nevoie de acest lucru. In
ceea ce privete documentele care dezbat subiecte schimbtoare in timp, nu uitai sa le aducei la zi!
Aducerea la zi este importanta mai ales cnd fiierul conine informaii cum ar fi programul saptamanal sau data
limita pentru anunul unui program.

Browser-ele difer
Browserele afiseaza elementele HTML in mod diferit. Nu uitai ca nu toate codurile folosite in fiierele HTML sunt
interpretate de browsere. Daca un browser nu intelege un cod, de obicei acesta l ignora.
Ai putea petrece o grmada de timp fcndu-va documentele sa "arate perfect" folosindu-va browserul curent. Daca
verificai documentul respectiv folosind alt browser, vei vedea ca acesta este probabil afiat diferit. De aici un sfat:
codificai-va fiierele folosind HTML corect. Lasati interpretarea in seama browserelor si sperai la ce-i mai bine.

http://cristeis.go.ro

cristeis@yahoo.com

* 30 *

Comentai-va fiierele
Poate vei dori sa includei comentarii in fiierele HTML. Comentariile in HTML sunt ca si comentariile intr-un
program de calculator -- textul pe care-l introducei nu este folosit de browser si nu este afiat. Comentariile sunt
accesibile daca cineva vizioneaz fiierul sursa.
Pentru a include un comentariu, introducei:
<!-- comentariul vostru aici -->

http://cristeis.go.ro

cristeis@yahoo.com

* 31 *

Alte informaii
Acest ghid reprezint doar o introducere la HTML. Mai jos gasiti alte surse de informare.

Ghid pentru stil


Sfaturi pentru scrierea unui HTML "bun":
http://www.cs.cmu.edu/afs/cs.cmu.edu/Web/People/tilt/cgh/
http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.htm

Alte documente introductive


Acestea acoper informaii similare cu ghidul acesta:

http://www.ucc.ie/info/net/htmldoc.html
http://members.aol.com/htmlguru/about_html.html
http://info.med.yale.edu/caim/manual/
http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

Alte informaii in direct

http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
http://www.w3.org/pub/WWW/MarkUp/SGML/
http://home.netscape.com/assist/net_sites/bg/index.html
http://www.cc.ukans.edu/~acs/docs/other/forms-intro.shtml
http://java.sun.com/

Materialul de mai sus poate fi folosit liber de oricine, dar nu poate fi reprodus in alte lucrri,
publicaii de orice fel fr acordul scris al autorului.

http://cristeis.go.ro

cristeis@yahoo.com