1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer Science & Mathematics, Universiti Teknologi MARA (UiTM), Kedah | A | | |

Hypertext Markup Language  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 Upon completion of this chapter, you will learn:

Hypertext Markup Language  HTML ‘s features multimedia are:  Images  Applets  Audio  Video  HTML documents itself 3 Introduction Types of inclusionSpecific ElementGeneric Element Object object Image object Applet (deprecated) object Audio Object HTM Video object HTML document/file object

Hypertext Markup Language Why we have to use ?  It supports new and future media types: –used to include objects such as images, audio, videos, Java applets, ActiveX, PDF, and Flash.  intended to replace the and elements. –Do not happen  bugs and a lack of browser support.  The 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 and tags will be executed. 4

Hypertext Markup Language  Browser Support  The 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 Displaying A Picture Displaying A Web Page 6

Hypertext Markup Language Displaying A Sound Displaying A Video classid ? 7

Hypertext Markup Language New in HTML5  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.  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.  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

Hypertext Markup Language Displaying A Sound Displaying A Video <embed name=“tq“ src="tq.mp3“ width="300“ height="90" loop="false“ hidden="false“ autostart="false"> text

Hypertext Markup Language 10 Images Sample: include an image using Object Sample Code Include a PNG Image using img

Hypertext Markup Language 11 Images Sample: include an image as background image Background Image Image as page background. Make sure u can see the texT!

Hypertext Markup Language 12 Applets Sample: include an applet using applet element (deprecated) Sample: include an applet using object Java applet that draws animated bubbles. <OBJECT codetype="application/java" classid="java:Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles.

Hypertext Markup Language  Frame can be used to display more than one HTML documents in the same web browser window  How? Example 13 Frames htmldoc1.html htmldoc2.html htmldoc3.html htmldoc4.html

Hypertext Markup Language  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 Frames

Hypertext Markup Language 15 Frames TagDescription Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames Defines an inline sub window (frame)

Hypertext Markup Language Vertical Frameset 16 Frames Frameset Page html_frame2.html, 25% html_frame3.html, *% html_frame1.html

Hypertext Markup Language Horizontal Frameset 17 Frames Frameset Page html_frame2.html, 25% html_frame3.html, *% html_frame1.html

Hypertext Markup Language 18 Frames html_frame2.html, 30% html_frame3.html, 70% html_frame1.html

Hypertext Markup Language 19 Frames html_frame2.html, 30% html_frame3.html, 70% html_frame1.html

Hypertext Markup Language Some frame attributes to be consider when applying frame within your html page - frameborder attributes within the tag * define the thickness of the frameset border - noresize attributes within the tag * define the whether the frame border can be resized or not - scrolling attributes within the tag * define the whether the frame border can be scroll or not 20 Frames

Hypertext Markup Language  iframe = inline frame, (include|create) a frame inside an HTML page, which is similar function of  Even though both tags provide similar function, but they owned different attributes 21 vs iframe vs object <iframe height="450“ width="450 " src=" iframe vs object <object name="test“ type="text/html" height="450" width="450" border="0" data="

Hypertext Markup Language The concept is like this 22 Targeting Links to Frames Menu [Chap 1][Chap 2][Chap 3] Chapter pages will be displayed here

Hypertext Markup Language  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 Targeting Links to Frames

Hypertext Markup Language Solution 24 Targeting Links to Frames Full Frame Demo <frame src="html_menu_top.html" name="top"> <frame src="html_default.html" name="bottom">

Hypertext Markup Language Solution 25 Targeting Links to Frames Please select menu here [Chap 1][Chap 2][Chap 3] Please select menu here [ Chap 1 ] [ Chap 2 ] [ Chap 3 ] File name: html_menu_top.html

Hypertext Markup Language Solution 26 Targeting Links to Frames Your menu is up there! Your menu is up there! File name: html_default.html

Hypertext Markup Language Solution 27 Targeting Links to Frames Chapter 1 Chapter 1 File name: html_chap1.html Chapter 2 Chapter 3 Chapter 2 File name: html_chap2.html Chapter 3 File name: html_chap3.html

Hypertext Markup Language The concept is like this 28 Targeting Links to Frames ( ) Select Your Menu Here [Chap 1][Chap 2][Chap 3] Hyperlinks will be here Chapter pages will be displayed here inside inline frame

Hypertext Markup Language  Create an HTML page with a title and 3 hyperlinks  Make sure you set the target for all 3 hyperlinks to “display”  Place tag below the hyperlinks, set the height and width to “450”, and, give it a name as “display” 29 Targeting Links to Frames ( )

Hypertext Markup Language Solution 30 Targeting Links to Frames ( ) Select Your Menu Here [Chap 1][Chap 2][Chap 3] iframe full demo Select Your Menu Here [ Chap 1 ] [ Chap 2 ] [ Chap 3 ]

Hypertext Markup Language Create scrolling display Attributes: 31 Marquee (... ) 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

Hypertext Markup Language Attributes: Only Opera and IE fully support hspace and vspace attribute 32 Marquee (... ) AttributeDescription 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

Hypertext Markup Language Examples 33 Marquee (... ) I Love Programming I Love Programming I Love Programming I Love Programming

Hypertext Markup Language Bibliography (Book) Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. Bibliography (Websites)