Using Tutorials Tutorial 1in Mm Tutorial 1in Inch Tutorial 2
Tutorial 2
21
1 INE 1020 Introduction to Internet Engineering Tutorial 2 Basic Web Programming and Lab 2
description
Transcript of Tutorial 2
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:[email protected]>mail me!
</a> Create a list:
<a href=mailto:[email protected]>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 "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <TITLE>Internet Engineering Programme CUHK 互聯網工程學 </TITLE> <META http-equiv=Content-Type content="text/html; charset=Big5"> <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="JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(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="800" height="473" bgcolor="#000000" text="#FFFFFF" onresize="if (document.layers) window.location.reload();" leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" > <SCRIPT language=JavaScript src="JS/up_dn_scroll.js" type=text/javascript></SCRIPT> <SCRIPT language=JavaScript src="JS/mma.js" type=text/javascript></SCRIPT> <SCRIPT language=JavaScript src="JS/mu.js" type=text/javascript></SCRIPT> <div id="Layer1" style="position:absolute; left:354px; top:48px; width:402px; height:307px; z-index:1; overflow: auto"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">If you would like to find out more about our programme, you are always welcome to contact us at </font>
16
HTML <p align="center"><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2"><b>Tel: 2603-5691</b></font></p> <p align="center"><b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2">Fax: 2603-5032</font></b></p> <p align="center"><b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2"><a href="mailto:%[email protected]">email: [email protected]</a></font></b><font color="#FFFFFF" face="Arial, Helvetica, sans-serif" size="2"><br> </font></p> </div>
17
HTML <table border="0" cellpadding="0" cellspacing="0" width="800" height="473" background="BG_INE_V3_20020403/11_Contact Us/cu.jpg"> <tr> <td width="800" height="473"></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
