EET6541 Multimedia and Internet Technology

Size: px

Start display at page:

Download "EET6541 Multimedia and Internet Technology"

William Johns
6 years ago
Views:

1 EET6541 Multimedia and Internet Technology Lecturer: Dr. Hao Shi Room: D721D and Phone: Brief Overview of HTML! HTML: HyperText Markup Language. Not WYSIWYG For publishing hypertext on the World Wide Web A SGML application conforming to ISO 8879 Case insensitive Links - the beauty of HTML documents 1

2 3 HTML Terminology! Tags HTML codes that are in angle brackets (< and >) Tags come in two general types Container and empty tags.! ELEMENTS Whose names appear between start tag and/or end tag e.g. <element-name> and </element-name>! attributes Elements may have associated properties, called attributes! Containers which have both start tag and end tag 4 HTML Command Format! A container <P align= "RIGHT"> Right is Right </P> value attribute beginning tag content of container ending tag! An empty tag <HR align="center" size="2" width="50"> empty tag attribute 2

3 5 World Wide Web Consortium (W 3 C) The World Wide Web Consortium ( was created in October 1994 to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability. W3C has more than 400 Member organizations from around the world and has earned international recognition for its contributions to thegrowthoftheweb. 6 Necessary Tools! ASCII Editor NotePad! HTML Editor Dreamwaver/UltraDev ( Frontpage/InterDev ( JavaScript Editor ScriptBuilder ( Browsers Internet Explorer ( Netscape ( 3

4 7 HTML template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" " <HTML dir="ltr" lang="en">  <HEAD> <META http-equiv="refresh" content="3;url= <STYLE type="text/css"> </STYLE> <SCRIPT language="javascript"> </SCRIPT> <TITLE> </TITLE> </HEAD> <BODY> document body </BODY> </HTML> 8 Refresh the page regularly <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" " <HTML dir="ltr" lang="en">  <HEAD> <META http-equiv="refresh" content="3"> <TITLE>Refresh Demo</TITLE> </HEAD> <BODY> <P align="center">this page is refreshed every 3 seconds.</p> </BODY> </HTML> 4

5 9 Redirect the page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" " <HTML dir="ltr" lang="en">  <HEAD> <META http-equiv="refresh" content="10;url= <TITLE>Redirect Demo</TITLE> </HEAD> <BODY> <H1><P align="center">we've MOVED!</P></H1> <H2><P align="center"> <A href=" University </A></P></H2> <P align="center">the new page will be automatically loaded for you in 10 seconds, or you may click on the link above to go there right now.</p> </BODY> </HTML> 10 HTML Headings <H1> </H1> Heading 1 <H2> </H2> Heading 2 <H3> </H3> Heading 3 <H4> </H4> Heading 4 <H5> </H5> Heading 5 Heading 5 <H6> </H6> Heading 6 5

6 11 Character Formatting <EM> </EM> <STRONG> </STRONG> <CODE> </CODE> <B> </B> <I> </I> <TT> </TT> Emphasis Strong i = i + 1; Bold Italic Typewriter 12 <A> Anchor </A> Element: <A> </A> Attributes: href=" " name=" " target=" " shape=" " coords=" " onclick onmouseover onmouseout Create a link or anchor URL link The name of the anchor Targeted window Object shapes Object coordinates An intrinsic event An intrinsic event An intrinsic event 6

7 13 Common Elements & Attributes Elements: <HR> <BR> <P> </P> <BLOCKQUOTE> </BLOCKQUOTE> <ADDRESS> </ADDRESS> Attributes: id class lang dir title align a horizontal rule line a line break a plain paragraph long quotes or citations information on author document-wide unique id class values language values direction for weak/neutral text advisory title alignment 14 Tables Elements: <TABLE> </TABLE> <CAPTION> </CAPTION> <TR> </TR> <TH> </TH> <TD> </TD> <THEAD> </THEAD> <TFOOT> </TFOOT> <TBODY> </TBODY> <COLGROUP> <COL> Create a Table atable caption for the table table row table headers table data cell scrolling area of a table above the scrolling body below the scrolling body combing a group of columns specifications for one more columns 7

8 15 TABLE element Attributes: id,class,lang,dir,title,align Style, bgcolor summary, Width, frame, rules, border cellspacing, cellpadding onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup inline style information background color summary of the table table width borders and rules cell margins intrinsic events " " " 16 A 3x3 Table  <TABLE border="2" align="right"> <CAPTION>3x3 Table</CAPTION> <TR> <TH>col. 1</TH> <TH>col. 2</TH> <TH>col. 3</TH> </TR> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> <TR><TD>7</TD><TD>8</TD><TD>9</TD></TR> </TABLE> 8

9 17 Some TABLE attributes! bgcolor <TABLE bgcolor="#ff0000"> or <TABLE bgcolor="red">! style Property:border-color, float, padding Usage: <TABLE style="proerty1:value1;property2:value2"> Note: padding replaces cellpadding and measurement units are px, mm, cm and in.! width Usage: <TABLE width="50%"> or <TABLE width="200"> or <TABLE width= *"> 18 A 3x3 Table version 1  <TABLE border="2" align="right" bgcolor="#00ff00" style="border-color:red" width="50%"> <CAPTION>3x3 Table</CAPTION> <TR> <TH>col. 1</TH> <TH>col. 2</TH> <TH>col. 3</TH> </TR> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> <TR><TD>7</TD><TD>8</TD><TD>9</TD></TR> </TABLE> 9

10 19 Create a Menu Bar Using TABLE  <TABLE border="0" align="right" bgcolor="#00ff00" width="100%"> <TR><TH width="100">home</th> <TH width="100">about Us</TH> <TH width="100">join Us</TH> <TH width="100">contact Us</TH>  <TH> </TH> <TH width="100">member Login</TH> </TR> </TABLE> 20 A Menu Bar without Document Margins <html> <head><title>table Menubar</title></head> <body leftmargin="0" topmargin="0">  <TABLE border="0" align="right" bgcolor="#00ff00" width="100%"> <TR><TH width="100">home</th> <TH width="100">about Us</TH> <TH width="100">contact Us</TH>  <TH> </TH> <TH width="100">member Login</TH> </TR> </TABLE> </body> </html> 10

11 21 Browser-Safe Palette These are the Hexadecimal codes for the 216 colors that will not be dithered in any standard browser. The codes are made up of 3 hexadecimal values with each value being two digits long. The first Hex value is for Red, the second for Green and the third for Blue. ## ## ## = Red Green Blue 216 Browser-Safe colors 22 11

12 23 A 3x3 Table version 2  <TABLE border="2" align="right" bgcolor="#00ff00" style="border-color:red" width="50%" onmouseover="document.bgcolor='yellow'" onmouseout="document.bgcolor='#ffffff'" onclick="window.open('3x3table.htm', 'newwin')"> <CAPTION>3x3 Table</CAPTION> <TR> </TR> </TABLE> onmouseover onmouseout 24 MULTIMEDIA! "A picture is worth a thousand words" is certainly an understatement in the world of the Web. Here a picture is worth many thousands of words, at least in terms of how much space/memory a picture takes.! An image comes with many different formats such as GIF, JPEG, PNG, PDF, TIFF, BMP, PCX. The first two are commonly used for web pages.! Multimedia is a combination of text, graphical art, sound, animation and video. 12

13 25 GIF - Web Image Format All graphical web browsers recognize GIF format. GIF supports 8-bit color (256 colors). GIF compression is considered "lossless". There are three forms of the GIF format:! Plain GIF! Transparent GIF! Animated GIF! Demo: gif.htm 26 JPEG - Web Image Format JPEG is a better choice for photographic-quality color than GIF, because it can support either 8-bit or 24-bit color. JPEG uses a higher compression ratio. However you must be careful when repeatedly saving a JPEG file because of the lossy compression used to store image. 13

14 27 IMG Element Attributes: src, alt, width, height, hspace, vspace, ismap, usemap, align,border,class,dir, id,lang,longdesc, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style,title the image source text-based description image size spacearoundimage server-side image map client-side image map 28 Display Sizes and Alignment <! images.htm --> <IMG width="100" height="100" src="gif_plain.gif" alt="50% VU LOGO"> <IMG width="200" height="200" src="gif_plain.gif" alt="100% VU Logo"> <IMG width="400" height="400" src="gif_plain.gif" alt="200% LOGO"><BR> <IMG align="top" src="img.gif"> <IMG align="middle" src="img.gif"> <IMG align="bottom" src="img.gif"> <IMG align="left" src="img.gif"> <IMG align="right" src="img.gif"> Note: The download time for the image will be the same regardless of the display size. 14

15 29 Client-Side Image Map An image map consists of an image that is divided into regions. Each region is then associated with URL by means of <A> or <AREA> tag, which is called hot spot. elements: IMG MAP AREA contains a src attribute specifying the name of the image file and a name attribute specifying the name of the <MAP> </MAP> tag pair. contains the name attribute used by <IMG> within <MAP> </MAP> tag pair that identify the coordinates within the image that will be recognized as hot spot. 30 Pixel Reference x=0, y=0 x=300, y=80 400x400 x=50, y=350 x=400, y=400 15

16 31 AREA Element attributes: coords href name nohref shape The coordinates of the shape in pixels. The coordinates you enter depend on the shape you specify with the shape attribute. The URL associated with the area the name of the area NottobeassociatedwithaURL the shape of the defined region such as!rect: left-x, top-y, right-x, bottom-y!circle: center-x, center-y, radius!poly: x1, y1, x2, y2,..., xn-1, yn-1,x1,y1 32 Australian Map 16

17 33 Image Map - Australian Map  <IMG src="ausmap.gif" border="0" usemap="#ausmap"> <MAP name="ausmap"> <area href=" alt="act" shape="poly" coords="220,154,190,154,189,164,197,168,212, ,154"> <area href=" alt="nsw" shape="poly" coords="232,131,213,125,157,125,157,150,161,150,186,165,186,152,222,152,230,137, 232,131"> <area href=" alt="tas" shape="rect" coords="168,191,203,215"> <area href=" shape="poly" coords="159,153,205,179,203,183,184,188,156,177,156,152, 159,153"> <area href=" alt="sa" shape="poly" coords="154,104,154,176,138,163,123,141,94,134,94,106, 154,104"> <area href=" alt="nt" shape="poly" coords="154,101,154,42,140,29,140,2,103,2,94,25,94,101, 154,101"> <area href=" alt="qld" shape="poly" coords="157,101,157,41,162,43,172,-1,180,-1,206,61,234,104,232,127,212,122,158,122, 157,101"> <area href=" alt="wa" shape="poly" coords="89,27,74,18,42,59,3,82,3,108,24,146,20,159,35,163,64,152,91,138,91,27, 89,27"> </MAP> 34 Audio Audio files can be found in several different formats. Usually each format requires a different plug-in, so it is a good idea to limit the format of the sound. MPEG3 (.mp3) audio compression is now available to deliver CD-quality sound files at much smaller file size.! link <A href="auanthem.mp3">australian National Anthem</A>! embed <EMBED src="auanthem.mp3" WIDTH=200 HEIGHT=200 AUTOSTART="false" ALIGN=center> 17

18 35 Video MPEG format is the most common format for digital video files or movies because all the graphical browsers support it. The other two common formats are QuickTime (Apple Macintosh) and AVI (Microsoft).! embed <EMBED src="clock.avi" WIDTH=200 HEIGHT=200 AUTOSTART="false" ALIGN=center>! link <A href="sample.mov" WIDTH=200 HEIGHT=200 ALIGN=center>Quick Time Sample</A> 36 Frames Using frames to divide a web page into smaller "pagelets" is a popular way to control the layout of the screen. A standard document has one HEAD section and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the BODY. elements: FRAMESET FRAME NOFRAMES specifies the layout of views in the main window defines the contents and appearance of a single frame provides alternate content for user agents that do not support frames 18

19 37 FRAMESET Element attributes: cols, rows, together rows and cols define how many frames are on the screen The example divides the screen vertically in two (i.e., creates a top half and a bottom half). <FRAMESET rows="50%, 50%">...the rest of the definition... </FRAMESET> id, class, title, style, onload, OnUnLoad intrinsic events 38 FRAME Element attributes: name, src, noresize, scrolling, target, frameborder, marginheight,mar ginwidth, id, class, longdesc, title, style assigns a name to the current frame (target for other links) specifies the initial contents to be contained in the frame if present, frame window will not be resizable specifies scroll information (YES AUTO NO)for the frame window specifies the name of a frame where a document is to be opened 19

20 FRAMs Demo 39 <FRAMESET cols="25%, *"> <FRAMESET rows="30%, *"> <FRAME src="f1.htm" name="logo"> <FRAME src="f3.htm" name="topbanner"> </FRAMESET> <FRAMESET rows="30%, *"> <FRAME src="f2.htm" name="leftmenu"> <FRAME src="f4.htm" name="main"> </FRAMESET> </FRAMESET> FRAMs Demo1 40 <FRAMESET rows="25%, *"> <FRAMESET cols="30%, *"> <FRAME src="f1.htm" name="logo"> <FRAME src="f2.htm" name="topbanner"> </FRAMESET> <FRAMESET cols="30%, *"> <FRAME src="f3.htm" name="leftmenu"> <FRAME src="f4.htm" name="main"> </FRAMESET> </FRAMESET> 20

21 41 text MenuBar with Frames  <FRAMESET cols="15%, *"> <FRAMESET rows="10%, *"> <FRAME src="f1.htm" name="logo"> <FRAME src="menus.htm" name="topbanner"> </FRAMESET> <FRAMESET rows="20%, *"> <FRAME src="f3.htm" name="leftmenu"> <FRAME src="f4.htm" name="main"> </FRAMESET> </FRAMESET> 42 Text Menu Bar with target="main"  <TABLE border="0" align="right" bgcolor="#00ff00" width="100%"> <TR><TH width="100"><a href="home.htm" target="main">home</a></th> <TH width="100"><a href="aboutus.htm" target="main">about Us</A></TH> <TH width="100"><a href="joinus.htm" target="main">join Us</A></TH> <TH width="100"><a href="contactus.htm" target="main">contact Us</A></TH> <TH> </TH> <TH width="100"><a href="login.htm" target="main">member Login</A></TH> </TR> </TABLE> 21

22 43 Text Menu Bar with <BASE> <HTML> <HEAD> <BASE target="main">  <BODY> <TABLE border="0" align="right" bgcolor="#00ff00" width="100%"> <TR><TH width="100"><a href="home.htm">home</a></th> <TH width="100"><a href="aboutus.htm">about Us</A></TH> <TH width="100"><a href="joinus.htm">join Us</A></TH> <TH width="100"><a href="contactus.htm">contact Us</A></TH> <TH> </TH> <TH width="100"><a href="login.htm">member Login</A></TH> </TR> </TABLE> </BODY> </HTML> 44 Special Targets! _self if an anchor tag (<A>) does not specify a target value, the _self target is the default target.! _parent The _parent target causes the document to be loaded into the parent window, which is the window containing the frameset that has the actual hypertext reference.! _top it causes the browser to load the documents into a window without any frames.! _blank To initiate a newly opened window, the browser uses the _blank target. There is no real use for most Web weavers. 22

23 45 Forms - Handling User Input The FORM is an independent HTML document, but it could also be a part of an existing document that allows users to provide input by performing any of the following actions:! Selecting one of a set of radio buttons! Choosing one or more checkboxes! Using a list box to select one or more elements from a predefined list! Entering free-flowing text into a text field! After entering all the data, users activate a submission button to send the data to the server for processing or to a specified device such as an address. 46 Form-Related Elements FORM INPUT SELECT TEXTAREA insert a form, which contains one or more form elements creates form elements such as text and password boxes, hidden fields, radio buttons, check boxes, submit and reset buttons, images, files, and buttons creates elements such as a drop-down list and a list box creates a multi-line text box in a form 23

47 A Contact Us Form 48 A Simple Form <FORM action="mailto:s6666666@vu.edu.au?

24 47 A Contact Us Form 48 A Simple Form <FORM action="mailto:s @vu.edu.au?subject=a HTML test " method="post"> Your name:<br> <INPUT type="text" name="name"size="30" MAXsize="80"><BR> address:<br> <INPUT type="text" name=" " size="30" MAXsize=80<BR> <INPUT type="submit" value= Submit Now"><BR> </FORM> 24

25 49 mailto: Microsoft Outlook 97 now supports the following additional mailto fields: mailto: mailto: of Message mailto: of microsoft.com mailto: of Message 50 GET and POST methods In the previous example, the form sends an containing the data that were collected. Note: you must always use the POST method instead of the GET method to send data using . ASP stores the data of each type of request in two different collections of the Request object. The collections are the QueryString collection (for HTTP GET request) and the Form (for HTTP POST request). The GET method is only used to send data (usually < 2000 chars) in ASCII while the POST is used to send bulk data and can be used in unicode. The POST method is generally considered more robust. 25

26 51 Handling Electronic Mail The following string would show up as part of an message in the mailbox after the user clicks the Submit Now" button: space ampersands A name-pair in a HTTP request takes the form: name=value. The ampersand (&) character delimits the name-value pairs. Note some special characters are encoded by their hexadecimal value %hex (% is prefix) or represented as other ASCII characters. FORM Element 52 attributes: action, method, onreset, onsubmit, target, specifies a form processing agent. GET (restrict to ASCII) or POST clear the user's input client-side user input validation on submission direct return data form to a target (window) accept-charset, class,dir,encyte,id, lang, name, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, and title 26

27 53 INPUT Element A Single Line Input attributes: name, size, maxlength, value type, src, accept,accesskey,align,alt,bo rder,class,dir,disabled,id,la ng, onblur, onchange,onfocus,onselect, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, readonly,style,tabindex, title, usemap the control name (variable name) initial/maximum width of the control the initial value of the control the type of control to create the value "image" for submit button 54 INPUT Element - Type Attribute CONTROLS: BUTTON CHECKBOX FILE HIDDEN IMAGE PASSWORD RADIO RESET SUBMIT TEXT Required Attribute(s) name,value name,value name name,value src name,value name,value None None name 27

28 Enctype Attribute 55 The enctype attribute of the FORM element specifies the content type used to encode the form data set for submission to the server (when the value of method is "POST"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file". Examples of content types include "text/plain", "text/html", "image/png", "image/gif", "video/mpeg", "text/css", and "audio/basic". 56 TEXTAREA Element - Multi-Lines attributes: cols, rows, the visible width the number of visible text lines class, cols, dir,disabled,id,lang, onblur, onchange,onfocus,onselect, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, readonly,style,tabindex, title, wrap 28

29 57 SELECT Element attributes: size, multiple, class, cols, dir,disabled,id,lang, name, onblur, onchange,onfocus,onselect, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect,style,tabindex, title visible options shown allows multi-selection Note: must contain at least one OPTION element OPTION Element (sub-element of SELECT element) 58 attributes: value, selected, option value pre-selected options class, cols, dir,disabled,id,lang, onblur, onchange,onfocus,onselect, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect,style, and title 29

59 BUTTON Element attributes: class, cols, dir,disabled,id,lang, name,onblur, onchange,onfocus,onselect, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove,

30 59 BUTTON Element attributes: class, cols, dir,disabled,id,lang, name,onblur, onchange,onfocus,onselect, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onrest, onsubmit,style, title, type and value a more sophisticated set than <INPUT type="button"> Online Membership Application 60 ASPCourse\Module1\demo1\app_form.htm 30

31 Appform.htm - FORM 61 FORM <FORM action="mailto:s @vu.edu.au?online Membership Application" enctype="text/plain" name="form1" method="post">... </FORM> Appform.htm - TEXT 62 TEXT <TR> <TD align="right">first Name:</TD> <TD> <INPUT type="text" name="firstname" size="20" MAXsize= 20"> Last Name: <INPUT type="text" name="lastname" size="20" MAXsize= 20"></TD> </TR> <TR><TD align="right"> address:</td> <TD><INPUT type="text" name=" " size="50" MAXsize=80><TD> </TR> 31

32 Appform.htm RADIO Button 63 RADIOButton <TR><TD align="right">gender:</td> <TD> <INPUT type="radio" name="gender" value="m">male <INPUT type="radio" name="gender" value="f">female </TD> </TR> Appform.htm - CHECKBOX 64 CHECKBOX <TR> <TD align="right">hobbies:</td><td> <INPUT type=checkbox name="hobby1" value="basketball"> Basketball <INPUT type=checkbox name="hobby2" value="golf"> Golf <INPUT type=checkbox name="hobby3" value="swimming"> Swimming <INPUT type=checkbox name="hobby4" value="tennis" > Tennis </TD> </TR> 32

33 Appform.htm - SELECT 65 SELECT <TR> <TD align="right">occupation:</td> <TD> <SELECT name="occupation"> <OPTION value="">[select occupation]</option> <OPTION value="executive">executive</option> <OPTION value="professional">professional</option> <OPTION value="academic">academic</option> <OPTION value="technician">technician</option> <OPTION value="other">other</option> </SELECT> </TD> </TR> Appform.htm - TEXTAREA 66 TEXTAREA <TR> <TD align="right">message:</td> <TD> <TEXTAREA name="message" cols="50" rows="2"> </TEXTAREA> <TD> <TR> <TR> 33

34 Appform.htm SUBMIT & RESET 67 SUBMIT & RESET <TR> <TD> <INPUT type="submit" name="membership" value="submit Now"> <TD> <INPUT type="reset" value= Reset"></TD> </TD> </TR> Development Tools 68 Web = HTML + Scripting + Components Simple Frontpage HTML Web Professional Complex V InterDev VC++,VJ++,VB Scripting Components ActiveX(COM) System Services Win32 Component Developer Commercial Professional Developer 34

35 69 Design a Web Site for a Club Lab1! SetupanaccountwithaFreeWebHost e.g. Visit Familiarize yourself with the prepared files in the directories! Redesign your own Membership Application Form Insert three more text fields, ie, Phone, Fax & Mobile to the Membership Application Form (joinus.shtm) Add warning message for Reset & Submit buttons Validate the passwords (between password and password2) 35

Name Related Elements Type Default Depr. DTD Comment

Legend: Deprecated, Loose DTD, Frameset DTD Name Related Elements Type Default Depr. DTD Comment abbr TD, TH %Text; accept-charset FORM %Charsets; accept FORM, INPUT %ContentTypes; abbreviation for header