1 / 33

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT. BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES. Outline. Designing Interface Using HTML. Introduction Objects Images Applets (deprecated) Font Style (deprecated) Frames

alouis
Télécharger la présentation

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES

  2. Outline Designing Interface Using HTML • Introduction • Objects • Images • Applets (deprecated) • Font Style (deprecated) • Frames • Marquee FSKM UiTM Pahang  Page 2

  3. Designing Interface Using HTML Introduction • HTML’s multimedia features are: • Images • Applets • Audio • Video • HTML document itself FSKM UiTM Pahang  Page 3

  4. Designing Interface Using HTML Introduction • Why we have to use object? • It supports new and future media types • applet element has deprecated (outdated/obsolete) • Even though object element is getting attention, img and iframe elements still can be used nowadays FSKM UiTM Pahang  Page 4

  5. Designing Interface Using HTML Objects • Sample: include PNG image using object <html> <head> <title>Object Sample Code</title> </head> <body> <p> <h3>Include a PNG Image using <code>object</code></h3> <object data="images/pic.png" type="image/png" classid="clsid:4063BE15-3B08-470D-A0D5-B37161CFFD69" width="100" height="100"> <param name="src" value="images/pic.png"> <img src="images/pic.png" alt=""> </object> </p> </body> </html> FSKM UiTM Pahang  Page 5

  6. Designing Interface Using HTML Objects • Sample: include HTML file using object <html> <head> <title>Object Sample Code</title> </head> <body> <p> <h3>Include a HTML file <code>object</code></h3></h3> <object data="html_ol.html"> </object> </p></body> </html> FSKM UiTM Pahang  Page 6

  7. Designing Interface Using HTML 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/images_hp.gif“> </p> </body> </html> FSKM UiTM Pahang  Page 7

  8. Designing Interface Using HTML Applets (deprecated) • 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> FSKM UiTM Pahang  Page 8

  9. Designing Interface Using HTML Font (deprecated) • Sample: using <font> tag to display text <html> <body> <p><font size="2" face="Verdana"> This is a paragraph. </font></p> <p><font size="5" face="Times" color="blue"> This is another paragraph. </font></p> </body> </html> FSKM UiTM Pahang  Page 9

  10. Designing Interface Using HTML Font • <font> tag is deprecated. It will be removed in the latest version of HTML • Similar to applet • W3C recommends the uses of Cascading Style Sheet (CSS) to create layout and display properties of HTML FSKM UiTM Pahang  Page 10

  11. Designing Interface Using HTML Frames • Frame can be used to display more than one HTML documents in the same web browser window • How? Example banner.html left.html content.html index.html FSKM UiTM Pahang  Page 11

  12. Designing Interface Using HTML 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 FSKM UiTM Pahang  Page 12

  13. Designing Interface Using HTML Frames FSKM UiTM Pahang  Page 13

  14. Designing Interface Using HTML index.html Frames <html> <head> <title>Frameset page<title> </head> <frameset cols = "25%, *"> <frame src ="left.html" name="left"></frame> <frame src ="content.html" name="content"></frame> </frameset> </html> left.html, 25% content.html, *% FSKM UiTM Pahang  Page 14

  15. Designing Interface Using HTML banner.html Frames <html> <head> </head> <frameset rows="20%,*"> <frame src="banner.html" name="banner"></frame> <frameset cols="30%,70%"> <frame src="left.html" name="left"></frame> <frame src="content.html" name="content"></frame> </frameset> </frameset> </html> left.html, 30% index.html content.html, 70% FSKM UiTM Pahang  Page 15

  16. Designing Interface Using HTML banner.html, 30% Frames <html> <head> </head> <frameset cols="30%,70%"> <frame src="left.html" name="left"></frame> <frameset rows="20%,*"> <frame src="banner.html" name="banner"></frame> <frame src="content.html" name="content"></frame> </frameset> </frameset> </html> index.html left.html content.html, 70% FSKM UiTM Pahang  Page 16

  17. Designing Interface Using HTML <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>iframe vs object</title> </head> <body> <iframe height="450" width="450"src="http://www.yahoo.com"> </iframe> </body> </html> FSKM UiTM Pahang  Page 17

  18. Designing Interface Using HTML Targeting Links to Frames • The concept is like this Hyperlinks will be here Chapter pages will be displayed here FSKM UiTM Pahang  Page 18

  19. Designing Interface Using HTML 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 FSKM UiTM Pahang  Page 19

  20. Designing Interface Using HTML 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> FSKM UiTM Pahang  Page 20

  21. Designing Interface Using HTML 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 FSKM UiTM Pahang  Page 21

  22. Designing Interface Using HTML Targeting Links to Frames • Solution File name: html_default.html <html> <head></head> <body> <p> Your menu is up there! </p> </body> </html> FSKM UiTM Pahang  Page 22

  23. Designing Interface Using HTML Targeting Links to Frames • Solution <html> <head></head> <body> <h4>Chapter 1<h4> </body> </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 File name: html_chap3.html FSKM UiTM Pahang  Page 23

  24. Designing Interface Using HTML Targeting Links to Inline Frame (<iframe>) • The concept is like this Hyperlinks will be here Chapter pages will be displayed here inside inline frame FSKM UiTM Pahang  Page 24

  25. Designing Interface Using HTML Targeting Links to Inline Frame (<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” FSKM UiTM Pahang  Page 25

  26. Designing Interface Using HTML Targeting Links to Inline Frame (<iframe>) <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> • Solution FSKM UiTM Pahang  Page 26

  27. Designing Interface Using HTML Marquee (<marquee>...</marquee>) • Create scrolling display • Attributes: FSKM UiTM Pahang  Page 27

  28. Designing Interface Using HTML Marquee (<marquee>...</marquee>) • Attributes: • Only Opera and IE fully support hspace and vspace attribute FSKM UiTM Pahang  Page 28

  29. Designing Interface Using HTML Marquee (<marquee>...</marquee>) • Examples: <marquee>Diploma in Science</marquee> <marquee width="20%" direction="up"> Diploma in Science<br> <img src="images/pic.png" width="60" height="60"> </marquee> <marquee width="30%" bgcolor="red"> Diploma in Science<br> <img src="images/pic.png" width="60" height="60"> </marquee> <marquee width="20%" scrolldelay="500"> Diploma in Science </marquee> FSKM UiTM Pahang  Page 29

  30. Individual Assignment Create you own website using HTML Content must be included: Your biodata (compulsory) General content (e.g. Sports, your own interest) Apply everything you have learnt Minimum numbers of HTML pages: 5, maximum is 10 Please use Notepad application Submission due: ............................... FSKM UiTM Pahang  Page 30

  31. Individual Assignment Submission format: Softcopy, burn it in a CD Class Rep collects all assignments Class Rep creates a folder for each student. Follow this format for folder name [student number – full name] Each student has his/her own folder Burn all the folders in 1 CD Total marks: 10% FSKM UiTM Pahang  Page 31

  32. Question? FSKM UiTM Pahang  Page 32

  33. Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. http://www.w3schools.com/html/default.asp http://www.quackit.com/html/ http://www.htmlcodetutorial.com/ Bibliography (Book) Bibliography (Websites) FSKM UiTM Pahang  Page 33

More Related