+1(978)310-4246 credencewriters@gmail.com
  

CSIS 100
LAB: HTML WEBSITE ASSIGNMENT TUTORIAL
Resources:
• View the Watch items in your Learn section.
• Go through the HTML Tutorial found under Lab: HTML Website
Resources
• Examples for most commands can also be found by going to the
HTML Element Reference – By Category found under Lab:
HTML Website Resources
Directions:
• Using Notepad (PC) or TextEdit (Mac), create a three-page
website.
• Include all the requirements and HTML commands below to earn full
credit for this lab.
Tasks:
In this lab, you will be building an online employment portfolio. In essence,
you are building an interactive web-based resume. Follow these steps
precisely and you will do fine. This lab will be very easy if you build the
framework of the entire site and test it before you fill in the page content.
This is the process described in steps 1 and 2. In step 1 you will build the
folder where you need to store all the files you create.
In step 2, you will build a template for your pages, then use the template to create the basic 5
pages you will need. Starting with step 2.4 you will build the navigation menu. Once it is built,
you will need to cut and paste it into the five pages build the basic framework of the pages. It is
indeed important to complete this in the order given as the links you create are relevant links. By
adding the navigation menu after the initial pages are built, all your links will be correct.
I cannot stress enough for you to build the Content folder first (as seen in step 1) then save every
file into that folder. If you do not do it this way, many of your links will not function once you
zip the folder for your submission.
Page 1 of 10
CSIS 100
So, let’s get started with your website.
1. Content Folder: Create a file folder called Your_Name_WebSite.
1.1. If your name is John Smith, your folder will be called John_Smith_WebSite.
1.2. This folder can be placed anywhere you choose on your computer.
1.3. It is critical to your project to save all the files you use in this main folder. Images need
to be saved in this folder as well.
1.4. Failure to do this first step is often the reason most pages do not work properly
once zipped for submission.
2. Template: Create a document template to use for all your pages.
2.1. Open Notepad (TextEdit in MAC) and paste the following code into a blank page.
Template
TEMPLATE
2.2. Save it as “template.html” in the folder you created for your webpage.
2.3. Specify a background color for the web site (must be other than white). You can do this
in the Body tag. Grading Tip, if it hurts your eyes when opening, you are likely to lose
points in grading.
2.4. One at a time, create your 5 pages by following these steps:
2.4.1.Home Page
2.4.1.1.Open the template in your text editor
2.4.1.2.Change the word “Template” to “Home” in the title tag
2.4.1.3.In the H1 tag change “TEMPLATE” to “HOME
2.4.1.4.Save as Home.html int the folder you created for your website
2.4.1.5.Do not close this page—you will use it for the next page
2.4.2.Cover Page
2.4.2.1.In the Home.html page, you just created
2.4.2.2.Change the word “Home” to “Cover Letter” in the title tag
2.4.2.3.In the H1 tag change “HOME” to “COVER LETTER
2.4.2.4.Save as Cover.html int the folder you created for your website
2.4.2.5.Do not close this page—you will use it for the next page
2.4.3.Resume Page
2.4.3.1.In the Cover.html page, you just created
2.4.3.2.Change the word “Cover” to “My Resume” in the title tag
2.4.3.3.In the H1 tag change “COVER LETTER to “MY RESUME”
2.4.3.4.Save as Resume.html int the folder you created for your website
2.4.3.5.Do not close this page—you will use it for the next page
Page 2 of 13
CSIS 100
2.4.4.Hobbies Page
2.4.4.1.In the Resume.html page, you just created
2.4.4.2.Change the word “My Resume” to “My Hobbies” in the title tag
2.4.4.3.In the H1 tag change “MY RESUME” to MY HOBBIES
2.4.4.4.Save as Hobby.html int the folder you created for your website
2.4.4.5.Do not close this page—you will use it for the next page
2.4.5.Contact Page
2.4.5.1.In the Hobby.html page, you just created
2.4.5.2.Change the word “My Hobbies” to “Contact” in the title tag
2.4.5.3.In the H1 tag change “MY HOBBIES” to “CONTACTS”
2.4.5.4.Save as Contact.html in the folder you created for your website
2.4.5.5.Do not close this page—you will use it to create a navigation menu in the next
step
2.5. Navigation Menu: Construct a navigation menu on the top and the bottom of your
pages. This should allow you to jump between all your pages. It is important for this
website to function correctly that you created and saved all your pages in the folder you
created before building the navigation links in this step. The easiest method at this point
would be for you to use the button tag.
2.5.1.Before you start you need to view each page you have already created to see how
they look and feel.
2.5.1.1.Open our file directory and double click on each page in order of Home—
Cover—Resume—Hobby—Contact
2.5.1.2.Each should open and look the same except the Header should change to show
the correct page.
2.5.2. Create you 5 navigation buttons using the tag and set them up to link to
the correct pages.
2.5.2.1.Button syntax is as follows
Name of the Button
Example: Home Page
2.5.2.2.After creating all 5 buttons copy the code and paste it Just after the
tag on the top and Just before the tag on the bottom.
2.5.2.3.Add a horizontal rule after the first set of navigation buttons tag
2.5.2.4.Add the needed tag to the navigation buttons on your page both top
and bottom.
2.5.2.5.Copy the button code in the same place on all 5 pages.
Page 3 of 13
CSIS 100
If you have completed this section accurately, you should be able to open any of the 5-page
shells you just build and use the navigation buttons to jump (link) between all of them. If you
cannot do this, you may need to debug your code. It must function before you move forward. If
you cannot figure it out, zip the folder and send it in an e-mail to your instructor with questions.
Your Home page should look something like this when viewed in a browser:
The line between the two navigations buttons is the Horizontal Rule. As we fill in the
remaining data, you will see the pages evolve.
Congratulations, you have just created the shell of your website. Now you just need to put
the rest between the two button navigation codes to complete the following requirement. Be
sure to save every page and get ready for the next section.
You have likely been at this for over an hour now. Maybe more. This is a good spot to take
a break if you need one.
Let us continue and build your website.
Page 4 of 13
CSIS 100
3. Open the Home.html document that you saved in the previous steps and make the following
updates as a minimum: [Note: You may add additional items to your web page to make it
more interesting/professional.]
As you add an item to a page, save it and refresh the view to see what your new code did.
3.1. Place your full name in an H1 heading at the center of the top of the page
3.2. Place your city, state, and postal code in an H2 heading below name (centered on the
page)
3.3. 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
3.4. Insert a Horizontal Rule
3.5. Stop the centering of the text at this point
3.6. Insert Career Objectives using the heading style
3.7. Using the paragraph style tag add the sentence I seek a position with a company:
3.8. Below this add an unordered list [ul] (at least 3 bullets)
3.8.1.bullet #1 type a brief one-sentence career objective
3.8.2.bullet #2 type a second one-sentence career objective
3.8.3.bullet #3 type a third one-sentence career objective
3.9. Insert a Horizontal Rule tag
3.10.Below the horizontal rule insert an image which is a picture (e.g., you, something you
like, etc.) Tip, save image files to the YourNameWebPage folder before you code its
location.
Page 5 of 13
CSIS 100
Your page should now look something like this
4. Now open your Cover.html, You will add at least the following items. [Note: You may add
additional items to your web page to make it more interesting/professional.]
4.1. Display your name using an H2 tag in the center at the top of the page
4.2. Under your name in and italics type in “Cover Letter”
4.3. Make the margin is left flush again (stop the centering)
4.4. Create an H3 heading (not centered,) named “My Intended Major”
4.5. In an ordered list [ol]
4.5.1.bullet # 1 – type your major
4.5.2.bullet # 2 – type the year you plan to graduate
4.6. Create an H3 heading (not centered,) named “Experience Summary”
4.7. Within a paragraph [p] write a short description of any experience you have paid or
otherwise
4.8. Create another H3 heading (not centered,) named My Perceived Calling”
4.9. Within a paragraph [p] write a short description of what you feel God is calling you to
do in your career path.
4.10.Insert a picture of yourself Centered under your Name on top.
Your page should now look like this:
Page 6 of 13
CSIS 100
Page 7 of 13
CSIS 100
5. Now open your Resume.html, page. You will add at least the following items. [Note: You
may add additional items to your web page to make it more interesting/professional.]
5.1. Display your name using an H2 tag in the center at the top of the page
5.2. Under your name in and italics type in “Resume”
5.3. At this point, you have two options to complete this page
5.3.1.Build your resume using the various heading tags and paragraph tags
5.3.2.Insert an image and create an active link to a .pdf version on your Resume
5.3.2.1.Save the image you wish to link from into your web folder first
5.3.2.2.Insert the Image to represent your resume
5.3.2.3.Save the .pdf version of your resume into the web page folder you are saving
all the files into.
5.3.2.4.Using the set an active Link to a pdf file.
Tip. You would need to use the tag Lookup A href in WW3 schools.
Your page should now look like this:
Page 8 of 13
CSIS 100
6. Now open your Hobby.html, page. This page is for you to share a few of your favorite
things (Websites/Movies/Music/Activities/etc.). You will add at least the following items.
[Note: You may add additional items to your web page to make it more interesting/
professional.]
6.1. Display your name using an H2 tag in the center at the top of the page
6.2. Under your name in and italics type in “Hobbies and Interests”
6.3. Show off your skills by showing at least four hobbies, interests, or favorite things. For
each one:
6.3.1.Insert an Image that represents the Items
6.3.2.Write a sentence or two with the image to tell what it is and why it is of interest.
Your page should now look like this:
Page 9 of 13
CSIS 100
7.
Now open your Contact.html, page. This page is for you Thank the reviewers for visiting
your site and set up a link for them to email or call you. You will add at least the following
items. [Note: You may add additional items to your web page to make it more interesting/
professional.]
7.1. Place your full name in an H1 heading at the center of the top of the page
7.2. Place your city, state, and postal code in an H2 heading below name (centered on the
page)
7.3. 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
7.4. Insert a Horizontal Rule
7.5. Add a welcoming paragraph, thanking the visitor for viewing your, asking for the
opportunity to contact you to set up a personal interview at their convenience.
7.6. Insert an image and link it to sed an email to you.
Your page should now look like this:
Page 10 of 13
CSIS 100
Page 11 of 13
COUR 123
Now, just zip it and submit it!
8. Make sure all files in this lab are in the folder you first created.
9. 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 assignment link in Blackboard
by the date indicated on the course schedule.
Page 12 of 12
CSIS 100
LAB: HTML WEBSITE ASSIGNMENT INSTRUCTIONS
In this lab, you will build a working three-page website that is all about you. Consider this a fun
exercise in which you will learn some of the programming basics by using the Hypertext Markup
Language (HTML). Not only will this introduce the basics of HTML give you insight into the
underlying structure of web design and give you an appreciation of how much goes on behind
the scenes of a webpage. Finally, you will create something that you can share with others (i.e.,
prospective employers) to highlight your skills, talents, and expertise. Please see the Lab:
HTML Website Assignment Tutorial before beginning this assignment.
CSIS 100
LAB: HTML WEBSITE ASSIGNMENT INSTRUCTIONS
In this lab, you will build a working three-page website that is all about you. Consider this a fun
exercise in which you will learn some of the programming basics by using the Hypertext Markup
Language (HTML). Not only will this introduce the basics of HTML give you insight into the
underlying structure of web design and give you an appreciation of how much goes on behind
the scenes of a webpage. Finally, you will create something that you can share with others (i.e.,
prospective employers) to highlight your skills, talents, and expertise. Please see the Lab:
HTML Website Assignment Tutorial before beginning this assignment.

Purchase answer to see full
attachment

  
error: Content is protected !!