INE 1020 Introduction to Internet Engineering

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
• lthtmlgt
• ltheadgt
• lttitlegtMy First Page!lt/titlegt
• lt/headgt
• ltbodygt
• ltfont size2gtHello! World!lt/fontgt
• lt/bodygt
• lt/htmlgt

8
HTML

• Some other useful tags
• Embed an image
• ltimg src/graphic.jpg width100 height100gt
• Create a hyperlink
• lta hrefhttp//www.cuhk.edu.hkgtclick this!lt/agt
• Create an email link
• lta hrefmailtopktsang3_at_ie.cuhk.edu.hkgtmail
  me!lt/agt
• Create a list
• lta hrefmailtopktsang3_at_ie.cuhk.edu.hkgtmail
  me!lt/agt

9
HTML

• Some other useful tags
• Create a list
• ltolgt
• ltligtitem1lt/ligt
• ltligtitem2lt/ligt
• ltligtitem3lt/ligt
• lt/olgt
• Try ltulgtlt/ulgt instead of ltolgtlt/olgt and observe
  the difference

10
HTML

• Some other useful tags
• Tables
• lttablegt
• lttrgt
• lttdgtthis is row 1, column 1lt/tdgt
• lttdgtthis is row 1, column 2lt/tdgt
• lt/trgt
• lttrgt
• lttdgtthis is row 2, column 1lt/tdgt
• lttdgtthis is row 2, column 2lt/tdgt
• lt/trgt
• lt/tablegt

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
• Lets try http//www.ine.cuhk.edu.hk/_contactus.ph
  p

12
(No Transcript)
13
HTML

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
  Transitional//EN"gt
• ltHTMLgtltHEADgt
• ltTITLEgtInternet Engineering Programme CUHK
  ??????lt/TITLEgt
• ltMETA http-equivContent-Type content"text/html
  charsetBig5"gt
• ltSTYLE typetext/cssgt
• divContainer LEFT 0px POSITION absolute
  TOP 0px
• divContent LEFT 0px POSITION absolute TOP
  0px
• Controller LEFT 0px POSITION absolute TOP
  0px
• Alink color white
• Avisited color orange
• Ahover COLORyellow TEXT-DECORATION
  underline
• lt/STYLEgt

14
HTML

• ltscript language"JavaScript"gt
• lt!--
• function MM_reloadPage(init) //reloads the
  window if Nav4 resized
• if (inittrue) with (navigator) if
  ((appName"Netscape")(parseInt(appVersion)4))
  
• document.MM_pgWinnerWidth
  document.MM_pgHinnerHeight onresizeMM_reloadPag
  e
• else if (innerWidth!document.MM_pgW
  innerHeight!document.MM_pgH) location.reload()
• MM_reloadPage(true)
• // --gt
• lt/scriptgt

15
HTML

• BODY width"800" height"473" bgcolor"000000"
  text"FFFFFF" onresize"if (document.layers)
  window.location.reload()" leftMargin0
  topMargin0 marginheight"0" marginwidth"0" gt
• ltSCRIPT languageJavaScript src"JS/up_dn_scroll.j
  s" typetext/javascriptgtlt/SCRIPTgt
• ltSCRIPT languageJavaScript src"JS/mma.js"
  typetext/javascriptgtlt/SCRIPTgt
• ltSCRIPT languageJavaScript src"JS/mu.js"
  typetext/javascriptgtlt/SCRIPTgt
• ltdiv id"Layer1" style"positionabsolute
  left354px top48px width402px height307px
  z-index1 overflow auto"gtltfont color"FFFFFF"
  face"Arial, Helvetica, sans-serif" size"2"gtIf
• you would like to find out more about our
  programme, you are always welcome
• to contact us at lt/fontgt

16
HTML

• ltp align"center"gtltfont color"FFFFFF"
  face"Arial, Helvetica, sans-serif"
  size"2"gtltbgtTel
• 2603-5691lt/bgtlt/fontgtlt/pgt
• ltp align"center"gtltbgtltfont color"FFFFFF"
  face"Arial, Helvetica, sans-serif" size"2"gtFax
  
• 2603-5032lt/fontgtlt/bgtlt/pgt
• ltp align"center"gtltbgtltfont color"FFFFFF"
  face"Arial, Helvetica, sans-serif" size"2"gtlta
  href"mailto20dept_at_ine.cuhk.edu.hk"gtemail
• dept_at_ine.cuhk.edu.hklt/agtlt/fontgtlt/bgtltfont
  color"FFFFFF" face"Arial, Helvetica,
  sans-serif" size"2"gtltbrgt
• lt/fontgtlt/pgt
• lt/divgt

17
HTML

• lttable border"0" cellpadding"0" cellspacing"0"
  width"800" height"473" background"BG_INE_V3_200
  20403/11_Contact Us/cu.jpg"gt
• lttrgt
• lttd width"800" height"473"gtlt/tdgt
• lt/trgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

18
Experiment 2

• Lab 2 Basic HTML
• Task Create your personal webpage
• You may start doing it NOW!
• Due date
• 30 Sept 235959 for Monday Group
• 3 Oct 235959 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 dont 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.htmlGS