Sunteți pe pagina 1din 49

Noiuni elementare n realizarea paginilor Web

Prof.Murean Carmen Silvia


1


CUPRINS

Pag.1 Noiuni generale asupra paginilor Web
Pag.5 Tabel cu taguri structurale
Pag.7 Paragrafe
Pag.8 Liste
Pag.9 Legturi
Pag.16 Imagini
Pag.12 Formatarea textului
Pag.14 Tabele
Pag.16 Cadre
Pag.20 Formulare
Pag.26 Maparea imaginilor
Pag.27 Multimedia n Web
Pag.29 Elementul Object
Pag.30 Elementul Applet
Pag.33 Identificatori

Prof.Murean Carmen Silvia
2

NOIUNI DE BAZ

INTER-REELE I INTERNET
n lume exist milioane de calculatoare.
n aceste calculatoare sunt stocate informaii.
Pentru a putea face schimb de informaii, calculatoarele sunt inter-conectate,
formnd reele de calculatoare.
Multe dintre aceste reele de calculatoare sunt conectate ntre ele, formnd inter-
reele (reele de reele de calculatoare). 0 reea de reele se numete Internet (,,net
nseamn n lirnba englez ,,reea).
Cea mai mare inter-reea public (reea de reele de calculatoare cu acces public) este
reeaua Internet.

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.
Prof.Murean Carmen Silvia
3
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.
Prof.Murean Carmen Silvia
4
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;
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).
Prof.Murean Carmen Silvia
5
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 :
Accesul la informaii;
Formatarea informaiilor;
Afiarea informaiilor.
Prof.Murean Carmen Silvia
6
Tipuri de browser: Microsoft Internet Explorer i Netscape
Navigator,HotJava.
Utilizatorul ,browser-ul Web i server-ul Web colaboreaz conform schemei:







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
Web-standard 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) :
UTILIZATOR
SERVER WEB BROWSER
WEB
Afieaz
URL-ul
paginii
Web
Solicit conectarea la server
Transmite fiierul
Prof.Murean Carmen Silvia
7
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;
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 .



Prof.Murean Carmen Silvia
8





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 ROL ATRIBUTE
Taguri
structurale
<html></html>
ncadreaz
pagina HTML

<frameset></frameset>
Descrierea unei
configura-ii de
cadre
src, name,noresize,
scrolling, marginwidth,
marginheight
<meta></meta>
Introduce
termeni pentru
motorele de
cutare pe
Internet

<head></head>
ncadreaz
antetul paginii

Prof.Murean Carmen Silvia
9
TIP TAG ROL ATRIBUTE
<title></title>
ncadreaz titlul
paginii

<body></body>
ncadreaz
coninutul
propriuzis al
paginii
bgcolor,
background,
text,link,vlink,alink.
Alte
elemente
<p></p>
ncadreaz un
paragraf

<br /> Rnd nou clear
<hr /> Linie orizontal width, color, size,align
<..! textul > sau
<// textul> sau /*.*/
Comenta-riu nu este vizibil n pagin
Elemente
referitoare
la stil
<em></em>
Scoate n
eviden textul
(de obicei italic)

<strong></strong>
Scoate n
eviden textul
(de obicei bold)

<i></i> Text italic
<b></b> Text bold
<u></u> Text subliniat
<font></font> Schimb fontul face, size, color.
Prof.Murean Carmen Silvia
10
TIP TAG ROL ATRIBUTE
textului
Heading-uri
<h1></h1>
.
<h6></h6>
ncadreaz un
text care va fi
scos n eviden.

Liste
<ol></ol> List ordonat type, start
<ul></ul> List neordo-nat
<dl></dl>
List de tip
glosar

<dd></dd>
Definiie a unui
termen al
glosarului

<dt></dt>
Termen al
glosarului

<li></li>
Element al unei
liste
value
Legturi i
ancore
<a></a> Creaz o legtur href,name
Imagini <img />
Insereaz o
imagine
src,alt,align,
hspace ,vspace, height,
width
Tabele <table></table>
ncadreaz o
tabel
border, cellspacing,
cellpadding,width
Prof.Murean Carmen Silvia
11
TIP TAG ROL ATRIBUTE
<caption></caption>
ncadreaz titlul
tabelei
align,valign
<tr></tr>
ncadreaz un
rnd al tabelei
align,valign
<th></th>
ncadreaz o
celul cap de
tabel
align,valign
<td></td>
ncadreaz o
celul a tabelei
align,valign
Formu-lare
<form></form>
ncadreaz un
formular
action, method
<input />
Definete
controale text,
password,
checkbox,
radio, submit,
reset.
type, name, value, size
maxlength
<textarea>.</textarea>
Definete un
control textarea
name, cols, rows
<select></select>
Definete un
control menu
name,size,multiple
<option></option>
Definete un
element din
value
Prof.Murean Carmen Silvia
12
TIP TAG ROL ATRIBUTE
menu
Multi-media
<a></a> Legarea unui clip href
<embed />
Includerea unui
clip
src,type,width, height
<img />
Includerea unui
clip video(IE)
dynsrc, loop, start
Cadre
<frameset>
</frameset>
Descrierea unei
confi-guraii de
cadre
Cols, rows,
frameborder,
bordercolor
<frame></frame>
Descrierea unui
cadru
src, name,noresize,
scrolling, marginwidth,
marginheight
<iframe>
Insereaz un
cadru flotant (IE)
src, name, scrolling,
marginwidth,
marginheight,
frameborder, align
<base>
Specificarea
cadrului implicit
pentru legturile
definite n pagin
target
<a></a>
Specificarea unei
legturi
href, target

Prof.Murean Carmen Silvia
13
PARAGRAFE








LISTE
LISTE ORDONATE








LISTE NEORDONATE






<html>
<head>
<title> Notiuni de HTML </title>
</head>
<body>
<p> Ce este WWW ? </p>
<p> Ce este un Browser Web ? </p>
<p> Daca doriti explicatii suplimentare <br> puteti accesa aceasta
pagina </p>
</body>
</html>
<html>
<head>
<title> Notiuni de HTML </title>
</head>
<body>
<ol type= I start=1>
<li> Ce este WWW ? </li> <..! lista incepe cu I>
<li> Ce este un Browser Web ? </li>
<li> Daca doriti explicatii suplimentare <br /> puteti accesa aceasta
pagina </li>
</ol>
</body></html>
<html>
<head>
<title> Notiuni de HTML </title>
</head>
<body>
<ul>
<li> Ce este WWW ? </li>
<li> Ce este un Browser Web ? </li>
<li> Daca doriti explicatii suplimentare <br /> puteti accesa aceasta
pagina </li>
</ul>
</body>
</html>
Prof.Murean Carmen Silvia
14










LISTE DE TIP GLOSAR-liste formate din termenul listei urmat pe alt rnd de
definirea termenului:







LISTE IMBRICATE






<html>
<head>
<title> Notiuni de HTML </title>
</head>
<body>
<dl>
<dt> Crearea paginilor Web ? </dt> <..! termenul listei>
<dd> Ned Snell,Ed.Teora </dd> <..! definirea termenului mai la dreapta>
<dt> Totul despre HTML4 </dt>
<dd> Rick Darnell,Ed.Teora </dd>
</dl>
</body></html>
<html>
<head>
<title> Notiuni de HTML </title>
</head>
<body>
<ol>
<li> IMAGINI INLINE
<ul>
<li> TAGUL IMAGINII</li>
<li> ADAUGAREA UNEI ALTERNATIVE A IMAGINII </li>
</ul>
<li/>
<li> IMAGINI SI TEXT
<dd> Rick Darnell,Ed.Teora </dd>
Prof.Murean Carmen Silvia
15









LEGTURI

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>









CREAREA ANCORELOR-referirea unui punct oarecare din pagina curent.
Structura unei astfel de legturi:
<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>

Prof.Murean Carmen Silvia
16

<a name=nume_fiier#nume_ancor> </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 />
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

Brancus




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

<a name=unu>
<p> Constantin Brancus</p>
</a>

Prof.Murean Carmen Silvia
17
Secvena HTML Pagina Web
<p> Aceasta
<img src=computers.gif / align=top>
este o main? </p>

Aceasta este o main?


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


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



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


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>

Computerul

Computerul este.diverse componente.


Prof.Murean Carmen Silvia
18
Secvena HTML Pagina Web
<img src=computer.gif align=left
hspace=15 vspace=15 />
<h1>Computerul</h1>
<br clear=left />
<p>Computerul este.diverse componente.</p>

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!):
Prof.Murean Carmen Silvia
19
<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>





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>
Identificarea culorilor :
CULOARE DENUMIRE
VALOARE
#rrggbb
CULOARE DENUMIRE
VALOARE
#rrggbb
NEGRU BLACK #000000 VERDE GREEN #008000
ALB WHITE #FFFFFF GALBEN YELLOW #FFFF00
ROU RED #FF0000 ALBASTRU BLUE #0000FF
ARGINTIU SILVER #C0C0C0 VERNIL LIME #00FF00
GRI GRAY #808080 MSLINIU OLIVE #808000
CASTANIU MAROON #800000 ALBASTRU NAVY #000080
<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>

Prof.Murean Carmen Silvia
20
MARIN

FORMATAREA TEXTULUI NTR-O PAGIN WEB
SCHIMBAREA STILULUI UNUI IR DE CARACTERE FOLOSIND TAGUL
FONT:
DIMENSIUNE
<p><font size=2 Acest text are marimea1></font></p>
<p>
Utimul cuvnt este cu caractere mai
<font size=+2 > mari </font>
</p>
FONT
<p><font face=Georgia Fontul este Georgia></font></p>
<p>
Utimul cuvnt este scris cu caractere specifice fontului
<font face=Georgia, Arial > Georgia sau Arial </font>
</p>

CULOARE
<p><font color=blue Acest text este scris n albastru></font></p>
<p>
Utimul cuvnt este scris cu culoarea
<font color=Blue > albastr </font>
</p>

ALTE ELEMENTE DE STIL:
Prof.Murean Carmen Silvia
21
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>
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
Prof.Murean Carmen Silvia
22
<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>

TABELE
PRINCIPALELE TAGURI FOLOSITE LA REALIZAREA TABELELOR:
AMERICA DE SUD TITLUL

ANTET

CELUL


<table>
<caption> AMERICA DE SUD </caption>
<tr>
<th> STAT </th>
<th> CAPITAL </th>
<th> POPULAIE<br/ >(milioane) </th>
</tr>
STAT CAPITAL
POPULAIE
(milioane)
BOLIVIA LA PUZ 7,3
COLUMBIA BOGOTA 32,9
ECUADOR QUITO 10,6
Prof.Murean Carmen Silvia
23
<tr>
<td> BOLIVIA </td>
<td> CAPITAL </td>
<td> 7,3 </td>
</tr>
<tr>
<td> COLUMBIA </td>
<td> BOGOTA </td>
<td> 32,9 </td>
</tr>
<tr>
<td> ECUADOR </td>
<td> QUITO </td>
<td> 10,6 </td>
</tr>
</table>

CARACTERISTICI ALE TABELELOR
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.
Prof.Murean Carmen Silvia
24
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>
Prof.Murean Carmen Silvia
25
<td> <table border=1>
<tr>
<th><img src=imag3.gif /></th>
<th> <img src=imag4.gif /></th>
</tr>
</table>
</td>
</tr>
</table>


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:






Prof.Murean Carmen Silvia
26
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 :








Pagina care definete cadrul care conine meniul (cuprinsul)-pagina din
dreapta :
<html>
<head>
<title> PREZENTARE </title>
</head>
<body BGCOLOR="NAVY" TEXT="WHITE" LINK="LIME" VLINK="GREEN" ALINK="SILVER">
<a href="LENTILE.PPS" target="dreapta">LENTILE</a>
<HR size="2" />
<a href="APARATE OPTICE.PPS" target="dreapta">APARATE OPTICE</a>
<HR size="2" />
<a href="TERMODINAMICA.PPS" target="dreapta">TERMODINAMICA</a>
<HR size="2" />
<a href="OSCILATII.PPS" target="dreapta">OSCILATII</a>
<HR size="2" />
<a href="UNDE.PPS" target="dreapta">UNDE</a>
<HR size="2" />
<FRAMESET ROWS=75,*>
<FRAME SRC="TITLU.HTM">
<FRAMESET COLS="240,*">
<FRAME SRC="MENU.HTM" NORESIZE>
<FRAME NAME="dreapta"
SRC="FIZICA.HTM" >
</FRAMESET>
</FRAMESET>

Prof.Murean Carmen Silvia
27
<a href="SUNETUL.PPS" target="dreapta">SUNETUL</a>
<HR size="2" />
<a href="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" />
<p ALIGN="CENTER">COMUNICARI LA ADRESA:</P>
<A HREF="mailto:sylva_carmen15@yahoo.com">sylva_carmen15@Yahoo.com</a>
<bgsound src="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 DIRECTION=LEFT WIDTH=800 HEIGHT=3 VSPACE=5
HSPACE=5 SCROLLAMOUNT=4 SCROLLDELAY=10 BGCOLOR=black><P >
<EM><H2>COLEGIUL ECONOMIC "NICOLAE TITULESCU" BAIA
MARE</H2></EM></P></MARQUEE> </center>
</div>
</body>
</html>
Pagina corespunztoare cadrului din dreapta conine aplicaiile care
sunt referite de pagina de meniu.
Observaii:
1. Documentul frameset nu conine seciunea body ci doar seciunea frameset.
Prof.Murean Carmen Silvia
28
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="LENTILE.PPS" >LENTILE</a>
<HR size="2" />
<a href="APARATE OPTICE.PPS" >APARATE OPTICE</a>
<HR size="2" />
<a href="TERMODINAMICA.PPS" >TERMODINAMICA</a>
<HR size="2" />
<a href="OSCILATII.PPS">OSCILATII</a>
<HR size="2" />
<a href="UNDE.PPS" >UNDE</a>
<HR size="2" />
<a href="SUNETUL.PPS >SUNETUL</a>
<HR size="2" />
<a href="HIDROSTATICA.PPS" >HIDROSTATICA</a>
<HR size="2" />
<a href="ELECTROMAGNETISM.PPS" > ELECTROMAGNETISM</a>
Prof.Murean Carmen Silvia
29
<HR size="2" />
<a href="lentile.exe" >PROIECT DELPHI</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>
ATRIBUTELE
Tagului frameset
DESCRIEREA ACIUNII REALIZATE
cols
Limea unei coloane dintr-o configuraie de cadre (n pixeli , procente
spaiul rmas *)
rows
nlimea unei linii dintr-o configuraie de cadre (n pixeli , procente
spaiul rmas *)
frameborder
Prezena (valoarea 1) sau absena (valoarea 0) a marginilor n jurul
cadrelor configuraiei
bordercolor Culoarea marginilor cadrelor configuraiei

ATRIBUTELE
Tagului frame
DESCRIEREA ACIUNII REALIZATE
src Referina paginii implicite a cadrului
name Numele cadrului
noresize Interdicia ca utilizatorul s modifice dimensiunea cadrului
scrolling
Afiarea sau nu a barelor de defilare pentru cadru (valorile sunt
yes,no, auto)
marginwidth Distana , pe orizontal, ntre coninutul cadrului i margini ( n
Prof.Murean Carmen Silvia
30
ATRIBUTELE
Tagului frame
DESCRIEREA ACIUNII REALIZATE
pixeli)
marginheight
Distana , pe vertical, ntre coninutul cadrului i margini
( 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 Aciune utilzator Tag
Text Introducerea unui text de volum redus Input
Prof.Murean Carmen Silvia
31
Control Aciune utilzator Tag
Password
Introducerea uni text de volum redus, care apare, pe
ecran, mascat cu *
Input
Submit
Activare (pentru a transmite informaiile nscrise n
formular ctre server)
Input
Reset
Activare (pentru a restabilii valorile iniiale ale tuturor
controalelor formularului)
Input
Push
Activare (pentru a executa o aciune definit de autorul
formularului)
Input
Checkbox Bifare (pentru selecie multipl a unor opiuni) Input
Radio
Bifare (pentru selecie unei singure opiuni dintr-o
list de opiuni)
Input
Textarea Introducerea unui text de volum mare Textarea
Menu Alegerea unei opiuni dintr-un meniu Select, option

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

Controlul password :
<p><I>NUME UTILIZATOR</I></p>
<INPUT TYPE=TEXT NAME="utilizator">
<p><I> PAROLA</I></p>
<INPUT TYPE=PASSWORD NAME="parola">
Efect:
Prof.Murean Carmen Silvia
32
NUME UTILIZATOR
Radu Maria

PAROLA
****

Controlul Submit :
<p><INPUT TYPE=SUBMIT VALUE="Inscrie-ma"></p>
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>
Efect:
Selectati cursurile la care doriti sa va inscrieti
PROGRAMARE VISUAL C++
PROGRAMARE JAVA
WEB DESIGN
ALTELE

Controlul Radio :
Prof.Murean Carmen Silvia
33
<p> Aveti calculator acasa ? </p>
<p><INPUT TYPE=radio name ="da" checked>DA </p>
<p><INPUT TYPE=radio name = "da">NU</p>
Efect:
Aveti calculator acasa ?
DA
NU
Controlul Textarea :
<p>FORMULATI SUGESTIILE DUMNEAVOASTRA:</P>
<TEXTAREA NAME="tal"></TEXTAREA>
Efect:
FORMULATI SUGESTIILE DUMNEAVOASTRA:
AS DORI SA URMEZ..

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>
Prof.Murean Carmen Silvia
34
Efect:
SPECIFICATI FORMA DE PLATA
MASTER CARD


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


Pentru a permite selectarea mai multor elemente din list se mai adaug
atributul MULTIPLE.



PRINIPALELE CONTROALE ALE FORMULARELOR

CONTROL TAG
ATRIBUTE
OBLIGATORII
ATRBUTE
OPIONALE
Text Input Type ,name Value, size, maxlength
Password Input Type ,name Size, maxlength
Submit Input Type Value
Reset Input Type Value
Checkbox Input Type ,name
Radio Input Type ,name
Textarea Textarea Name Cols, rows
Menu Select,option Name Size, multiple, value
Prof.Murean Carmen Silvia
35
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>
Prof.Murean Carmen Silvia
36
</select>
</td>
</tr>
<tr>
<td>Alte comentarii</td>
<td align="center">
<textarea name="e">
</textarea>
</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
****

Prof.Murean Carmen Silvia
37
Azi vrei desert?
DA NU
Prajituri preferate
Cu fructe

Alte comentarii
rezultatul alegerii mele ?

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
Prof.Murean Carmen Silvia
38
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
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 ATRIBUT VALOARE
STATISTIC
ACTION URL-ul
METHOD POST
CUTARE
ACTION URL-ul
METHOD GET
E-MAIL
ACTION MAILTO: adresa de e-mail
METHOD POST
Prof.Murean Carmen Silvia
39

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>

<area shape=nume_formn cords=294, 100, 15 href=adresa_fin.html>
</map>
ATRIBUTELE TAGULUI AREA

ATRIBUT DEFINETE
SHAPE
Forma geometric a zonei (cerc, dreptunghi,
poligon)
Prof.Murean Carmen Silvia
40
COORDS Coordonatele formei geometrice
HREF Referina locului ctre care se face saltul

DEPENDENA VALORILOR ATRIBUTULUI COORDS DE
VALORILE ATRIBUTULUI SHAPE

Forma geometric dorit Shape Coords
R

X,Y
CIRCLE X,Y,R
X1,Y1


X2,Y2
RECT X1,Y1,X2,Y2
X1,Y1 X2,Y2
X5,Y5 X3,Y3
X4,Y4
POLY X1,Y1,X2,Y2,,Xn,Yn

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>

Prof.Murean Carmen Silvia
41
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.



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 ).
Prof.Murean Carmen Silvia
42
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 Extensii Fiiere create cu
Video/msvideo AVI Microsoft Windows Movie
Video/mpeg MPEG, MPG
MPEG Movie
(Motion Picture Experts Group)
Video/quicktime MOV, QT Quick Time Video
Audio/wav WAV Windows Wav Audio
Audio/aiff AIF, AIFF, AIFC AIFF audio
Audio/x-mpeg.mp3 MP3 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 Includerea clipurilor video/audio-utiliznd tagul nepereche embed:
ATRIBUT DESCRIEREA ACIUNII REALIZATE
SRC Referina fiierului care urmeaz s fie inclus
TYPE Tipul MIME
WIDTH Limea zonei din fereastra Browser-ului rezervat pentru afiarea clipului
HEIGHT nlimea zonei din fereastra Browser-ului rezervat pentru afiarea clipului
Prof.Murean Carmen Silvia
43
ATRIBUT DESCRIEREA ACIUNII REALIZATE
HSPACE Distana pe orizontal, din jurul clipului
VSPACE Distana pe vertical, din jurul clipului
ALIGN Alinierea clipului n pagina Web

o Includerea clipurilor audio n Internet Explorer cu tagul img cu
atributul dynsrc:
<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>
Prof.Murean Carmen Silvia
44
<body>
<bgsound src=camera.wav loop=-1 />
</body>
</html>
UTILIZAREA CLIPURILOR
METODA CLIP TAG
ATRIBUTE
PRINCIPALE
BROWSER
LEGARE video/audio a href IE,NN
INCLUDERE video/audio embed
src, type, width,
height
IE, NN
INCLUDERE video img dynsrc, loop, start IE
INCLUDERE audio bgsound src, loop 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:

ATRIBUT ROL
CLASSID Specific adresa la care se gsete o implementare a obiectului respectiv
CODEBASE
Specific adresa de baz, utilizat pentru rezolvarea adreselor URL relative
asociate atributelor CLASSID, DATA i ARCHIVE.
Prof.Murean Carmen Silvia
45
ATRIBUT ROL
CODETYPE Specific tipul codului obiectului
DATA Specific adresa la care se gsesc datele obiectului
TYPE
Alternativ a atributului CODEBASE a crei valoare respect
sintaxa:Content-Type:tip/subtip; parametrii i specific tipul datelor
specificate de atributul DATA
ARCHIVE
Specific o list de adrese, separate prin virgule, la care se gsesc resurse
necesare obiectului
STANDBY Specific mesajul care va fi afiat pe parcursul ncrcrii obiectului
ALIGN Specific modul de poziionare a obiectului n raport cu textul
HEIGHT/WIDTH Specific nlimea/limea obiectului
HSPACE/VSPACE Specific spaiul din jurul obiectului pe orizontal/vertical
BORDER Specific grosimea liniei chenarului din jurul obiectului
USEMAP 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
Prof.Murean Carmen Silvia
46
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 Browser-ele.
Elementul APPLET necesit etichet de nceput i sfrit i admite
urmtoarele atribute:

ATRIBUT SPECIFIC
CODEBASE
Adresa la care se gsete applet-ul (obligatoriu un subdirector al directorului n
care se gsete documentul curent)
CODE Nmele, eventual i calea ctre fierul care conine applet-ul
NAME
Un nume pentru acest appplet, prin care poate comunica cu alte applet-uri din
acelai document
ARCHIVE
List de URL-uri, separate prin virgule, la care se gsesc arhive ce conin clase
i alte resurse ce vor fi prencrcate
PARAM
Valorile iniiale necesare executrii applet-ului
ATRIBUTE
NAME
Numele parametrului
(cunoscut de applet)
VALUE Valoarea atribuit parametrului
VALUETYPE
Tipul valorii parametrului:

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

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
Prof.Murean Carmen Silvia
48
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>









IDENTIFICATORI
Pentru ca documentele HTML s fie recunoscute de Browsere este necesar ca la
nceputul fiecrei pagini s fie introdus identificatorul, cel care precizeaz tipul de
document i resursele utilizate n pagin, acest identificator ncepe cu DOCTYPE:
Exemple:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD X HTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/XHTML1/DTD/ transitional.dtd">
Prof.Murean Carmen Silvia
49
EDITOARE HTML : apticaii care v ajut s scriei pagini HTML. n esen, un
editor HTML insereaz tagul pe care l alegei, n locul indicat de dumneavoastr.
Informaii suplimentare la adresa: http://www.webmasterfree.com/arachophilia.html
Alt site util n editare i fixarea limbajelor HTML, foi de stil CSS, etc.
www.w3schools.com



Bibliografie : HTML prin exemple, Teodoru Gurgoiu, Edit. Teora

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