tutorial html by campionu

HTML (HyperText Markup Language)

HTML este un limbaj de marcare pentru hipertext care este inteles de toti clientii de WWW. Este compus dintr-un set de elemente care definesc un document si ghideaza afisarea acestuia.

De notat ca HTML este un limbaj in continua evolutie si ca diferite browsere WWW pot recunoaste diferite seturi de HTML.

Documentele
HTML ofera mijloace pentru furnizarea de legaturi hipertext la o
varietate de medii : de la text la imagini, sunete, filme MPEG, fisiere
Postcript si alte formate.
HTML este bazat pe SGML (Standard
Generalized Markup Language) si reprezinta elemente de document la
nivel logic. Se pot crea documente HTML direct sau utilizand programe
de conversie din alte formate ca LaTex, Framemaker, Word pentru Windows.

Un
document HTML poate contine : antete, paragrafe, liste, tabele, figuri,
forme etc. Textul documentului include comenzi incluse intre paranteze
ascutite <>. Multe dintre comenzi sunt in pereche (adica inceput
si sfarsit, comanda de sfarsit fiind cea de inceput precedata de
caracterul "/"). Comenzile sunt folosite pentru a marca elementele
logice ale documentului, de exemplu titluri, antete si paragrafe.
Comenzile pot fi utilizate si ca atribute, de exemplu atributul de
identificare in antet poate fi utilizat pentru a numi destinatia
legaturilor hipertext.
Comenzile pot fi scrise si cu majuscule si cu
minuscule diferenta nefiind semnificativa. Numele comenzii nu poate fi
prescurtat pentru a evita confuziile.

Standardul HTML recomanda ca un document sa contina o parte descriptiva si una functionala.
Astfel forma de baza a unui documemt HTML este:



urmeaza informatia de descriere



urmeaza informatia utila



Un document poate contine unul sau mai multe din elementele urmatoare:

Titlu
Antet
Paragraf
Text normal
Liste
Figuri
Tabele
Forme
Texte preformatate
Formule matematice

--------------------------------------------------------------------------------

Titlu
Comanda TITLE defineste textul care se va afisa ca titlu al ferestrei browser-ului:



--------------------------------------------------------------------------------

Antet
Pentru
marcarea unui antet sunt utilizate comenzile H1, H2, ...H6. H1 este cel
mai semnificativ si determina afisarea textului cu fontele cele mai
mari (celelalte definesc fonte din ce in ce mai mici).
Exemplu de utilizare:

Titlu pagina



--------------------------------------------------------------------------------

Paragrafe
Browser-ul,
in cazul unui text normal, asigura automat trecere la rand nou daca
linia de text este mai lunga decat latimea ferestrei curente,
adaptandu-se in functie de dimensiunea ferestrei.
Pentru separarea
textului in paragrafe se face prin comanda P care determina lasarea
unui rand liber si inceperea textului de la inceput de rand :

Un nou paragraf
La
acceasta comanda sfarsitul nu este obligatoriu deoarece o noua comanda
determina automat trecerea la un nou paragraf. Fortarea trecerii la un
nou rand in cadrul unui paragraf se face prin comanda BR.
--------------------------------------------------------------------------------

Text normal
Setul de caractere
Documentele
HTML cuprind caractere de 8 biti din setul de caractere Latin-1 (ISO
8859). Pentru caractere care lipsesc din set sau pentru cele care se
pot confunda cu elementele de comanda s-au stabilit codificari ca de
exemplu :

codificare caracter
&
&

<
<

>
>

"
"

Exemplu :

textul "A&B" are valoarea <100>

se va scrie in HTML

&quotA&ampB" are valoarea &lt100>
De
notat ca nu toate browserele suporta intregul set de caractere (se
poate incerca daca sunt suportate lasand cate un spatiu inainte si dupa
caracterul special).
Sunt definite caractere speciale si pentru
diacriticele (majuscule si miniscule) din limbile de circulatie : á, e,
ö, u, ç, n, Î, O, etc. prin

á è ö û ç ñ Î Ø

(celelalte litere sunt definite dupa acelasi tipic :"&" + litera mare sau mica + semnul diacritic).
Legaturile hipertext
HTML
permite definirea de legaturi in interiorul unui document. Un anumit
cuvant sau mai multe cuvinte consecutive pot fi marcate pentru a
constitui o legatura. Textul marcat apare in alta culoare pe ecran si
subliniat si selectandu-l cu mouse-ul (click buton stanga mouse) va
determina afisarea pe ecran a portiunii de document sau a documentului
asociat acestei legaturi.

1.
2.topica

In
primul caz se defineste o legatura in interiorul unui document. Daca
documentul este prea lung, pentru parcurgerea lui rapida se poate
defini un "cuprins" si selectarea unui element din cuprins va determina
saltul direct in portiune de text dorita (prin asa numitele ancore).

Exemplu de utilizare :

Introducere

Initiative
1.Introducere
Proiectul de fata este un ghid de utilizare HTML.
2.Initiative

Selectarea
textului "Introducere"(ancora "#1.") va determina saltul in cadrul
documentului in locul in care este definita ancora prin NAME.

In
cel de al doilea caz este definit saltul la un alt document. La
selectarea textului "topica" se va face "saltul" la documentul
"legatura.html". Acest mecanism asigura navigarea in serviciul WWW.
Documentul la care se face trimiterea poate sa fie atat pe calculatorul
curent cat si pe oricare alt calculator din retea, in acest ultim caz
trebuie sa se specifice in fata numelui si adresa URL a serverului pe
care rezida documentul.

Exemplu de utilizare :

ROMANIAN HOME PAGE

Marcarea textelor
Portiuni dintr-un document pot fi marcate, fara a fi legaturi, asociindu-li-se atribute definind aspectul lor :

intarit text

italic text

fixed-pich text

italic tipic text

tipic intarit text

Sectiuni din text pot fi separate prin trasarea unei linii orizontale intre ele prin comanda :




unde:

ALIGN defineste modalitatea de aliniere (ex:centrat, la stanga, la dreapta) a liniei
SIZE defineste grosimea liniei
WIDTH defineste lungimea liniei in procente fata de latimea paginii

De asemenea se pot seta :

dimensiunea fontelor

(pentru toata pagina)
(pe o protiune de text)

culoarea textului



culoarea topicii definita ca legatura (culoarea de dinainte de selectare cat si cea de dupa selectare)



culoarea sau textura (un anumit desen care se repeta acoperind tot fondul) fondului




Culoarea se specifica prin cele trei componente astfel #RRGGBB (valorile se dau in hexazecimal).
Exemplu :


background="/images/sky2.gif"
vlink="#FF0000"
LINK="#20B2AA">

Se poate comanda ca o portiune de text sa fie centrat in pagina.



Imagini
Imaginile
pot fi incluse intr-un document ca elemente de tip caracter, textul
incadrand sau nu imaginea. Imaginea este un fisier de tip .GIF sau .XBM
(format X bitmap) care poate sa se gaseasca pe oricare din serverele
WWW din retea. Textul care insoteste imaginea poate fi aliniata relativ
la marginea superioara sau inferioara a imaginii sau in dreptul
mijlocului imaginii (implicit se considera relativ la marginea
superioara).



O imagine poate fi declarata legatura catre alt document HTML :



Exemplul
ilustreaza posibilitatea de afisare a documentului "explicatie.html" in
urma selectarii imaginii "imagine.gif" din documentul curent existent
pe ecran. Documentul poate fi si un fisier de sunet (sau alta imagine
dar numai la unele browsere: facilitate care permite afisarea unei
variante mici a unei poze si prin click pe ea se poate obtine varianta
marita evitandu-se astfel manevrarea de imagini mari (fisiere lungi si
penalizatoare de timp in retea), doar utilizatorul realmente interesat
de varianta marita a imaginii va cere afisarea acesteia).

Un document HTML poate contine fragmente de program comentate ca in exemplul urmator :



--------------------------------------------------------------------------------
Liste
HTML permite declararea de :

Liste Ordonate - elementele sunt automat numerotate
Liste Neordonate - elementele sunt marcate printr-un semn special
Liste de Definitii de termeni si definitiile lor asociate

Listele
sunt declarate printr-o comanda (OL, UL, DL) in functie de tipul
listei, iar fiecare element este marcat prin comanda LI. Stilul
numerotarii si alegerea semnului grafic de marcare este in
responsabilitatea browserului.

Liste ordonate
Comanda OL. Declararea unei liste ca in exemplul urmator :

1. element 1
   
2. element 2
   
3. element 3
   

determina afisarea ei astfel:

element 1
element 2
element 3
Liste marcate
Comanda UL. Declararea unei liste ca in exemplul urmator :

• element 1
  
• element 2
  
• element 3
  

determina afisarea ei astfel:

element 1
element 2
element 3
Lista de definitii
Comanda
DL impreuna cu DT pentru termen si DD pentru definitie. Lista consta in
perechi formate din termen si definitie (este utila si la afisarea de
dialoguri). Declararea unei liste ca in exemplul urmator :


termen 1
definitia 1
termen 2
definitia 2


determina afisarea ei astfel:

termen 1 : definitia 1
termen 2 : definitia 2

sau

termen 1
definitia 1
termen 2
definitia 2
De
notat ca se permite declararea de mai multi termeni pentru o singura
definitie, dar fiecare definitie trebuie sa aiba elementul termen
asociat.

--------------------------------------------------------------------------------

Figuri
Comanda
IMG doar ca aceasta are statut de paragraf. I se pot asocia atributele
de aliniere LEFT (implicit), CENTER, RIGHT. Exemplu :



Zone active
O
imagine poate avea declarate zone active. Acesteia i se asociaza un
fisier de configurare prin care se declara coordonatele (x,y ; daca
coordonatele sunt numere reale coltul din stanga-sus a imaginii este
(1.0,1.0), iar daca sunt numere intregi ele reprezinta numar de pixeli)
zonelor active ale imaginii folosind optiunea ISMAP. Selectand prin
click mouse o astfel de zona nu este implementata in toate browserele.

Exemplu de utilizare:



unde fisierul coord.conf are urmatorul continut (fisierul de declarare de coordonate trebuie sa aiba extensia .conf) :

default nimic.html
rect (96,22) (113,49) romania.html
circ (80,108) 10 http://www.geocities.com/bogdan_world

si unde prin :

default
se declara legatura daca zona selectata nu este activa
rect
se
declara o zona activa sub forma de dreptunghi definit prin coordonatele
stanga-sus si dreapta-jos din cele doua paranteze la selectarea careia
se va afisa documentul romania.html
circ
se declara o zona activa
sub forma de cerc definit prin coordonatele centrului in paranteza si
raza acestuia, la selectarea careia se face legatura cu serverul cu
adresa URL declarata
Nota :

in directorul /work/www/cgi-bin trebuie sa existe htimage
in
fisierul http.conf trebuie inserate linii pentru declararea
directoarelor care contin fisierele necesare optiunii de zone active
(de exemplu : Search /work/www/cgi-bin
# Modificari necesare pentru imagini click-abile
Map /img/* /htbin/htimage/*
Exec /htbin/* /work/www/cgi-bin/*)

fisierul de declarare a zonelor active dintr-o imagine trebuie sa fie precedat de : /htbin/htimage/.

--------------------------------------------------------------------------------

Tabele
Prin comanda TABLE se poate defini un tabel cu titlu CAPTION, antet TH si date TD astfel :

Declarare tabel


unde :
BORDER
specifica desenarea conturului celulelor de tabel (in absenta parametrului sau la BORDER=0 nu se afiseaza liniile de contur)
CELLSPACING
defineste, in pixeli, spatiul dintre celulele tabelului
CELLPADDING
defineste, in pixeli, dimensiunea unei celule
WIDTH
defineste, in procente din latimea paginii, latimea tabelului

Declarare titlu (pozitionat inainte sau dupa tabel; implicit este inainte)





Definire linie de tabel




unde :
ALIGN
defineste alinierea textului pe orizontala (centrat, stanga, dreapta)
VALIGN
defineste alinierea textului pe verticala (sus, jos)

Definire antet de tabel






unde :
ALIGN
defineste alinierea textului pe orizontala (centrat, stanga, dreapta)
VALIGN
defineste alinierea textului pe verticala (sus, jos)
COLSPAN
numarul de coloane pe care se intinde celula curenta
ROWSPAN
numarul de randuri pe care se intinde celula curenta
WIDTH
latimea celulei, in procente din latimea tabelului

Definire celula de tabel





unde :
ALIGN
defineste alinierea textului pe orizontala (centrat, stanga, dreapta)
VALIGN
defineste alinierea textului pe verticala (sus, jos)
COLSPAN
numarul de coloane pe care se intinde celula curenta
ROWSPAN
numarul de randuri pe care se intinde celula curenta
WIDTH
latimea celulei, in procente din latimea tabelului



TabelANLUNAZI

1995	mai	25	1995	mai	31

--------------------------------------------------------------------------------
Forme
Formele
sunt compuse din campuri de intrare in cadrul paragrafelor, listelor
sau tabelelor. Fiecare camp este definit printr-un element INPUT si
trebuie sa aiba un atribut de nume NAME unic intr-un document. Exista
si atribute optionale pentru specificarea dimensiunii, valorii
initiale, tipului etc. ale campului.


Tip: WWWGopherFTPTelnet
Adresa Internet:

Cuvinte cheie(optional):
oficial



unde :
SELECT
se defineste o lista din care se poate selecta optiunea dorita
INPUT de tip text
se introduce un nume
TEXTAREA
defineste un text
INPUT de tip checkbox
defineste casute de tip on/off
INPUT de tip submit
defineste butoane prin care se lanseaza anumite programe (ex: memorare formular, resetare formular, etc.)
Completarea
si inregistrarea unui astfel de formular determine memorarea intr-un
fisier a datelor introduse de utilizator in fiecare camp sau expedierea
datelor prin posta electronica depinzand de ce mecanism a fost
implementat in programul de tratare a formelor.

--------------------------------------------------------------------------------

Texte preformatate
Daca elaboratorul de fisiere HTML doreste ca textul sau sa fie afisat ca atare poate utiliza comanda PRE.
Exemplu :


-------
| |
| A |
| |
-------