CMSC 104, Fall 2009

Homework 3 - Part One

Creating a Personal Web Page

Out: Tuesday, 10/6/09
Due: Thursday, 10/15/09, before 11:59pm

Objectives

To learn how to create a Web page at UMBC
To practice using basic HTML and CSS

The Assignment

You are going to create a personal Web site in your GL account at UMBC. In order to accomplish this task, you will use the assistance of a free CSS template found at http://www.freecsstemplates.org/. The template is to be used to help you design your own web page. You will notice that most of the content on these web pages is in latin. You are to remove the content that is not applicable to you. If you keep any links on the page, they should be active. Your home page should be named index.html. From this page, you will have tabbed links to favorite.html and least.html which are pages that include a list of your favorite and least favorite things. Within these pages, you will have categories of your chosing like movies, books, etc. and within those categories you will create a list. You will also have a link on the home page for your resume, and one for your contact information. That means each page should have a header containing links to Home, Least Favorite, Most Favorite, Resume and Contact. If you would like your resume to display in a separate window, you need to add the attribute target="_blank" to your anchor tag, but this is not required. Each page should contain the following elements (using the tags discussed in lecture):

Several paragraphs
At least one line break
At least one horizontal rule
At least two headings of different sizes
At least one ordered list or one unordered list (Must have one of each in Web site)
At least one image or hyperlink (Must have one of each in Web site)

If you would like to use any advanced HTML or CSS, you are more than welcome. Feel free to be as creative as you would like. Remember that you must give credit to any creator of a CSS template that you use otherwise it will be considered plagerism.

Creating a Web page at UMBC

Log into your gl account.

Move to the parent directory of your home directory.

linux1[19]% pwd
/afs/umbc.edu/users/d/b/dblock/home/
linux1[20]% cd ..
linux1[21]% ls
Mail  backup  home  pub
linux1[22]%

Now, change into the pub directory. Look at the contents of the directory.

linux1[23]% pwd
/afs/umbc.edu/users/d/b/dblock/
linux1[24]% ls
Mail  backup  home  pub
linux1[25]% cd pub
linux1[26]% ls
www
linux1[27]%

Change into the www directory. Look at the contents of the directory. You should see the cs104 directory you created in Lab 2.

linux1[28]% cd www
linux1[29]% ls
cs104
linux1[30]%

During the lab, I will be showing you how to copy the template into your directory.
To see the file you just copied in a browser, open Firefox. In the location bar at the top, type the following URL:

http://userpages.umbc.edu/~username

where username is your UMBC login name. For example, mine would be http://userpages.umbc.edu/~ordopa1.I have the fireworks template loaded.

To edit the file you just copied, open it in xemacs.

linux1[34]% xemacs index.html

When you first open your file in xemacs, it might ask you for your email address. If it is filled in for you, just hit enter to continue to the file. If not, type it and then hit enter. If it says "Save address for future sessions? (y or n)", type 'y' for yes.

In order to save as you go in xemacs, just type Ctrl-x Ctrl-s. Once you save, you can refresh the browser window and see the changes you made. In order to save and completely exit out of xemacs, type Ctrl-x Ctrl-c and then 'y' for yes to exit.

Once you have opened the file in xemacs, do the following things:
1. Add the rest of the required parts of the html document as given in the template in Lecture 6. You can choose any title you would like.
2. Include an html comment inside of the <head> section that has your name in it and some information about the file. For example:
```
  
	  
```
3. Continue adding new tags and creating your Web page.
I would recommend saving your page and checking it as you go. It is easier to debug when you work incrementally. There are no right or wrong answers for this one. Just have fun!