Lab 2: Building Web Pages

Introduction

We will be using the World Wide Web (or just the Web) to display the multimedia that you create in this course. As you're undoubtedly aware, the Web is a system of interlinked (hypertext) documents called web pages, which are accessible via the Internet. Each web page is accessed via a unique address or URL (Uniform Resource Locator). For example, you can open up a web browser such as Internet Explorer on Microsoft Windows or Konqueror on Linux and go to the URL http://www.cnn.com/ to view CNN's web page. From CNN's web page you can also click on links to go to other web pages as well.

Any web address or URL such as http://www.cnn.com/WORLD/europe/archive/index.html is made up of several components. The "http" indicates that the HyperText Transfer Protocol should be used, which is the protocol for transferring web pages. The second part, which follows "://" and is followed by another "/" (in this example "www.cnn.com") is the domain name. The domain name is the name for the host machine or machines that handle the network traffic for that domain (e.g., CNN). The final part of the address is the path to the HTML file on the host machine (in this example "WORLD/europe/archive/index.html"). The slashes in this last part separate the folders and files.

By the end of this lab, you will also have a web page that you can visit (and have friends and family check out!). The web address will be http://math.hws.edu/~username/index.html where username is replaced with your own username (for example, my address would be http://math.hws.edu/~mcorliss/index.html). As you see from the address, the domain name is math.hws.edu (actually math.hws.edu is a subdomain of hws.edu). The ~username specifies that the web page is in the home folder of username. Finally, the web page is called "index.html" ("index" is used for reasons that are discussed below).

Web pages are written in a language called HTML (HyperText Markup Language). In this lab, you will write two simple web pages in HTML. Chapter 11.1 of the textbook describes the basics of HTML. You should read this section before writing any HTML. For more information, check out the following HTML reference web site: http://www.w3schools.com/HTML/. You can also get ideas by searching the Web and finding web pages that you like. If you find an interesting web page, you can click on "View Source", "View HTML", or something similar to view the HTML code.

As with the last lab, this lab contains a lot of useful information, and has some specific tasks to accomplish mixed in. These tasks are marked with a checkmark icon (shown on the right) to help you find them. However, you'll get a lot more out of the lab if you read through it in order instead of just skipping to the checkmarks.

Setup

Within your cs120 folder on your desktop, which you created in lab 1, you will find a lab02 folder where you can put this week's work (I created this folder for you). You will also copy the web pages that you create in this lab to the www folder in your home folder, which will put them on the Internet.

Creating Web Pages

A web page is simply an HTML file, i.e., a file containing HTML code. Technically, a web page should be located on a web server in a location that is accessible from the Internet. But at first, we will create some web pages that are not Internet accessible, and then later in the lab, put those web pages on the Internet.

To create a new web page file, you can right click in the folder where you want the web page to reside, select "Create New", and then select "HTML File..." from the submenu. This will popup a window asking for the name of the file, which you can then type into the textfield and hit "OK". Make sure you end the file with ".html", the extension for HTML files.

Create a new web page called hello.html in your lab02 folder within your cs120 folder on your desktop.

Writing Web Pages

Of course, after creating your web page file, you will want to put some HTML code in it, otherwise, it won't be a very interesting page. The application Kate, which you used in lab 1 to edit text files, can also be used to edit HTML files. To open the web page with Kate, go to the KDE menu in the lower lefthand corner of the screen, select Utilities and select Kate. This should open the application Kate. Then click on "File" in the menu at the top and select "Open ...". You can then navigate through your folders and find the HTML file you want to edit. (Note: in this case, you cannot click or right click on an HTML file to open it with Kate as Kate is not the default editor for HTML files.)

Open the file hello.html (which you created above) with Kate. When you open the HTML file, you will see the following text:

‹html›
  ‹head›
    ‹title›‹/title›
    ‹meta content=""›
    ‹style›‹/style›
  ‹/head›
  ‹body›‹/body›
‹/html›

It might seem surprising to you that this file contains any text since you just created it. In fact, it did not contain text, but Kate automatically added this text when it opened the file since it knew this was a web page and this template code is required in any HTML file.

An HTML file is made up of tags (e.g., ‹html›) that specify structure of particular components in the web page. A tag has a name (in this case html) and is surrounded by ‹ and › symbols. There are both start tags such as ‹b› and end tags such as ‹/b› (the end tag looks just like the start tag except it has a / after the ‹). A tag essentially indicates the style or structure of particular parts of the document. For example, ‹b›this text is bold‹/b› specifies that the text within the start and end tag ("this text is bold") should be displayed in bold. Some tags do not have a start and end tag such as a line break (‹br /›). For these tags, it is a good habit to put a / right before the › to indicate that there is no end tag (although it is optional). Finally, some tags have attributes, which specify particular characteristics of the tag. For example, the font tag (‹font›) has an attribute COLOR that specifies the color of the text. It can be assigned any generic color such as red or blue as well as an RGB color value (#00CCFF). Attributes are assigned within the start tag. For example, ‹font COLOR="red"›this text is red‹/b› specifies that the text within the start and end tags ("this text is red") should be colored red.

For more details on tags and HTML, read chapter 11.1 of the book, look over your class notes, and/or check out this online tutorial. Check out this web page for an HTML tag.

Make two simple changes to the HTML code. Add the title, "Hello Page" by putting this text (without the quotes) between the tags ‹title› and ‹/title›. This sets the title of the web page (what appears at the top of the browser window when viewing the page) to "Hello Page". Then add the text "Hello, World!" to the body of the web page by putting the text between the tags ‹body› and ‹/body›. This will put the text "Hello, World!" onto the page itself. When you are finished, the HTML code should look as follows:

‹html›
  ‹head›
    ‹title›Hello Page‹/title›
    ‹meta content=""›
    ‹style›‹/style›
  ‹/head›
  ‹body›Hello, World!‹/body›
‹/html›

Viewing Your Web Page

To view your web page, you can use Konqueror. If you navigate to the folder containing your web page and the click on the web page (not right click but left click), the page will be displayed in Konqueror. This page, however, is not viewable via the Internet but only from the machine you are logged into. Often, though, it is a good idea to view them on your own machine first, before putting them on the Internet (to make sure there are no errors).

Open the web page hello.html in Konqueror.

Publishing Your Web Page

In order for your web page to be viewable via the Internet it must be moved to a web server. Fortunately, the machine you are logged into (or more precisely, the server where your files are located) is a web server, you just need to move your web page to the appropriate place. Every user with an account on the Math/Computer Science machines has a folder called www for placing web pages. Any web page within www is viewable on the Internet.

For example, if I copied the web page teaching.html to my www folder then it would be viewable via the Internet. The address of the web page would be http://math.hws.edu/~mcorliss/teaching.html (this web page exists). If you copied teaching.html to your www folder the address would be similar except that you would need to replace mcorliss with your own username.

You can even place folders within your www folder. I have a folder called teaching where I place all of my course web pages. You can view the contents of this folder by going to http://math.hws.edu/~mcorliss/teaching/.

If the HTML file is left off of the end of the address (as it was in the case above), then the browser will do one of two things: (1) it will attempt to open an HTML file called index.html or it will display the contents of the folder (which is what happened above). Therefore, it is often a good idea to put an HTML file called index.html in the folders within www folder, which acts as a default web page. In the exercises below, you will create your own personal web page, which will be named index.html.

Copy the file hello.html to the folder www. View this web page in Konqueror, but rather than navigating to the file via your home folder, go to its Internet address. The address for me would be http://math.hws.edu/~mcorliss/hello.html (you should substitute your username for mcorliss).

Exercises

Here are the exercises for this week's lab. They are due in lab next Friday (at the start of lab). Note: you must write the web pages using a text editor like Kate and not using a graphical application (what-you-see-is-what-you-get editor) such as Office or DreamWeaver.

Create a new web page called index.html. This will be your own personal web page, which others can view. At first, create the web page within your lab02 folder within your cs120 folder on your desktop. When you are finished, copy the file to your www folder so that it is viewable from the Internet. (Note: I will check to see that it is in both locations when I grade your lab.) Your web page should include a header (e.g., ‹h1›) with your name, some text that describes yourself and your interests, some links to other web pages you find interesting, and a picture (presumably of yourself). Extra credit is possible for particularly nifty web pages.

With regards to the picture, you can find various pictures (including pictures of you!) online at http://math.hws.edu/~mcorliss/teaching/fall08/cs120/pics/. This is the course repository for images. To use one of these in your web page, navigate to the appropriate picture, and copy the URL from the Konqueror into your HTML file. For example, if you want to use the (non-existent) picture located at http://math.hws.edu/~mcorliss/teaching/fall08/cs120/images/foo.jpg, you could add the following code to your HTML file:
```
‹img src="http://math.hws.edu/~mcorliss/teaching/fall08/cs120/pics/foo.jpg" /›
```
You may also use pictures that are not within the course image repository, however, you may not use copyrighted pictures.

If you want to use colors (e.g., to set the background color of your page) that are non-standard (e.g., magenta), then you will need to use the RGB values as discussed in the book. This web page displays many colors along with their RGB value.
Create a second web page called cs120.html. You will be using this web page to display your work throughout the course, so you should design it with that in mind. In particular, it should include an appropriate title, a header with your name, a header describing the content of this page (e.g., "CS 120 Course Work"), and a table (‹table›) where you will place your future course work.

Your table will eventually contain a row for each picture, sound, and movie that you edit or create in this class. Each row will contain three cells. The first cell will describe the transformation/editing done; the second cell will contain the original picture, sound, or movie; the third cell will contain the edited picture, sound, or movie. For now, you should make two rows. The first should be a header row and should label each column (i.e., give each column a title so it is clear what is in the table). The second row should provide an example so that you (and I) can see how this will look in the future. For now, in this second row, just add some generic text to the first cell, a picture in the second cell (any picture you want), and a picture in the third cell (any picture you want -- even the same picture as in cell 2). Again, this second row is just meant to demonstrate how you will display the work that you do in future labs.

As in the previous exercise, begin by creating the web page within your lab02 folder within your cs120 folder on your desktop. When you are finished, copy the file to your www folder so that it is viewable from the Internet. (Note: I will check to see that it is in both locations when I grade your lab.)