This assignment is designed to give you an opportunity to develop a website in HTML while also introducing some of the new elements of the XHTML standard. You will use a template that was created in Microsoft Publisher as a starting point. The changes must be completed by coding the HTML by hand. You will find the notes we cover in lecture particularly helpful for this assignment. Additionally, this HTML overview may be useful as a basic tag reference. There are also online tutorials such as W3Schools.com that are helpful.
It is strongly recommended that you complete this tutorial from a UB lab computer so you will have direct access to the S: drive which is the location where your webpage must be stored. If you want to directly connect to the S: drive from your home computer, the directions are available here. There are other ways to edit and create webpages on your UB webspace, but this approach I've outlined is the easiest. Other approaches require you to use FTP software which may be more difficult for novices.
First you should check to see if your personal UB website is enabled. You can do this be visiting www.buffalo.edu/~username where "username" is your UB IT name. If you receive a Forbidden error, then your webpage isn't enabled. You can enable your website by logging in here and setting Internet Access ON. Once your website is enabled, visit your personal homepage again and make sure the default page appears. If you haven't already built a webpage in your UB webspace, the default page should look something like this.
You are now ready to copy the homework template to your personal website. Do this by copying this file index.html to the public_html folder in your S: drive. If you already have a homepage that you don't want to overwrite, you can save this template using a filename other than index.html. You have to right click on the link to index.html and select "Save Target As" in order to download the template file to the public_html folder in your S: drive. This will replace your existing default homepage which is also named index.html. Your personal homepage should now look like this if you downloaded and saved the file properly.
Now that the template file is saved in the public_html folder on your S: drive, you can edit it using Notepad which is a text editing program in Windows. To start Notepad in Windows XP, click on Start, Programs, Accessories and Notepad. Alternatively you can click on Start, Run, and type Notepad in the Open box. If you're working on this assignment from a lab computer, click on File and Open, and then navigate to the public_html folder in the S: drive. Change the "Files of Type" dropdown list to "All Files" and select the index.html file that's listed. You should now have the homework template file opened and ready to edit. Once you modify and resave this file, it will reflect those changes on your personal webpage when you reload it.
If your website is still displaying the Forbidden error, it could be due to a permissions problem with your account. This usually affects a handful of students each semester. Follow these instructions to fix the problem.
For your website, edit the template with the following changes:
HTML5 Best Practices
- Ensure all appropriate tags are in lowercase. Hint: Check the <body> tag and it's attributes. There are also two <b> tags and one <i> tag that need to be fixed.
- Replace the existing DOCTYPE tag with a DOCTYPE tag that is compliant with HTML5 standards.
- Make sure all the <br> (line break) tags are properly closed. Use Edit/Replace in Notepad to change all of the <br> tags at once.
- Make sure all other tags are properly closed. Hint: Check the <meta> and <img> tags. They will need to be "self-closed" like the <br> tag in the previous step.
- Make sure all tag attribute values are properly enclosed in double quotes. Hint: Check the attributes of the <img> tag.
- BONUS: Include an internal style sheet to match the existing formatting of the <body> tag. Next, modify the <body> tag to use the style instead of the hard coded formatting.
Tag changes and additions
- Change the picture img0.gif to another picture and have it link to the course website when clicked.
- Change the background color to something other than white. Some hexadecimal color codes to choose from can be found here.
- Change the contact information to your information including an email link to your email address. You may want to use a fake address and phone number for privacy reasons!
- Change the paragraph to one about yourself and the group project you are working on. You should also change the home page title to something appropriate for your web page.
- Add an unordered list of your group members using the unordered list <ul> tag.
- Add the author, description and keywords meta tags.
- Add a copyright symbol along with the current year.
Linking to other pages
- Add 3 links to websites related to any topics in MIS. You can find these by using a search engine. The links must be coded to open up the website in another browser window.
- Save your Initial Project Design document as Project.htm in your UB webspace in the same directory as your index.html page. In Word, use Save As Web Page with the Save as Type option set to (*.htm, *.html). Save the file with the filename Project.htm.
- Add a relative link from your homepage to your Project.htm page.
- Add an absolute link from your Project.htm page back to your main webpage.
