Noiuni elementare n realizarea paginilor Web

NOIUNIDEBAZ

INTERREELEIINTERNET
nlumeexistmilioanedecalculatoare.
nacestecalculatoaresuntstocateinformaii.
Pentruaputeafaceschimbdeinformaii,calculatoarelesuntinterconectate,
formndreeledecalculatoare.
Multedintreacestereeledecalculatoaresuntconectatentreele,formndinterreele
(reeledereeledecalculatoare).0reeadereelesenumeteInternet(,,netnseamnn
lirnbaenglez,,reea).
Ceamaimareinterreeapublic(reeadereeledecalculatoarecuaccespublic)este
reeauaInternet.

WORLDWIDEWEB

Existmaimultemetodedeacces(servicii)lainformaiastocatpeuncalculator

prinintermediulreeleiinternet:

FTP(FileTransferProtocol)esteserviciulpentrutransferulfiierelor;

Telnetesteserviciulpentruaccesuldeladistanlaresurseleunui

calculator;

ElectronicMailesteserviciuldemesagerieelectronic;

Newsesteserviciuldetiri;

WorldWideWebesteoaltmetod(serviciu)deacceslainformaia

stocatpeuncalculatoraflatoriundenlume.

WorldWideWeb(pescurtWWW)nseamnntraducereadlitterampnzde

pianjenntinsnlumeantreag.WWWvolumimensdeinformaii

organizatedupmodelulhypertext:

Esteunsistemdistribuitpemiidesituri.
Esteunsistemdinamic,adicactualizabilnoricemoment.
Esteunsisteminteractivpermitecolectareadeinformaiiprin
formulare.
AvantajeleserviciuluiWorldWideWeb

PaginileWebauurmtoarelecaracteristici:

Prof.Murean Carmen Silvia

1
 suntmultimedia,adiceleconininfomaiisubformdetext,imagini,
sunete,filmeetc;
suntinteractive,adicrspundlacererileutilizatorului;
suntindependentedeplatformahardwareisoftware,adicsevdlafel
peoricecalculator,avndinstalatoricesistemdeoperareiutilizndorice
browser.

TERMINOLOGIAWEB:

ServerWeb.UnserverwebesteuncalculatorcareadposteteunSite

WebicareestecapabilsrspundlacereridepaginiWebdinparteaunui

client.PentruaputearspundepermanentcererilorWeb,uncalculatortrebuie

srulezepermanentoaplicaiespecial:httpd.CelemaintlniteservereWeb

sunt:ApacheServer;MicrosoftWebServer;OracleWebServer.

SiteWeb.OcolecieorganizatdepaginiWebformeazunsiteweb.n

www,clientulsolicitpaginiWebdelaunsiteWeb.

PaginWeb.noricecalculatorinformaiaestestocatnuniti

numitefiiere.Acestefiiereconin:text;programe;imagini;filme;sunete,etc.

Pentruwwwsuntimportanteanumitefiierespeciale,numiteipaginiWeb.

Acesteaauextensia.htmsauhtml.

HomePage.HomePage(paginagazd)esteopagindinsiteulunei

organizaiicare:

estenmoduzualprimapaginaccesatdinsite;

esteopagindeprezentareaorganizaei;

ofermodulcelmaieficientdeexplorareainformaiiloraflatensite

HTTPPentruacomunicantreele,doucalculatoarefolosescunsistem

dereguliceformeazunprotocol.Serviciulwwwutilizeazcaprotocolde

Prof.Murean Carmen Silvia

2
comunicarentreclientiserverHyperTextTransferProtocol(HTTP),adic

ProtocoluldeTransferalHipertextului.

Hipertextesteuntextmbogit.Elconine:

textobinuit;

etichetepentruformatareatextuluiincapsulareaaltor

tipurideinformaii(salturirapidectrealteresursede

informaii,sunete,imagini,filme,etc).

Hipertextulestestocatnfiiereavndoextensiespecial:.htmsauhtml.

HTMLUnfiiercareconinehipertextestescrisntrunlimbajspecific

numitHiperTextMarkupLanguage(HTML),adicLimbajuldeMarcarea

Hipertextului.HTMLesteunlimbajcarepermiteinserareade:

Text;
Sunete,imaginiifilme;
Indicatorideprezentareainformaiei;
Legaturi(linkuri)ctrealtepaginiWebaflateoriundenlume;
Aplicaii(programeJavascript,Java,VRMLetc.).
Host.UncalculatordinInternetsenumetehost(gazda).

Pentruafiidentificatnmodunic,calculatorulprimeteunnume(oadres),de

exemplu,mishu.cnmv.ro

Pachete.Informaiacarecirculntrecalculatoareinterconectateeste

ncapsulatnpachete.Unpachetconine:

adresaexpeditorulutiadresadestinatarului;

informaia

numeleaplicaieiclientcareaformulatcerereainumele

aplicaieidepeservercarevaprimicerereasprerezolvare.

PachetulestelansatnreeauaInternet.

TCP/IP.ReteauaInternetdispunedemijloacededirijareapachetelor

astfelnctacesteasaajungladestinaie.Unastfeldemijlocdedirijarea

pacheteloresteInternetProtocol(IP),adicProtocolulInternet.ReeauaInternet
Prof.Murean Carmen Silvia
3
 dispunedemijloacedecorecieaerorilordetransmitereapachetelor.Unastfel

demijlocdecorecieesteTransferControlProtocol(TCP),adicProtocolulde

ControlalTransferului.

Httpd.HiperTextTransferProtocolDemon(httpd)esteoaplicaiecarese

executpeserverulWebpentruaprelucracereriledepaginiWebrecepionatede

acestadelaclieni

BROWSEREWEB.PaginileWebsumvizualizatepecalculatorulclientprin

intermediuluneiaplicaiispecialenumitebrowser.Aplicaiaarefunciile:

Accesullainformaii;

Formatareainformaiilor;

Afiareainformaiilor.

Tipuridebrowser:MicrosoftInternetExploreriNetscapeNavigator,HotJava.

Utilizatorul,browserulWebiserverulWebcolaboreazconformschemei:
UTILIZATOR

URLul
Afieaz paginii
Web
Solicitconectarealaserver
BROWSER SERVER
WEB WEB
Transmitefiierul

CREAREAUNEIPAGINIWEBCreareauneipaginiWebpresupune:
1. EditareafiieruluiHTMLutiliznd:
uneditordetateobinuit(Notepad,Wordpad,Word,WordPerfectetc.)
uneditordetextededicat(NetscapeComposer,HotMetaletc.)
2. SalvareapaginiiWebcuextensiahtmlsauhtmntrunsiteWeb;
3. RezolvareareferinelorconinutenpaginaWeb(legturi,imagini,
sunete,filme,aplicaiiJava,etc.).
PaginaWebastfelcreatpoatefivizualizatprinintermediulunuibrowser.

Prof.Murean Carmen Silvia

4
UNIFORMRESOURCELOCATOR(URL)adresauneiinformaiiexistentepe

WebstandarddeidentificareiaccesarearesurselordinInternet.

URLconcateneaztreielemente:

Identificareaserviciului(protocolul)Internetutilizatpentruaccesarea

resursei.Existmaimultemetode(protocoale)deacceslainformaiastocatpe

uncalculatorconectatlaInternetirespectivmaimuliidentificatorideservicii

(protocoale):

http://protocoluldetransferbazatpehipertext(HyperText

TransferProtocol);

ftp://protocoluldetransferdefiiere(FileTransferProtocol);

file://pentruaccesullafiierelestocatepecalculatorullocal.

Identificatorulcalculatoruluicarestocheazresursa(hostulsaugazda)

iesteformatdin:nume_calculator.domeniu_internet,unde

domeniu_internetreprezintoramurdinstructuraarborescenta

internetului.

Identificatorulresursei(fiierului)pecalculatorulgazd(server).Acesta

secompunedin:

/reprezintdirectorulrdcin;

Cale_relativ/,reprezintcalearelativspredirectorulncarese

gsetefiieruldestinaie;

Nume_fiier,numelefiieruluidestinaie;

#nume_ancor,numeleuneiancoredefinitenfiieruldestinaie

prin<aname=nume_ancor>.Acestultimotermenestecorrect

pentrumetodadeacceshttp://.

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

http://identificprotocolul

Prof.Murean Carmen Silvia

5
 www.edu.roindentificsistemulnumitwwwdindomeniul

edu.ro

/news/index.htmlreprezintcalearelativsprefiier

#ancora1reprezintoancornfiieruldestinaiencepndcu

caresevaafiapaginanbrowser.

NOIUNIINTRODUCTIVENHTML

HYPERTEXTMARKUPLANGUAGE(limbajdemarcareahipertextului)este

unlimbajpentrudescriereaunuidocumentWeb.Fiecareelementestemarcat

prinsemnespecialealelimbajuluinumiteTaguri.Cupuineexcepiitagurile

suntperechicareindicnceputulisfritulelementuluistructural.

TIP TAG ROL ATRIBUTE

ncadreaz
<html></html>
paginaHTML
Descriereaunei src,name,noresize,
<frameset></frameset> configuraiide scrolling,marginwidth,
cadre marginheight
Introducetermeni
pentrumotorele
<meta></meta>
decutarepe
Taguri
Internet
structurale
ncadreaz
<head></head>
antetulpaginii
ncadreaztitlul
<title></title>
paginii
ncadreaz
bgcolor,
coninutul
<body></body> background,
propriuzisal
text,link,vlink,alink.
paginii
Alteelemente ncadreazun
<p></p>
paragraf
<br/> Rndnou clear

Prof.Murean Carmen Silvia

6
 TIP TAG ROL ATRIBUTE
<hr/> Linieorizontal
<..!textul>sau
Comentariu
<//textul>
Scoateneviden
<em></em> textul(deobicei
italic)
Scoateneviden
Elemente <strong></strong> textul(deobicei
referitoarela bold)
stil <i></i> Textitalic
<b></b> Textbold
<u></u> Textsubliniat
Schimbfontul
<font></font> face,size,color.
textului
<h1></h1> ncadreazun
Headinguri . textcarevafiscos
<h6></h6> neviden.
<ol></ol> Listordonat type,start
<ul></ul> Listneordonat
<dl></dl> Listdetipglosar
Definiieaunui
<dd></dd> termenal
Liste
glosarului
Termenal
<dt></dt>
glosarului
Elementalunei
<li></li> value
liste
Legturii
<a></a> Creazolegtur href,name
ancore
src,alt,align,
Insereazo
Imagini <img/> hspace,vspace,height,
imagine
width
Tabele ncadreazo border,cellspacing,
<table></table>
tabel cellpadding,width
<caption></caption> ncadreaztitlul align,valign
tabelei
Prof.Murean Carmen Silvia
7
 TIP TAG ROL ATRIBUTE
ncadreazun
<tr></tr> align,valign
rndaltabelei
ncadreazo
<th></th> celulcapde align,valign
tabel
ncadreazo
<td></td> align,valign
celulatabelei
ncadreazun
<form></form> action,method
formular
Definete
controaletext,
password, type,name,value,size
<input/>
checkbox, maxlength
radio,submit,
Formulare reset.
Defineteun
<textarea>.</textarea> name,cols,rows
controltextarea
Defineteun
<select></select> name,size,multiple
controlmenu
Defineteun
<option></option> value
elementdinmenu
<a></a> Legareaunuiclip href
Includereaunui
<embed/> src,type,width,height
Multimedia clip
Includereaunui
<img/> dynsrc,loop,start
clipvideo(IE)
Cadre Descriereaunei
<frameset> Cols,rows,frameborder,
configuraiide
</frameset> bordercolor
cadre
src,name,noresize,
Descriereaunui
<frame></frame> scrolling,marginwidth,
cadru
marginheight
<iframe> Insereazun src,name,scrolling,
cadruflotant(IE) marginwidth,
marginheight,
frameborder,align

Prof.Murean Carmen Silvia

8
TIP TAG ROL ATRIBUTE
Specificarea
cadruluiimplicit
<base> target
pentrulegturile
definitenpagin
Specificareaunei
<a></a> href,target
legturi

PARAGRAFE

<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>

LISTE
<html>
<head>
LISTEORDONATE
<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> Prof.Murean Carmen Silvia
</ol> 9
</body></html>
 LISTENEORDONATE

<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>

LISTEDETIPGLOSARlisteformatedintermenullisteiurmatpealtrndde
definireatermenului:

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

<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>
<ul>
<li> ALINIEREA TEXTULUI SI A IMAGINII</li>
<li> INCONJURAREA IMAGINII CU TEXT </li>
<li> STABILIREA DISTANTEI DINTRE TEXT SI IMAGINE </li>
</ul>
<li/>
</ol>
</body>
</html>

LEGTURI

CREAREALEGTURILORreferireapaginilorninteriorulunuisitadicsalt

lanceputuluneipaginilaclicpeunlinkdinaltpagin.

Structurauneiastfeldelegturi:

Prof.Murean Carmen Silvia

11
 <ahref=referina>hotspot</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>

CREAREAANCORELORreferireaunuipunctoarecaredinpaginacurent.
Structurauneiastfeldelegturi:

<aname=nume_fiier#nume_ancor></a>

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

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

IMAGINEpentruafirecunoscutedeBrowsertrebuiesfienformatGIF(*.gif)sau
JPEG(*.jpgsau*.jpeg)ipotficreatecueditoaredeimaginicumarfi:Microsoft
PhotoEditor,AdobePhotoshop,PaintShopPro,CorelDraw,etc.
IMAGINIINLINEimagineafacepartedinpagin,deciapareodatcu
deschidereapaginii.

Structuranecesarincluderiiuneiimagininacestmodeste:
<imgsrc=referina/>sau<imgsrc=referinaalt=TRANDAFIR/>
altreprezintalternativancazulncareBrowserulnupoateredaimagineasau
caleasprefiierulrespectivestegreit!!!
POZIIARELATIVIMAGINETEXT
ncazulncareimagineaesteinclusncadrulunuiparagrafsepoate
precizamoduldealiniereatextuluirelativlaimagine:
Prof.Murean Carmen Silvia
12
 SecvenaHTML PaginaWeb

<p>Aceasta
Aceastaesteomain?
<imgsrc=computers.gif/align=top>
esteomain?</p>

<p>Aceasta
<imgsrc=computers.gif/align=middle>
esteomain?</p> Aceastaesteomain?

<p>Aceasta
<imgsrc=computers.gif/align=bottom>
esteomain?</p>
Aceastaesteomain?

<p>Aceastaesteomain?
<imgsrc=computers.gif/align=center>
</p> Aceastaesteomain?

<p>
<imgsrc=computers.gif/align=center>
Aceastaesteomain?</p> Aceastaesteomain?

<imgsrc=computer.gifalign=left/> Computerul
<h1>Computerul</h1>
<brclear=left/> Computeruleste.diversecomponente.
<p>Computeruleste.diversecomponente.</p>

<imgsrc=computer.gifalign=lefthspace=15
Computerul
vspace=15/>
<h1>Computerul</h1>
<brclear=left/>
Computeruleste.diversecomponente.
<p>Computeruleste.diversecomponente.</p>

Pentruanconjuraimagineacutextsefolosescunadinatributele:align=leftsau

align=rightisefoloseteultimaalternativdintabel.

Combinaieaatributelorialtaltaguluiimgiclearaltaguluibrprecizeazmai

exactpoziiaimaginiirelativlatext.
Prof.Murean Carmen Silvia
13
 Sepoateprecizaspaiulliberdinjurulimaginiiprinatributelehspace(spaiu

orizontal)ivspace(spaiuvertical)aletaguluiimg.

Legturilaoaltpaginasituluiprinintermediulimaginii:

<ahref=detalii.html><imgsrc=Computerul.gif/></a>

Scalareaimaginiiinlineprinintermediulatributelorwidthiheightal

taguluiimg;aceastapoatefimritsaumicoratnraportcuimaginea

surscreatcueditoruldeimagini:

Apareimagineascalatfrceareal,saumpreuncuceareal

dacsefolosescdoutaguriimgpentruceanedimensionaticea

dimensionat.

<imgsrc=Computerul.gifwidth=101height=210/>

Serealizeazdoufiierecufiecaredimensiuneaimaginiii

apoisuntncrcatedeBrowserprinatributullowscraltagului

img(efectulnuestevizibillaafiareaimaginiipeunsitlocal!):

<imgsrc=real.giflowersrc=redus.gif/>

IMAGINIEXTERNEncrcatiafiatlacerereautilizatorului.

Structuranecesarincluderiiuneiimagininacestmodeste:

<ahref=nume_fiierreferit><imgsrc=nume_fiierimagineafolositcahot_spot,

existentnpaginalignleft/></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>

Prof.Murean Carmen Silvia

14
 IMAGINIPENTRUFOND(BACKGROUND)ncarcoculoaredefondsauo

imagineiesteintrodusprinatributulbgcolor,respectivbackgroundal

taguluibody:

Structuranecesarincluderiiuneiculoriidefond:

<bodybgcolor=yellow>sau<bodybackground=img1.jpg>

Identificareaculorilor:

VALOARE VALOARE
CULOARE DENUMIRE CULOARE DENUMIRE
#rrggbb #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
ALBASTRU
CASTANIU MAROON #800000 NAVY #000080
MARIN

FORMATAREATEXTULUINTROPAGINWEB

SCHIMBAREASTILULUIUNUIIRDECARACTEREFOLOSINDTAGUL

FONT:

DIMENSIUNE

<p><fontsize=2Acesttextaremarimea1></font></p>

<p>

Utimulcuvntestecucaracteremai

<fontsize=+2mari></font>

</p>

FONT

Prof.Murean Carmen Silvia

15
 <p><fontface=GeorgiaFontulesteGeorgia></font></p>

<p>

Utimulcuvntestescriscucaracterespecificefontului

<fontface=Georgia,ArialGeorgiasauArial></font>

</p>

CULOARE

<p><fontcolor=blueAcesttextestescrisnalbastru></font></p>

<p>

Utimulcuvntestescriscuculoarea

<fontcolor=Bluealbastr></font>

</p>

ALTEELEMENTEDESTIL:

Tagulem(emphasized)

<p><em>Acesttextesteevideniatitalic></em></p>

Tagulstrong

<p><strong>Acesttextesteevideniatngroat></strong></p>

Tagurilei,b,u,s

<p><i>Acesttextesteitalic(nclinat)></i></p>

<p><b>Acesttextestebold(ngroat)></b></p>

<p><u>Acesttextesteunderlined(subliniat)></u></p>

<p><s>Acesttextestestrikethrough(tiat)></s></p>

Tagurilesmall,big

<p>Ultimulcuvntestemai<small>mic</small>></p>

<p>Ultimulcuvntestemai<big>mare</big>></p>

Tagurilesub,sup
Prof.Murean Carmen Silvia
16
 <p>Ultimulcuvntesteun_indice></p>

<p>Ultimulcuvntesteo^putere></p>

PREFORMATAREATEXTULUIpentrupstrareaformatriitastate,se

includetextulntretagurile<pre>i</pre>:

<pre>

Acestaesteuntext

Acumdorescsschimbaliniatul

Iaracumdorescslasspaiuntext.

</pre>

LINIAORIOZONTAL

<hrsize=10width=20%align=center/>

Unde:

sizespecificgrosimealinieinpixeli

widthspecificlimealinieinpixelisauprocentedinlimea

ecranului.

alignspecificalinierealinieinraportcuecranul.

ALINIEREAUNUIBLOCDEELEMENTEncazulncaresecere

aliniereaunuiblocdeelemente(text,imagini)seincludeacestantretagurile<

div>i</div>

TABELE

PRINCIPALELETAGURIFOLOSITELAREALIZAREATABELELOR:

AMERICADESUDTITLUL

POPULAIE
ANTET
STAT CAPITAL
(milioane)
BOLIVIA LAPUZ 7,3 CELUL
COLUMBIA BOGOTA 32,9
Prof.Murean Carmen Silvia
ECUADOR QUITO
17 10,6


<table>
<caption>AMERICADESUD</caption>
<tr>
<th>STAT</th>
<th>CAPITAL</th>
<th>POPULAIE<br/>(milioane)</th>
</tr>

<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>

CARACTERISTICIALETABELELOR

DIMENSIUNEATABELELORseprecizeaz,prinatributul

WIDTHaltaguluiTABLE,nmodabsolute(npixeli),saurelativ(n

procentedindimensiuneaferestrei).ncazulncarenuseprecizeaz

browseruldecide.Acelaiatributsepoateincludentagurilespecifice

antetuluiTH,respectivealcelulelorTD,avndeffectasupradimensiunii

coloanelor.

Prof.Murean Carmen Silvia

18
 AtributulCELLPADDING,respectiveCELLSPACINGal

taguluiTABLEprecizeazdistanadintreconinutulceluleiimarginileei,

respectivealdistaneidintrecellule.

AtributulBORDERaltaguluiTABLEprecizeazgrosimea

chenaruluicarenconjoartabela.

COLORAREATABELELORseprecizeazculoareadefundala

uneitabele,respectivalunuirndntreg,saualuneiceluleprin

intermediultaguluiBGCOLORaltagurilorTABLE,TR,respectiveTD.

ALINIEREATABELELORseprecizeaz,prinintermediul

atributuluiALIGN,aliniereatabeleinpagin(dacatributulseafln

tagulTABLE),respectivealtitlului(CAPTION),alconinutului

rndului(TR),alconinutuluiantetului(TH),etc.

IMBRICAREATABELELORreprezintincludereantrocelulaunei

tabeleaalteitabele.

Exemplu:

<tableborder=1>
<caption>EXEMPLEDESGEI</caption>
<tr>
<th>SGEILASTNGA</th>
<th>SGEILADREAPTA</th>
</tr>
<tr>
<td><tableborder=1>
<tr>
<th><imgsrc=imag1.gif/></th>
<th><imgsrc=imag2.gif/></th>
</tr>
</table>
</td>
<td><tableborder=1>
<tr>
<th><imgsrc=imag3.gif/></th>
<th><imgsrc=imag4.gif/></th>
Prof.Murean Carmen Silvia
19
 </tr>
</table>
</td>
</tr>
</table>

CADRE(FRAME)necesarencazulunuiconinutmaredeinformaiidiversificate,

ajutndlaaccesarearapidainformaiilordorite,frafinevoiisparcurgem

liniarpaginilepnlainformaiadorit.

Practicaceastfacilitateesteasiguratprinmprireaferestreindou,treisau

maimultecadre(frame),fiecaredinacesteareprezentndopaginWebcuconinut

propriu.Unuldinacestecadreestefixiconinemeniul(cuprinsul)carearelegturila

fiecarecadrualferestrei.

Exempludestructurareaferestreincadre:

PentruexempluldemaisussuntnecesarepatrudocumenteWeb,unulpentrufiecare

cadru,iarunulcaresprecizezestructuracadrelornfereastrabrowserului.

Paginacaredefinetestructuracadrelor:

<FRAMESET ROWS=75,*>
<FRAME SRC="TITLU.HTM">
<FRAMESET COLS="240,*">
<FRAME SRC="MENU.HTM" NORESIZE>
<FRAME NAME="STANGA"
SRC="FIZICA.HTM" >
Prof.Murean Carmen Silvia
</FRAMESET> 20
</FRAMESET>
 Paginacaredefinetecadrulcareconinemeniul(cuprinsul)paginadin

stnga:

<html>

<head>

<title>PREZENTARE</title>

</head>

<bodyBGCOLOR="NAVY"TEXT="WHITE"LINK="LIME"VLINK="GREEN"ALINK="SILVER">

<ahref="D:\MURESAN1\LENTILE.PPS"target="dreapta">LENTILE</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\APARATEOPTICE.PPS"target="dreapta">APARATEOPTICE</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\TERMODINAMICA.PPS"target="dreapta">TERMODINAMICA</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\OSCILATII.PPS"target="dreapta">OSCILATII</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\UNDE.PPS"target="dreapta">UNDE</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\SUNETUL.PPS"target="dreapta">SUNETUL</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\HIDROSTATICA.PPS"target="dreapta">HIDROSTATICA</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\ELECTROMAGNETISM.PPS"

target="dreapta">ELECTROMAGNETISM</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\lentile.exe"target="dreapta">PROIECTDELPHI</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\proiectfiz\Project1.exe"target="dreapta">PROIECTC++BUILDER</a>

Prof.Murean Carmen Silvia

21
 <HRsize="2"/>

<pALIGN="CENTER">COMUNICARILAADRESA:</P>

<AHREF="mailto:sylva_carmen15@yahoo.com">sylva_carmen15@Yahoo.com</a>

<bgsoundsrc="D:\MURESAN1\vivaldi3.wav"loop="1"/>

</body>

</html>

Paginacareconinetitlulcuunbannerderulant:

<html>

<bodybgcolor="black"TEXT="WHITE">

<DIVALIGN="CENTER">

<center><MARQUEEDIRECTION=LEFTWIDTH=800HEIGHT=3VSPACE=5

HSPACE=5SCROLLAMOUNT=4SCROLLDELAY=10BGCOLOR=black><P

><EM><H2>COLEGIULECONOMIC"NICOLAETITULESCU"BAIA

MARE</H2></EM></P></MARQUEE></center>

</body>

</html>

Paginacorespunztoarecadruluidindreaptaconineaplicaiilecare

suntreferitedepaginademeniu.

Observaii:

1. Documentulframesetnuconineseciuneabodycidoarseciuneaframeset.

2. ntaguldeintrare<frameset>secerecafereastrabrowseruluisfiedecupat

ndournduri(rows)iapoindoucoloane(cols).

3. Fiecarecadruestedefinitcutagulframe.

4. ntagulframesedeclar:

a. Referinapaginiicarevafiafiat(src);

b. Numelecadrului(name).

Tagul
baseestefolositcnd,dintropagin,secreeazmaimultelegturi

pentrucaresespecificacelaicadru:

<html>
Prof.Murean Carmen Silvia
22
<head>

<title>PREZENTARE</title>

<basetarget=dreapta>

</head>

<bodyBGCOLOR="NAVY"TEXT="WHITE"LINK="LIME"VLINK="GREEN"ALINK="SILVER">

<ahref="D:\MURESAN1\LENTILE.PPS">LENTILE</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\APARATEOPTICE.PPS">APARATEOPTICE</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\TERMODINAMICA.PPS">TERMODINAMICA</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\OSCILATII.PPS">OSCILATII</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\UNDE.PPS">UNDE</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\SUNETUL.PPS>SUNETUL</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\HIDROSTATICA.PPS">HIDROSTATICA</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\ELECTROMAGNETISM.PPS">ELECTROMAGNETISM</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\lentile.exe">PROIECTDELPHI</a>

<HRsize="2"/>

<ahref="D:\MURESAN1\proiectfiz\Project1.exe">PROIECTC++BUILDER</a>

<HRsize="2"/>

<pALIGN="CENTER">COMUNICARILAADRESA:</P>

<Ahref="mailto:sylva_carmen15@yahoo.com">sylva_carmen15@Yahoo.com</a>

<bgsoundsrc="D:\MURESAN1\vivaldi3.wav"loop="1"/>

</body>

</html>

Prof.Murean Carmen Silvia

23
 ATRIBUTELE
DESCRIEREAACIUNIIREALIZATE
Taguluiframeset
Limeauneicoloanedintroconfiguraiedecadre(npixeli,procente
cols
spaiulrmas*)
nlimeauneiliniidintroconfiguraiedecadre(npixeli,procente
rows
spaiulrmas*)
Prezena(valoarea1)sauabsena(valoarea0)amarginilornjurul
frameborder
cadrelorconfiguraiei
bordercolor Culoareamarginilorcadrelorconfiguraiei

ATRIBUTELE
DESCRIEREAACIUNIIREALIZATE
Taguluiframe
src Referinapaginiiimpliciteacadrului
name Numelecadrului
noresize Interdiciacautilizatorulsmodificedimensiuneacadrului
Afiareasaunuabarelordedefilarepentrucadru(valorilesunt
scrolling
yes,no,auto)
Distana,peorizontal,ntreconinutulcadruluiimargini(n
marginwidth
pixeli)
Distana,pevertical,ntreconinutulcadruluiimargini(
marginheight
npixeli)

FORMULAREasigurcreareapaginilorwebinteractive.ngeneralsuntfolosite

pentrupreluareadatelordelautilizator(nvedereaefecturiiuneicomenzipentru

diferiteproduse).Unformularesteconstituitdinelementespecialenumitecontroale

(CONTROLS):butoaneradio,butoanedevalidare,meniuri,casetedetext,prin

intermediulcrorautilizatorultransmiteinformaiiserveruluicaregzduiete

paginaweb.

nserareaunuiformularntrundocumentwebserealizeazprinetichetele

<Form>..</Form>,ntrecaresuntinclusecontroalele.

ELEMENTEDECONTROL:

Prof.Murean Carmen Silvia

24
 TagulINPUTpermiteinserareaunorelementedecontrolnfunciede

valorileasociateatributelorsale:

NAME=irdecaractere(asociazcontroluluiunnume)

VALUE=irdecaractere(specificovaloareiniial;strictnecesarncazul

grupuluidebutoaneradio)

TYPE=TEXTPASSWORDCHECKBOXRADIOSUBMITRESETFILE
HIDDENIMAGEBUTTON(specifictipulelementuluidecontrolcreat).

SINTEZATIPURILORDECONTROALE:

Control Aciuneutilzator Tag

Text Introducereaunuitextdevolumredus Input
Introducereaunitextdevolumredus,careapare,pe
Password Input
ecran,mascatcu*
Activare(pentruatransmiteinformaiilenscrisen
Submit Input
formularctreserver)
Activare(pentruarestabiliivalorileiniialealetuturor
Reset Input
controalelorformularului)
Activare(pentruaexecutaoaciunedefinitdeautorul
Push Input
formularului)
Checkbox Bifare(pentruseleciemultiplaunoropiuni) Input
Bifare(pentruselecieuneisingureopiunidintrolist
Radio Input
deopiuni)
Textarea Introducereaunuitextdevolummare Textarea
Menu Alegereauneiopiunidintrunmeniu Select,option

Controlultext:

<p>Numelesiprenumele:

<INPUTTYPE=TEXTNAME="nume">

Radu Mariana
Efect:Numelesiprenumele:

Controlulpassword:

<P><I>NUMEUTILIZATOR</I>
<INPUTTYPE=TEXTNAME="utilizator">
<P><I>PAROLA</I>

Prof.Murean Carmen Silvia

25
 <INPUTTYPE=PASSWORDNAME="parola">
Efect:

Radu Mariana
NUMEUTILIZATOR

****
PAROLA

ControlulSubmit:

<P><INPUTTYPE=SUBMITVALUE="Inscriema">

ControlulReset:

<INPUTTYPE=RESETVALUE="Anulez">

ControlulCheckbox:

<P>Selectaticursurilelacaredoritisavainscrieti</P>
<BR>
<INPUTTYPE=CHECKBOXVALUE="1">
PROGRAMAREVISUALC++<BR>
<INPUTTYPE=CHECKBOXVALUE="2"CHECKED>
PROGRAMAREJAVA<BR>
<INPUTTYPE=CHECKBOXVALUE="3"CHECKED>
WEBDESIGN<BR>
<INPUTTYPE=CHECKBOXVALUE="4">ALTELE<BR>

Efect:
Selectaticursurilelacaredoritisavainscrieti
PROGRAMAREVISUALC++
PROGRAMAREJAVA
WEBDESIGN
ALTELE
ControlulRadio:
Prof.Murean Carmen Silvia
26
 <p>Aveticalculatoracasa?
<P><INPUTTYPE=radioname="da"checked>DA
<P><INPUTTYPE=radioname="da">NU

Efect:

Aveticalculatoracasa?

DA

NU

ControlulTextarea:

<p>FORMULATISUGESTIILEDUMNEAVOASTRA:</P>
<TEXTAREANAME="tal"></TEXTAREA>
Efect:

FORMULATISUGESTIILEDUMNEAVOASTRA:

ControlulMenu:

SPECIFICATIFORMADEPLATA
<SELECTNAME="plata">
<OPTIONVALUE="visa">VISACARD</OPTION>
<OPTIONSELECTEDVALUE="master">MASTERCARD</OPTION>
<OPTIONVALUE="euro">EURO</OPTION>
</SELECT>

Efect:
SPECIFICATIFORMADEPLATA

DacseadaugntagulSELECTiatributulSIZE=2,browserulse
vavizualizaastfel:

SPECIFICATIFORMADEPLATA

Pentruapermiteselectareamaimultorelementedinlistsemai
adaugatributulMULTIPLE.
Prof.Murean Carmen Silvia
27
 PRINIPALELECONTROALEALEFORMULARELOR

ATRIBUTE ATRBUTE
CONTROL TAG
OBLIGATORII 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

TEHNICATABELELORNPREZENTAREAFORMULARELOR
Seutilizeazostructurtabelarpentrupoziionareacorectacontroalelor:
<form>
<table>
<tr>

<td>Nume</td>
<td><inputtype="text"name="a"/></td>
</tr>
<tr>
<td>Glicemie</td>
<td><inputtype="password"name="b"/></td>
</tr>
<tr>
<td>Azivreidesert?</td>
<tdalign="center">DA
<inputtype="radio"name="c"/>NU
<inputtype="radio"name="c"/></td>
</tr>
<tr>
<td>Prajituripreferate</td>
<tdalign="center">
<selectname="d">

Prof.Murean Carmen Silvia

28
<option>Cuciocolata</option>
<option>Cufructe</option>
<option>Cufrisca</option>
</select>
</td>
</tr>
<tr>
<td>Altecomentarii</td>
<tdalign="center">
<textareaname="e">
</textarea>
</td>
</tr>
<trbgcolor=f6d324>
<tdalign="right">
<inputtype="reset"/>
</td>
<tdalign="left">
<inputtype="submit"/>
</td>
</tr>
</table>
</form>

Efect:

Nume munteanu

Glicemie ****

Azivreidesert? DA NU
Prajituripreferate

Altecomentarii

Reset Submit Query

UTILIZAREAFORMULARELOR

Prof.Murean Carmen Silvia

29
 naintedeaproiectaunformulartrebuiesluailegturacufurnizorul

dumneavoastrdeserviciipentruaaflacescripturiCGIvpuneladispoziieiadreselelor

peserver.

OdatactivatbutonulSubmit,numaiavemdeafacecuoprelucrareHTMLcicuun

procescarevadepindedeprogramenumiteCommonGatewayInterfacesauscripturiCGI

,rezidentepeserverulWeb.

Pentruaccesareaacetorprogramedeprelucrareadatelor,ntaguldeintrareFormse

vorintroduceatributeleACTIONiMETHOD:

o PrinatributulACTIONfurnizmURLulscriptuluiCGIcarevaprelucra

datele.

ACTION=http://alpha.com/program.cgi

o Existdoumoduridetransmitereadatelorprecizateprinvalorileatributlui

METHOD:

Dacformularulafostproiectatpentruunsondajdeopinii,deexemplu

ostatisticapreferinelornpictur,sefolosetevaloareaPOST.La

adresahttp://alpha.com/program1.cgiexistunscriptcareties

facaceastprelucrare,iartaguldeintrarevaartaastfel:

formaction=http://alpha.com/program1.cgimethod=post

Dacformularulafostprelucratpentruaefectuaocutare,activitate

specificmotorelordecutare,sefolosetevaloareaGET.Laadresa

http://alpha.com/program2existunscriptcarepoateefectua

cutareaatuncitaguldeintrarevaartaastfel:

formaction=http://alpha.com/program2method=get

Dac,deexempluutilizatorulabifatpostimpresionism,la

activareabutonuluisubmitscriptulCGIivafurnizairuldecaractere:

http://alpha.com/program2/search?curent=postimpresionism

Prof.Murean Carmen Silvia

30
 Outilizareparticularaformulareloresteaceeadeatransmitedatelela

oadresdeemail.nacestcaztaguldeintrarearatastfel:

formaction=mailto:mdraghici@pcnet.romethod=post

Activareabutonuluisubmitvaaveacaefecttransmitereapeadresa

respectivamesajuluicurent=postimpresionism.

Not:Utilizaiaceastformpentruaverificaformularelepecareleproiectai.

SINTETIZAREAMODURILORDETRANSMITEREAFORMULARELOR

EFECT ATRIBUT VALOARE

ACTION URLul
STATISTIC
METHOD POST
ACTION URLul
CUTARE
METHOD GET
ACTION MAILTO:adresadeemail
EMAIL
METHOD POST
MAPAREAIMAGINILOResteoimaginececoninezonecarefuncioneazcahot

spoturi,adiclaactivareauneiastfeldezoneserealizeazunsaltntrunpunctal

uneipagini.

nfunciedecineinterpreteazcoordonatelezoneiactivateprincliciexecut

aciuneacorespunztoare,existdoumoduridemapare:

1. CLIENT(Clientside)hartagraficesteinterpretatdectreBrowser,definirea

zonelorsenzitivefiindintrodusndocumentulHTML.Mapareadetipclienteste

preferabildeoareceestemaiuordeconstruit,nusolicitserveridecipoatefi

vizualizatoffline.

2. SERVER(Serverside)hartagraficesteinterpretatdectreserver,cu

ajutorulunuiprogram(deobiceidetipCGI).

Definireauneihri

Prof.Murean Carmen Silvia
31
 <mapname=nume_hart>
<areashape=nume_form1cords=194,66,15href=adresa_fi1.html>

<areashape=nume_formncords=294,100,15href=adresa_fin.html>
</map>

ATRIBUTELETAGULUIAREA

ATRIBUT DEFINETE
Formageometricazonei(cerc,dreptunghi,
SHAPE
poligon)
COORDS Coordonateleformeigeometrice
HREF Referinaloculuictrecaresefacesaltul

DEPENDENAVALORILORATRIBUTULUICOORDSDE
VALORILEATRIBUTULUISHAPE

Formageometricdorit Shape Coords

R
CIRCLE X,Y,R
X,Y
X1,Y1
RECT X1,Y1,X2,Y2
X2,Y2

X1,Y1X2,Y2
X5,Y5X3,Y3 POLY X1,Y1,X2,Y2,,Xn,Yn
X4,Y4

Asociereauneihrilaoimagine

Pentruaasociauneiimaginiohrtgraficavemnevoiedeunfiier

coninndimagineaiunfiier*.html,iarapoivomurmapaii:

o Includemimagineanpaginahtml

o Asociemhartaimaginii

<imgsrc=calefiier_imagineusemap=#nume_hart>

EditoaredeImageMapuri

Prof.Murean Carmen Silvia
32
 Unastfeldeeditorefectueazurmtoreleprocese:

Deschideopaginhtmlncareesteinseratoimagine;

Cereprogramatoruluistraseze,pefondulimaginiiformegeometricei

sspecifice,pentrufiecarezon,paginahtmllacaresefacesaltul;

GenereazautomatsecvenahtmlpentruImageMapulrespectiveio

salveaznpaginahtmldelacaresapornit.

CaeditoaredeImageMapuriavemMAPEDIT(laadresa:

www.boutell.com/mapedit/),FIREWORKS,FLASHMSetc.

MULTIMEDIANWEB

UnSISTEMMULTIMEDIAesteunansambludeinformaiiconsemnatenorice

formtext,grafic,video,animaie,sunet,appleturiJavantrecareexistlegturi.n

acestseciunevomstudiamoduldeincludereafiierelorvideoisunet.Productoriide

softwaresauorientatpedoudireciinvedereacreriidefiieremultimedia:

AplicaiispecificenumitePLAYERE.Unplayerestecapabilsrulezeunulsau

maimultetipuridefiieremultimedia.Deexemplu,MicrosoftMediaPlayerruleaz

fiierevideo(MPEG,MPG,MPE,AVI)ifiiereaudio(WAV).

ProgramenumitePLUGIN,caresecupleazlabrowseriimbogesc

funcionalitatea.Unpluginmultimediaestecreatpentruunanumitbrowseri

pentruunulsaumaimultetipuridefiiere.(deex.Npavi32.dllpermiterularea

fiiereloravinNetscapeNavigator).

MIME(MultipurposeInternetMailExtension)esteunnumecaredesemneazun

grupdefiiere,deobiceicreatecuacelaimediudedezvoltare.
Tipuri MIME uzuale

TipulMIME Extensii Fiierecreatecu

Video/msvideo AVI MicrosoftWindowsMovie
Video/mpeg MPEG,MPG MPEGMovie
Prof.Murean Carmen Silvia
33
 (MotionPictureExpertsGroup)
Video/quicktime MOV,QT QuickTimeVideo
Audio/wav WAV WindowsWavAudio
Audio/aiff AIF,AIFF,AIFC AIFFaudio
Audio/xmpeg.mp3 MP3 MP3audio

MetodepentruutilizareaclipurilorntropaginWeb

CreareauneilegturidintrunpunctalpaginiiWebctrefiier.Clipuleste

afiatnurmaactivriihotspotuluicorespunztor.

Exemplu:<ahref=nume_fiier.extensie>Vizualizaiclipul</a>

IncludereafiieruluinpaginaWeb.Fiierulestencrcatodatcupagina

Web.

o Includereaclipurilorvideo/audioutilizndtagulneperecheembed:

ATRIBUT DESCRIEREAACIUNIIREALIZATE
SRC Referinafiieruluicareurmeazsfieinclus
TYPE TipulMIME
WIDTH LimeazoneidinfereastraBrowseruluirezervatpentruafiareaclipului
HEIGHT nlimeazoneidinfereastraBrowseruluirezervatpentruafiareaclipului
HSPACE Distanapeorizontal,dinjurulclipului
VSPACE Distanapevertical,dinjurulclipului
ALIGN AliniereaclipuluinpaginaWeb

o IncludereaclipuriloraudionInternetExplorercutagulimgcu

atributuldynsrc:

<imgdynsrc=nume_fiier.extensieloop=3start=filleopen/>

Efectullinieihtmldemaisusconstnrulareadetreioriaclipuluidin

fiieruldatcavaloareaatributuluidynsrc,odatcuncrcareapaginiiWeb.

Atributulloopspecificnumrulderulriivaloarea1aacestuiadetermin

rulareapermanentaclipului(pnlanchidereapaginii).

Prof.Murean Carmen Silvia

34
 Atributulstartspecificmomentulncarenceperularea.Valorileposibile

fiindfilleopen(ruleazsimultancuncrcareapaginii)saumouseover(ruleazdin

momentulncaremouseulintrpesuprafaaclipului).

Atributelespecificetaguluiimgsuntadmise(alt,align,border,height,width).

Observaie:PentrucazulncareBrowserulnuruleazclipulesteindicats

introducei,prinatributulsrcaltaguluiimg,imagineaclipuluiioscurt

informaieasupraconinutuluiclipului,prinintermediulatributuluialt.

o Includereasunetelornbackground,determinrulareasunetuluiodat

cuncrcareapaginii.FiierulaudiotrebuiesfiedetipulAU,WAVsauMID.

Exemplu:

<html>

<head><title></title></head>

<body>

<bgsoundsrc=camera.wavloop=1/>

</body>

</html>
UTILIZAREA CLIPURILOR

ATRIBUTE
METODA CLIP TAG BROWSER
PRINCIPALE
LEGARE video/audio a href IE,NN
src,type,width,
INCLUDERE video/audio embed IE,NN
height
INCLUDERE video img dynsrc,loop,start IE
INCLUDERE audio bgsound src,loop IE

ElementulOBJECT

AcestelementpermitecreatorilordepaginiWebsspecificeobiectulpecare

dorescslintroducnpagin(imagine,clipurivideo,etc.),parametriinecesaripentru

Prof.Murean Carmen Silvia

35
 iniializareaobiectului,precumiaplicaianecesarpentrumanipulareaobiectului

respective.

ElementulOBJECTnecesitetichetdenceputisfrit,ntrecareeste

plasatdescriereaobiectuluiiadmiteurmtoareleatributeprincipale:

ATRIBUT ROL
CLASSID Specificadresalacaresegseteoimplementareaobiectuluirespectiv
Specificadresadebaz,utilizatpentrurezolvareaadreselorURLrelative
CODEBASE
asociateatributelorCLASSID,DATAiARCHIVE.
CODETYPE Specifictipulcoduluiobiectului
DATA Specificadresalacaresegsescdateleobiectului
AlternativaatributuluiCODEBASEacreivaloarerespect
TYPE sintaxa:ContentType:tip/subtip;parametriiispecifictipuldatelor
specificatedeatributulDATA
Specificolistdeadrese,separateprinvirgule,lacaresegsescresurse
ARCHIVE
necesareobiectului
STANDBY Specificmesajulcarevafiafiatpeparcursulncrcriiobiectului
ALIGN Specificmoduldepoziionareaobiectuluinraportcutextul
HEIGHT/WIDTH Specificnlimea/limeaobiectului
HSPACE/VSPACE Specificspaiuldinjurulobiectuluipeorizontal/vertical
BORDER Specificgrosimealinieichenaruluidinjurulobiectului
USEMAP Adresaspecifichriigraficeauneiimagini

Tipulpoatefitext,image,audio,video,applicationsauunsimbolcare

reprezintoextensiedefiier(reprezentatprinxextensie).

Subtipulpoatefiunsimbolcorespunztoruneiextensiidefiier.

Parametriisespecificsubforma:atribut=valoare

1. Tipulimplicit:text/plain;charset=usascii

2. Tipulaplicaie:Javaarchive:application/Javaarchive

3. Tipulimagine:image/gif

ElementulAPPLET

Prof.Murean Carmen Silvia

36
 UnappletesteoaplicaiedemicidimensiuniscrisnlimbajJava.Dup

compilareaprogramuluisursseobineunfiierbinarexecutabilcuextensiaclass.

DeiincludereaunuiappletsepoatefaceicuelementulObject,seutilizeazelemental

applet,acestafiindsuportatdetoateBrowserele.

ElementulAPPLETnecesitetichetdenceputisfritiadmite

urmtoareleatribute:

ATRIBUT SPECIFIC
Adresalacaresegseteappletul(obligatoriuunsubdirectoraldirectoruluin
CODEBASE
caresegsetedocumentulcurent)
CODE Nmele,eventualicaleactrefierulcareconineappletul
Unnumepentruacestappplet,princarepoatecomunicacualteappleturidin
NAME
acelaidocument
ListdeURLuri,separateprinvirgule,lacaresegsescarhivececoninclasei
ARCHIVE
alteresursecevorfiprencrcate

Valorileiniialenecesareexecutriiappletului

Numeleparametrului
NAME
(cunoscutdeapplet)

VALUE Valoareaatribuitparametrului

Tipulvaloriiparametrului:

Data=
Object=
valoarea
Ref=adres valoarea
PARAM asociat
lacarese asociateste
parametru
ATRIBUTE gsesc identifica
VALUETYPE luieste
valorile torulunui
transmis
necesare applet(obiect
apletului
iniializrii ),aflatn
(reprezen
parame cadrul
tatprinir
trului aceluiai
de
document
caractere)
Tipulresurseidelaadresaspecificatde
TYPE atributulVALUE(numaicndatributul
VALUETYPEarevaloarearef)

Prof.Murean Carmen Silvia

37
 Exemple:

1. Includereauneiimagini:

< OBJECTDATA=clint.gifTYPE=image/gif>Clint</OBJECT>

2. Declarareadeobiecteimbricate:

< OBJECTDATA=clint.mpegTYPE=application/mpeg>
<!...dacanu,incercgiful>
<OBJECTDATA=clint.gifTYPE=image/gif>
<!...dacanuvizualizeztextul>
Clint</OBJECT>
</OBJECT>
3. Icludereaunuiapplet:

<APPLETCODE=chess.classWIDTH=500HEIGHT=500>

Jucatisah?</APPLET>

Sau

<OBJECTCODETYPE=application/Java

CLASSID=Java:chess.classWIDTH=500HEIGHT=500>

Jucatisah?</OBJECT>

4. Includereaunuiclipaudioprinintermediulunuiapplet:

<APPLETCODE=AudioItemWIDTH=15HEIGHT=15>

<PARAMNAME=ce_camVALUE=canta.au>

AppletulJavaemitesunetul...

</APPLET>

IDENTIFICATORI

PentrucadocumenteleHTMLsfierecunoscutedeBrowsereestenecesar

calanceputulfiecreipaginisfieintrodusidentificatorul,celcare

precizeaztipuldedocumentiresurseleutilizatenpagin,acest

identificatorncepecuDOCTYPE:

Exemple:

Prof.Murean Carmen Silvia

38
 <!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"

"http://www.w3c.org/TR/1999/REChtml40119991224/loose.dtd">

<!DOCTYPEHTMLPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3c.org/TR/XHTML1/DTD/transitional.dtd">

EDITOAREHTML:apticaiicarevajutsscrieipaginiHTML.n

esen,uneditorHTMLinsereaztagulpecarelalegei,nloculindicatde

dumneavoastr.Informaiisuplimentarelaadresa:

http://www.webmasterfree.com/arachophilia.html

Bibliografie:HTMLprinexemple,TeodoruGurgoiu,Edit.Teora

CUPRINS

Pag.1NoiunigeneraleasuprapaginilorWeb

Pag.5Tabelcutaguristructurale

Pag.7Paragrafe

Prof.Murean Carmen Silvia

39
Pag.8Liste

Pag.9Legturi

Pag.10Imagini

Pag.12Formatareatextului

Pag.14Tabele

Pag.16Cadre

Pag.20Formulare

Pag.26Mapareaimaginilor

Pag.27MultimedianWeb

Pag.29ElementulObject

Pag.30ElementulApplet

Prof.Murean Carmen Silvia

40