Sunteți pe pagina 1din 9

Elementele limbajului HTML

Toate obiectele HTML sunt introduse ntre marcaje care le definesc; majoritatea acestora sunt de forma <tip_obiect> (la nceput) i </tip_obiect> (la sfrit). Tipul standard al obiectului poate fi specificat cu majuscule sau minuscule; totui, se recomand utilizarea majusculelor fiindc astfel marcajele ies n eviden. Majoritatea navigatoarelor permit vizualizarea paginii curente n formatul surs HTML (forma pe care o interpreteaz pentru afiarea paginii). La interpretare, programele de navigare ignor spaiile i <Enter>-urile, aplicnd 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 diveri parametri. Pentru definirea hiperlegturilor se foloseste marcajul <A>, care are de asemenea parametri proprii. Codurile de marcare HTML pot fi clasificate n urmtoarele categorii:
1. marcaje de baz - cele care delimiteaz pagina / documentul HTML, titlul acesteia i corpul paginii; 2. marcaje pentru structurarea documentului - care permit introducerea de subtitluri, paragrafe, linii de delimitare; 3. marcaje pentru formatarea textului si crearea listelor; 4. marcaje pentru crearea hiperlegturilor (hyperlinks); 5. marcaje pentru introducerea de obiecte - tabele, formule, imagini sau obiecte multimedia preluate din fiiere, formulare.

Vom descrie n paragrafele urmtoare, elementele caracteristice fiecreia din aceste categorii. Pentru structurarea i organizarea informaiilor din paginile web se pot utiliza frame-uri (marcajul <FRAME>), prin care la un moment dat se afieaz mai multe ferestre coninnd fiecare cte o pagin. Introducerea i gestiunea frame-urilor se realizeaz foarte convenabil folosind editoarele HTML. Mai menionm faptul c n ultimele versiuni ale limbajului HTML i ale browser-elor s-a introdus posibilitatea integrrii, respectiv lansrii n execuie prin navigator, a unor aplicaii. Acestea sunt scrise n limbajul Java, un limbaj cu caracteristici distribuite i obiectuale, adaptat programrii n Web; ele se numesc "applet"-uri i se introduc n sursele HTML cu marcajul <APP> sau <APPLET>. Ultimele versiuni de editoare HTML permit introducerea interactiv a applet-urilor Java.

Marcaje de baz
O pagin Web este delimitat de marcajele <HTML> i </HTML> care indic nceputul i finalul documentului i conine:

zon de antet cuprins ntre marcajele: <HEAD> </HEAD> si un corp delimitat de marcajele: <BODY> </BODY>.

Zona de antet este utilizat de ctre programele de cutare pe site-urile web i permite specificarea titlului paginii care va fi afiat de navigator (nu apare propriu-zis n coninutul 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 urmtorul exemplu: <HTML> <HEAD> <TITLE>Titlul documentului </TITLE> </HEAD> <BODY>Document HTML foarte simplu</BODY> </HTML>

Marcaje pentru structurarea documentului


Programele de navigare asigur afiarea difereniat a unor titluri i subtitluri pentru seciunile 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 rnduri libere dup titlu etc.). Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n este o cifr ntre 1 i 6 care specific nivelul titlului (1 este titlul principal iar 6 corespunde celui mai sczut 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:

linie nou - cu marcajul <BR>, eventual cu desenarea unei linii orizontale - marcajul <HR>; paragraf nou - cu marcajul <P> (se insereaz o linie nou si eventual se face o indentare). Marcajul </P> desemneaz sfrsitul de paragraf dar este mai rar folosit (se poate omite).

Marcaje pentru formatarea textului si crearea listelor


Formatrile uzuale de texte permit scrierea cu caractere:

aldine - n acest scop pentru acel text se aplic marcajele <B> </B>; cursive (italice) - pentru acel text se aplic marcajele <I> </I>; subliniate - textul se introduce ntre marcajele <U> </U>.

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 formatri 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.

x poate fi un numr ntre 1 si 12, indicnd mrimea exact, sau un numr cu semn, indicnd mrimea relativ la dimensiunea curent. y poate fi numele unei culori standard, specificat n limba englez si ntre ghilimele, sau, eventual, descompunerea unei culori n componentele RGB, sub form hexazecimal (cte dou cifre hexa pentru fiecare component).

Suplimentar, se pot creea pagini de stiluri, n care s se defineasc stiluri logice, modificabile ulterior; n acest scop, se folosesc marcajele <DN> - definiie, <EM> - punere n eviden, <STRONG> - accentuare puternic. Pentru tastaturile care suport numai codurile ASCII, caracterele speciale se pot crea folosind formatul &nume_caracter - de exemplu, &egrave; pentru e. Avnd n vedere semnificaia special a caracterelor <, > i &, apariia lor n documente trebuie specificat sub forma caracterelor speciale: &lt; , &gt; , respectiv &amp; . Prezentm n continuare un exemplu de document HTML, precum i modul n care acesta este afiat 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>

Afisarea cu Netscape Navigator a unui document HTML simplu

n figur, se observ c textul propriu-zis al documentului poate fi delimitat fa de codurile de marcare, iar formatarea textului din documentul HTML nu corespunde cu cea afiat de programul de vizualizare:

textul este extins pentru a ocupa ntregul ecran si este afisat cu un corp de liter diferit fat de sursa HTML; terminatorii de linie nu sunt respectati; spatiile albe suplimentare din documentul surs sunt ignorate.

Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliat mai jos. Limbajul HTML permite definirea mai multor tipuri de liste i imbricarea lor (includerea unor liste n altele), caz n care trebuie verificat cu atenie corespondena dintre marcajele de nceput si sfrit pentru fiecare list. Formatarea listelor la afiarea paginii (introducerea bulinelor, numerotrii etc.) se face de ctre programul de navigare. Elementele listelor se introduc ntre marcajele <LI> </LI> ("list item"). Modul de apariie al elementelor depinde de tipul de list n care sunt incluse (cu buline, numerotate etc.), determinat de marcajul specific. Astfel, listele pot fi:

neordonate (cu buline) - delimitate de marcajele <UL> </UL> ("unordered list"); elementele lor se afieaz cu buline; ordonate (numerotate) - delimitate de marcajele <OL> </OL> ("ordered list"); elementele lor se vor numerota; de tip meniu - delimitate de marcajele <MENU> </MENU>; elementele acestor liste apar ntr-o reprezentare compact pe ecran (multicoloan); glosare (liste de definiii) delimitate de marcajele <DL> </DL> ("definition list"); elementele acestora au cte dou componente, introduse respectiv cu marcajele <DT> (pentru nume) i <DD> (pentru semnificaia asociat); tabele scurte - create cu marcajul <DIR>.

Listele utilizate cel mai frecvent sunt cele ordonate i neordonate. Prezentm n continuare un exemplu simplu de pagin HTML care conine 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>

Exemple de liste ntr-o pagin HTML

Marcaje pentru crearea hiperlegturilor


Hiperlegturile ("hyperlinks") se introduc cu marcajele <A> </A> ("anchor") aplicate asupra unui text sau a unei imagini. Ele se pot crea ctre:

adrese URL - astfel se asigur accesul n cadrul procesului de navigare (prin protocoale specifice), nu numai la paginile web, ci i la diverse servicii Internet (vezi Sistemul de adresare URL); fiiere / resurse locale adic aflate pe acelai calculator cu pagina creat - link-uri locale ; acestea ar putea fi accesate i printr-un URL cu protocolul "file" dar pentru mai mult simplitate, este suficient specificarea numelui i cii 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 legturii i afiarea prin intermediul navigatorului a resursei asociate link-ului. Resursa asociat unei legturi este descris prin parametrii marcajului <A>:

HREF - permite asocierea unei adresei URL, crearea unei legturi locale prin specificarea numelui i cii fiierului corespunztor sau a unei legturi interne documentului; este cel mai important parametru pentru construirea de hiperlegturi; NAME - numele hiperlegturii sau al zonei dintr-o pagin ctre care se face referirea, n cazul unui link intern;

METHODS - metodele de acces (acest parametru se utilizeaz doar n prelucrri speciale). Astfel, un link local sau ctre o adres URL se poate defini pe un text cu: <A HREF="resursa"> text </A>.

O legtur intern ctre o zon a documentului curent se indic folosind marcajul <A NAME="nume-zona">.

Marcaje pentru introducerea de obiecte


Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a informatiilor formatate. Asemenea obiecte trebuiau create formatat i introduse ca obiect deja formatat, cu marcajele <PRE>, </PRE>. Aceste marcaje indicau navigatorului c textul inclus trebuia afiat caracter cu caracter, fr vreo intervenie de formatare. n versiunile ulterioare ale limbajului HTML, s-au introdus ns facilitti 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 i coloane verticale la a cror intersectie se formeaz celulele. Acestea pot conine intrri 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 afiare va depinde i de programul de navigare. Tabelele se introduc ntre marcajele <TABLE> </TABLE>, crora li se pot ataa (optional) parametrii BORDER si RULES. Un titlu pentru tabel se poate introduce cu marcajul <CAPTION>. Fiecare coloan se defineste cu marcajul <COL>, avnd ca parametru ALIGN modul de aliniere a informaiilor din aceea 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, grupri de celule etc. Aceste marcaje permit navigatorului s afieze difereniat informaiile din tabel. Prezentm 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>

Exemplu de tabel ntr-o pagin HTML

Mrimea liniilor i a coloanelor poate fi controlat suplimentar prin marcajele <ROWSPAN=x> i respectiv <COLSPAN=y>, fiecare indicnd mrimea 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:

SRC indic (dup semnul '=') URL-ul imaginii, respectiv calea fisierului dac acesta este local; uzual, se accept fiiere n format GIF sau JPEG; ALLIGN controleaz alinierea imaginii fa de limita inferioar a textului (TOP, MIDDLE sau BOTTOM); este un parametru optional; ALT furnizeaz textul afiat n locul imaginii dac utilizatorul dezactiveaz opiunea de afiare a imaginilor (parametru optional); ISMAP este un indicator optional pentru imaginile care sunt hrti selectabile.

Astfel, introducerea simpl a unei imagini se poate realiza cu <IMG SRC="specificareimagine">. Un exemplu de imagine inserat ntr-o pagin HTML este prezentat n figura de mai sus. Remarcm faptul c, utiliznd parametri specifici, marcajul <IMG> se poate folosi si pentru inserarea unor fisiere multimedia, cum ar fi secvenele video. Avnd n vedere c aceste operaii se realizeaz mai uor folsind un editor HTML. Formulare. HTML 1.0 permitea uzual doar transferarea informaiilor de la furnizori ctre utilizatori, transferul n sens invers fiind foarte dificil. Odat cu dezvoltarea Web-ului i mai ales cu utilizarea sa n scopuri comerciale i n diverse alte domenii, s-a fcut simit necesitatea comunicrii n dublu sens pentru preluri de comenzi, completarea unor fie de nregistrare,

distribuirea de produse soft, administrarea de chestionar, transmiterea unor informaii personale etc. Acestea au fost motivaiile introducerii formularelor n HTML 2.0. Formularele contin obiecte de control care permit utilizatorilor introducerea de informaii prin completarea unor cmpuri specifice (casete de text), prin selectarea sau activarea unor opiuni (comutatoare, grupuri sau liste de optiuni). Aceste informaii vor fi transmise, dup activarea butonului SUBMIT (echivalent cu tastarea lui <Enter>) proprietarului paginii, introduse n baze de date dedicate i prelucrate cu aplicaii specifice. Formularele se introduc prin marcajelele <FORM> ... </FORM> , crora li se ataeaz parametri specifici care definesc metodele de transmitere i tratare a datelor. Un formular poate conine obiecte de control de diverse tipuri, definite cu marcajul <INPUT> i o varietate de parametri care stabilesc, pentru obiectul definit, tipul, dimensiunea i modul lui de afiare. Astfel, se pot crea cmpuri de text (care vor fi completate cu texte de ctre utilizator), liste de alternative, comutatoare, grupuri de opiuni, butoane, hr i 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 interaciona cu baza de date creat pentru realizarea unor aciuni specifice (de exemplu, hr ile active folosesc script-uri CGI pentru a executa diferite actiuni, n funcie de zona selectat de utilizator). Script-urile CGI pot executa i alte operatii dect prelucrarea formularelor, producnd ieiri convenabile. Dac o hiperlegtur indic spre un script CGI, la selectarea legturii se va executa script-ul (cu anumite variabile de context care rein diverse informatii de stare). Script-ul va produce un fiier, 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 cerine ale utilizatorilor, furniznd anumite rspunsuri ateptate n urma unor aciuni. Crearea interactiv a formularelor, folosind produse soft specializate n realizarea de pagini Web este relativ accesibil pentru utilizatorii familiarizai cu caracteristicile obiectelor de control specifice aplicaiilor soft dar tratarea ulterioar a informaiilor transmise necesit cunostinte de specialitate. Numele, simbolurile i 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 avizai ns, crearea, chiar interactiv, a formularelor este mai dificil.

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