Noiuni elementare n realizarea paginilor Web

CUPRINS
Pag.1 Noiuni generale asupra paginilor Web Pag.5 Tabel cu taguri structurale Pag.7 Paragrafe Pag.8 Liste Pag.9 Legturi Pag.10 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

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

FTP (File Transfer Protocol) este serviciul pentru transferul Telnet este serviciul pentru accesul de la distan la resursele unui Electronic Mail este serviciul de mesagerie electronic; News este serviciul de tiri; World Wide Web este o alt metod (serviciu) de acces la

fiierelor; calculator;

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

 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). 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 3

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. Tipuri de browser: Microsoft Internet Explorer i Netscape Navigator,HotJava. Utilizatorul ,browser-ul Web i server-ul Web colaboreaz conform schemei: UTILIZATOR URL-ul paginii Web Solicit conectarea la server BROWSER WEB SERVER WEB Transmite fiierul

Afieaz

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) : http:// protocolul de transfer bazat pe hipertext (Hyper Text ftp:// protocolul de transfer de fiiere (File Transfer Protocol ); file:// pentru accesul la fiierele stocate pe calculatorul local. Transfer Protocol) ;

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 . 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> ROL ncadreaz pagina HTML Descrierea unei configura-ii de cadre Introduce termeni pentru motorele de cutare pe Internet ncadreaz antetul paginii ncadreaz titlul paginii ncadreaz coninutul propriuzis al paginii ncadreaz un paragraf Rnd nou Linie orizontal Comenta-riu Scoate n eviden textul (de obicei italic) Scoate n eviden textul (de obicei bold) Text italic Text bold Text subliniat Schimb fontul textului ncadreaz un text care va fi scos n eviden. List ordonat List neordonat List de tip glosar ATRIBUTE

src, name,noresize, scrolling, marginwidth, marginheight

<meta></meta> Taguri structurale <head></head> <title></title>

<body></body>

bgcolor, background, text,link,vlink,alink.

<p></p> Alte elemente <br /> <hr /> <..! textul > sau <// textul> <em></em>

clear

Elemente referitoare la stil

<strong></strong> <i></i> <b></b> <u></u> <font></font>

face,size,color.

Heading-uri Liste

<h1></h1> . <h6></h6> <ol></ol> <ul></ul> <dl></dl>

type, start

TIP

TAG <dd></dd>

<dt></dt> <li></li> Legturi i ancore Imagini <a></a> <img /> <table></table> <caption></caption> Tabele <tr></tr> <th></th> <td></td> <form></form>

ROL Definiie a unui termen al glosarului Termen al glosarului Element al unei liste Creaz o legtur Insereaz o imagine ncadreaz o tabel 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

ATRIBUTE

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

<input /> Formu-lare <textarea>.</textarea> <select></select> <option></option> <a></a> Multi-media <embed /> <img /> Cadre <frameset> </frameset>

type, name, value, size maxlength

name, cols, rows name,size,multiple value href src,type,width, height dynsrc, loop, start Cols, rows, frameborder, bordercolor

TIP

TAG <frame></frame>

ROL Descrierea unui cadru Insereaz un cadru flotant (IE) Specificarea cadrului implicit pentru legturile definite n pagin Specificarea unei legturi

<iframe>

ATRIBUTE src, name,noresize, scrolling, marginwidth, marginheight src, name, scrolling, marginwidth, marginheight, frameborder, align

<base>

target

<a></a> PARAGRAFE

href, target

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

LISTE NEORDONATE

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

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

<html> <head> <title> Notiuni de HTML </title> </head> <body> <dl> <dt> Crearea paginilor Web ? </dt> <dd> Ned Snell,Ed.Teora </dd> <dt> Totul despre HTML4 </dt> <dd> Rick Darnell,Ed.Teora </dd> </dl> </body></html>

<..! termenul listei>

<..! definirea termenului mai la dreapta>

LISTE IMBRICATE

<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 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:
<html> href=referina>hot-spot</a> <a <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>

10

CREAREA ANCORELOR-referirea unui punct oarecare din pagina curent. Structura unei astfel de legturi: <a name=nume_fiier#nume_ancor> </a> <a href=arta.html#unu> Vezi Brancus </a> <a name=unu> <p> Constantin Brancus</p> </a> Legtur

Brancus

Ancor Constantin Brancus

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 <p> Aceasta <img src=computers.gif / align=top> este o main? </p> <p> Aceasta <img src=computers.gif / align=middle> este o main? </p> <p> Aceasta <img src=computers.gif / align=bottom> este o main? </p> Pagina Web Aceasta main? este o

Aceasta

este o main?

Aceasta

este o main?

11

Secvena HTML <p> Aceasta este o main? <img src=computers.gif / align=center> </p> <p> <img src=computers.gif / align=center> Aceasta este o main? </p> <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>

Pagina Web

Aceasta este o main?

Aceasta este o main? 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

12

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

FORMATAREA TEXTULUI NTR-O PAGIN WEB SCHIMBAREA STILULUI UNUI IR DE CARACTERE FOLOSIND TAGUL FONT: DIMENSIUNE 13

<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: Tagul em(emphasized) Tagul strong Tagurile i,b,u,s <p><em> Acest text este evideniat italic></em></p>

<p><strong> Acest text este evideniat ngroat></strong></p> <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_indice></p> 14

<p> Ultimul cuvnt este o^putere></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 </pre> n text.

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> TABELE PRINCIPALELE TAGURI FOLOSITE LA REALIZAREA TABELELOR: AMERICA DE SUD TITLUL
STAT BOLIVIA COLUMBIA ECUADOR CAPITAL LA PUZ BOGOTA QUITO POPULAIE (milioane) 7,3 32,9 10,6

ANTET CELUL

<table> <caption> AMERICA DE SUD </caption> <tr> <th> STAT </th> <th> CAPITAL </th> <th> POPULAIE<br/ >(milioane) </th> </tr>

15

<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. Atributul BORDER al tagului TABLE precizeaz grosimea chenarului COLORAREA TABELELOR- se precizeaz culoarea de fundal a care nconjoar tabela. 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.

16

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>

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.

17

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

<html>

din stnga :
<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>

18

<A HREF="mailto:sylva_carmen15@yahoo.com">sylva_carmen15@Yahoo.com</a> <bgsound src="D:\MURESAN1\vivaldi3.wav" loop="-1" /> </body> </html>

<html>

Pagina care conine titlul cu un banner derulant:

<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> </body> </html>

1. 2. 3. 4. frameset.

Pagina corespunztoare cadrului din dreapta conine aplicaiile care Observaii:

sunt referite de pagina de meniu. Documentul frameset nu conine seciunea body ci doar seciunea n tagul de intrare <frameset> se cere ca fereastra browser-ului s fie Fiecare cadru este definit cu tagul frame. 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>

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

19

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

ATRIBUTELE Tagului frameset cols rows frameborder bordercolor ATRIBUTELE Tagului frame src name noresize scrolling marginwidth marginheight

DESCRIEREA ACIUNII REALIZATE Limea unei coloane dintr-o configuraie de cadre (n pixeli , procente spaiul rmas *) nlimea unei linii dintr-o configuraie de cadre (n pixeli , procente spaiul rmas *) Prezena (valoarea 1) sau absena (valoarea 0) a marginilor n jurul cadrelor configuraiei Culoarea marginilor cadrelor configuraiei

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, auto) Distana , pe orizontal, ntre coninutul cadrului i margini ( n pixeli) Distana , pe vertical, ntre coninutul cadrului i margini ( n pixeli)

20

 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 serverului 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 Submit Reset Push Checkbox Radio Textarea Menu Aciune utilzator Introducerea unui text de volum redus Introducerea uni text de volum redus, care apare, pe ecran, 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 Tag Input Input Input Input Input Input Input Textarea Select, option

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

Efect :

Numele si prenumele:

Controlul password :
<P><I>NUME UTILIZATOR</I>

21

<INPUT TYPE=TEXT NAME="utilizator"> <P><I> PAROLA</I> <INPUT TYPE=PASSWORD NAME="parola">

Efect:

NUME UTILIZATOR PAROLA 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>

Efect: Selectati cursurile la care doriti sa va inscrieti PROGRAMARE VISUAL C++ PROGRAMARE 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 22

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 , browserul se va vizualiza astfel: SPECIFICATI FORMA DE PLATA Pentru a permite selectarea mai multor elemente din list se mai adaug atributul MULTIPLE. PRINIPALELE CONTROALE ALE FORMULARELOR
CONTROL Text Password Submit Reset Checkbox Radio Textarea Menu TAG 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> 23

<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> </td> </tr> <tr bgcolor=f6d324> <td align="right"> <input type="reset" /> </td> <td align="left"> <input type="submit" /> </td> </tr> </table> </form> Efect : Nume Glicemie Azi vrei desert? Prajituri preferate Alte comentarii

DANU

24

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>

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>

25

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

26

 DEPENDENA VALORILOR ATRIBUTULUI COORDS DE VALORILE ATRIBUTULUI SHAPE Forma geometric dorit R X,Y X1,Y1 X2,Y2 X1,Y1 X5,Y5 X4,Y4 X2,Y2 X3,Y3 RECT X1,Y1,X2,Y2 Shape CIRCLE Coords X,Y,R

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> Editoare de ImageMap-uri Un astfel de editor efectueaz urmtorele procese: 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 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

27

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 Video/mpeg Video/quicktime Audio/wav Audio/aiff Audio/x-mpeg.mp3 Extensii AVI MPEG, MPG 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: 28

<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 LEGARE INCLUDERE INCLUDERE INCLUDERE CLIP video/audio video/audio video audio TAG 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. 29

Elementul OBJECT necesit etichet de nceput i sfrit, ntre care este plasat descrierea obiectului i admite urmtoarele atribute principale:

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:Content-Type: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. 2. 3. Tipul implicit: text/plain ; charset=us-ascii Tipul aplicaie : Java-archive:application/Java-archive 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 Browser-ele. Elementul APPLET necesit etichet de nceput i sfrit i admite urmtoarele atribute:

ATRIBUT CODEBASE CODE

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

30

ATRIBUT NAME ARCHIVE

SPECIFIC 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 NAME VALUE Numele parametrului (cunoscut de applet) Valoarea atribuit parametrului Tipul valorii parametrului: Data= valoarea asociat parametrului este transmis apletului (reprezentat prin ir de caractere) Object= valoarea Ref=adres asociat la care se este gsesc identificavalorile torul unui necesare applet iniializrii (obiect ), parameaflat n trului cadrul aceluiai document Tipul resursei de la adresa specificat de atributul VALUE (numai cnd atributul VALUETYPE are valoarea ref)

PARAM ATRIBUTE VALUETYPE

TYPE

Exemple : 1. 2. Includerea unei imagini: Declararea de obiecte imbricate: < OBJECT DATA=clint.gif TYPE=image/gif>Clint</OBJECT>
< 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: 31

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

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

32