1

Capitolul I Limbajul HTML

1.1 Istoric
n urm cu peste 30 de ani, la sfritul anilor '60, Departamentul Aprrii din S.U.A. a pus bazele primei reele de calculatoare destinat s acopere o larg ntindere geografic, ARPAnet (Advanced Research Projects Agency Network). Scopul reelei era schimbul de informaii cu caracter tiinific i tehnic ntre participanii la diferite proiecte de cercetare din cadrul Departamentului Aprrii i cercettori din instituii de nvmnt superior implicate. Rezultatele obinute n cadrul acestui proiect au condus la definirea i apoi la standardizarea unor protocoale folosite la transferul de date prin reelele de calculatoare (TCP/IP - Transfer Control Protocol/Internet Protocol, HTTP - HyperText Transfer Protocol, FTP - File Transfer Protocol i altele) i a determinat n anii '70 i '80 o extindere lent dar continu a reelelor de calculatoare. naintea exploziei informaionale din anii '90 au mai trebuit s apar dou realizri importante: 1. Dezvoltarea limbajului HTML, propus de Dr. Tim Berners-Lee, ntr-un articol publicat n 1989. Articolul propunea folosirea pentru codificarea informaiei vehiculate prin reelele de calculatoare a unui subset de marcaje definite n standardul SGML (Standard Generalized Markup Language, 1986). n esen SGML propune un set de marcaje care permit reconstituirea documentelor difuzate pe suport electronic. 2. Apariia n februarie 1992 a primei aplicaii destinate navigrii pe Internet, Mosaic. Aplicaia a fost scris de studeni ai NCSA (National Center of Supercomputing Applications) din cadrul universitii statului Ilinois, USA. Limbajul HTML a fcut obiectul unor standardizri succesive, prima versiune finalizat fiind 2.0, n 1995 (autori Tim Berners-Lee i Dan Connoly). Importana dezvoltrii limbajului a condus la crearea World Wide Web Consortium (W3C), organizaie care n 1997 a finalizat versiunea 3.2 care i n prezent este recunoscut ca standardul HTML. Spre finele anilor '90 au aprut ns noi tehnologii, legate de realizarea paginilor Web: Cascading Style Sheets (CSS), Active Server Pages (ASP), ceea ce a determinat continuarea activitii n domeniul standardizrii a W3C, organizaia realiznd succesiv standardele 4.0 i 4.01. Ultima versiune este 4.1, actualmente fiind n curs de pregtire versiunea 5. n viitorul previzibil, HTML va continua s reprezinte suportul pentru difuzarea de informaii prin Internet.

2 1.2. Adresarea
Regsirea unui fiier printre miliardele de fiiere existente n World Wide Web se bazeaz pe folosirea unui sistem unitar de adresare pus la punct odat cu internetul. Sistemul de adresare poart numele de URL (Uniform Resource Locator). Astfel, dac se afieaz n fereastra unei aplicaii de navigare pagina principal a saitului colii Academice Postuniversitare Informatica Aplicat i Programare aceasta ar putea arta ca n figur.

Adresa paginii apare n partea superioar a ferestrei i este: http://www.infoap.utcluj.ro/ Prima parte a adresei (http) precizeaz protocolul care trebuie folosit pentru exploatarea fiierului, n cazul dat http (HyperText Transfer Protocol) deoarece fiierul este n format hypertext i codificat n html. A doua parte a adresei, www.infoap.utcluj.ro identific un director de pe discul serverului care gzduiete saitul. Ea poate fi scris i folosind adresa fizic din Internet alocat serverului, care este format din patru numere cuprinse fiecare ntre 0 i 255. De exemplu adresele http://www.infoap.utcluj.ro/ i http://193.226.7.133/infoap/ sunt echivalente dar a doua este mai greu de reinut. Punerea n coresponden a celor dou modaliti de indicare a directorului care

3
conine pagina web dorit se realizeaz de una dintre aplicaiile pentru DNS (Domain Name System) accesate de browser. Dac adresa indicat n browser nu mai conine i alte caractere, serverul de Web specificat va trimite solicitantului pagina principal a saitului, fiierul corespunztor fiind denumit de obicei index.html. Adresa unui fiier din Internet poate fi ns mai complex. Astfel adresa http://www.infoap.utcluj.ro/progr/bilet_ex.pdf conine dup denumirea serverului o cale, /progr/ i denumirea fiierului referit, bilet_ex.pdf. Aceasta nseamn c n directorul saitului exist un subdirector (progr) n care este nregistrat fiierul bilet_ex.pdf. Se poate deci scrie: URL = protocol + server + cale + fiier Crearea unui numr de subdirectoare derivate din directorul principal al saitului face ntreinerea acestuia mult mai uoar. Aa cum se va vedea n capitolele urmtoare, chiar i n cazul unui sait mic numrul de fiiere coninnd imagini sau a altor tipuri de fiiere poate fi destul de mare, fiind indicat o structurare a lor ca n figur.

imagini

css

pagini web (fiiere .html)

4 1.3 Principiile limbajului HTML

Codificarea informaiilor n HTML se bazeaz exclusiv pe informaii de tip text (iruri de caractere ASCII). Dac informaia propriuzis este un text acest sistem de codificare este natural. Dac ns informaia este de alt natur (o imagine, o secven video sau audio) documentul n format HTML va conine numele fiierului care conine informaia respectiv. Exemplu de fiier n format hypertext: <HTML> <HEAD> <TITLE>Prima pagina Web</TITLE> </HEAD> <BODY bgcolor=yellow> <H1> NUMAI UNA </H1> <P> Pe umeri pletele-i curg rau <BR> Mladie ca un spic de grau, <BR> Cu sortul negru prins in brau, <BR> O pierd din ochi de draga. <BR> Si cand o vad, innebunesc; <BR> Si cand n-o vad, ma-nbolnavesc, <BR> Iar cand merg altii de-o petesc, <BR> Vin popi de ma dezleaga. </P> <IMG src="imagini/cosbuc.jpg" alt="George Cosbuc"> </BODY> </HTML> n fiierul dat ca exemplu <HTML> ... </HTML>, <HEAD> ... </HEAD>, <BODY> ... </BODY> .a. sunt denumite marcaje HTML. Unele marcaje (<body> sau <img>) conin informaii suplimentare ca valori ale unor atribute (bgcolor sau src). Analiznd coninutul fiierului se observ c informaia propriuzis este ncadrat ntre marcaje <H1> ... </H1> i <P> ... </P>. Marcajul <H1> delimiteaz un titlu (eng. heading) iar <P> ... </P> delimiteaz un paragraf (eng. paragraph). n coninutul fiierului apar i marcaje <BR>. Acestea indic trecerea la linie nou (eng. break) i nu au pereche. Pentru inserarea unei imagini s-a folosit tot un marcaj fr pereche, <IMG>. Acesta indic fiierul care conine imaginea. n exemplul dat atributul src are valoarea "imagini/cobuc.jpg", deci fiierul cobuc.jpg este situat n subdirectorul imagini. Dup scrierea fiierului n Notepad i salvarea sub numele numai_una.html se poate deschide fiierul folosind de exemplu Internet Explorer.

1.4. XML, XHTML

Un limbaj similar limbajului HTML este XML. Spre deosebire de HTML, n XML sintaxa este mai riguroas, marcajele aprnd n mod obligatoriu n perechi. Semnificaia lor este ns nedefinit, interpretarea cznd n sarcina aplicaiilor care exploateaz respectivele fiiere. Faptul c limbajele de programare actuale au clase care faciliteaz prelucrarea fiierelor n format XML a favorizat apariia unui limbaj nou de codificare a paginilor Web, XHTML. Deosebirile majore dintre HTML i XHTML constau n faptul c marcajele i atributele acestora sunt scrise cu litere mici, toate marcajele apar n perechi i valorile atributelor sunt obligatoriu cuprinse ntre ghilimele. Observaie: Pentru scrierea marcajelor din HTML care practic nu au nevoie de pereche se folosete o sintax aparte. Astfel, pentru trecerea la linie nou n loc s se secrie <br></br> se va scrie mai simplu <br />. La fel pentru inserarea imaginii se scrie <img src="nume_fisier" alt="George Cosbuc" />. n XHTML pagina Web analizat deja s-ar scrie astfel: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en">

6
<head> <title>Prima pagina Web</title> <style type="text/css"> body { background-color: yellow; } </style> </head> <body> <h1> NUMAI UNA </h1> <p> Pe umeri pletele-i curg rau <br /> Mladie ca un spic de grau, <br /> Cu sortul negru prins in brau, <br /> O pierd din ochi de draga. <br /> Si cand o vad, innebunesc; <br /> Si cand n-o vad, ma-nbolnavesc, <br /> Iar cand merg altii de-o petesc, <br /> Vin popi de ma dezleaga. </p> <img src="cosbuc.jpg" /> </body> </html> Fiierul astfel modificat se salveaz sub acelai nume. Primele dou linii din fiier impun browserului modul de tratare a informaiei coninute:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD (Document Type Definition) indic pe lng natura informaiei coninute (XHTML 1.0) i setul de marcaje utilizate. n exemplul considerat s-a indicat modelul Strict. n loc de Strict se putea indica modelul Transitional, diferena dintre cele dou fiind lista de marcaje i de atribute utilizabile, mai restrns n cazul variantei Strict. A doua linie face trimitere la o adres din Internet. Fiierul referit conine definiia riguroas a modelului Strict, respectiv modul n care trebuie interpretate marcajele i atributele acestora. n acest mod se dorete impunerea tratrii uniforme, de ctre toate browserele, a coninutului paginilor Web. O alt diferen notabil a variantei XHTML fa de HTML este adugarea n seciunea <head> a marcajului <style>. Acesta conine indicaii privind formatarea coninutului paginii web sub forma unor reguli. Pentru pagina considerat s-a inclus o singur regul:

body { background-color: yellow; }

Ea impune pentru corpul paginii (seciunea <body>) colorarea fundalului n galben. Caracteristic pentru XHTML este separarea informaiilor propriuzise de indicaiile de formatare. Astfel, n HTML pentru a scrie diferit o poriune dintr-un paragraf am putea ntlni o succesiune de marcaje ca n exemplul urmtor:

<P>Poezia <I><B><FONT color=blue>Numai una...</FONT></B></I> a fost publicata in 1837. </P>

n XHTML acelai efect s-ar obine scriind:

<p>Poezia <span class="bib">Numai una...</span> a fost publicata in 1837. </p>

Marcajul <span> face referin la clasa bib. Definirea ei se poate face prin adugarea unei reguli suplimentare ntre <style> ... </style>:

<style type="text/css"> body { background-color: yellow; } .bib {font-style: italic; font-weight: bold; color: blue} </style>
A doua variant de formatare, specific limbajului XHTML este interesant deoarece orice clas astfel definit va putea fi referit n pagina Web ori de cte ori este nevoie. Aa cum se va vedea n continuare, ansamblul de reguli introdus prin <style> poate fi salvat ntr-un fiier separat, utilizarea regulilor definite putnd fi imediat extins la toate paginile care alctuiesc un sait Web dndu-le un aspect unitar. De asemenea eliminarea din corpul paginii (seciunea <body>) a detaliilor privind formatarea faciliteaz ntreinerea coninutului paginilor.

1.3 Marcaje XHTML 1.3.1. Generaliti

Avnd n vedere avantajele limbajului XHTML i tendina actual de a se renuna la HTML n favoarea limbajului XHTML, n cele ce urmeaz vor fi prezentate doar cunotine de XHTML. O pagin web este coninut ntre marcaje <html> ... </html> i este constituit de cele mai multe ori din dou seciuni, head i body. Seciunea head este delimitat prin <head> ... </head> iar seciunea body este delimitat prin <body> ... </body>. Practic majoritatea paginilor care vor fi scrise n cadrul cursului se vor ncadra n structura urmtoare: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> ...(coninut head) </head> <body> ... (coninut body) </body> </html>

1.3.2 Paragrafe
Ca i n cazul banal al unui document editat cu un procesor de texte, fiecare fraz dintr-o pagin Web este coninut ntr-un paragraf. Pentru evidenierea unui paragraf se folosete perechea de marcaje <p> ... </p>.

8
Exemplu: <p>Primul paragraf poate conine informaii generale. Urmtoarele peragrafe vor aduce precizri suplimentare, n final mesajul transmis fiind limpede. </p> Dispunerea coninutului paragrafului este lsat la latitudinea aplicaiei de navigare. Dac n cadrul unui paragraf trebuie totui trecut forat la linie nou, n locul n care se dorete ruperea paragrafului se va folosi un marcaj <br />. Exemplu: <p> Pe umeri pletele-i curg rau <br /> Mladie ca un spic de grau, <br /> .... </p> n unele cazuri se dorete ca browserul s nu separe pe linii consecutive dou iruri de caractere ntre care exist spaiu. Este cazul numerelor de telefon de exemplu. Pentru astfel de situaii se poate ncadra irul care nu trebuie separat ntre marcaje <nobr> ... </nobr>. Exemplu: Sunai la <nobr> 0745 225236 </nobr> pentru informaii suplimentare. Pentru scrierea caracterelor specifice limbii romne este necesar includerea n seciunea head a marcajului: <meta http-equiv="content-type content="text/html; charset=windows-1252" /> diacriticele putnd fi apoi codificate folosind urmtoarele succesiuni de caractere:

Simbol

Cod &#350; &#351; &#258; &#259; &#194; &#226;

Simbol

Cod &#354; &#355; &#206; &#238;

i pentru alte caractere speciale, de exemplu pentru cele folosite la scrierea marcajelor, trebuie folosite secvene de caractere: &nbsp; &lt; &gt; &amp; pentru pentru pentru pentru caracterul spaiu < > &

Pentru a evidenia pri dintr-un paragraf se folosesc marcajele <em> ... </em> i <strong> ... </strong>. Primul marcaj este interpretat de browsere ca

9
indicnd scrierea nclinat (italic) iar al doilea este interpretat ca indicnd o scriere cu caractere ngroate (bold).

1.3.3 Titluri
Titlurile din paginile web sunt ncadrate ntre marcaje <h> ... </h>. Ca i n cazul procesoarelor de texte se pot folosi marcaje diferite pentru titluri de diferite nivele : h1, h2, , h6. n lipsa unor specificaii privind mrimea caracterelor, pentru nivelul 4 textul va fi afiat normal. Mrimea caracterelor pentru nivelele 5 i 6 va fi n acest caz mai mic dect cea normal iar pentru 1-3 va fi mai mare. Exemplu: <h2>Programul de lucru cu publicul </h2>

1.3.4 Imagini
Pentru includerea n pagina web a unei imagini se folosete marcajul <img />. Acesta accept atributele src pentru indicarea fiierului care conine imaginea i alt pentru definirea textului care va apare n locul imaginii dac afiarea imaginilor n fereastra browserului este inactivat sau la plasarea cursorului mouse-ului deasupra imaginii. Exemplu: <img src="imagini/trandafir.jpg" alt="Trandafir" /> Din punctul de vedere al programului de navigare, o imagine este un simbol ca i oricare dintre caracterele afiate n pagin. Fa de text, imaginile necesit un timp de ncrcare mai ndelungat, ceea ce impune limitarea mrimii i a numrului de imagini din paginile web. Imaginile pot proveni din diferite surse : desenate cu ajutorul unei aplicaii specializate. alte pagini web, scanate sau

Rezoluia imaginii, cuprins uzual ntre 72 DPI (dots per inch, puncte pe inci) i 600 DPI, influeneaz mrimea fiierului care conine imaginea. Monitoarele uzuale afieaz punctele la 0.23-0.26 mm, deci au o rezoluie de aproximativ 96 DPI. Dac imaginile nu trebuie ulterior imprimate i nu se dorete modificarea mrimii lor n momentul afirii n fereastra browserului, se recomand scanarea folosind aceast rezoluie. Imaginile care trebuie afiate n paginile web sunt pstrate n fiiere separate. Deoarece memorarea informaiei grafice se poate realiza folosind o multitudine de tehnologii, prin convenie formatul fiierelor destinate afirii n cadrul paginilor web trebuie s fie GIF (Graphics Interchange Format, avnd extensia .gif, formatul suportnd 256 culori), JPEG (Joint Photographic Experts Group, avnd extensia .jpg, formatul suportnd 224 = 16777216 culori) sau PNG (Portable Network Graphics, variant ameliorat a formatului GIF avnd extensia .png). Dac aceeai imagine este folosit pe mai multe pagini, programul de navigare o va ncrca i memora temporar pe disc reducnd timpii de ncrcare a paginilor.

10
Adaptarea unei imagini la cerinele unui proiect presupune n principal decuparea zonei interesante i redimensionarea acesteia n coresponden cu spaiul alocat n pagin. Exist o multitudinde de aplicaii care permit manipularea imaginilor. Cele mai utilizate sunt urmtoarele: Adobe Photoshop, Corel Photo-Paint, Corel Paint Shop Pro, The GIMP, Inkscape, Pixel image editor, Paint.NET sau Xara. Alegerea unei aplicaii potrivite pentru realizarea activitilor legate de web design este simpl dac se urmrete minimizarea costurilor deoarece numai Inkscape, The Gimp i Paint.NET sunt gratuite. n cadrul cursului, prelucrrile de imagini vor fi realizate cu Inkscape (http://www.inkscape.org/). Un tutorial succint din care se poate nva folosirea aplicaiei poate fi accesat la adresa: http://en.flossmanuals.net/Inkscape/.