Lab 0: Making a Simple Web Page

In this assignment, you will learn some of the basics of HTML. HTML, hypertext markup language, is the main language used on the web. When you use Netscape Composer to create a web page, it turns what you write into HTML. The HTML source file that it creates only loosely resembles what is displayed by a web browser when it reads the HTML source file. In these HTML assignments, you will learn about what the HTML source file looks like and how it is translated into a document by the web browser.

In each of these HTML assignments, I recommend that you refer to your textbook as well as the links provided on the course materials web page, in particular, the HTML4 reference (follow the link to elements. ) The elements page has a list of all of the tags that we will be talking about and details about how each one works.

How to write raw html files

When you view an HTML file using a browser, you are not seeing the raw HTML code. You are seeing a rendering of the document. If you open an HTML file under Notepad, you will see the raw HTML code rather than the rendered version that you see in a web browser. What you see will resembles what you see when you select View->Page Source from Netscape Navigator. Under Notepad, you can edit this raw HTML file and make the page look the way you want.

To start experimenting, first go to the View menu item in the web browser that you are using to read this page and select "Page Source." This will show you the raw HTML file that the web browser renders into a beautiful document. It looks pretty ugly at first, but you will get used to it.

When the web browser looks at this raw HTML file, it translates some of the text (called "tags" or "elements") into commands that tell it how to make the text look. We will learn about many of these commands in future assignment. In this assignment, we will keep it very simple.

Now let's start Notepad and begin to create our own raw HTML file. The start of every .html file should look like this:

<html>
<head>
   <meta name="Author" content="Alan Turing">
   <title>HTML Assignment</title>
</head>
<body>

except that you should have your own name and title in place of mine. There may be more tags inside the head but these should always be there. We will learn about another use of the meta tag later.

Go ahead and type (or copy) that text into the Notepad window now, then change the name and title to what you want it to be. Now before you go any further, go ahead and save the file as follows:

Create a folder in your home directory called cs130 (or something similar). This is where you will place all the course material you create before it becomes "live" on the world wide web.
In Notepad, go to the File menu and select "Save As". At the bottom of the dialog that pops up is a field labeled "Save as type:". Select "All Files (*.*)" from that field. Now select the text field labeled "File name:" and type in "lab0.html" without the quotes. Choose the cs130 folder you just created by using the "Save in:" field. When you have the correct folder, and file name selected, click the "Save" button. If you did not select the "All Files (*.*)" and type the "File name:" correctly, you will have lots of problems later.
From now on, when you want to save changes you make, you can simply go to the "File" menu and select "Save."

The <head> tag tells the web browser that you are about to include some general information about the document that should not be rendered on the page itself. For instance, we have specified the title of the page (which will be displayed in the title bar in the web browser window) and the author of the page (which will not be displayed anywhere.)

The </head> tag tells the web browser that you have finished with the general information.

The <body> tag indicates that what follows will appear in the rendered document. At the very end of the document, you should always have the two lines:

</body>
</html>

During class each of you will be given a topic related to the history of computer science and the web. During lab, you are to search the web to find information and images about this particular topic. For that topic, write a one page summary of what you found and place it on your web page. Each person will then take turns discussing what they have found. A web page of links will be compiled.

Placing Your Web Page on the Web

At this point you have a web page that only you can view in a web browser. To do this, open up Netscape, choose the menu "file", "open page", and use the browse button to pick the location of lab0.html. Then click open to view the web page. You are viewing the web page that is simply your own private file and not viewing it "through the web".

To make your web page available "world wide" via the web, you need to do the following:

Create a new folder in top level of your home directory called public_html. It must have this name exactly.
Copy your lab0.html file into the public_html directory. Rename it exactly index.html. This file is the main link into your web site. To access it, you go to the web address http://www.willamette.edu/~your_login_name. For example, the instructor has the login name gorr, so her web page link is http://www.willamette.edu/~gorr. Try viewing for web page by typing in your web address. If you are unable to view it it may because the permissions are not set properly. In this case, go to the next step.
Each folder and file you create has a set of permissions associated with it. The permissions determine who is allowed to read, write, or execute the file or folder. In general, it is a good idea to make all of your files readable only by you. However, in order for people to look at your web page, the public_html folder and all the files in it that you want people to be view must be readable by everyone (also called world readable) . To make public_html and index.html world readable, do the following:

telnet into gemini or hudson depending on where your home page is located
In the main menu, choose Unix
to see the list of files and folders in your home directory type ll -l <return> (Notes: A. these are all the letter land not the number 1, and B. <return> means to hit the return key) You will also see on the left the set of permissions for each file. In class, we will discuss what these mean. To change them to the desired sent of permissions type the following commands in red:

chmod +r public_html <return> (this makes public_html world readable)
cd public_html <return> (this moves you to the public_html directory where index.html is located)
chmod +r index.html <return> (this makes index.html world readable)
exit <return> (to return back to the main menu)

Now, try again to see if you can view your web page by going to the http address. If you are still unable to view it, then go through the above directions to make sure you followed everything exactly. It is easy to make a typo.

See lecture notes as well.

[top]

[Syllabus]

[Home]