Primul document

******************

* WEB DESIGN *

* ABC-doar *

******************


*********************************

* autor RUSU MIRCEA AUREL VALER *

*********************************

************************************

* MOTTO: *

* *

* "Tant que tu seras heureux, *

* tu compteras beaucoup d'amis." *

* *

************************************

Acest manual prezinta simplist primii pasi in lumea Internet-ului.

(primii pasi pentru programarea de resurse de tip Web).

Pentru a putea crea sau modifica o pagina de Web,trebuie sa invatati

HTML,VBScript,JavaScript,XML sau sa utilizati programe specializate

gen Web Studio.Primii pasi pot fi facuti parcurgand aceasta carte,sau

urmarind in retea un tutorial,ori un curs specializat.

C O N T I N U T
Generalitati . . . . . . . . . . . . . . . . . . 1

Limbajul HTML . . . . . . . . . . . . . . . 6
Sinteza HTML . . . . . . . . . . . . . . . . 30
Java Script . . . . . . . . . . . . . . . . . . 34
Evenimentele Javascript . . . . . . . . . 51
Interfata grafrica de tip Javascript . . . 64
Limbajul VB Script . . . . . . . . . . . . 79
Limbajul XML si XSL . . . . . . . . . . . 105
Procesorul XML . . . . . . . . . . . . . 118
Limbajul XSL . . . . . . . . . . . . . . 119
XSL-FO (XSL-Formatting Objects) . . . . . 131
Recomandari generale . . . . . . . . . . 137

G E N E R A L I T A T I
Enciclopedia Wikipedia propune pentru Web Design urmatoarea definitie:

-este procesul de conceptie,planificare,modelare si executie via Internet

a unor informatii continute intr-un mediu electronic sub forma de tehno-

logii specifice (de tip markup language),ce pot fi interpretate si afi-

sate cu ajutorul unui web browser,bazat pe o interfata grafica.

Definitia contine o serie de neologisme (web,Internet,markup,browser)

ce pot detemina o serie de confuzii.Acest manual se adreseaza celor ce

nu au notiuni clar fundamentate privitoare la reteaua Internet.Prin urma-

re,cu riscul de a fi superflue,datele vor fi prezentate succesiv,sub

forma de abecedar.

Asadar,vom incepe cu termenul de Internet.Internetul este o retea de

comunicatie internationala,bazata pe un set de conventii si protocoale de

comunicatie comune,cu ajutorul carora se poate face schimb activ de infor-

matii in orice punct de pe glob.Initial,reteaua a cuprins doar un grup

limitat de retele locale,ce au convenit asupra unor standarde comune de

transfer si interpretare a datelor,apoi reteaua s-a extins exponential,

pana cand a cuprins majoritatea retelelor de comunicatie de pe glob.La

inceput reteaua a fost exclusiv formata din conectoare electrice si/sau

radiocomunicatii,apoi s-a extins spre diverse alte solutii tehnice,cum

sunt fibra optica si retelele "wireless".

Pentru a forma reteaua,fiecare terminal sau centrala din retea are

un cod propriu de identificare desemnat prin protocoalele TCP/IP.Exista

o institutie special creata,cu numele de "Internet Assigned Numbers

Authority",cu scopul de a organiza,administra si controla modul in care

se implementeaza aceste protocoale de identificare.

O alta institutie,denumita Internet Engineering Task Force are rostul

de a organiza si administra protocoalele de comunicatie propriu-zise

cunoscute sub numele de Internet Standard.Filele de tip Web reprezinta

doar o parte dintre tehnologiile acceptate in reteaua Internet (exista

si alte tipuri de prezentare a datelor).Pentru documentele de tip Web si

respectiv reteaua cunoscuta sub numele de World Wide Web se aplica urma-

toarele tipuri de standarde si recomandari:

-recomanadarile publicate de "World Wide Web Consortium (W3C)"

-Internet Standard (STD) publicat de Internet Engineering Task Force(IETF)

-Request for Comments(RFC) publicate tot de IETF

-standardele publicate de International Organization for Standardization

-standardele publicate de ECMA (European Computer Manufacturers Assoc.)

-standardul Unicode publicat de Unicode Consortium

-protocoalele TCP/IP administrate de Internet Assigned Numbers Authority

Daca sunteti un banal user si nu doriti decat sa mentineti sau sa

administrati un simplu site de web,sau un blog,nu este necesar sa cunoas-

teti toate aceste protocoale si recomandari.Este suficient daca utilizati

pentru design doar programele si limbajele acceptate in standard.Daca

doriti insa sa deveniti un web designer profesionist,va trebui sa urmariti

in permanenta toate aceste recomandari,emise initial sub forma de RFC-uri

(Request for Comments) si apoi impuse sub forma de standard.Mai mult decat

atat,este recomandabil sa studiati atent continutul reglementarilor,sa

analizati in ce masura vor fi utile in activitatea d-voastra si apoi sa

faceti comentariile dorite (Request for comments este o invitatie de a

comenta efectul probabil al regulilor propuse).


-2-

Reteaua Internet nu este un organism unic,si nu are o administratie de

tip societate comerciala,ci este creata modular.Fiecare modul are o admi-

nistratie proprie si prin urmare poate avea si un set de reglementari de

uz intern,valabile doar pentru modulul respectiv.Fiecare astfel de modul

se poate cupla,sau decupla de la reteaua globala,singura conditie obli-

gatorie fiind sa respecte conventiile unanim acceptate.

In linii mari,standardele si recomandarile ce afecteaza reteaua Web se

refera la: limbajele de tip markup (HTML,XHTML,SVG,XForms),la limbajele

de tip script(JavaScript,VBScript) sau la platforma de tip "Document

Objects Models" utilizata pentru prelucrarea datelor.

Documentele de tip Web utilizeaza un format al datelor de tip hipertext,

adica un tip special de text in care se pot introduce si conexiuni(link)

spre alte tipuri de date formatate(text,imagini,sunete etc.).Ca rezultat,

documentul va putea contine cuvinte reprezentate de obicei cu alte fonturi

sau cu o alta culoare grafica.Un simplu click pe aceste cuvinte va conduce

utilizatorul fie spre un alt fragment din document,fie spre un alt docu-

ment,sau chiar spre un alt tip de fila (audio-video etc.).Atunci cand

conexiunea se face spre o alta fila de Web,poarta numele de "hiperlink".

Limbajele prin care se opereaza cu texte de tip hipertext mai au si o

alta particularitate,denumita "markup language".Prin limbaj "marcat" sau

"semnalizat",se intelege de fapt un limbaj artificial in care se utili-

zeaza un set de adnotari la text,prin care se pot introduce un set de

instructiuni referitoare la modul de afisare a textului (fonturi,culoare,

dimensiune,efecte speciale etc.).

Prototipul acestor limbaje este format din HTML (HyperText Markup Lan-

guage) si urmasul sau XHTML(Extensible Hypertext Markup Language).

O alta notiune ce trebuie elucidata este cea de script.Un script,sau

un limbaj de tip script este un limbaj de programare ce controleaza o

aplicatie de tip software.Spre deosebire de programele simple,un script

nu poate fi rulat independent,ci este intotdeauna inclus intr-o aplicatie

si nu poate fi executat decat din interiorul aplicatiei respective.In

cazul documentelor de tip Web,script-urile sunt fragmente de cod inserate

in text.In momentul in care procesorul citeste un astfel de script,acesta

nu va fi interpretat ca un text oarecare ci va fi interpretat ca un set

de comenzi si instructiuni,la fel ca si o fila de cod oarecare.Din punct

de vedere istoric,aceste script-uri au fost dezvoltate prin perfectionarea

unor fragmente de cod similare,cunoscute sub numele de "shells".

Shells au fost introduse in practica inca din anii 1960 cu scopul de a

permite un set oarecare de operatii asupra unor documente partajate in

sistem "time-sharing".Initial,aceste fragmente de cod au fost denumite

"shellscripts" apoi pur si simplu "scripts".

O alta parte din tehnologia limbajelor de tip script,provine din cea

destinata pentru filele de comenzi denumite "batch file"(adica file izo-

late sau file "lipite").Pentru sistemele de operare DOS si Windows,filele

de tip batch pot fi utilizate pentru a edita un set de comenzi ce urmeaza

sa fie prelucrate si executate de catre interpretorul de comenzi ( care

este de obicei COMMAND.COM sau cmd.exe).Acest gen de file sunt utilizate

mai ales de catre administratorii de sistem,pentru a putea automatiza o

serie de procese,pentru a determina automat un anumit fel de setari,sau

pentru a transmite sistemului de operare o seceventa oarecare de comenzi,

ce urmeaza sa fie executate succesiv,linie cu linie.


-3-

Initial,se redacta un anumit numar de asfel de file de tip batch si

apoi se introducea in hipertext cate un link spre fila de batch cores-

punzatoare.Apoi,tehnologia s-a modernizat,astfel incat seturile de co-

menzi pot fi incluse direct in document,sub forma de "tag-uri".Rezultatul

este ca textul poate contine comenzi directe catre sistemul de operare.

Prin aceste comenzi,documentul devine interactiv si permite orice fel

de operatii posibile: poate fi modificat,transformat,actualizat,analizat,

reformatat etc.Mai mult decat atat,documentul va putea include obiecte,

cu proprietati,metode si evenimente,astfel incat fila de text se trans-

forma de fapt intr-un program orientat spre obiecte (OOP).Practic intr-o

fila de tip Web se pot determina toate operatiile si aplicatiile siste-

mului: animatie,aplicatii audio-vizuale,analiza si restructurarea activa

a datelor,formarea de baze de date,crearea sau stergerea de obiecte si

structuri de date...etc.

In concluzie,o pagina de tip WEB este un tip special de fila in care

se pot arhiva informatii,ce pot fi accesate din retea cu ajutorul unui

instrument denumit web browser.O fila de tip web este scrisa de obiecei

intr-un limbaj de tip hipertext (HTML,XHTML) si poate avea incluse si

un numar oarecare de script-uri prin care se face legatura cu alte tipuri

de resurse,sau cu alte file.Toate filele de tip web din retea sunt inter-

conectate intre ele si formeaza o retea speciala,denumita World Wide Web.

In aceasta retea,fiecare fila poate fi identificata cu ajutorul unui cod

special de tip alfanumeric,denumit "Uniform Resource Locator(URL)".Practic

fiecare fila are un nume unic,astfel incat instrumentul denumit web brow-

ser sa poata gasi la nevoie fila dorita,in functie de acest nume (URL).

Mai multe astfel de file de tip web,pot fi interconectate intre ele,

pentru a forma un "site".Un site web este o colectie de resurse formata

din file web,imagini,clip-uri audio-video etc.Toate aceste resurse sunt

interconectare prin hiperlink-uri,astfel incat trecerea de la o fila la

alta,sau de la o resursa la alta sa se poata face cat mai cursiv (fara

operatii suplimentare din partea utilizatorului).Site-ul de web trebuie

sa fie gazduit intr-un server si sa fie accesibil in reteaua Internet.Un

server nu este decat un calculator obisnuit,conectat la retea si dotat cu

un software special ce controleaza accesul la datele inmagazinate.In acest

server,se creaza un director special pentru fiecare site,apoi este sufi-

cient sa arhivati in directorul respectiv filele dorite.Pentru a controla

modul de acces la site-ul web astfel creat,serverul contine o serie de

filtre si feed-back-uri sau rutine automate,sau programabile.Daca doriti

sa transformati calculatorul d-voastra in server de web,trebuie sa va

procurati software-ul necesar si apoi sa asigurati functionalitatea timp

de 24 de ore,sau dupa un program prestabilit.

In functie de modul in care prezinta informatiile,filele si site-urile

web pot fi statice,sau dinamice.Cele statice prezinta in permanenta ace-

leasi informatii,sau secvente de informatii in timp ce cele dinamice se

pot actualiza si modifica permanent,fie prin interventia utilizatorului,

fie utilizand rutine automate ce preiau datele din retea de la surse fixe

sau variabile.In functie de continutul lor,site-urile pot fi de tip arhiva

blog(jurnal personal),comerciale,baza de date,locatii pentru recrutare de

cadre,site pentru jocuri sau schimb de resurse audio,site de stiri si

actualitati,site educativ,site de tip enciclopedie (vezi wikipedia,knol)

sau site personal (pentru corespondenta si afaceri personale).


-4-

Pentru a deschide o fila de web,sau un site de web,este necesar un

browser de web.Browser-ul de web,este de fapt o mica aplicatie ce executa

automat un set oarecare de operatii.Este suficient sa introduceti adresa

URL a paginii dorite si browser-ul va face restul de operatii necesare:

acceseaza reteaua,cauta fila,elibereaza memoria,deblocheaza fila,verifica

toate exceptiile si filtrele,eventual analizeaza fila,apoi deschide fila,

preia si reformateaza la nevoie toate datele si apoi le afiseaza cu aju-

torul unei interfete grafice.Prin interfata grafica,se intelege o combi-

natie oarecare de obiecte vizuale,cu ajutorul carora se poate realiza

comunicatia dintre utilizator si masina.La programele vechi,pentru a

putea comunica aplicatiei o anumita comanda,trebuia sa stiti sa intro-

duceti o linie de comanda cu o anumita sintaxa,intr-un anumit limbaj.Cu

ajutorul interfeteti grafice,este suficient sa apasati un buton,sa selec-

tati o caseta checkbox sau sa alegeti o versiune predefinita dintr-o

lista oferita de un obiect ListBox sau ComboBox.Cu alte cuvinte,utiliza-

torul programului nu are nevoie de nici un fel de cunostiinte de pro-

gramare pentru a putea exploata aplicatia la maximum.Practic,interfata

grafica se interpune intre utilizator si sursa de date si executa automat

toate operatiile necesare pentru schimbul de date.

Primul browser de web,cunoscut sub numele de WorldWideWeb (WWW) a fost

introdus in februarie 1991,de catre Tim Berners-Lee si a fost primul pro-

gram capabil sa combine protocolul de tip FTP (File Transfer Protocol) cu

cel de tip Hypertext Transfer Protocol (inventat de Berners-Lee in 1989).

Programul si codul sursa,au fost oferite gratuit in retea (freeware) si au

determinat o extindere si diversificare rapida.Protocolul a fost acceptat

de tot mai multi programatori si incet,incet s-a impus ca standard.

Au urmat un numar din ce in ce mai mare de astfel de browsere de web,

dintre care cel care a jucat un rol hotarator in domeniu,a fost Windows

Internet Explorer (IE),dezvoltat de firma Microsoft si lansat pe piata

incepand cu anul 1995.Internet Explorer cuprinde o serie de browsere de

web,bazate pe o interfata grafica si a cunoscut mai multe versiuni.Acest

browser este de departe cel mai frecvent utilizat pe plan mondial: -intre

anii 2002 si 2003 (versiunile IE5 si IE6) a atins un varf de peste 95%

dintre utilizatorii retelei World Wide Web.In prezent,Internet Explorer a

ajuns la versiunea 9,dar popularitatea sa este in continua descrestere,

datorita unei oferte foarte generoase de browsere gratuite si competitive.

Fiecare versiune a adaugat un set de tehnologii noi.Primele versiuni

acceptau doar filele de tip Richtext si Hipertext,in timp ce incepand cu

IE5 a fost introdus si standardul cunoscut sub numele de Windows Script

Host,pentru a permite inserarea de script-uri de tip VBScript,JavaScript

in documente.Toate limbajele de script apeleaza de fapt la Windows Script.

Ca rezultat,script-urile se pot edita cu ajutorul unui editor de text

obisnuit,cum este de exemplu NotePad.

EXEMPLU: -deschideti NotePad

-editati urmatoarea linie de comanda:

WScript.Echo("Hello world!");

-salvati fila cu numele Hello.js (atentie la extensie)

-apoi executati un dublu clicK pe fila

Observati ca WScript este un obiect,ce poate fi apelat ca atare.Comanda

se poate edita cu un editor banal,dar este apelata la fel ca o fila de

tip batch (de catre un interpretor de comenzi).


-5-

Tehnologia pentru browser-ele de web s-a dezvoltat in paralel cu insasi

reteaua Internet.In prima faza,toate documentele erau de tip text,apoi

au fost acceptate bazele de date si tabelele preformatate,sau filele de

calcul tabelar(gen Excel).Recent au fost introduse tot mai multe tipuri de

aplicatii audio-vizuale.In etapa actuala,inca se lucreaza la integrarea

completa a retelelor de telefonie mobila si de televiziune prin satelit.

In viitor,probabil ca toate sursele de informatie vor fi perfect inte-

grate,intr-o retea unica,accesibila de pe orice tip de terminal.

Epoca in care documentele de web se redacteaza linie cu linie,in HTML,

sau orice alt limbaj,a apus demult.In etapa actuala,exista programe spe-

cializate pentru crearea si editarea documentelor WEB.Nu trebuie decat sa

editati textul la fel ca pe un text oarecare,apoi sa trageti cu mouse

toate filele dorite si sa realizati conexiunile necesare (hiperlink) cu

o simpla operatie de tip drag-and-drop.Apoi adaugati efectele speciale si

orice alt fel de conditii,filtre sau artificii,tot cu ajutorul unor

obiecte specializate.In final,programul va prelucra automat toate aceste

optiuni,va edita automat toate codurile,va formata datele si va crea

documentul final,gata de a fi exploatat.Un astfel de program este de

exemplu Web Studio,dar oferta este extrem de larga si cuprinde aplicatii

software cu preturi ce variaza intre 20 si 70000 de euro.

Totusi,limbajul HTML,VBScript sau JavaScript poate fi invatat cu

putina bunavointa in cateva zile,sau maximum in cateva saptamani.Are rost

sa stiti ce se afla in spatele interfetei grafice,pentru a putea verifi-

ca,depana,actualiza sau transforma o astfel de fila,chiar daca nu detineti

programul sursa in care a fost creata.In plus,cunoasterea acestor limbaje

va ofera o mult mai buna perspectiva asupra operatiilor necesare pentru

a obtine un anumit efect vizual,sau o anumita forma de prezentare a date-

lor.Bineinteles ca pentru un profesionist este indispensabil si un astfel

de program de editare automata,dar pentru a alege acest program,dintre

sutele de programe aflate pe oferta,trebuie sa stiti ce anume doriti sa

faca,dar mai ales,cum se realizeaza toate aceste efecte speciale.

Probabil in in foarte multe cazuri,solutia cea mai buna va fi una

intermediara.Adica,puteti utiliza un program automat pentru a crea sche-

letul aplicatiei,pentru a introduce textul banal si majoritatea efectelor

speciale,dar va trebui sa creati si sa editati manual cateva dintre

link-urile sau secventele automate pe care programul nu le stie crea

automat.In acest fel,economisiti zeci de mii de euro,fara sa fie necesar

sa executati manual toata munca de rutina.

Nu se pot formula concluzii,sau sfaturi generale.Fiecare dintre uti-

lizatori are un nivel de pregatire si un set de pretentii diferit.Ca

urmare si solutia de lucru va trebui sa fie individualizata,atat in

functie de rezultatul final,cat si in functie de mijloacele de exprimare

ale programatorului,sau utilizatorului PC.

In cazul in care decideti ca are rost sa va insusiti cel putin ele-

mentele de baza necesare pentru a crea o fila de tip web,are rost sa

parcurgeti acest manual.In caz contrar,este mai bina sa cautati o alta

sursa de informatie (reteaua Internet ofera o gama foarte larga de pro-

grame educative si tutoriale,unele in format video,altele sub forma de

cursuri interactive,etc.).Trebuie sa cautati o alta sursa de informatie

si in cazul in care doriti o diploma sau un document prin care sa fie

atestate conostiintele dobandite de d-voastra in acest domeniu.


-6-

LIMBAJUL HTML
Denumirea s-a format prin abrevierea de la HyperText Marckup Language.

Acest limbaj este structurat modular sub forma de fragmente mai mici,de-

numite "tags"(etichete,citate,anexe),delimitate prin paranteze unghiulare

("angle brackets").Limbajul HTML se utilizeaza pentru a putea descrie

informatiile continute intr-un text oarecare utilizand mijloace diferite

de prezentare si afisare a datelor.Astfel,textul va putea fi format din

fragmente distincte ce contin titluri,paragrafe,conexiuni spre alte

fragmente de text,imagini sau fragmente sonore,animatie etc.In plus,cu

ajutorul acestui limbaj se pot include in document si informatii despre

modul de prezentare sau semantica documentului (daca a fost copiat sau

transformat prin compilare) sau se pot introduce comenzi pentru sistemul

de operare,sub forma de script-uri.

Filele de tip HTML poarta extensia .html sau .htm si recunosc stan-

dardele W3C HTML 4.01 si W3C HTML 3.2 dezvoltate de catre World Wide Web

Consortium.Exista mai multe versiuni consecutive,dintre care ultima este

HTML 5 publicata de W3C in ianuarie 2008 sub forma de "Working Draft".

La origine,HTML a fost dezvoltat din limbajul denumit SGML (Standard

Generalized Markup Language) si a fost apoi extins spre limbajul denumit

XHTML (Extensible HyperText Marckup Language).Limbajul XHTML este de

fapt o aplcatie de tip XML (Extensible Marckup Language) in care termenul

de extensibil (extensible) denota faptul ca utilizatorii au libertarea

de a definii elementele cu care lucreaza,spre deosebire de limbajul HTML

simplu,in care se accepta doar structuri fixe,predefinite.Si limbajul

XHTML cunoaste mai multe variante,dintre care ultima este XHTML 2.0.

Din punct de vedere structural,limbajul HTML se formeaza din urmatoa-

rele componente: elemente si atribute,tipuri de data,referinte de tip

caracter(pointeri tip text) si referinte de tip entitate (pointeri tip

obiect).

Elementele formeaza structura de baza a unui document HTML si prezinta

doua proprietati distincte : atributul si continutul elementului.Fiecare

element incepe cu un tag de start si se termina cu un tag de sfarsit:

EXEMPLU: ... text ...

Tag-ul de start contine atributul elementului,iar continutul propriu

zis este inclus intre cele doua tag-uri.In cazul elementelor fara nici

un continut,cum este de exemplu elementul
,nu este necesar sa mai

includeti si tag-ul terminal (
).

Primul tag ce trebuie sa apara neaparat in orice document de tip HTML

este cel prin care se declara tipul de document.Acest tag trebuie sa

contina atributul "html",iar la sfarsitul documentului trebuie sa fie

inclus tag-ul de sfarsit "/html".

EXEMPLU : -creati un director denumit ExempleWEB

-deschideti editorul NotePad

-editati urmatorul text:



Primul document in limbaj HTML !



-salvati fila cu numele Web1.htm in directorul ExempleWeb

-executati dublu click pe fila (cu conditia ca Internet

Explorer sa fie instalat si functional).


-7-

Singurul element demn de remarcat este faptul ca fila a fost deschisa

automat de catre Internet Explorer,fapt ce ne asigura ca documentul va

putea fi accesat si in retea,in cazul in care va fi inclus intr-un server.

In plus,documentul va avea un icon de tip IE.Daca executati pe fila un

click drept de mouse si alegeti Properties,puteti observa ca fila este

de tip HTML Document si ca optiunea "Opens with" este Internet Explorer.

In cazul in care urmeaza sa editati documente complexe,este bine ca

declaratia tipului de document sa contina si versiunea de program utili-

zata la crearea documentului.De exemplu,daca utilizati versiunea 3.2,

prima linie din program va fi urmatoarea:

Aceasta linie nu este absolut necesara,dar va simplifica munca de veri-

ficare si control sau depanare a documentului,mai ales atunci cand se

utilizeaza programe de analiza automata.Pentru a putea adauga in document

si alte informatii utile,urmatorul tag din document poarta numele de

head (cap de fila).In acest tag se introduc datele prin care se descriu

informatii suplimentare despre document.Aceste informatii suplimentare nu

vor fi afisate pe ecran,dar pot simplifica mult munca de organizare si

sau depanare.

EXEMPLU : -redeschideti cu Notepad documentul Web1.htm

-completati textul astfel:







document din arhiva nr.1

document cu caracter public

cod de arhiva ABCXXX 111

-->





Primul document in limbaj HTML !

...


Textul dorit !


... si

Primul document in limbaj HTML !



.......

textul documentului

.......

Vezi inceputul filei !