B211 Lab Week 3

Laboratory Week 3 - HTML Documents

Learning Objectives:

Understand the fundamental structure of a HTML document

Learn a basic set of HTML tags.

Learn how to put HTML documents onto a web server's file structure.

Before doing the tutorial, please read:

Topic 1 lecture on "What is this thing called the Internet?"

Textbook Chapter 2 "Hypertext Markup Language"

Software required:

This lab requires the use of a SSH and an FTP program. The software is available in the internal labs. External students may download the required software from the unit's downloads page.

Exercises:

Create a text file using a text editor (such as Notepad or Wordpad in MS-Windows), and write some HTML pages. Trying out the example code and tags given in the chapter above. Make sure you understand at least the following:

How to create a <header> and <body> parts of a HTML page.

Nesting tags.

How to create paragraphs <p>, breaks <br>, horizontal rules <hr>, headings <h1> <h2> etc.

Having different physical appearances for text <b>, <i> etc.

Having different logical appearances for text <em>, <strong> etc, and the difference between logical apperance and physical appearance.

How to create ordered and unordered lists <ol> <ul>.

How to include images <img>.

How to include an anchor for a hyperlink <a href=...>.

How to create tables <table>.

How to create forms <form ...>.

For code you type in, save it onto a local (or network-mounted) drive on your machine. Start up a browser and open the page to view what it looks like. Use the File>Open... menu item on Netscape Navigator or Internet Explorer. On other browsers, find a similar option.

Most of you will probably be already familiar with HTML based on past experiences. If you are, you may skip this first exercise. Make sure you are familiar with the HTML tags, and not just how to generate the HTML using generators like Macromedia Dreamweaver. You will need to understand and manipulate the tags directly in a lot of the future topics in this unit.

Next, put an example web page you created onto a web server file space, and view it from there. This would involve a few steps.

We have set up a LINUX server for you to put your HTML files for public access. Before you put files on, you must set up your directories on this machine by connecting to it using SSH or TELNET. You will only need to do this once, so you might as well do this now. If you have MS-Windows, do the following:

Start a SSH or TELNET session to red.murdoch.edu.au. Consult your tutor if you do not how to do this.

You should get a login prompt. Your login name is "s" followed by your student number. Type in "s" followed by your student number and Enter (see below). Your initial password is "default".

The first time you log in, you will need to to reset your password. Use the "passwd" command. Pick a password which you can remember, but is not something obvious (like your student number). For internal students, I suggest you use your Novell password, so you do not forget.

Once you have set the password, create a directory call cgi-bin in the directory public_html. The web server is configured to execute CGI scripts in that directory.

Here is a sample session of what you should see. The characters in bold is what you type in (but use your own student number). Note that the words "default" and "020A2312" below won't actually appear on the screen.

Red Hat Linux release 6.1 (Cartman)
Kernel 2.2.12-20 on an i686
login: s202020A password: default
[s202020A@red s202020A]$ passwd
New UNIX password: 020A2312
Retype new UNIX password: 020A2312
passwd: all authentication tokens updated successfully
[s202020A@red s202020A]$ mkdir public_html
[s202020A@red s202020A]$ cd public_html
[s202020A@red public_html]$ mkdir cgi-bin
[s202020A@red public_html]$ ls
cgi-bin
[s202020A@red public_html]$ logout

Now that you've set up your directories, you must put your files in there using FTP. Start your FTP program and connect to red.murdoch.edu.au. Login with your login name as above (eg. s202020A), as use the password you set above. Once connected, put your HTML file into your public_html directory.

Now you can view the files on the server using a browser an specifying the server's address in the URL. For example, if your student number is 202020A and your HTML filename is mywebpage.html, then use your browser to access the URL http://red.murdoch.edu.au/~s202020A/mywebpage.html. Don't forget that your login name has an "s" in front of it.

It is critical after the above exercises that you understand the relationship between where you put the files (using FTP), and what URL people will type in on their browser to access it. This relationship is determined by the web server, who converts between URLs and it's internal file system.

For now, don't worry too much about the details dealing with CGI. We will get to that in future exercises. All the exercises leads an example CGI application which you can build on for assignment 2. Make sure you do know the details of the HTML code syntax. You will need to write Perl scripts to generate the exact syntax when we get to Perl/CGI exercises. If you have been depending on HTML generators to create HTML files for you, now is the time to brush up on your HTML syntax.

Make sure also that you are familiar with the rest of the procedures of uploading your files to the server. It is necessary for you to be familiar with this process, and the relationship between the web client and server, since your CGI applications will necessarily have to reside on a server to work. During your development, you will have to repeatedly upload your code to the server to make them live, so it is recommended that you become very familiar with how to do this efficiently.

Don't forget to keep up with current developments. Test your knowledge of major developments by going through the Good News Week self-tests. Your final exam will contain questions of the same type.

H.L. Hiew
Unit Coordinator