Tutorial 2

520
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
520
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutorial 2

  1. 1. INE 1020 Introduction to Internet Engineering Tutorial 2 Basic Web Programming and Lab 2
  2. 2. Introduction <ul><li>What an HTML Document Is </li></ul><ul><ul><li>Plain-text (also known as ASCII) files </li></ul></ul><ul><ul><li>can be created using any text editor </li></ul></ul><ul><ul><li>e.g., Emacs, vior pico on UNIX machines; SimpleText on a Macintosh; Notepad on a Windows machine. </li></ul></ul>
  3. 3. Introduction <ul><li>WYSIWYG HTML Editors </li></ul><ul><ul><li>WYSIWYG -- &quot;what you see is what you get“ </li></ul></ul><ul><ul><li>e.g., Microsoft Frontpage, Macromedia Dreamweaver </li></ul></ul><ul><ul><li>you design your HTML document visually, as if you were using a word processor </li></ul></ul><ul><ul><li>No need to write the markup tags in a plain-text file and imagining what the resulting page will look like. </li></ul></ul><ul><ul><li>Still useful to know enough HTML to code a document </li></ul></ul>
  4. 4. Introduction <ul><li>Text Editors </li></ul><ul><ul><li>Very flexible, not bounded to any tools </li></ul></ul><ul><ul><li>Have to memorize all syntax and tags </li></ul></ul><ul><ul><li>Less user-friendly </li></ul></ul><ul><ul><li>More error-prone </li></ul></ul><ul><ul><li>Few programmers use them solely nowadays </li></ul></ul><ul><ul><li>E.g. Notepad in Windows, pico, vim in Unix </li></ul></ul>
  5. 5. Web programming <ul><li>Points to note when building website </li></ul><ul><ul><li>Content </li></ul></ul><ul><ul><ul><li>Informative? Interesting? Frequently updated? </li></ul></ul></ul><ul><ul><li>User-friendly interface </li></ul></ul><ul><ul><ul><li>Web surfers can easily to locate what he/she wants </li></ul></ul></ul><ul><ul><li>Fancy but not too much </li></ul></ul><ul><ul><ul><li>Good use of graphics and themes </li></ul></ul></ul>
  6. 6. Web Programming <ul><li>Points to note when building website </li></ul><ul><ul><li>Speed </li></ul></ul><ul><ul><ul><li>Web surfers are impatient! </li></ul></ul></ul><ul><ul><li>Software compatibility </li></ul></ul><ul><ul><ul><li>New technology might be “too new” for browsers </li></ul></ul></ul><ul><ul><ul><li>Some tags are incompatible in some browsers </li></ul></ul></ul>
  7. 7. HTML <ul><li>A simple example: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>My First Page!</title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><font size=2>Hello! World!</font> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  8. 8. HTML <ul><li>Some other useful tags: </li></ul><ul><ul><li>Embed an image: </li></ul></ul><ul><ul><ul><li><img src=“/graphic.jpg” width=100 height=100> </li></ul></ul></ul><ul><ul><li>Create a hyperlink: </li></ul></ul><ul><ul><ul><li><a href=http://www.cuhk.edu.hk>click this!</a> </li></ul></ul></ul><ul><ul><li>Create an email link: </li></ul></ul><ul><ul><ul><li><a href=mailto:pktsang3@ie.cuhk.edu.hk>mail me!</a> </li></ul></ul></ul><ul><ul><li>Create a list: </li></ul></ul><ul><ul><ul><li><a href=mailto:pktsang3@ie.cuhk.edu.hk>mail me!</a> </li></ul></ul></ul>
  9. 9. HTML <ul><li>Some other useful tags </li></ul><ul><ul><li>Create a list: </li></ul></ul><ul><ul><ul><li><ol> </li></ul></ul></ul><ul><ul><ul><li><li>item1</li> </li></ul></ul></ul><ul><ul><ul><li><li>item2</li> </li></ul></ul></ul><ul><ul><ul><li><li>item3</li> </li></ul></ul></ul><ul><ul><ul><li></ol> </li></ul></ul></ul><ul><ul><ul><li>Try <ul>&</ul> instead of <ol>&</ol> and observe the difference </li></ul></ul></ul>
  10. 10. HTML <ul><li>Some other useful tags: </li></ul><ul><ul><li>Tables: </li></ul></ul><ul><ul><ul><li><table> </li></ul></ul></ul><ul><ul><ul><li><tr> </li></ul></ul></ul><ul><ul><ul><li><td>this is row 1, column 1</td> </li></ul></ul></ul><ul><ul><ul><li><td>this is row 1, column 2</td> </li></ul></ul></ul><ul><ul><ul><li></tr> </li></ul></ul></ul><ul><ul><ul><li><tr> </li></ul></ul></ul><ul><ul><ul><li><td>this is row 2, column 1</td> </li></ul></ul></ul><ul><ul><ul><li><td>this is row 2, column 2</td> </li></ul></ul></ul><ul><ul><ul><li></tr> </li></ul></ul></ul><ul><ul><ul><li></table> </li></ul></ul></ul>
  11. 11. HTML <ul><li>Some other useful tags: </li></ul><ul><ul><li>Still a lot more </li></ul></ul><ul><ul><li>You are advised to read some reference books or search in google.com </li></ul></ul><ul><ul><li>Always try to read the source </li></ul></ul><ul><ul><li>A good way to learn </li></ul></ul><ul><ul><li>Let’s try http://www.ine.cuhk.edu.hk/_contactus.php </li></ul></ul>
  12. 13. HTML <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> </li></ul><ul><li><HTML><HEAD> </li></ul><ul><li><TITLE>Internet Engineering Programme CUHK 互聯網工程學 </TITLE> </li></ul><ul><li><META http-equiv=Content-Type content=&quot;text/html; charset=Big5&quot;> </li></ul><ul><li><STYLE type=text/css> </li></ul><ul><li>#divContainer { LEFT: 0px; POSITION: absolute; TOP: 0px} </li></ul><ul><li>#divContent { LEFT: 0px; POSITION: absolute; TOP: 0px} </li></ul><ul><li>#Controller { LEFT: 0px; POSITION: absolute; TOP: 0px} </li></ul><ul><li>A:link { color: white;} </li></ul><ul><li>A:visited { color: orange;} </li></ul><ul><li>A:hover { COLOR:yellow; TEXT-DECORATION: underline} </li></ul><ul><li></STYLE> </li></ul>
  13. 14. HTML <ul><li><script language=&quot;JavaScript&quot;> </li></ul><ul><li><!-- </li></ul><ul><li>function MM_reloadPage(init) { //reloads the window if Nav4 resized </li></ul><ul><li>if (init==true) with (navigator) {if ((appName==&quot;Netscape&quot;)&&(parseInt(appVersion)==4)) { </li></ul><ul><li>document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} </li></ul><ul><li>else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); </li></ul><ul><li>} </li></ul><ul><li>MM_reloadPage(true); </li></ul><ul><li>// --> </li></ul><ul><li></script> </li></ul>
  14. 15. HTML <ul><li>BODY width=&quot;800&quot; height=&quot;473&quot; bgcolor=&quot;#000000&quot; text=&quot;#FFFFFF&quot; onresize=&quot;if (document.layers) window.location.reload();&quot; leftMargin=0 topMargin=0 marginheight=&quot;0&quot; marginwidth=&quot;0&quot; > </li></ul><ul><li><SCRIPT language=JavaScript src=&quot;JS/up_dn_scroll.js&quot; type=text/javascript></SCRIPT> </li></ul><ul><li><SCRIPT language=JavaScript src=&quot;JS/mma.js&quot; type=text/javascript></SCRIPT> </li></ul><ul><li><SCRIPT language=JavaScript src=&quot;JS/mu.js&quot; type=text/javascript></SCRIPT> </li></ul><ul><li><div id=&quot;Layer1&quot; style=&quot;position:absolute; left:354px; top:48px; width:402px; height:307px; z-index:1; overflow: auto&quot;><font color=&quot;#FFFFFF&quot; face=&quot;Arial, Helvetica, sans-serif&quot; size=&quot;2&quot;>If </li></ul><ul><li>you would like to find out more about our programme, you are always welcome </li></ul><ul><li>to contact us at </font> </li></ul>
  15. 16. HTML <ul><li><p align=&quot;center&quot;><font color=&quot;#FFFFFF&quot; face=&quot;Arial, Helvetica, sans-serif&quot; size=&quot;2&quot;><b>Tel: </li></ul><ul><li>2603-5691</b></font></p> </li></ul><ul><li><p align=&quot;center&quot;><b><font color=&quot;#FFFFFF&quot; face=&quot;Arial, Helvetica, sans-serif&quot; size=&quot;2&quot;>Fax: </li></ul><ul><li>2603-5032</font></b></p> </li></ul><ul><li><p align=&quot;center&quot;><b><font color=&quot;#FFFFFF&quot; face=&quot;Arial, Helvetica, sans-serif&quot; size=&quot;2&quot;><a href=&quot;mailto:%20dept@ine.cuhk.edu.hk&quot;>email: </li></ul><ul><li>dept@ine.cuhk.edu.hk</a></font></b><font color=&quot;#FFFFFF&quot; face=&quot;Arial, Helvetica, sans-serif&quot; size=&quot;2&quot;><br> </li></ul><ul><li></font></p> </li></ul><ul><li></div> </li></ul>
  16. 17. HTML <ul><li><table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;800&quot; height=&quot;473&quot; background=&quot;BG_INE_V3_20020403/11_Contact Us/cu.jpg&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td width=&quot;800&quot; height=&quot;473&quot;></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  17. 18. Experiment 2 <ul><li>Lab 2: Basic HTML </li></ul><ul><li>Task: Create your personal webpage </li></ul><ul><li>You may start doing it NOW! </li></ul><ul><li>Due date: </li></ul><ul><ul><li>30 Sept 23:59:59 for Monday Group </li></ul></ul><ul><ul><li>3 Oct 23:59:59 for Thursday Group </li></ul></ul><ul><li>Need not show up during official lab period </li></ul>
  18. 19. Experiment 2 <ul><li>If you have any problems on Lab 2: </li></ul><ul><ul><li>Ask during tutorials in weeks 4 & 5 </li></ul></ul><ul><ul><li>Ask during lab period M9 & T8 in weeks 4 & 5 </li></ul></ul><ul><ul><li>Stop by my office (better make an appointment thru’ email in advance) </li></ul></ul>
  19. 20. Experiment 2 <ul><li>Evaluation </li></ul><ul><ul><li>I will visit your website after the deadline and mark according to the marking scheme </li></ul></ul><ul><ul><li>So don’t remove your website until you are graded </li></ul></ul>
  20. 21. Homework <ul><li>Try out the HTML code shown in this tutorial </li></ul><ul><li>Study some HTML tutorials on the web, like: http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html#GS </li></ul>

×