Csc317 318 internet programing dynamic web application development
Download
1 / 35

CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT - PowerPoint PPT Presentation


  • 70 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT' - enya


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Csc317 318 internet programing dynamic web application development

CSC317/318INTERNET PROGRAMING /DYNAMIC WEB APPLICATION DEVELOPMENT

CHAPTER:

HyperText Markup Language

HTML

(Continue)

SitiNurbaya Ismail

Faculty of Computer Science & Mathematics,

UniversitiTeknologi MARA (UiTM), Kedah

| A2-3039 | sitinurbaya@kedah.uitm.edu.my | 019-5710562 |


Upon completion of this chapter you will learn
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


Introduction
Introduction

  • HTML ‘s features multimedia are:

    • Images

    • Applets

    • Audio

    • Video

    • HTML documents itself


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


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


    Object2
    <object>

    • Displaying A Picture

    • Displaying A Web Page

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


    Object3
    <object>

    • Displaying A Sound

    • Displaying A Video

      classid ?

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


    Audio video embed
    <audio> + <video> + <embed>

    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, onclickand 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, onclickand 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, onclickand more.


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

    • Displaying A Sound

    • Displaying A Video

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

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

    loop="false“ hidden="false“ autostart="false">

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

    </object>

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

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

    <object width="425" height="360" >

    <embed name=“rp" src="Russell.mp4">

    </object>


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

    <imgsrc="images/hepi.jpg“>

    </p>

    </body>

    </html>


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


    Images2
    Images

    Create a table with the following format:


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


    Frames
    Frames

    • Frame can be used to display more than one HTML documents in the same web browser window

    • How? Example

    htmldoc3.html

    htmldoc2.html

    htmldoc4.html

    htmldoc1.html


    Frames1
    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



    Frames3
    Frames

    Vertical Frameset

    <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_frame1.html

    html_frame2.html, 25%

    html_frame3.html, *%


    Frames4
    Frames

    Horizontal Frameset

    <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_frame1.html

    html_frame2.html, 25%

    html_frame3.html, *%


    Frames5
    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

    html_frame2.html, 30%

    html_frame3.html, 70%


    Frames6
    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

    html_frame2.html, 30%

    html_frame3.html, 70%


    Frames7
    Frames

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

    - frameborderattributes within the <frameset> tag

    * define the thickness of the frameset border

    - noresizeattributes within the <frame> tag

    * define the whether the frame border can be resized or not

    - scrollingattributes within the <frame> tag

    * define the whether the frame border can be scroll or not

    <frameborder =“ ”>

    <frame noresize=“ ”>

    <frame scrolling=“ ”>


    Iframe vs object
    <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>

    <p>

    <object name="test“ type="text/html"

    height="450" width="450" border="0"

    data="http://www.yahoo.com"></object>

    </p>

    </body>

    </html>

    <html>

    <head>

    <title>iframevs object</title>

    </head>

    <body>

    <iframe height="450“

    width="450"src="http://www.yahoo.com"> </iframe>

    </body>

    </html>


    Targeting links to frames
    Targeting Links to Frames

    The concept is like this

    Hyperlinks will be here

    Chapter pages will be displayed here


    Targeting links to frames1
    Targeting Links to Frames

    • 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


    Targeting links to frames2
    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>


    Targeting links to frames3
    Targeting Links to Frames

    Solution

    <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


    Targeting links to frames4
    Targeting Links to Frames

    Solution

    <html>

    <head></head>

    <body>

    <p>

    Your menu is up there!

    </p>

    </body>

    </html>

    File name: html_default.html


    Targeting links to frames5
    Targeting Links to Frames

    Solution

    <html>

    <head></head>

    <body>

    <h4>Chapter 1<h4>

    </body>

    </html>

    File name: html_chap3.html

    File name: html_chap1.html

    <html>

    <head></head>

    <body>

    <h4>Chapter 3<h4>

    </body>

    </html>

    <html>

    <head></head>

    <body>

    <h4>Chapter 2<h4>

    </body>

    </html>

    File name: html_chap2.html


    Targeting links to frames iframe
    Targeting Links to Frames (<iframe>)

    The concept is like this

    Hyperlinks will be here

    Chapter pages will be displayed here inside inline frame


    Targeting links to frames iframe1
    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”


    Targeting links to frames iframe2
    Targeting Links to Frames (<iframe>)

    Solution

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

    <iframesrc=“html_default.html” name="display" height="450" width="450"></iframe>

    </body>

    </html>


    Marquee marquee marquee
    Marquee (<marquee>...</marquee>)

    Create scrolling display

    Attributes:


    Marquee marquee marquee1
    Marquee (<marquee>...</marquee>)

    Attributes:

    Only Opera and IE fully support hspace and vspace attribute


    Marquee marquee marquee2
    Marquee (<marquee>...</marquee>)

    Examples

    <marquee>I Love Programming</marquee>

    <marquee width="20%" direction="up">

    I Love Programming<br>

    <imgsrc="images/pic.png" width="60" height="60">

    </marquee>

    <marquee width="30%" bgcolor="red">

    I Love Programming<br>

    <imgsrc="images/pic.png" width="60" height="60">

    </marquee>

    <marquee width="20%" scrolldelay="500">

    I Love Programming

    </marquee>


    Csc317 318 internet programing dynamic web application development

    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