Upload
hollie
View
27
Download
0
Tags:
Embed Size (px)
DESCRIPTION
CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT. CHAPTER: H yper T ext M arkup L anguage HTML (Continue). Siti Nurbaya Ismail Faculty of Computer Science & Mathematics, Universiti Teknologi MARA ( UiTM ), Kedah - PowerPoint PPT Presentation
Citation preview
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:
Hypertext Markup Language
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
Hypertext Markup Language
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>
Hypertext Markup Language
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>
Hypertext Markup Language
• 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>
Hypertext Markup Language
• 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>
Hypertext Markup Language
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>
Hypertext Markup Language
• 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>
Hypertext Markup Language
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>
Hypertext Markup Language
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>
Hypertext Markup Language
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>
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
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)
Hypertext Markup Language
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
Hypertext Markup Language
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_frame2.html, 25%
html_frame3.html, *%
html_frame1.html
Hypertext Markup Language
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_frame2.html, 30%
html_frame3.html, 70%
html_frame1.html
Hypertext Markup Language
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_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 <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=“ ”>
Hypertext Markup Language
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>
Hypertext Markup Language
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
Hypertext Markup Language
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
Targeting Links to Frames
Hypertext Markup Language
Solution
24
Targeting Links to Frames
<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>
Hypertext Markup Language
Solution
25
Targeting Links to Frames
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
Hypertext Markup Language
Solution
26
Targeting Links to Frames
Your menu is up there! <html><head></head><body><p>Your menu is up there!</p></body></html>File name:
html_default.html
Hypertext Markup Language
Solution
27
Targeting Links to Frames
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
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 (<iframe>)
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 <iframe> tag below the hyperlinks, set the height and width to “450”,
and, give it a name as “display”
29
Targeting Links to Frames (<iframe>)
Hypertext Markup Language
Solution
30
Targeting Links to Frames (<iframe>)
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>
Hypertext Markup Language
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
Hypertext Markup Language
Attributes:
Only Opera and IE fully support hspace and vspace attribute
32
Marquee (<marquee>...</marquee>)
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
Hypertext Markup Language
Examples
33
Marquee (<marquee>...</marquee>)
<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>
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.w3schools.com/html/default.asp• http://www.quackit.com/html/• http://www.htmlcodetutorial.com/• http://www.pagetutor.com/html_tutor/index.html
34