CMSC 104, Spring 2010

Homework 3 - Part One

Creating a Personal Web Page

Out: Wednesday, 3/10/2010
Due: Wednesday, 3/24/2010, 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 Free CSS Templates Using a template will help you design your own web page. Note that there are more than 450 free CSS templates. You are free to remove any content from the template that is not applicable to you. If you keep any links on the page, they should be active.

Basic requirements

1. Your home page should be named index.html.
2. Your home page should be stored in your www directory. See steps below.
3. Note: If you already have a web page (and index.html), please talk to your instructor about options that you may have.
4. From your home page, you will have tabbed links to other files tht you create, so you will have tabbed links to the following files
• favorite.html - which is a list of your favorite things
• least.html - which is a list of your least favorite things
• resume.html - which is your actual resume
• contact.html - which is your contact information
Within these pages, you will have categories of your chosing such as: 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, Most Favorite, Least Favorite, Resume and Contact.

• Several paragraphs
• At least one line break - in the index.html file
• At least one horizontal rule - in the index.html file
• At least two headings of different sizes
• At least one ordered list - in the favorites.html file
• At least one unordered list - in the least.html file
• At least one image - in the index.html file

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. If you want to have all of the required features in every file, you can do that, but for grading purposes, the grader will only look at the listed features above. Remember that you must give credit to any creator of a CSS template that you use otherwise it will be considered plagerism. The same is true for any copyrighted picture that you obtain from the World Wide web.

Creating a Web page at UMBC

1. Log into your gl account.

2. 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]%
       

3. 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]%
	

4. 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]%
	

5. Copy the template to your www directory. During the lab, your instructor can show you how to copy the template into your directory if you do not already know.


6. 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, the course coordinator's userid would be
http://userpages.umbc.edu/~dblock
The course coordinator loaded the fireworks template.

7. 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.

8. 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:

      	<!-- 	
      		Filename: index.html
      		Name: Ima Student
      		Username: astudent1
      		Date: 03/05/09
      		Description:  This file contains the home page for the first part of Homework 3.
      	-->
      	

   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 assignment. Just have fun! Your grade will be based on fulfilling the required features listed above. One bit of caution - the world can see your web page. You should not divulge personal information such as your social security number.