CSC 317318 INTERNET PROGRAMING DYNAMIC WEB APPLICATION DEVELOPMENT
CSC 317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT CHAPTER: Hyper. Text Markup Language HTML (Continue) Siti Nurbaya Ismail Faculty of Computer Science & Mathematics, Universiti Teknologi MARA (Ui. TM), Kedah | A 2 -3039 | sitinurbaya@kedah. uitm. edu. my | 019 -5710562 | 1
Hypertext Markup Language Upon completion of this chapter, you will learn: § § § Objects & Images: Adding image, applets, audio, video, animation & virtual reality on the Web Frames Marquee Labels & Controls Input Elements, Dropdown List, Text Area Using Fieldsets 2
Hypertext Markup Language Introduction § HTML ‘s features multimedia are: § Images § Applets § Audio § Video § HTML documents itself Types of inclusion Specific Element Generic Element Object <audio> object Image <img> object Applet <applet> (deprecated) object Audio <audio> Object HTM Video <video> object HTML document/file <iframe> object 3
Hypertext Markup Language <object> Why we have to use <object>? § It supports new and future media types: – § intended to replace the <img> and <applet> elements. – § used to include objects such as images, audio, videos, Java applets, Active. X, PDF, and Flash. Do not happen bugs and a lack of browser support. The <object> support in browsers depend on the object type. – major browsers use different codes to load the same object type. § Solution: – Nested object elements. – If the object element is not displayed, the code between the <object> and </object> tags will be executed. 4
Hypertext Markup Language <object> § Browser Support § The <object> tag is partially supported in all major browsers – major browsers use different codes to load the same object type – Try all browser for your output 5
Hypertext Markup Language <object> • Displaying A Picture <object height="100%" width="100%" type="image/jpeg" data="audi. jpeg"> </object> • Displaying A Web Page <object type="text/html" height="100%" width="100%" data="http: //www. w 3 schools. com"> </object> 6
Hypertext Markup Language <object> • Displaying A Sound <object classid="clsid: 22 D 6 F 312 -B 0 F 6 -11 D 0 -94 AB-0080 C 74 C 7 E 95"> <param name="File. Name" value="liar. wav" /> </object> • Displaying A Video <object classid="clsid: 22 D 6 F 312 -B 0 F 6 -11 D 0 -94 AB-0080 C 74 C 7 E 95"> <param name="File. Name" value="3 d. wmv" /> </object> classid ? 7
Hypertext Markup Language <audio> + <video> + <embed> New in HTML 5 § <audio> tag is used to specify audio on an HTML document. – Specific Attributes: src, preload, autoplay, loop and controls – Global Attributes: class, id, title and more – Event Handler Content Attributes: onchange, onclick and more. § <video> tag is used to specify video on an HTML document. – Specific Attributes: src, poster, preload, autoplay, controls, width and height – Global Attributes: class, id, title and more – Event Handler Content Attributes: onchange, onclick and more. § <embed> tag is used for embedding an external application or interactive content into an HTML document. – Specific Attributes: src, type, width and height – Global Attributes: class, id, title and more – Event Handler Content Attributes: onchange, onclick and more. 8
Hypertext Markup Language <audio>+<video>+<embed>+<object> • Displaying A Sound <audio src=“tq. mp 3”> text </audio> <embed name=“tq“ src="tq. mp 3“ width="300“ height="90" loop="false“ hidden="false“ autostart="false"> <object> <embed name=“tq“ src="tq. mp 3“ width="300“ height="90“> </object> • Displaying A Video <video src="Russell. mp 4" width="300" height="250"> text </video> <embed name="rp" src="Russell. mp 4" width="300" height="250" > <object width="425" height="360" > <embed name=“rp" src="Russell. mp 4"> </object> 9
Hypertext Markup Language Images Sample: include an image using <img> <html> <head> <title>Object Sample Code</title> </head> <body> <p> <h 3>Include a PNG Image using <code>img</code></h 3> <img src="images/hepi. jpg“> </p> </body> </html> 10
Hypertext Markup Language Images Sample: include an image as background image <html> <head> <title>Background Image</title> </head> <body background="images/bg_body. gif"> <h 4> Image as page background. Make sure u can see the tex. T! </h 4> </body> </html> 11
Hypertext Markup Language Applets Sample: include an applet using applet element (deprecated) <APPLET code="Bubbles. class" width="500" height="500"> Java applet that draws animated bubbles. </APPLET> Sample: include an applet using object <OBJECT codetype="application/java" classid="java: Bubbles. class" width="500" height="500"> Java applet that draws animated bubbles. </OBJECT> 12
Hypertext Markup Language Frames § Frame can be used to display more than one HTML documents in the same web browser window § How? Example htmldoc 3. htmldoc 2. htmldoc 4. htmldoc 1. html 13
Hypertext Markup Language Frames § Each HTML document is called a frame, each frame is independent to each others § Disadvantages - Because of more than one HTML documents in a single web browser window, developer has to alert and keep track all the documents - Difficult to print the entire page 14
Hypertext Markup Language Frames Tag Description <frameset> Defines a set of frames <frame> Defines a sub window (a frame) <noframe> Defines a noframe section for browsers that do not handle frames <iframe> Defines an inline sub window (frame) 15
Hypertext Markup Language Frames Vertical Frameset <html> <head> <title>Frameset Page</title> </head> <frameset cols=“ 25%, *"> <frame src="html_frame 1. html"> <frame src="html_frame 2. html"> <frame src="html_frame 3. html"> </frameset> </html> html_frame 1. html_frame 2. html, 25% html_frame 3. html, *% 16
Hypertext Markup Language Frames Horizontal Frameset <html> <head> <title>Frameset Page</title> </head> <frameset rows=“ 25%, *"> <frame src="html_frame 1. html"> <frame src="html_frame 2. html"> <frame src="html_frame 3. html"> </frameset> </html> html_frame 1. html_frame 2. html, 25% html_frame 3. html, *% 17
Hypertext Markup Language Frames <html> <frameset rows="20%, *"> <frame src="html_frame 1. html"></frame> <frameset cols="25%, 75%"> <frame src="html_frame 2. html"></frame> <frame src="html_frame 3. html"></frame> </frameset> </html> html_frame 1. html_frame 2. html, 30% html_frame 3. html, 70% 18
Hypertext Markup Language Frames <html> <frameset cols="20%, *"> <frame src="html_frame 1. html"></frame> <frameset rows="25%, 75%"> <frame src="html_frame 2. html"></frame> <frame src="html_frame 3. html"></frame> </frameset> </html> html_frame 1. html_frame 2. html, 30% html_frame 3. html, 70% 19
Hypertext Markup Language Frames Some frame attributes to be consider when applying frame within your html page - frameborder attributes within the <frameset> tag * define thickness of the frameset border <frameborder =“ ”> - noresize attributes within the <frame> tag * define the whether the frame border can be resized or not <frame noresize=“ ”> - scrolling attributes within the <frame> tag * define the whether the frame border can be scroll or not <frame scrolling=“ ”> 20
Hypertext Markup Language <iframe> vs <object> § iframe = inline frame, (include|create) a frame inside an HTML page, which is similar function of <object> § Even though both tags provide similar function, but they owned different attributes <html> <head> <title>iframe vs object</title> </head> <body> <iframe height="450“ width="450" src="http: //www. yahoo. com"> </iframe> </body> </html> <head> <title>iframe vs object</title> </head> <body> <p> <object name="test“ type="text/html" height="450" width="450" border="0" data="http: //www. yahoo. com"></object> </p> </body> </html> 21
Hypertext Markup Language Targeting Links to Frames The concept is like this Menu [Chap 1][Chap 2][Chap 3] Hyperlinks will be here Chapter pages will be displayed here 22
Hypertext Markup Language Targeting Links to Frames § Create an HTML page with 2 rows using frame tag § 1 st frame (top): include an HTML page that contains title and hyperlinks & give it name, let say “top” § 2 nd frame (bottom): give it name, let say “bottom” & include default HTML page here § Next, create an HTML page contains title and 3 hyperlinks. Make sure you set the hyperlink’s target to “bottom” for all 3 hyperlinks § Next, please create 3 different HTML pages for all 3 hyperlinks, please save them with different file name 23
Hypertext Markup Language Targeting Links to Frames Solution <html> <head> <title>Full Frame Demo</title> </head> <frameset rows="30%, 70%"> <frame src="html_menu_top. html" name="top"></frame> <frame src="html_default. html" name="bottom"></frame> </frameset> </html> 24
![Hypertext Markup Language Targeting Links to Frames Solution Please select menu here [Chap 1][Chap](http://slidetodoc.com/presentation_image_h2/6ae46fa724fac9e8948113a04b94a501/image-25.jpg "Hypertext Markup Language Targeting Links to Frames Solution Please select menu here [Chap 1][Chap")
Hypertext Markup Language Targeting Links to Frames Solution Please select menu here [Chap 1][Chap 2][Chap 3] File name: html_menu_top. html <html> <head></head> <body> <p> Please select menu here [<a href="html_chap 1. html" target="bottom">Chap 1</a>] [<a href="html_chap 2. html" target="bottom">Chap 2</a>] [<a href="html_chap 3. html" target="bottom">Chap 3</a>] </p> </body> </html> 25
Hypertext Markup Language Targeting Links to Frames Solution Your menu is up there! File name: html_default. html <html> <head></head> <body> <p> Your menu is up there! </p> </body> </html> 26
Hypertext Markup Language Targeting Links to Frames Solution Chapter 1 File name: html_chap 1. html Chapter 2 File name: html_chap 2. html <html> <head></head> <body> <h 4>Chapter 1<h 4> </body> </html> <head></head> <body> <h 4>Chapter 2<h 4> </body> </html> Chapter 3 File name: html_chap 3. html <html> <head></head> <body> <h 4>Chapter 3<h 4> </body> </html> 27
Hypertext Markup Language Targeting Links to Frames (<iframe>) The concept is like this Select Your Menu Here [Chap 1][Chap 2][Chap 3] Hyperlinks will be here Chapter pages will be displayed here inside inline frame 28
Hypertext Markup Language Targeting Links to Frames (<iframe>) § Create an HTML page with a title and 3 hyperlinks § Make sure you set the target for all 3 hyperlinks to “display” § Place <iframe> tag below the hyperlinks, set the height and width to “ 450”, and, give it a name as “display” 29
Hypertext Markup Language Targeting Links to Frames (<iframe>) Solution Select Your Menu Here [Chap 1][Chap 2][Chap 3] <html> <head> <title>iframe full demo</title> </head> <body> <p> <h 4>Select Your Menu Here</h 4> [<a href="html_chap 1. html" target="display">Chap 1</a>] [<a href="html_chap 2. html" target="display">Chap 2</a>] [<a href="html_chap 3. html" target="display">Chap 3</a>] </p> <iframe src=“html_default. html” name="display" height="450" width="450"></iframe> </body> </html> 30
Hypertext Markup Language Marquee (<marquee>. . . </marquee>) Create scrolling display Attributes: Attribute Description width How wide the marquee is height How tall the marquee is direction Which direction the marquee should scroll behavior Type of scrolling scrolldelay Delay between each scroll 31
Hypertext Markup Language Marquee (<marquee>. . . </marquee>) Attributes: Attribute Description scrollamount How many marquee will appear loop How many times to loop bgcolor Background color hspace Horizontal space around the marquee vspace Vertical space around the marquee Only Opera and IE fully support hspace and vspace attribute 32
Hypertext Markup Language Marquee (<marquee>. . . </marquee>) Examples <marquee>I Love Programming</marquee> <marquee width="20%" direction="up"> I Love Programming <img src="images/pic. png" width="60" height="60"> </marquee> <marquee width="30%" bgcolor="red"> I Love Programming <img src="images/pic. png" width="60" height="60"> </marquee> <marquee width="20%" scrolldelay="500"> I Love Programming </marquee> 33
Hypertext Markup Language Bibliography (Book) • Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. Bibliography (Websites) • http: //www. w 3 schools. com/html/default. asp • http: //www. quackit. com/html/ • http: //www. htmlcodetutorial. com/ • http: //www. pagetutor. com/html_tutor/index. html 34
- Slides: 34
