Documente Academic
Documente Profesional
Documente Cultură
COMUNICARE
Bucureti - 2004
Interactivitatea ...................................................................................................................... 97
Atribute eseniale ale elementului <form> ........................................................................... 98
Expedierea unui formular vid prin pot electronic ........................................................... 98
Un formular cu un cmp de editare i un buton de expediere .............................................. 99
Butonul Reset....................................................................................................................... 100
Cmp de editare de tip "Password" .................................................................................... 100
Butoane radio...................................................................................................................... 101
Casete checkbox .................................................................................................................. 102
Caseta "File" ....................................................................................................................... 102
Elementul "image"............................................................................................................... 103
Elementul "button" .............................................................................................................. 104
Elementul "hidden" ............................................................................................................. 104
Lista de selecie ................................................................................................................... 105
Lista de selecie cu selecii multiple.................................................................................... 106
Cmpul de editare multilinie............................................................................................... 106
Blocul "button".................................................................................................................... 107
FRAME-URI ............................................................................................................................... 108
Frame-uri sau sub-ferestre.................................................................................................. 108
Culori pentru chenarul frame-urilor................................................................................... 110
Dimensionarea chenarului unui frame ............................................................................... 110
Chenare invizibile ............................................................................................................... 111
Bara de defilare................................................................................................................... 112
Poziionarea documentului ntr-un frame ........................................................................... 112
Chenare fixe ........................................................................................................................ 112
Browser-e vechi................................................................................................................... 112
Frame-uri in-line................................................................................................................. 113
8. ELEMENTE DE DESIGN ALE PAGINILOR WEB........................................................ 114
GLOSAR DE TERMENI ......................................................................................................... 116
BIBLIOGRAFIE ....................................................................................................................... 118
1. Scurt istoric
Proiectul ARPA
n anii 60 n cadrul Departamentului Aprrii Statelor Unite ale Americii
(DOD, Department of Defense) funciona Agenia pentru Proiecte de Cercetare
Avansate (ARPA, Advanced Research Projects Agency). Agenia primete ca proiect
de cercetare realizarea practic a interconectrii reelelor de computere ale bazelor
militare americane. Aceast inter-reea (ARPA) trebuia construit astfel nct s
reziste unui atac atomic din partea unui potenial inamic.
IP (Internet Protocol)
Protocolul IP a fost conceput special pentru a putea satisface obiectivele reelei
ARPA n condiii de atac inamic. Protocolul realizeaz dirijarea informaiei ntr-o
inter-reea.
Pachete
Conform acestui protocol, nainte de fi lansat n Internet o informaie trebuie
mprit n pachete. Fiecare pachet va avea capacitatea de a circula n mod
independent n Internet. Un pachet va conine:
adresa sursei;
adresa destinaiei;
numrul pachetului n cadrul informaiei;
un identificator pentru informaia transmis.
Datorit faptului c pachetele conin i adresa destinaiei, acestea pot circula
independent n Internet i pot ajunge la destinaie ntr-o ordine oarecare, la momente
de timp arbitrare. La destinaie pachetele sunt repuse n ordine i astfel informaia
iniial este refcut.
1969, ARPANET
n anul 1969 la dezvoltarea proiectului ARPA au fost invitate s participe i
patru universiti civile americane. n acest an reeaua ARPA se divide DARPA
(partea militar) i ARPANET (partea civil).
1975
A fost creat serviciul e-mail pentru primirea i expedierea mesajelor
electronice.
Tot n acest an a fost creat serviciul TELNET care a permis comanda de la distan a
unui computer (remote control).
1979
Este creat serviciul UseNet specializat iniial pentru informarea i crearea
grupurilor de discuii pe diferite domenii de interes tiinific.
Anii 80
Apare protocolul TCP/IP care aduce corecii la vechiul protocol IP. n aceti
ani ncep s fie interconectate supercalculatoarele din centrele universitare americane.
Anii 90
Dup anul 1990 pe Internet i fac apariia firmele comerciale. Aceste firme
prin investiiile aduse contribuie foarte mult la dezvoltarea Internet-ului.
7
InterNIC
Dei Internetul nu are o structur administrativ bine determinat, dup 1990
se face simit nevoia unui organism care supervizeze activitile care se petrec pe
Internet. Astfel a aprut InterNIC.
RFC (Request for Comments)
Orice inovaie adus n tehnologiile legate de Internet care devine suficient de
matur pentru a fi acceptat unanim de ctre utilizatori este cunoscut sub forma unei
Cereri de Comentariu (Request for Coments). Exist astzi cteva mii de RFC-uri.
WWW (World Wide Web)
n 1991 n cadrul laboratoarelor de cercetare nuclear CERN, fizicianul Tim
Berners-Lee a inventat o metod de expediere ntre cercettori a datelor tiinifice
(text i imagini). Aceast metod a condus la naterea celui mai popular serviciu
Internet World Wide Web ( n traducere pnza de paianjen ntins ct lumea ntreag).
10
mai comune protocoale de reea sunt: Ethernet, Fast Ethernet (bazat pe fibr optic),
LocalTalk dedicat mai ales calculatoarelor Macintosh, Token Ring (dezvoltat de IBM,
necesit o topologie Star), FDDI (Fiber Distributed Data Interface), ATM
(Asynchronous Transfer Mode), IEEE 802.11b, IEEE 802.11a.
11
(WWW) o anumit pagin Web care este un fiier text ce conine marcatori (tag-uri)
HTML. Ca rspuns al browser-ului server-ul Web va transfera ctre acesta o copie a
fiierului solicitat. Dup descrcare, browser-ul va parcurge acest fiier iar atunci cnd va
ntlni marcatori ce trimit ctre alte resurse (text, imagini, sunete etc) va solicita serverului copii ale acestor fiiere.
Limbajul de Marcare a HiperTextului (HTML) este un limbaj special de marcare
utilizat pentru crearea documentelor cu hiperlegturi (hyperlinks).
Hiperlegturile reprezint marcatori ce realizeaz legturi ctre alte documente
sau resurse Web. Link-urile (legturile) transform un text obinuit n "hipertext" sau
"hipermedia". Ele permit trecerea rapid de la o informaie aflat pe un anumit server la
alt informaie aflat pe un alt server oriunde n lume. Atunci cnd se navigheaz sub un
browser, link-urile apar ca "zone active" ntr-o pagin Web, adic zone pe ecran sensibile
la apsarea butonului (de regul cel stng) al mouse-ului. Un click efectuat cu mouse-ul
pe un link este interpretat ca o cerere ctre un anumit server Web de a expedia ctre
computerul client o resurs ctre care link-ul respectiv puncteaz. n felul acesta paginile
Web devin interactive (adic rspund la aciuni iniiate de utilizator).
Pentru accesul direct i performant la fiierele aflate pe server-ele FTP (File
Transfer Protocol) utilizatorii Internet pot folosi un serviciu special numit FTP. Prin
intermediul serviciului FTP ei pot transfera n mod rapid fiiere de la un sistem la altul.
De asemenea sunt necesare cele dou tipuri de aplicaii Internet (server FTP i client
FTP).
Un calculator sau o reea de calculatoare pot fi conectate la Internet prin
intermediul unui furnizor de servicii Internet ISP (Internet Service Provider). Un ISP este
de regul o societate care are unul sau mai multe calculatoare conectate la Internet prin
intermediul crora pot fi conectai clienii (abonaii) pe baza unui cont (nume utilizator i
parol) obinut de la furnizorul de servicii. Conexiunile cu clienii pot fi realizate n
modaliti diferite (prin intermediul unui modem telefonic, al unui modem cablu tv., prin
ISDN, fibr optic etc).
URL (Uniform Resource Locator) reprezint un identificator unic al unei resurse
Internet. Prin resurs Internet nelegem un calculator, un disc pe un calculator, un fiier
aflat pe un calculator sau un fragment dintr-un fiier aflat pe un calculator conectat la
Internet. Adresele URL definesc printr-o sintax generic accesul la resursele din Internet
i servesc pentru localizarea acestora.
12
.
net
com
roedu
netscape
ro
comunicare
edu
kappa
developer
snspa
mit
comunicare
http://www.comunicare.ro/Internet/Internet.html/#cap5
ftp://www.netscape.com/downloads/communicator
news://msnews.microsoft.com/microsoft.public.windows.outlookexpress5
hostname
Afieaz numele de gazd al computerului
ipconfig
Afieaz adresa IP (software) a computerului, masca de reea i gateway-ul (poarta
implicit).
ping
Verific conexiunea cu un computer prin trimiterea i recepionarea unui pachet de date
de dimensiuni reduse.
15
route print
Afieaz adresa hardware a plcii de reea i tabela de rutare.
tracert
Afieaz serverele intermediare ntre un computer surs i un computer destinaie.
16
17
Afiarea unei pagini Web ntr-o fereastr nou poate fi realizat lansnd o nou
instan a browser-ului i retastnd adresa URL a paginii dorite sau prin intermediul
meniului contextual al unui link (click pe butonul drept al mouse-ului) i apoi alegerea
opiunii Open in New Windows.
Dac se dorete reafiarea aceleiai pagini Web (curente) ntr-o fereastr nou, se
poate utiliza combinaia de taste Ctrl-N sau se poate alege din meniul File al
browser-ului opiunea New i apoi Window.
Dac se dorete stoparea ncrcrii unei anumite pagini Web se poate apela la
butonul Stop al browser-ului aflat n Toolbar.
Barele de unelte (Toolbars) pot fi afiate sau ascunse prin intermediul opiunii
Toolbars din cadrul meniului View al browser-ului i pot fi configurate prin meniului
contextual al Toolbar-ului (opiunea Customize).
18
Afiarea sau ascunderea imaginilor dintr-o pagin Web n fereastra unui browser
poate fi controlat prin intermediul dialogului Internet Options care prin Tab-ului
Advanced ofer posibilitatea setrii opiunii Show Pictures (afiarea cu imagini sau fr).
19
Afiarea adreselor URL vizitate anterior poate fi realizat sub forma unui meniu
derulant (combo box) care apare atunci cnd se d un click pe triunghiul cu vrful n jos
aflat n bara de adrese.
Navigarea Web
Deplasarea la o adres Web se poate realiza n trei feluri:
1. prin tastarea adresei dorite n bara de adrese urmat de Enter:
20
Afiarea unei pagini Web din bookmarks se poate realiza oricnd prin selectarea
ei din meniul Favorites (Bookmarks).
Adresele URL ale paginilor Web memorate n bookmarks-uri pot fi grupate pe
domenii, subdomenii, subiecte i problematici n folder-e i subfolder-e speciale care pot
fi create, modificate sau terse prin intermediul dialogului Organize Favorites. Acest
dialog se poate lansa din opiunea cu acelai nume aflat n meniul Favorites.
tergerea bookmark-ului unei pagini Web se poate realiza prin intermediul
butonului Delete din cadrul aceluiai dialog Organize Favorites sau apsnd tasta Delete
cnd bookmark-ul respectiv este selectat.
21
Pentru a putea fi copiat un text (o secven de text) dintr-o pagin Web se poate
utiliza mecanismul Copy & Paste. Mai nti se va selecta textul dorit, apoi din meniul
contextual al seleciei se va alege opiunea Copy. n acest moment textul va exista n
memoria Clipboard. Pentru a fi copiat (duplicat) ntr-un alt document (Word, text, etc) se
va deschide respectivul document (dac nu este deja deschis) iar apoi prin intermediul
comenzii Paste se va aduce textul din memoria Clipboard la destinaia dorit.
Pentru a copia n Clipboard o imagine dintr-o pagin Web, se poate utiliza meniul
contextual aferent imaginii dorite. Din acest meniu se va alege opiunea Copy, iar apoi
prin Paste, imaginea va fi copiat (duplicat) la o destinaie (ntr-un document Word,
ntr-un editor grafic etc).
O adres URL dintr-o pagin Web poate fi copiat n Clipboard similar copierii
unei imagini dar alegndu-se din meniul contextual comanda Copy Shortcut. O alt
modalitate de a copia o adres URL dintr-o pagin Web prin acelai mecanism Copy &
Paste o constituie opiunea Properties.
Coninutul unei pagini Web se poate salva ca fiier text (.txt) sau (.html) prin
intermediul opiunii Save as existent n meniul File al browser-ului. Dup selectarea
acestei opiuni (Save as) apare un dialog (Save Web Page) prin intermediul cruia poate
fi selectat calea i numele fiierului n care se va salva coninutul paginii curente. De
asemenea se poate selecta tipul fiierului care va fi salvat (html, htm, txt).
Cel mai frecvent paginile Web ofer vizitatorilor link-uri speciale pentru
descrcarea unor arhive ce pot conine fiiere de tip text, de tip imagine, de tip sunet,
video sau produse software. Aceste fiiere exist arhivate (zip, rar, ace etc sau sub forma
autoextractabil exe) pentru a putea fi descrcate mai rapid,.
Procesul de descrcare (download) a fiierelor din hard disc-ul server-ului pe hard
disc-ul calculatorului personal se poate realiza n mai multe modaliti:
dnd click n link-ul respectiv;
prin intermediul meniului contextual alegnd opiunea Save Target As;
prin intermediul unui downloader (un program specializat pentru descrcarea rapid a
unui fiier din Internet ex.: FlashGet, Download Accelerator, GetRight etc).
Salvarea unei imagini dintr-o pagin Web se poate realiza prin intermediul
opiunii Save Picture As din cadrul meniului contextual (aferent imaginii) sau n cazul
browser-ului Internet Explorer v.6.x, alegnd opiunea Save this image din bara de unelte
ce apare atunci cnd prompter-ul mouse-ului se afl deasupra imaginii.
Meniul File al browser-ului pune la dispoziie posibilitatea de a previzualiza o
pagin Web nainte de tiprire prin intermediul opiunii Print Preview.
Schimbarea orientrii portrait (cu pagina aezat pe lungime) sau landscape (cu pagina
aezat pe lime) a unei pagini Web ce va fi tiprit, poate fi realizat prin intermediul
dialogului Print, seciunea Layout. Dialogul Print devine disponibil dac din meniul File
s-a ales opiunea Print. Schimbarea dimensiunii hrtiei se poate realiza prin intermediul
opiunii Page Setup din cadrul meniului File. Dup lansarea acestei opiuni va deveni
disponibil dialogul Page Setup care prin cmpul Size (mrime) va permite modificarea
dimensiunii hrtiei pe care se va lista la imprimant. Opiunea Print a meniului File pune
la dispoziie un dialog special prin intermediul cruia poate fi stabilit coninutul ce va fi
tiprit: ntreaga pagin Web, doar o pagin anume din cadrul documentului Web, un
frame (o seciune, o sub-fereastr a unei ferestre a browser-ului), un text selectat, numrul
de copii ce se vor tipri.
22
Motoarele de cutare
Motoarele de cutare sunt servere specializate n stocarea de meta-informaii
(adic a informaiilor despre informaii) care ofer utilizatorilor posibilitatea de a gsi
(regsi) informaiile dorite n site-urile n care acestea exist.
Selectarea unui motor de cutare se poate face n mai multe feluri:
tastnd adresa URL a acestuia n bara de adrese i apoi Enter;
prin alegere din istoria barei de adrese sau din Bookmarks a adresei motorului de
cutare dorit (dac acesta a mai fost accesat de curnd sau dac are adresa memorat
n Favorites);
prin intermediul butonului Search din Toolbar care va deschide un dialog cu cteva
opiuni de cutare: Find a Web page (pentru o pagin Web), Find a Person (pentru o
persoan), Find a map (pentru o hart) etc.
Iat n continuare cteva adrese ale celor mai puternice motoare de cutare:
www.google.com,
www.yahoo.com,
www.altavista.com,
www.excite.com,
www.lycos.com.
n acest moment Google conine cea mai mare baz de date, n care se gsesc
peste 3 miliarde de pagini. Pentru a clasifica o pagin Web, Google contorizeaz numrul
de link-uri care conduc la aceasta. Deci o pagin Web cu ct va avea mai multe trimiteri
(referine) din alte site-uri, cu att va avea un scor de relevan mai mare.
23
Motoarele de cutare pun la dispoziie mecanisme de cutare dup unul sau mai
multe cuvinte cheie sau dup fraze. Orice motor de cutare ofer minim o bar de cutare
Search (Caut) n care exist un cmp de editare n care pot fi tastate aceste cuvinte sau
fraze i un buton Search care odat apsat va declana ctarea.
24
4. Securitatea n Internet
Certificatele digitale
Un certificat este util pentru a identifica un produs. Acest lucru are sens numai
dac posesorul certificatului are ncredere n emitentul acestuia, numit i autoritate de
certificare.
Atunci cnd avei ncredere ntr-o autoritate de certificare, aceasta presupune c
avei ncredere n exigena acesteia n ceea ce privete evaluarea cererilor de acordare a
certificatelor. Totodat avei ncredere n faptul c autoritatea de certificare va actualiza
periodic i va face public o list a certificatelor care nu mai sunt valabile. Aceast list
va fi trimis tuturor clienilor sau poate fi consultat i extras de acetia din pagina Web
a autoritii de certificare.
Certificatele sunt folositoare pentru o gam larg de servicii de securitate, cum
sunt:
Autentificarea verificarea identitii cuiva sau a ceva.
Confidenialitatea asigurarea faptului c la anumite informaii are acces numai un
anumit public.
Criptarea prelucrarea informaiei astfel nct cititorii neautorizai s nu o poat
descifra.
Semnturi digitale atest integritatea mesajelor i asigur acceptarea acestora.
Autentificarea
25
Deci, utilizatorii care trimit informaii importante ntre dou dispozitive conectate
n orice tip de reea vor trebui s foloseasc o tehnic de criptare pentru a asigura
confidenialitatea acesteia.
Criptarea simetric, cu cheie public i cheie privat
Criptarea poate fi imaginat ca i cnd ceva de valoare este ncuiat ntr-o cutie
rezistent. Similar, decriptarea poate fi comparat cu descuierea cutiei i accesul liber la
valorile dinuntru. n calculator, datele importante sub forma unor fiiere de pe hard disc
sau fiiere transmise prin reea pot fi criptate folosind o cheie de criptare. Att datele
criptate ct i cheia de criptare sunt prelucrate (transformate) astfel nct s nu poat fi
citite (nelese) de persoane nedorite.
Cea mai simpl form de criptare este criptarea simetric, adic folosirea unei
chei de criptare care trebuie cunoscut de toi cei care vor s decripteze informaiile
respective.
O alt metod este criptarea cu cheie public ceea ce presupune existena a dou
chei pereche ntre care exist o legtur stabilit matematic.
O cheie, numit cheie privat, este pstrat secret de ctre persoana care dorete
s-i asigure securitatea mesajelor primite, i o alt cheie, numit cheie public, este dat
celor care vor trimite persoanei n cauz mesaje criptate cu ajutorul ei. Aceste mesaje
criptate cu ajutorul cheii publice nu pot fi decriptate dect de ctre cel care cunoate i
cheia privat pereche a cheii publice cu care au fost criptate. Oricine ncearc s
decripteze n mod fraudulos mesajul criptat, este posibil s descopere sau s afle cheia
public cu care a fost criptat, dar este mult mai dificil s descopere dou chei necesare
simultan procesului de criptare.
n general criptarea cu ajutorul unei chei publice nu este folosit pentru volume
mari de date. Aceast metod este folosit n mod eficient pentru criptarea unor volume
mai mici de date i pentru criptarea cheilor folosite la criptarea simetric.
26
n acest sens dup ce un fiier a fost descrcat din Internet nu este indicat ca el s
fie accesat imediat pe calculatorul local. Este necesar ca pe calculatorul local s fie
instalat un program antivirus (F-Prot, BitDefender, Norton Antivirus, F-Secure, Panda
etc) care de cele mai multe ori are o component activ ce verific automat orice fiier
descrcat din Internet i orice fiier accesat. Dac programul antivirus nu are aceast
component atunci fiierele descrcate din Internet vor trebui verificate de ctre
programul antivirus prin declanarea manual a unei scanri.
Avnd n vedere c n prezent exist creai peste 100.000 de virui informatici i
c probabilitatea de infectare a unor fiiere cu aceti virui este foarte mare, nu se mai
recomand lucrul (mai ales n Internet) fr a avea instalate programe antivirus
corespunztoare, actualizate cu ultimele semnturi de virui informatici descoperii.
Firewall
Cookies i cache
Un cookie este un fiier text pe care o aplicaie server Web l poate scrie prin
intermediul browser-ului ntr-un loc (folder) special pe hard-discul calculatorului client.
Cookie-urile pot fi scrise pe calculatorul client dac browser-ul permite aceste drepturi
(de scriere) prin intermediul setrilor sale. n mod implicit browser-ul permite scrierea
cookie-urilor deoarece altfel multe site-uri nu ar mai putea fi vizitate pentru c interzic
accesul clienilor care nu pot memora cookie-uri. Cookie-urile au o durat de via
stabilit de ctre aplicaia server. Dup expirarea acesteia ele se autodistrug. Cookie-urile
pot conine i informaie nscris criptat. Prin intermediul cookie-urilor n calculatorul
client (al vizitatorului) se pot memora date despre vizitatori, despre preferinele acestora
etc. Aceste informaii pot fi citite apoi de ctre aplicaia server la o nou revenire n site i
memorate ulterior ntr-o baz de date. n acest fel devine posibil spionajul electronic
27
foarte interesant n special pentru firmele comerciale care doresc s-i cunoasc ct mai
bine actualii sau viitorii poteniali clieni.
Deoarece de multe ori conexiunile Internet nu funcioneaz foarte performant iar
unele pagini Web solicitate prin intermediul browser-ului este posibil s mai fi fost
vizitate anterior, s-a dovedit c o conexiune poate fi mult accelerat dac n timpul
navigrii aceste pagini sunt memorate ntr-o zon special (folder) pe hard-discul
clientului numit cache (memorie tampon), iar ulterior la o eventual revenire n site,
dac nu exist modificri, n loc s fie descrcate din calculatorul server, respectivele
pagini s fie rencrcate local, din zona de cache. n timpul navigrii n cache-ul Internet
al browser-ului se memoreaz nu numai coninutul text (HTML) al paginilor Web vizitate
ci i resursele aferente acestora: imagini, sunete video-clipuri etc. ceea ce face ca
ncrcarea acestor pagini n fereastra browser-ului s se produc mult mai repede.
Dimensiunea zonei de cache (n MB) poate fi modificat prin intermediul opiunilor de
configurare ale browser-ului.
Cookie-urile i fiierele memorate n zona cache Internet pot fi terse dac din
meniul Tools al browser-ului se va lansa dialogul Internet Options care prin intermediul
tab-ului General pune la dispoziie aceste utiliti (butoanele Delete Cookies i Delete
Files).
28
5. Pota electronic
Serviciul e-mail este n prezent unul dintre cele mai larg rspndite servicii
Internet deoarece permite transmiterea rapid a mesajelor electronice, este foarte ieftin,
uneori chiar gratis, face posibil transferul de fiiere ataate mesajelor, asigur faciliti
performante de comunicare cum sunt: Reply, Forward, Quote, CC, BCC.
Web-Based e-mail este o interfa Web ce permite accesul la un cont de e-mail,
utiliznd un browser Web. Astfel un cont de e-mail poate fi accesat de oriunde din lume,
de pe orice alt calculator conectat la Internet.
Atunci cnd se transmit mesaje e-mail trebuie respectate cteva reguli
elementare de bun sim ce constituie baza unei netetichete numite Basic Electronic
Mail Netiquette. Iat n continuare cteva dintre cele mai importante recomandri pe
care aceasta le face:
s nu se redacteze mesajul unui e-mail numai cu majuscule;
s se rspund cu promptitudine mesajelor e-mail;
s fie urmrit cu atenie felul n care este redactat mesajul, avndu-se n vedere faptul
c se folosete o exprimare scris, nonverbal;
s se verifice cu atenie mesajul nainte de a fi transmis, astfel nct acesta s nu
conin greeli gramaticale i de ortografie;
n cazul n care se rspunde la un mesaj, s nu se returneze ntregul mesaj original ci
s foloseasc quot-area dubl (plasarea semnelor >>) numai naintea rndurilor la
care se rspunde;
s se foloseasc o semntur electronic automat (care include informaii despre
expeditor i cum poate fi el contactat) dac produsul software cu care se lucreaz
(clientul e-mail) permite acest lucru;
s nu se trimit fiiere ataate nesolicitate;
s se utilizeze linia Subject n care s se fac o descriere succint a coninutului
mesajului;
s nu se trimit prin facilitatea forward glume dect dac este foarte sigur c toi cei
care vor primi mesajul doresc aceasta;
dac un mesaj este trimis la mai multe adrese e-mail odat, pe ct posibil s se
utilizeze Bcc (Blind Carbon Copy) i nu Cc (Carbon Copy) care permite tuturor celor
care au primit mesajul s vad toate adresele e-mail la care acesta a fost transmis;
s nu se utilizeze facilitatea forward dac se lucreaz n reeaua AOL (America On Line).
Securitatea e-mail
Transmiterea de e-mail nesolicitat sau spamming-ul cum mai este denumit
aceast operaiune, a devenit n prezent un fenomen ngrijortor datorit efectelor pe care
le poate produce: aglomerarea mesajelor n server-ele e-mail, ngreunarea citirii i
selecionrii mesajelor utile de cele nedorite, pericolul consumrii rapide a spaiului
alocat pentru e-mail pe hard disc-ul ISP-ului (Internet Service Provider), ncrcarea
conexiunilor Internet cu informaie nedorit, posibilitatea infectrii cu virui informatici
sau cu cai troieni prin intermediul fiierelor ataate,.
29
30
Cu un program de tip client e-mail, cum este Outlook Express, este posibil s
poat lucra mai utilizatori, fiecare dintre acetia putnd avea propria interfa Outlook i o
securitate asigurat prin nume i parol care s nu permit dect un acces personalizat n
csu potal. Comutarea ntre diferite identiti poate fi realizat prin intermediul
opiunii Switch Identity din meniul File.
31
Outlook Express permite deschiderea unuia sau mai multor mesaje e-mail din
Inbox se poate realiza dnd double click pe titlul acestora din fereastra din partea dreapt
sus n care exist afiate mai multe cmpuri: From (de la cine a fost primit mesajul),
Subject i data primirii. Acestea se vor deschide n ferestre separate.
Comutarea ntre mesajele deschise prin double click n ferestre separate, se poate
realiza activnd ferestrele dorite printr-un click dat pe o poriune din suprafaa acestora
(dac este vizibil), sau selectndu-le din Taskbar. Dac se utilizeaz tastatura atunci
combinaia de taste Alt-Tab ofer de asemenea posibilitatea selectrii ferestrei mesajului
dorit.
Comutarea ntre mesaje se mai poate realiza dnd click pe titlul mesajului sau prin
intermediul sgeilor de direcie sus i jos acionate n cadrul ferestrei mesajelor.
ntodeauna va fi deschis n seciunea (fereastra) din dreapta jos, mesajul al crui titlu este
selectat prin bara transparent de culoare (albastr care l acoper).
32
33
Adugarea unei noi adrese e-mail ntr-o list de adrese se poate face apsnd
butonul New din Toolbar-ul dialogului Addres Book, sau prin intermediul seciunii
Contacts (aflat n partea din stnga jos a aplicaiei Outlook) apelnd opiunea New
Contact. Oricare dintre variante va lansa dialogul Properties care va oferi suport pentru
ncrcarea n Address Book a unei noi adrese e-mail (i a informaiilor aferente acesteia).
34
Crearea unui nou mesaj poate fi realizat prin apsarea butonului New Mail din
Toolbar care va determina lansarea dialogului New Message specializat pentru crearea
mesajelor e-mail.
35
n cadrul dialogului New Message (apelat prin intermediul butonului New Mail)
exist un cmp de editare To: special destinat pentru inserarea adresei destinatarului sau a
adreselor mai multor destinatari desprite prin (;). Adresa sau adresele destinatarilor pot
fi introduse prin editare direct n cmpul To: sau n cazul n care se apas butonul To: ,
prin alegere dintr-un dialog de selecie (Select Recipients) a adreselor e-mail care exist
deja memorate acolo.
36
Prin facilitatea Forward un mesaj primit poate fi "trimis mai departe" unor ali
utilizatori (care nu se aflau in lista destinatarilor mesajului original). Mesajul original nu
poate fi modificat.
37
Pentru forward-area unui mesaj e-mail se poate utiliza butonul cu acelai nume
din Toolbar sau meniul contextual al mesajului.
Cutarea unui mesaj dintr-un folder poate fi realizat dup unul sau mai multe
criterii cum sunt:
numele expeditorului (cmpul From);
numele destinatarului (cmpul To);
un text din cmpul Subject;
un text din cmpul Message;
un interval de timp.
Butonul Find (gsete) din Toolbar pune la dispoziie un dialog special numit
Find Message (mesaje descoperite) care permite realizarea acestor cutri.
Pentru a tipri la imprimant un mesaj, se poate solicita opiunea Print din meniul
File sau se poate apsa butonul Print din Toolbar. Aceast aciune va determina lansarea
dialogului Print prin intermediul cruia vor putea fi stabilite configurrile dorite nainte
de listare. Astfel se va putea stabili dac se va tipri ntregul mesaj sau numai o selecie,
numrul de copii i paginile (sau intervalul de pagini) ce se vor lista.
39
40
7. Limbajul HTML
Structura standard a unui fiier HTML
Editai cu un editor de texte simplu (Notepad) urmtorul coninut i salvai-l sub numele
e1_1.html.
<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
Prima pagin standard
</body>
</html>
Observaii:
Un document HTML este format din text i marcaje (tag-uri). Textul conine
informaia care va fi afiat n pagina Web iar marcajele precizeaz modul n care
acest text va fi afiat sau permit includerea n pagina a altor elemente (butoane,
link-uri, imagini, sunete etc.).
41
Sfritul de linie
S admitem c dorim s apar n pagina Web (adic n ceea ce va afia browserul) mai multe linii. Dac vom crea urmtorul fiier sub forma:
<html>
<head>
<title>
Acesta este titlul primei pagini
</title>
</head>
<body>
Prima linie
A doua linie
A treia linie
</body>
</html>
atunci browser-ul va afia "Prima linieA doua linieA treia linie" ntruct conform unei
observaii fcute mai sus caracterele de felul "CR/LF" sunt ignorate de browser. Trecerea
pe o linie nou se face numai la o comand explicit care trebuie s apar n pagina html.
Aceast comand este marcajul <br> (de la "break line"=sfrit de rnd).
Pentru a funciona conform ateptrilor fiierul trebuie modificat astfel:
42
<html>
<head>
<title>
Acesta este titlul primei pagini
</title>
</head>
<body>
Prima linie<br>
A doua linie<br>
A treia linie
</body>
</html>
Blocuri preformatate
exemplu distractiv:
<html>
<head>
<title>
acesta este titlul primei pagini
</title>
</head>
<body>
<pre>
(oo)
\/||\/
_||_
</pre>
</body>
</html>
43
Un document (fiier) HTML are extensia ".html" sau ".htm". El se numete i fiier
surs.
Un browser ncarc un document HTML (un fiier surs), interpreteaz marcajele
coninute n document iar rezultatul este afiat n fereastra browser-ului. Acest
rezultat al interpretrii se numete "pagin Web".
Un document conine marcaje (comenzi sau tag-uri). Exist dou tipuri de marcaje
sau tag-uri:
(a) De tip "bloc" (pereche) conform sintaxei <nume_tag>bloc de elemente
</nume_tag> caz n care aciunea precizat de numele tag-ului i atributele
acestuia are efect asupra blocului de elemente.
(b) De tip "solitar" (nepereche); de exemplu <br>.
Un marcaj (un tag) este delimitat de parantezele "<" i ">".
Sunt "case-insensitive" adic pot fi scrise att cu litere mici ct i cu litere mari:
(a) Numele tag-urilor;
(b) Numele atributelor;
(c) Valorile atributelor.
O pagin html standard este format dintr-un bloc extern <html></html> i dou
blocuri incluse: <head></head> (cap) i <body></body> (corp).
Trecerea la o linie nou se face cu ajutorul tag-ului <br> (break).
Afiarea ntocmai a coninutului unui bloc de text din fiierul surs se face incluznd
acest bloc ntre tag-urile <pre> i </pre> (preformatat).
44
Obs: Este recomandat ca o culoare s fie delimitat prin dou apostrofuri duble: "".
Exemple: "blue" sau "#0f4eA8".
Culoarea unei pagini se precizeaz prin intermediul unui atribut al tag-ului
<body>.
Atributele sunt necesare pentru a particulariza aciunea precizat de numele tagului. Aceste atribute apar n interiorul parantezelor ce delimiteaz tag-ul dup sintaxa:
<tag atribut=valoare>.
De exemplu culoarea fondului paginii Web este setat prin atributul "bgcolor" al
tag-ului <body>. <body bgcolor=culoare> unde culoare se construiete dup modelul
precizat mai sus.
Pentru a realiza o pagin Web cu fondul de culoarea galben putem proceda
astfel:
<html>
<head>
<title>
Exemplul 2_1
</title>
</head>
<body bgcolor="yellow">
Aceasta este o pagina web<br>
cu fondul de culoarea galbena.
</body>
</html>
Culoarea textului
Acest exemplu ilustreaz cum poate fi setat culoarea textului unei pagini Web.
Acest lucru se face prin intermediul atributului "text" al tag-ului <body> dup
sintaxa:
<body text=culoare> unde "culoare" se precizeaz ca la exemplul 2_1. Pagina Web
urmtoare are textul de culoarea roie.
<html><head><title>Exemplul 2_2</title>
</head>
<body text="red">
Aceasta este o pagina web cu textul de
culoarea rosie.
</body></html>
Atribute multiple
Un tag poate avea mai multe atribute. De exemplu un tag cu trei atribute arat
astfel:
<tag atribut1=valoare1 atribut2=valoare2 atribut3=valoare3>.
45
<html><head>
<title>Exemplul 2_3</title></head>
<body bgcolor="yellow" text="red">
Aceasta este o pagina web cu fondul de
culoarea galbena<br>
si textul de culoarea rosie.
</body></html>
Pentru afiarea unui text ntr-o pagin Web se utilizeaz un font (adic un tip de
litere) care este caracterizat de:
Mrime (prin atributul "size");
Culoare (prin atributul "color");
Font utilizat (prin atributul "style").
Acestea sunt atribute ale tag-ului <basefont>. Acesta este un tag nepereche (nu
exist delimitator de sfrit de bloc).
Sintaxa utilizat este:
<basefont size=numr color=culoare style=font>
unde:
numr poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic i 7 pentru fontul cel
mai mare);
culoare este o culoare precizat prin nume sau printr-o construcie RGB (vezi primul
paragraf).
font poate fi un font generic ca "serif", "sans-serif", "cursive", "monospace", "fantasy"
sau poate fi un font specific instalat pe computerul clientului ca "Times New Roman",
"Helvetica" sau "Arial". Se accept ca valoare i o list de fonturi separate prin "," de
exemplu: "Times Roman, serif, monospace".
Observaie:
Domeniul de valabilitate al setrilor precizate de acest tag este din locul n care apare
pna la sfrsitul paginii sau pn n locul n care apare alt tag <basefont>.
Dac tag-ul <basefont> lipsete atunci textul n pagina Web are atribute implicite s-au
atribute precizate de browser-ul utilizat.
Atributele implicite sunt: size=3, color="black" i style="Times New Roman".
n exemplul urmtor textul paginii Web are la nceput atribute implicite dup care este
setat la "Arial", "green", 7.
<html><head>
<title>Exemplul 2_4</title></head>
<body>
Prima parte a prezentei pagini textul
are atribute implicite.<br>
<basefont style="Arial" color="green"
size=7>
A doua parte a paginii textul este scris
cu fontul "Arial", culoarea verde si
marimea 7.
</body></html>
46
<html><head>
<title>Exemplul 2_5</title></head>
<body leftmargin="100" topmargin="20%">
Prima parte a prezentei pagini textul
are atribute implicite.<br>
<basefont style="Arial" color="green"
size=7>
A doua parte a paginii textul este scris
cu fontul "Arial", culoarea verde si
marimea 7.
</body></html>
Caractere mrite
Pentru ca un fragment de text s fie format din caractere cu o unitate mai mare
dect cea curent acest fragment trebuie inclus ntr-un bloc delimitat de tag-urile: <big>
i </big>.
Observaie: Blocurile <big></big> pot fi imbricate.
47
<html><head><title><Exemplul
3_2</title></head><body>
Aceasta linie este formata din text
normal.<br>
<big>Aceasta linie este scrisa in
intregime cu caractere marite cu o
unitate.</big></br>
Normal <big>marit <big>mai mare <big>si
mai mare.</big></big></big>
</body></html>
Caractere micorate
Pentru ca un fragment de text s fie format din caractere cu o unitate mai mici
dect cea curent acest fragment trebuie inclus ntr-un bloc delimitat de tag-urile:
<small> i </small>.
Observaie: Blocurile <small></small> pot fi imbricate.
<html><head><title><Exemplul
3_3</title></head><body>
Aceasta linie este formata din text
normal.<br>
<small>Aceasta linie este scrisa in
intregime cu caractere micsorate cu o
unitate.</small></br>
Normal <small>mai mic<small>si mai
mic.</small></small><br>
Normal <small>mai mic <big>normal
<big>mai mare</big></big></small>
</body></html>
48
<html><head><title><Exemplul
3_5</title></head><body>
Aceasta linie este formata din text
normal.<br>
In aceasta linie <sup>sus</sup> este
superscript iar <sub>jos</sub> este
subscript.<br>
F<sub>(y)</sub>=(x<sub>1</sub>+x<sub>2</
sub>)<sup>2</sup>-y<sup>3</sup>
</body></html>
49
Imbricarea tag-urilor
Acest exemplu ne arat c tag-urile pot fi imbricate. De exemplu:
un fragment de text poate fi scris ngroat i italic n acelai timp;
un fragment de text poate fi subliniat, superscript, mrit i italic n acelai timp.
Blocul <q></q> permite inserarea in-line a citatelor. Aceste citate sunt afiate de ctre
browser n italic.
Observaie:
Blocurile "q" pot fi imbricate ca n exemplul urmtor;
"q" vine de la "in-line quotation" (citate inserate in-line).
<html><head><title><Exemplul 3_11</title></head><body>
Maria povesti mai departe <q>M-am intors catre Mihai si l-am intrebat<q> Mergi
maine la concert!</q> <q>Nu.</q> mi-a raspuns el.</q> In acest moment Maria se opri
pentru o clipa.
</body></html>
50
Setarea fonturilor
n acest capitol vei nva cum s alegei caracterele (fonturile) cu care s scriei
blocuri de text personalizate n cadrul unei pagini Web.
Un font este caracterizat de urmtoarele atribute:
Culoarea (setat prin atributul "color");
Tipul sau stilul (setat prin atributul "face");
Mrimea (setat prin atributul "size");
Mrimea n puncte tipografice (setat prin atributul "point-size");
Grosimea (setat prin atributul "weight").
Toate aceste atribute aparin elementului <font> care permite inserarea de blocuri de texte
personalizate.
Culori
51
Familia fontului
Pentru a scrie un text ntr-o pagin Web pot fi folosite mai multe fonturi (stiluri de
caractere).
Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate
computerele utilizatorilor: "serif", "sans-serif", "cursive", "monospace" i "fantasy".
Alte fonturi mai specifice pot fi utilizate dac acestea sunt disponibile pe
computerul client ca de exemplu: "Times" (un tip particular de "sans-serif"), "Helvetica"
(un tip particular de "serif"), "Arial", "Courier" (un tip particcular de "monospace"),
"Western" (un tip particular de "fantasy") i altele.
Tipul de font necesar poate fi setat prin atributul "face" al tag-ului <font>. Pot fi
introduse mai multe fonturi separate prin virgul.
Exemplu: <font face="Arial, serif, monospace">. n acest caz browser-ul l va
utiliza pe primul font pe care l va recunoate.
<html><head><title>Exemplul
4_2</title></head><body>
Aceasta linie este scrisa cu caractere
normale.<br>
<font face="monospace">Linie scrisa cu
caractere monospatiate</font><br>
<font face="Arial">Linie scrisa cu
caractere Arial</font><br>
<font face="TimesRoman, sansserif">Linie scrisa cu caractere
TimesRoman sau sans-serif</font><br>
</body></html>
Mrimea fontului
Pentru a seta mrimea unui font se utilizeaz atributul "size" al tag-ului <font>.
Valorile acestui atribut pot fi:
1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font i 7 pentru cel mai mare);
+1, +2, etc pentru a crete mrimea fontului cu 1, 2, etc fa de valoarea curent;
-1, -2, etc pentru a micora mrimea fontului cu 1, 2, etc fa de valoarea curent;
<html><head><title>Exemplul
4_3</title></head><body>
Aceasta linie este scrisa cu caractere
normale.<br>
<font size="6">Fonturi de marimea 6.
</font><br>
<basefont size="4">Fonturi de marimea
4. <br>
<font size="-3"> Fonturi de marimea 1.
</font><br>
<font size="+2">Fonturi de marimea 6.
</font><br>
</body></html>
52
<html><head><title><Exemplul
3_10</title></head><body>
Aceasta linie este formata din text
normal.<br>
Normal <b>ingrosat <i>ingrosat si
italic</i> ingrosat</b> normal.<br>
Normal <u>subliniat <b>subliniat si
ingrosat <big>subliniat, ingrosat si
marit.<br>
<i>Subliniat, ingrosat, marit si
italic.</i></big></b></u>
</body></html>
Blocuri de text
n aceast lecie vei nva comenzi (tag-uri) la nivel de bloc de text. Toate aceste
marcaje produc automat trecerea la un rnd nou i adugarea unui extra-spaiu.
Aceste comenzi nu se refer la caracteristicile caracterelor ce compun textul ci se
refer la funciile pe care le poate avea un bloc de text n cadrul paginii Web.
Inserarea unei adrese
Dac ntr-o pagin Web trebuie inclus o adres atunci putem utiliza facilittile
oferite de un tag dedicat: <address></address>. Multe browser-e afieaz coninutul
cuprins ntre acesti delimitatori n italic, ncepnd pe un rnd nou.
<html><head><title>Exemplul
5_1</title></head><body>
Adresa institutiei noastre este:
<adddress>
Colegiul National Mihai Viteazul<br>
Bulevardul Pache Protopopescu Nr.
62<br>
Sector 2 Bucuresti Romania Europa
</address>
</body></html>
53
Observaii: Blocurile de tip "adres" includ informaii despre persoana care a creat pagina
Web, adresa e-mail i data crerii acestei pagini. Aceste blocuri se plaseaza de obicei la
sfritul paginii Web dar pot apare i la nceput.
Indentarea unui bloc
Pentru ca un bloc de text s fie indentat (marginea din stnga s fie decalat la
dreapta cu o anumit cantitate) acesta trebuie inclus ntre tag-urile <blockquote> i
</blockquote>. Adesea browser-ele adaug un spaiu suplimentar nainte si dup un
blockquote.
<html><head><title>Exemplul
5_2</title></head><body>
Constantin Brancusi obisnuia sa spuna:
<blockquote>
<i>Simplitatea</i> nu este un scop in
Arta, insa ajungi la simplitate fara
voia ta, apropiindu-te de sensul cel
real al lucrurilor. Simplitatea este in
sine o complexitate - si trebuie sa te
hranesti cu <i>esenta</i>, casa poti sa
ii intelegi valoarea.
</blockquote>
</body></html>
Blocul "div"
Modalitatea cea mai eficace de delimitare i de formatare a unui bloc de text se
obine prin folosirea delimitatorilor <div> i </div>.
Un parametru foarte util pentru setarea caracteristicilor unui bloc <div>
(diviziune) este "align" (aliniere). Valorile posibile ale acestui parametru sunt:
"left" (aliniere la stnga);
"center" (aliniere pe centru);
"right" (aliniere la dreapta).
<html><head><title>Exemplul
5_3</title></head><body>
Aceasta este o linie normala. Urmatorul
bloc este aliniat la dreapta:
<div align="right">
MOTTO:<br>
"Misiunea artei este sa creeze
<i>bucurie</i>;<br>
si nu se poate crea artistic decat<br>
in echilibru si in pace
sufleteasca"<br>
<i>Constantin Brancusi</i>
</div>
Urmatorul bloc este aliniat pe centru:
<div align="center">
"De cand viata mea te stie,<br>
o suferinta port mereu;<br>
Frumusetea ta-i o poezie,<br>
pe care n-am facut-o eu."<br>
<i>Lucian Blaga: Catren</i>
</div>
</body></html>
54
Observaii:
Un bloc <div.</div> poate include alte sub-blocuri. n acest caz alinierea
precizat de atributul "align" al blocului "div" are efect asupra tuturor subblocurilor incluse n blocul "div";
Un bloc <div></div> admite atributul "nowrap" care interzice ruperea rndurilor
de ctre browser, lucrul acesta fcndu-se numai acolo unde exist marcaje care
solicit explicit acest lucru.
Blocuri "plaintext"
ntr-un fiier html caracterele "<" i ">" au o semnificaie special pentru browser.
Ele ncadreaz comenzile i atributele de afiare a elementelor ntr-o pagin Web.
Dac dorim ca un fragment de text s conin astfel de caractere fr a avea
semnificaia special implicit acest fragment trebuie ncadrat de una din perechile de
tag-uri:
<xmp></xmp> (80 de caractere pe rnd);
<listing></listing> (120 de caractere pe rnd).
De asemenea n ultima parte a unei pagini Web care ncepe cu marcajul <plaintext> nu
sunt interpretate marcajele HTML.
Observaii:
Aceste trei marcaje interpreteaz corect caracterele "spaiu", "tag" i "CR/LF".
Textul afiat n pagina Web este monospaiat.
<html><head><title>Exemplul
5_5</title></head><body>
Un fisier html standard arata astfel:
<xmp>
<html>
<head>
</head>
<body>
Prima pagina web!
</body>
</html>
</xmp>
</body></html>
Blocul paragraf
Am vzut la Exemplul 1_4 c trecerea la o linie nou se face cu ajutorul tag-ului
<br>.
Acest lucru este posibil i cu ajutorul tag-ului paragraf <p>. Spre deosebire de
acesta tag-ul <p> permite:
inserarea unui extra-spaiu nainte de blocul paragraf;
inserarea unui extra-spaiu dup blocul paragraf dac delimitatorul </p> exist (acesta
fiind opional).
alinierea textului cu ajutorul atributului "align" avnd valorile posibile: "left",
"center" sau "right".
55
<html><head><title>Exemplul 5_6</title></head><body>
Linia 1
<br>Linia 2 este generata de un break.
<p>Linia 3 este generata de un un paragraf. Implicit paragraful este aliniat la
stanga.
<p align ="right">Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf
aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.
Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la
dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat
la dreapta. </p>
<p align=center>Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf
aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf
aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf
aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. </p>
</body></html>
Blocuri "header"
56
<html><head><title>Exemplul
5_7</title></head><body>
<h1 align="center">Titlu de marimea 1
aliniat in centru</h1>
<h2>Titlu de marimea 2 aliniat la
stanga (implicit)</h2>
<h3 align="right">Titlu de marimea 3
aliniat la dreapta</h3>
<h4 align="left">Titlu de marimea 4
aliniat la stanga</h4>
<h5>Titlu de marimea 5</h5>
<h6>Titlu de marimea 6</h6>
</body></html>
Linii orizontale
ntr-o pagin Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul
tag-ului <hr>.
<html><head><title>Exemplul
5_8</title></head><body>
<h1 align="center">Linie
orizontala</h1>
<hr>
<h2>Linia orizontala are parametrii
impliciti</h2>
<hr>
</body></html>
Pentru a seta o linie orizontal se utilizeaz urmtoarele atribute ale tag-ului <hr>:
"align" permite alinierea liniei orizontale. Valorile posibile sunt: "left", "center" i
"right".
"width" permite alegerea lungimii liniei. Valorile posibile pot fi:
(a) numere ntregi pozitive reprezentnd lungimea liniei n numr de pixeli;
(b) numere ntre 1 i 100 urmate de semnul "%" reprezentnd procentul din limea
paginii pe care se ntinde linia.
"size" permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi
pozitive reprezentnd grosimea liniei n pixeli (valoarea implicit este "2").
"noshade" cnd apare seteaz o linie fr umbr;
"color" permite setarea culorii liniei.
<html><head><title>Exemplul
5_9</title></head><body>
<h1 align="center">Tipuri de linii
orizontale</h1>
Urmeaza o linie implicita (aliniare
stanga, latime 100%, grosime 2, cu
umbra):
<hr>
Urmeaza o linie aliniata in centru, de
latime 50%, grosime 5 pixeli, fara
umbra:
<hr align="center" width="50%" size="5"
noshade>
Urmeaza o linie de latime 200 de
pixeli, aliniata la dreapta, grosime 10
pixeli, cu umbra:
<hr align="right" width="200"
size="10">
</body></html>
57
Blocul "center"
Blocul introdus de tag-urile <center> i </center> aliniaz la centru toate
elementele coninute de el.
n exemplul urmtor este prezentat un mod de obinere a unor efecte deosebite,
ntr-o pagin Web, cu unelte foarte simple.
<html><head><title>Exemplul
5_10</title></head><body>
<center>
<hr width=10%>
<hr width=40%>
<hr width=70%>
<hr width=100%>
<hr width=70%>
<hr width=40%>
<hr width=10%>
</center>
</body></html>
Liste
n acest capitol vei nva cum pot fi introduse liste ntr-o pagin Web.
Liste neordonate
O list neordonat de elemente este un bloc de text delimitat de tag-urile
corespondente <ul> i </ul> ("ul" vine de la "unordered list"=list neordonat). Fiecare
element al listei este iniiat de tag-ul <li> (list item).
Observaii:
Lista va fi identat fa de restul paginii Web;
Fiecare item al listei ncepe pe un rnd nou.
<html><head><title>Exemplul
6_1</title></head><body>
<h1 align="center">Exemplul 6_1</h1>
<hr>
<h2>O lista neordonata</h2>
<ul>Seria INTERNET va cuprinde
urmatoarele carti:
<li>HTML prin exemple
<li>JavaScript prin exemple
<li>Java prin exemple
</ul>
<body><html>
Observaii:
Elementele <h1>, <h2> i <hr> au fost utilizate n acest exemplu pentru ca pagina
Web s aib un aspect ct mai plcut.
Tag-urile <ul> i <li> pot avea un atribut "type" care s seteze caracterul ce
prefixeaz fiecare element al listei. Valorile posibile ale acestui atribut sunt:
"circle" (cerc) pentru "";
58
<html><head><title>Exemplul
6_2</title></head><body>
<h1 align="center">Exemplul 6_2</h1>
<hr>
<h2>O lista neordonata</h2>
<ul type="square">Seria INTERNET va
cuprinde urmatoarele carti:
<li>HTML prin exemple
<li>JavaScript prin exemple
<li>Java prin exemple
</ul>
<body><html>
Liste ordonate
O list ordonat de elemente este un bloc de text delimitat de tag-urile
corespondente <ol> i </ol> ("ol" vine de la "ordered list"=list ordonat). Fiecare
element al listei este iniiat de tag-ul <li> (list item).
Observaii:
Lista va fi identata fa de restul paginii Web;
Fiecare item al listei ncepe pe un rnd nou.
<html><head><title>Exemplul
6_4</title></head><body>
<h1 align="center">Exemplul 6_4</h1>
<hr>
<h2>O lista ordonata</h2>
<ol>Pentru a realiza o pagina web
trebuie:
<li>creat un fisier de comenzi in
limbajul html;
<li>salvat fisierul cu extensia .html;
<li>incarcat fisierul html intr-un
browser.
</ol>
<body><html>
59
Tag-urile <ol> i <li> pot avea un atribut "type" care s seteze tipul de caractere
utilizat n ordonarea listei. Valorile posibile sunt:
"A" pentru pentru secvena de ordonare: A, B, C, D, etc (litere mari);
"a" pentru pentru secvena de ordonare: a, b, c, d, etc (litere mici);
"I" pentru pentru secvena de ordonare: I, II, III, IV, etc (numere romane mari);
"i" pentru pentru secvena de ordonare: i, ii, iii, iv, etc (numere romane mici);
"1" pentru pentru secvena de ordonare: 1, 2, 3, 4, etc (numere arabe) (setarea
implicit).
<html><head><title>Exemplul
6_5</title></head><body>
<h1 align="center">Exemplul 6_5</h1>
<hr>
<h2>O lista ordonata cu cifre romane
mari</h2>
<ol type="I">Pentru a realiza o pagina
web trebuie:
<li>creat un fisier de comenzi in
limbajul html;
<li>salvat fisierul cu extensia .html;
<li>incarcat fisierul html intr-un
browser.
</ol>
<body><html>
Observaii: Tag-ul <ol> poate avea un atribut "start" care s seteze valoarea iniiala a
secvenei de ordonare. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv.
<html><head><title>Exemplul
6_6</title></head><body>
<h1 align="center">Exemplul 6_6</h1>
<hr>
<h2>O lista ordonata cu litere mari
incepand cu valoarea C</h2>
<ol type="A" start="3">Pentru a realiza
o pagina web trebuie:
<li>creat un fisier de comenzi in
limbajul html;
<li>salvat fisierul cu extensia .html;
<li>incarcat fisierul html intr-un
browser.
</ol>
<body><html>
Tag-ul <li> poate avea un atribut "value" care s seteze valoarea pentru acel item.
Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv.
<html><head><title>Exemplul
6_7</title></head><body>
<h1 align="center">Exemplul 6_7</h1>
<hr>
<h2>O lista ordonata avand itemi setati
individual</h2>
<ol start="3">Repetati urmatorii pasi
ai algoritmului:
<li>salvati fisierul;
<li value="5">incarcati fisierul in
browser;
<li>schimbati browser-ul utilizat.
</ol>
<body><html>
60
Listele ordonate pot fi imbricate ntre ele sau cu listele neordonate ca n exemplul
urmtor:
<html><head><title>Exemplul
6_8</title></head><body>
<h1 align="center">Exemplul 6_8</h1>
<hr>
<h2>O lista ordonata de liste ordonate
si neordonate</h2>
<ol>Un sistem informatic include:
<li>Hardware:
<ol><li>placa de
baza<li>procesor <li>
memorie</ol>
<li>Softtware de baza: <ul> <li>
Windows <li> Unix <li>
Linux</ul>
<li> Software de aplicatie:
<ul type="disc"><li>AutoCad
<li>CorelDraw<li>
QuarkXPress</ul>
</ol>
<body><html>
Liste de definiii
O list de definiii este este formata dintr-o succesiune de termeni, fiecare termen
fiind urmat de o definiie a acestui termen.
Observaii:
ntreaga list de definiii se ncadreaz ntre tag-urile corespondente: <dl> i </dl> (dl
vine de la "definition list"=list de definiii);
Un termen al listei este iniiat de tag-ul <dt> (dt vine de la "definition term"=termen
de definiie);
Definiie a unui termen este iniiat de tag-ul <dd> (dd vine de la "definition
description"=descrierea definiiei);
Definiia unui termen ncepe pe o linie nou i este indentat.
<html><head><title>Exemplul
6_9</title></head><body>
<h1 align="center">Exemplul 6_9</h1>
<hr>
<h2>O lista de definitii</h2>
<dl>Glossar de termeni pentru INTERNET
<dt>Browser
<dd>Aplicatie ce ruleaza pe
computerul client o pagina html
<dt>Server WWW
<dd>Computer care raspunde la
cererile de pagini html emise de un
client
</dl>
<body><html>
61
Observaii: Tag-urile <ul>, <ol> i <dl> pot avea un atribut "compact" care permite
afiarea compact a listei.
De exemplu n cazul unei liste de definiii vom scrie: <dl compact>. Dac acest
atribut este prezent (el nu ia mai multe valori) atunci definiiile termenilor ncep pe
aceeai linie cu termenii.
<html><head><title>Exemplul 6_10</title></head><body>
<h1 align="center">Exemplul 6_10</h1><hr>
<h2>O lista compacta de definitii</h2>
<dl compact>Glossar de termeni pentru INTERNET
<dt>Browser
<dd>Aplicatie ce ruleaza pe computerul client o pagina html
<dt>Server WWW
<dd>Computer care raspunde la cererile de pagini html emise de un client
</dl>
<body><html>
Tabele
Aa cum s-a putut constata pn acum posibilitile de aranjare a textului ntr-o
pagina Web sunt limitate. Tabelele ne permit s crem o reea rectangular de domenii,
fiecare domeniu avnd propriile setri pentru culoarea fondului, culoarea textului,
alinierea textului etc.
Un tabel simplu
Pentru a insera un tabel folosim tag-urile corespondente: <table> i </table>
("table" nseamn tabel).
Un tabel este format din rnduri. Pentru a insera un rnd ntr-un tabel folosim tagurile: <tr> i </tr> ("tr" vine de la "table row"=rnd de tabel).
Observaie:
Folosirea tag-ului de sfrit </tr> este opional.
Un rnd este format din mai multe celule ce conin date. O celul de date se
introduce folosind tag-ul <td> ("td" vine de la "table data"=date n tabel).
<html><head><title>Exemplul
7_1</title></head><body>
<h1 align="center">Exemplul 7_1</h1>
<h2>Un tabel simplu format din doua
linii si trei coloane</h2>
<table>
<tr>
<td>celula 11
<td>celula 12
<td>celula 13
<tr>
<td>celula 21
<td>celula 22
<td>celula 23
</table>
</body></html>
62
Un tabel cu chenar
n mod implicit un tabel nu are chenar. Pentru a aduga un chenar unui tabel se
utilizeaz un atribut tag-ului <table> numit "border". Acest atribut poate primi ca valoare
orice numr ntreg (inclusiv 0) i reprezent grosimea n pixeli a chenarului tabelului.
Observaii:
Atributul "border" poate s nu fie urmat de o valoare, caz n care tabelul va avea un
chenar de grosime implicit egal cu 1 pixel.
O valoare egal cu "0" a grosimii chenarului semnific absena chenarului;
Cnd are grosime nenul chenarul unui tabel un are aspect tridimensional.
<html><head><title>Exemplul
7_2</title></head><body>
<h1 align="center">Exemplul 7_2</h1>
<h2>Un tabel simplu format din doua
linii si trei coloane</h2>
<table border="5">
<tr><td>celula 11<td>celula
12<td>celula 13
<tr><td>celula 21<td>celula
22<td>celula 23
</table>
</body></html>
63
Tem: Copiai fiierul "e7_3.html" propus mai sus i testai-l cu ajutorul unui
browser. Schimbai apoi alinierea tabelului la centru i apoi la stnga i observati
modificrile care apar n pagina web.
Observaie: Culoarea textului din fiecare celul poate fi setat cu ajutorul tag-ului:
<font color="valoare"></font>.
Dimensionarea celulelor unui tabel
Distana dintre dou celule vecine poate fi setat cu ajutorul atributului
"cellspacing" al tag-ului <table>.
Obs:
Valorile acestui atribut pot fi ntregi pozitivi, inclusiv "0" i reprezint distana n
pixeli dintre dou celule vecine.
Valoarea implicit a atributului "cellspacing" este "2".
64
<html><head><title>Exemplul
7_5</title></head><body>
<h1 align="center">Exemplul 7_5</h1>
<h2>Un tabel fara chenar de celule
alipite</h2>
<table cellspacing="0">
<tr><td bgcolor="yellow" >galben 11<td
bgcolor="green">verde 12
<tr><td bgcolor="red">rosu 21<td
bgcolor="cyan">cyan 22
</table>
</body></html>
65
Observaii:
Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii
tabelului atunci vor fi folosite aceste dimensiuni precizate;
Dac dimensiunile precizate de atribute sunt mai mici dect cele necesare afirii
tabelului atunci tabelul va fi ajustat la dimensiunile necesare.
n exemplul urmtor se utilizeaz un truc care ne permite afiarea ntr-o pagin Web a
unui text poziionat n centrul paginii. Pentru a realiza acest lucru se declar un tabel
mare ct ntreaga pagin ce conine o singur celul. Textul din interiorul celulei este
aliniat implicit pe vertical centrat i explicit pe orizontal de asemenea centrat.
<html>
<head>
<title>Exemplul 7_8</title>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align=center>
<h2>Text centrat.<h2>
</table>
</body>
</html>
66
Cap de tabel
Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule sunt
introduse de tag-ul <th> ( de la "table header"=cap de tabel) n loc de <td>.
Obs:
Toate atributele care pot fi ataate tag-ului <td> pot fi deasemenea ataate tag-ului
<th>;
Coninutul celulelor definite cu <th> sunt ngroate (scrise cu bold) i centrate.
67
<html><head><title>Exemplul
7_11</title></head><body>
<h1 align="center">Exemplul 7_11</h1>
<h2>Un tabel cu titlu si cap de
tabel</h2>
<table border>
<caption align="bottom"> Bilantul in
saptamana 11-15 mai
<tr><th>Bilant\Zile
<th>Luni<th>Marti<th>Miercuri
<th>Joi<th>Vineri
<tr><th>Intrari<td>1000<td>2000 td>3000
<td>4000<td>5000
<tr><th>Iesiri<td>100<td>200<td>300
<td>400<td>500
</table>
</body></html>
68
Observaii:
Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii
tabelului atunci vor fi folosite aceste dimensiuni precizate;
Dac dimensiunile precizate de atribute sunt mai mici dect cele necasare afirii
tabelului atunci tabelul va fi ajustat la dimensiunile necesare.
n exemplul urmtor se creaz cu ajutorul unui tabel avnd limea 80% din laimea
paginii 3 coloane de text avnd limile 25%, 50% respectiv 25% din limea paginii.
<html><head><title>Exemplul 7_14</title></head><body>
<center><table width="80%">
<tr><td width="25%" valign=top>Text in prima coloana. Text in prima coloana. Text in
prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana.
<td width="50%" valign=top>
Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in
coloana a doua. Text in coloana a doua. Text in coloana a doua.
<td width="25%" valign=top>
Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in
coloana a treia. Text in coloana a treia. Text in coloana a treia.
</table></center>
</body></html>
69
70
Imagini
O facilitate extraordinar a limbajului HTML este posibilitatea includerii
(ncapsulrii) unei imagini.
Tipuri de fiiere pentru imagini
Imaginile sunt stocate n fiiere n mai multe formate. Formatele acceptate de
browser-e pentru fiierele imagine sunt:
GIF (Graphics Interchange Format) (au extensia ".gif");
JPEG (Joint Photographic Experts Group) (au extensia ".jpeg" sau ".jpg");
XPM (X PixMap) (au extensia ".xmp");
XBM (X BitMap) (au extensia ".xbm");
BMP (BitMap) (au extensia ".bmp") (Numai cu browser-ul Internet Explorer);
DIB (Device Independent Bitmap);
TIFF (Tagged Image File Format) (au extensia ".tif" sau ".tiff");
PCX (PC Paintbrush);
PNG (Portable Network Graphics) (au extensia ".png").
Obs: Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 de culori
posibile) i JPEG (24 de bii pentru o culoare, 16.777.216 de culori posibile).
URL-ul unei imagini
Uniform Resource Locator (URL) (n traducere Identificator Uniform al
Resursei) este un standard folosit n identificarea unic a unei resurse pe INTERNET.
71
Toate imaginile cu care vom lucra n acest capitol vor avea adresa (URL-ul)
exprimat n funcie de directorul n care se afl documentul HTML care face referire la
imagine.
Prima pagin Web care conine o imagine
Pentru a insera ntr-o pagin Web o imagine se utilizeaz tag-ul <img> ("img"
vine de la "image"=imagine). Pentru a putea identifica imaginea care va fi inserat se
utilizeaz un atribut al tag-ului <img> i anume "src" ("src" vine de la "source"=surs).
Valoarea acestui atribut este URL-ul imaginii.
Observaii:
Dac imaginea se afl n acelai director cu fiierul html care face referire la imagine
atunci URL-ul imaginii este format numai din numele imaginii inclusiv extensia.
Exemplu: "nume.extensie" unde "nume" este numele fiierului imagine iar "extensie"
este extensia fiierului imagine.
Exemplele care urmeaz presupun c n fiierele imagine utilizate se afl n directorul
care este necesar (implicit n directorul curent de lucru).
<html><head><title>Exemplul
8_1</title></head><body>
<h1 align="center">Exemplul 8_1</h1>
<h2>Prima pagina web care contine o
imagine</h2>
<img src="aol_sl.gif">Text dupa
imagine.
</body></html>
Obs:
Numii fiierul de mai sus "e8_1.html", salvai-l n directorul de lucru (de exemplu
"c:\html");
Schimbai numele fiierului imagine (valoarea atributului "src") cu numele altui fiier
imagine disponibil pe calculatorul dumneavoastr i plasat n directorul de lucru
("c:\html").
Adresarea relativ
S admitem c pe computerul ce stocheaz paginile html exist urmtoarea
structur de directoare i de fiiere:
Dac dorim s referim din fiierul "test.html" aflat n directorul "c:\html\a"
fiierele imagine aflate pe diverse directoare se utilizeaz n construcia URL-ului aa
numita adresare relativ (adic fa de directorul curent "c:\html\a") dup cum se arat
mai jos:
Obs: Directorul printe al unui director curent se indic prin "..\"
72
c: (i1.gif)
"i2.gif"
"\aa\i3.gif"
"..\i2.gif"
"..\b\i4.gif"
"..\b\bb\i5.gif"
"..\..\i1.gif"
html (i2.gif0
a (i2.gif)
(test.html)
b (i4.gif)
bb (i5.gif)
aa (i3.gif)
Tem: Creai structura de directoare indicat n figura de mai sus dup care copiai n
fiecare director cte un fiier de tip imagine i testai adresarea relativ dup schema
propus mai nainte.
<html><head><title>Exemplul
8_2</title></head><body>
<h1 align="center">Exemplul 8_2</h1>
<h2>Imagine referita prin adresare
relativa</h2>
<img src="..\b\cnn_sl.gif">Text dupa
imagine.
</body></html>
Observaie:
Pentru ca exemplul de mai sus s funcioneze corect salvai fiierul de mai sus ca
"e8_2.html" n directorul "c:\html\a" iar fiierul "cnn_sl.gif" (sau altul pe care l
dorii) salvai-l n directorul "c:\html\b".
Chenarul unei imagini
Dac se dorete ca imaginea s aib un chenar n jurul ei atunci se va apela la
atributul "border" al tag-ului <img>. Valorile acestui atribut sun numere ntregi pozitive.
<html>
<head>
<title>Exemplul 8_3</title>
</head><body>
<h1 align="center">Exemplul 8_3</h1>
<h2>Imagine cu chenar</h2>
<img src="aol_wl.gif" border="5">
Text dupa imagine.
</body></html>
73
74
Observaie:
Dac imaginea pe care o folosii este prea mic sau prea mare adugai imaginii
atributele: width="20%" i height="20%".
Alinierea textului n jurul unei imagini
Atributele "hspace" i "vspace" ale tag-ului <img> precizeaz distana n pixeli pe
orizontal respectiv pe vertical dintre imagine i restul componentelor din pagin (de
exemplu text).
<html><head><title>Exemplul 8_6</title></head><body>
<h1 align="center">Exemplul 8_6</h1>
<h2>Imagine aliniata la stanga inconjurata de text la distanta de 50 de pixeli</h2>
Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text
inainte de imagine. Text inainte de imagine. Text inainte de imagine.
<img src="aol_wl.gif" align="left" hspace="50" vspace="50">
Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa
imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine.
</body></html>
Observaii:
"Text dup imagine" nu urmeaz n pagina Web imediat dup "Text nainte de
imagine" dei ar avea loc datorit tag-ului <br> care foreaz trecerea la linie nou.
Dac imaginea pe care o folosii este prea mic sau prea mare adugai imaginii
atributele: width="20%" i height="20%";
Pentru a elibera zona din stnga unei imagini (dreapta sau ambele pri ale unei
imagini) utilizai tag-ul <br> cu atributul "clear" avnd valoarea "left" (respectiv
"right" sau "all').
Elemente nlocuitoare pentru imagini
Deseori mrimea unei imagini de nalt rezoluie (msurat n kilo-octei) este
mare i timpul de ncrcare al paginii Web n fereastra browser-ului crete cu ct legtura
dintre client i server este mai lent.
75
Observaie:
Dac atributul "alt" este setat, atunci ori de cte ori mouse-ul se afl pozitionat pe
suprafaa imaginii, pe ecran apare ntr-un chenar textul ce constituie valoarea
atributului (n cazul exemplului de mai sus va fi afiat "America on Line").
Imagini pentru fondul unei pagini Web
O imagine poate fi utilizat pentru a seta fondul unei pagini Web.
Pentru a efectua acest lucru se folosete atributul "background" al tag-ului <body> avnd
ca valoare URL-ul imaginii.
Imaginea se multiplic pe orizontal i pe vertical pn se umple ntregul ecran.
<html><head><title>Exemplul
8_8</title></head>
<body background="aol_wl.gif">
<h1 align="center">Exemplul 8_8</h1>
<h2>Pagina Web cu imagine de fond</h2>
Start<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br>
Sfarsit<br>
</body></html>
Observaii:
ntruct pagina din exemplul de mai sus nu ncape ntr-un singur ecran va trebui s
utilizai bara de defilare vertical pentru a vizualiza ntreaga pagin.
n timpul defilrii textul i imaginea de fond se deplaseaz mpreun.
Pentru ca n timpul defilrii unei pagini Web foarte mari imaginea de fond s
rmn fix se utilizeaz atributul "bgproperties" al tag-ului <body> fixat la valoarea
"fixed". Acest atribut funcioneaz numai cu Internet Explorer.
76
<html><head><title>Exemplul
8_9</title></head>
<body background="aol_wl.gif"
bgproperties="fixed">
<h1 align="center">Exemplul 8_9</h1>
<h2>Pagina Web cu imagine de fond
fixata</h2>
Start<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br> Linie<br>
Linie<br> Linie<br> Linie<br>
Sfarsit<br>
</body></html>
Un tabel de imagini
Un tabel admite ca date n celulele tabelului imagini. Acestea se introduc
(eventual mpreun cu text) dup tag-urile <td> sau <th>.
<html><head><title>Exemplul
8_10</title></head><body>
<h1 align="center">Exemplul 8_10</h1>
<h2>Un tabel de imagini</h2>
<table border>
<tr><td><img src="aol_sl.gif"><td><img
src="cnn_sl.gif">
<tr><td><img src="comic_sl.gif"><td><img
src="news_sl.gif">
</table>
</body></html>
77
Observaie: n mod implicit imaginea utilizat pe post de zon activ (link) este
nconjurat de un chenar de culoarea unui link. Dac setai atributul "border" al tag-ului
<img> la valoarea "0" acest chenar va dispare.
Imagini n fiiere externe
Deoarece imaginile necesit un timp mare de ncrcare n browser deseori se
prefer ca n pagina Web s fie inserat numai un link ctre imagini lsnd utilizatorului
posibilitatea de a ncrca sau nu imaginea.
n exemplul urmtor se arat cum se insereaz un link (o legtur) ctre un fiier
imagine folosindu-se sintaxa:
<a href="aol_sl.gif">Efectuati click pentru a vedea imaginea</a>.
<html><head><title>Exemplul
8_13</title></head><body>
<h1 align="center">Exemplul 8_13</h1>
<h2>Imagini in fisiere externe</h2>
Text inainte de link.
<a href="aol_sl.gif">Efectuati click
pentru a vedea imaginea</a>
Text dupa link.
</body></html>
78
LINK-URI
Interactivitatea unei pagini Web
Link-urile (legturile) reprezint partea cea mai important a unei pagini Web. Ele
transform un text obinuit n "hipertext" sau "hipermedia", aspecte care permit trecerea
rapid de la o informaie aflat pe un anumit server la alt informaie aflat pe un alt
server oriunde n lume.
Link-urile sunt "zone active" ntr-o pagin Web, adic zone pe ecran sensibile la
apsarea butonului stng al mouse-ului. Un click efectuat cu mouse-ul pe un link este
interpretat ca o cerere ctre un anumit server de pe INTERNET de a expedia ctre
computerul client o resurs ctre care link-ul respectiv puncteaz.
n felul acesta paginile Web devin interactive (adic rspund la aciuni iniiate de
utilizator).
Lucrurile stau n felul urmtor:
a) n pagina html se insereaz link-uri prin intermediul unui tag special <a> i a unui
atribut "href" care ia ca valoare adresa (URL-ul) resursei solicitate.
De exemplu <a href="www.netscape.com">.
b) n pagina Web apar link-urile setate la punctul a) ca "zone active". Cnd mouse-ul se
afl deasupra unei zone active forma mouse-ului se schimb automat ntr-o "mn";
c) Efectund click pe o zona activ ce reprezint un link pe pagina Web, browser-ul
trimite ctre serverul ce stocheaz noua resurs o cerere de a-i expedia respectiva
resurs;
d) Serverul WWW (World Wide Web) ce stocheaz noua resurs primete cererea i
expediaz ctre utilizator (computerul client) resursa solicitat. Dac resursa solicitat
este o nou pagin Web atunci serverul inta expediaz un fiier ".html" mpreun
fiierele imagine, sunet, etc referite de acest fiier;
79
<html><head><title>p2</title></head>
<body>
<h1>Pagina 2</h1>
<hr>
<a href="p1.html">Link catre Pagina 1
</a>
</body></html>
<html><head><title>p4</title>
</head><body>
<h1>Pagina 4</h1><hr>
<a href="../../a/p3.html">Link
catre Pagina 1</a>
</body></html>
80
ntr-o pagin Web foarte lung pot exista puncte de reper (ancore) ctre care s se
defineasc legturi.
81
O ancor se definete dea semenea prin tag-ul <a>. Pentru a identifica ancora se
utilizeaz atributul "name" al tag-ului <a> care primete ca valoare un nume dat ancorei
(de exemplu "ancora1").
Pentru a insera un link ctre ancora "ancora1" definit n aceeai pagin se
utilizeaz tag-ul <a> avnd atributul "href" de valoare "#ancora1".
<html><head><title>Exemplul 9_5</title></head><body>
<h1>Ancore definite in acelasi document</h1><hr>
<a href="#ancora1">Link catre ancora nr. 1</a><br>
<a href="#ancora2">Link catre ancora nr. 2</a><br>
l0<br>l1<br>l2<br>l3<br>l4<br>l5<br>l6<br>l7<br>l8<br>l9<br>l10<br> l11<br>
l12<br>l13<br>l14<br>l15<br>l16<br>l17<br>l18<br>l19<br>
<a name="ancora1">Prima ancora<br>
l20<br>l21<br>l22<br>l23<br>l24<br>l25<br>l26<br>l27<br>l28<br>l29<br>
l30<br>l31<br>l32<br>l33<br>l34<br>l35<br>l36<br>l37<br>l38<br>l39<br>
l40<br>l41<br>l42<br>l43<br>l44<br>l45<br>l46<br>l47<br>l48<br>l49<br>
<a name="ancora2">A doua ancora<br>
l50<br>l51<br>l52<br>l53<br>l54<br>l55<br>l56<br>l57<br>l58<br>l59<br>
l60<br>l61<br>l62<br>l63<br>l64<br>l65<br>l66<br>l67<br>l68<br>l69<br>
</body></html>
Pentru a introduce un link ctre o ancor definit n alt document (alt pagin)
aflat n acelai director atributul "href" primete o valoare de forma
"nume_fisier.html#nume_ancora".
Pentru a funciona corect urmtorul exemplu presupune c n directorul curent se afl
fiierul "e9_5.html" avnd coninutul de la exemplul anterior.
<html><head>
<title>Exemplul 9_6</title>
</head><body>
<h1>Ancore definite in alt
document</h1><hr>
<a href="e10_5.html#ancora1">Link catre
ancora nr. 1 din alt document </a><br>
<a href="e10_5.html#ancora2">Link catre
ancora nr. 2 din alt document </a><br>
</body></html>
82
Dac mai multe link-uri folosesc aceai valoare pentru atributul "target" nseamn
c paginile referite de aceste link-uri se vor ncrca n aceeai fereastr (vor utiliza
aceeai instan a browser-ului).
<html><head>
<title>Exemplul 9_8</title>
</head><body>
<h1>Pagini noi in ferestre noi</h1><hr>
<a href="p2.html" target="fereastra1">
Incarca Pagina 2 in Fereastra 1</a><br>
<a href="p3.html" target="fereastra2">
Incarca Pagina 3 in Fereastra 2</a><br>
<a href="p4.html" target="fereastra1">
incarca Pagina 4 in Fereastra 1</a>
</body></html>
Observaii:
Pentru a funciona, exemplul de mai sus presupune c n directorul curent exist
fiierele "p2.html", "p3.html" i "p4.html".
Pentru a vedea mai bine cum funcioneaz exemplul de mai sus, evitai s folosii
pentru ferestre o dimensiune maximizat.
Atributul "target" accept urmtoarele valori cu semnificaie special:
"_blank" (ncrcarea are loc ntr-o fereastr nou anonim);
"_parent" (ncrcarea are loc n fereastra printe);
"_self" (ncrcarea are loc n aceeai fereastr);
"_top" (ncrcarea are loc n fereastra "top" a frame-urilor curente).
83
84
<html><head><title>Exemplul
9_13</title></head><body>
<h1>Expedierea de mesaje
electronice</h1><hr>
Opiniile legate de aceasta carte pot fi
expediate efectuand click aici:
<a href="mailto:stanp@edu.ro"> Mesaje
catre autorul cartii.</a><br>
</body></html>
Observaii: Atunci cnd se efectueaz click pe link-ul din exemplul de mai sus
browser-ul deschide o csu de dialog "File download" care v permite:
s salvai pe discul local fiierul sau s lansai n execuie aplicaia capabil s
interpreteze corect fiierele de tipul respectiv;
s optai pentru inhibarea csuei de dialog i ncrcarea direct a fiierelor (cnd
acest lucru este posibil) pentru restul sesiunii de lucru pe INTERNET.
Ancore definite prin atributul "id"
Atributul "id" este un atribut universal adic poate fi ataat oricrui element al
unei pagini Web. Acest atribut va nlocui complet atributul "name" care putea fi ataat
numai anumitor elemente.
Atributul "id" primete ca valoare un "nume" (de exemplu "id1") care identific
n mod unic un element.
Atributul "id" poate fi utilizat pe post de ancor ntr-o pagin Web conform
sintaxei:
85
<tag id="id1"></tag>
<a href="#id1">Link ctre elementul "id1"</a>
unde "tag" poate fi orice element HTML.
<html><head>
<title>Exemplul 9_15</title>
</head><body>
<h1>Link-uri definite prin atributul "id" </h1><hr>
<a href="#id1">Link catre primul capitol</a><br>
<a href="#id2">Link catre capitolul doi</a><br>
Text introductiv.<br>Text introductiv.<br>Text introductiv.<br>Text introductiv.<br>
<h2 id="id1">Primul capitol</h2>Text in primul capitol.<br>Text in primul
capitol.<br>Text in primul capitol.<br>Text in primul capitol.
<h2 id="id2">Al doilea capitol</h2>
Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2.<br>
Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2.
</body></html>
86
87
Drepturile de autor
Atributul "name" poate fi utilizat pentru a furniza informaii legate de autorul
paginii i de Copyright (drepturile de autor).Exemplul urmtor ilustraz aceste lucruri:
<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta name="author" content="Tudor Popescu, IX A">
<meta name="copyright" content="cnmv.ro">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>
"lll" reprezint primele trei litere din numele lunii (Jan, Feb, Mar, Apr, May, Jun,
Jul, Aug, Sep, Oct, Nov sau Dec);
"aaaa" reprezint anul exprimat cu 4 cifre (de exemplu 1999);
"hh:mm:ss' reprezint ora, minutul i secunda;
"ttt" reprezint timpul utilizat (de exemplu GMT).
<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta http-equiv="creation-date" content="">
<meta http-equiv="expires" content=="">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>
Observaie: Dac data este furnizat ntr-un format ambiguu (de exemplu "03-07-1999")
atunci s adugai atributul "scheme" care precizeaz formatul utilizat pentru dat (de
exemplu scheme="Month-Day-Year").
Persoana de contact
Pentru a putea furniza informaii despre persoana care se ocup de administrarea
site-ului utilzai atributul "http-equiv" ca n exemplul de mai jos. n aceste cazuri valoarea
atributului "content" este o adres e-mail eventual urmat n paranteze rotunde de un
nume complet al persoanei.
88
<html>
<head>
<title>Mihai Viteazul, Bucuresti Home Page</title>
<meta http-equiv="from" content="stanp@cnmv.ro (Teodoru Gugoiu)">
<meta http-equiv="reply-to" content=="stanp@cnmv.ro (Teodoru Gugoiu)">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul, Bucuresti!</h1><hr>
</html>
Tipul fiierului
Pentru a preciza informaii legate de tipul fiierului i setul de caractere utilizate
folosii atributul "http-equiv" ca mai jos:
<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-5">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>
Limba utilizat
Deoarece la regsirea informailor cu ajutorul motoarelor de cutare se pot utiliza
cuvinte cheie scrise n diferite limbi atunci se pot insera informaii legate de limba
utilizat cu ajutorul atributului universal (comun i altor elemente) "lang":
<html>
<head>
<title>Mihai Viteazul Home Page</title>
<meta http-equiv="keywords" lang="en-us" content="college, Mihai, Viteazul,
Bucharest, high school, prestige, Romania, student, teacher, curriculum, optional,
olimpiade, mathematics">
<meta http-equiv="keywords" lang="ro" content="colegiu, Mihai, Viteazul, Bucuresti,
liceu, prestigiu, Romania, elev, profesor, curriculum, optionale, olimpiade,
matematica">
</head>
<body>
<h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr>
</html>
89
Comentariile
Comentariile sunt blocuri de text utile care studiaz modul n care a fost scris un
fiier surs ".html". Comentariile sunt ignorate de ctre browser la ncarcarea paginii.
Pentru a insera un bloc de comentarii utilizai sintaxa:
<!--orice text doriti-->.
Obs:
Blocul de comentarii poate fi plasat oriunde este necesar n cadrul paginii ".html";
Blocul de comentarii se poate extinde pe mai multe rnduri;
Nu sunt permise spaii libere ntre "<!" i "--" dar sunt permise spaii libere ntre "-" i ">".
<html><head>
<!--Aceasta este "Pagina Home" a
Colegiului National "Mihai Viteazul" din
Bucuresti, Romania-->
<title>Mihai Viteazul Home Page
</title></head><body>
<!--urmeaza un header-->
<h1>Bine ati venit la Colegiul National
Mihai Viteazul!</h1>
<!--urmaeza o linie orzontala-->
<hr>
</html>
90
Sunete i videoclip-uri
Formate pentru fiierele de sunet
Sunetele pot fi stocate n fiiere n diverse formate. Unele dintre acestea sunt
recunoscute de browser-e i deci pot fi inserate n paginile Web.
Formatele i extensiile corespunztoare pentru fiierele utilizabile n paginile Web
sunt urmtoarele:
Formatul AU/-law cu extensia ".au";
Formatul AIFF/AIFC cu extensiile posibile ".aiff" sau "aif";
Formatul WAVE/WAV cu extensia ".wav";
Formatul MPEG Audio cu extensia ".mpeg2" sau ".mp2";
Formatul MIDI cu extensia ".mid" sau ".midi".
Link-uri ctre fiiere de sunet
Un link ctre un fiier de sunet se realizeaz folosind tag-ul <a> destinat
legturilor ctre orice tip de fiiere unde atributului "href" va avea valoarea egal cu
URL-ul fiierului de sunet.
<html><head><title>Exemplul
11_1</title><head><body>
<h1>Link-uri catre fisiere de
sunet</h1><hr>
<a href="spacemusic.au">Link catre
fisierul "spacemusic.au"</a><br>
<a href="The Microsoft Sound.wav">Link
catre fisierul "The Microsoft
Sound.wav"</a>
</body></html>
91
Observaie: Trebuie avut n vedere ca fiierele de sunet ataate unei pagini Web s aib o
dimensiune rezonabil pentru a nu suprancrca traficul pe conexiunea client-server.
Video-clipuri inline
92
93
Hri de imagini
Folosirea unei imagini ca "hart de imagini"
Am vzut n capitolul referitor la imagini c o imagine poate fi utilizat ca "zon
activ" adic sensibil la apsarea butonului stng la mouse-ului. Pentru aceasta imaginea
trebuie s fie inserat n documentul HTML ntre tag-urile <a> i </a>.
Exist ns posibilitatea crerii hrilor de imagini ("Image Map" n englez) care
permit ca diferite zone ale unei imagini s fie definite ca link-uri ctre diferite pagini
Web.
Crearea unei hri de imagini presupune dou etape:
1. Definirea unei imagini ca "hart de imagini". Pentru aceasta se folosete tag-ul <img>
nsoit de dou atribute:
Atributul "src" care primeste ca valoare URL-ul imaginii folosite pe post de "hart
de imagini";
Atributul "usemap" a crui valoare este de forma "#harta1" unde "harta1" numele
hrii definit la punctul 2.
Observaii: Harta de imagini se poate afla i ntr-o alt pagin Web caz n care atributul
"usemap" primete o valoare de forma:
"nume_pagina.html#harta1";
"www.cnmv.ro/harti.html/harta1".
2. Definirea hrii.
Definirea hrii se face n interiorul unui bloc special delimitat de tag-urile <map> i
</map>. Un atribut obligatoriu al tag-ului <map> este "name" care primete ca
valoare este un nume (numele hrii) (de exemplu "harta1").
O hart este format din mai multe zone. Fiecare zon se introduce cu ajutorul tag-ului
<area>.
Tag-ul <area> are trei atribute obligatorii:
Atributul "shape" determin tipul de "zon activ" i poate lua numai trei valori
posibile:
a) "rect" pentru zone de form dreptunghiular;
b) "circle" pentru zone de form circular;
c) "poly" pentru zone de form poligonal;
d) "default" pentru restul imaginii care nu este acoperit de niciuna din zonele de
tipul precizat mai sus.
Atributul
"coords" determin coordonatele zonei (vezi paragraful urmtor).
Atributul "href" primete ca valoare URL-ul paginii ctre care puncteaz link-ul
zonei respective.
Obs: Dac n locul unui atribut "href" apare nimic sau atributul "nohref" (fr valori
suplimentare) atunci acea zon nu puncteaz ctre nici un alt document HTML.
Atributul <area> poate avea de asemenea i atributul "target" care primete ca valoare
numele unei instane a browser-ului n care va fi afiat pagina ctre care puncteaz linkul zonei respective.
94
x1
x2
X
y1
y2
Y
x
X
y
(x1,y1) (x2,y2)
(x4,y4)
Y
95
(x3,y3)
<html><head><title>Exemplul
12_1</title><head><body>
<h1>O harta de imagini</h1>
<img src="harta de imagini.gif"
usemap="#harta1" width="600"
height="500">
<map name="harta1">
<area shape="rect"
coords="100,100,200,200"
href="p2.html">
<area shape="circle"
coords="400,200,100" href="p3.html">
<area shape="poly"
coords="100,300,200,300,400,400,100,
400" href="p4.html">
</map>
</body></html>
96
Formulare
Interactivitatea
Interactivitatea unei pagini Web este definit ca posibilitatea ca un client
(utilizator) s comunice cu un server astfel nct utilizatorul s obin informaia de care
are nevoie.
Limbajul HTML, fiind o form particular de realizare a HiperText-ului, ofer
posibilitatea navigrii ntre diversele surse de informaii aflate pe INTERNET prin
intermediul link-urilor.
A doua posibilitate de a realiza interactivitatea pentru o pagin Web este oferit
de formulare (n englez "form").
Un formular este un ansamblu de "zone active" alctuit din butoane de apsat,
csue de selecie, cmpuri de editare, etc. O sesiune de lucru cu o pagin Web ce conine
un formular cuprinde urmtoarele etape:
1. Utilizatorul completeaz formularul i l expediaz unui server;
2. O aplicaie dedicat pe server analizeaz formularul completat i (dac este necesar)
stocheaz datele ntr-o baz de date;
3. Serverul expediaz (dac este necesar) un rspuns utilizatorului.
Un formular este definit ntr-un bloc delimitat de tag-urile corespondente <form>
i </form>.
Observaii:
Blocurile <form> nu pot fi imbricate;
ntr-o pagin Web pot fi create oricte formulare.
97
98
Obs: Dup completarea ca n figura de mai sus i expedierea formularului ctre destinatar
acesta va gsi n interiorul mesajului urmtorul coninut:
"numele=GUGOIU+TEODORU", caracterul "spaiu" fiind reprezentat de "+".
Pentru elementul <input> de tipul cmp de editare (type="text") alte dou atribute
sunt pot fi utile:
Atributul "size" specific limea cmpului de editare. Dac valoarea tastat ntr-un
cmp de editare depsete aceast lime atunci se execut automat un "scroll" al
acestui cmp.
Atributul "maxlength" specific numrul maxim de caractere pe care le poate primi
un cmp de editare. Caracterele tastate peste numrul maxim de caractere sunt ignorate.
<html><head><title>Exemplul
13_3</title></head><body>
<h1>Un formular cu un camp de editare
particularizat</h1><hr>
Latimea campului de editare este de 10
caractere.<br>
Numarul maxim de caractere admise este
de 20.<br>
<form method="post"
action="mailto:stanp@edu.ro">
<input type="text" name="numele"
value="Numele si prenumele" size="10"
maxlength="20"><br>
<input type="submit">
</form>
</body></html>
99
Observii:
Dac atributul "type" lipsete ntr-un element <input> atunci cmpul respectiv este
considerat implicit ca fiind de tip "text";
Formularele cu un singur cmp (de tip text) nu au nevoie de un buton de expediere.
Datele sunt expediate automat dup completarea cmpului i apsarea tastei
"ENTER";
ntr-un formular pot exista mai multe butoane de expediere avnd atributul "name"
setat la valori diferite.
Butonul Reset
Dac un element de tip <input> are atributul "type" setat la valoarea "reset" atunci
n formular se introduce un buton pe care scrie "Reset". La apsarea acestui buton toate
elementele din formular primesc valorile implicite (definite odat cu formularul) chiar
dac aceste valori au fost modificate de utilizator.
Un buton "Reset" poate primi un nume cu ajutorul atributului "name" i o valoare
printr-un atribut "value". Pe un buton "Reset" este scris textul "Reset" dac atributul
"value" lipsete sau valoarea atributului "value" n caz contrar.
<html><head><title>Exemplul
13_4</title></head><body>
<h1>Un formular cu un buton
Reset</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Introduceti numele:
<input type="text" name="nume"
value="Numele"><br>
Introduceti prenumele:
<input type="text" name="prenume"
value="Prenumele"><br>
<input type="reset" value="sterge">
<input type="submit">
</form>
</body></html>
100
<html><head>
<title>Exemplul 13_5</title>
</head><body>
<h1>Un formular cu un camp
password</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Nume:<input type="text" name="nume"><br>
Prenume:
<input type="text" name="prenume"><br>
Password:<input type="password"
name="parola"><br>
<input type="reset" value="sterge"><br>
<input type="submit" value="expediaza">
</form>
</body></html>
101
Casete checkbox
O caset de tip validare (checkbox) permite selecia sau deselecia unei opiuni.
Pentru inserarea unei casete de tip "checkbox" se utilizeaz tag-ul <input> cu atributul
"type" setat la valoarea "checkbox".
Obs:
Fiecare caset poate avea un nume definit prin atributul "name";
Fiecare caset poate avea valoarea implicit "selectat" definit prin atributul
"checked" (nu sunt necesare alte valori);
Fiecare caset poate avea setat atributul "value" cu valoarea care va fi inclus n
perechea "name=value" ce va fi expediat odat cu formularul. Dac acest atribut
lipsete atunci se va expedia perechea "name=on". Casetele care sunt deselectate nu
trimit ctre server perechi "name=value".
<html><head><title>Exemplul
13_7</title></head><body>
<h1>Un formular cu casete
checkbox</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Alegeti meniul:<br>
Pizza <input type="checkbox"
name="pizza" value="o portie">
Nectar <input type="checkbox"
name="nectar" value="un pahar">
Bere <input type="checkbox" name="bere"
value="o sticla">
Cafea <input type="checkbox"
name="cafea" value="o ceasca"><br>
<input type="reset">
<input type="submit">
</form>
</body></html>
Caseta "File"
Coninutul ntreg al unui fiier poate fi pe post de valoare ntr-o pereche
"name=value" a unui formular.
Pentru aceasta se insereaz un element <input> ntr-un formular avnd ca
atributul "type" setat la "file" ("file" n englez nseamn fiier).
Alte trei atribute sunt utile pentru un element de tip "file":
Atributul "name" permite ataarea unui nume. Acest nume va apare n perechea
"name=value" expediat serverului;
Atributul "value" primete ca valoare URL-ul fiierului care va fi expediat odat cu
formularul. Aceast valoare poate fi atribuit direct atributului "value", poate fi
tastat ntr-un cmp de editare ce apare odat cu formularul sau poate fi aleas prin
intermediul unei casete de tip "File Upload" sau "Choose File" care apare la
apsarea butonului "Browse" din formular;
Atributul "enctype" metoda utilizat la criptarea fiierului de expediat. Valoarea
acestui atruibut este "multipart/form-data".
102
<html><head><title>Exemplul
13_8</title></head><body>
<h1>Un formular cu caseta file</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Alegeti fisierul:
<input type="file" name="fisier"
value="c:\html\p2.html"
enctype="multipart/form-data"><br>
<input type="reset">
<input type="submit">
</form>
</body></html>
Elementul "image"
ntr-un capitol anterior au fost prezentate hrile de imagini. n acest paragraf vom
afla despre un alt mod de a utiliza o imagine pe post de hart (un click pe diferite zone ale
ei va determina diferite aciuni).
Pentru aceasta utilizm tag-ul <input> avnd atributul "type" setat la valoarea
"image". Urmtoarele atribute sunt utile cnd utilizm acest element ntr-un formular:
Atributul "src" primete ca valoare URL-ul imaginii care va fi folosit pe post de
hart;
Atributul "name" primete ca valoare un "nume" care va fi folosit la expedierea
datelor ctre server;
Atributul "align" este folosit pentru alinierea imaginii n cadrul paginii Web. El
primete aceleai valori i cu aceleai semnificaii cu cele utilizate la alinierea unei
imagini.
Harta de imagini este de tip "server" i funcioneaz n felul urmtor:
Utilizatorul efectueaz click ntr-o zon anumit pe suprafaa imaginii;
Imediat sunt trimise date ctre server-ul de pagini Web la care suntem conecai.
Aceste date sunt de forma "nume.x=valoare_x" i "nume.y=valoare_y" unde
"nume" este valoarea atributului "name" iar "valoare_x" i "valoare_y" reprezint
coordonatele n pixeli ale punctului n care s-a fcut click pe imagine fa de colul
stnga-sus al imaginii.
O aplicaie dedicat pe server analizeaz aceste date i n funcie de coordinatele x
i y ale punctului n care utilizatorul a efectuat click pe imagine se ncarc diferite
pagini Web.
Obs: Harta de imagini prezentat mai sus este de tip "server" deoarece deciziile
privind paginile care se vor ncrca sunt luate de o aplicaie aflat pe server.
<html><head>
<title>Exemplul 13_9</title>
</head><body>
<h1>Un formular cu o harta de imagini de
tip server</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
<input type="image" src="harta de
imagine.gif">
</form>
</body></html>
103
Observaii:
n exemplul de mai sus lipsesc butoanele "Reset" i "Submit Query" ntruct
formularul cu date este expediat ctre server ori de cte ori utilizatorul efectueaz
click cu mouse-ul pe imagine. n acest fel o imagine poate fi folosit pe post de
buton de expediere a formularului.
Exemplul de mai sus este numai pe jumtate funcional. La efectuarea unui click pe
imagine, datele sunt cuprinse ntr-un e-mail i expediate la adresa menionat n
formular. n realitate datele sunt expediate ctre server n alt format (nu prin email), sunt analizate imediat de o aplicaie aflat pe server (un script CGI) care
formuleaz i trimite un rspuns utilizatorului. Configurarea serverului i scrierea
unei asemenea aplicaii depsete nivelul acestei cri;
O serie de atribute de la elementul <img> (ca de exemplu "align") sunt aplicabile i
la elementul <input image=>.
Elementul "button"
ntr-un formular pot apare butoane. Cnd utilizatorul apas un buton se
declaneaz n execuie o funcie de tratare a acestui eveniment. Limbajul HTML nu
permite scrierea unor astfel de funcii (acest lucru este posibil dac se utilizeaz limbajele
"JavaScript" sau "Java").
Pentru a insera un buton ntr-un formular se utilizeaz tag-ul <input> avnd
atributul "type" setat la valoarea "button". Alte dou atribute utile ale elementului
"button" sunt:
Atributul "name" permite ataarea unui nume butonului;
Atributul "value" primete ca valoare textul care va fi afiat pe buton.
<html><head><title>Exemplul
13_10</title></head><body>
<h1>Un formular cu un buton de
apasat</h1><hr>
<form action="mailto:stanp@edu.ro">
Acesta este un buton:
<input type="button" name="butonul1"
value="apasa aici"><br>
</form>
</body></html>
Obs: La apsarea butonului din exemplul de mai sus nu se execut nimic ntruct
n pagina html nu exist un script "JavaScript" care s trateze evenimentul de apsare al
butonului. Scrierea unei astfel de script depsete nivelul acestei cri.
Elementul "hidden"
Elementul "hidden" este un cmp ascuns ntr-un formular n sensul c valoarea lui
nu va fi afiat n pagina Web.
Elementul "hidden" este inserat n formular cu ajutorul tag-ului <input> al crui atribut
"type" primete valoarea "hidden". Un atribut esenial al unui element de tip "hidden"
este atributul "value". Valoarea acestui atribut poate fi setat la crearea elementului sau
poate fi stabilit de un script JavaScript sau de un appplet Java.
104
Lista de selecie
Lista de selecie permite utilizatorului s aleag unul sau mai multe elemente
dintr-o lista finit de elemente posibile.
Lista de selecie este inclus n formular cu ajutorul tag-urilor corespondente
<select> i </select>.
O list de selecie poate avea setate urmtoarele atribute:
Atributul "name" care ataeaz un nume listei de selecie (utilizat n perechile
"name=value" care sunt expediate server-ului);
Atributul "size" care precizeaz (printr-un numr ntreg pozitiv, valoarea implicit
fiind "1") cte elemente din list sunt vizibile la un moment dat pe ecran (celelalte
devenind vizibile prin aciunea "scroll-bar-ului" ataat automat listei).
Obs: n mod implicit un singur element din list poate fi selectat la un moment dat.
Pentru listele ce permit selecii multiple vezi paragraful urmtor.
Elementele unei liste de selecie sunt incluse n list cu ajutorul tag-ului <option>.
Dou atribute ale tag-ului <option> se dovedesc utile:
Atributul "value" primete ca valoare un text care va fi expediat server-ului n
perechea "name=value". Dac acest atribut lipsete atunci ctre server va fi
expediat textul ce urmeaz dup <option>.
Atributul "selected" (fr alte valori adiionale) permite selectarea implicit a unui
element al listei.
<html><head><title>Exemplul
13_11</title></head><body>
<h1>Un formular cu o lista de
selectie</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
Universitatea absolvita:<br>
<select name="universitate" size="3">
<option value="B"> Universitatea din
Bucuresti
<option value ="CL" selected>
Universitatea din Cluj
<option value="TM"> Universitatea din
Timisoara
<option value="IS"> Universitatea din
Iasi
</select><br><br>
<input type="reset">
<input type="submit">
</form>
</body></html>
105
106
<html><head><title>Exemplul
13_13</title></head><body>
<h1>Un formular cu un cmp de editare
multilinie</h1><hr>
<form method="post"
action="mailto:stanp@edu.ro">
<textarea name="text multilinie"
cols="30" rows="5" wrap="off">
Prima linie din textul initial
Adoua linie din textul initial
</textarea>
<input type="reset">
<input type="submit">
</form>
</body></html>
Blocul "button"
Un buton pentru lansarea n execuie a unei aciuni poate fi introdus ntr-un
formular prin elementul <input> avnd atributul "type" setat la valoarea "button" aa cum
s-a vzut mai sus.
Exist o a doua modalitate de a introduce ntr-o pagin Web un buton de apsat i
anume prin intermediul blocului <button></button>.
Un astfel de buton poate fi inserat ntr-un formular, n acest caz avnd aciuni
legate de acel formular sau poate fi inserat oriunde n pagin avnd aciuni independente
de formulare.
Atributele posibile ale elemntului "button" sunt:
"name" acord elementului un nume;
"value" precizeaz textul care va fi afiat pe buton;
"type" precizeaz aciunea ce se va executa la apsarea butonului dac acesta este
inclus ntr-un formular. Valorile posibile pentru acest atribut sunt:
"button";
"submit";
"reset".
Observaie: n corpul blocului <button></button> se poate afla un text sau poate fi
marcajul de inserare al unei imagini.
<html><head><title>Exemplul
13_15</title></head><body>
<h1>Blocul "button"</h1><hr>
Un buton simplu:<br>
<button name="butonul1">Apasa aici
</button><br>
<div style="background-color:yellow;">
<form method="post"
action="mailto:tgugoiu@edu.ro">
Numele:<input type="text"
name="numele"><br>
Prenumele:<input type="text"
name="prenumele"><br>
<button name="butonul2" type="submit">
<img src="Image20.gif" width="100">
</button>
</form></div>
</body></html>
107
Frame-uri
Frame-uri sau sub-ferestre
Pn n acest moment n fereastra browser-ului era ncrcat un singur document
HTML. Frame-urile ne permit s definim n fereastra browser-ului sub-ferestre n care s
fie ncrcate documente HTML diferite.
Frame-urile sunt definite ntr-un fiier ".html" special n care blocul
<body></body> este nlocuit de blocul <frameset></frameset>.
n interiorul acestui bloc fiecare frame este introdus prin tag-ul <frame>. Un atribut
obligatoriu al tag-ului <frame> este "src" care primete ca valoare URL-ul documentului
HTML care va fi nrcat n acel frame.
Definirea frame-urilor se face din aproape n aproape prin mprirea ferestrelor (i
a sub-ferestrelor) n linii i coloane:
mprirea unei ferestre ntr-un numr de sub-ferestre de tip "coloan" se face cu
ajutorul atributului "cols" al tag-ului <frameset> ce descrie acea fereastr.
mprirea unei ferestre ntr-un numr de sub-ferestre de tip "linie" se face cu
ajutorul atributului "rows" al tag-ului <frameset> ce descrie acea fereastr.
Valoarea atributelor "cols" i "rows" este o list de elemente (pentru fiecare subfereastr cte un element) separate prin virgul care descriu modul n care se face
mprirea. Elementele listei pot fi:
a) Numr ntreg de pixeli;
b) Procente din dimensiunea ferestrei (numr ntre 1 i 99 terminat cu "%");
c) "n*" care nseamn n pri din spaiul rmas posibil.
Obs: Dac mai multe elemente din list sunt setate cu "*" atunci spaiul rmas
disponibil pentru ele se va mpri n mod egal.
Exemplu 1: "200, *, 50%, *" nseamn o mprire n 4 sub-ferestre, prima fiind de
200 de pixeli, a treia fiind jumtate din spaiul total disponibil, a doua i a patra ocupnd
restul de spaiu rmas disponibil n mod egal.
Exemplu 2: "200, 1*, 50%, 2*" nseamn o mprire n 4 sub-ferestre, prima fiind
de 200 de pixeli, a treia fiind jumtate din spaiul total disponibil, a doua i a patra
ocupnd restul de spaiu rmas disponibil care se mparte n trei pri egale, a doua
fereastr lund o parte iar a patra fereastr lund 2 pri.
Obs: O sub-fereastr poate fi un frame (folosinduse <frame>) n care se va ncrca un
document HTML sau poate fi mprit la rndul ei n alte sub-ferestre (folosindu-se
<frameset>).
<html><head><title>Exemplul
14_1</title></head>
<frameset cols="*,*">
<frame src="p1.html">
<frame src="p2.html">
</frameset>
</html>
108
n exemplul urmtor este creat o pagin Web avnd trei frame-uri mixte. Pentru
a o crea se procedeaz din aproape n aproape. Mai nti pagina este mprit n dou
sub-ferestre de tip "coloan" dup care a dou sub-fereastr este mprit n dou subferestre de tip "linie".
<html><head><title>Exemplul
14_4</title></head>
<frameset cols="20%,*">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>
109
n exemplul urmtor pagina Web este construit cu ajutorul a dou fiiere ".html" n care
sunt configurate frame-urile:
<html><head><title>Exemplul
14_5</title></head>
<frameset cols="20%,*">
<frame src="p1.html">
<frame src="frame.html">
</frameset>
</html>
<html><head><title>Fisierul
"frame.html"</title></head>
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</html>
110
<html><head><title>Exemplul
14_7</title></head>
<frameset cols="20%,*" border="20">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>
Chenare invizibile
n mod implicit chenarul unui frame este afiat i are un aspect tridimensional.
Afiarea chenarului unui frame poate fi inhibat dac se utilizeaz atributul
"frameborder" setat la valoarea "no". Acest atribut poate fi ataat att tag-ului <frameset>
(inhibarea fiind valabil pentru toate frame-urile incluse) ct i tag-ului <frame>
(inhibarea fiind valabil numai pentru un singur frame).
Obs: Valorile posibile ale atributului "frameborder" sunt:
"yes" echivalent cu "1";
"no" echivalent cu "0".
<html><head><title>Exemplul
14_9</title></head>
<frameset cols="20%,*" frameborder="no">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
</frameset>
</html>
111
Bara de defilare
Atributul "scrolling" al tag-ului <frame> este utilizat pentru a aduga unui frame o
bar de defilare care permite navigarea n interiorul documentului afiat n interiorul
frame-ului.
Valorile posibile sunt:
"yes", barele de defilare sunt adugate ntotdeauna;
"no", barele de defilare nu sunt utilizabile;
"auto", barele de defilare sunt vizibile atunci cnd este necesar.
<html><head><title>Exemplul
14_10</title></head>
<frameset cols="*,*,*">
<frame src="p.html" scrolling="yes"
noresize>
<frame src="p.html" scrolling="no"
noresize>
<frame src="p.html" scrolling="auto"
noresize>
</frameset>
</html>
Chenare fixe
Atributul "noresize" al tag-ului <frame> (fr nici o valoare suplimentar) dac este
prezent inhib posibilitatea implicit a utilizatorului de a redimensiona frame-ul cu
ajutorul mouse-ului.
Browser-e vechi
Pentru browser-e vechi care nu accept frame-uri exist posibilitatea ca n pagina
Web s apar un avertisment care s invite utilizatorul s instaleze o versiune mai
modern pentru browser.
Pentru aceasta se utilizeaz tag-ul <noframes> n interiorul blocului <frameset>.
112
<html><head><title>Exemplul
14_12</title></head>
<frameset cols="*,*">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
<noframes><body>
<p>Aceasta pagina contine farme-uri.
<p>Pentru o varianta fara frame-uri a
acestei pagini vizitati:
<a href="pff.html">Pagina fara frame</a>
</body></frameset>
</html>
Frame-uri in-line
Un frame "in-line" se insereaz ntr-o pagin Web n mod asemntor cu o
imagine. Pentru a insera un frame "in-line" utilizm blocul <iframe></iframe>.
Atributele acceptate de tag-ul <iframe> sunt n parte preluate de la tag-urile <frame> i
<frameset> ca:
"src", "border", "frameborder", "bordercolor", "marginheight", "marginwidth",
"scrolling", "name", "noresize";
sau sunt preluate de la tag-ul <img> ca:
"vspace", "hspace", "align", "width", "height".
<html><head><title>Exemplul
14_13</title></head><body>
<a href="p1.html" target="ilf">Pagina
1</a><br>
<a href="p1.html" target="ilf">Pagina
1</a><br>
<a href="p1.html" target="ilf">Pagina
1</a>
<center><iframe width="60%" border=2
bordercolor=red name="ilf" src="p.html">
Daca vedeti acest text inseamna ca
browser-ul dumneavoastra nu suporta
frame-uri "in-line".
<a href='pffil.html">Pagina fara frameuri in-line</a>
</iframe></center></body></html>
113
114
Web primul lucru care trebuie efectuat este stabilirea unei scheme de culori. Dei pare o
decizie simpl schema de culori aleas poate atrage sau ndeprta muli vizitatori.
Cu ct sunt utilizate mai multe culori ntr-un un site, cu att mai mult se dovedete
un aspect neprofesional al proiectrii acestuia. Una dintre schemele de culori folosite cel
mai frecvent este text negru pe fond alb. Pentru ca scrisul s fie lizibil culoarea sa i cea a
fondului trebuie s fie complementare. n general se obinuiete ca textul s aib o
culoare nchis, n timp ce fundalul s aib una deschis. Site-urile care utilizeaz o
schem invers celei prezentate sunt mai obositoare, ceea ce determin cel mai frecvent
ca un vizitator s nu ncarce mai mult de trei pagini. Totui schema de culori reprezint
un element subiectiv i de aceea se recomand dac este posibil, ca fiecare vizitator al
site-ului s-i poat alege interactiv o schem de culori care i convine cel mai mult. O
adres Web la care pot fi ntlnite mai multe scheme de culori recomandate poate fi
gsit la www.colorschemer.com.
Imaginile reprezint un element grafic de atracie al site-ului. Ele pot fi statice
sau animate, ns n ambele cazuri se recomand ca dimensiunea lor s fie ct mai mic,
pentru a determina o vitez ridicat de ncrcare a paginilor site-ului.
ntr-un site imaginile pot fi ajuttoare sau detaliate. Cele ajuttoare au dimensiuni
mai mici i o rezoluie mai sczut. Opional prin accesarea lor pot deveni vizibile
imaginile detaliate care au dimensiuni mai mari i rezoluii mai bune. Este bina ca suma
imaginilor ajuttoare de pe o pagin s nu depeasc cteva zeci de kb.
Cel mai frecvent se utilizeaz n paginile Web imagini n format GIF sau JPEG.
Formatul GIF este mai bun pentru redarea imaginilor care au suprafee fr detalii.
Totui formatul GIF este limitat doar la o palet de maxim 256 culori. Imaginile care
conin diferite tonaliti de culoare pot fi redate cel mai bine n formatul JPEG care
permite afiarea a peste 16 milioane de culori. Imaginile animate sunt de tip GIF animat
care permite memorarea unei secvene formate din mai multe imagini succesive ce pot fi
afiate cu o anumit vitez de rulare n mod transparent sau nu. Dac se dorete utilizarea
unor animaii speciale pot fi folosite obiectele flash - Macromedia, dar care necesit
foarte multe resurse att n proiectare ct i n afiare, ceea ce determin pentru vizitator
necesitatea de a avea o lime de band destul de mare pentru a nu atepta foarte mult
ncrcarea acestora.
Foarte frecvent fiierele de tip imagine au foarte multe culori i nuane. Astfel ele
tind s fie foarte mari i implic un timp mare de descrcare, ceea ce poate determina pe
unii vizitatori s abandoneze consultarea site-ului. Fiierele de tip imagine care se vor
utiliza n paginile Web trebuie s fie optimizate. Exist mai multe metode pentru a
realiza un compromis ntre o imagine cu multe culori i o vitez crescut de descrcare a
ei. Dimensiunea fiierelor de tip imagine poate fi micorat prin reducerea paletei de
culori i prin reducerea dimensiunilor orizontale i verticale ale imaginii. Rezoluia
standard pentru imaginile de Web este de 72 dpi.
115
Glosar de termeni
browser /
navigator
client
client e-mail
download
FTP
hiperdocument
hiperlegtur
hipertext
HTML
HTTP
link, hyperlink
meniu
Netscape
116
procesare
client/server
reea
server
TCP/IP
Telnet
tipul mediului
text
sunet
upload
URL
WEB
WWW
117
Bibliografie
Courtner, Gini
Marquis Annette
Eddings, Joshua
Gugoiu, Teodoru
Jamsa, K.
Kerman, Phillip
Lon, Coley
Ptru, Bogdan
Tyler, Denise
Crystal D. Erickson
***
***
***
Not:
n realizarea crii s-au folosit i foarte multe resurse din Internet, studii sau articole
scrise de diferii autori din lumea ntreag.
118