Lab Assignment: Web Activity

Background:

In this lab, you will build a working three page web site that is all about YOU. Consider this a fun exercise in which you will learn the basics of HTML and, at the same time, create something that you can share with others (i.e. prospective employers) to highlight your skills, talents, and expertise.

Resources:

• Read Wallace: Chapter 6 for a broad overview of website design.
• View the HTML videos in your Reading & Study folder.
• Go through the web tutorial at www.w3schools.com/html/default.asp
• Review the sample HTML files in your Lab folder on Blackboard. All the HTML commands you will need are found in these sample HTML files.

Examples for most of these commands can also be found on the W3Schools website (www.w3schools.com/tags/ref_byfunc.asp )

Directions:

• Using Notepad (PC) or TextEdit (Mac), create a three page website.

• This website should be similar to the Sample HTML Files (JavaJam). I would suggest using those files as a guide to help you design your site.

• Include all of the requirements and HTML commands below to earn to full credit for this lab.

Tasks:

1. Create a folder called YourNameWebPage. (e.g. If your name is John Smith, your folder will be called JohnSmithWebPage.) This folder can be placed anywhere you choose on your computer.

2. In this folder create a web page, named index.html, that contains at least the following items. [Note: You may add additional items to your web page to make it more interesting/professional.]

• Place your full name in an H1 heading at the center of the top of the page
• Place your street address in an H3 heading below your name at the center of the page
• Place your city, state and postal code in an H3 heading below the street address at the center of the page.
• Place your contact information (home phone, cell phone, email address - whatever you have) in an H3 heading below the city, state, and postal code information at the center of the page
• Below your name and contact information in an unordered list [ul]
• [li]bullet #1 type a brief one sentence career objective
• bullet #2 type a second one sentence career objective
• bullet #3 type a third one sentence career objective
• Below the bulleted list insert a Horizontal Rule [hr] tag
• Below the horizontal rule insert an image which is a picture (e.g. you, something you like, etc.)
• Specify a background color for the web page
• Include a navigation menu somewhere on your page that allows you to go to the other pages in your site. (Make sure you put this in the same location on each page for consistency.)

3. Save image files to the YourNameWebPage folder.

4. In the YourNameWebPage, create a second web page, named aboutme.html, that contains at least the following items. [Note: You may add additional items to your web page to make it more interesting/professional.]

• Set the title of the web page to your name
• Display your name using an H2 tag in the center at the top of the page
• Create an H3 heading (not centered,) named Major
• In an ordered list [ol]
• [li]bullet # 1 - type your major
• bullet # 2 - type the year you plan to graduate
• Create an H3 heading (not centered,) named Computer Experience
• Within a paragraph [p] write a short description of any experience you have with computers, paid or otherwise
• Create another H3 heading (not centered,) named Calling
• Within a paragraph [p] write a short description of what you feel God is calling you to do in your career
• Include a navigation menu somewhere on your page that allows you to go to the other pages in your site. (Make sure you put this in the same location on each page for consistency.)

5. In the YourNameWebPage folder, create a third web page, named favorites.html. This page is for you to share a few of your favorite things (Websites/Movies/Music/Activities/etc.).

• Create a heading using a Heading tag of your choice (H1 - H6), named My Favorites

• Create an ordered list [ol] or unordered list [ul] of your favorite things or any additional facts/information you would like to include about yourself

• Insert an Absolute Hyperlink to an outside site

• Include a navigation menu somewhere on your page that allows you to go to the other pages in your site. (Make sure you put this in the same location on each page for consistency.)

6. Make sure all files in this lab (i.e. index.html, aboutme.html, favorites.html, and your picture file) are located in the YourNameWebPage folder

7. Zip the YourNameWebPage folder as instructed below

• Select the YourNameWebPage folder by clicking on the folder name
• Move the mouse cursor is over the selected folder and right click
• On the drop down-menu move the cursor to "Send To".
• On the "Send To" sub-menu select "Compressed (zipped) Folder".