Web Activity Lab
CSIS 100 – Lab 3: 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:
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.
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.)
Save image files to the YourNameWebPage folder.
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.)
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.)
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
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"
Congratulations!
You have just created a web site that you can use for the rest of your life. As you progress through the classes in your degree program, be sure to update your site to reflect your new skills. Later, when you are searching for a job, you can share this site with prospective employers.
Deliverables:
Submit the zipped file [YourNameWebPage.zip] using the Lab 3 assignment link in Blackboard by the date indicated on the course schedule.