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 make HTML documents available through a publically accessible web server.

Before doing the tutorial, please read:

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

Textbook Chapter 2: HTML

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.

We have set up accounts on a Unix server phoenix.murdoch.edu.au for you to use. Students who enrolled after the start of semester may not have an account yet. If you find you cannot log on using the instructions below, you will need to contact the unit coordinator to request an account. Clearly state your name and student number when you make your request.

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 textbook 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 Unix 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 (secure shell). 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 session to phoenix.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 "default01".

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 public_html. The web server is configured to find your web resources like HTML and PHP files there.

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 passwords "default01" and "hard2guess" below will not actually appear on the screen.

login as: s30303030 Sent username "s30303030" s30303030@phoenix.murdoch.edu.au's password: default01 Sun Microsystems Inc. SunOS 5.8 Generic February 2000 Sun Microsystems Inc. SunOS 5.8 Generic February 2000
phoenix:~> passwd s30303030 Enter login password: default01 New password: hard2guess Re-enter new password: hard2guess passwd (SYSTEM): passwd successfully changed for s30303030phoenix:~> mkdir public_html
phoenix:~> ls
public_html
phoenix:~> 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 phoenix.murdoch.edu.au. Login with your login name as above (eg. s30303030), as use the password you set above. Once connected, put your HTML file into your public_html directory.
You must also check that the file permission for each file is set so that the web server can read the file. You can do so by using your FTP program. It should show the file's flags on the server as "-rw-r--r--". Consult your tutor if you would like to know what that means.
If you do not know how to get this with your FTP program, then use the "ls -l" command in SSH. So for example, if you uploaded the file mywebpage.html, then you should do the following in SSH:

phoenix:~> cd public_html
phoenix:~/public_html> ls -l total 2 -rw-r--r-- 1 s30303030 b211 43 Aug 3 10:54 mywebpage.html
phoenix:~/public_html>

The "ls -l" does a listing for your directory in long format. All your files should have the indicator "-rw-r--r--" at the front.

phoenix:~/public_html> chmod 644 mywebpage.html
phoenix:~/public_html> ls -l total 2 -rw-r--r-- 1 s30303030 b211 43 Aug 3 10:55 mywebpage.html
phoenix:~/public_html>

You need to do this only the first time you upload the file. The file permission should stay the same however many times you upload the file subsequently.
If you have many files to upload, and would like to change the file permission for all of them at once, use the "*" wildcard character. Eg:

phoenix:~/public_html> chmod 644 *
phoenix:~/public_html> ls -l total 2 -rw-r--r-- 1 s30303030 b211 43 Aug 3 10:54 index.html -rw-r--r-- 1 s30303030 b211 43 Aug 3 10:54 icon.gif -rw-r--r-- 1 s30303030 b211 43 Aug 3 10:54 mywebpage.html
phoenix:~/public_html>

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 30303030 and your HTML filename is mywebpage.html, then use your browser to access the URL http://phoenix.murdoch.edu.au/~s30303030/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.

Make sure also that you are familiar with 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 HTML and PHP 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