Web Design

Proiectarea paginilor WEB 1
CUPRINS

PARTEA I World Wide Web

Capitolul 1:
INTERNET I WORLD WIDE WEB
1.1 Introducere
1.2 URL
1.3 Modelul de referin
1.4 World Wide Web
1.5 Browsere Web
1.6 Editoare Web
1.7 Concluzii

PARTEA a II-a Introducere n HTML

Capitolul 2:
PAGINA WEB
2.1 Prima pagin
2.2 Elementele standard ale unui document HTML
2.3 Titlul unei pagini Web
2.4 Formatarea de baz a textului
2.5 Stabilirea culorilor n pagina Web
2.6 Setarea marginilor paginii Web
2.7 Concluzii. Structura standard a unui document HTML

Capitolul 3:
PREZENTAREA TEXTULUI N PAGINA WEB
3.1 Titluri n pagina Web
3.2 Definirea paragrafelor
3.3 Stabilirea fontului de baz
3.4 Elementul font
3.5 Caractere evideniate
3.6 Caractere speciale n paginile Web
3.7 Folosirea listelor
3.8 Concluzii. Elemente i atribute referitoare la formatarea textului

Capitolul 4
TABELE N PAGINA WEB
4.1 Tabele n pagina Web
4.2 Proprieti ale tabelului
4.3 Proprietile celulelor tabelului
4.4 Formatarea tabelului
4.5 Concluzii. Elemente i atribute referitoare la tabele
Ionel SIMION 2

Capitolul 5
CREAREA HIPERLEGTURILOR
5.1 Definirea hiperlegturilor
5.2 Tipuri de hiperlegturi
5.3 Proprieti ale hiperlegturilor
5.4 Concluzii. Elemente i atribute referitoare hiperlegturi

PARTEA a III-a Elemente avansate de HTML

Capitolul 6
MULTIMEDIA N PAGINA WEB
6.1 Imagini n pagina Web
6.2 Atribute ale imaginii
6.3 Sunete n pagina Web
6.4 Secvene video n pagina Web
6.5 Elementul Object
6.6 Realitatea virtual n pagina Web
6.7 Concluzii. Elemente multimedia i atributele lor

Capitolul 7
HRI DE IMAGINE
7.1 Funcionarea unei imagini hart
7.2 Definirea zonelor active ale hrii
7.3 Imaginea hart n pagina Web
7.4 Concluzii. Elemente i atribute referitoare la imagini hart

Capitolul 8
MACHETAREA PAGINII WEB PRIN FERESTRE
8.1 Ferestre n pagina Web
8.2 Atribute ale ferestrelor
8.3 Ferestre iframe
8.4 Concluzii. Elemente i atribute referitoare la ferestre

Capitolul 9
FORMULARE
9.1 Formulare n pagina Web
9.2 Construcia formularului
9.3 Accesul la baze de date Web
9.4 Concluzii. Elemente i atribute referitoare la formulare

Capitolul 10
META-INFORMAII N PAGINA WEB
10.1 Meta-informaii
10.2 Concluzii. Elemente i atribute referitoare la meta-informaii

Capitolul 11
XML I XHTML
11.1 Limbajul XML
11.2 Diferene ntre XHTML i HTML


PARTEA a IV-a ELEMENTE DE PROGRAMARE WEB

Capitolul 12
ELEMENTE DE PROGRAMARE WEB I MEDII INTERACTIVE
12.1 Elemente de programare WEB
12.2 Aplicaii Java
12.3 Java Script
12.4 VBScript
12.5 Controale ActiveX

Capitolul 13:
DYNAMIC HTML (DHTML)
13.1 Stiluri
13.1.1 Stiluri definite in line
13.1.2 Stiluri dedicate
13.1.3 Stiluri definite prin fiiere externe
13.1.4 Funcionarea stilurilor n cascad
13.1.5 Atribute pentru stiluri
13.2 Layere
13.2.1 Layere definite prin sintaxa CSS
13.2.2 Layere definite in line
13.2.3 Layere definite prin foi de stil
13.2.4 Layere deifinite prin sintaxa LAYER
13.3 Filtre
13.4 Folosirea scripturilor n Dynamic HTML

PARTEA a V-a APLICAII. PROGRAME DE EDITARE WEB

Capitolul 14
EDITOARE WEB
14.1 Folosirea stilurilor cu Microsoft FrontPage
14.2 Inserarea unor elemente dinamice cu Microsoft FrontPage
14.3 Construcia unor butoane interactive cu Macromedia Fireworks MX 2004
14.4 Construcia unor efecte speciale cu Macromedia Flash MX

Ionel SIMION 4

PARTEA I

World Wide Web


Capitolul 1:
INTERNET I WORLD WIDE WEB

1.1 Introducere

Internetul este o reea care cuprinde reele din ntreaga lume. La reeaua Internet
sunt conectate milioane de calculatoare, de la supercalculatoare la microcalculatoare de
birou. Pe aceast reea funcioneaz tehnologia World Wide Web (WWW), o reea de
informaii i un serviciu prin care se acceseaz o mare varietate de informaii digitale.
Folosind un software de navigare, denumit browser Web, este facilitat accesul la text,
grafic, sunet i la alte informaii digitale ce se regsesc pe orice server de pe Internet.
Toate calculatoarele conectate la Internet comunic ntre ele folosind un protocol de
transmitere a datelor Transmission Control Protocol/Internet Protocol (TCP/IP). Pentru
furnizarea serviviciilor pe Internet se folosete modelul client-server. Acest model
presupune existena unor calculatoare server, care furnizeaz fiiere i informaii, la
cerere, unor calculatoare client. Calculatoarele server depoziteaz informaia, o sorteaz
i o distribuie, cu ajutorul unui software specializat, care asigur anumite servicii n reea
(pota electronic, transfer de fiiere, comer electronic etc.). Calculatoarele client emit
cereri de servicii ctre calculatoarele server, cu ajutorul unor programe care asigur
accesul la aceste servicii.

Istoric
Anii 60

Agenia pentru Proiecte de Cercetare Avansate (ARPA, Advanced Research
Projects Agency) din cadrul Departamentului Aprrii al Statelor Unite ale
Americii (DOD, Department of Defense) a primit 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 - dac o parte
din reea ar fi fost distrus, informaiile s poat fi transmise pe alte rute.
Ionel SIMION 6

1969 La dezvoltarea proiectului ARPA au fost invitate s participe 4 universiti
americane: University of California at Los Angeles, University of California at
Santa Barbara, University of Utah i Stanford Research Institute.
Reeaua ARPA se divide n DARPA (partea militar) i ARPANET (partea
civil).
1973 Reeaua ARPANET stabite legturi cu computere din Anglia (University
College din Londra) i Norvegia (Royal Radar Establishment), devenind o
reea internaional.
1 975 Este creat serviciul E-Mail pentru expedierea mesajelor electronice.
Este creat serviciul TELNET pentru comanda de la distan a unui computer
(remote control).
1975 AT&T Bell dezvolt sistemul UNIX to UNIX CoPy (UUCP) distribuit apoi ca
UNIX.
1 979 Este creat serviciul UseNet pentru expedierea tirilor pe internet.
1983 Apare protocolul TCP/IP (Transmission Control Protocol/Internet Protocol)
care nlocuiete vechiul protocol NCP (Network Control Protocol). Protocolul
realizeaz dirijarea informaiei ntr-o reea.
1985 Apare NSF (National Science Foundation NETwork) care interconecteaz
supercalculatoarele din centrele universitare americane.
1988 Apare IRC (Internet Relay Chat).
1990,
WWW

n cadrul laboratoarelor de cercetare nuclear CERN (Conseil Europen
pour la Recherche Nuclaire), 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 - WWW.
1991 Reeaua Internet devine accesibil att universitilor ct i companiilor
comerciale i persoanelor particulare.
1993 Un grup de studenide la University of Illinois creaz interfaa grafic GUI
(Graphical User interface) care permite apariia browserului Mosaic.
1994 Este lansat un nou protocol de reea IPng (Internet Protocol next
generation), care asigur securitatea informaiei.
Compania Netscape Communications realizeaz browserul Netscape
Navigator.
1995 Compania Sun Microsystems lanseaz programul Java.
Microsoft dezvolt propriul browser Microsoft Internet Explorer.
2001 Tehnologia wireless.


Dei Internet-ul nu are o structur administrativ bine determinat, dup 1990 se
face simit nevoia unui organism pentru supervizarea activitilor care se petrec pe
Internet. Organizaia ISOC (Internet Society) este organizaia care cuprinde Internet
Engineering Task Force (IETFS) i care elaboreaz standarde pentru Internet. Orice
inovaie adus n tehnologiile legate de Internet este cunoscut sub forma unei cereri de
comentariu (Request for Coments). Dup ce o propunere a fost testat i acceptat, este
difuzat n reea i, dac nu apar obiecii importante, propunerea devine standard Internet.

1.2 URL

URL (Uniform Resource Locator) reprezint o adres unic a unei resurse pe
Internet, care conine informaii privitoare la metoda (protocolul) de accesare i locaia
resursei. Identificatorul URL are o form standard:
protocol://nume-gazd.domeniu/cale/fisier.extensie#ancora
unde:
protocol reprezint metoda (protocolul) pentru accesarea resursei.

Protocoale Internet
HTTP (HyperText
Transfer Protocol)
Transfer pagini Web de la un server Web.
FTP (File Transfer
Protocol)
Acest protocol permite schimbul de fiiere ntre dou computere
conectate la Internet.
TELNET Acest serviciu permite controlul unui calculator de la distan, prin
intermediul Internet-ului.
MAILTO Acest serviciu permite schimbul de mesaje electronice e-mail
(Electronic Mail) ntre doi utilizatori pe Internet. Schimbul de
mesaje se face prin intermediul protocolului SMTP (Send Mail
Transfer Protocol), protocolul de transfer pentru expedierea
mesajelor electronice i prin intermediul protocoalelor POP3,
IMAP etc. pentru recepionarea mesajelor electornice.
FILE Deschide un fiier pe un hard-disc local sau dintr-un LAN.
NEWS Acest serviciu permite accesul la grupurile de tiri UseNet
NNTP Acceseaz grupurile de tiri
GOPHER Afieaz informaii de pe un server Gopher.
WAIS Acceseaz o baz de date a serviciului Wais (Wide Area
Information Servers).
MSN Acceseaz o locaie MSN (Microsoft Network).

Ionel SIMION 8

nume-gazd reprezint numele computerului gazd. El este stabilit de
administratorul sistemului i poate fi obinut prin comanda hostname tastat la prompterul
MSDOS (linia de comand).
domeniu reprezint numele domeniului de pe Internet cruia i aparine computerul.
La nivelul cel mai nalt, Internetul este mprit n domeniile de nivel 1, ca de exemplu:
edu, com, ro etc. n plus, exist domenii pentru zone geografice sau ri: ro, uk, jp etc.
Aceste domenii sunt aprobate i gestionate de ICANN (Internet Corporation for Assigned
Names and Numbers).

Domenii de nivel 1
com organizaii comerciale aero industria aerospaial
edu organizaii educaionale biz organizaii din lumea afacerilor
net organizaii implicate n organizarea
reelei
org alte organizaii (n general,
nonprofit)
mil organizaii militare name domenii individuale
gov organizaii guvernamentale museum muzee
pro organizaii profesionale info domenii pentru informare
int organizaii internaionale ro Romnia

Aceste domenii de nivel 1 sunt mprite, la rndul lor, n subdomenii. De exemplu
subdomeniul pub din domeniul ro cuprinde ca subdomeniu pe geom.desc. Rezult astfel o
structur arborescent DNS (Domain Name System).

Pentru a obine numele complet al unui domeniu se parcurge ascendent structura
arborescent a subdomeniilor pn la rdcin . Exemple de domenii:
geom.desc.pub.ro
yahoo.com
Un computer are un nume unic pe Internet. Acesta are sintaxa:
nume-gazd.domeniu

cale reprezint calea ctre un fiier, n structura de directoare i fiiere aflate pe
computerul de pe Internet
ancora reprezint un reper (marcaj) n interiorul unui fiier.

Exemple de URL-uri:
http://www.pub.ro/index.html
http://geom.desc.pub.ro/index.html#7
ftp://www.netscape.com/downloads/communicator
telnet://geom.desc.pub.ro
mailto:isimion@geom.desc.pub.ro

O dat cu dezvoltarea tehnologiei Web, identificatorul URL a devenit mai complex,
cuprinznd i alte elemente opionale. Iat cteva exemple:
http://pub.ro/cgi-bin/script?arg1+arg2+arg3 - se activeaz un script situat n
directorul cgi-bin de pe serverul pub.ro, n funcie de trei argumente: arg1, arg2 i
arg3, prin protocolul http
wais:// geom.desc.pub.ro/baza_de_date?instructiuni_de_cautare - permite
interogarea unei baze de date, conform unor instruciuni indicate prin lista
instructiuni_de_cautare, prin protocolul wais
mailto:john@geom.desc.pub.ro?subject=Salutare transmite un mesaj
electronic cu subiectul Salutare la adresa john@geom.desc.pub.ro, prin
protocolul mailto
http://www.google.ro/search?q=url&ie=UTF-8&oe=UTF-
8&hl=ro&btnG=Caut%C4%83&meta= - caut cu ajutorul motorului Google
informaii referitoare la termenul URL
telnet://user:passwd@geom.desc.pub.ro:1234/ - conectare prin protocolul
telnet, ca utilizator cu numele user i parola passwd la serverul
geom.desc.pub.ro, prin portul 1234

1.3 Modelul de referin

nainte de fi lansat pe internet o informaie aceasta este mprit n pachete.
Avantajele acestui mod de transmitere a informaiei sunt multiple: dac un pachet este
corupt, retransmiterea este necesar doar pentru acesta i nu pentru ntreg coninutul
informaional; dac o zon a reelei este aglomerat sau nefuncional, pachetele pot fi
redirecionate pe alte rute etc. Fiecare pachet are capacitatea de a circula n mod
independent pe internet i ajung la destinaie ntr-o ordine oarecare la momente de timp
arbitrare. La destinaie pachetele sunt repuse n ordine i astfel informaia iniial este
refcut.

Ionel SIMION 10

Un pachet conine:
adresa sursei
adresa destinaiei
numrul pachetului n cadrul informaiei
un identificator pentru informaia transmis

Funcionarea reelei Internet se bazeaz pe un model cu 4 nivele, numit model de
referin.

Nivelul Aplicaie. La acest nivel, utilizatorul acceseaz reeaua Internet prin
intermediul unor metode numite protocoale Internet.

Nivelul Host to Host este nivelul conexiunilor pe Internet. La acest nivel ntlnim
protocolul de transfer TCP (Transmission Control Protocol) care realizeaz dirijarea
informaiei, asigurnd o conexiune sigur i bidirecional ntre dou computere pe
Internet.

Nivelul Internet este dominat de protocolul IP (Internet Protocol) care asigur
dirijarea pachetelor pe Internet pentru a ajunge la destinaie. Reeaua Internet
dispune de mijloace de corecie a erorilor de transmisie a pachetelor de informaii,
prin protocolul TCP (Transfer Control Protocol).
La nivelul Internet un computer se identific unic prin adresa lui IP. Aceast adres
este un numr binar pe 32 de bii. De regul, aceast adres se exprim prin 4 grupe de
numere zecimale, cuprinse ntre 0 i 255. Exemple de adrese IP:
141.85.91.16
194.02.44.0
Adresele IP se grupeaz n clase. Exist urmtoarele tipuri de clase:
clasa C este de forma: r.r.r.c
clasa B este de forma: r.r.c.c
clasa A este de forma: r.c.c.c
unde r reprezint partea de reea iar c reprezint computerul. De exemplu, pentru clasa C,
141.85.91.c poate avea cel mult 256 de drese IP, de la 141.85 .91.0 la 141.85.91.255.


Nivelul reea este nivelul fizic reprezentat de mediul prin care circul
pachetele de date. Acest mediu poate fi: srma de cupru, fibra optic, vidul
(aerul). La acest nivel exist mai multe protocoale depinznd de tipul reelei
de computere: Ethernet, Token Ring, FDDI.
Pentru o reea de tipul Ethernet protocolul se numete CSMA/CD (Carrier Sense
Multiple Acess / Collision Dtection). Conectarea computerelor la o reea Ethernet se face
prin intermediul unor plci de reea (Network Card) de tip Ethernet. Fiecare plac de reea
are o adres hardware (nscris n momentul fabricrii) format dintr-un numr pe 48 de
bii. De regul, aceast adres se exprim prin 6 grupe de cte 2 cifre hexagesimale.
Exemplu: 00 c0 df 11 25 0c.
Pentru a afla adresa hardware a plcii de reea se folosete comanda route print
pe promtperul MSDOS (linia de comand).

Observaie. Exist deci, 3 identificatori unici pentru un computer pe Internet:
numele, de exemplu: geom.desc.pub.ro
adresa IP (software), de exemplu: 141.85 .91.16
adresa plcii de reea (hardware), de exemplu: 00 c0 dfb 11 25 0c
Trecerea de la un identificator la alt identificator se face prin intermediul unor
mecanisme de rezoluie a adreselor. Trecerea de la nume la adresa IP este fcut de
serviciul DNS (Domain Name System) care ruleaz pe serverele DNS (Domain Name
Server). Trecerea de la adresa IP la adresa hardware este realizat de protocolul ARP
(Address Resolution Protocol) iar trecerea invers de protocolul RARP (Revers Address
Resolution Protocol). Ambele protocoale se afl la nivelul Internet.

1.4 World Wide Web

World Wide Web (WWW sau Web) este serviciul Internet cel mai utilizat. El permite
accesarea spaiului Internet prin stabilirea unor legturi ntre informaii, printr-o interfa
grafic uor de manevrat, folosind majoritatea protocoalelor de acces din reea: mailto, ftp,
telnet, news etc. n plus, World Wide Web are propriul
protocol: http (HyperText Transfer Protocol).
Aplicaia WWW este o aplicaie de tip client-server:
utilizatorul formuleaz o cerere prin intermediul
unei aplicaii client numite browser (de exemplu,
Internet Explorer sau Netscape Navigator)
cererea este expediat de ctre browser pe
Internet, ajungnd la serverul Web care preia cererea,
o interpreteaz i formuleaz rspunsul (caut paginile
Web solicitate, imaginile, sunetele etc.)
rspunsul este expediat ctre computerul client
aplicaia client (browserul) recepioneaz
rspunsul, l interpreteaz, informaia cerut fiind
afiat.

Datorit noilor tehnologii, complexitatea aplicaiilor
Web a crescut semnificativ, pornind de la diseminarea
informaiei (text, imagini simple, hri de imagine, formulare)
la tranzacii online, programarea sistemelor, ntreprinderi virtuale sau medii de lucru
colaborative.

Ionel SIMION 12

Categorii de aplicaii Web Exemple
Informaionale Ziare online, cataloage de produse, manuale de
service, cri electronice online.
Interactive Formulare de nregistrare, prezentare de
informaii, jocuri online.
Tranzacionale Comer electronic, banking online.
Workflow Planificare online, gestiune, management,
monitorizare.
Medii de lucru colaborative Instrumente de proiectare colaborativ.
Comuniti online Grupuri de discuii.
Portaluri Web Cumprturi electronice, magazine virtuale,
intermedieri online.

n cadrul World Wide Web, informaia este organizat sub form de pagini Web.
Pagina Web conine, pe lng informaii, referine ctre alte informaii din reea (de
exemplu, alte pagini Web). Aceste referine se numesc hiperlegturi i pot fi activate prin
intermediul unor zone active (texte, imagini) care sunt evideniate n cadrul paginii. Mai
multe pagini Web, mpreun cu alte elemente asociate (fiiere, scripturi, baze de date),
organizate pe un server, formeaz un sit Web.
Paginile Web sunt scrise ntr-un limbaj specific: HTML (HyperText Markup
Language).
Tot ceea ce ine de World Wide Web - modul de organizare a informaiei, modul de
transport, modul de codificare a acesteia este legat de dou noiuni fundamentale:
hipertext i hipermedia.
Hipertextul (hypertext) este un mod de a organiza informaia textual, cu
particularitatea c poate lega diferite pri ale acesteia, unele cu altele, ntr-o anumit
logic i nu dup o succesiune liniar, impus prin fraze i paragrafe.
Hipermedia (hypermedia) este o extensie a structurii hipertext, dezvoltate prin
adugarea la aceasta a unor elemente multimedia (sunete, imagini etc.).
Componentele celor dou structuri sunt nodul informaional i legtura (link), prin
care se construiesc sistemele i se realizeaz cutarea informaiilor. Nodul este elementul
conceptul de natur textual sau multimedia iar legturile sunt conexiuni ntre acestea.
Legturile pot fi interne, externe sau executabile, dup punctele lor de start i de
final.

Legturile interne se stabilesc ntre noduri informaionale ce se gsesc n acelai fiier
HTML
Legturile externe se stabilesc ntre noduri informaionale ce se gsesc n fiiere
diferite
Legturile
executabile
se stabilesc ntre un fiier codificat HTML i un fiier executabil ce
poate genera o pagin HTML sau un anumit coninut media

Organizaia responsabil cu coordonarea standardelor referitoare la World Wide
Web este W3C (World Wide Web Consortium), nfiinat n octombrie 1994, de ctre
nsui creatorul Web, Tim Berners-Lee. Organizaia este gzduit de trei universiti:
Massachusetts Institute of Technology din Statele Unite, Institut National de Recherche en
Informatique et en Automatique din Europa i Keyo University din Japonia. Printre membrii
W3C se numr companii precum: IBM, Microsoft, America Online, Apple, Adobe,
Macromedia, Sun Microsystems etc.

Legtur executabil
Fiier executabil
Coninut
HTML sau
media
vizualizat n
browser
Fiier HTML

Legtur extern
Fiier HTML Fiier HTML
TITLU articol 1

TITLU articol 2

text articol1 text articol1 text articol1 text articol1
Legtur intern
Fiier HTML
Ionel SIMION 14

Standardele W3C sunt publicate iniial ca schie (working draft), apoi ca propuneri
(proposed recommendations) i, n final, ca recomandri (recommendations).

Standarde W3C
HTML HyperText Markup Language
XHTML EXtensible HyperText Markup Language
CSS Cascading Style Sheets
XML EXtensible Markup Language
XSL EXtensible Stylesheet Language
DOM Document Object Model
SOAP Simple Object Access Protocol
WSDL Web Services Description Language
RDF Resource Description Framework
OWL Web Ontology Language
SMIL Synchronized Multimedia Integration Language

1.5 Browsere Web

Perntru a accesa World Wide Web i a permite vizualizarea paginii Web se
folosete un program specializat numit browser. n funcie de modul de afiare a
paginilor, exist dou categorii de browsere:
1. browserele grafice pot accesa informaii complexe: text, imagini, audio, video.
Cele mai utilizate sunt Microsoft Internet Explorer, Netscape Navigator, Opera.
2. browsere text - informaia prezentat este de tip text. Un exemplu de browser
text este Lynx.

Microsoft Internet Explorer


Netscape Navigator

Opera

Atunci cnd, la cererea unui browser, serverul Web furnizeaz o informaie, aceasta
este nsoit de un cod MIME (Multimedia Internet Mail Extension) care definete formatul
n care este livrat informaia. Codul MIME este un standard Internet i a fost iniial
dezvoltat pentru a putea transmite prin pota electronic diferite formate de fiiere. De
exemplu:
codul text/plain definete un text neformatat
codul text/html definete un text formatat pentru Web
codul image/gif definete o imagine n format Graphics Interchange Format
codul video/avi definete un format video de tip Audio Video Interleaved
codul application/pdf definete o pagin formatat pentru Adobe Acrobat
n funcie de codul MIME, browserul poate afia informaia primit (text, imagini,
unele fiiere audio etc.). Uneori ns, pentru anumite formate de fiiere, browserul trebuie
s apeleze la diverse programe specializate (aplicaii plug-in sau helper) pentru a reda n
pagin elementele multimedia. Exemple de astfel de aplicaii, care dezvolt
funcionalitatea browserelor sunt: Windows Media Player (pentru redarea sunetului,
animaiei i secvenelor video), RealPlayer (red sunete sau secvene video), Winamp
(player audio), Shockwave Flash (adaug animaie paginilor Web), Quick Time (software
dezvoltat de Apple i extins pentru Windows-PC, pentru integrarea i redarea sunetului,
animaiei i secvenelor video; programul asigur organizarea datelor n funcie de timp)
Microsoft Video for Windows (construit ca o extensie multimedia pentru Windows),
Ionel SIMION 16

Adobe Acrobat Reader (permite citirea documentelor create n formatul pdf Portable
Document Format).
Aplicaiile de tip Helper se folosesc pentru executarea fiierelor audio sau video
sau pentru a afia diverse formate grafice necunoscute de browser. Aceste componente
software sunt mai nti instalate, pentru a executa un fiier ntr-o fereastr separat de
browser. Acest tip de funcionalitate tinde a fi nlocuit prin includerea de noi tehnologii n
browser i nu prin ataarea lor.
Aplicaiile de tip Plug-in sunt similare celor de tip Helper, dar, spre deosebire de
primele, lucreaz direct din interiorul browserelor.

Adobe Acrobat Reader

Controalele ActiveX
cunoscute iniial ca OLE, sunt
componente reutilizabile, aplicaii
miniaturale ce acioneaz ca i
aplicaiile plug-in. Ele nu trebuie
instalate nainte de folosire, putnd fi
descrcate atunci cnd utilizatorul
deschide pagina. Obiectele ActiveX
incluse n pagini au o serie de
atribute i parametri, care
personalizeaz redarea lor n
browser. Acestea sunt evideniate
prin eticheta <object>.
Windows Media Player

Quick Time


Aplicaiile Java denumite
applet, pot executa funcii similare
ca i aplicaiile plug-in sau cu
controalele ActiveX.
Aplicaiie script sunt
limbaje interpretabile, ce se aplic n
combinaie cu controalele ActiveX
sau cu appleturile Java. Exemple de
limbaje script sunt: VBScript,
JavaScript. Browserele recunosc i
trateaz n mod diferit anumite
scripturi, ceea ce duce la
imposibilitatea vizualizrii lor n orice
condiii de afiare. Ele acioneaz deci, n funcie de browserul client.
Exist limbaje script ce acioneaz direct pe server, cum ar fi CGI, PERL i ActiveX
Scripting, care elimin inconvenientul anterior. Acestea pot crea pagini de server active
(ASP- Active Server Pages).

1.6 Editoare Web

Crearea de pagini Web se realizeaz cu programe de editare HTML, care nu sunt
chiar WYSIWIWYG (What You See Is What You Get) i sunt lipsite de capacitile
drag&drop ale programelor obinuite de editare text. Numeroase dintre editoarele de text
actuale sunt capabile s fac o conversie a documentului creat n format propriu ctre un
format HTML. Altele ns, cer folosirea i introducerea manual a marcajelor HTML.

Microsoft Frontpage este un editor HTML care lucreaz att n modul de editare
ct i n cel de explorare, manevrnd trei ferestre: pentru afiarea grafic a obiectelor pe
ecran, pentru afiarea codului HTML i pentru vizualizarea rezultatelor de navigare.

Microsoft Frontpage

Winamp

Ionel SIMION 18

Netscape Composer este un editor HTML care lucreaz direct n modul de
editare i are suport pentru publicare paginilor direct pe serverul Unix al furnizorului de
Internet.

Netscape Composer

Macromedia Dreamweaver este un editor HTML performant ce genereaz
majoritatea etichetelor HTML, n mod lizibil i standard, creaz animaie, dispune de un
controlor de timp i de cadre cheie de animaie.

Macromedia Dreamweaver

Corel WebMaster Suite - este un software de editare HTML, construit din trei
componente: Corel Web Designer pentru editare HTML, Site Designer pentru
gestionarea site-ului i PhotoPaint pentru crearea imaginilor. Permite realizarea de
animaie.
NetObject Fusion - folosete blocuri de poziionare, ca la QuarkXPress i permite
includerea de sunete, animaie etc.
Microsoft Word nu este un editor HTML propriu-zis, dar poate crea cod HTML,
site-uri, eventual i cu frame-uri, prin Web Page Wizard sau prin fiiere ablon.
Vizualizeaz pagina n browsere diferite.


1.7 Concluzii

Informaiile din reeaua World Wide Web sunt stocate n documente numite
pagini Web.
Paginile Web se gsesc n computere numite servere Web.
Mai multe pagini Web alctuiesc un sit Web.
Paginile Web conin, pe lng informaii, referine ctre alte informaii din reea,
numite hiperlegturi.
Computerele care solicit informaii de la serverele Web se numesc clieni Web.
Clienii Web pot vizualiza paginile Web prin intermediul unor programe numite
browsere Web.

Ionel SIMION 20

PARTEA a II-a

Introducere n HTML


Capitolul 2:
PAGINA WEB

2.1 Limbajul HTML

Limbajul pentru scrierea paginilor Web este HTML (HyperText Markup Language).
De fapt, HTML nu este un limbaj de programare propriu-zis ci, mai degrab, un sistem
pentru descrierea modului de afiare a elementelor din pagin i de stabilire a legturilor
cu alte documente. Documentele HTML conin text ASCII i o serie de marcaje specifice
(tags). Browserele interpreteaz un document HTML i l afieaz. Faptul c documentele
HTML sunt documente text prezint dou avantaje principale. Pe de o parte, documentele
text pot fi interpretate pe orice platform: IBM, Macintosh sau Unix. Pe de alt parte, ele
pot fi scrise folosind programe de editare text obinuite de exemplu, Notepad pentru
Windows.

Un document HTML este divizat n blocuri numite elemente. Acestea pot fi
ncadrate n trei seciuni principale. Una dintre ele este seciunea BODY cea care descrie
cum corpul documentului (body) va fi afiat de ctre browser. O alta este seciunea HEAD
cea care conine informaii despre documentul HTML: titlul acestuia, relaiile cu alte
documente HTML etc. O a treia seciune este pentru declaraii i, fr a fi obligatorie, este
plasat la nceputul documentului HTML.
Dezvoltri succesive ale limbajului HTML au condus la apariia DHTML (Dynamic
HyperText Markup Language) i a XHTML (EXtensible HyperText Markup Language),
care vor fi abordate n seciunile urmtoare. XHTML este construit pe baza ultimei versiuni
HTML 4.01.

<html>
<head>
<title>
TITLUL PAGINII
</title>
</head>
<body bgcolor="yellow">
Elemente care apar n pagin
<a href="file://D:/pagina1.htm">
Legtur ctre alt pagin
</a>
</body>
</html>
marcaje

atribute

hiperlegtur

DOCUMENT
HTML

Ionel SIMION 22

2.2 Prima pagin

Exerciiul urmtor prezint o pagin Web simpl, care afieaz textul: Aceasta este
pagina Web.. Pagina este prezentat n cele dou browsere principale: Internet Explorer
i Netscape Navigator.

Exerciiul 2.1 Prima pagin.

Internet Explorer

Netscape Navigator

Cel mai simplu mod de a construi o astfel de pagin Web este urmtorul:
Se creaz un fiier avnd coninutul prezentat mai sus (adic textul " Aceasta
este pagina Web .").
Se salveaz fiierul cu extensia html sau htm (de exemplu "prima-pag.html").
Se ncarc fiierul ntr-un browser, pentru a-l vizualiza.
Observaie. Fiierul nume.htm este acelai lucru cu nume.html (versiunile vechi
de Windows nu puteau citi extensii de fiiere cu mai mult de trei caractere).

1. Se lanseaz n execuie un editor de text (de exemplu, Notepad, n sistemul de
operare Windows ). Se deschide un nou
document i se scrie textul: Aceasta este
pagina Web.
2. Se salveaz fiierul, prin comanda
Save as, care afieaz caseta de dialog Save
as. n cmpul Save in: se alege directorul n
care va fi salvat fiierul (de exemplu, directorul
My Documents). n cmpul File name: se tasteaz numele fiierului, care trebuie s aib
extensia .html sau .htm, de exemplu prima-pag.html sau prima-pag.htm (altfel, va fi
salvat cu extensia .txt i nu va fi recunoscut de browser). n caseta Type se alege All
files iar n caseta Encoding se alege ANSI. Apoi se acioneaz butonul Save.

3. Pentru a
vizualiza pagina creat,
se lanseaz n execuie
browserul preferat i, din
meniul acestuia se
deschide fiierul.
Altfel, de exemplu,
n Windows XP, se
acioneaz Start/ All
programs/ My Recent
Documents. Se
selecteaz din lista
afiat fiierul cutat i
se deschide, de exemplu
tastnd tasta <Enter>.
Datorit extensiei html
sau htm prestabilite, se
lanseaz automat n
execuie browserul
implicit (n cazul din
figur, Microsoft Internet Explorer) i pagina este vizualizat.
Observaie. Documentul "prima-pag.html" este funcional. Totui, stilul n care a
fost creat nu este unul standard. Exerciiul urmtor prezint un document HTML similar ca
efect cu cel de la exerciiul anterior, dar conform cu specificaiile HTML, ntocmite de W3C
(World Wide Web Consortium).

Exerciiul 2.2 Prima pagin n format HTML standard.
Se creaz un fiier avnd coninutul prezentat n caset
Se salveaz fiierul cu extensia html sau htm (de exemplu "prima-pag-
standard.html").
Se ncarc fiierul n browser pentru a-l vizualiza.

<html>
<head>
</head>
<body>
Aceasta este pagina
Web standard.
</body>
</html>

Ionel SIMION 24

Observaii.
Un document HTML conine text i marcaje. 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, legturi, imagini, sunete
etc.).
Un marcaj (tag) este cuprins ntre caracterele "<" i ">", putnd conine:
a) un cuvnt cheie (numele marcajului);
b) o list de forma "atribut = valoare" dac marcajul are atribute. Un
marcaj poate avea mai multe atribute. De exemplu un marcaj cu dou
atribute arat astfel:
<marcaj atribut =valoare atribut2=valoare2 >.
c) caracterul " / " dac marcajul este un marcaj final.
Exemple de marcaje: <html>, </html>, <body text=red bgcolor=yellow> unde
"html" i "body" sunt elemente, "text" i "bgcolor" sunt atribute iar "red" i "yellow" sunt
valori ale atributelor.
Un document HTML standard const dintr-un bloc <html></html> care
include dou sub-blocuri: <head></head> i <body></body>.
n blocul <body></body> este plasat coninutul propriu-zis al paginii (adic
ceea ce va fi afiat n fereastra browserului).
Un marcaj poate fi scris att cu litere mari ct i cu litere mici.
Caracterele "spaiu" i "tab" multiple (succesive) sunt echivalate cu un singur
caracter "spaiu". Caracterele spaiu i tab ce apar ntre marcaje sunt ignorate de
ctre browser.
Astfel, fiierul " prima-pag-standard.html " poate fi scris ca n exemplele de mai
jos, pagina afiat de ctre browser fiind aceeai.

<html> <head> </head> <body> Aceasta este pagina Web standard.</body></html>
<HTml > <hE AD> </HeaD>
<BO dy>
Aceasta este pagina Web standard.
</boDY>
</htMl>

Observaie. Totui, noul standard XHTML (EXtensible HyperText Markup
Language), introduce reguli mai stricte i, ntruct acesta este limbajul care tinde s
nlocuiasc actualul HTML, este util s se respecte regulile sintactice impuse, aa cum vor
fi prezentate mai trziu. Pentru moment, este bine s se rein c, n conformitate cu
standardul XHTML, n interiorul marcajelor nu se folosesc majuscule.

2.3 Titlul paginii Web

Fr a fi obligatoriu, se consider corect dac fiecrui document HTML i se adaug
un titlu. Acest lucru se realizeaz cu ajutorul unui marcaj <title></title> inserat n blocul
<head></head>.
Coninutul blocului <title></title> (n exerciiul urmtor: "Titlul primei pagini") va fi
afiat n bara de titlu a ferestrei browserului. Dac blocul <title></title> lipsete din
documentul HTML, n bara de titlu a ferestrei browserului va fi afiat numele fiierului (n
exerciiul prezentat anterior "prima-pag-standard.html").


Exerciiul 2.3 Titlul paginii Web.
<html>
<head>
<title>
Titlul primei pagini
</title>
</head>
<body>
Aceasta este pagina Web cu
titlu.
</body>
</html>

2.4 Formatarea de baz a textului

Aa cum s-a artat, caracterele "spaiu" i "tab" multiple sunt echivalate cu un
singur caracter "spaiu". De asemenea, trecerea pe o linie nou de text nu este sesizat
de browser, dect dac este marcat corespunztor. Astfel, n Exerciiul urmtor, chiar
dac n codul surs HTML textul este aezat pe trei linii, afiarea n browser va fi pe o
singur linie.

Exerciiul 2.4 Afiarea liniilor de text.
<html>
<head>
<title>Titlul primei pagini
</title>
</head>
<body>
Prima linie.
A doua linie.
A treia linie.
</body>
</html>

Pentru a impune ca, la afiarea n browser s se respecte trecerea pe un rnd nou,
se folosete marcajul <br> (de la break line). Modificnd corespunztor fiierul HTML din
exerciiul anterior, se obine o afiare corect. n codul HTML, acesta este un marcaj
nepereche (nu necesit un marcaj pereche, de nchidere).

Ionel SIMION 26

Exerciiul 2.5 Afiarea corect a unui text pe mai multe rnduri.
<html>
<head>
<title>
Titlul primei pagini
</title>
</head>
<body>
Prima linie. <br>
A doua linie. <br>
A treia linie.
</body></html>

Pentru interpretarea corect a unor caractere ca: "spaiu", "tab", sau trecerea pe un
nou rnd, textul respectiv poate fi inclus ntr-un bloc <pre></pre> (de la preformatted).
n mod implicit, textul cuprins ntr-un bloc <pre></pre> este afiat cu caractere
monospaiate (monospace).

Exerciiul 2.6 Text preformatat.
<html>
<head><title> Text preformatat
</title></head>
<body>
<pre>
ORAR
semestrul I

Disciplina Sala Ora

CAD BN 304 8.00
Web BN 328 10.00
Java BN 216 12.00
Design BN 327 14.00
</pre>
</body></html>

n cadrul unui document HTML se pot insera comentarii, care nu vor fi afiate de
browser. Acestea sunt de multe ori utile pentru a urmri structura documentului i
eventualele actualizri.
Un comentariu are sintaxa: .

2.5 Stabilirea culorilor n pagina Web

Prin folosirea corespunztoare a contrastelor cromatice sunt influenate precizia i
rapiditatea percepiei i memorrii informaiilor, valoarea de semnificaie a imaginilor
prezentate n pagin i atractivitatea paginilor Web.
Culorile se obin prin folosirea unor modele de culoare: RGB, CMY, HSB sau
Grayscale.


Modelul Modalitatea de a exprima componentele
RGB Culoarea este redat n valori de rou (Red), verde (Green), albastru
(Blue), unde fiecare component are valori de la 0 la 255. 0-0-0 este
negru i 255-255-255 este alb.
Hexazecimal Culoarea este redat n valori de rou (Red), verde (Green), albastru
(Blue), unde fiecare component are o valoare hexazecimal de la 00 la
FF. 00-00-00 este negru i FF-FF-FF este alb.
HSB Culoarea este redat n valori de nuan-tonalitate (Hue) cu valori de
la 0 la 360 grade, saturaie (Saturation) i strlucire (Braightness), cu
valori de la 0 la 100%.
CMY Culoarea este redat n valori de azuriu (Cyan), indigo (Magenta),
galben (Yellow), unde fiecare component are o valoare hexazecimal
de la 0 la 255. 0-0-0 este negru i 255-255-255 este alb.
Grayscale Culoarea este redat n procente de negru: 0 este alb iar 100% este
negru. ntre aceste valori exist nuane de gri.

Culori uzuale
Nume Codul RGB
hexazecimal ntreg procentual
Aqua (verde marin) #00FFFF rgb(0,255,255) rgb(0%,100%,100%)
Black (negru) #000000 rgb(0,0,0) rgb(0%,0%,0%)
Blue (albastru) #0000FF rgb(0,0,255) rgb(0%,0%,100%)
Fuchsia (violet deschis) #FF00FF rgb(255,0,255) rgb(100%,0%,100%)
Gray (gri) #808080 rgb(128,128,128) rgb(50%,50%,50%)
Green (verde) #008000 rgb(0,128,0) rgb(0%,50%,0%)
Lime (verde citron) #00FF00 rgb(0,255,0) rgb(0%,100%,0%)
Maroon (maro) #800000 rgb(128,0,0) rgb(50%,0%,0%)
Navy (bleumarin) #000080 rgb(0,0,128) rgb(0%,0%,50%)
Olive (oliv) #808000 rgb(128,128,0) rgb(50%,50%,0%)
Purple (violet) # 800080 rgb(128,0,128) rgb(50%,0,50%)
Silver (argintiu) #C0C0C0 rgb(192,192,192) rgb(75%,75%,75%)
Red (rou) #FF0000 rgb(255,0,0) rgb(100%,0%,0%)
Teal (verde nchis) #008080 rgb(0,128,128) rgb(0%,50%,50%)
White (alb) # FFFFFF rgb(255,255,255) rgb(100%,100%,100%)
Yellow (galben) #FFFF00 rgb(255,255,0) rgb(100%,100%,0%)

Observaie. O culoare este considerat sigur (Web safe) din punct de vedere al
afirii n pagina Web, dac ea apare la fel i n Internet Explorer i n Netscape
Navigator, att pe sistemele de operare Windows, ct i pe sistemele Macintosh, cnd se
lucreaz n modul 256 culori. Se pot folosi ns i culori care nu sunt Web safe. Dac se
alege o culoare ce nu poate fi afiat de ctre un anumit sistem, browserul va ncerca s
genereze o culoare apropiat, prin difuzie sau prin crearea unui fond texturat cu elemente
din cele mai apropiate dou culori.
Ionel SIMION 28

Culorile n pagina Web pot fi utilizate la nivelul textului, pentru fundalul paginii sau la
nivelul ilustraiilor.
Culoarea de fond a unei pagini se precizeaz prin intermediul atributului bgcolor
iar culoarea textului prin intermediul atributului text. Ambele sunt atribute ale marcajului
<body> i se introduc prin sintaxa:
<body bgcolor=culoare text=culoare >
unde valoarea atributului (culoare) se construiete dup modelul precizat mai sus.

Exerciiul 2.7. Culori n pagina Web.
<html>
<head>
<title>Pagina color</title>
</head>
<body bgcolor="yellow"
text="blue">
Textul acestei pagini este albastru
iar fondul este galben.
</body>
</html>

2.6 Setarea marginilor paginii Web

Pentru a poziiona coninutul afiat al paginii Web n raport cu marginile ferestrei
browserului se folosesc atributele leftmargin i topmargin ale elementului <body>. Cele
dou atribute definesc distana dintre marginile din stnga, respectiv, de sus a ferestrei
browserului n raport cu marginea din stnga, respectiv, de sus a coninutului paginii.
Valorile celor dou atribute pot fi exprimate n pixeli sau n procente din limea respectiv
nlimea ferestrei browserului.

Exerciiul 2.8. Setarea marginilor paginii.
<html>
<head>
<title>Pagina cu marginile
setate
</title></head>
<body leftmargin="80"
topmargin="40%">
Pagina prezenta are
marginile <br>
din stanga si de sus <br>
de marimi prestabilite.
</body></html>


2.7 Concluzii. Structura standard a unui document HTML

Structura standard a unui document HTML este:
declaraii <!DOCTYPE HTML
PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4.loose.dtd>
<html> <html>
<head></head> <head>
<title>TITLUL DOCUMENTULUI</title>
</head>
<body></body> <body>
CORPUL DOCUMENTULUI HTML
</body>
</html> <html>

Declaraia DOCTYPE indic browserului versiunea HTML sau XHTML n care este
scris documentul i, implicit, setul de elemente i atribute care pot fi folosite i regulile
privind structura documentului. Dei aceast declaraie nu este obligatorie, este util
versiunilor mai noi de browsere, permindu-le s decid asupra modului de afiare a
paginii. Partea principal a unei astfel de declaraii este atributul DTD (Document Type
Definition), care indic tipul de construcie a documentului. Exist trei modaliti de a
construi un document HTML sau XHTML:
strict un astfel de document HTML arereguli foarte stricte de contrucie, conforme
cu standardele actuale W3C i nu accept elemente formatate dect prin foi de stil;
transitional (loose) este o variant mai flexibil, acceptnd i elemente sau
atribute din versiuni mai vechi, care nc mai sunt n uz;
frameset este o variant asemntoare cu transitional, dar care accept i
elemente sau atribute referitoare la frame-uri.
Elementul html indic browserului faptul c este vorba de un document HTML sau
XHTML.
Elementul head conine informaii despre documentul HTML: titlul, limbajul script
folosit, definiii de stil etc. Acestea sunt introduse prin marcaje precum: <title>, <script>,
<style> etc., incluse n blocul <head> ... </head>.
Elementul body include toate elementele, atributele i informaiile care vor fi afiate
n fereastra browserului.

Elemente i attribute referitoare la aspectul paginii Web.
Elemente
br trecerea pe un rnd nou
pre text preformatat
Atribute
bgcolor stabilete culoarea fondului paginii Web
text stabilete culoarea textului
leftmargin distana dintre marginea din stnga a ferestrei browserului
i marginea din stnga a coninutului paginii
topmargin seteaz distana dintre marginea de sus a ferestrei
browserului i marginea de sus a coninutului paginii
Ionel SIMION 30

Capitolul 3:
PREZENTAREA TEXTULUI N PAGINA WEB

Informaia de tip text coninut ntr-o pagin Web poate fi structurat n diverse
moduri. Elementele care in de aspectul textului n pagin - paragrafe, subtitluri, aliniere
etc. - sunt caracteristici de baz ale unui document HTML.
Desigur, elementele de formatare a textului n paginile Web au evoluat o dat cu
dezvoltarea limbajului HTML. Pentru ultima versiune HTML 4.01 i pentru noul standard
XHTML, multe dintre elementele mai vechi de formatare a texului, care fceau parte din
structura documentului HTML sunt nlocuite prin foi de stil, care au acelai efect. De
asemenea, toate atributele referitoare la elementele de formatare sunt transferate foilor de
stil. n perspectiva evoluiei Web, este bine ca, acele elemente de formatare care nu se
regsesc n noile standarde s fie evitate. Totui, deoarece multe dintre aceste elemente,
ntlnite n construciile DTD Transitional, sunt nc recunoscute de browserele actuale
(uneori, n mod diferit de diferite browsere), unele dintre ele vor fi prezentate n continuare.

3.1 Titluri n pagina Web

Pentru a introduce n text un titlu (header) sau subtitlu de capitol (sunt posibile ase
nivele), se folosesc marcajele pereche: <h1></h1>, <h2></h2>, <h3></h3>,
<h4></h4>, <h5></h5>, <h6></h6>.

Exerciiul 3.1 Titluri.
<html>
<head>
<title>Titluri</title></head>
<body>
<h1>Titlu de marimea 1 </h1>
<h2 align="center">Titlu de
marimea 2 centrat</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>


nlimea i grosimea caracterelor titlului sunt maxime pentru marcajul <h1></h1>
i minime pentru <h6></h6>.
n mod implicit, browserele introduc un spaiu nainte de a afia un titlu. De
asemenea, n mod implicit, textul este aliniat la stnga. Alinierea se poate schimba prin
atributul align, cu valorile: left, right, center, prin sintaxa: <h1 align=valoare>.

3.2 Definirea paragrafelor

Un paragraf este introdus prin marcajul <p>. Aa cum s-a artat, trecerea la o linie
nou se realizeaz cu ajutorul marcajului <br>. Spre deosebire de <br> marcajul <p>
permite alinierea textului cu ajutorul atributului align, avnd ca valoril posibile: "left",
"center" sau "right".
O alt caracteristic a marcajului <p> este introducerea implicit a unui spaiu
nainte de blocul paragraf.
Observaie. nchiderea marcajului <p> printr-un marcaj pereche </p> este
opional. Totui, folosirea marcajului de nchidere are dou avantaje: este n acord cu
noile standarde XHTML i determin introducerea implicit, de ctre browser, a unui
spaiu dup blocul paragraf.

Exerciiul 3.2 Paragrafe.
<html>
<head><title>
Paragraf</title></head><body>
Linia 1<br>
Linia 2 este generat de un
break.
<p>Linia 3 este generata de
un paragraf aliniat, implicit, la
stnga. A fost introdus
automat, de ctre browser, un
spaiu la nceputul paragrafului
i unul la sfrit.
<p align ="right">Paragraf
aliniat la dreapta</p>
<p align=center>Paragraf
aliniat in centru. </p>
</body>
</html>

n mod implicit, lungimea liniei de text afiate este n funcie de limea ferestrei
browserului. Elementul nobr inhib ntreruperea liniei de text, textul cuprins ntre
marcajele <nobr> i </nobr> fiind afiat pe o singur linie, indiferent de limea ferestrei
browserului. ntr-un element nobr se poate insera marcajul <wbr> pentru a sugera
browserului locul n care poate fi rupt rndul, dac acest lucru este absolut necesar.

Ionel SIMION 32

Exerciiul 3.3 Elementele "nobr" i wbr.
<html><head>
<title> Blocul "nobr"</title></head>
<body>
<nobr>
Textul este afiat pe o singura linie.
<wbr> Acum se trece pe linia
urmatoare.
</nobr>
</body>
</html>

Pentru definirea unor paragrafe mai speciale, exist i alte elemente dedicate:
address, blockquote, div.
Paragrafele de tip address sunt folosite pentru adrese i informaii de contact.
Browserele afieaz coninutul cuprins ntre marcatorii <address> i /address> n italic.
Uneori acest element este folosit i pentru inserarea unor note de subsol.
Indentarea unui bloc de text (deplasarea spre dreapta a marginii din stnga, cu o
anumit cantitate) se obine prin folosirea marcajelor <blockquote> i </blockquote>.
Acest tip de paragraf se folosete pentru a introduce citate. Adesea, browserele adaug
un spaiu suplimentar nainte i dup un element blockquote.

Exerciiul 3.4 Paragrafe speciale.
<html>
<head> <title> Paragrafe
speciale</title></head>
<body>
Paul Valery enuna o subtil
antitez:
<blockquote>
Omul este absurd prin aceea c el
caut,<br>
dar e admirabil prin aceea c el
gsete. </blockquote>
Bibliografie
<address>
www.Paul_Valery.biblioteca.pub.ro
</address>
</body></html>

Elementul div este cel mai folosit pentru a marca diviziuni logice ale unui text,
obinndu-se astfel blocuri de text care pot fi formatate. Un bloc div se obine prin folosirea
marcatorilor <div> i </div>, putnd include alte sub-blocuri. Elementele div se pot folosi
pentru a aplica un anumit stil de text unei seciuni a documentului HTML. De exemplu,
pentru a stabili alinierea unui astfel de bloc, se folosete atributul align, cu valorile "left"
"center" "right" (aliniere la stnga, la centru, respectiv la dreapta).


Exerciiul 3.5 Elementul "div".
<html><head>
<title> Elementul div</title></head>
<body>
Aceasta este o linie normala.
Urmatorul bloc este aliniat la dreapta:
<div align="right"> MOTTO:<br>
"Misiunea artei este sa creeze bucurie
i nu se poate crea artistic decat in
echilibru si in pace sufleteasca"<br>
Constantin Brancusi</div>
Urmatorul bloc este aliniat pe centru:
<div align="center"> "Das Sein ist
ewig; denn Gesetze<br> Bewahren die
lebend'gen Schatze,<br> Aus welchen
sich das All geschmuckt,<br>
<i>GOETHE</i> </div>
<address> (Fiinta este vesnica; fiindca
legile apara comorile vietii, din care-si
trage frumusetea Universul.)
</address>
</body></html>

Elementului div i se pot asocia diverse proprieti, printr-un larg set de atribute: id
(pentru asocierea unui nume de identificare a elementului), align (pentru alinierea
coninutului n pagin), style (pentru a indica un stil definit printr-o foaie de stil, care va fi
asociat elementului), class (pentru a specifica o clas de stil), lang (pentru a defini limba
utilizat) i altele. ntruct div este unul dintre elementele de baz pentru definirea foilor
de stil, folosirea acestuia va fi prezentat mai pe larg n seciunea referitoare la limbajul
DHTML (Dynamic HyperText Markup Language).

Exerciiul 3.6 Linii orizontale.
<html><head><title> Linii orizontale
</title></head>
<body><h3 align="center">Linii
orizontale</h3>
Linia urmtoare este implicita (aliniere
stanga, latime 100%, grosime 2, cu
umbra): <hr>
Linia urmtoare este aliniata in centru,
de latime 60%, grosime 5 pixeli,
culoare roie, afisata fara umbra:
<hr align="center" width="60%"
size="5" color="red" noshade>
Linia urmtoare este de latime 100 de
pixeli, aliniata la dreapta, grosime 10
pixeli, cu umbra:
<hr align="right" width="100"
size="12">
</body></html>

Ionel SIMION 34

Pentru a evidenia anumite paragrafe n cadrul paginii Web, acestea sunt plasate
ntre linii orizontale, de diverse culori i dimensiuni. Aceste linii sunt definite prin elementul
hr i sunt introduse cu ajutorul marcajului <hr>. Aspectul grafic liniei se stabilete cu
ajutorul atributelor alementului hr:
align controleaz alinierea liniei orizontale, avnd ca valori posibile: "left",
"center" i "right";
width stabilete lungimea liniei, valorile putnd fi exprimate n pixeli sau n
procente din limea paginii;
size stabilete grosimea liniei, valorile fiind exprimate n pixeli (valoarea
implicit este 2);
noshade care determin afiarea unei linii fr umbr;
color definete culoarea liniei.
Elementul center, introdus de marcajele <center> i </center>, aliniaz la centru
toate elementele coninute de el. n exerciiul urmtor este prezentat efectul unui astfel de
marcaj.

Exerciiul 3.7 Elementul center.
<html><head>
<title> Elementul
center</title></head>
<body>
<center>
<hr width=20%>
<hr width=40%>
<font face="fantasy"
size=6>TEXT CENTRAT
</font><br>
<hr width=70%>
<hr width=100%>
<hr width=70%>
<hr width=40%>
<hr width=20%>
</center>
</body></html>

3.3 Stabilirea fontului de baz

Setarea fontului de baz pentru textul paginii Web se realizeaz cu ajutorul
elementului basefont, introdus prin marcajul <basefont>. Domeniul de valabilitate al
acestui element este din locul n care apare, pn la sfrsitul paginii, sau pn n locul n
care apare alt marcaj <basefont>. n funcie de efectul dorit, marcajul poate fi plasat n
seciunea <head>...</head> sau n seciunea <body> ... </body>.
Atributele elementului basefont sunt: size, color i style, introduse prin sintaxa:
<basefont size=numr color=culoare style=font>
unde:
numr poate avea o valoare ntreag cuprins 1 i 7 (1 pentru fontul cel mai
mic, 7 pentru fontul cel mai mare);
culoare este o culoare, precizat prin nume sau n sintaxa RGB;
font este numele fontului folosit. Se accept ca valoare i o list de fonturi
separate prin virgul, de exemplu: " Arial, serif, monospace".

Atributele implicite sunt: size=3, color="black", style="Times New Roman".
Dac marcajul <basefont> lipsete, atunci textul n pagina Web are atribute implicite sau
atribute specifice browserului utilizat.

Exerciiul 3.8 Setarea textului de baz.
<html>
<head><title> Setarea textului de
baz</title> </head>
<body>
Textul din prima parte a pagini are
atribute implicite (size=3,
color="black", style="Times New
Roman").<br>
<basefont style="Arial"
color="red"size=5>
n a doua parte a paginii textul este
scris cu fontul "Arial", culoarea rosie si
marimea 5.
</body></html>

3.4 Elementul font

Stabilirea fontului pentru un bloc de text se obine cu ajutorul elementului font,
introdus prin marcajul <font>. Caracteristicile fontului se stabilesc prin atributele
elementului font: color, face i size.
1. Atributul color definete culoarea fontului, avnd ca valori numele sau codul
unei culori.
2. Atributul face stabilete tipul sau stilul fontului. Familiile generice de fonturi,
disponibile, de regul, pe toate tipurile de computer sunt: "serif", "sans-serif", "cursive",
"monospace" i "fantasy". Desigur, n msura n care sunt disponibile pe computerul
client, pot fi utilizate orice fonturi.
Pot fi introduse mai multe fonturi, separate prin virgul, de exemplu: <font
face="Arial, Verdana, Helvetica">. n acest caz browserul va utiliza primul font pe care l va
recunoate.
3. Atributul size definete mrimea fontului. Valorile acestui atribut pot fi:
o valoare ntreag cuprins 1 i 7 (1 pentru fontul cel mai mic, 7 pentru
fontul cel mai mare);
+1, +2, etc. sau -1, -2, etc., pentru a mri, sau micora mrimea fontului cu
1, 2, etc. fa de valoarea curent.

Fonturi uzual disponibile
WINDOWS MACINTOSH LINUX / UNIX
Arial Helvetica Helvetica
Courier New Courier Courier
Times New Roman Times Times

Ionel SIMION 36

Exerciiul 3.9 Elementul font.
<html><head>
<title> Elementul font </title></head>
<body>
Aceasta linie este scrisa cu caractere
normale.<br>
<font face="cursive" color="red">Linie
scrisa cu caractere cursive, de culoare
rosie.</font><br>
<font face="fantasy" size="3">Linie scrisa
cu caractere fantasy, de mrime
3.</font><br>
<font face="Arial" size="+2">Linie scrisa
cu caractere Arial, de mrime 5
(3+2).</font><br>
<font face="TimesRoman, sans-serif">
Linie scrisa cu caractere TimesRoman sau
sans-serif si de mrime <br>
<font size=3>V</font><font size=4>A</font>
<font size=5>R</font> <font size=6>I</font>
<font size=7>A</font><font size=6>B</font>
<font size=5>I</font><font size=4>L</font>
<font size=3>A</font>.
</font>
</body></html>

3.5 Caractere evideniate

Pe lng formatarea paragrafelor, se pot stabili caracteristici speciale doar pentru
anumite caractere sau cuvinte. Astfel, acestea pot fi afiate diferit de textul de baz, pentru
a fi evideniate.

Element Marcaje Efect
b <b> </b> caractere aldine
cite < cite > </ cite > citri sau referine
code < code > </ code > caractere monospaiate, tip cod
em <i> </i> caractere evideniate, de obicei nclinate
i <i> </i> caractere nclinate spre dreapta
kbd <kbd> ... </kbd> caractere monospaiate, de tip tastatur
s < s > </ s > caractere tiate cu o linie orizontal
strike <strike> </strike>
strong <strong> </strong> caractere puternic evideniate
sub <sub> </sub> indice inferior
sup <sup> </sup> indice superior
tt <tt> </tt> caractere monospaiate, tip teleprinter
u <u> </u> subliniere
var <var> </var> caractere pentru variabile sau argumente
big <big> </big> caractere mai mari cu o unitate
small <small> </small> caractere mai mari cu o unitate

Modificarea simultan a mai multor proprieti ale textului poate fi realizat prin
imbricarea marcajelor.

Exerciiul 3.10 Caractere evideniate.
<html><head>
<title>Caractere evideniate </title>
</head>
<body>
Aceasta linie este scris cu text
normal.<br>
<b>Linie cu caractere aldine. </b><br>
<i>Linie cu caractere italice.</i> </br>
<i><b>Caractere aldine i italice.
</i></b></br>
Caractere normale, <small> mai mici,
<big> normale din nou,<big> mai mari
<big> i mai mari
</big></big></big></small>.<br>
Aici, <u> underline </u> este subliniat iar
<s> strike</s> tiat.<br>
Expresie cu indici: F(x) = a<sub>1
</sub> x <sup>2</sup> +
a<sub>2</sub> x + a<sub>3</sub><br>
Caracterele <strong> evideniate
</strong>sunt<em> mai uor </em> de
<cite>observat</cite>.<br>
Cod: <code> Function f(x,y) {return x-y;}
</code><br>
<tt>Text de tip tt (teleprinter).</tt>
</body></html>

3.6 Caractere speciale n paginile Web

Caracterele speciale (de exemplu, diacriticele) sunt introduse printr-un cod care
ncepe ntotdeauna cu semnul & (ampersand) i se termin cu ; (punct i virgul). Nu
toate browserele pot afia toate aceste caractere.

Exerciiul 3.11 Caractere speciale.
<html><head>
<title>Caractere speciale</title></head>
<body>
Capitala Romniei este oraşul
Bucureşti.
</body>
</html>

Ionel SIMION 38

CODURI HTML PENTRU UNELE CARACTERE SPECIALE
Caracter Cod Caracter Cod Caracter Cod Caracter Cod
À Ô ê û
Á Õ è ü
Â Ö ë ă
Ã Ø ì €
Ä Ù í £
Å Ú î ¥
Æ Û ï ¢
Ç Ü ð ©
È Ă ñ ®
É Ş ò ™
Ê Ţ ó ±
Ë à ô ¶
Ì á õ §
Í â ö # #
Î ã ÷ $ $
Ï ä ø «
Ð å ù »
Ñ æ ú ÷
Ò ç ş °
Ó é ţ @ @

3.7 Folosirea listelor

Listele permit prezentarea structurat a informaiei n cadrul paginii Web, pentru
evidenierea unor elemente, marcarea unor idei, prezentarea unor proceduri etc. Exist
dou tipuri de liste:

listele neordonate - elementele listei sunt precedate de nite marcatori
(bullets); acestea sunt definite prin elementul ul (unordered list) i introduse ntre
marcajele <ul> i </ul>;
listele ordonate - elementele listei sunt numerotate; acestea sunt definite prin
elementul ol (ordered list) i introduse ntre marcajele <ol> i </ol>.
Pentru ambele tipuri de liste, fiecare articol al listei este introdus prin marcajul <li>
(list item). n mod implicit, lista va fi indentat fa de restul paginii WEB.
Atributul type, folosit pentru ambele elemente, ul i ol, permite alegerea
identificatorului de start al articolelor din list.
Pentru o list neordonat, valorile atributului type sunt:
"circle pentru "O (cerc);
"disc" pentru " (disc plin) - valoarea implicit;
"square" pentru "" (ptrat).

Exerciiul 3.12 Liste neordonate.
<html><head>
<title> List neordonat </title></head>
<body><h3>Lista neordonata</h3>
Module de curs:
<ul>
<li>Modulul Design pagini WEB:
<ul type="circle">
<li>HTML / XHTML
<li>DHTML
<li>JavaScript / VBScript</ul>
<li>Modulul Grafica Asistata:
<ul type=square>
<li>AutoCAD
<li>Solid Edge
<li>Catia</ul>
</ul>
<body>
<html>

Pentru o list ordonat, valorile atributului type" 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.
Elementul ol poate avea un atribut start care s stabileasc valoarea iniial a
secvenei de ordonare i un atribut value care s indice valoarea pentru elementul
respectiv al listei.
Listele, ordonate sau neordonate, pot fi imbricate pe mai multe nivele.

Ionel SIMION 40

Exerciiul 3.13 Liste imbricate.
<html>
<head>
<title> Liste combinate</title></head>
<body><h4> Lista ordonata cu cifre
romane</h4>
<ol type="I">
<li>Lista ordonata cu litere mari incepand cu
valoarea D:
<ol type="A" start="4">
<li>varianta 4;
<li>varianta 5;
<li>varianta 6 </ol>
<li>List ordonat cu elemente configurate
individual:
<ol start="9">
<li value="12">varianta 12;
<li value="18">varianta 18;
<li value="23">varianta 23
</ol>
<li> Lista neordonata:
<ul> <li>articol 1<li>articol 2<li>articol 3</ul>
</ol>
<body>
<html>

Listele pot fi personalizate, prin folosirea pe post de marcatori de articol a unor
imagini alese de utilizator. Astfel, n exerciiul urmtor, o list ordonat are ca marcator o
imagine al crei coninut este apropiat de subiectul prezentat. Introducerea acestei imagini
n pagina Web se realizeaz cu ajutorul elementului img, care va fi fi explicat n seciunile
urmtoare. Imaginea folosit este definit n fiierul s_craft2.gif, situat n directorul curent.

Exerciiul 3.14 Lista personalizat.
<html>
<head>
<title>Lista personalizat
</title>
</head>
<body>
<b>Excursii pentru anul 2020:</b>
<br>
<ul>
<img src="s_craft.gif">Mercur<br>
<img src="s_craft.gif">Venus<br>
<img src="s_craft.gif">Neptun<br>
</ul>
</body>
</html>


Un tip special de list este lista de definiii. Aceasta conine o succesiune de
termeni, fiecare fiind urmat de o definiie. O astfel de list este definit prin elementul dl
(definition list), definit prin marcajele <dl> i </dl>. Un termen al listei este iniiat de
marcajul <dt> (definition term) iar definiia termenului este introdus prin marcajul <dd>
(definition description). Desigur, n interiorul acestor marcaje pot fi folosite elemente de
evideniere suplimentar a caracterelor.

Exerciiul 3.15 List de definiii:
<html>
<head><title> List de definitii</title></head>
<body>
<dl>
<dt><b>Add-on</b>
<dd><i>aplicatie care suplimenteaza functiile
unui program</i>
<dt><b>Banner</b>
<dd><i>afis virtual promotional</i>
<dt><b>Flash</b>
<dd><i>software pentru efecte speciale</i>
</dl>
<body>
<html>

3.8 Concluzii. Elemente i atribute referitoare la formatarea textului

address introduce o adres
blockquote determin indentarea unui bloc de text
div marcaj general pentru delimitare i formatare a unor blocuri de text

Atribute
align definete alinierea textului
nowrap ruperea rndurilor de ctre browser
lang definete limba utilizat
pre permite pstrarea caracteristicilor textului din fiierul surs
hn, n=1,2...6 introduce subtitluri de dimensiuni diferite
p definete un nou paragraf
hr Inserareaz o linie orizontal

Atribute
align controleaz alinierea liniei orizontale
width stabilete lungimea liniei
size stabilete grosimea liniei
noshade determin afiarea unei linii fr umbr
color definete culoarea liniei
center aliniaz la centru toate elementele ncadrate
nobr foreaz afiarea coninutului pe o singur linie
wbr indic locul de rupere a liniei n interiorul unui element nobr
Ionel SIMION 42

basefont stabilete caracteristicile textului de baz
font stabilete caracteristicile textului ncadrat
Atribute size mrimea textului
color culoarea textului
style specific tipul de font
face specific stilul utilizat
b, big, small, i, sub, sup,u, strike, s, cite, em,
strong, code, kbd, tt
caractere evideniate
ul lista neordonata
ol lista ordonata
li element al listei
dl list de definiii
dt termen al listei de definiii
dd definiia termenului dintr-o list de definiii


Capitolul 4
TABELE N PAGINA WEB

4.1 Tabele n pagina Web

Folosirea tabelelor ntr-o pagin Web permite structurarea informaiei pe diverse
criterii i prezentarea eficient a acesteia. Tabelele permit organizarea coninutului unei
pagini WEB ntr-o reea rectangular de seciuni, fiecare seciune avnd propriile opiuni
privind culoarea fondului, culoarea i alinierea textului etc. Tabelele uureaz machetarea
paginii, permind plasarea textului pe coloane, setarea marginilor paginii etc.. Efectul este
o citire i evaluare rapid i corect a coninutului paginii, dar i creterea atractivitii
acesteia.
Un tabel este definit prin elementul table, coninutul acestuia fiind plasat ntre
marcajele corespondente <table> i </table>.
Un tabel este format din linii, definite ca elemente tr (table row). Pentru a insera o
linie de tabel se folosesc marcajele: <tr> i </tr>.
Un rnd este format din mai multe celule ce conin date. O celul de date este
definit de elementul td (table data) i este introdus folosind marcajele <td> i </td>.
Celulele cu semnificaia de cap de tabel sunt definite prin elementul th (table
header). Coninutul acestor celule, definit n interiorul marcajelor <th> i </th>, este afiat
cu caractere aldine i centrat.
Unui tabel i se poate ataa un titlu cu ajutorului elementului caption, definit n
interiorul marcajelor <caption> i </caption>. Elementul caption trebuie plasat n
interiorul marcajelor <table></table>, dar nu n interiorul marcajelor <tr> sau <td>.

Exerciiul 4.1 Tabel format din trei linii i dou coloane.
<html>
<head><title> Tabel </title></head><body>
<table>
<caption><b>Tabel format din trei linii i dou
coloane</b></caption>
<tr><td>celula 11</td>
<td>celula 12</td></tr>
</table>
</body></html>

Elementele care definesc tabelul pot avea o serie de atribute prin care se stabilesc
diverse proprieti ale acestora: limea tabelului, alinierea ntregului tabel sau a
coninutului celuleor, spaiile dintre celulele vecine, chenarul tabelului sau al celulelor etc.
Ionel SIMION 44

4.2 Proprieti ale tabelului

Chenarul unui tabel se poate defini prin atributul border al elementului table. Acest
atribut poate primi ca valoare un numr ntreg i pozitiv (inclusiv 0) i reprezint grosimea
n pixeli a chenarului tabelului.
n absena atributului border, ca i pentru o valoare egal cu "0" a acestuia, tabelul
nu va avea chenar (modul implicit). 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. Cnd are
grosime nenul, chenarul unui tabel are un aspect tridimensional.

Exerciiul 4.2 Tabele cu chenar.
<html><head><title>Chenarul
tabelului</title></head><body>
<h4>Tabele cu chenar</h4>
<table border>
<td>celula 12</td><td>celula 13</td></tr>
</table> <br>
<table border="6">
</table>
</body></html>

Titlul unui tabel poate fi poziionat cu ajutorul atributului align al elementului
caption care poate lua valorile: "bottom" (sub tabel); "top" (deasupra tabelului); "left" (la
stnga tabelului); "right" (la dreapta tabelului).

Exerciiul 4.3 Tabel cu titlu i cap de tabel.
<html><head>
<title> Tabel cu titlu i cap de tabel
</title></head><body>
<table border> <caption align="bottom">
<b>TITLU: Orar semestrul 1</b></caption>
<tr><th>Ore\Zile</th><th>Luni</th>
<th>Marti</th><th>Miercuri</th>
<tr><th>16-18</th><td>CAD</td>
<td>WEB</td><td>FLASH </td></tr>
<tr><th>18-20</th><td>CATIA</td>
<td>LISP</td> <td>JAVA</td></tr>
</table></body></html>

Dimensiunile unui tabel, limea i nlimea, pot fi setate exact prin intermediul a
dou atribute width i respectiv height ale elementului table. Valorile acestor atribute pot
fi indicate prin mrimea n pixeli a dimensiunilor sau prin procente din limea, respectiv
nlimea total a paginii.

Dac dimensiunile precizate de atribute sunt prea mici pentru afiarea corect a
coninutului tabelului, acesta va fi redimensionat automat. Dac dimensiunile precizate de
atribute sunt mai mari dect cele necesare afirii coninutului, atunci acestea vor fi
pstrate.

Exerciiul 4.4 Tabel dimensionat.
<html><head>
<title> Tabel dimensionat</title>
</head><body>
<h4>Un tabel de 70%x100 pixeli</h4>
<table border width="70%"
height="100">
<tr><td>celula 11</td><td>celula
12</td></tr>
<tr><td>celula 21</td><td>celula
22</td></tr>
</table>
</body></html>

Alinierea unui tabel ntr-o pagin WEB se obine prin atributul align al elementului
table, cu urmtoarele valori posibile: "left" (valoarea implicit), "center" i "right". Acest
atribut determin alinierea pe orizontal a ntregului tabel n pagin i nu are efect asupra
celulelor individuale.
Din punct de vedere al textului care, eventual, nconjoar tabelul, dac alinierea
tabelului este pe centru (align="center") atunci textul care urmeaz dup punctul de
inserare al tabelului va fi afiat pe toat limea paginii, imediat sub tabel. Altfel, pentru
celelalte dou variante de aliniere (align="left" sau align="right") textul care urmeaz dup
punctul de inserare al tabelului se va scurge pe lng tabel, pe partea disponibil.

Exerciiul 4.5 Tabel aliniat la dreapta.
<html><head>
<title> Tabel aliniat</title></head>
<body>
<h4>Tabel aliniat la dreapta</h4>
Text inainte de tabel. Text inainte de tabel.
Text inainte de tabel. <br>
<table border align="right">
<tr><td>celula 11</td><td>celula 12</td></tr>
</table>
Text dupa tabel. Text dupa tabel. Text dupa
tabel. Text dupa tabel. Text dupa tabel. Text
dupa tabel. Text dupa tabel.
</body></html>

Distanele dintre dou celule vecine ale tabelului i dintre marginea unei celule i
coninutul ei pot fi stabilite cu ajutorul atributelor cellspacing i, respectiv, cellpadding
ale elementului table. Aceste distane sunt exprimate n pixeli. Valoarea implicit a
atributului cellspacing este 2 iar cea a atributului cellpadding este 1.
Ionel SIMION 46

Exerciiul 4.6 Distane n tabel.
<html>
<head>
<title> Distane n tabel </title></head>
<body>
<h4>Celule mari i distanate </h4>
<table border cellspacing="10"
cellpadding="15">
<tr><td>11</td><td>12</td></tr>
<tr><td>21</td><td>22</td></tr>
</table>
</body>
</html>

4.3 Proprietile celulelor tabelului

Dimensionarea celulelor definite prin elementele td sau th se realizeaz cu
ajutorul a dou atribute ale acestora: width pentru lime i height pentru nlime.
Valorile acestor atribute sunt dimensiunile n pixeli, respectiv procente din limea,
respectiv nlimea tabelului.
Dac dimensiunile precizate de atribute sunt prea mici pentru afiarea corect a
coninutului celulelor, acestea vor fi redimensionate automat. Dac dimensiunile precizate
de atribute sunt mai mari dect cele necesare afirii coninutului, acestea vor fi pstrate.

Exerciiul 4.7 Dimensionarea celulelor
<html>
<head><title> Celule dimensionate </title></head>
<body>
<h4> Tabel cu celule dimensionate</h4>
<table border>
<tr><td width="30%" height="25">11</td>
<td width="40" height="25"> 12</td></tr>
<tr><td width="30%" height="25">21</td>
<td width="40" height="25">22</td></tr>
</table>
</body></html>

Alinierea coninutului unei celule se poate obine prin atributele align i valign,
ataate att elementului tr, pentru a stabili alinierea tuturor celulelor unui rnd, ct i
elementelor td i th, pentru a stabili alinierea ntr-o singur celul.
Atributul align aliniaz coninutul celulei pe orizontal i poate lua valorile: left" (la
stnga), "center" (centrat), right" (la dreapta), "char" (alinierea se face n raport cu un
caracter). Valoarea implicit este "center" (centrat).

Atributul valign aliniaz coninutul celulei pe vertical i poate lua valorile:
"baseline" (la baz), "bottom" (jos), "middle" (la mijloc), "top" (sus). Valoarea implicit
este "middle" (la mijloc).
Caracteristicile textului din fiecare celul pot fi stabilite cu ajutorul elementului font,
ca i la textul obinuit din pagin.

Exerciiul 4.8 Alinierea coninutului celulelor.
<html><head><title> Alinierea coninutului
</title></head>
<body><h4> Alinierea coninutului
celulelor</h4>
<table border width="300" height="180">
<tr><td>centru</td><td>stanga</td>
<td>(implicit)</td></tr>

<tr align="right" valign="top">
<td>linia</td><td>dreapta
</td><td>sus</td></tr>

<tr><td valign="top">sus</td> <td
valign="bottom">jos</td>
<td align="right" valign="bottom">
dreapta jos</td></tr>
</table></body></html>

4.4 Formatarea tabelului

mprirea unui tabel n blocuri care pot fi formatate separat, se obine prin
elementele thead i tfoot, pentru definirea unui bloc ce conine o singur linie, respectiv
elementul tbody, care poate conine mai multe linii interioare ale unui tabel. ntr-un tabel
exist cte un singur element de tipul thead sau tfoot, dar pot exista mai multe elemente
tbody. Liniile care intr n componena acestor elemente sunt plasate n interiorul
marcajelor: <thead></thead>, <tfoot></tfoot>, sau <tbody></tbody>, n
succesiunea:
<table>
<thead><tr> <td></tr></thead>
<tfoot><tr> <td></tr></tfoot>
<tbody><tr> <td></tr></tbody>
</table>

Gruparea unor coloane ale tabelului este posbil prin folosirea elementului
colgroup. Acesta este definit ntre marcajele <colgroup> i </colgroup>. Atributele
acestui element sunt: span (indic numrul de coloane dintr-un grup), width (impune o
lime unic pentru coloanele grupului), align (definete un tip de aliniere, unic pentru
coloanele grupului).
Pentru a obine proprieti diferite ale coloanelor componente ale unui element
colgroup, se utilizeaz elementul col. Atributele elementului col sunt: span (indic o
coloan din grup), width i align (determin limea, respectiv alinierea coloanei
identificate prin "span").
Ionel SIMION 48

Exerciiul 4.9 Gruparea coloanelor
<html>
<head><title> Grupuri de coloane
</title></head>
<body>
<table cellspacing=10>
<colgroup>
<col width="30%" align=left>
<col width="40%" align=center>
<col align=right>
</colgroup><tr>
<td valign=top>Prima coloan. Textul n
prima coloan este aliniat la stnga. </td>
<td valign=middle>
A doua coloan. Textul n a doua coloan
este centrat. </td>
<td valign=bottom>
A treia coloan. Textul n a treia coloan
este aliniat la dreapta. </td>
</table></body>
</html>

Dezactivarea ntreruperii automate a textului, atunci cnd se ajunge la margine sau
la linia de chenar a zonei de text, se obine cu atributul nowrap asociat elementelor td sau
th. Se pot obine astfel celule i coloane de lime orict de mare.

Exerciiul 4.10 Atributul nowrap.
<html>
<head><title> Atributul
"nowrap"</title></head><body>
<h4>Celule de lime mare</h4>
<table border>
<tr><td>Celula 11</td><td>Celula
12</td></tr>
<tr><td nowrap>Celula 21 are lime
mare.</td>
<td>Celula 22</td></tr>
</table></body>
</html>

Culoarea de fond se poate stabili prin atributul bgcolor, cu valorile obinuite
pentru definirea unei culori. Acest atribut poate fi ataat oricruia dintre elementele table,
tr, th, sau td, pentru a avea efect asupra ntregului tabel, asupra unei linii, respectiv
asupra unei celule. Dac n tabel sunt definite mai multe atribute bgcolor, atunci prioritar
este cel referitor la celul, apoi cel referitor la linie i, cel mai puin prioritar, cel referitor la
ntreg tabelul.


Exerciiul 4.11 Culori n tabel.
<html>
<head><title>Culori n tabel </title></head><body>
<table border="3" bgcolor="aqua">
<tr><td>aqua 11</td>
<td bgcolor="yellow">galben 12</td></tr>
<tr bgcolor="lime"><td>verde 21</td>
<td bgcolor="silver">argintiu 22</td></tr>
</table></body>
</html>

Culoarea de fond poate fi nlocuit printr-o imagine, cu ajutorul atributului
background, care primete ca valoare URL-ul imaginii folosite pentru fond.

Culoarea chenarului tabelului poate fi stabilit prin atributul bordercolor asociat
elementului table, care are ca valoare o culoare definit dup regulile obinuite. Pentru
browserul Internet Explorer sunt valabile nc dou atribute: bordercolordark i
bordercolorlight, pentru cele dou pri ale chenarului 3D.

Exerciiul 4.12 Chenar colorat.
<html>
<head>
<title>Chenar colorat</title></head><body>
<b>Chenar colorat</b><br>
<table border="6" cellspacing="10"
bordercolordark="red"
bordercolorlight="yellow">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td> 21</td><td>22</td><td>23</td></tr>
</table>
</body>
</html>

Atributul frame al elementului table permite indicarea prilor din chenarul exterior
al tabelului care vor fi afiate.

Valori ale atributului frame
void fr chenar
border chenar n jurul ntregului tabel
box
above linie de chenar pe latura superioar
below linie de chenar pe latura inferioar
hsides linie de chenar pe laturile superioar i inferioar
lhs linie de chenar pe latura din stnga
vhs linie de chenar pe latura din dreapta
vsides linie de chenar pe laturile din stnga i din dreapta

Ionel SIMION 50

Atributul rules al elementului table permite definirea vizibilitii chenarului pentru
celulele unui tabel.

Valori ale atributului rules
none fr chenar
rows linie de chenar ntre liniile tabelului
cols linie de chenar ntre coloanele tabelului
all chenar complet n jurul celulelor
groups chenar complet n unor grupuri de celule, definite prin elementele
colgroup, thead, tbody, tfoot.

Exerciiul 4.13 Vizibilitatea chenarului.
<html>
<head>
<title> Atributele "frame" i "rules" </title>
</head><body>
<h4> Atributele "frame" i "rules"</h4>
<table border width="200" frame="vsides"
rules="cols" cellspacing=10>
<tr><td>c11</td><td>c12</td><td>c13</td></tr>
<tr><td>c21</td><td>c22</td><td>c23</td></tr>
</table>
</body></html>

Unirea unor celule ale tabelului se poate obine prin extinderea unei celule peste
celulele vecine, cu ajutorul a dou atribute ale elementelor td sau th: atributul colspan
care determin extinderea unei celule peste celulele din dreapta ei i atributul rowspan,
care determin extinderea unei celule peste celulele de sub ea. Valorile celor dou
atribute exprim numrul de celule care se unific.

Exerciiul 4.14 Unirea celulelor unui tabel.
<html>
<head>
<title> Unirea celulelor</title></head><body>
<h4>Celule unite in tabel</h4>
<table border>
<tr><td>c11</td>
<td colspan="3">c12,c13,c14</td></tr>
<tr><td
colspan="3">c21,c22,c23<br>c31,c32,c33</td>
<td rowspan="3"> c24<br>c34<br>c44</td></tr>
<tr><td>c41</td><td>c42</td><td>43</td></tr>
</table>
</body></html>

Celulele vide ale unui tabel se obin dac n interiorul marcajelor <td> i </td> nu
este plasat nici un element. O astfel de celul va introduce n tabel o zon goal, fr a fi
afiat nici mcar chenarul celulei. Pentru a afia totui un chenar pentru celulele vide se
introduce "& nbsp (no break space) sau <br> dup marcajul <td>.

Exerciiul 4.15 Celule vide n tabel.
<html>
<head><title>Tabel cu celule vide.</title>
</head><body>
<table border cellspacing="10">
<caption align="top"><b>Celule vide
</b></caption>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>&nbsp</td><td></td><td><br></td></tr>
<tr><td>&nbsp</td><td></td><br><td></td></tr>
</table>
</body></html>

Prin combinarea adecvat a elementelor i atributelor, se pot construi tabele n
interiorul altor tabele. Aceasta permite o structurare complex a datelor cuprinse n tabel.

Exerciiul 4.16 Tabele n tabele.
<html><head><title> Tabele n tabele </title></head><body>
<table border=5>
<tr><td colspan=3>
<b>Tabele n tabele </b></td></tr>
<tr><td>
<table border=3 cellspacing=8>
<tr><td colspan=2 align=center><h5>Subtabelul1</h5></td></tr>
</table>
<td width=10%></td>
<td><table border=3 cellspacing=8>
<tr><td colspan=2><h5>Subtabelul2</h5></td></tr>
</table></table></body></html>

Ionel SIMION 52

4.5 Concluzii. Elemente i atribute referitoare la tabele

table definete un tabel
tr include o linie de tabel
td definete o celul de pe linia curent
th definete un cap de tabel
caption definete titlul unui tabel
colgroup grupeaz coloane ale tabelului
thead definete un bloc format din prima linie a unui tabel
tfoot definete un bloc format din ultima linie a unui tabel
tbody definete un bloc n interiorul tabelului

atribute ale
tabelului
align definete poziia tabelului n pagin
bgcolor seteaz culoarea de fond
background culoarea de fond este nlocuit printr-o imagine
border definete chenarul tabelului
bordercolor seteaz culoarea chenarului tabelului
cellpadding definete distana dintre marginea celulei i coninutul ei
cellspacing definete distana dintre dou celule vecine
height specific nlimea tabelului
width specific limea tabelului
frame indic prilor din chenarul tabelului care vor fi afiate.
rules indic prilor din chenarul celulelor care vor fi afiate.

atribute ale
celulelor
align definete alinierea textului n cadrul celulei
bgcolor seteaz culoarea de fond a celulei
colspan specific numrul coloanelor mbinate
height specific nlimea celulei
nowrap dezactiveaz ntreruperea textului
rowspan specific numrul liniilor mbinate
valign definete alinierea pe vertical a textului n celul
width specific limea celulei
atribute ale
liniilor de
tabel
align definete alinierea textului n cadrul liniei
bgcolor seteaz culoarea de fond a liniei
valign definete alinierea pe vertical a textului n celul


Capitolul 5
CREAREA HIPERLEGTURILOR

5.1 Definirea hiperlegturilor

Pentru a naviga de la o pagin la alta, sau pentru a efectua salturi controlate n
cadrul aceleiai pagini Web, se folosesc hiperlegturile (hyperlink). De asemenea, prin
intermediul hiperlegturilor, se poate activa un fiier executabil ce poate genera o pagin
HTML sau un anumit coninut media (animaie, imagini, secvene sonore).
Posibilitatea de a lega o pagin Web de alte elemente din Internet este cea mai
inovativ parte a tehnologiei Web. De aceea, hiperlegturile reprezint componente
eseniale ale unei pagini WEB. Ele transform un text obinuit n "hipertext" sau
"hipermedia", ceea ce permite trecerea rapid de la o informaie aflat pe un anumit
server, la alt informaie aflat pe un alt server, oriunde n lume.
O hiperlegtur are dou puncte de capt numite ancore. Punctul de start - ancora
surs - este o zon activ din pagina Web, adic o zon de pe ecran sensibil, de
exemplu, la apsarea butonului mouse-ului (aceste zone pot fi activate i de la tastatur,
sau, mai nou, prin voce). Cellalt capt al hiperlegturii - ancora de destinaie - poate fi o
resurs oarecare de pe Internet (o alt pagin Web, o imagine, un program, un element al
unui document HTML etc.). Activarea unei hiperlegturi este interpretat ca o cerere ctre
un anumit server de pe Internet de a expedia ctre computerul client o anumit resurs,
indicat de legtura respectiv.
Construcia unei hiperlegturi se obine cu ajutorul elementului a (anchor) care
aparine seciunii body a unui document HTML. Ancora este definit ntre marcajele <a> i
</a> asociate elementului a.
Elementul a are mai multe atribute care permit definirea complet a hiperlegturii.
Dintre acestea, cele mai importante sunt atributele href i id sau name. Atributul href
definete destinaia hiperlegturii. Prin atributele id sau name, elementului a i se asociaz
un nume prin care acesta poate fi folosit, la rndul su, ca destinaie a unei alte
hiperlegturi. Alturi de acestea, exist i alte atribute, care vor fi prezentate n
continuare.

Observaie. Exist, de asemenea, un element link care permite stabilirea unor
relaii ntre documentul curent i un alt document de exemplu un document extern n
care sunt definite stilurile. Elementul link este plasat n seciunea head a documentului
HTML. Mai multe detalii privind acest element vor fi prezentate n capitolul referitor la foile
de stil, n cadrul limbajului Dyamic HTML.

5.2 Tipuri de hiperlegturi

Aa cum s-a precizat n primul capitol, o hiperlegtur poate conduce ctre un alt
document (legtur extern), sau ctre o anumit locaie din pagina curent (legtur
Ionel SIMION 54

intern), dar poate, de asemenea, s conduc la activarea unui fiier executabil (legtur
executabil).
Definirea unei legturi interne. Exist situaii n care, ntr-o pagin Web foarte
lung, sunt necesare puncte de reper (bookmark) ctre care s se defineasc salturi
precise, definite prin hiperlegturi.
Un astfel de punct (bookmark) de destinaie a unei hiperlegturi este definit cu
ajutorul atributului name, care primete ca valoare un nume dat reperului bookmark:
<a name="nume_ancora">.
Atributul name poate fi nlocuit prin atributul id, care este un identificator universal,
putnd fi ataat oricrui element al unei pagini Web:
<a id="nume_ancora">.
Pentru a insera o hiperlegtur ctre o astfel de destinaie din aceeai pagin,
elementul a va avea atributul href cu valoarea "# nume_ancora".
<a href="# nume_ancora ">.

Exerciiul 5.1 . Hiperlegturi ntre ancore din acelai document.
<html>
<head>
<title>Legturi interne</title></head>
<body>
<h4> Hiperlegturi ntre ancore din acelai
document </h4>
<a href="#reper2"> Hiperlegatura catre
reperul nr. 2</a><br>
<a name="reper1">reperul nr.1
<br>text<br>text<br>
text<br>text<br>
<a id="reper2"> reperul nr. 2<br>
l5<br>
<a href="#reper1">Hiperlegatura catre
reperul nr. 1</a><br>
</body>
</html>

Definirea unei legturi externe. Pentru a defini o legtur ctre o alt pagin
Web, atributul href primete ca valoare numele fiierului HTML care va nlocui vechea
pagin.
Observaii.
Dac pagina apelat de hiperlegtur se afl n acelai director cu pagina
curent, atunci se indic doar numele fiierului destinaie:
Exemplu: <a href="pagina2.html">.
Dac pagina apelat de hiperlegtur se afl pe acelai disc local, dar n
directoare diferite, atunci pentru a preciza poziia ei n structura de directoare se
poate folosi adresarea relativ.
Exemplu: <a href="../dir1/subdir1/pagina3.html">
Dac pagina apelat de hiperlegtur se afl pe un site particular, apelarea se
face prin indicarea URL-ului respectiv.
Exemplu: <a href="http://www.netscape.com">
Pentru o trimitere ctre o ancor de tip bookmark, definit n alt document (alt
pagin), atributul href primete o valoare de forma "nume_fisier.html#nume_reper".
Exemplu: <a href="pagina4.html#reper1">

Exerciiul 5.2 Apelarea reciproc a dou pagini Web.
<html><head>
<title>pagina1</title></head>
<body><h4>Pagina 1</h4>
<a href="pagina2.html">
Hiperlegatura catre Pagina 2 </a>
</body></html>
<html><head>
<title>pagina2</title></head>
<body><h4>Pagina 2</h4>
Hiperlegatura catre Pagina 1 </a>
</body></html>

Definirea unei legturi executabile. Pentru a deschide fiiere externe, prin
intermediul unei hiperlegturi, atributul href primete valori asociate cu protocolul de
accesare a fiierului.
Pentru a accesa un fiier HTML local (aflat pe computerul client) se utilizeaz
protocolul "file://" (n locul protocolului "http://"), mpreun cu adresa absolut (calea
complet ctre directorul ce conine fiierul plus numele fiierului).
Exemplu:
<a href="file://c:/html/nume.html">Hiperlegtur ctre fiierul nume.html, aflat pe
discul local</a>
Pentru conectarea la un server specializat n transferul de fiiere (server FTP), se
utilizeaz serviciul "ftp://" mpreun cu adresa serverului FTP i localizarea fiierului pe
server.
Exemplu:
<a href="ftp://ftp.go.ro"> Hiperlegtur ctre serverul de fiiere al firmei "Netscape
Communication Corporation"</a>
Pentru a accesa un fiier oarecare, aflat pe un server de pe Internet, atributul href
primete ca valoare URL-ului fiierului destinaie.
Exemplu:
<a href="c:\Program Files\Adobe\Acrobat 5.0\Reader.exe"> Hiperlegtura catre
fisierul "Reader.exe " </a>
Activarea hiperlegturii
deschide o caset de dialog
"File download" care permite:
ncrcarea direct a fiierelor
(cnd acest lucru este posibil),
salvarea pe discul local a
fiierului sau lansarea n
execuie a aplicaiei plug-in
sau helper capabile s
interpreteze corect fiierele de
tipul respectiv.

Ionel SIMION 56

Identificatorul URL poate s conin i instruciuni suplimentare de cutare sau
execuie. De exemplu, pentru a activa un script situat la adresa URL_script, n funcie de
argumentele arg1 i arg2 se folosete hiperlegtura:
<a href="URL_script?arg1+arg2> </a>

5.3 Proprieti ale hiperlegturilor

Definirea unei locaii de referin. Cu ajutorul elementului base situat n
seciunea head a unui document HTML, se poate stabili o locaie pe server, fa de care
se vor exprima adresele resurselor referite de hiperlegturile din pagina Web. Elementul
base va avea atributul href cu valoarea stabilit la URL-ul directorului de baz fa de
care se va face adresarea relativ. Dac elementul base lipsete, atunci valoarea lui
implicit este URL-ul pagini curente.
De exemplu, pentru a defini o hiperlegtur ctre fiierul manuale.html, situat la
adresa: www.pub.ro/user /biblioteca/manuale.html, se poate folosi codul:
<html> <head><base href="www.pub.ro/user"></head>
<body>
<a href="biblioteca/manuale.htm">lista_manuale</a>
</body></html>
Culorile hiperlegturilor. Pentru evidenierea hiperlegturilor n cadrul paginii
Web, acestea sunt afiate prin culori distincte. Culorile hiperlegturilor se stabilesc prin
atribute ale elementului body:
link pentru hiperlegturile nevizitate (nu s-a efectuat nici un click pe ele);
vlink pentru hiperlegturile vizitate (s-a efectuat cel puin un click pe ele);
alink pentru hiperlegturile active (deasupra crora se afl mouse-ul la un moment
dat).
Valorile acestor atribute sunt culori definite dup regulile prezentate anterior.

Exerciiul 5.3 Culorile hiperlegturilor.
<html><head>
<title> Culorile hiperlegturilor </title></head>
<body link="red" vlink="silver"
alink="blue">
<b>Culorile hiperlegaturilor</b>
au fost setate astfel:
<ul><li>rou - nevizitate
<li>argintiu - vizitate
<li>albastru - active </ul>
<a href="doc1.html">hiperlegtura 1 </a><br>
<a href="doc2.html">hiperlegtura 2 </a><br>
<a href="doc3.html">hiperlegtura 3 </a>
</body>
</html>

Pentru a evidenia n plus, de exemplu, hiperlegturile externe de cele interne sau
executabile, se pot folosi elementele specifice de formatare a textului, n combinaie cu
elementul a.


Exerciiul 5.4 Diferenierea hiperlegturilor.
<html><head>
<title> Hiperlegturi difereniate</title>
</head><body>
<b>Hiperlegturi: </b>
<ul>
<li><i><a href="#reper2"> Hiperlegatura
intern</a></i> ctre reperul nr. 1
<li><b><a href=" pagina2.html ">
Hiperlegatura extern </a></b>ctre
pagina2.html
<li><a href="c:\Acrobat 6.0\Reader.exe">
<font size=4> Hiperlegatura
executabil</font></a> pentru fiierul
Reader.exe
<br>.......<br>
<a id="reper2">reperul nr. 1
</body>
</html>

Atributele lang i charset ale elementului a sunt utile n definirea unor hiperlegturi
ctre pagini scrise n diverse limbi strine. De exemplu, o hiperlegtur de forma:
<a href=http://www.jtosh.jp/index.html lang=jpn charset=euc-jp>Index</a>
are ca destinaie o pagin index.html situat pe un server din Japonia. Limba folosit n
aceast pagin este declarat a fi limba japonez, prin atributul lang cu valoarea jpn.
Atributul charset cu valoarea euc-jp indic browserului c, pentru afiarea corect a
caracterelor japoneze, trebuie s foloseasc un set special de codificare a caracterelor.

Titlul unei hiperlegturi. Atributul title asociat elementului a determin afiarea
unei etichete n pagina Web, atunci cnd mouse-ul se afl deasupra unei hiperlegturi. O
astfel de etichet poate furniza informaii suplimentare despre semnificaia hiperlegturii.
Valoarea atributului va fi afiat n cadrul etichetei title. Atributul title poate fi asociat
aproape tuturor elementelor HTML, nu doar elementului a.

Exerciiul 5.5 Elementul "title".
<html>
<head>
<title> Elementul "title"</title>
</head>
<body>
<h4>Elementul "title"</h4>
<a href="fisierul_1.html"
title="Fisierul1">
Hiperlegatura catre fisierul
1</a>
</body>
</html>

Ionel SIMION 58

Utilizarea imaginilor ca ancore de start. Elementul a (anchor) poate conine o
imagine, care astfel va juca rol de zon activ, n pagina Web. Inserarea acesteia se
face prin plasarea elementului specific ntre marcajele <a> i </a>.

Exerciiul 5.6 Utilizarea unei imagini ca zon activ.
<html><head>
<title> Imagine
ancora</title></head><body>
<h4> Utilizarea unei imagini ca zon
activ</h4>

<img src="links.gif"></a>
</body></html>

Fereastra de afiare. n mod implicit, atunci cnd ntr-o pagin Web se activeaz o
hiperlegtur ctre o nou pagina Web, noua pagin o va nlocui pe cea curent n
fereastra browserului. Dac se dorete ca, pentru afiarea paginii noi s fie deschis o alt
fereastr dect cea curent, se poate folosi atributul target al elementului a. Atributul
primete ca valoare un nume (de exemplu "fereastra_noua") pentru fereastra n care se va
ncrca noua pagin.

Valori speciale ale atributului target
_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 machetei de pagin

Exerciiul 5.7 Ferestre multiple.
<html><head><title> Ferestre
multiple </title></head><body>
<h4> Ferestre multiple </h4>
<a href="pagina1.htm"
target="fereastra1"> Incarca
Pagina 1 in Fereastra 1 </a><br>
<a href="pagina2.htm"
target="fereastra2"> Incarca
Pagina 2 in Fereastra 2 </a><br>
</body></html>

Accesarea rapid a hiperlegturii, prin utilizarea unei combinaii de taste se
obine cu ajutorul atributului acceskey al elementului a. Astfel, pentru apelarea unui fiier
help.html prin simpla apsare a tastei h, hiperlegtura se definete astfel:
<a href="help.html" acceskey=h>Help</a>


Utilizarea potei electronice. O hiperlegtur poate determina lansarea n
execuie a aplicaiei curente de expediere a mesajelor electronice (de exemplu, Outlook
Express pe sistemele Windows, Pine pe sistemele Unix etc). Pentru aceasta, se utilizeaz,
n construcia URL-ului, protocolul "mailto:" urmat adresa de e-mail.

Exerciiul 5.8 Expedierea de mesaje electronice.
<html><head>
<title> Expedierea de mesaje electronice</title>
</head>
<body>
<h4>Expedierea de mesaje electronice</h4>
<a href="mailto:gdgi@geom.desc.pub.ro">
<img src="mail31.gif"> <br>
Apasati aici pentru a transmite mesajul</a><br>
</body>
</html>

5.4 Concluzii. Elemente i atribute referitoare hiperlegturi

a insereaz o ancor pentru hiperlegtur

Atribute ale
elementului
a
href definete destinaia hiperlegturii
name asociaz un nume unei ancore
id asociaz un identificator
title determin afiarea unei etichete
target definete o fereatr pentru noua pagin
lang definete limba folosit n documentul destinaie
charset definete codificarea caracterelor speciale
acceskey definete o combinaie de taste pentru hiperlegtur
base seteaz o locaie de referin
Atribute ale
elementului
body
link seteaz culoarea pentru legturile nevizitate
vlink seteaz culoarea pentru legturile vizitate
alink seteaz culoarea pentru legturile active

Ionel SIMION 60

PARTEA a III-a

Elemente avansate HTML


Capitolul 6
MULTIMEDIA N PAGINA WEB

Folosirea elementelor multimedia imagini, sunete, animaie, video - n paginile
Web aduc nu doar un spor de atractivitate acestora ci i posibilitatea unei prezentri
sintetice i sugestive a mesajului. Pe lng avantajele evidente, folosirea acestor
elemente poate conduce i la unele probleme: ncrcarea mai lent a paginii, afiarea
diferit n funcie de browser sau de rezoluia ecranului etc.

6.1 Imagini n pagina Web

Exist dou modaliti principale de memorare a imaginii:
imagine de tip bitmap - n care formatul de memorare este la nivel de bit: definirea
imaginii este echivalent cu definirea strii fiecrui punct - starea unui punct este dat
de culoarea lui.
imagine de tip vectorial obinut prin compunerea unor primitive grafice, la care
formatul de memorare este de tip vectorial, spre exemplu un segment de dreapt este
memorat prin coordonatele punctelor de capt, un cerc prin coordonatele centrului i
dimensiunea razei etc.

Memorarea imaginii
n format bitmap
Imaginea se
memoreaz astfel:
(1,1) - alb
(1,2) - negru
..
(7,7) - negru

Memorarea
imaginii n format
vectorial
Imaginea se
memoreaz astfel:
cerc cu centrul n
(4,4) i raza 3

Imagine bitmap apare
efectul de zimare a liniei.

Imagine vectorial noua rezoluie
disponibil este exploatat la maximum.
Ionel SIMION 62

Memorarea vectorial a imaginii prezint mai multe avantaje n raport cu imaginea
de tip bitmap: consum mai mic de memorie, calitate insensibil la scalri, manevrabilitate
sporit. Pentru exemplificare sunt prezentate efectele scalrii (mririi) imaginii unui
segment pentru cele dou situaii. Se observ c formatul vectorial se adapteaz la noua
gril, folosind la maximum rezoluia disponibil. Imaginea bitmap are o calitate
acceptabil doar la dimensiunile iniiale.
Exist numeroase formate de fiiere care pstreaz imaginea sub forma unei
matrici de puncte, ce pot fi redate direct dintr-un browser pe Web, sau prin instalarea unui
plug-in.

Tipuri de fiiere bitmap
GIF (Graphics
Interchange
Format)
8 bii pentru o culoare, 256 de culori posibile. Este cel mai
indicat mod de stocare pentru imagini cu zone mari de culoare
i tonuri uniforme. Recomandat pentru imagini de fundal,
pictograme, sigle.
JPEG (Joint
Photographic
Experts Group)
24 de bii pentru o culoare, 16.777.216 culori posibile. Se
decomprim mai lent dect GIF, dar pot accepta umbrire
continu. Indicate pentru fotografii scanate sau transparente.
PNG (Portable
Network
Graphics)
nlocuitor pentru formatul GIF, de dimensiune relativ mare. Este
folosit ca format nativ de fiier de la Macromedia Fireworks. Nu
este recunoscut direct de toate browserele.
PCX (PC
Paintbrush)
8 bii pentru o culoare, 256 de culori posibile, de dimensiune
maxim 6400x6400 pixeli. Imaginea este redat pe Web cu
ajutorul unui plug-in sau unui control ActiveX.
TIFF (Tagged Image
File Format)
Folosit pentru stocarea i transferul imaginilor scanate.
Majoritatea programelor pot gestiona acest tip de fiier, dar nu
i browserele, n mod direct, fiind necesare un plug-in sau un
control ActiveX.
BMP (Microsoft
Windows
BitMap)
Formatul tradiional care stocheaz imaginea bitmap, definit de
Microsoft pentru interfaa sa grafic. Imaginea poate fi
monocrom sau n culori pe 24 sau 32 de bii i este redat pe
Web printr-un plug-in sau un control ActiveX.
DIB (Device
Independent
Bitmap)
Poate exista de sine stttor sau ca parte a unui fiier RIFF
(Resource Interchange File Format), care poate conine i alte
tipuri de fiiere: midi, text formatat. Fiierele RIFF DIB (extensia
RDI) pot fi redate pe Web printr-un plug-in sau un control
ActiveX.

Spre deosebire de imaginea matricial, stocarea imaginilor vectoriale este
independent de scara de afiaj, ceea ce permite o modificare a dimensiunilor acestora
fr a deteriora calitatea. Imaginile vectoriale presupun procese de tratare complexe,
realizate de programe specializate: AutoCAD, Corel Draw etc. Formatul nu este
recunoscut de limbajul HTML.

Formatul vectorial poate fi folosit pe Web ca fiier SGV (Scalable Vector Graphics).
SGV este un format pentru descrierea graficii bidmensionale n XML (Extensible Markup
Language). Desenele SGV pot fi interactive i dinamice.

Inserarea unei imagini ntr-un document HTML se obine folosind elementul img,
prin marcajul <img>. Identificarea imaginii inserate se obine prin atributul src (source) al
elementului img. Valoarea acestui atribut este URL-ul imaginii. Dac imaginea se afl n
acelai director cu documentul HTML care face referire la imagine, atunci URL-ul imaginii
este format numai din numele imaginii, inclusiv extensia. Altfel, adresa fiierului trebuie
indicat complet.
Exemple: <img src="nume_imagine.gif">, <img src="c:\dir1\nume_imagine.gif">
Observaie. Ultimele standarde HTML recomand nlocuirea elementului img cu
elementul mai cuprinztor object. Totui, elementul img este foarte folosit nc.

Exerciiul 6.1. Imagine n pagina Web.
<html>
<head>
<title> Imagine n pagina Web</title>
</head><body>
<h4> Imagine n pagina Web</h4>
<img src="aztec.gif">
Text alturi de imagine.
</body></html>

6.2 Atribute ale imaginii

Elemente alternative pentru imagini. Un atribut al elementului img, folosit n mod
uzual, este alt (alternate), care determin asocierea unui text alternativ unei imagini.
Aceasta permite afiarea unor informaii n legtur cu imaginea, n situaii de genul:
browserul este de tip text (Lynx) i nu poate afia imagini;
browserul poate afia un text alternativ n timp ce imaginea se ncarc.
Imaginile, n special cele de nalt rezoluie se ncarc mai greu n fereastra
browserului, mai ales dac legtura dintre utilizator i server este mai lent;
utilizatorul a ales ca opiune afiarea paginii Web fr imagini;
exist browsere care prezint textul alternativ n locul imaginii, pentru
persoanele cu handicap vizual, care folosesc dispozitive de tip speaker;
atunci cnd mouse-ul se afl poziionat pe suprafaa imaginii, pe ecran apare
ntr-un chenar textul ce constituie valoarea atributului alt (n exerciiul de mai jos, va
fi afiat "AUTO").

Observaii.
Opiunile de afiare a imaginilor i a textelor alternative pot fi stabilite astfel:
pentru browserul Internet Explorer: Tools Internet Options Advanced
pentru browserul Netscape Navigator: Edit Preferences Advanced
pentru browserul Opera: File Preferences Multimedia.
Ionel SIMION 64

Nu se pot folosi marcaje HTML n interiorul textului alternativ. Pentru a afia un text
alternativ cu anumite caractere, ntregul element img va fi plasat ntre marcajele de
formatare. Exemplu: <b>< img src="car.gif" alt="AUTO"></b>

Exerciiul 6.2 Elemente alternative pentru imagini.
<html>
<head>
<title> Elemente alternative.</title>
</head>
<body>
<h4> Elemente alternative pentru imagini.
</h4>
<img src="car.gif" alt="AUTO">
</body>
</html>

Atributele lang (language) i dir (direction) ale elementului img pot indica
browserului limba n care este scris textul alternativ i direcia acestuia.
Valoarea atributului lang va fi un format din dou sau trei litere, conform
recomandrilor ISO 639.

Abrevieri ale limbajului (extras din ISO 639)
ara ar arab ita it italian
chi/zho zh chinez jpn ja japonez
eng en englez por pt portughez
fre/fra fr francez rum/ron ro romn
ger/deu de german rus ru rus
gre/ell el greac spa es spaniol

Valoarea atributului dir poate fi: ltr (left-to-right) pentru text afiat de la stnga la
dreapta sau rtl (right-to-left) pentru text afiat de la dreapta la stnga.

Atributul longdesc permite includerea unei descrieri mai detaliate a obiectului,
suplimentare descrierii definite prin atributul alt.

Mrimea unei imagini. n mod implicit, o imagine plasat n pagina Web are
dimensiunile stabilite n momentul cnd a fost creat. Dimensiunile implicite ale imaginii
pot fi modificate prin intermediul atributelor width i height ale elementului img. Valorile
acestor atribute pot fi exprimate n pixeli sau n procente din limea, respectiv nlimea
blocului printe n care se afl poziionat imaginea (n mod implicit, pagina Web). Astfel,
imaginile pot fi scalate, pstrnd proporiile sau cu factori de scalare diferii, pe cele dou
direcii.
Precizarea dimensiunilor spaiului ocupat de o imagine ntr-o pagin Web este o
bun practic, avnd ca efect creterea vitezei de ncrcare a paginii. Aceasta deoarece,
cunoscnd dimensiunile imaginii, browserul rezerv spaiu n pagin i continu afiarea
celorlalte elemente ale paginii. n paralel are loc ncrcarea imaginii.


Exerciiul 6.3 Imagine scalat.
<html>
<head>
<title>Imagine scalat.</title>
</head><body>
<center>
<h4>Imagine cu dimensiuni
prestabilite</h4>
<img src="apa_ani1.gif"
width="90%" height="150">
</body>
</html>

Alinierea unei imagini n cadrul paginii Web se realizeaz prin atributul align al
elementului img.
Pentru o imagine inserat n cadrul unei linii de text, alinierea acesteia se face fa
de textul care precede imaginea, atributul align putnd lua valorile:
"top" - partea de sus a imaginii se aliniaz cu partea de sus a textului ce
precede imaginea;
"middle" - mijlocul imaginii se aliniaz cu linia de baz a textului ce precede
imaginea;
"bottom" - partea de jos a imaginii se aliniaz cu linia de baz a textului.

Exerciiul 6.4 Alinierea unei imagini n linia de text.
<html><head> <title> Alinierea imaginii n linia de
text</title>
</head><body>
<h4>Imagine aliniat</h4></p>
<p><b>Top:</b>
<img border="1" src="b52.gif" align="top"
width="80" height="50"> </p>
<p><b>Middle:</b>
<img border="1" src="b52.gif" align="middle"
width="80" height="50"></p>
<p><b>Bottom: </b>
<img border="1" src="b52.gif" align="bottom"
width="80" height="50"></p>
</body></html>

Ionel SIMION 66

Alinierea unui text mai amplu n raport cu imaginea se obine prin alte dou valori
ale atributului align:
"left" alinierea imaginii la stnga; textul umple partea dreapt a imaginii;
"right" alinierea imaginii la dreapta; textul umple partea stng a imaginii.

Distanele pe orizontal, respectiv pe vertical, dintre imagine i text sunt stabilite
prin atributele hspace i vspace ale elementului img. Valorile acestor atribute sunt
exprimate n pixeli.
Pentru a controla ntreruperea textului i revenirea la marginea ecranului dup
imaginea grafic, se folosete atributul clear al elementului br. Valorile atributului pot fi:
"right" dac se dorete ntreruperea textului i deplasarea pn la depirea
marginii din dreapta a imaginii;
"left" dac se dorete ntreruperea textului i deplasarea pn la depirea
marginii din stnga a imaginii;
"all" dac se dorete ntreruperea textului i deplasarea pn la depirea
ambelor margini ale imaginii.

Exerciiul 6.5 Alinierea textului n raport cu imaginea.
<html><head>
<title> Alinierea textului n jurul unei
imagini</title></head><body>
<h4>Imagine aliniat fa de text</h4>
Text inainte de imagine. Text inainte de
imagine. Text inainte de imagine. <br>
<img src="in_space.gif" align="left"
width="60" height="120" hspace="30"
vspace="30">
Text in dreapta imaginii. Text in dreapta
imaginii. Text in dreapta imaginii. Text in
dreapta imaginii.
<!Acum se impune deplasarea textului
pana la depasirea marginii din dreapta a
imaginii-- !>
<br clear="all">
Text dupa imagine.Text dupa
imagine.Text dupa imagine.
</body></html>

Inserarea unui chenar n jurul imaginii se obine folosind atributul border al
elementului img. Valoarea acestui atribut reprezint grosimea n pixeli a chenarului. n
mod implicit, imaginile sunt afiate fr chenar, cu excepia cazului n care imaginea este
folosit ca ancor de start pentru o hiperlegtur. Prin folosirea foilor de stil, aa cum se
va vedea la prezentarea DHTML (Dynamic HTML), se pot defini i alte proprieti ale
chenarului imaginii - de exemplu, culoarea acestuia.


Exerciiul 6.6 Imagine cu chenar
<html>
<head>
<title>Imagine cu chenar</title>
</head><body>
<h4>Imagine cu chenar</h4>
<img src="aztec.gif" border="6">
Text alturi de imagine.
</body>
</html>

Imaginile animate pot fi incluse n pagina Web dup aceleai reguli. Se folosete
elementul img, mpreun cu atributele sale principale src i alt, dar se pot folosi i alte
atribute ale elementului.
Exemplu: <img src=imagine_animata.gif alt=animatie border=1
width=100>

Folosirea unei imagini ca fundal pentru pagina Web se obine folosind atributul
background al elementului body. Dac acest atribut va avea ca valoare URL-ul imaginii,
imaginea se va multiplica pe orizontal i pe vertical pn va umple ntregul ecran.

Exerciiul 6.7 Pagin cu imagine de fond.
<html><head><title>Imagine de fond
</title></head>
<center>
<body
background="imagine_fond.gif">
<h1>Imagine de fond</h1>
<b>TEXT<br> TEXT<br>
TEXT<br> TEXT<br> TEXT<br>
TEXT<br> TEXT<br> TEXT</b>
</body>
</html>

6.3 Sunete n pagina Web

Sunetele pot fi incluse ntr-o pagin WEB ca muzic de fundal sau ca element al
paginii. n general, sunetele pot fi activate automat, la ncrcarea paginii, n urma unui
eveniment - de exemplu, o aciune a mouse-ului - sau ca pri ale unui fiier multimedia
de exemplu, un clip video. Unele fiiere de sunet pot fi redate direct de ctre browser. De
multe ori ns, este folosit un program suplimentar - plug-in sau aplicaie helper.
Ionel SIMION 68

La includerea unui sunet n pagina Web trebuie avut n vedere dimensiunea
acestuia, care, de cele mai multe ori ncetinete semnificativ ncrcarea documentului.

Tipuri de fiiere sunet pentru WEB
MIDI Musical Instrument
Digital Interface
Sunt suportate direct de browser, fr a fi necesar un
plug-in. Nu sunt fiiere nregistrate, fiind obinute prin
sintetizare pe calculator .
MID
WAV Waveform Extension Sunt suportate direct de numeroase browsere. Se
obin prin nregistrarea unor secvene sonore. Au
dimensiuni relativ mari.
AU Basic AUdio Sunt recunoscute de browsere, fr a fi necesar un
plug-in. Conin sunete de calitate mai slab.
AIF Audio Interchange File
Format
Sunt suportate direct de numeroase browsere. Se
obin prin nregistrarea unor secvene sonore. Au
dimensiuni foarte mari.
AIFF
MP3 Motion Picture Experts
Group Audio
Sunt fiiere comprimate, de dimensiune mic i care
pstreaz calitatea secvenei sonore. Sunetul
comprimat este transmis sub form de iruri de date,
astfel nct utilizatorul nu trebuie s atepte
descrcarea ntregului fiier pentru a asculta secvena
sonor. Pentru a fi redate, trebuie s existe o aplicaie
de tip helper sau plug-in: Window Media Player,
QuickTime, WinAMP, RealPlayer.
MPEG
RA Real Audio Format Au un grad mai mare de compresie dect mp3. Pentru
a fi redate, trebuie s existe aplicaia de tip helper sau
plug-in Real Audio.
RAM
RPM
SWA Shockwave Audio Sunetul poate fi comprimat ca dimensiune ntr-un
raport de pn la 176:1 i este transmis sub form de
iruri. Aceasta face ca redarea s nceap n timp ce
nc se mai ncarc. Sunetul comprimat cu Shockwave
Audio trebuie decodificat prin controlul ActiveX SWA,
inclus n playerul Shockwave.

Includerea unui sunet n pagina Web se poate face prin definirea unei hiperlegturi
ctre fiierul respectiv. Codul HTML poate arta astfel:
<a href=beatles.mid>Ascult!</a>

Sunetul de fond pentru o pagin Web este acceptat de browserul Internet
Explorer. Pentru a obine un astfel de efect, se poate folosi elementul bgsound. Atributele
acestui element sunt:
src , care indic locaia fiierului de sunet;
volume, care regleaz volumul, cu valori de la 0 (maxim) la -1000 (minim);
loop, care specific numrul de repetri ale execuiei fiierului, pn cnd sunetul
de fond nceteaz. Valorile acestui atribut pot fi:
"infinite" pentru ca sunetul de fond s se repete de un numr infinit de ori (pn
la prsirea paginii);
n (un numr natural), pentru ca sunetul s se repete de n ori.
Exemplu: <bgsound src="eminem.mp3" loop="infinite">


6.4 Secvene video n pagina Web

Editoarele HTML permit adugarea de sunete i secvene video sincronizate n
paginile Web, sub form de obiecte i fiiere multimedia, ca applete Java, filme
QuickTime, Flash sau Shockwave. Folosirea secvenelor video n paginile Web ine de
tehnologiile de transformare, algoritmii de comprimare i condiiile de stocare folosite. De
cele mai multe ori, formatele video pot fi redate dac vizitatorii paginii au un plug-in potrivit
pentru formatul de fiier ales.

Tipuri de fiiere video pentru WEB
MPEG Motion Picture
Experts Group
Este norma oofocial de compresie a imaginilor
video. Asigur o nalt calitate i un debit redus de
transfer prin reea.
MPG
AVI Audio Video
Interleaved
Este standardul Windows de integrare a imaginilor i
sunetului. Are o dimensiune mic dar i unele
probleme de sincronizare a sunetului cu imaginea.
MOV Movie Este formatul recunoscut de QuickTime, fiind
necesar acest plug-in pentru redare. Caracteristicile
sunt asemntoare formatului AVI.

Exerciiul 6.8 Hiperlegturi ctre fiiere multimedia.
<html>
<head><title> Hiperlegturi ctre
fiiere multimedia </title></head>
<body>
<h4> Hiperlegturi catre fisiere
de sunet sau videoclip</h4><hr>
<a href="eminem.mp3">
Eminem.mp3</a><br>
<a href="Windows Xp
ding.wav"> sunet
"Ding"</a><br>
<a href=8miles.avi">
videoclip "8miles.avi"</a>
</body></html>

Pentru inserarea unui video-clip direct ntr-o pagin Web, browserul Internet
Explorer folosete elementul img, asociat cu urmtoarele atribute:
dynsrc (dynamic source) are ca valoare URL-ul fiierului video-clip;
loop indic numrul de repetiii ale video-clipului; valorile posibile sunt:
"infinite" pentru ca video-clipul s se repete de un numr infinit de ori; n (un numr
natural), pentru ca video-clipul s se repete de n ori;
start precizeaz momentului n care video-clipul va ncepe; valorile posibile
sunt: "fileopen" (redarea video-clipului va ncepe atunci cnd pagina Web s-a
ncrcat n browser); "mouseover" (redarea video-clipului va ncepe atunci cnd
mouse-ul trece peste imaginea ce reprezint video-clipul);
controls definete controlul playback ce apare n faa imaginii;
Ionel SIMION 70

loopdelay atabilete intervalul de timp (msurat n milisecunde) ntre dou
reluri succesive ale video-clipului.
Atunci cnd video-clipul nu ruleaz, n locul lui este afiat n pagina Web o
imagine, care poate fi: prima imagine din video-clip, o alt imagine sau un text, precizate
prin atributele src, respectiv alt ale elementului img.

Exerciiul 6.9 Video n pagina Web.
<html>
<head><title> Video-
clip</title><head><body>
<h4>Video-clip</h4>
La trecerea mouse-ului peste
imaginea de mai jos, video-clipul
<i>AlienSong.mpg</i> va rula de
trei ori.<br>
<img dynsrc="AlienSong.mpg "
loop="3" start="mouseover"
src="planet.gif" alt="AlienSong"
controls>
</body></html>

6.5 Elementul Object

Noile standarde HTML 4.01 i XHTML recomand, pentru introducerea n pagina
Web a oricrui element multimedia, folosirea elementului unic object, mpreun cu
atributele sale, prin care se pot introduce toate informaiile necesare.
Atunci cnd sunt necesare mai multe informaii, de exemplu privind modul de
desfurare a unui eveniment, elemental object este folosit n asociere cu elementul
param (parameter).
Exemplu:
<object data=8miles.avi
type=video/msvideo
height=150
width=150>
<param name=autostart value=true>
Acest browser nu poate accesa fiiere AVI.
Trebuie instalat un plug-in corespunztor.
</object>

n exerciiul prezentat, browserul folosete atributul data pentru a ncrca fiierul
specificat, atributul type pentru a obine codul MIME (Multimedia Internet Mail Extension)
al elementului i atributele height i width pentru a rezerva spaiul de afiare pentru
elementul multimedia. Valorile specificate n marcajul <param name=autostart
value=true> nu sunt procesate de ctre browser, fiind trecute direct aplicaiei plug-in.
Aceasta va face ca fiierul s fie pornit de ndat ce va fi ncrcat. Mesajul Acest browser
nu poate afia fiiere AVI. Trebuie instalat un plug-in corespunztor (plasat n interiorul
marcajelor de definire a elementului object) va fi afiat n cazul n care browserul nu poate
afia obiectul multimedia.

6.6 Realitatea virtual n pagina Web

Conceptul de realitate virtual (virtual reality) cuprinde simulri tridimensionale ale
unor scene reale sau imaginare. Sistemele pentru realitatea virtual realizeaz o lume
artificial, inducnd utilizatorului senzaia c este parte a cestui mediu i poate interaciona
cu el. n ultimii ani, aceste aplicaii au cunoscut o dezvoltare spectaculoas n domenii
diverse: proiectarea inginereasc, cercetarea spaial, galerii de art on-line, divertisment,
publicitate, nvmnt etc.
Unele dintre elementele de realitate virtual pot fi accesate prin intermediul Web.
Desigur, ca i la celelelte elemente multimedia, descrcarea fiierelor, instalarea i
configurarea unor aplicaii plug-in care s permit accesarea acestor fiiere, necesitatea
unor sisteme performante pot crea unele probleme.
VRML (Virtual Reality Markup Language) este un limbaj i un format de fiiere
standard pentru descrierea de obiecte i scene interactive ce pot fi prezentate pe Web. Ca
i documentele HTML, documentul VRML este un fiier text, ceea ce face s nu fie
dependent de platforma pe care este implementat. Fiierele VRML au extensia .wrl.
Un fiier VRML poate accesat prin introducerea n documentul HTML a unei
hiperlegturi ctre acesta.
Exemplu:
<a href=space.wrl>cltorie spaial</a>
De asemenea, se poate include fiierul direct n documentul HTML, cu ajutorul
elementului object.
Exemplu:
<object data= space.wrl
type=model/vrml
height=150 width=150>
<param name=color value=true>
Acest browser nu poate accesa fiiere VRML.
Trebuie instalat un plug-in corespunztor.
</object>

6.7 Concluzii. Elemente multimedia i atributele lor

img insereaz o imagine

Atribute
ale elementului
img
src identifica imaginea prin URL-ul su
border insereaz un chenar n jurul imaginii
width determin limea imaginii
height determin nlimea imaginii
align definete alinierea unei imagini n cadrul paginii Web
hspace definete spaiul din jurul imaginii, pe orizontal
vspace definete spaiul din jurul imaginii, pe vertical
alt admite ca valoare un text care se va afia n locul
imaginii
background permite folosirea unei imagini ca fond al unei pagini
Web
Atribut al clear ntrerupe textul i se revine la marginea ecranului,
Ionel SIMION 72

elementului br dup imaginea grafic
object definete un element multimedia

Atribute
ale elementului
object
align alinierea obiectului
archive
list de adrese la care sunt stocate resurse privind
obiectul
border dimensiunea chenarului obiectului (n pixeli)
class numele unei clase
classid locaia unei resurse pentru un obiect
codebase locaia unui director de referin
codetype codul MIME pentru codul obiectului
data locaia pentru datele unui obiect
dir direcia textului
height nlimea obiectului
hspace
distana de la un obiect la marginile laterale ale
ferestrei de afiare
id identificator asociat obiectului
lang limba utilizat n textul descriptive al obiectului
name numele obiectului
shapes
un obiect de tip imagine poate fi transformat ntr-o
hart
stanby
mesaj afiat de browser n timp ce se ncarc
obiectul
style informaii despre stil
title etichet asociat obiectului
type codul MIME al obiectului
usemap adresa unei imagini hart
vspace
distana pe vertical de la un obiect la marginile
ferestrei de afiare
width limea obiectului
param definete parametrii asociai elementului object
Atribute
ale elementului
param
id identificator asociat parametrului
name numele parametrului
type codul MIME al parametrului
value valoarea asociat parametrului
valuetype tipul valorii asociate


Capitolul 7
IMAGINE HART

7.1 Funcionarea unei imagini hart

O caracteristic special a paginilor Web const n folosirea imaginilor de tip hart
(Image Map), care permit ca anumite zone active ale unei imagini s fie definite ca
hiperlegturi ctre diferite adrese Web.
Imaginile hart se creaz direct pe calculatorul client (acesta determin
coordonatele i URL-urile zonelor) sau pe server. Pentru ambele tipuri de imagini hart,
trebuie mai nti s fie creat imaginea care va fi utilizat ca hart. Aceasta va fi divizat n
zone active, ce vor face legtura cu diverse URL. Se creaz apoi elementul care va
conine harta, incluznd atribute ale acestuia.

A. Pentru realizarea i folosirea imaginii hart direct pe calculatorul client, se
parcurg urmtoarele etape:
1. Construcia imaginii care va fi folosit ca hart. Aceasta va fi editat ntr-un
program de grafic i va fi inclus n pagina Web la dimensiunea potrivit.
2. Construcia hrii. Definirea hrii se face n interiorul unui bloc special,
introdus prin elementul map i delimitat de marcajele <map> i </map>. Un
atribut obligatoriu al elementului map este name care primete ca valoare numele
hrii - de exemplu "nume_harta". Se poate folosi, de asemenea, atributul
universal id care asociaz hrii un identificator.
3. Divizarea hrii n zone active de realizeaz prin elementul area, prin care se
definesc aceste zone.
4. Includerea imaginii n codul HTML. Se folosete elementul img, cruia i se
asociaz atributele:
atributul src care primete ca valoare URL-ul imaginii hart;
atributul usemap a crui valoare este de forma "#nume_harta" unde
"nume_harta " este numele hrii. 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#nume_harta" sau "www.pub.ro/harti.html/#nume_harta".

B. Pentru construirea imaginii hart pe server se procedeaz astfel:
1. Construcia imaginii care va fi folosit ca hart. La fel ca n cazul anterior,
aceasta va fi realizat ntr-un program de grafic.
2. Construcia hrii. Descrierea zonelor active i relaiile acestora cu diverse
URL se stocheaz nt-un fiier special de extensie .map, ce conine linii de
comand, de forma:
DEFAULT /index.htm
RECT http://www.zona1.pub.ro 3,3,25,15
POLY http://zona2.pub.ro 4,6 20,10 48,20 45,15 35,20
CIRCLE http://zona3.pub.ro 50,30,10
Ionel SIMION 74

Fiierul hart, de exemplu nume_harta.map, este stocat ntr-un director
special al serverului, denumit de asemenea, /map. Acesta nu este un fiier de tip
HTML i trebuie declarat ntr-un fiier de configurare denumit imagemap.conf,
care se gsete n rdcina serverului. Gestiunea imaginii hart de ctre server
este realizat de ctre un program CGI (Common Gateway Interface) instalat
de exemplu, programul imagemap.
3. Funcionarea imaginii hart. Se folosete atributul ismap al elementului
img. La cererea browserului, serverul trimite coordonatele imaginii hart i URL-
urile asociate. Atributul ismap indic browserului c se afl n zona unei imagini
hart. Prin acest atribut, browserul recupereaz coordonatele zonelor imagine i
declaneaz accesul ctre programul cgi-bin/imagemap. Programul imagemap
deschide, la rndul su, fiierul de configurare imagemap.conf i gsete
adresele reale din fiierul nume_harta.map.

7.2 Definirea zonelor active ale hrii

Zonele active ale hrii se definesc, pe calculatorul
client, prin elementul area.
O zon activ va fi definit ntr-un sistem de
coordonate rectangular, avnd originea n colul din stnga-
sus al imaginii utilizate ca hart, axa OX orizontal i
orientat spre dreapta iar axa OY vertical i orientat n
jos. Unitatea de msur este pixelul.
Atribute ale elementului area sunt:
atributul shape determin forma zonei active i poate lua valorile:
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 zonele de tipul precizat
anterior.
atributul href primete ca valoare locaia URL a resursei accesate de
hiperlegtura zonei active respective.
atributul nohref definete o zon care nu este activ din cadrul unei imagini
hart; este echivalent cu absena atributului "href";
atributul alt permite inserarea unui text alternativ al imaginii, pentru situaiile cnd
imaginea nu poate fi afiat;
atributul "accesskey" asociaz o anumit tast unei zone active; hiperlegtura
zonei poate fi activat prin acionarea acestei taste;
atributul title determin afiarea n pagina Web, n cadrul unei etichete, a unui
text descriptiv pentru hiperlegtura zonei active, atunci cnd mouse-ul se afl
deasupra zonei respective;
atributul target primete ca valoare numele unei ferestre a browserului n care va
fi afiat documentul apelat de hiperlegtura zonei respective;
atributul coords determin coordonatele zonei; valorile acestui atribut sunt
indicate n funcie de forma geometric a zonei active.


O zon dreptunghiular este definit prin coordonatele
vrfurilor opuse: stnga-sus (x1, y1) i dreapta-jos (x2,
y2).
Valoarea atributului coords este de forma:
"x1, y1, x2, y2"

Exemplu: coords="100, 100, 200, 200".

O zon circular este definit prin coordonatele
centrului (x,y) i prin raza cercului (R).
"x, y, r

Exemplu: coords="400, 200, 100"

O zon poligonal este definit prin prin succesiunea
de coordonate ale vrfurilor (x1, y1), (x2, y2), (x3, y3)
etc.
"x1, y1, x2, y2, x3, y3, ".
Exemplu:
coords="50,20,150,20,200,70,00,100"

Pentru exerciiul urmtor, se
construiete, ntr-un editor grafic, imaginea
din figura alturat (axele i reeaua de
coordonate nu fac parte din imagine).
Imaginea va avea dimensiunile 320 x 240
pixeli i va fi salvat n directorul curent
sub numele "imagine-harta1.gif".
Pentru a defini trei zone active, ca
n figur, atributului coords va avea
valorile:
zona circular -
coords="80,80,40"
zona dreptunghiular
coords="160,160,240,200"
zona poligonal
coords="160,40,240,40,280,80,280,120,200,120"

7.3 Imaginea hart n pagina Web

n exerciiul urmtor, imaginea "imagine-harta1.gif" creat anterior este folosit ca
hart, cu numele prima_harta. Zonele active sunt definite n interiorul marcajelor <map>
i </map>

Ionel SIMION 76

Exerciiul 7.1 Imagine hart.
<html><head>
<title>Imagine hart</title><head><body>
<h4> Imagine hart</h4>
<img src="imagine-harta1.gif"
usemap="#prima_harta" width="320"
height="240">
<map name="prima_harta">
<area shape="circle" coords="80,80,40"
href="pagina1.html" " title="Catre pagina 1">
<area shape="poly" coords="160,40,240,40,
280,80,280,120,200,120"
href="pagina2.html title="Catre pagina 2">
<area shape="rect"
coords="160,160,240,200"
href="pagina3.html title="Catre pagina 3">
</map>
</body></html>

Zonele active suprapuse din cadrul unei imagini hart sunt tratate diferit de ctre
browser. n cazul n care, pe o imagine hart, dou sau mai multe zone active se
suprapun, atunci are prioritate prima care apare definit n cadrul elementului map.
n exerciiul urmtor dunt declarate, n interiorul marcajului <map></map>, trei
zone, dou circulare concentrice i una format din restul imaginii, cu proprieti diferite.
Imaginea hart are dimensiunile 240x200 pixeli. Zona circular interioar, de raz 40,
activeaz o hiperlegtur ctre documentul pagina1.html. Zona dintre cele dou cercuri
concentrice de raze 40 i 80 este inactiv. Zona din exteriorul cercului mare, de raz 80
activeaz o hiperlegtur ctre documentul pagina2.html.

Exerciiul 7.2 Zone active suprapuse.
<html><head>
<title> Zone active suprapuse</title>
<head> <body>
<h4> Zone active suprapuse</h4>
<img src="imagine-harta2.gif"
usemap="#harta2" width="240"
height="200">
<map name="harta2">
href="pagina1.html" title="Catre pagina 1">
nohref>
<area shape="default" href="pagina2.html"
title="Catre pagina 2">
</map>
</body></html>


7.4 Concluzii. Elemente i atribute referitoare la imagini hart

map definete o imagine hart pe serverul client
Atribut al
elementului
map
name primete ca valoare numele hrii
id asociaz un identificator pentru hart
title permite inserarea unei etichete
area definete o zon activ a hrii
Atribute ale
elementului
area
shape determin tipul zonei active
coords determin coordonatele zonei
href definete URL-ul apelat de hiperlegtura zonei respective
target definete fereastra browserului n care va fi afiat documentul
apelat
alt permite inserarea unui text alternativ
accesskey asociaz o anumit tast unei zone active;
title permite inserarea unei etichete
img definete imaginea folosit ca hart
Atribute ale
elementului
img
src definete URL-ul imaginii folosite ca hart
usemap introduce numele hrii imagine
ismap introduce o hart de imagine definit pe server

Ionel SIMION 78

Capitolul 8
MACHETAREA PAGINII WEB PRIN FERESTRE

8.1 Ferestre n pagina Web

Folosirea frame-urilor permite divizarea ferestrei browserului n mai multe sub-
ferestre, n care pot fi ncrcate documente HTML diferite. Fiecare fereastr conine o
referin proprie la un URL document, reacioneaz separat i afieaz n browser propriul
cod HTML.
Aceast tehnic de concepere a paginilor HTML este realizat cu ajutorul
elementelor: frameset, frame, iframe, noframe.
Exist dou categorii de ferestre: IFRAME (Inline Frame) i FRAME. Diferena
dintre cele dou tipuri de ferestre const modul n care sunt stocate, afiate, programate i
prezentate. IFRAME se comport ca un bloc de elemente ntr-o pagin, iar FRAME se
comport dup propriile reguli de aezare i ocup ntreaga suprafa a unei pagini.
Structura unui document cu ferestre este diferit de cea a unui document HTML
normal. Elementul body este nlocuit de elementul frameset, plasat ntre marcajele
<frameset> i </frameset> n interiorul acestor marcaje, fiecare fereastr este definit ca
element frame, ntre marcajele <frame> i </frame>, cu atribute corespunztoare ce
descriu geometria acestuia i URL-ul documentelor asociate.
n cazul n care browserul nu poate afia ferestrele, se va afia un text alternativ,
definit prin elementul noframe i inclus ntre marcajele <noframe> i </noframe> (dac
ferestrele funcioneaz, textul nu va fi afiat).

Structura unui document cu ferestre
<html>
<head> ... </head>
<frameset>
<frame> definire frame 1 </frame>
<frame> definire frame 2 </frame>
...................................
<frame> definire frame n </frame>
</frameset>
<noframe> text alternativ </noframe>
</html>

Definirea ferestrelor se face din aproape n aproape, prin mprirea ferestrei iniiale
n coloane i linii, folosind atributele cols i rows ale elementului frameset. Valoarea
acestor atribute este o list de valori (pentru fiecare fereastr cte o valoare), separate
prin virgul, care descriu modul n care se face divizarea. Valorile pot fi exprimate n pixeli
sau procente din dimensiunea ferestrei de afiare. Se poate folosi caracterul universal *
pentru a indica spaiul rmas disponibil. ("n*" nseamn n pri din spaiul rmas posibil;

dac mai multe elemente din list sunt indicate prin "*", atunci spaiul rmas disponibil
pentru ele se va mpri n mod egal).
Exemplu: " 200, 3*, 40%, 2* " nseamn o mprire n 4 sub-ferestre, prima fiind de
200 de pixeli, a treia fiind 40% din spaiul total disponibil, a doua i a patra ocupnd restul
de spaiu rmas disponibil, care se mparte n cinci pri egale: trei pri pentru a doua
fereastr i dou pri pentru a patra fereastr.

Pentru definirea aspectului i funcionalitii fiecrul ferestre, se folosesc atributele
elementului frame.
Atributul principal i obligatoriu este al elementului frame este src care are ca
valoare URL-ul documentului HTML ce va fi ncrcat n acea fereastr.

Exerciiul 8.1. Pagin Web cu dou ferestre orizontale.
<html>
<head><title> Pagin Web cu
dou ferestre orizontale </title>
</head>

<frameset rows="30%,*">
<frame src="isgg.html">
<frame src="gdgi.html">
</frameset>
</html>

Exerciiul 8.2 Pagin Web cu patru ferestre egale.
<html>
<head>
<title> 4 ferestre egale </title>
</head>
<frameset rows="*,*" cols="*,*">
<frame src="img2.gif">
<frame src="pagina2.html">
</frameset>
</html>

Ionel SIMION 80

n exerciiul urmtor este prezentat o modalitate de a defini configuraia
subferestrelor cu ajutorul unui fiier extern. Fereastra browserului este mprit n dou
linii, a doua linie avnd dou coloane. Coninutul celei de-a doua linii este definit prin
fiierul linia_2.htm, care este apelat prin marcajul <frame src="linia_2.htm">. Aceasta
este o cale eficient pentru a defini structuri complexe de tip frame.

Exerciiul 8.3 Ferestre definite prin fiiere externe.
<html><head><title> Ferestre definite prin
fiiere externe </title></head>
<frameset rows="40%,*">

<frame src="linia_2.html">
</frameset></html>

<html><head>
<title>Fisierul linia_2.html </title></head>

<frameset cols="*,*">
</frameset></html>

8.2 Atribute ale ferestrelor

Anumite propieti ale ferestrelor pot fi aplicate pentru o fereastr individual sau
pentru ntregul set de ferestre, cu ajutorul atributelor specifice.
Numele unei ferestre poate fi stabilit prin atributul name sau prin identificatorul
universal id. Prin atribuirea unui nume, elementul frame poate fi apelat n diverse situaii
de exemplu, atunci cnd se dorete ca documentul apelat de o hiperlegtur s fie afiat
ntr-o anumit fereastr.
Chenarul ferestrelor
Fiecare fereastr poate fi ncadrat ntr-un chenar, cu anumite proprieti.
Culoarea chenarului este stabilit prin atributul bordercolor, avnd ca valoare
o culoare definit prin metodele cunoscute.
Atributul bordercolor poate fi ataat elementului frame, pentru a defini culoarea
chenarului pentru o fereastr individual sau elementului frameset, pentru a aciona
asupra tuturor chenarelor ferestrelor incluse.
Dimensionarea chenarului se obine cu ajutorul atributului border al
elementului frameset. Valoarea atributului indic, n pixeli, limea chenarului
tuturor ferestrelor incluse. Valoarea implicit a atributului border este de 5 pixeli.
Valoarea de "0" pixeli va defini ferestre fr chenar.
Chenare invizibile se pot obine prin atributul frameborder setat la valoarea
"no" (valorile posibile sunt: "yes" echivalent cu "1" i "no" echivalent cu "0")
n mod implicit, chenarul unei ferestre este vizibil i are un aspect tridimensional.
Atributul frameborder poate fi asociat att elementului frame ct i elementului frameset.
n exerciiul urmtor, chenarul pentru fereastra din stnga este mai lat i colorat n
rou iar chenarele pentru cele dou ferestre din dreapta au fost dezactivate.


Exerciiul 8.4 Chenarul ferestrelor.
<html><head>
<title> Chenarul ferestrelor </title></head>
<frameset cols="45%,*" border="12"
bordercolor="red" >
<frame src="img3.gif">
<frameset rows="*,*" frameborder="no">
</frameset>
</frameset>
</html>

Bara de defilare
Pentru a aduga unei ferestre o bar de defilare, care permite navigarea n
interiorul documentului, se folosete atributul scrolling al elementului frame. Valorile
posibile sunt: "yes" (barele de defilare sunt adugate ntotdeauna), "no" (barele de
defilare nu sunt afiate) "auto" (barele de defilare sunt vizibile atunci cnd este necesar -
mrimea ferestrei nu cuprinde ntreg documentul).
Redimensionarea ferestrei de ctre utilizator, cu ajutorul mouse-ului, este posibil
n mod implicit. Pentru a anula aceast posibilitate, se folosete atributul noresize al
elementului frame.
Distanele de la marginile unei ferestre la coninutul acesteia pot fi impuse prin
atributele marginheight (distana pe vertical) i marginwidth (distana pe orizontal) ale
elementului frame. Valorile posibile ale acestor atribute sunt exprimate n pixeli sau
procente din nlimea, respectiv din limea ferestrei iniiale.

Exerciiul 8.5 Bara de defilare.
<html><head>
<title> Bara de defilare
</title></head>
<frameset cols="*,*,*">
<frame src="img3.gif"
scrolling="yes" noresize>
scrolling="no" marginheight="80"
noresize>
scrolling="auto" noresize>
</frameset>
</frameset>
</html>

8.3 Elementul iframe

Elementul iframe permite inserarea unor ferestre inline. Ferestrele iframe difer
de cele normale prin aceea c ele pot fi manipulate independent, n interiorul unei pagini
Web. O astfel de fereastr poate fi plasat n interiorul unui bloc de text. Elementul iframe
poate avea aceleai atribute ca i elementul frame. n plus, pot fi folosite atributele width
Ionel SIMION 82

(pentru limea ferestrei), height (pentru nlimea ferestrei), align (pentru alinierea
ferestrei n cadrul ferestrei browserului), hspace (pentru distana de la fereastr la
marginile laterale ale ferestrei browserului), vspace (pentru distana de la fereastr la
marginile superioar i inferioar ale ferestrei browserului).

Exerciiul 8.6 Ferestre inline.
<html><head>
<title> Ferestre
inline</title></head>
Urmeaz o fereastr inline
<br><br>
<iframe src=pagina1.html
align="center" marginwidth="5"
frameborder="1" bordercolor="red"
width="180" height="120"
scrolling="yes"> </iframe>
<noframes> Aici ar trebui s se vad
pagina1.html </noframes>
</html>

8.4 Concluzii. Elemente i atribute referitoare la ferestre

frameset introduce un set de ferestre

Atribute
cols mparte o ferestr n sub-ferestre de tip "coloan"
rows mparte o ferestr n sub-ferestre de tip "linie"
bordercolor stabilete culoarea chenarului tuturor ferestrelor incluse
border stabilete limea chenarului tuturor ferestrelor incluse
frameborder stabilete afiarea chenarului tuturor ferestrelor incluse
frame definete o fereastr

Atribute
src primete ca valoare URL-ul documentului care va fi ncrcat
n fereastr
bordercolor seteaz culoarea chenarului unei ferestre
frameborder seteaz afiarea chenarului unei ferestre
scrolling adaug unei ferestre o bar de defilare
noresize inhib posibilitatea de a redimensiona fereastra
marginheight distana dintre coninutul unei ferestre i marginile verticale
marginwidth distana dintre coninutul unei ferestre i marginile orizontale
name stabilete numele unei ferestre
iframe definete o fereastr inline
noframe afieaz un text explicativ n locul ferestrelor

Capitolul 9
FORMULARE

9.1 Formulare n pagina Web

Prin includerea unui formular ntr-o pagin Web se pot solicita utilizatorului diverse
rspunsuri, sub form de text sau prin alegerea unor opiuni. Datele completate de ctre
utilizator sunt expediate unui server. O aplicaie specializat de pe server analizeaz
formularul completat i stocheaz datele ntr-o baz de date. Dac este necesar, serverul
expediaz un rspuns utilizatorului. Se stabilete astfel o legtur direct ntre utilizator i
server, obinndu-se o pagin Web interactiv.
Un formular poate conine butoane, casete de selecie, liste derulante, cmpuri de
editare etc. ntr-o pagin Web pot fi create oricte formulare.
Formularul face parte din corpul unui document HTML i este definit prin elementul
form, cuprins ntre marcajele <form> i </form>. Elementele form nu pot fi imbricate.
Atributele name sau id asociate elementului form permite recunoaterea acestuia
de ctre diverse programe de prelucrare.
Elementul form poate avea un atribut target care primete ca valoare numele unei
ferestre a browserului n care va fi ncrcat rspunsul trimis de serverul Web la expedierea
unui formular. Oricrui element component al unui formular i se poate asocia atributul
disabled care permite dezactivarea respectivului element. Pentru determina tipul MIME
(Multimedia Internet Mail Extension) folosit pentru transmiterea formularului, se folosete
atributul enctype cu valoarea implicit application/x-www-form-urlencoded.
Procesarea informaiilor transmise printr-un formular este determinat de atributul
action al elementului form. Acesta precizeaz ce se va ntmpla cu datele, atunci cnd
acestea ajung pe server. Valoarea atributului action poate fi:
URL-ul unui script aflat pe un server Web, care primete datele formularului,
efectueaz o prelucrare a lor i expediaz ctre utilizator un rspuns.
Exemplu: <form action="htttp://www.pub.ro/cgi-bin/nume_script.cgi">
o adres de e-mail la care sunt expediate datele formularului. n acest caz, nu
are loc o prelucrare automat a datelor din formular, procesarea acestora
realizndu-se la destinaie.
Exemplu: <form action="mailto:isimion@geom.desc.pub.ro">

Metoda folosit de browser pentru expedierea datelor formularului este definit
prin atributul method al elementului form. Cele dou valori posibile ale atributului sunt:
"get" (valoarea implicit). n acest caz, datele din formular sunt adugate la
URL-ul indicat de atributul action. ntre seturile de date este plasat caracterul "&".
Sintaxa este:
URL? nume_camp1=valoare_camp1& nume_camp2=valoare_camp2
Nu sunt permise cantiti de date mai mari de un 1 KO.
"post". n acest caz datele sunt expediate separat. Sunt permise cantiti mai
mari de date.
Ionel SIMION 84

9.2 Construcia formularului

Diferitele cmpuri ale formularului pot fi considerate zone active care constituie
interfaa cu utilizatorul. Majoritatea cmpurilor unui formular sunt definite prin elementul
input. Pentru a preciza tipul cmpului se folosete atributul type al elementului input.

La expedierea formularului se transmit ctre server perechi de forma
"nume=valoare" care cuprind numele elementului unui formular i valoarea acestui
element. Aceste date sunt definite prin atributele name i value ale elementului input.
Observaie. Atributul value permite atribuirea unei valori iniiale unui cmp al
formularului. Aceast valoare iniial poate fi ulterior modificat de utilizator.

Cmpul de tip text este o zon care poate fi completat cu text de ctre utilizator.
Un asemenea cmp este introdus prin valoarea "text" a atributului type.
n lipsa atributului type, cmpul introdus de elementul input va fi considerat implicit
ca fiind de tip "text". Atributul readonly asociat unui cmp de editare interzice modificarea
coninutului.
n exerciiul urmtor, prin completarea csuei (de exemplu: Ionescu Mihai) i
expedierea formularului destinatarul va primi urmtorul coninut:
"numele=Ionescu+Mihai" (caracterul "spaiu" este reprezentat de "+").

Exerciiul 9.1 Formular cu un cmp de tip text.
<html><head>
<title> Cmp de tip text</title></head>
<body>
<h4>Cmp de editare</h4>
<form action=mailto:gdgi@geom.desc.pub.ro
method="post">
Numele:
<input type="text" name="numele"
value="Numele i prenumele">
</form></body></html>

Lungimea cmpului de tip text poate fi impus prin atributele:
size specific limea cmpului; dac textul introdus depete limea impus,
se execut automat o derulare a coninutului cmpului, pentru a permite vizualizarea
Valori ale atributului type
button buton de execuie
checkbox casete de validare
file fiier
hidden cmp ascuns
image imagine care nlocuiete un buton
password parol
radio buton radio
reset buton de resetare
submit buton de expediere
text cmp de editare

maxlength specific numrul maxim de caractere admise de cmpul de text;
caracterele introduse peste acest numr maxim sunt ignorate.

Exerciiul 9.2 Lungimea cmpului de tip text.
<html><head>
<title> Lungimea cmpului de tip text</title>
</title></head> <body>
<h4>Cmp de tip text limitat</h4>
Limea cmpului este de 12 caractere.<br>
Numrul maxim de caractere este 25.<br>
<form method="post"
action="mailto:gdgi@geom.desc.pub.ro">
value="Numele i prenumele" size="12"
maxlength="25"><br>

Exerciiul 9.3 Cmp de text multilinie.
<html><head><title> Cmp de text multilinie
<h4> Cmp de text multilinie </h4>
<form method="post"
<textarea name="text_multilinie" cols="20"
rows="4" wrap="off">
Prima linie de text.
Adoua linie de text.
A treia linie de text.
A patra linie de text.
Alte linii.
</textarea> </form></body></html>

Cmpul de text multilinie poate fi introdus prin elementul textarea, n locul
elementului input. Atributele acestui element sunt:
name sau id - permite asocierea unui nume, respectiv a unui identificator
pentru cmpul de text;
rows - specific numrul de linii care vor fi afiate simultan;
cols - specific numrul de caractere care vor fi afiate ntr-o linie;
wrap - determin comportamentul cmpului fa de sfritul de linie. Valorile
acestui atribut pot fi:
"off"

determin ntreruperea cuvintelor la marginea dreapt a cmpului doar prin
decizia celui care completeaz formularul, prin acionarea tastei enter;
caracterul de sfrit de linie este inclus n textul transmis serverului odat cu
formularul.
"hard"

impune ruperea automat a cuvintelor la marginea dreapt a cmpului;
caracterul de sfrit de linie este inclus n textul transmis serverului.
soft"

impune ruperea cuvintelor la marginea dreapt a editorului; caracterul de
sfrit de linie nu este inclus n textul transmis serverului.

Ionel SIMION 86

Butonul de expediere a datelor este un element aproape nelipsit dintr-un formular.
Un astfel de buton este definit prin atribuirea valorii "submit" pentru atributul type al
elementului input. Butoanelor de expediere li se pot asocia un nume (prin atributul name)
i o valoare (prin atributul value) care va fi afiat pe ecran, deasupra butonului. n lipsa
atributului value, pe butonul afiat va fi scris "Submit Query" . 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.

Exerciiul 9.4 Butoane de expediere.
<html><head><title> Butoane de expediere a
datelor</title> </head> <body>
<h4>Folosirea butoanelor de expediere</h4>
<form action=mailto:gdgi@geom.desc.pub.ro
method="post">
Numele: <input type="text"
name="numele"><br>
<input type="submit"> <br>
Facultatea absolvit: <input type="text"
name="facultatea"><br>
<input type="submit" name="facultatea"
value="Trimite dac vrei"> <br>
</form>
</body></html>

Butonul de resetare permite readucerea cmpurilor din formular la starea iniial,
nainte de a ncepe a fi completate. Introducerea unui buton de resetare se obine prin
atribuirea valorii "reset" pentru atributul type al elementului input. i acest tip de buton
poate primi un nume i o valoare care va fi afiat. n lipsa atributului value, pe butonul
afiat va fi scris "Reset"

Exerciiul 9.5 Introducerea unui buton de resetare.
<html><head>
<title> Buton Reset </title></head><body>
<h4>Folosirea butonului de resetare</h4>
<form method="post"
Numele: <input type="text" name="nume"
value="Tastai numele aici"><br>
Prenumele: <input type="text"
name="prenume" value="Tastai prenumele
aici"> <br>
<input type="reset" value="terge">
<input type="submit" value="Trimite">
</form> </body></html>

Cmpul de tip parol poate fi introdus prin atribuirea valorii "passwd" pentru
atributul type al elementului input. Un astfel de cmp difer de un cmp de tip text
obinuit prin faptul c, n cmpul de tip "passwd" caracterele introduse nu apar n clar, ci
sunt nlocuite prin caracterele "*", pentru a asigura confidenialitatea. La expedierea
formularului ns se transmite n clar valoarea tastat ntr-un cmp de tip "passwd". Un
astfel de cmp poate fi util, de exemplu, la completarea unui formular ntr-un loc public. n

exerciiul prezentat mai jos, completnd cmpul "parola" cu "ionutz", destinatarul va primi
un mesaj avnd urmtorul coninut:
"nume=Popescu&prenume=Ionu&parola=ionutz".

Cmpul ascuns este un cmp a crui valoare nu va fi afiat n pagina Web. Un
astfel de cmp este introdus prin atribuirea valorii "hidden" pentru atributul type al
elementului input. La expedierea formularului din exerciiul urmtor, se transmite ctre
server perechea secret=10000$.

Exerciiul 9.6 Cmpuri speciale.
<html><head>
<title> Cmpuri speciale </title></head><body>
<h4> Cmpuri speciale </h4>
<form method="post"
Nume: <input type="text" name="nume"><br>
Prenume: <input type="text"
name="prenume"><br>
Parola: <input type="password"
name="parola"><br>
<input type="hidden" name="secret"
value="10000$"> <br>
<input type="reset" value="sterge"><br>
<input type="submit" value="expediaza">

Cmpurile de tip file permit transmiterea unui ntreg fiier. Pentru aceasta
atributul type al alementului input primete valoarea file. Unui astfel de cmp i se
asociaz atributul name i atributul "value" setat ca adresa URL a fiierului care va fi
expediat odat cu formularul. Dac atributul value lipsete, URL-ul 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.

Exerciiul 9.7 Transmiterea unui fiier.
<html><head>
<title> Transmiterea unui fiier
<h4> Cmp file </h4>
<form method="post"
<b> Alegeti fiierul: </b><br>
<input type="file" name="fisier"
enctype="multipart/form-data"
accept=text/plain> <hr>
<input type="submit" value="Transmite">

Ionel SIMION 88

Pentru criptarea fiierului ce va fi expediat se folosete atributul enctype care
precizeaz metoda de criptare utilizat. Pentru cmpurile de tip file valoarea atributului
enctype este multipart/form-data. Se poate folosi i atributul accept pentru a specifica
tipul fiierului care poate fi transmis astfel. Valorile pentru atributul accept sunt de tipul
MIME (Multimedia Internet Mail Extension). De exemplu, accept=image/* va accepta
numai fiiere de tip imagine, accept=image/gif, image/jpeg va accepta numai fiiere
imagine de tip gif i jpeg etc.

Butoanele radio permit alegerea unei singure variante din mai multe posibile.
Numele acestor elemente de formular provine de la faptul c doar un singur buton dintr-o
list de opiuni poate fi acionat la un moment dat, similar butoanelor radio. Butoanele
radio sunt introduse n formular prin atribuirea valorii "radio" pentru atributul type al
elementului input.
Butoanele care aparin aceleiai liste de opiuni primesc acelai nume, indicat prin
atributul name. Prin intermediul atributului value, butonului i se asociaz un text (valoarea
atributului) care este expediat serverului mpreun cu numele butonului. Pentru a sugera o
alegere implicit din lista de opiuni, unuia dintre butoane i se poate asocia atributul
checked.
n exerciiul urmtor, la expedierea formularului, se va transmite una dintre
perechile "specializare=C" sau "specializare=D ", n funcie de butonul selectat de ctre
cel care completeaz formularul.

Exerciiul 9.8 Butoane radio.
<html><head>
<title> Butoane radio </title></head><body>
<h4>Butoane radio</h4>
<form method="post"
<b>Alegeti specializarea:<br>
CAD <input type="radio"
name="specializare" value="C">
DESIGN <input type="radio"
name="specializare" value="D"> </b><p>
</form>
</body></html>

Casetele de validare (checkbox) permit selectarea uneia sau mai multor opiuni.
Pentru inserarea unei casete de validare, atributul type al elementului input primete
valoarea "checkbox".
La fel ca i la butoanele radio, casetele de validare primesc un nume definit prin
atributul name i o valoare, prin atributul value care vor fi expediate dup completarea
formularului. Pentru fiecare caset selectat este expediat o pereche "nume=valoare".
Dac atributul value lipsete, se transmite perechea "nume=on". Fiecrei casete i se
poate asocia o valoare implicit "selectat", definit prin atributul checked.


Exerciiul 9.9 Casete de validare.
<html><head><title> Casete de validare
<h4> Casete de validare </h4>
<form method="post"
<b>Alegeti cursul:<br>
AutoCAD<input type="checkbox"
name="autocad" value="3 credite">
Solid Edge <input type="checkbox"
name="solidedge" value="3 credite">
CATIA <input type="checkbox"
name="catia" value="3
credite"></b><hr>

Butoanele executabile permit declanarea unui anumit eveniment, atunci cnd
sunt activate. Evenimentul respectiv este definit cu ajutorul unor limbaje de programare
aa cum se va vedea n seciunea urmtoare. Inserarea unui astfel de buton se obine prin
atribuirea valorii "button" atributului type al elementului input.
n exerciiul urmtor, la apsarea butonului apare o caset de alert cu mesajul
Asta este tot ce poi obine deocamdat, ntruct n pagina Web exist un script
JavaScript care determin aceasta.

Exerciiul 9.10 Buton executabil.
<html><head>
<title> Buton executabil
<h4> Buton executabil </h4>
<form method="post"
<b> Acesta este un buton:</b>
<input type="button" name="butonul1"
value="Apas aici"
onClick='alert("Asta este tot ce poi
obine deocamdat")'>
<br></form>
</body></html>

Elementul button ofer o alt cale de a insera un buton ntr-o pagin Web, n
interiorul marcajelor <button> i </button>. Prin acest element, butonul poate fi inserat n
cadrul unui formular sau oriunde n pagin, n afara formularului. Atributul type cu valorile
posibile "button", "submit" sau "reset" precizeaz aciunea ce se va executa la apsarea
butonului, dac acesta este inclus ntr-un formular.
Ionel SIMION 90

Exerciiul 9.11 Elementul button.
<html><head>
<title> Elementul button</title></head><body>
<h4> Elementul button</h4>
Un nou buton:
<button name="butonul2">Apas aici
</button><br>
<form method="post"
Numele: <input type="text" name="numele"><br>
Prenumele: <input type="text"
name="prenumele"><br>
<button name="butonul3"
type="submit">Transmite</button>
</button>

Listele de selecie permit alegerea unuia sau mai multor elemente dintr-o list
finit de opiuni. Lista de selecie este inclus n formular cu prin elementul select, ntre
marcajele <select> i </select>. Atributele asociate elementului select sunt name care
ataeaz un nume listei de selecie i size (valoarea implicit este 1) care precizeaz
cte elemente din list sunt afiate la un moment dat pe ecran.
Opiunile din cadrul unei liste de selecie sunt incluse cu ajutorul elementului
option. Atributul value al elementului option primete ca valoare un text ce va fi expediat
serverului n perechea "name=value". n lipsa acestui atribut, va fi expediat textul ce
urmeaz dup option. Atributul selected permite selectarea implicit a unui element al
listei.

Exerciiul 9.12 List de selecie.
<html><head><title> List de selecie
<h4> List de selecie </h4>
<form method="post"
<b> Categoria de vrst: </b><br>
<select name="varsta" size="3">
<option value ="A" selected> 15-25 ani
<option value="B" selected> 25-35 ani
<option value="C"> 35-45 ani
<option value="D"> 45-55 ani
<option value="E"> 55-65 ani
</select><hr>

Prin folosirea atributului multiple al elementului select, se obine o list de selecie
care permite selectarea mai multor elemente din list. La expedierea formularului, pentru

fiecare element al listei care este selectat se insereaz cte o pereche
"nume_list=valoare", unde valoare este valoarea atributului value al elementului
option.

Exerciiul 9.13 List care accept selecii multiple.
<html><head><title> List cu selecii multiple
<h4> Selecii multiple </h4>
<form action="mailto:gdgi@geom.desc.pub.ro">
<b> Limbi strine cunoscute:</b><br>
<select name="limbi straine" size="4" multiple>
<option value="e" selected> Engleza
<option value ="f">Franceza
<option value="g">Germana
<option value="j">Japoneza
<option value="s">Spaniola
</select ><hr>

Folosirea motoarelor de cutare specializate de pe Web pentru a gsi anumite
informaii poate fi obinut atribuind ca valoare atributului action URL-ul programului de
cutare.

Exerciiul 9.14 Folosirea motoarelor de cutare.
<html><head><title> Motoare de cutare
<h4> Caut pe WEB</h4>
<!Caut cu Yahoo--!> <form method="get"
action="http://search.yahoo.com/search">
<b>YAHOO</b> <input type="text"
name="search" size="12">
<input type="submit" value="search"></form>
<hr>
 <form method="get"
action="http://www.google.com/search">
<b>GOOGLE</b> <input type="text"
<hr>
<!Caut cu Alta Vista--> <form
method="get"
action="http://www.altavista.digital.com/cg
i-bin/query">
<b>Alta Vista</b> <input type="text"
<hr></body></html>

Ionel SIMION 92

n exerciiul urmtor este este prezentat un formular care conine diverse tipuri de
cmpuri. Alinierea cmpurilor n cadrul paginii a fost obinut prin includerea cmpurilor
formularului n celulele unui tabel.

Exerciiul 9.15 Formular.
<html><head><title>Formular
<h4> FORMULAR DE NSCRIERE </h4>
<center><table bgcolor="yellow">
<form method="post"
<tr align=left><th>Numele:<td><input
type="text" name="numele">
<tr align=left><th>Prenumele:<td><input
type="text" name="prenumele"><hr>
<tr align=left><th>Sosesc n Bucureti:<td>
<input type="checkbox" name="cu trenul">
cu trenul <br>
<input type="checkbox" name="cu avionul">
cu avionul <br>
<input type="checkbox" name="auto"> auto
<hr>
<tr align=left><th>Doresc cazare:<td>
<input type="checkbox" name="hotel">
hotel<br>
<input type="checkbox" name="cmin">
cmin <br>
<input type="checkbox" name="nu doresc">
nu doresc <hr>
<tr align=left><th>Modalitatea de plat:<td>
<br><ul style="background-color:lightblue;">
<li><input type="radio" name="plata">cash
<li><input type="radio"
name="plata">card</ul><hr>
<tr align=left><th>Comentarii:<td>
<textarea name="comentarii" cols="15"
rows="5" wrap="soft">
Inserai aici observaiile dumneavoastr:
</textarea><hr>
<tr align=left valign=top><td><input
type="reset" value="terge">
<td><input type="submit"
value="expediaz">
</form></table></center></body></html>


9.3 Accesul la baze de date Web

Tratarea datelor din formularele interactive i integrarea lor n baze de date de pe
Web se bazeaz interfee de tip CGI (Common Gateway Interface). Datele introduse prin
elementele formularului sunt trimise la un server HTTP i apoi sunt tratate folosind
programe sau scripturi CGI. CGI asigur interaciunea dintre formularul interactiv, un
browser client, un server i protocolul HTTP. Serverul lanseaz programul CGI i
transfer acestuia datele colectate. La rndul su, programul CGI pregtete un rspuns
pentru client.
Etapele de lucru pot fi rezumate astfel:
1. browserul cere formularul de la server
2. serverul trimite formularul
3. utilizatorul completeaz cmpurile formularului
4. datele sunt transmise ctre programul CGI
5. programul CGI trateaz datele i formuleaz o cerere ctre un SGBD
6. SGBD formuleaz un rspuns pe care l trimite programului CGI
7. programul CGI transpune rspunsul SGBD n format HTML i l transmite
serverului
8. serverul transmite rspunsul la browser.
Transmiterea datelor formularului ctre server se face sub forma unui ir de
caractere format din perechi:
nume_camp1=valoare_camp1& nume_camp2=valoare_camp2
n acest ir codificat, caracterul spaiu se nlocuiete prin + iar caracterele speciale
prin valoarea hexazecimal n formatul %xx. irul este codificat conform metodei indicate
prin atributul method al elementului form. Fiecare dintre cele dou metode de transmitere
a datelor, get i post, folosete o variabil de mediu specific pentru a manevra datele
pe server.
Dac se folosete metoda get, irul de caractere codificat este asociat unui URL
care este adresa programului CGI, astfel:
URL?ir_de_caractere_codificat
irul de caractere codificat (partea care urmeaz dup caracterul ?) este depus
n variabila de mediu querry-string de unde va fi preluat de programul CGI.
Dac se folosete metoda post, irul de caractere este transmis serverului printr-o
procedur diferit. Serverul dimensioneaz variabila de mediu content-length, pentru a
indica lungimea irului care va fi transmis. Este lansat apoi programul CGI care primete
irul de caractere din variabila de mediu content-length.
Legarea aplicaiilor Web la baze de date permite accesul utilizatorilor pentru
consultarea acestora din browser. Legtura dintre un SGBD (sistem de gestiune a unei
baze de date) i o aplicaie Web este o relaie client-server pe dou nivele: unul ntre
browser i serverul Web i altul ntre serverul Web i serverul bazei de date.

9.4 Concluzii. Elemente i atribute referitoare la formulare

form introduce un formular

Atribute
action precizeaz ce se va ntmpla cu datele formularului
method precizeaz metoda pentru expedierea datelor formularului
target definete o fereastr pentru rspunsul trimis de serverul
WEB
Ionel SIMION 94

enctype stabilete tipul de criptare fplosit pentru expediere
name asociaz formularului un nume
id asociaz formularului un identificator
Atribute
generale
pentru
cmpurile
formularului
name asociaz un nume unui cmp al formularului
id asociaz un identificator unui cmp al formularului
disabled determin dezactivarea unui cmp al formularului
accesskey asociaz cmpului o combinaie de taste de acces
readonly interzice modificarea coninutului
input definete majoritatea cmpurilor unui formular

Atribute
type precizeaz tipul elementului introdus de input
value atribuie o valoare iniial unui cmp al formularului
size specific limea cmpului de tip text
maxlength specific numrul maxim de caractere dintr-un cmp de
tip text
align aliniaz cmpul n cadrul formularului
textarea include cmpuri de text multilinie

Atribute
cols specific numrul de caractere care vor fi afiate ntr-o
linie
rows specific numrul de linii care vor fi afiate simultan
wrap determin comportamentul textului la sfritul de linie
button introduce un buton n interiorul sau n afara unui formular
value precizeaz textul care va fi afiat pe buton
type aciunea ce se va executa la apsarea butonului
select introduce o list de selecie
size precizeaz cte elemente din list sunt vizibile pe ecran
multiple permite selectarea simultan a mai multor opiuni din list
option definete opiunile unei liste de selecie
Atribute value precizeaz textul care va fi expediat serverului
selected permite selectarea implicit a unui element al listei


Capitolul 10
META-INFORMAII N PAGINA WEB

10.1 Meta-informaii

Meta-informaiile sunt informaiile despre coninutul documentului HTML: cuvinte
cheie, informaii despre autor, o descriere general a documentului etc. Aceste informaii
permit indexarea paginilor Web i nregistrarea lor pe site-urile de cutare.
Meta-informaiile sunt coninute n fiierul surs HTML, fr a fi vizibile la afiarea
paginii Web. Ele sunt utilizate de serverele de pe Internet, specializate n identificarea i
catalogarea paginilor Web, precum i n gsirea informaiilor n paginile respective
(www.yahoo.com, www.google.com, www.altavista.com etc.). De asemenea, cu ajutorul
meta-informaiilor poate fi determinat actualizarea ferestrei browserului dup un anumit
timp.
Includerea meta-informaiilor n codul HTML se obine prin elementul meta plasat
ntre marcajele <head> i <head>.

Descrierea paginii Web. Pentru a oferi motoarelor de cutare informaii generale
despre pagin, elementul meta va avea atributul name cu valoarea "description" i
atributul content a crui valoare va fi un ir de caractere ce conine descrierea paginii.

Exerciiul 10.1 Descrierea paginii Web.
<html><head><title>Catedra de Geometrie Descriptiv i Grafic Inginereasc </title>
<meta name="description" content= "Catedra de Geometrie Descriptiv i Grafic
Inginereasc a Universitii POLITEHNICA din Bucureti este cea mai mare catedr
de profil din ar.">
</head> <body>CONINUTUL PAGINII</body></html>

Cuvintele cheie. Pentru a gsi o informaie prin intermediul unui motor de cutare
se folosesc cuvintele cheie (keywords). Includerea unor astfel de cuvinte cheie crete
posibilitatea ca pagina s fie cunoscut. Pentru a preciza cuvintele cheie ale paginii Web,
elementul meta va avea atributul name cu valoarea " keywords" i atributul content a
crui valoare va fi o list de cuvinte cheie separate prin virgul.

Exerciiul 10.2 Cuvintele cheie.
<meta name="keywords" content="catedra, Geometrie Descriptiv, Grafic
Inginereasc, Bucureti, universitate, Romnia, student, profesor, curriculum">
</head> <body>CONINUTULPAGINII</body></html>

Ionel SIMION 96

Informaii despre autorul paginii. Prin setarea atributului name la valoarile
author i, respectiv "copyright", pot fi furnizate informaii privind autorul paginii i
drepturile de autor.

Exerciiul 10.3 Drepturile de autor.
<meta name="author" content="Mihai Ionescu">
<meta name="copyright" content="gdgi.pub.ro">

Atributul http-equiv ofer posibilitatea introducerii unui alt tip de informaii, asociate
elementului meta . Atunci cnd un server Web transmite o pagin Web, sunt transmise
adiional un set de informaii despre pagin, cunoscut sub numele de header. Browserul
nu afieaz aceste informaii, dar le folosete pentru a stabili modul de afiare a paginii.
Atributul http-equiv are scopul de a anuna browserul c un nou header a fost transmis.
Atributul name nu mai este necesar atunci cnd se folosete atributul http-equiv.

ncrcarea automat a unei pagini n fereastra browserului, la un anumit interval
de timp se obine tot prin atributul http-equiv al elementului meta cu valoarea "refresh".
Valoarea atributului content va conine numrul de secunde dup care se va produce
rencrcarea ferestrei browserului i URL-ul paginii care va fi ncrcat. Dac URL-ul
lipsete, se va rencrca pagina curent.

Exerciiul 10.5 Rencrcarea automat a unei pagini.
<meta http-equiv="refresh" content="12; url=pagina2.html">

Informaii privind actualizarea paginii Web. Pentru a transmite informaii privind
data la care a fost creat i perioada de valabilitate a paginii, elementului meta i este
asociat atributul http-equiv cu valorile "creation-date", respectiv "expires". Atributul
content va avea ca valoare o dat n urmtorul format:

Formatul pentru dat: "zzz, zz lll aaaa hh:mm:ss ttt"
zzz primele trei caractere ale numelui zilei din sptmn
(Mon, Tue, Wed, Thu, Fri, Sat sau Sun)
zz ziua din cadrul lunii (0 , 02, , 3 )
lll primele trei caractere ale numelui lunii
(Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov sau Dec)
aaaa anul exprimat prin 4 cifre (de exemplu 2004)
hh:mm:ss ora, minutul i secunda
ttt reprezint timpul utilizat (de exemplu GMT)

Opional, dac data este indicat ntr-un alt format, se folosete atributul scheme
care precizeaz formatul utilizat (de exemplu scheme="Day - Month -Year" pentru "28-11-
2004").

Exerciiul 10.4. Actualizarea paginii Web.

<meta http-equiv="creation-date" content="Mon, 10 Nov 2003 10:00:00 GMT">
<meta http-equiv="expires" content=" Sat, 01 Jan 2005 00:00:00 GMT ">

Informaii privind administratorul site-ului se pot include prin asocierea
atributului http-equiv cu valorile "from" i "reply-to". Valoarea atributului content este o
adres e-mail, eventual urmat n paranteze rotunde de un nume complet al persoanei.

Exerciiul 10.6 Persoana de contact.
<meta http-equiv="from" content="isimion@geom.desc.pub.ro (Ionel Simion)">
<meta http-equiv="reply-to" content="isimion@geom.desc.pub.ro (Ionel Simion)">

Tipul fiierului este indicat prin valoarea "content-type" a atributului http-equiv.
Atributul content va avea valoarea format din codul MIME (Multimedia Internet Mail
Extension) care definete formatul n care este livrat informaia i codul caracterelor
folosite.

Exerciiul 10.7 Tipul fiierului.
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-5">

Limba utilizat pentru meta-informaii poate fi indicat prin atributul lang.

Exerciiul 10.8 Limba utilizat.
<meta http-equiv="keywords" lang="en-us" content="department, Descriptive
Geometry, Engineering Graphics, Bucharest,university, Romania, curriculum">
<meta http-equiv="keywords" lang="ro" content=" catedra, Geometrie Descriptiva,
Grafica Inginereasca, Bucuresti, universitate, Romania, curriculum">

10.2 Concluzii. Elemente i atribute referitoare la meta-informaii

meta introduce o meta-informaie

Atribute
name

description descriere general a paginii
keywords cuvinte cheie
author informaii legate de autorul paginii i de
copyright
http-equiv creation-date informaii legate de data crerii paginii
expires informaii legate de data expirrii paginii
refresh ncrca automat o pagin la un interval de
Ionel SIMION 98

timp
from informaii despre administratorul site-ului
reply-to
content-type finformaii legate de tipul fiierului
content ir de caractere descriere general a paginii
list de cuvinte introduce cuvinte cheie
scheme formatul utilizat pentru dat, altul dect cel
standard
lang limba n care sunt furnizate meta-informaiile


Capitolul 11
XML I XHTML

11.1 Limbajul XML

n Internet coexist diverse tehnologii pentru browsere, de la cele care funcioneaz
pe computere personale, la cele care sunt implementate pe telefoanele mobile. A aprut
astfel nevoia existenei unui limbaj care s introduc reguli mai stricte de formatare a
textului n paginile Web, capabil a fi recunoscut de toate aceste browsere.
De exemplu, codul HTML de mai jos nu poate fi considerat un cod corect, dei el
poate fi citit de unele browsere.

Exerciiul 11.1 Cod HTML incorect.
<html>
<head>
<title>Acesta nu este un cod corect</title>
<body>Cod incorect, care, uneori funcioneaz</body>

XML (EXtensible Markup Language) este un limbaj creat pentru a structura, stoca
i transmite informaiile. Limbajul folosete caractere Unicode ceea ce nseamn c,
nefiind limitat la setul de caractere ASCII, codul XML poate fi scris n orice limb: englez,
japonez, greac etc. Exist extensii ale standardului XML pentru a defini diverse
elemente: XLink pentru hiperlegturi, XFrames pentru crearea i funcionarea ferestrelor,
XForms pentru formulare etc.
Spre deosebire de HTML, care a fost creat pentru a afia datele, XML a fost
proiectat pentru a descrie datele. De exemplu, codul urmtor conine un header i un
mesaj, mpreun cu informaii despre destinatar i expeditor. Sunt ns doar nite date,
prezentate n limbaj XML. Este necesar un limbaj care s transmit sau s afieze aceste
informaii.

Exerciiul 11.2 Cod XML.
<note>
<to>student</to>
<from>profesor</from>
<heading>anun</heading>
<body>ai obinut nota 10</body>
</note>

Elementul XML definete o arie de informaii n cadrul documentului. n exerciiul
anterior, primul element este note i marcajul <note> definete nceputul informaiilor
privitoare la element. Finalul acestor informaii este indicat de marcajul </note>.

Ionel SIMION 100

Chiar dac este proiectat doar pentru a pstra informaiile, XML cuprinde i unele
instruciuni care indic modul de procesare a anumitor informaii. Astfel de instruciuni sunt
declaraiile XML, care sunt plasate la nceputul unui document i cuprind urmtoarele
proprieti:

version versiunea XML folosit
encoding specific setul de codificare a caracterelor
utilizat
standalone indic dac documentul este cuprins n
ntregime sau trebuie ncrcate i alte
documente pentru procesarea corect.

Exerciiul 11.3 Declaraii XML.
<?xml version=1.0 encoding=US-ASCII standalone=no ?>

Cu XML, datele pot fi stocate chiar i n exteriorul fiierului HTML. Aceasta permite
ca n fiierul HTML s fie concentrate doar informaiile privitoare la formatarea i afiarea
informaiilor.

11.2 Diferene ntre XHTML i HTML

XHTML EXtensible HyperText Markup Language este construit pe baza ultimei
versiuni HTML 4.01, respectnd regulile limbajului XML. XHTML a devenit un standard
recunoscut de W3C n ianuarie 2000. XHTML este limbajul care tinde s nlocuiasc
HTML.
n continuare sunt prezentate cele mai importante elemente prin care limbajul
XHTML se difereniaz de HTML.
Elementele XHTML trebuie s fie corect imbricate
n exerciiul urmtor, codul HTML poate funciona, chiar dac marcajele de
nchidere ale elementelor nu sunt plasate corect. Codul XHTML impune ns nchiderea
elementelor imbricate, n ordinea invers introducerii acestora.

Exerciiul 11.4 Imbricarea elementelor.
Cod posibil HTML Cod XHTML corect
<i><u>Text italic i subliniat </i></u> <i><u>Text italic i subliniat </u></i>

Elementele XHTML trebuie s fie scrise cu litere mici.
n codul HTML marcajele pot conine litere mari sau mici.

Exerciiul 11.5 Marcajele nu pot conine majuscule.
<BODY>
<p>Paragraf</p>
</bODy>
<body>
<p>Paragraf</p>
</body>

Toate elementele XHTML trebuie s fie nchise.

n codul HTML exist elemente care nu necesit un marcaj de nchidere - de
exemplu elementul p (paragraf). n cazul XHTML, marcajul de nchidere nu mai este
opional.

Exerciiul 11.6 Marcajele de nchidere sunt obligatorii.
<p> Paragraf
<p> Paragraf
<p> Paragraf </p>
<p> Paragraf </p>

Chiar i elementele vide trebuie s fie nchise - de exemplu elementul br (break
line). Pentru aceasta se folosete caracterul / succesiv unui caracter spaiu.

Exerciiul 11.7 Marcajele de nchidere pentru elemente.
Acum urmeaz o pauz <br>
Urmeaz o linie orizontal <hr>
<img src="poza.gif">
Acum urmeaz o pauz <br />
Urmeaz o linie orizontal <hr />
<img src="poza.gif" />

Numele atributelor trebuie s fie scrise cu litere mici. Valorile atributelor
trebuie s fie cuprinse ntre caractere ghilimele.

Exerciiul 11.8 Numele atributelor.
<table WIDTH=300 BORDER=3> <table width=300 border=3>

Valoarea atributului trebuie s fie precizat. n tabelul urmtor sunt
prezentate atributele care n HTML nu necesit asocierea unei valori i modul
cum trebuie s fie scrise ele n codul XHTML.

Valorile atributelor
compact compact= compact
checked checked=checked
declare declare= declare
readonly readonly=readonly
disabled disabled=disabled
selected selected=selected
defer defer=defer
ismap ismap=ismap
nohref nohref=nohref
noshade noshade=noshade
nowrap nowrap=nowrap
multiple multiple=multiple
noresize noresize= noresize

Atributul id nlocuiete atributul name.

Ionel SIMION 102

Exerciiul 11.9 Atributele id i name.
value="Numele i prenumele">
<input type="text" id="numele"
value="Numele i prenumele" />

Atributul lang care indic limba folosit pentru coninutul unui element va fi
nsoit de atributul xml:lang.

Exerciiul 11.10 Atributele lang i xml:lang.
<div lang=ro>Text</div> <div lang=ro xml:lang=ro">Text</div>

Atunci cnd sunt necesare seturi speciale de codificare a caracterelor,
acestea vor fi indicate n dou locaii: n declaraia XML i n cadrul unui element
meta.

Exerciiul 11.11 Seturi speciale de codificare a caracterelor.
<?xml version=1.0 encoding=euc-jp ?>
<meta http-equiv="content-type" content="text/html; charset=euc-jp />

Structura unui document XHTML trebuie s fie corect. Toate elementele
XHTML trebuie s fie plasate ntre marcajele <html> i </html> ale elementului
html. Toate celelalte elemente pot conine elemente imbricate. Declaraia
DOCTYPE, care indic browserului versiunea HTML sau XHTML n care este
scris documentul trebuie s fie prezent. Declaraia DOCTYPE nu este un
element XHTML i deci nu trebuie s aib un marcaj de nchidere.
Structura de baz documentului XHTML este cea din exerciiul urmtor.

Exerciiul 11.12 Structura de baz documentului XHTML.
<html>
<!DOCTYPE ...>
<head> </head>
<body> </body>
</html>

n tabelul urmtor sunt prezentate marcajele folosite de limbajul XHTML. Coloana
DTD (Document Type Definition) indic tipul de construcie a documentului: S=Strict,
T=Transitional i F=Frameset.

Marcaj Descriere DTD
 definete un comentariu STF
<!DOCTYPE> definete tipul documentului STF
<a> definete o ancor STF
<abbr> definete o abreviere STF
<acronym> definete un acronim STF

<address> definete o adres STF
<applet> definete un applet TF
<area /> definete o zon ntr-o imagine de tip hart STF
<b> definete un text ngroat STF
<base /> definete un URL de referin pentru hiperlegturile unei pagini STF
<basefont /> definete un font de baz TF
<bdo> definete direcia de afiare a textului STF
<big> definete un text mrit STF
<blockquote> definete indentarea unui bloc de text STF
<body> definete elementul body STF
<br /> definete trecerea pe o nou linie de text STF
<button> definete un buton de execuie STF
<caption> definete un cap de tabel STF
<center> definete un text centrat TF
<cite> defineteun citat STF
<code> definete un cod STF
<col> definete atribute ale unor coloane de tabel STF
<colgroup> definete un grup de coloane ale unui tabel STF
<dd> introduce o definiie ntr-o list de definiii STF
<del> definete un text marcat pentru tergere STF
<dfn> introduce o definiie STF
<dir> definete o list de directoare TF
<div> definete o diviziune a unui document STF
<dl> introduce o list de definiii STF
<dt> introduce un termen ntr-o list de definiii STF
<em> definete un text evideniat STF
<fieldset> grupeaz elemente de formular STF
<font> definete un font TF
<form> definete un formular STF
<frame> definete o fereastr F
<frameset> definete un set de ferestre F
<h1> to <h6> definete un subtitlu STF
<head> definete elementul head STF
<hr /> definete o linie orizontal STF
<html> definete un document HTML STF
<i> definete un text nclinat STF
<iframe> definete o fereastr inline TF
<img /> definete o imagine STF
<input /> definete o metod de intrare pentru formulare STF
<ins> definete un text care va fi inserat STF
<kbd> definete un set de taste STF
Ionel SIMION 104

<label> definete o etichet STF
<legend> definete un titlu pentru un grup de elemente de formular STF
<li> definete o list STF
<link> definete o referin ctre o resurs STF
<map> definete o imagine de tip hart STF
<menu> definete o list de tip menu TF
<meta> definete o metainformaie STF
<noframes> definete un text alterarnativ pentru ferestre TF
<noscript> definete un text alterarnativ pentru scripturi STF
<object> definete un obiect STF
<ol> definete o list ordonat STF
<optgroup> definete descriere pentru un grup de opiuni STF
<option> definete o opiune ntr-un meniu STF
<p> definete un paragraph STF
<param> definete un parametru pentru un obiect STF
<pre> definete un text preformatat STF
<q> definete un citat scurt STF
<samp> definete o secven de caractere de tip cod STF
<script> introduce un script STF
<select> definete o list de selecie STF
<small> definete un text micorat STF
<span> definete o seciune ntr-un document STF
<strike> definete un set de caractere tiate cu o linie orizontal TF
<strong> definete un text puternic evideniat STF
<style> definete un stil STF
<sub> definete un text de tip indice inferior STF
<sup> definete un text de tip indice superior STF
<table> definete un tabel STF
<tbody> definete seciunea body a unui tabel STF
<td> definete o celul a unui tabel STF
<textarea> definete un cmp de text multilinie STF
<tfoot> definete un subtitlu pentru un tabel STF
<th> definete o celul ntr-un cap de tabel STF
<thead> definete un cap de tabel STF
<title> definete titlul unui document STF
<tr> definete o linie a unui tabel STF
<tt> definete un text cu caractere de tip teletype STF
<u> definete un text subliniat TF
<ul> definete o list neordonat STF
<var> definete o variabil STF

Web Design

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Web Design

Încărcat de

Drepturi de autor:

Formate disponibile

Proiectarea paginilor WEB 1

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