Your SlideShare is downloading. ×
Tutorial 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tutorial 2

461

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×