Sunteți pe pagina 1din 34

Noiuni elementare n realizarea paginilor Web

NOIUNI DE BAZ
WORLD WIDE WEB
Exist mai multe metode de acces (servicii) la informaia stocat pe un calculator prin
intermediul reelei internet :
FTP (File Transfer Protocol) este serviciul pentru transferul fiierelor;
Telnet este serviciul pentru accesul de la distan la resursele unui calculator;
Electronic Mail este serviciul de mesagerie electronic;
News este serviciul de tiri;
World Wide Web este o alt metod (serviciu) de acces la informaia stocat pe un
calculator aflat oriunde n lume.
World Wide Web (pe scurt WWW) nseamn n traducere ad-litteram pnz de pianjen
ntins n lumea ntreag. WWW-volum imens de informaii organizate dup modelul hypertext:

Este un sistem distribuit pe mii de situri.

Este un sistem dinamic, adic actualizabil n orice moment.

Este un sistem interactiv - permite colectarea de informaii prin formulare.


Avantajele serviciului World Wide Web
Paginile Web au urmtoarele caracteristici:

sunt multimedia, adic ele conin infomaii sub form de text, imagini, sunete,

filme etc;

sunt interactive, adic rspund la cererile utilizatorului;

sunt independente de platforma hardware i software, adic se vd la fel pe orice


calculator, avnd instalat orice sistem de operare i utiliznd orice browser.
TERMINOLOGIA WEB:
Server Web. Un server web este un calculator care adpostete un Site Web i
care este capabil s rspund la cereri de pagini Web din partea unui client. Pentru a putea rspunde
permanent cererilor Web, un calculator trebuie s ruleze permanent o aplicaie special: httpd. Cele mai
ntlnite servere Web sunt: Apache Server; Microsoft Web Server; Oracle Web Server.
Site Web. O colecie organizat de pagini Web formeaz un site web.n www,
clientul solicit pagini Web de la un site Web.
Pagin Web. n orice calculator informaia este stocat n uniti numite fiiere.
Aceste fiiere conin: text; programe; imagini; filme; sunete, etc.

Pentru www sunt

importante anumite fiiere speciale, numite i pagini Web. Acestea au extensia .htm sau html.
Home Page.Home Page (pagina gazd) este o pagin din site-ul unei organizaii
care:
este n mod uzual prima pagin accesat din site;
1

este o pagin de prezentare a organizaei;


ofer modul cel mai eficient de explorare a informaiilor aflate n site
HTTP- Pentru a comunica ntre ele, dou calculatoare folosesc un sistem de reguli
ce formeaz un protocol. Serviciul www utilizeaz ca protocol de comunicare ntre client i server
HyperText Transfer Protocol (HTTP), adic Protocolul de Transfer al Hipertextului.
Hipertext este un text mbogit. El conine:
text obinuit;
etichete pentru formatarea textului i ncapsularea altor tipuri de
informaii (salturi rapide ctre alte resurse de informaii, sunete, imagini, filme, etc).
Hipertextul este stocat n fiiere avnd o extensie special: .htm sau html.
HTML Un fiier care conine hipertext este scris ntr-un limbaj specific numit
HiperText Markup Language (HTML), adic Limbajul de Marcare a Hipertextului. HTML este un limbaj
care permite inserarea de:
Text;
Sunete, imagini i filme;
Indicatori de prezentare a informaiei;
Legaturi (link-uri) ctre alte pagini Web aflate oriunde n lume;
Aplicaii (programe Javascript, Java, VRML etc.).
Host. Un calculator din Internet se numete host (gazda).
Pentru a fi identificat n mod unic, calculatorul primete un nume (o adres), de exemplu,
mishu.cnmv.ro
Pachete. Informaia care circul ntre calculatoare interconectate este ncapsulat
n pachete. Un pachet conine:
adresa expeditorulut i adresa destinatarului;
informaia
numele aplicaiei client care a formulat cererea i numele aplicaiei
de pe server care va primi cererea spre rezolvare. Pachetul este lansat n reeaua Internet.
TCP/IP. Reteaua Internet dispune de mijloace de dirijare a pachetelor astfel nct
acestea sa ajung la destinaie. Un astfel de mijloc de dirijare a pachetelor este Internet Protocol (IP),
adic Protocolul Internet. Reeaua Internet dispune de mijloace de corecie a erorilor de transmitere a
pachetelor. Un astfel de mijloc de corecie este Transfer Control Protocol (TCP), adic Protocolul de
Control al Transferului.
Httpd. HiperText Transfer Protocol Demon (httpd) este o aplicaie care se execut
pe serverul Web pentru a prelucra cererile de pagini Web recepionate de acesta de la clieni
BROWSERE WEB. Paginile Web sum vizualizate pe calculatorul client prin intermediul unei
aplicaii speciale numite browser. Aplicaia are funciile :
2

Accesul la informaii;
Formatarea informaiilor;
Afiarea informaiilor.
Tipuri de browser: Microsoft Internet Explorer i Netscape Navigator,HotJava.
Utilizatorul ,browser-ul Web i server-ul Web colaboreaz conform schemei:
UTILIZATOR
URL-ul

Afieaz

paginii

Web
Solicit conectarea la server
BROWSER
WEB

Transmite fiierul

SERVER
WEB

CREAREA UNEI PAGINI WEB Crearea unei pagini Web presupune:


1.
Editarea fiierului HTML utiliznd:
un editor de tate obinuit (Notepad, Wordpad, Word, WordPerfect etc.)
un editor de texte dedicat (Netscape Composer, HotMetal etc.)
2.
Salvarea paginii Web cu extensia html sau htm ntr-un site Web;
3.
Rezolvarea referinelor coninute n pagina Web (legturi, imagini, sunete, filme,
aplicaii Java, etc.).
Pagina Web astfel creat poate fi vizualizat prin intermediul unui browser.
UNIFORM RESOURCE LOCATOR (URL)-adres a unei informaii existente pe Webstandard de identificare i accesare a resurselor din Internet.
URL concateneaz trei elemente:
Identificarea serviciului (protocolul) Internet utilizat pentru accesarea resursei.
Exist mai multe metode (protocoale) de acces la informaia stocat pe un calculator conectat la Internet
i respectiv mai muli identificatori de servicii (protocoale) :

http:// protocolul de transfer bazat pe hipertext (Hyper Text Transfer

Protocol) ;

ftp:// protocolul de transfer de fiiere (File Transfer Protocol );

file:// pentru accesul la fiierele stocate pe calculatorul local.

Identificatorul calculatorului care stocheaz resursa (host-ul sau gazda) i este


format din: nume_calculator.domeniu_internet, unde domeniu_internet reprezint o ramur din
structura arborescent a internetului.
Identificatorul resursei (fiierului) pe calculatorul gazd (server). Acesta se
compune din :

/, reprezint directorul rdcin;


3

Cale_relativ/,reprezint calea relativ spre directorul n care se gsete


fiierul destinaie;

Nume_fiier, numele fiierului destinaie;

#nume_ancor, numele unei ancore definite n fiierul destinaie prin <a


name=nume_ancor >. Acest ultimo termen este correct pentru metoda
de acces http://.

Ex. http://www.edu.ro/news/index.html#ancora1 , unde


http:// -identific protocolul
www.edu.ro indentific sistemul numit www din domeniul edu.ro
/news/index.html reprezint calea relativ spre fiier
#ancora1 reprezint o ancor n fiierul destinaie ncepnd cu care se va
afia pagina n browser .
NOIUNI INTRODUCTIVE N HTML
HYPER TEXT MARKUP LANGUAGE (limbaj de marcare a hipertextului)-este un
limbaj pentru descrierea unui document Web. Fiecare element este marcat prin semne speciale ale
limbajului numite Taguri. Cu puine excepii tagurile sunt perechi care indic nceputul i sfritul
elementului structural.
TIP

TAG
<html></html>
<frameset></frameset>

Taguri
structurale

<meta></meta>
<head></head>
<title></title>
<body></body>

Alte elemente

<p></p>
<br />
<hr />
<..! textul > sau
<// textul>

Elemente
<em></em>
referitoare la
stil
<strong></strong>

ROL
ncadreaz pagina HTML

ATRIBUTE

src, name,noresize,
Descrierea unei configura-ii de
scrolling,
marginwidth,
cadre
marginheight
Introduce
termeni
pentru
motorele de cutare pe Internet
ncadreaz antetul paginii
ncadreaz titlul paginii
bgcolor,
ncadreaz
coninutul
background,
propriuzis al paginii
text,link,vlink,alink.
ncadreaz un paragraf
Rnd nou
clear
Linie orizontal
Comenta-riu
Scoate n eviden textul (de
obicei italic)
Scoate n eviden textul (de
obicei bold)
4

TIP

TAG
<i></i>
<b></b>
<u></u>
<font></font>
<h1></h1>
.
<h6></h6>
<ol></ol>
<ul></ul>
<dl></dl>

Heading-uri

Liste

Legturi
ancore
Imagini

Tabele

ncadreaz un text care va fi


scos n eviden.

<a></a>

Creaz o legtur

<img />

Insereaz o imagine

<table></table>

ncadreaz o tabel

<caption></caption>
<tr></tr>

ncadreaz titlul tabelei


ncadreaz un rnd al tabelei
ncadreaz o celul cap de
tabel
ncadreaz o celul a tabelei
ncadreaz un formular
Definete controale text,
password, checkbox,
radio, submit, reset.
Definete un control textarea
Definete un control menu
Definete un element din menu
Legarea unui clip
Includerea unui clip
Includerea unui clip video(IE)
Descrierea unei confi-guraii de
cadre

<td></td>
<form></form>
<input />
Formu-lare

Cadre

face,size,color.

<dt></dt>
<li></li>

<th></th>

Multi-media

ATRIBUTE

List ordonat
type, start
List neordo-nat
List de tip glosar
Definiie a unui termen al
glosarului
Termen al glosarului
Element al unei liste
value

<dd></dd>

ROL
Text italic
Text bold
Text subliniat
Schimb fontul textului

<textarea>.</textarea>
<select></select>
<option></option>
<a></a>
<embed />
<img />
<frameset>
</frameset>
<frame></frame>

<iframe>
<base>

href,name
src,alt,align,
hspace ,vspace, height, width
border, cellspacing,
cellpadding,width
align,valign
align,valign
align,valign
align,valign
action, method
type, name, value, size
maxlength

name, cols, rows


name,size,multiple
value
href
src,type,width, height
dynsrc, loop, start
Cols, rows, frameborder,
bordercolor
src, name,noresize,
Descrierea unui cadru
scrolling,
marginwidth,
marginheight
src,
name,
scrolling,
Insereaz un cadru flotant (IE) marginwidth, marginheight,
frameborder, align
Specificarea cadrului implicit target
pentru legturile definite n
pagin
5

TIP

TAG
<a></a>

ROL
Specificarea unei legturi

ATRIBUTE
href, target

STRUCTURA UNUI DOCUMENT HTML


<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
Salut!
Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum somnul
intarzie sa vina iata-ma hai-hui pe internet. Saptamana viitoare trebuie sa prezint la ora de engleza un
referat cu tema "Internet viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are
informatica si, in special, internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea
asupra viitorului si nu o profetie. Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva
sugestii in realizarea acestui referat ti-as ramane indatorata.
</BODY>
</HTML>
FORMATAREA PARAGRAFELOR
Trecerea la linie noua
Marcajul <BR>. El se poate folosi si in combinatie cu parametrul CLEAR=optiune, optiune ce
forteaza trecerea la linie noua fata de marginea specificata.
Valorile posibile pentru optiune sunt left, right, all.
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
Salut! <BR CLEAR=all>
Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum
somnul intarzie sa vina iata-ma hai-hui pe internet. <BR> Saptamana viitoare trebuie sa prezint la ora de
engleza un referat cu tema "Internet viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are
informatica si, in special, internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea
asupra viitorului si nu o profetie. </BR>
Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in realizarea
acestui referat ti-as ramane indatorata.
</BODY>
</HTML>
Specificarea unui paragraf
Marcajul <P>...</P>
Exemplu:
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
Salut!
7

<P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum somnul
intarzie sa vina iata-ma hai-hui pe internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet viitorul
omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul in viata
omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P>
<P>Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in realizarea
acestui referat ti-as ramane indatorata.</P>
</BODY>
</HTML>
Alinierea unui paragraf
Marcajul <P>...</P> se imbogateste cu optiunea align.
Optiunea align poate primi ca valoare unul din cuvintele: left, right, center.
Exemplu:
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
<P align="center">Salut!</P>
<P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum
somnul intarzie sa vina iata-ma hai-hui pe internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet
viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul
in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P>
<P>Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in
realizarea acestui referat ti-as ramane indatorata.</P>
</BODY>
</HTML>
Centrarea textului
Marcajul <CENTER>...</CENTER> are ca efect centrarea rapida a textului.
{Are acelasi efect ca marcajul <P align="center">...</P>}
Exemplu:
<HTML>
<HEAD>
<TITLE> Formatare paragraf intr-un document HTML
</TITLE>
</HEAD>
<BODY>
<CENTER> Salut! </CENTER>
<P>Ma numesc Alina si sunt eleva la un liceu din Craiova. Acum este tare tarziu, dar cum
somnul intarzie sa vina iata-ma hai-hui pe internet. </P>
<P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internet
viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, internetul
in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P>
<P>Daca tu, draga mea prietene de pe internet, m-ai putea ajuta cu cateva sugestii in
realizarea acestui referat ti-as ramane indatorata.</P>
</BODY>
</HTML>
8

FORMATAREA FONT-URILOR
Un font reprezinta un set de caractere (256) cu un aspect grafic unitar.
Stiluri de afisare: ingrosat, inclinat, subliniat.
Marcajul <B>...</B> este folosit daca vrem ca un cuvant sau o portiune din text sa ne
apara ingrosat.
Marcajul <I>...</I> este folosit daca vrem ca un cuvant sau o portiune din text sa ne
apara ingrosat.
Marcajul <U>...</U> este folosit daca vrem ca un cuvant sau o portiune din text sa ne
apara subliniat.
Nivele de titlu
Marcajele <Hn>...</Hn> pun in evidenta nivelele de subtitlu al unui document; n poate lua
valori de la 1 la 6. Cel mai inalt nivel este 1, apoi nivelul descreste pana la nivelul 6, nivelul 6 fiind cel
mai mic nivel.
Alegerea tipului de font
Marcajul <FONT>...</FONT> impreuna cu optiune face (ce va primi ca valoare numele
fontului ce intentionam sa-l folosim incadrat de ghilimele) -> permite alegerea tipului de font cu care
dorim sa fie afisat textul.
<FONT face="Courier, Arial">...</FONT>
Alegerea dimensiunii caracterelor
Marcajul <FONT>...</FONT> impreuna cu optiune size (ce va primi ca valoare un numar
incadrat intre ghilimele).
<FONT face="Courier,Arial" size="4">...</FONT>
Alegerea culorii font-ului
Marcajul <FONT>...</FONT> impreuna cu optiune color. Valoarea acestei optiuni va fi
numele in limba engleza incadrat de ghilimele sau codul culorii precedat de semnul # si incadrat, de
asemenea, de ghilimele.
<FONT face="Courier,Arial" size="4" color="red">...</FONT>
<FONT face="Courier,Arial" size="4" color="#FF0000">...</FONT>
ALTE ELEMENTE DE STIL:
Tagul em(emphasized)
<p><em> Acest text este evideniat italic</em></p>
Tagul strong
<p><strong> Acest text este evideniat ngroat </strong></p>
Tagurile i,b,u,s
<p><i> Acest text este italic(nclinat) </i></p>
<p><b> Acest text este bold( ngroat) </b></p>
<p><u> Acest text este underlined (subliniat) </u></p>
<p><s> Acest text este strike-through (tiat) </s></p>
Tagurile small,big
<p> Ultimul cuvnt este mai<small> mic </small></p>
<p> Ultimul cuvnt este mai<big> mare </big></p>
9

Tagurile sub,sup
<p> Ultimul cuvnt este un<sub> indice </sub></p>
<p> Ultimul cuvnt este o<sup>putere</sup></p>
PREFORMATAREA TEXTULUI-pentru pstrarea formatrii tastate, se include textul ntre
tagurile <pre> i </pre>:
<pre>
Acesta este un text
Acum doresc s schimb aliniatul
Iar acum doresc s las spaiu

n text.

</pre>

LINIA ORIOZONTAL
<hr size=10 width=20% align=center />
Unde:
size-specific grosimea liniei n pixeli
width-specific limea liniei n pixeli sau procente din limea ecranului.
align-specific alinierea liniei n raport cu ecranul.
ALINIEREA UNUI BLOC DE ELEMENTE- n cazul n care se cere alinierea unui bloc de
elemente (text, imagini) se include acesta ntre tagurile < div> i </div>
LINII DE DELIMITARE SI COMENTARII
Marcajul <HR>, plasat oriunde in document, are ca efect trasarea unei linii orizontale.
Se poate folosi in combinatie cu parametrii: SIZE=optiune, WIDTH=optiune, ALIGH=optiune si
NOSHADE.
- optiunea parametrului SIZE este un numar ce stabileste grosimea liniei;
- optiunea parametrului WIDTH poate stabili cat la % din latimea paginii va ocupa rigla
respectiva;
- parametrul ALIGN se utilizeaza impreuna cu parametrul WIDTH si optiunea lui are drept efect
fortarea liniei fata de marginea specificata. Valorile posibile pentru optiune sunt left, right.
- optiunea COLOR stabileste culoarea riglei;
- prin prezenta parametrului NOSHADE, fara nici o optiune, se dezactiveaza afisarea umbrei
pentru rigla orizontala.
Comentarii
Comentariile sunt texte incadrate intre <!-- si -->.
Rolul comentariilor este de a face un document HTML mai usor de inteles prin plasarea unor
expicatii din loc in loc. Ele nu vor fi afisate in cuprinsul paginii Web creata prin documentul respectiv.
LISTE IN PAGINI WEB
Liste Ordonate (elementele sunt automat numerotate).
10

Declararea unei liste ordonate se face cu ajutorul marcajului: <OL>..</OL>


Ex. Nr.1 (LO1.html)

Efect

<OL>

1. element 1
2. element 2

<LI>element 1
<LI>element 2
<LI>element 3

3. element 3

</OL>
Ex. Nr.2 (LO2.html)
<OL TYPE=A>
<LI>element 1
<LI>element 2
<LI>element 3
</OL>
Ex. Nr.3 (LO3.html)
<OL TYPE=I START=3>
<LI>element 1
<LI>element 2
<LI>element 3
</OL>
Ex. Nr.4 (LO4.html)

Efect
A. element 1
B. element 2
C. element 3
Efect
III.
IV.

element 1
element 2

V.

element 3

III.

Efect
element 1

<OL TYPE=I START=3>


<LI>element 1
X.
<LI VALUE=10>element 2
<LI VALUE=20>element 3
XX.
<LI>element 4
</OL>
XXI.

element 2
element 3
element 4

Liste Neordonate sau liste marcate (elementele sunt marcate printr-un semn special).
Declararea unei liste neordonate se face cu ajutorul marcajului:
<UL>..</UL>.
Ex. Nr.1 (UL1.html)
<UL>
<LI> element 1
<LI> element 2
<LI> element 3
</UL>
Ex. Nr.2 (UL2.html)
<UL TYPE=circle>
<LI> element 1
<LI> element 2
<LI> element 3
</UL>

Efect

element 1
element 2

element 3
Efect

o
o

element 1
element 2

element 3

{Schimbarea simbulului care preced elementele din lista se poate face utilizand parametrul TYPE al
marcajului <UL>..</UL>, caruia i se pot asocia una dintre urmatoarele valori> disc, circle i square.}
Liste de Definitii de termeni si definitiile lor asociate.
11

Declararea unei liste ordonate se face cu ajutorul marcajului <DL>..</DL> utilizat impreuna cu
marcajul <DT> pentru termenul definit si marcajul <DD> pentru definitia propriu zisa.
Exemplu (DL.html)
<DL>
<DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate.
<DT>Date<DD>Flux nesfarsit de materiale care apar pe Internet.
<DT>Font<DD>Utilizarea particulara a unui anumit stil de caractere.
</DL>
Efect
Aldine
Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate.
Date
Flux nesfarsit de materiale care apar pe Internet.
Font
Utilizarea particulara a unui anumit stil de caractere.
Liste in liste liste imbricate
Listele pot fi coninute una ntr-alta. n proiectarea unei pagini Web trebuie avut n vedere urmtorul
lucru foarte important: informaia coninut n pagin s fie structurat astfel nct s poat fi uor de
urmrit i de gsit. n acest sens combinarea celor trei tipuri de liste este foarte util.

12

Exerciiu:
Construii o pagin Web n care s redactai propria agend telefonic utiliznd listele de definiii.
Documentul va fi salvat sub numele Agenda.html n directorul Elev al directorului rdcin.
Exemplu (Liste_imbricate.html)
<HTML>
<HEAD>
<TITLE>Liste in pagini Web</TITLE>
</HEAD>
<BODY>
<HR SIZE=30 COLOR=RED>
<IMG SRC=c:\Alina.jpg allign=right>
<H1><CENTER>Salut!</CENTER></H1>
<HR WIDTH=50%>
<UL>
<LI><H3>Date personale</H3>
<DL>
<DT>Nume:<DD>Mateescu.
<DT>Prenume:<DD>Alina
<DT>Data nasterii:<DD>12_04_1985
<DT>Profesia:<DD>Eleva anul II la Colegiu
</DL>
<LI><H3>Stare emotionala</H3>
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe internet.
<P><LI><H3>Preocupari actuale</H3>
Saptamana viitoare trebuie s prezint la ora de engleza un referat cu urmatoarele caracteristici>
<UL>
<LI>Tema- "Internet viitorul omenirii?"
<LI>Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata omului
viitorului
<LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie
</UL>
<LI><H3>Sugestii</H3>
Daca tu, draga prietene de pe internet, m-ai putea ajuta cu cateva sugeestii in realizarea acestui
referat ti-as ramane indatorata. <P>
</UL>
<HR WIDTH=20% ALLIGN=left NOSHADE><H3>Alina</H3><P>
<I>alina@k.ro</I><HR COLOR=RED>
</BODY>
</HTML>

13

Efect

Salut!

Date personale
Nume:
Mateescu.
Prenume:
Alina
Data nasterii:
12_04_1985
Profesia:
Eleva anul II la Colegiu

Stare emotionala
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe internet.

Preocupari actuale
Saptamana viitoare trebuie s prezint la ora de engleza un referac cu urmatoarele caracteristici>
Tema- "Internet viitorul omenirii?"
Continutul:-implicatiile pe care le are informatica si, in special, internetul in viata omului
viitorului
o Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie
Sugestii
o
o

Daca tu, draga prietene de pe internet, m-ai putea ajuta cu cateva sugeestii in realizarea acestui
referat ti-as ramane indatorata.

Alina
alina@k.ro

14

INSERAREA TABELELOR
PRINCIPALELE TAGURI FOLOSITE LA REALIZAREA TABELELOR:
AMERICA DE SUD TITLUL
STAT

CAPITAL

BOLIVIA
COLUMBIA
ECUADOR

LA PUZ
BOGOTA
QUITO

POPULAIE ANTET
(milioane)
7,3
CELUL
32,9
10,6

Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar n interiorul acestui marcaj se
utilizeaz marcajele:
<TR>..</TR> pentru definirea unei linii a tabelului;
<TH>..</TH> pentru definirea antetului tabelului;
<TD>..</TD> pentru definirea datei unei cellule a tabelului.
Parametrii marcajului <TABLE>
BORDER=n permite definirea
zonei umbrite din jurul tabelului (n,
nr. ntreg).
BORDER COLOR=cod_culoare
permite definirea culori zonei
umbrite.
CELLSPACING=n definete
spaiul lsat ntre celule (n, nr. ntreg pixeli).
CELLPADDING=n - definete
spaiul lsat dintre data din celul i
chenarul celulei (n, nr. ntreg - pixeli).
WIDTH=n permite definirea
limii dorite a tabelului (n, n pixeli
sau n procente).
HEIGHT=n permite definirea
nlimii dorite a tabelului (n, n
pixeli sau n procente).

Parametrii marcajului <TD>

COLSPAN=n permite unei celule s se extind


pe mai multe coloane.
ROWSPAN=n permite unei celule s se
extind pe mai multe rnduri.
GBCOLOR=culoare permite definirea culorii
de fond a unei celule.
ALIGN=pozitie specific alinierea orizontal a
datei din celul. Opiunile posibile sunt: Left,
Right, Center.
BACKGROUND=fisier_imagine permite
specificarea unei imagini grafice de fond n
interiorul unei cellule.

Ex. Nr. 1 (Tabel1.html)


<HTML>
<HEAD>
<TITLE>Tabele</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR><TH>Nume</TH>
<TH>Prenume</TH>
<TH>Media</TH>
<TR><TD>Petcu</TD>
15

Efect
Nume Prenume Media
Petcu Ionut 8.20

<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
Ex. Nr. 2 (Tabel2.html)

Efect

<HTML>
<HEAD>
<TITLE>Tabele</TITLE>
</HEAD>
<BODY>
<TABLE BORDER COLOR=RED>
<TR><TH>Nume</TH>
<TH>Prenume</TH>
<TH>Media</TH>
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>

Nume Prenume Media


Petcu Ionut

8.20

Ex. Nr. 3 (Tabel3.html)


<HTML>
<HEAD>
<TITLE>Tabele</TITLE>
</HEAD>
<BODY>
<TABLE BORDER HEIGHT=100 WIDTH=100>
<TR><TH rowspan=2 bgcolor=lightblue>Candidat</TH>
<TH>Nume</TH>
<TH>Prenume</TH>
<TH>Media</TH>
<TR><TD>Petcu</TD>
<TD>Ionut</TD>
<TD>8.20</TD>
</TABLE>
</BODY>
</HTML>
Efect
Candidat

Nume Prenume Media


Petcu

Ionut

CARACTERISTICI ALE TABELELOR


16

8.20

DIMENSIUNEA TABELELOR- se precizeaz , prin atributul WIDTH al


tagului TABLE, n mod absolute (n pixeli), sau relativ (n procente din dimensiunea ferestrei). n cazul
n care nu se precizeaz browser-ul decide. Acelai atribut se poate include n tagurile specifice antetului
TH ,respective al celulelor TD, avnd effect asupradimensiunii coloanelor.
Atributul CELLPADDING , respective CELLSPACING al tagului
TABLE precizeaz distana dintre coninutul celulei i marginile ei, respective al distanei dintre cellule.
Atributul BORDER al tagului TABLE precizeaz grosimea
chenarului care nconjoar tabela.
COLORAREA TABELELOR- se precizeaz culoarea de fundal a unei
tabele ,respectiv al unui rnd ntreg, sau al unei celule prin intermediul tagului BGCOLOR al tagurilor
TABLE,TR, respective TD.
ALINIEREA TABELELOR- se precizeaz , prin intermediul atributului
ALIGN,

alinierea tabelei n pagin (dac atributul se afl n tagul TABLE),respective al titlului

(CAPTION), al coninutului rndului(TR),al coninutului antetului (TH), etc.


IMBRICAREA TABELELOR- reprezint includerea ntr-o celul a unei tabele a
altei tabele.
Exemplu :
<table border=1>
<caption>EXEMPLE DE SGEI</caption>
<tr>
<th>SGEI LA STNGA</th>
<th> SGEI LA DREAPTA</th>
</tr>
<tr>
<td> <table border=1>
<tr>
<th><img src=imag1.gif /></th>
<th> <img src=imag2.gif /></th>
</tr>
</table>
</td>
<td> <table border=1>
<tr>
<th><img src=imag3.gif /></th>
<th> <img src=imag4.gif /></th>
</tr>
</table>
</td>
</tr>
</table>

LEGTURI
17

Principala caracteristic a hipertextelor o constituie legturile (links).


Un link este o conexiune ctre alt resurs Web, resurs care poate fi accesat din fereastra
browser ului printr-un singur clic.
Marcajul principal att pentru referinele interne ct i pentru cele externe este: <A></A>
(anchor- ancor), acesta trebuie s conin parametrul HREF=valoare, fr de care nu are nici un sens.
CREAREA LEGTURILOR-referirea paginilor n interiorul unui sit adic salt la
nceputul unei pagini la clic pe un link din alt pagin.
Structura unei astfel de legturi:
<a href=referina>hot-spot</a>
<html>
<head>
<title> TOMIS </title>
</head>
<body>
<h2>TEZAURUL DE SCULPTURI</h2>
<p>
Tezaurul.......in Constanta ,
<a href=dicto.html>anticul Tomis</a>
,cu prilejul.de marmura.
</p>
</body></html>

CREAREA ANCORELOR-referirea unui punct oarecare din pagina curent.


Structura unei astfel de legturi:
<a name=nume_fiier#nume_ancor> </a>

Brancus

Constantin Brancus

<a href=arta.html#unu>
Vezi Brancus
</a>
<a name=unu>
<p> Constantin Brancus</p>
</a>

Legtur
Ancor

IMAGINE-pentru a fi recunoscute de Browser trebuie s fie n format GIF(*.gif) sau JPEG(*.jpg


sau *.jpeg) i pot fi create cu editoare de imagini cum ar fi:Microsoft Photo Editor,Adobe
Photoshop,Paint Shop Pro,Corel Draw,etc.
IMAGINI INLINE-imaginea face parte din pagin ,deci apare odat cu deschiderea
paginii.
Structura necesar includerii unei imagini n acest mod este:
<img src=referina /> sau <img src=referina alt=TRANDAFIR />
18

alt reprezint alternativa n cazul n care Browser-ul nu poate reda imaginea sau calea spre fiierul
respectiv este greit !!!
POZIIA RELATIV IMAGINE-TEXT
n cazul n care imaginea este inclus n cadrul unui paragraf se poate preciza modul
de aliniere a textului relativ la imagine:
Secvena HTML

Pagina Web

<p> Aceasta
<img src=computers.gif / align=top>
este o main? </p>

Aceasta

<p> Aceasta
<img src=computers.gif / align=middle>
este o main? </p>

Aceasta

<p> Aceasta
<img src=computers.gif / align=bottom>
este o main? </p>

Aceasta

<p> Aceasta este o main?


<img src=computers.gif / align=center>
</p>

este o main?

este o main?

este o main?

Aceasta este o main?

<p>
<img src=computers.gif / align=center>
Aceasta este o main? </p>

Aceasta este o main?

<img src=computer.gif align=left />


<h1>Computerul</h1>
<br clear=left />
<p>Computerul este.diverse componente.</p>
<img src=computer.gif align=left hspace=15
vspace=15 />
<h1>Computerul</h1>
<br clear=left />
<p>Computerul este.diverse componente.</p>

19

Computerul
Computerul este.diverse componente.

Computerul

Computerul este.diverse componente.

Pentru a nconjura imaginea cu text se folosesc una din atributele: align=left sau align=right
i se folosete ultima alternativ din tabel.
Combinaie a atributelori alt al tagului img i clear al tagului br precizeaz mai exact poziia
imaginii relativ la text.
Se poate preciza spaiul liber din jurul imaginii prin atributele hspace (spaiu orizontal) i vspace
(spaiu vertical) ale tagului img.
Legturi la o alt pagin a sit-ului prin intermediul imaginii:
<a href=detalii.html><img src=Computerul.gif /></a>
Scalarea imaginii inline-prin intermediul atributelor width i height al tagului
img; aceasta poate fi mrit sau micorat n raport cu imaginea surs creat cu editorul de imagini:

Apare imaginea scalat fr cea real ,sau mpreun cu cea real dac se

folosesc dou taguri img pentru cea nedimensionat i cea dimensionat.


<img src=Computerul.gif width=101 height=210 />

Se realizeaz dou fiiere cu fiecare dimensiune a imaginii i apoi sunt

ncrcate de Browser prin atributul lowscr al tagului img (efectul nu este vizibil la afiarea imaginii pe
un sit local!):
<img src=real.gif lowersrc=redus.gif />
IMAGINI EXTERNE- ncrcat i afiat la cererea utilizatorului.
Structura necesar includerii unei imagini n acest mod este:
<a href=nume_fiier referit><img src=nume_fiier imaginea folosit ca hot_spot,
existent n pagin alignleft /></a>
<html>
<head>
<title> MODEM </title>
</head>
<body>
<h2>STRUCTURA MODEM-ului</h2>
<a href=C:\MODEM.gif><img src=CLIP.gif align=left></a>
</p> MODEM <br />(fiier GIF 56K)</p>
<p> Computerul.</p>
</body></html>

IMAGINI PENTRU FOND(BACKGROUND)-ncarc o culoare de fond sau o imagine


i este introdus prin atributul bgcolor, respectiv background al tagului body:
Structura necesar includerii unei culorii de fond:
<body bgcolor=yellow> sau <body background=img1.jpg>
20

Identificarea culorilor :
VALOARE

CULOARE

DENUMIRE

NEGRU
ALB
ROU
ARGINTIU
GRI

BLACK
WHITE
RED
SILVER
GRAY

#rrggbb
#000000
#FFFFFF
#FF0000
#C0C0C0
#808080

CASTANIU

MAROON

#800000

VALOARE

CULOARE

DENUMIRE

VERDE
GALBEN
ALBASTRU
VERNIL
MSLINIU
ALBASTRU

GREEN
YELLOW
BLUE
LIME
OLIVE

#rrggbb
#008000
#FFFF00
#0000FF
#00FF00
#808000

NAVY

#000080

MARIN

CADRE (FRAME)- necesare n cazul unui coninut mare de informaii diversificate, ajutnd la
accesarea rapid a informaiilor dorite , fr a fi nevoii s parcurgem liniar paginile pn la informaia
dorit.
Practic aceast facilitate este asigurat prin mprirea ferestrei n dou , trei sau mai multe cadre
(frame), fiecare din acestea reprezentnd o pagin Web cu coninut propriu. Unul din aceste cadre este fix
i conine meniul (cuprinsul) care are legturi la fiecare cadru al ferestrei.
Exemplu de structurare a ferestrei n cadre:

Pentru exemplul de mai sus sunt necesare patru documente Web, unul pentru fiecare cadru , iar
unul care s precizeze structura cadrelor n fereastra browser-ului.

Pagina care definete structura cadrelor :


<FRAMESET ROWS=75,*>
<FRAME SRC="TITLU.HTM">
<FRAMESET COLS="240,*">
<FRAME SRC="MENU.HTM" NORESIZE>
<FRAME NAME="STANGA" SRC="FIZICA.HTM" >
</FRAMESET>
</FRAMESET>

Pagina care definete cadrul care conine meniul (cuprinsul)-pagina din stnga :
21

<html>
<head>
<title> PREZENTARE </title>
</head>
<body BGCOLOR="NAVY" TEXT="WHITE" LINK="LIME" VLINK="GREEN" ALINK="SILVER">
<a href="D:\MURESAN1\LENTILE.PPS" target="dreapta">LENTILE</a>
<HR size="2" />
<a href="D:\MURESAN1\APARATE OPTICE.PPS" target="dreapta">APARATE OPTICE</a>
<HR size="2" />
<a href="D:\MURESAN1\TERMODINAMICA.PPS" target="dreapta">TERMODINAMICA</a>
<HR size="2" />
<a href="D:\MURESAN1\OSCILATII.PPS" target="dreapta">OSCILATII</a>
<HR size="2" />
<a href="D:\MURESAN1\UNDE.PPS" target="dreapta">UNDE</a>
<HR size="2" />
<a href="D:\MURESAN1\SUNETUL.PPS" target="dreapta">SUNETUL</a>
<HR size="2" />
<a href="D:\MURESAN1\HIDROSTATICA.PPS" target="dreapta">HIDROSTATICA</a>
<HR size="2" />
<a href="D:\MURESAN1\ELECTROMAGNETISM.PPS" target="dreapta">ELECTROMAGNETISM</a>
<HR size="2" />
<a href="D:\MURESAN1\lentile.exe" target="dreapta">PROIECT DELPHI</a>
<HR size="2" />
<a href="D:\MURESAN1\proiectfiz\Project1.exe" target="dreapta">PROIECT C++BUILDER</a>
<HR size="2" />
<p ALIGN="CENTER">COMUNICARI LA ADRESA:</P>
<A HREF="mailto:sylva_carmen15@yahoo.com">sylva_carmen15@Yahoo.com</a>
<bgsound src="D:\MURESAN1\vivaldi3.wav" loop="-1" />
</body>
</html>

Pagina care conine titlul cu un banner derulant:

<html>
<body bgcolor="black" TEXT="WHITE">
<DIV ALIGN="CENTER">
<center><MARQUEE
SCROLLAMOUNT=4

DIRECTION=LEFT

WIDTH=800

SCROLLDELAY=10

HEIGHT=3

BGCOLOR=black><P

VSPACE=5

HSPACE=5

><EM><H2>COLEGIUL

ECONOMIC "NICOLAE TITULESCU" BAIA MARE</H2></EM></P></MARQUEE> </center>


</body>
</html>

Pagina corespunztoare cadrului din dreapta conine aplicaiile care sunt referite de

pagina de meniu.
22

Observaii:
1.

Documentul frameset nu conine seciunea body ci doar seciunea frameset.

2.

n tagul de intrare <frameset> se cere ca fereastra browser-ului s fie decupat n dou

rnduri (rows) i apoi n dou coloane (cols).


3.

Fiecare cadru este definit cu tagul frame.

4.

n tagul frame se declar:


a. Referina paginii care va fi afiat (src);
b. Numele cadrului (name).
Tagul base este folosit cnd, dintr-o pagin, se creeaz mai multe legturi pentru care se

specific acelai cadru:


<html>
<head>
<title> PREZENTARE </title>
<base target=dreapta>
</head>
<body BGCOLOR="NAVY" TEXT="WHITE" LINK="LIME" VLINK="GREEN" ALINK="SILVER">
<a href="D:\MURESAN1\LENTILE.PPS" >LENTILE</a>
<HR size="2" />
<a href="D:\MURESAN1\APARATE OPTICE.PPS" >APARATE OPTICE</a>
<HR size="2" />
<a href="D:\MURESAN1\TERMODINAMICA.PPS" >TERMODINAMICA</a>
<HR size="2" />
<a href="D:\MURESAN1\OSCILATII.PPS">OSCILATII</a>
<HR size="2" />
<a href="D:\MURESAN1\UNDE.PPS" >UNDE</a>
<HR size="2" />
<a href="D:\MURESAN1\SUNETUL.PPS >SUNETUL</a>
<HR size="2" />
<a href="D:\MURESAN1\HIDROSTATICA.PPS" >HIDROSTATICA</a>
<HR size="2" />
<a href="D:\MURESAN1\ELECTROMAGNETISM.PPS" > ELECTROMAGNETISM</a>
<HR size="2" />
<a href="D:\MURESAN1\lentile.exe" >PROIECT DELPHI</a>
<HR size="2" />
<a href="D:\MURESAN1\proiectfiz\Project1.exe">PROIECT C++BUILDER</a>
<HR size="2" />
<p ALIGN="CENTER">COMUNICARI LA ADRESA:</P>
<A href="mailto:sylva_carmen15@yahoo.com">sylva_carmen15@Yahoo.com</a>
<bgsound src="D:\MURESAN1\vivaldi3.wav" loop="-1" />
</body>
</html>

23

ATRIBUTELE
Tagului frameset

DESCRIEREA ACIUNII REALIZATE


Limea unei coloane dintr-o configuraie de cadre (n pixeli , procente spaiul rmas

cols

*)
nlimea unei linii dintr-o configuraie de cadre (n pixeli , procente spaiul rmas

rows
frameborder
bordercolor

*)
Prezena (valoarea 1) sau absena (valoarea 0) a marginilor n jurul cadrelor
configuraiei
Culoarea marginilor cadrelor configuraiei

ATRIBUTELE
Tagului frame
src
name
noresize

DESCRIEREA ACIUNII REALIZATE


Referina paginii implicite a cadrului
Numele cadrului
Interdicia ca utilizatorul s modifice dimensiunea cadrului
Afiarea sau nu a barelor de defilare pentru cadru (valorile sunt yes,no,

scrolling

auto)
Distana , pe orizontal, ntre coninutul cadrului i margini
Distana , pe vertical, ntre coninutul cadrului i margini

marginwidth
marginheight

( n pixeli)
( n pixeli)

FORMULARE asigur crearea paginilor web interactive. n general sunt folosite pentru
preluarea datelor de la utilizator (n vederea efecturii unei comenzi pentru diferite produse). Un formular
este constituit din elemente speciale numite controale (CONTROLS): butoane radio,butoane de validare,
meniuri, casete de text, prin intermediul crora utilizatorul transmite informaii server-ului care gzduiete
pagina web.
nserarea unui formular ntr-un document web se realizeaz prin etichetele <Form>..</Form> ,
ntre care sunt incluse controalele.
ELEMENTE DE CONTROL :
Tagul INPUT permite inserarea unor elemente de control n funcie de valorile
asociate atributelor sale:
NAME=ir de caractere (asociaz controlului un nume)
VALUE=ir de caractere (specific o valoare iniial; strict necesar n cazul grupului de
butoane radio)
TYPE=TEXT PASSWORD CHECKBOX RADIO SUBMIT RESET FILE HIDDEN
IMAGE BUTTON (specific tipul elementului de control creat).

SINTEZA TIPURILOR DE CONTROALE :


Control
Text
Password

Aciune utilzator
Introducerea unui text de volum redus
Introducerea uni text de volum redus, care apare, pe ecran,

24

Tag
Input
Input

Control
Submit
Reset
Push
Checkbox
Radio
Textarea
Menu

Aciune utilzator
mascat cu *
Activare (pentru a transmite informaiile nscrise n formular
ctre server)
Activare (pentru a restabilii valorile iniiale ale tuturor
controalelor formularului)
Activare (pentru a executa o aciune definit de autorul
formularului)
Bifare (pentru selecie multipl a unor opiuni)
Bifare (pentru selecie unei singure opiuni dintr-o list de
opiuni)
Introducerea unui text de volum mare
Alegerea unei opiuni dintr-un meniu

Controlul text:
<p> Numele si prenumele:
<INPUT TYPE=TEXT NAME="nume">

Efect :

Numele si prenumele:

Radu Maria

Controlul password :
<P><I>NUME UTILIZATOR</I>
<INPUT TYPE=TEXT NAME="utilizator">
<P><I> PAROLA</I>
<INPUT TYPE=PASSWORD NAME="parola">

Efect:
NUME UTILIZATOR
PAROLA

Radu Maria

****

Controlul Submit :
<P><INPUT TYPE=SUBMIT VALUE="Inscrie-ma">

Controlul Reset:
<INPUT TYPE=RESET VALUE="Anulez">

Controlul Checkbox :
<P> Selectati cursurile la care doriti sa va inscrieti </P>
<BR>
<INPUT TYPE=CHECKBOX VALUE="1">
PROGRAMARE VISUAL C++ <BR>
<INPUT TYPE=CHECKBOX VALUE="2"CHECKED>
PROGRAMARE JAVA <BR>
<INPUT TYPE=CHECKBOX VALUE="3"CHECKED>
WEB DESIGN <BR>
<INPUT TYPE=CHECKBOX VALUE="4">ALTELE<BR>

25

Tag
Input
Input
Input
Input
Input
Textarea
Select, option

Efect:
Selectati
PROGRAMARE

cursurile

la

care

doriti

sa

VISUAL

PROGRAMARE

va

inscrieti

C++
JAVA

WEB

DESIGN

ALTELE
Controlul Radio :
<p> Aveti calculator acasa ?
<P><INPUT TYPE=radio name ="da" checked>DA
<P><INPUT TYPE=radio name = "da">NU

Efect:
Aveti calculator acasa ?
DA
NU
Controlul Textarea :
<p>FORMULATI SUGESTIILE DUMNEAVOASTRA:</P>
<TEXTAREA NAME="tal"></TEXTAREA>

Efect:
FORMULATI SUGESTIILE DUMNEAVOASTRA:

Controlul Menu :
SPECIFICATI FORMA DE PLATA
<SELECT NAME="plata">
<OPTION VALUE="visa"> VISA CARD</OPTION>
<OPTION SELECTED VALUE="master"> MASTER CARD</OPTION>
<OPTION VALUE="euro"> EURO</OPTION>
</SELECT>

Efect:
SPECIFICATI FORMA DE PLATA
Dac se adaug n tagul SELECT i atributul SIZE=2 , browser-ul se va vizualiza
astfel:
SPECIFICATI FORMA DE PLATA
26

Pentru a permite selectarea mai multor elemente din list se mai adaug atributul
MULTIPLE.
PRINIPALELE CONTROALE ALE FORMULARELOR
CONTROL

TAG

Text
Password
Submit
Reset
Checkbox
Radio
Textarea
Menu

Input
Input
Input
Input
Input
Input
Textarea
Select,option

ATRIBUTE
OBLIGATORII
Type ,name
Type ,name
Type
Type
Type ,name
Type ,name
Name
Name

ATRBUTE
OPIONALE
Value, size, maxlength
Size, maxlength
Value
Value

Cols, rows
Size, multiple, value

TEHNICA TABELELOR N PREZENTAREA FORMULARELOR


Se utilizeaz o structur tabelar pentru poziionarea corect a controalelor:
<form>
<table>
<tr>
<td>Nume</td>
<td><input type="text" name="a" /></td>
</tr>
<tr>
<td>Glicemie</td>
<td><input type="password" name="b" /></td>
</tr>
<tr>
<td>Azi vrei desert? </td>
<td align="center">DA
<input type="radio" name="c" />NU
<input type="radio" name="c" /></td>
</tr>
<tr>
<td>Prajituri preferate</td>
<td align="center">
<select name="d">
<option> Cu ciocolata</option>
<option> Cu fructe</option>
<option> Cu frisca</option>
</select>
</td>
</tr>
<tr>
<td>Alte comentarii</td>
<td align="center">
<textarea name="e">
</textarea>
27

</td>
</tr>
<tr bgcolor=f6d324>
<td align="right">
<input type="reset" />
</td>
<td align="left">
<input type="submit" />
</td>
</tr>
</table>
</form>
Efect :
Nume

munteanu

Glicemie

****

Azi vrei desert?

DA

NU

Prajituri preferate
Alte comentarii

Reset

Submit Query

UTILIZAREA FORMULARELOR
nainte de a proiecta un formular trebuie s luai legtura cu furnizorul dumneavoastr de servicii
pentru a afla ce scripturi CGI v pune la dispoziie i adresele lor pe server.
O dat activat butonul Submit,nu mai avem de a face cu o prelucrare HTML ci cu un proces care
va depinde de programe numite Common Gateway Interface sau scripturi CGI ,rezidente pe server-ul
Web.
Pentru accesarea acetor programe de prelucrare a datelor, n tagul de intrare Form se vor introduce
atributele ACTION i METHOD:
o Prin atributul ACTION furnizm URL-ul scriptului CGI care va prelucra datele.
ACTION=http://alpha.com/program.cgi
o Exist dou moduri de transmitere a datelor precizate prin valorile atributlui METHOD:

Dac formularul a fost proiectat pentru un sondaj de opinii, de exemplu o statistic

a preferinelor n pictur, se folosete valoarea POST. La adresa http://alpha.com/program1.cgi exist


un script care tie s fac aceast prelucrare, iar tagul de intrare va arta astfel:
form action=http://alpha.com/program1.cgi method=post
28

Dac formularul a fost prelucrat pentru a efectua o cutare, activitate specific

motorelor de cutare, se folosete valoarea GET .La adresa http://alpha.com/program2 exist un script
care poate efectua cutarea atunci tagul de intrare va arta astfel:
form action=http://alpha.com/program2 method=get
Dac , de

exemplu utilizatorul a bifat postimpresionism, la activarea

butonului submit scriptul CGI i va furniza irul de caractere: http://alpha.com/program2/search?


curent=postimpresionism

O utilizare particular a formularelor este aceea de a transmite datele la o adres de

e-mail. n acest caz tagul de intrare arat astfel:


form action=mailto:mdraghici@pcnet.ro method=post
Activarea butonului submit va avea ca efect transmiterea pe adresa respectiv a
mesajului curent=postimpresionism.
Not: Utilizai aceast form pentru a verifica formularele pe care le proiectai.
SINTETIZAREA MODURILOR DE TRANSMITERE A FORMULARELOR

EFECT
STATISTIC
CUTARE
E-MAIL

ATRIBUT
ACTION
METHOD
ACTION
METHOD
ACTION
METHOD

VALOARE
URL-ul
POST
URL-ul
GET
MAILTO: adresa de e-mail
POST

MAPAREA IMAGINILOR - este o imagine ce conine zone care funcioneaz ca hot-spoturi,


adic la activarea unei astfel de zone se realizeaz un salt ntr-un punct al unei pagini.
n funcie de cine interpreteaz coordonatele zonei activate prin clic i execut aciunea
corespunztoare, exist dou moduri de mapare:
1. CLIENT(Client-side)-harta grafic este interpretat de ctre Browser, definirea zonelor
senzitive fiind introdus n documentul HTML. Maparea de tip client este preferabil deoarece este mai
uor de construit, nu solicit server i deci poate fi vizualizat off-line.
2. SERVER (Server-side)-harta grafic este interpretat de ctre server, cu ajutorul unui
program (de obicei de tip CGI).
Definirea unei hri
<map name=nume_hart>
<area shape=nume_form1 cords=194, 66, 15 href=adresa_fi1.html>

29

<area shape=nume_formn cords=294, 100, 15 href=adresa_fin.html>


</map>

ATRIBUTELE TAGULUI AREA

ATRIBUT
SHAPE
COORDS
HREF

DEFINETE
Forma geometric a zonei (cerc, dreptunghi, poligon)
Coordonatele formei geometrice
Referina locului ctre care se face saltul

DEPENDENA VALORILOR ATRIBUTULUI COORDS DE VALORILE


ATRIBUTULUI SHAPE
Forma geometric dorit
R

Shape

Coords

CIRCLE

X,Y,R

RECT

X1,Y1,X2,Y2

POLY

X1,Y1,X2,Y2,,Xn,Yn

X,Y
X1,Y1
X2,Y2
X1,Y1
X5,Y5
X4,Y4

X2,Y2
X3,Y3

Asocierea unei hri la o imagine


Pentru a asocia unei imagini o hrt grafic avem nevoie de un fiier coninnd imaginea
i un fiier *.html, iar apoi vom urma paii:
o Includem imaginea n pagina html
o Asociem harta imaginii
<img src=cale fiier_imagine usemap=#nume_hart>
Editoare de ImageMap-uri
Un astfel de editor efectueaz urmtorele procese:

Deschide o pagin html n care este inserat o imagine;

Cere programatorului s traseze, pe fondul imaginii forme geometrice i s

specifice, pentru fiecare zon, pagina html la care se face saltul;

Genereaz automat secvena html pentru ImageMap-ul respective i o salveaz n

pagina html de la care s-a pornit.


Ca editoare de ImageMap-uri avem MAPEDIT (la adresa: www.boutell.com/mapedit/),
FIREWORKS, FLASH MS etc.

30

MULTIMEDIA N WEB
Un SISTEM MULTIMEDIA este un ansamblu de informaii consemnate n orice form -text,
grafic, video, animaie, sunet, applet-uri Java - ntre care exist legturi. n acest seciune vom studia
modul de includere a fiierelor video i sunet. Productorii de software s-au orientat pe dou direcii n
vederea crerii de fiiere multimedia:
Aplicaii specifice numite PLAYERE. Un player este capabil s ruleze unul sau mai multe
tipuri de fiiere multimedia. De exemplu, Microsoft Media Player ruleaz fiiere video (MPEG, MPG,
MPE, AVI) i fiiere audio(WAV).
Programe numite PLUG-IN, care se cupleaz la browser i i mbogesc funcionalitatea.
Un plug-in multimedia este creat pentru un anumit browser i pentru unul sau mai multe tipuri de fiiere.
(de ex. Npavi32.dll permite rularea fiierelor avi n Netscape Navigator ).
MIME (Multipurpose Internet Mail Extension)-este un nume care desemneaz un grup de
fiiere, de obicei create cu acelai mediu de dezvoltare.
Tipuri MIME uzuale
Tipul MIME
Video/msvideo

Extensii
AVI

Video/mpeg

MPEG, MPG

Video/quicktime
Audio/wav
Audio/aiff
Audio/x-mpeg.mp3

MOV, QT
WAV
AIF, AIFF, AIFC
MP3

Fiiere create cu
Microsoft Windows Movie
MPEG Movie
(Motion Picture Experts Group)
Quick Time Video
Windows Wav Audio
AIFF audio
MP3 audio

Metode pentru utilizarea clipurilor ntr-o pagin Web


Crearea unei legturi dintr-un punct al paginii Web ctre fiier. Clipul este afiat n urma
activrii hot-spotului corespunztor.
Exemplu : <a href=nume_fiier.extensie>Vizualizai clipul</a>
Includerea fiierului n pagina Web. Fiierul este ncrcat odat cu pagina Web.
o
ATRIBUT
SRC
TYPE
WIDTH
HEIGHT
HSPACE
VSPACE
ALIGN

Includerea clipurilor video/audio-utiliznd tagul nepereche embed:


DESCRIEREA ACIUNII REALIZATE
Referina fiierului care urmeaz s fie inclus
Tipul MIME
Limea zonei din fereastra Browser-ului rezervat pentru afiarea clipului
nlimea zonei din fereastra Browser-ului rezervat pentru afiarea clipului
Distana pe orizontal, din jurul clipului
Distana pe vertical, din jurul clipului
Alinierea clipului n pagina Web

Includerea clipurilor audio n Internet Explorer cu tagul img cu atributul dynsrc:


31

<img dynsrc=nume_fiier.extensie loop=3 start=filleopen />


Efectul liniei html de mai sus const n rularea de trei ori a clipului din fiierul dat ca
valoare a atributului dynsrc , odat cu ncrcarea paginii Web.
Atributul loop specific numrul de rulri i valoarea -1 a acestuia determin rularea
permanent a clipului ( pn la nchiderea paginii).
Atributul start specific momentuln care ncepe rularea. Valorile posibile fiind filleopen
(ruleaz simultan cu ncrcarea paginii) sau mouseover (ruleaz din momentul n care mouse-ul intr pe
suprafaa clipului).
Atributele specifice tagului img sunt admise (alt, align, border, height, width).
Observaie : Pentru cazul n care Browser-ul nu ruleaz clipul este indicat s introducei ,
prin atributul src al tagului img, imaginea clipului i o scurt informaie asupra coninutului clipului , prin
intermediul atributului alt.
o

Includerea sunetelor n background, determin rularea sunetului odat cu ncrcarea

paginii. Fiierul audio trebuie s fie de tipul AU, WAV sau MID.
Exemplu:
<html>
<head><title></title></head>
<body>
<bgsound src=camera.wav loop=-1 />
</body>
</html>
UTILIZAREA CLIPURILOR
METODA

CLIP

TAG

LEGARE
INCLUDERE
INCLUDERE
INCLUDERE

video/audio
video/audio
video
audio

a
embed
img
bgsound

ATRIBUTE
PRINCIPALE
href
src, type, width, height
dynsrc, loop, start
src, loop

BROWSER
IE,NN
IE, NN
IE
IE

Elementul OBJECT
Acest element permite creatorilor de pagini Web s specifice obiectul pe care doresc s-l
introduc n pagin(imagine, clipuri video, etc.), parametrii necesari pentru iniializarea obiectului,
precum i aplicaia necesar pentru manipularea obiectului respective.
Elementul OBJECT necesit etichet de nceput i sfrit, ntre care este plasat descrierea
obiectului i admite urmtoarele atribute principale:

32

ATRIBUT
CLASSID
CODEBASE
CODETYPE
DATA
TYPE
ARCHIVE
STANDBY
ALIGN
HEIGHT/WIDTH
HSPACE/VSPACE
BORDER
USEMAP

ROL
Specific adresa la care se gsete o implementare a obiectului respectiv
Specific adresa de baz, utilizat pentru rezolvarea adreselor URL relative asociate
atributelor CLASSID, DATA i ARCHIVE.
Specific tipul codului obiectului
Specific adresa la care se gsesc datele obiectului
Alternativ a atributului CODEBASE a crei valoare respect sintaxa:ContentType:tip/subtip; parametrii i specific tipul datelor specificate de atributul DATA
Specific o list de adrese, separate prin virgule, la care se gsesc resurse necesare obiectului
Specific mesajul care va fi afiat pe parcursul ncrcrii obiectului
Specific modul de poziionare a obiectului n raport cu textul
Specific nlimea/limea obiectului
Specific spaiul din jurul obiectului pe orizontal/vertical
Specific grosimea liniei chenarului din jurul obiectului
Adresa specific hrii grafice a unei imagini

Tipul - poate fi text, image, audio, video, application sau un simbol care
reprezint o extensie de fiier (reprezentat prin x-extensie).
Subtipul - poate fi un simbol corespunztor unei extensii de fiier.
Parametrii se specific sub forma : atribut=valoare
1.

Tipul implicit: text/plain ; charset=us-ascii

2.

Tipul aplicaie : Java-archive:application/Java-archive

3.

Tipul imagine : image/gif

Elementul APPLET
Un applet este o aplicaie de mici dimensiuni scris n limbaj Java. Dup compilarea
programului surs se obine un fiier binar executabil cu extensia class. Dei includerea unui applet se
poate face i cu elementul Object, se utilizeaz elemental applet, acesta fiind suportat de toate Browserele.
Elementul APPLET necesit etichet de nceput i sfrit i admite urmtoarele atribute:

ATRIBUT
CODEBASE
CODE
NAME
ARCHIVE
PARAM

SPECIFIC
Adresa la care se gsete applet-ul (obligatoriu un subdirector al directorului n care se gsete
documentul curent)
Nmele, eventual i calea ctre fierul care conine applet-ul
Un nume pentru acest appplet, prin care poate comunica cu alte applet-uri din acelai
document
List de URL-uri, separate prin virgule, la care se gsesc arhive ce conin clase i alte resurse
ce vor fi prencrcate
Valorile iniiale necesare executrii applet-ului

33

ATRIBUT

SPECIFIC
NAME

Numele parametrului
(cunoscut de applet)

VALUE

Valoarea atribuit parametrului


Tipul valorii parametrului:

ATRIBUTE

Data=
Object=
valoarea
valoarea
Ref=adres la
asociat
asociat
este
care se gsesc
parametru-lui
identifica-torul
valorile
este transmis
unui
applet
necesare
apletului
(obiect ), aflat
iniializrii
(reprezen-tat
n
cadrul
parame-trului
prin ir de
aceluiai
caractere)
document
Tipul resursei de la adresa specificat de atributul
VALUE (numai cnd atributul VALUETYPE are
valoarea ref)

VALUETYPE

TYPE

Exemple :
1.
<

Includerea unei imagini:

OBJECT DATA=clint.gif TYPE=image/gif>Clint</OBJECT>


2.

Declararea de obiecte imbricate:

<

OBJECT DATA=clint.mpeg TYPE=application/mpeg>


<!...daca nu, incerc gif-ul >
<OBJECT DATA=clint.gif TYPE=image/gif>
<!...daca nu vizualizez textul >
Clint</OBJECT>
</OBJECT>

3.

Icluderea unui applet:

<APPLET CODE=chess.class WIDTH=500 HEIGHT=500>


Jucati sah ?</APPLET>

Sau
<OBJECT CODETYPE=application/Java
CLASSID=Java:chess.class WIDTH=500 HEIGHT=500>
Jucati sah ?</OBJECT>

4.

Includerea unui clip audio prin intermediul unui applet:

<APPLET CODE=AudioItem WIDTH=15 HEIGHT=15>


<PARAM NAME=ce_cam VALUE=canta.au>
Applet-ul Java emite sunetul...
</APPLET>

34