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