csc317/318 internet programing / dynamic web application development
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 PresentationTRANSCRIPT
![Page 1: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/1.jpg)
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 |
![Page 2: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/2.jpg)
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:
![Page 3: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/3.jpg)
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
![Page 4: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/4.jpg)
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>
![Page 5: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/5.jpg)
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>
![Page 6: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/6.jpg)
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>
![Page 7: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/7.jpg)
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>
![Page 8: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/8.jpg)
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>
![Page 9: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/9.jpg)
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>
![Page 10: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/10.jpg)
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>
![Page 11: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/11.jpg)
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>
![Page 12: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/12.jpg)
Hypertext Markup Language
Create a table with the following format:
12
Images
![Page 13: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/13.jpg)
Hypertext Markup Language
13
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>
![Page 14: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/14.jpg)
Hypertext Markup Language
Frame can be used to display more than one HTML documents in the same web browser window
How? Example
14
Frames
htmldoc1.html
htmldoc2.html
htmldoc3.html
htmldoc4.html
![Page 15: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/15.jpg)
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
15
Frames
![Page 16: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/16.jpg)
Hypertext Markup Language
16
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)
![Page 17: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/17.jpg)
Hypertext Markup Language
Vertical Frameset
17
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
![Page 18: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/18.jpg)
Hypertext Markup Language
Horizontal Frameset
18
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
![Page 19: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/19.jpg)
Hypertext Markup Language
19
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
![Page 20: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/20.jpg)
Hypertext Markup Language
20
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
![Page 21: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/21.jpg)
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
21
Frames
<frameborder =“ ”>
<frame noresize=“ ”>
<frame scrolling=“ ”>
![Page 22: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/22.jpg)
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
22
<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>
![Page 23: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/23.jpg)
Hypertext Markup Language
The concept is like this
23
Targeting Links to Frames
Menu[Chap 1][Chap 2][Chap 3]
Hyperlinks will be here
Chapter pages will be displayed here
![Page 24: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/24.jpg)
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
24
Targeting Links to Frames
![Page 25: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/25.jpg)
Hypertext Markup Language
Solution
25
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>
![Page 26: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/26.jpg)
Hypertext Markup Language
Solution
26
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
![Page 27: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/27.jpg)
Hypertext Markup Language
Solution
27
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
![Page 28: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/28.jpg)
Hypertext Markup Language
Solution
28
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
![Page 29: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/29.jpg)
Hypertext Markup Language
The concept is like this
29
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
![Page 30: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/30.jpg)
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”
30
Targeting Links to Frames (<iframe>)
![Page 31: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/31.jpg)
Hypertext Markup Language
Solution
31
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>
![Page 32: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/32.jpg)
Hypertext Markup Language
Create scrolling displayAttributes:
32
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
![Page 33: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/33.jpg)
Hypertext Markup Language
Attributes:
Only Opera and IE fully support hspace and vspace attribute
33
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
![Page 34: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/34.jpg)
Hypertext Markup Language
Examples
34
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>
![Page 35: CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT](https://reader030.vdocuments.site/reader030/viewer/2022020117/56815e80550346895dcd0d49/html5/thumbnails/35.jpg)
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
35