Toate obiectele HTML sunt introduse între marcaje care le definesc; majoritatea acestora sunt de forma <tip_obiect> (la început) si </tip_obiect> (la sfârsit). Tipul standard al obiectului poate fi specificat cu majuscule sau minuscule; totusi, se recomandă utilizarea majusculelor fiindcă astfel marcajele ies în evidentă.
Majoritatea navigatoarelor permit vizualizarea paginii curente în formatul sursă HTML (forma pe care o interpretează pentru afisarea paginii). La interpretare, programele de navigare ignoră spatiile si <Enter>-urile, aplicând formatarea specificată.
Există însă si marcaje cu parametri; acestea au forma <tip_obiect
param1=valoare1 param2=valoare2 …>. De exemplu, obiectele de tip imagine sunt
introduse cu delimitatorul <IMG>, care are diversi parametri. Pentru
definirea hiperlegăturilor se foloseste marcajul <A>, care are de asemenea
parametri proprii.
Codurile de marcare HTML pot fi clasificate în următoarele
categorii:
Vom descrie în paragrafele următoare, elementele caracteristice fiecăreia din aceste categorii.
Pentru structurarea si organizarea informatiilor din paginile web se pot utiliza frame-uri (marcajul <FRAME>), prin care la un moment dat se afisează mai multe ferestre continând fiecare câte o pagină. Introducerea si gestiunea frame-urilor se realizează foarte convenabil folosind editoarele HTML.
Mai mentionăm faptul că în ultimele versiuni ale limbajului HTML si ale
browser-elor s-a introdus posibilitatea integrării, respectiv lansării în
executie prin navigator, a unor aplicatii. Acestea sunt scrise în limbajul Java,
un limbaj cu caracteristici distribuite si obiectuale, adaptat programării în
Web; ele se numesc "applet"-uri si se introduc în sursele HTML cu marcajul
<APP> sau <APPLET> Antiacnee.
Ultimele versiuni de editoare HTML permit introducerea interactivă a
applet-urilor Java.
O pagină Web este delimitată de marcajele <HTML> si </HTML> care indică începutul si finalul documentului si contine:
Zona de antet este utilizată de către programele de căutare pe site-urile web si permite specificarea titlului paginii care va fi afisat de navigator (nu apare propriu-zis în continutul paginii).
titlul, introdus în antet, este cuprins între marcajele <TITLE> … </TITLE>.
Astfel, o formă extrem de simplă a unui document HTML ar putea fi cea din următorul exemplu:
<HTML>
<HEAD> <TITLE>Titlul documentului
</TITLE>
</HEAD>
<BODY>Document HTML foarte
simplu</BODY>
</HTML>
Programele de navigare asigură afisarea diferentiată a unot titluri si subtitluri pentru sectiunile paginii, după criteriile implementate în acest scop la conceperea sa (litere mai mari sau mai mici, diverse culori, litere aldine sau simple, unul sau mai multe rânduri libere după titlu etc.).
Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>,
unde n este o cifră între 1 si 6 care specifică nivelul titlului (1 este titlul
principal iar 6 corespunde celui mai scăzut nivel). Astfel:
<H1> …
</H1> indică un subtitlu de nivelul 1
…
<H6>
… </H6> indică un subtitlu de nivelul 6.
Pentru separarea zonelor paginii se pot folosi treceri la:
Formatările uzuale de texte permit scrierea cu caractere:
Unele programe mai vechi de navigare nu permiteau reprezentarea acestor formate; în acest caz, se aplicau alte moduri de evidentiere a textelor respective (culori, video invers).
Alte tipuri de formatări de caractere care se pot defini se referă la:
dimensiunea fonturilor si culori - se va utiliza marcajul cu parametri:
<FONT SIZE=x COLOR=y> … </FONT> , care indică utilizarea unui font de dimensiune x si culoare y.
Suplimentar, se pot crea pagini de stiluri, în care să se definească stiluri logice, modificabile ulterior; în acest scop, se folosesc marcajele <DN> - definitie, <EM> - punere în evidentă, <STRONG> - accentuare puternică.
Pentru tastaturile care suportă numai codurile ASCII, caracterele speciale se pot crea folosind formatul &nume_caracter - de exemplu, è pentru e. Având în vedere semnificatia specială a caracterelor <, > si &, aparitia lor în documente trebuie specificată sub forma caracterelor speciale: < , > , respectiv & .
Prezentăm în continuare un exemplu de document HTML, precum si modul în care acesta este afisat de Netscape Navigator.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD
HTML//EN">
<html>
<head>
<title>Pagina
simpla</title>
</head>
<body>
<p>Acesta
este un exemplu simplu de o
pagina HTML. Ea arata cum
pot aparea
caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai
mici</font>,
respectiv insera
o mica imagine
<img
src="Handshake8114.gif"
width="20"
height="14">.
</p>
</body>
</html>
În figura, se observă că textul propriu-zis al documentului poate fi delimitat fată de codurile de marcare, iar formatarea textului din documentul HTML nu corespunde cu cea afisată de programul de vizualizare:
Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliată mai jos.
Limbajul HTML permite definirea mai multor tipuri de liste si imbricarea lor (includerea unor liste în altele), caz în care trebuie verificată cu atentie corespondenta dintre marcajele de început si sfârsit pentru fiecare listă. Formatarea listelor la afisarea paginii (introducerea bulinelor, numerotării etc.) se face de către programul de navigare.
Elementele listelor se introduc între marcajele <LI> … </LI> ("list item"). Modul de aparitie al elementelor depinde de tipul de listă în care sunt incluse (cu buline, numerotate etc.), determinat de marcajul specific.
Astfel, listele pot fi:
Listele utilizate cel mai frecvent sunt cele ordonate si neordonate.
Prezentăm în continuare un exemplu simplu de pagină HTML care contine aceste
tipuri de liste.
<html>
<head>
<title>Pagina
cu
liste</title>
</head>
<body>
<p>Aceasta
pagina exemplifica crearea listelor</p>
<p>Cele mai uzual
folosite tipuri de liste sunt:
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<p>O
lista ordonata este o lista numerotata:
<ol>
<li>primul
element;</li>
<li>al doilea
element...</li>
</ol>
</body>
</html>
Hiperlegăturile ("hyperlinks") se introduc cu marcajele <A> … </A> ("anchor") aplicate asupra unui text sau a unei imagini. Ele se pot crea către:
adrese URL - astfel se asigură accesul în cadrul procesului de navigare (prin protocoale specifice), nu numai la paginile web, ci si la diverse servicii Internet (vezi Sistemul de adresare URL);
fisiere / resurse locale adică aflate pe acelasi calculator cu pagina creată - link-uri locale ; acestea ar putea fi accesate si printr-un URL cu protocolul "file" dar pentru mai multă simplitate, este suficientă specificarea numelui si căii fisierului local;
o zonă din documentul HTML curent - link-uri interne.
În fiecare din aceste cazuri, un click pe textul sau imaginea respectivă va determina activarea legăturii si afisarea prin intermediul navigatorului a resursei asociate link-ului.
Resursa asociată unei legături este descrisă prin parametrii marcajului <A>:
HREF - permite asocierea unei adresei URL, crearea unei legături locale prin specificarea numelui si căii fisierului corespunzător sau a unei legături interne documentului; este cel mai important parametru pentru construirea de hiperlegături;
NAME - numele hiperlegăturii sau al zonei dintr-o pagină către care se face referirea, în cazul unui link intern;
METHODS - metodele de acces (acest parametru se utilizează doar
în prelucrări speciale).
Astfel, un link local sau către o adresă URL se
poate defini pe un text cu: <A HREF="resursa"> text
</A>.
O legătură internă către o zonă a documentului curent se indică folosind marcajul <A NAME="nume-zona">.
Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a informatiilor formatate. Asemenea obiecte trebuiau create formatat si introduse ca obiect deja formatat, cu marcajele <PRE>, </PRE>. Aceste marcaje indicau navigatorului că textul inclus trebuia afisat caracter cu caracter, fără vreo interventie de formatare. În versiunile ulterioare ale limbajului HTML, s-au introdus însă facilităti elegante de formatare, de includere a tabelelor si a altor obiecte.
În HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii orizontale si coloane verticale la a căror intersectie se formează celulele. Acestea pot contine intrări diverse: texte, figuri sau chiar alte tabele. Se pot realiza reuniri de celule (de exemplu, pentru titluri mai lungi). Atributele de formatare a tabelului (aliniere, stilul chenarului si marginilor etc.) se definesc în proiectarea paginii dar modul lor de afisare va depinde si de programul de navigare.
Tabelele se introduc între marcajele <TABLE> … </TABLE>, cărora li se pot atasa (optional) parametrii BORDER si RULES. Un titlu pentru tabel se poate introduce cu marcajul <CAPTION>. Fiecare coloană se defineste cu marcajul <COL>, având ca parametru ALIGN - modul de aliniere a informatiilor din acea coloană (LEFT, CENTER, RIGHT).
Antetul tabelului se poate indica între marcajele <TH>…</TH> ("Table Header"), pentru trecerea la o linie nouă se utilizează marcajul <TR> ("Table Row") iar celulele individuale se marchează cu <TD> ("Table Data"), eventual cu parametru de aliniere. Se mai pot specifica alinieri orizontale sau verticale ale celulelor, grupări de celule etc. Aceste marcaje permit navigatorului să afiseze diferentiat informatiile din tabel.
Prezentăm în continuare un exemplu simplu de tabel.
<HTML>
<HEAD>
<TITLE>Pagina cu
tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina
da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari
anuale:</H3>
<TABLE>
<TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125
milioane lei</TD><TD>160 milioane lei</TD><TD>231
milioane
lei</TD>
</TABLE>
</BODY>
</HTML>
Mărimea liniilor si a coloanelor poate fi controlată suplimentar prin marcajele <ROWSPAN=x> si respectiv <COLSPAN=y>, fiecare indicând mărimea în "celule normale". În plus, se poate indica trasarea unei margini pentru tabel, prin marcajul <TABLE BORDER>.
Includerea imaginilor se face folosind marcajul <IMG>, care are parametri specifici:
Astfel, introducerea simplă a unei imagini se poate realiza cu <IMG
SRC="specificare-imagine">. Un exemplu de imagine inserată într-o pagină HTML
este prezentat în figura de mai sus.
Remarcăm faptul că, utilizând parametri
specifici, marcajul <IMG> se poate folosi si pentru inserarea unor fisiere
multimedia, cum ar fi secventele video. Având în vedere că aceste operatii se
realizează mai usor folsind un editor HTML.
Formulare. HTML 1.0 permitea uzual doar transferarea informatiilor de la furnizori către utilizatori, transferul în sens invers fiind foarte dificil. Odată cu dezvoltarea Web-ului si mai ales cu utilizarea sa în scopuri comerciale si în diverse alte domenii, s-a făcut simtită necesitatea comunicării în dublu sens pentru preluări de comenzi, completarea unor fise de înregistrare, distribuirea de produse soft, administrarea de chestionar, transmiterea unor informatii personale etc. Acestea au fost motivatiile introducerii formularelor în HTML 2.0.
Formularele contin obiecte de control care permit utilizatorilor introducerea de informatii prin completarea unor câmpuri specifice (casete de text), prin selectarea sau activarea unor optiuni (comutatoare, grupuri sau liste de optiuni). Aceste informatii vor fi transmise, după activarea butonului SUBMIT (echivalentă cu tastarea lui <Enter>) proprietarului paginii, introduse în baze de date dedicate si prelucrate cu aplicatii specifice.
Formularele se introduc prin marcajelele <FORM> ... </FORM> , cărora li se atasează parametri specifici care definesc metodele de transmitere si tratare a datelor. Un formular poate contine obiecte de control de diverse tipuri, definite cu marcajul <INPUT> si o varietate de parametri care stabilesc, pentru obiectul definit, tipul, dimensiunea si modul lui de afisare. Astfel, se pot crea câmpuri de text (care vor fi completate cu texte de către utilizator), liste de alternative, comutatoare, grupuri de optiuni, butoane, hărti active etc.
Datele preluate prin intermediul formularelor se tratează conform standardului CGI (Common Gateway Interface) prin intermediul unor programe sau script-uri CGI. În plus, un asemenea script poate interactiona cu baza de date creată pentru realizarea unor actiuni specifice (de exemplu, hărtile active folosesc script-uri CGI pentru a executa diferite actiuni, în functie de zona selectată de utilizator).
Script-urile CGI pot executa si alte operatii decât prelucrarea formularelor, producând iesiri convenabile. Dacă o hiperlegătură indică spre un script CGI, la selectarea legăturii se va executa script-ul (cu anumite variabile de context care retin diverse informatii de stare). Script-ul va produce un fisier, de exemplu o pagină web, care va fi interpretat(ă) de navigator. Acest mecanism permite script-urilor să genereze, aproape instantaneu, pagini web care să satisfacă diverse cerinte ale utilizatorilor, furnizând anumite răspunsuri asteptate în urma unor actiuni.
Crearea interactivă a formularelor, folosind produse soft specializate în realizarea de pagini Web este relativ accesibilă pentru utilizatorii familiarizati cu caracteristicile obiectelor de control specifice aplicatiilor soft[1] dar tratarea ulterioară a informatiilor transmise necesită cunostinte de specialitate.
[1] Numele, simbolurile si procedura de introducere interactivă dintr-un editor HTML (de exemplu, Microsoft Front Page) a obiectelor de control sunt extrem de apropiate de cele asociate obiectelor similare din formularele sau rapoartele Microsoft Access. Pentru utilizatorii mai putin avizati însă, crearea, chiar interactivă, a formularelor este mai dificilă.