csc317/318 internet programing / dynamic web application development

1

CSC317/318INTERNET PROGRAMING /

DYNAMIC WEB APPLICATION DEVELOPMENTCHAPTER:

HyperText Markup LanguageHTML

(Continue)

Siti Nurbaya IsmailFaculty of Computer Science & Mathematics,

Universiti Teknologi MARA (UiTM), Kedah| A2-3039 | [email protected] | 019-5710562 |

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:


HTML ‘s features multimedia are: Images Applets Audio Video HTML documents itself

3

Introduction

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


Why we have to use <object>? 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 <img> and <applet> elements.– 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

<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

<object>


• Displaying A Picture

• Displaying A Web Page

6

<object>

<object height="100%" width="100%"type="image/jpeg" data="audi.jpeg"></object>

<object type="text/html" height="100%" width="100%"data="http://www.w3schools.com"></object>


• Displaying A Sound

• Displaying A Video

classid ?

7

<object>

<objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="FileName" value="liar.wav" /></object>

<objectclassid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="FileName" value="3d.wmv" /></object>


New in HTML5 <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

<audio> + <video> + <embed>


• Displaying A Sound

• Displaying A Video

9

<audio>+<video>+<embed>+<object>

<object> <embed name=“tq“ src="tq.mp3“ width="300“ height="90“></object>

<embed name="rp" src="Russell.mp4" width="300" height="250" >

<object width="425" height="360" > <embed name=“rp" src="Russell.mp4"></object>

<embed name=“tq“ src="tq.mp3“ width="300“ height="90" loop="false“ hidden="false“ autostart="false">

<video src="Russell.mp4" width="300" height="250"> text </video>

<audio src=“tq.mp3”> text </audio>


10

Images

Sample: include an image using <img>

<html><head><title>Object Sample Code</title></head><body><p><h3>Include a PNG Image using <code>img</code></h3><img src="images/hepi.jpg“></p></body></html>


11

Images

Sample: include an image as background image

<html>

<head><title>Background Image</title></head>

<body background="images/bg_body.gif">

<h4> Image as page background.<br> Make sure u can see the texT! </h4></body>

</html>


12

Applets

Sample: include an applet using applet element (deprecated)

Sample: include an applet using object

<APPLET code="Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </APPLET>

<OBJECT codetype="application/java" classid="java:Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </OBJECT>


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


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


15

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)


Vertical Frameset

16

Frames

<html><head> <title>Frameset Page</title></head><frameset cols=“25%,25%,*"> <frame src="html_frame1.html"> <frame src="html_frame2.html"> <frame src="html_frame3.html"></frameset></html>

html_frame2.html, 25%

html_frame3.html, *%

html_frame1.html


Horizontal Frameset

17

Frames

<html><head> <title>Frameset Page</title></head><frameset rows=“25%,25%,*"> <frame src="html_frame1.html"> <frame src="html_frame2.html"> <frame src="html_frame3.html"></frameset></html>


html_frame3.html, *%

html_frame1.html


18

Frames

<html>

<frameset rows="20%,*"> <frame src="html_frame1.html"></frame> <frameset cols="25%,75%"> <frame src="html_frame2.html"></frame> <frame src="html_frame3.html"></frame> </frameset></frameset>

</html>



html_frame1.html


19

Frames

<html>

<frameset cols="20%,*"> <frame src="html_frame1.html"></frame> <frameset rows="25%,75%"> <frame src="html_frame2.html"></frame> <frame src="html_frame3.html"></frame> </frameset></frameset>

</html>



html_frame1.html


Some frame attributes to be consider when applying frame within your html page

- frameborder attributes within the <frameset> tag* define the thickness of the frameset border

- noresize attributes within the <frame> tag* define the whether the frame border can be resized or not

- scrolling attributes within the <frame> tag* define the whether the frame border can be scroll or not

20

Frames

<frameborder =“ ”>

<frame noresize=“ ”>

<frame scrolling=“ ”>


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

21

<iframe> vs <object>

<html><head><title>iframe vs object</title></head><body><iframe height="450“width="450" src="http://www.yahoo.com"> </iframe></body></html>

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


The concept is like this

22

Targeting Links to Frames

Menu[Chap 1][Chap 2][Chap 3]

Hyperlinks will be here

Chapter pages will be displayed here


Create an HTML page with 2 rows using frame tag 1st frame (top): include an HTML page that contains title and hyperlinks & give

it name, let say “top” 2nd 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



Solution

24


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


Solution

25


Please select menu here[Chap 1][Chap 2][Chap 3]

<html><head></head><body><p>Please select menu here<br>[<a href="html_chap1.html" target="bottom">Chap 1</a>][<a href="html_chap2.html" target="bottom">Chap 2</a>][<a href="html_chap3.html" target="bottom">Chap 3</a>]</p></body></html>

File name: html_menu_top.html


Solution

26


Your menu is up there! <html><head></head><body><p>Your menu is up there!</p></body></html>File name:

html_default.html


Solution

27


Chapter 1 <html><head></head><body><h4>Chapter 1<h4></body></html>

File name: html_chap1.html

<html><head></head><body><h4>Chapter 2<h4></body></html>

<html><head></head><body><h4>Chapter 3<h4></body></html>

Chapter 2


Chapter 3



The concept is like this

28

Targeting Links to Frames (<iframe>)

Select Your Menu Here[Chap 1][Chap 2][Chap 3]

Hyperlinks will be here

Chapter pages will be displayed here inside inline

frame


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



Solution

30


Select Your Menu Here[Chap 1][Chap 2][Chap 3]

<html><head><title>iframe full demo</title></head><body><p><h4>Select Your Menu Here</h4><br>[<a href="html_chap1.html" target="display">Chap 1</a>][<a href="html_chap2.html" target="display">Chap 2</a>][<a href="html_chap3.html" target="display">Chap 3</a>]</p><br><iframe src=“html_default.html” name="display" height="450" width="450"></iframe></body></html>


Create scrolling displayAttributes:

31

Marquee (<marquee>...</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


Attributes:

Only Opera and IE fully support hspace and vspace attribute

32


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


Examples

33


<marquee>I Love Programming</marquee>

<marquee width="20%" direction="up">I Love Programming<br><img src="images/pic.png" width="60" height="60"></marquee>

<marquee width="30%" bgcolor="red">I Love Programming<br><img src="images/pic.png" width="60" height="60"></marquee>

<marquee width="20%" scrolldelay="500">I Love Programming</marquee>


Bibliography (Book)• Knuckles (2001). Introduction to Interactive Programming on the Internet

using HTML & Javascript. John Wiley & Sons, Inc.

Bibliography (Websites)• http://www.w3schools.com/html/default.asp• http://www.quackit.com/html/• http://www.htmlcodetutorial.com/• http://www.pagetutor.com/html_tutor/index.html

34

http://www.w3schools.com/html/default.asp

http://www.quackit.com/html/

http://www.htmlcodetutorial.com/

http://www.pagetutor.com/html_tutor/index.html

csc317/318 internet programing / dynamic web application development

Documents

hypertext markup language7new

specific attributes

heightglobal attributes

controlsglobal attributes

object typetry

nested object elements

object sample code

interactive content