|
|
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:
<HTML>
<HEAD>
urmeaza informatia de descriere
</HEAD>
<BODY>
urmeaza informatia utila
</BODY>
</HTML>
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:
<TITLE>text de titlu</TITLE>
--------------------------------------------------------------------------------
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:
<h1>Titlu pagina</h1>
--------------------------------------------------------------------------------
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 :
<p>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
"A&B" are valoarea <100>
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 : á, è, ö, û, ç, ñ, Î, Ø, 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.<A HREF="#1"marcaj</A>
2.<A HREF="legatura.html">topica</A>
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 :
<P><A HREF = "#1.">Introducere</A>
<BR><A HREF ="#2.">Initiative</A>
<B><A NAME = "1.">1.</A.>Introducere</B>
<P>Proiectul de fata este un ghid de utilizare HTML.
<B><A NAME = "2.">2.</A>Initiative</B>
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 :
<A HREF="http://www.geocities.com/bogdan_world/">ROMANIAN HOME PAGE</A>
Marcarea textelor
Portiuni dintr-un document pot fi marcate, fara a fi legaturi, asociindu-li-se atribute definind aspectul lor :
intarit <B>text</B>
italic <I>text</I>
fixed-pich <TT>text</TT>
italic tipic <EM>text</EM>
tipic intarit <STRONG>text</STRONG>
Sectiuni din text pot fi separate prin trasarea unei linii orizontale intre ele prin comanda :
<HR>
<HR ALIGN= SIZE= WIDTH=%>
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
<BASEFONT SIZE=> (pentru toata pagina)
<FONT SIZE=></FONT> (pe o protiune de text)
culoarea textului
<BODY TEXT="">
culoarea topicii definita ca legatura (culoarea de dinainte de selectare cat si cea de dupa selectare)
<BODY LINK="" VLINK="">
culoarea sau textura (un anumit desen care se repeta acoperind tot fondul) fondului
<BODY BGCOLOR="">
<BODY BACKGROUND="fond.gif">
Culoarea se specifica prin cele trei componente astfel #RRGGBB (valorile se dau in hexazecimal).
Exemplu :
<body text="#FFFF00"
background="/images/sky2.gif"
vlink="#FF0000"
LINK="#20B2AA">
Se poate comanda ca o portiune de text sa fie centrat in pagina.
<CENTER></CENTER>
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).
<IMG {ALIGN+[TOP|BOTTOM|MIDDLE]} SRC="imagine.gif">
O imagine poate fi declarata legatura catre alt document HTML :
<A HREF="explicatie.html"><IMG ALIGN=MIDDLE SRC="imagine.gif"></A>
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 :
<!-- Acesta este un comentariu -->
--------------------------------------------------------------------------------
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 :
<OL>
<LI> element 1
<LI> element 2
<LI> element 3
</OL>
determina afisarea ei astfel:
element 1
element 2
element 3
Liste marcate
Comanda UL. Declararea unei liste ca in exemplul urmator :
<UL>
<LI> element 1
<LI> element 2
<LI> element 3
</UL>
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 :
<DL>
<DT> termen 1
<DD> definitia 1
<DT> termen 2
<DD> definitia 2
</DL>
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 :
<IMG SRC="figura.gif">
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:
<A HREF="coord.conf"><IMG SRC="ro.gif" ISMAP></A>
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
<TABLE></TABLE>
<TABLE BORDER></TABLE>
<TABLE BORDER= CELLSPACING= CELLPADDING= WIDTH=></TABLE>
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)
<CAPTION></CAPTION>
<CAPTION ALIGN=TOP></CAPTION>
<CAPTION ALIGN=BOTTOM></CAPTION>
Definire linie de tabel
<TR></TR>
<TR ALIGN= VALIGN=></TR>
unde :
ALIGN
defineste alinierea textului pe orizontala (centrat, stanga, dreapta)
VALIGN
defineste alinierea textului pe verticala (sus, jos)
Definire antet de tabel
<TH></TH>
<TH ALIGN= VALIGN=></TH>
<TH COLSPAN= ROWSPAN=></TH>
<TH WIDTH=%></TH>
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
<TD></TD>
<TD ALIGN= VALIGN= COLSPAN= ROWSPAN=></TD>
<TD WIDTH=%></TD>
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
<TABLE BORDER>
<CAPTION>Tabel</CAPTION>
<TH>AN<TH>LUNA<TH>ZI<TR>
<TD>1995<TD>mai<TD>25
<TD>1995<TD>mai<TD>31
</TABLE>
--------------------------------------------------------------------------------
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.
<FORM ACTION="cgi-bin/AA">
<P>Tip: <SELECT TYPE= "text" SIZE="5" NAME="Type">
<OPTION>WWW
<OPTION>Gopher
<OPTION>FTP
<OPTION>Telnet
</SELECT>
<P>Adresa Internet: <INPUT TYPE="text" SIZE="40" NAME="URL">
<TEXTAREA ROWS="4" COLS="60" NAME="Descriere"></TEXTAREA>
<P>Cuvinte cheie<I>(optional)</I>:
<INPUT TYPE="checckbox" NAME="Oficial" VALUE="da"><B>oficial</B>
<INPUT TYPE="submit" VALUE="Inregistrare">
</FORM>
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 :
<PRE>
-------
| |
| A |
| |
-------
</PRE>
--------------------------------------------------------------------------------
Formule matematice
In expresiile matematice se utilizeaza indici si puteri care pot fi obtinute prin comenzile SUB si SUP. De exemplu, ecuatia :
H(s)=∫0∞e-st h(t) dt
in format hipertext arata astfel:
<MATH>
H(s)=∫<SUB>0</SUB><SUP>∞</SUP>e<SUP>-st</SUP> h(t) dt
</MATH>
Simbolurile integrala, infinit, etc. au corespondentul lor in hipertext insa nu la toate browserele.
--------------------------------------------------------------------------------
_______________________________________
|
|
Dar e bine ca sunt si oameni din astia mai... talentati? Ambitiosi? Sincer, chiar ii admir pe cei capabili sa inteleaga astfel de treburi...
