CPSC 120, Fall 2012
Lab 1: Introduction to HTML and CSS

Welcome to the first lab for CPSC 120. In this lab, you will create your first web pages. You will also be introduced to the Linux operating system.

As you work through the instructions for the lab, there are likely to be things that you don't understand. Ask for help! You are also encouraged to come in for help during office hours.

You are not expected to complete the lab during class. You should complete all the assignments before class next Friday. The work that you do for this lab will be visible to the whole world on the web as soon as you do it. Since I will already have access to your work, you don't have to do anything to turn in your work. Since everyone in the class will create something different, the universal access is not a problem for this lab.

Getting into Linux

The computers in Gulick 208 are usually running the Windows operating system, but they are also set up to run Linux. There are actually many versions of Linux. The one we are using is called "Linux Mint." You can read more about Linux on the About Linux page.

To get into Linux, restart the computer, or start it if it is turned off. (To restart, hit Control-Alt-Delete to get to the login screen. Then, use the small "power button" menu on the bottom-right of the login screen and select restart.) As the computer starts up, there is a point where you are given a choice between "Windows" and "Linux Mint". Press the down-arrow key once to select "Linux Mint", and press return. You have about 30 seconds to do this. After a couple minutes, you will see a Linux login screen.

Log in using the Linux user name and password that were assigned to you. (Your Linux user name is the same as your user name for email and for the campus network, but the password is different.) Your Linux desktop will have a menu at the bottom left of the screen. You can explore some of the applications in that menu, when you have time. For now, you should select "gedit" from the "Accessories" section of the menu. The gedit program is a text editor, which means that you can use it to write files that are made up of plain text. The HTML source of a web page is written as a plain text file.

The default preference settings in gedit are not good for HTML or other web files. For improved editing, you need to make some changes to the preferences. In any gedit window, select the "Preferences" command from the "Edit" menu. Change the settings in the "View" pane and in the "Editor" pane as follows:

Gedit Preferences Settings Dialog

That is, you want to turn off Text Wrapping, turn on Line Numbers, set Tab Width to 4, turn on Insert Spaces Instead of Tabs, and turn on Automatic Indentation. The most important change is to turn off Text Wrapping, which means that you will have to press return to start a new line when typing; you will not automatically get a new line when you reach the end of the current line. (For programming, you need strict control over where lines end.)

Creating and Viewing an HTML File

To create a web page, all you need to do is type some HTML code into a text file. We've gone over the basic outline of an HTML page. As a starting point, you can type the following into a gedit window -- or open this page is a web browser and copy-and-paste the code into the gedit window:

<html>

<head>
<title>Lab1: First Web Page</title>
</head>

<body>

<h2>About Me</h2>

<p>Here's all you need to know about me...</p>

</body>
</html>

Fill in some extra text to the page, to say something about yourself. Add at least a few more paragraphs, with some real information! You could say where you come from, what you plan to major in, why you are taking this course. (Remember that this will all be public!)

To see your web page in a Web browser, you first need to save the HTML code into a file. Furthermore, the name of the file must end with ".html" (or ".htm"). It's also a good idea to avoid using spaces or funny characters in the name. Hyphen (-), underscore (_), and numbers are fine.

There is a directory named www in your account. Use the "Save" command in gedit's "File" menu to save your HTML into a file in the www directory. Give it a name such as "about_me.html" or "lab1a.html".

You can see the result of your work by opening the file in a web browser. Your Desktop has an icon named "Home." Double-click that icon to open a file browser window, where you can see the folders and files in your Linux account. Double-click the www folder. You should see your HTML file inside. To open the file in a web browser, just double-click the icon, as usual. (Note: If you don't already have the file open in gedit, you can right-click the icon and use the "Open With" submenu to open the file with the text editor. Alternatively, you can start up gedit and use the "Open" command in gedit to open your file.)

Your page is also available on the web for anyone to see. Suppose that the file is named about_me.html and that your user name is zz9999. The your page can be found at this URL:

http://math.hws.edu/~zz9999/about_me.html

The character just before zz9999 is a squiggle ("~"), which you will find in the upper left corner of the keyboard. Of course, you have to replace zz999 with your own user name, and you have to replace about_me.html with whatever name you used for the file. To use the URL, type it into the location box at the top of any web browser window. (When you do this, you can leave out the "http://" part of the URL -- but that really is part of the URL, and you will need to use it later in this lab, when you add links to your page.)

Adding Style

As you know, the HTML code for a web page specifies the content of the page. To add style, you can use CSS. One way to use CSS is to add a <style> section to the <head> of the HTML file. For example, add the following code to your HTML file (and remember to put it somewhere between <head> and </head> -- it can go either before or after the <title> element):

<style type="text/css">
body {
   background-color: #DDDDFF;
}
h2 {
   color: red;
}
p {
   color: #000080;
}
</style>

This will make the background color for the whole page a pale blue (#DDDDFF), will show the text of <h2> elements in red, and will show the text of <p> elements in dark blue (#000080). Experiment with some other styles and colors. ("#DDDDFF" is an example of a color code. Color codes are capable of expressing any color that can be shown on the screen, which is a lot more colors than have actual names like "red" or "yellow". The color chooser web page at http://www.w3schools.com/tags/ref_colorpicker.asp can be helpful in finding appropriate color codes. Use it!)

Add some other style to your page. Make up your own colors. You can add a background color to <h2> or <p> elements, although that might not look too good in the end. You can add

width: 700px

to the body style to limit the line width of the text on the page to 700 pixels (about 7 inches). Try some of the font and text effects from Book 2, Chapter 2 of the textbook. You don't have to decide on a final style right now. You can continue to work on it for the next week.

Adding an Image

To make your page just a little less boring, add an image to the page. To do this, you need an image file, such as this one:

A picture of the Hobart quad

Preferably, you should find your own image. You can grab any picture that you find on a web page -- just be sure that it's legal for you to use the picture on your own page! If you don't own the picture, and if the owner has not given permission, then using the picture is probably a violation of copyright. If you have a picture of yourself somewhere on the web, that would be ideal. Or you might find a picture in Wikimedia commons. (Some of the pictures there require you to credit the owner if you use them.) You want an image that's not too big to fit nicely into your web page!

First, you should download the image file. Open the web page that contains the image in Firefox. Right-click the image, and save it into your www folder. Note the name of the file -- you will need to know that to add it to your web page.

To add the image to your web page, you need to add an <img> tag to the HTML code. It's usually a good idea to put images inside <p> tags. Add this code in the <body> of your page, where you want the image to appear, replacing filename with the name of the actual file that you downloaded:

<p align="center"><img src="filename"></p>

Note the use of the attribute, align="center", in the <p> tag. This will center the image on the page.

You will want to add some text to your page to talk about the picture!

Check your page in a web browser to make sure that the image is loading properly. The image must be in the same folder as the web page that uses it.

Another Page, with Lists and Links

Now that you've created one web page, it will be easy to create more. As an assignment you should make at least one more web page. To make things definite, you should imagine that you are creating a web page for some organization, or to provide information on some topic, or to support some cause.

Give the page a meaningful title. Add some headlines, paragraphs, and pictures. Apply some CSS to make the page more attractive. As you learn more about HTML and CSS over the course of the next week, add some additional features and styles to the page.

The page that you create must use at least one list (that is, a <ul> or <ol> element), and it must use at least three links (that is <a> elements that link to other pages). You can link to other pages anywhere on the web. Use "absolute URLs" for the pages, that is, URLs that start with "http://". For example, you could link to the math/cs deparment's web page using the URL http://math.hws.edu. The link to that page can be specified with an <a> element such as:

<a href="http://math.hws.edu">The Math/CS Department</a>

Links and URLs are covered in Book 1, Chapter 5 of the textbook.

By next Friday, when the work from this lab is due, you should have written two web pages and they should be in your www folder, complete and ready to be collected and graded.

Working Outside of Lab

You will need to do a lot of work on your web pages outside of lab. You have several options for working on your own.