Build a resume website html

5 tags: Home,Cover,Resume, Hobby and Contact. Naigation menu using button tag. header should shown correct page in order.

Content Folder: Create a file folder called Your_Name_WebSite.

If your name is John Smith, your folder will be called John_Smith_WebSite.

This folder can be placed anywhere you choose on your computer.

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.

Failure to do this first step is often the reason most pages do not work properly once zipped for submission.

Template: Create a document template to use for all your pages.

Open Notepad (TextEdit in MAC) and paste the following code into a blank page.

TEMPLATE

Save it as template.html in the folder you created for your webpage.

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.

One at a time, create your 5 pages by following these steps:Home Page

Open the template in your text editor

Change the word Template to Home in the title tag

In the H1 tag change TEMPLATE to HOME

Save as Home.html int the folder you created for your website

Do not close this pageyou will use it for the next page

Cover Page

In the Home.html page, you just created

Change the word Home to Cover Letter in the title tag

In the H1 tag change HOME to COVER LETTER

Save as Cover.html int the folder you created for your website

Do not close this pageyou will use it for the next page

Resume Page

In the Cover.html page, you just created

Change the word Cover to My Resume in the title tag

In the H1 tag change COVER LETTER to MY RESUME

Save as Resume.html int the folder you created for your website

Do not close this pageyou will use it for the next page

Hobbies Page

In the Resume.html page, you just created

Change the word My Resume to My Hobbies in the title tag

In the H1 tag change MY RESUME to MY HOBBIES

Save as Hobby.html int the folder you created for your website

Do not close this pageyou will use it for the next page

Contact Page

In the Hobby.html page, you just created

Change the word My Hobbies to Contact in the title tag

In the H1 tag change MY HOBBIES to CONTACTS

Save as Contact.html in the folder you created for your website

Do not close this pageyou will use it to create a navigation menu in the next step

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. Before you start you need to view each page you have already created to see how they look and feel.

Open our file directory and double click on each page in order of HomeCoverResumeHobbyContact

Each should open and look the same except the Header should change to show the correct page.

Create you 5 navigation buttons using the

Example:

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.

Add a horizontal rule after the first set of navigation buttons

---

tag

Add the needed tag to

the navigation buttons on your page both top and bottom.

Copy the button code in the same place on all 5 pages.

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.

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.

Place your full name in an H1 heading at the center of the top of the page

Place your city, state, and postal code in an H2 heading below name (centered on 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

Insert a Horizontal Rule

Stop the centering of the text at this point

Insert Career Objectives using the heading style

Using the paragraph style tag

add the sentence I seek a position with a company:

Below this add an unordered list [ul] (at least 3 bullets)

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

Insert a Horizontal Rule

---

tag

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.

Your page should now look something like this

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

Display your name using an H2 tag in the center at the top of the page

Under your name in

and italics type in Cover Letter

Make the margin is left flush again (stop the centering)

Create an H3 heading (not centered,) named My Intended Major

In an ordered list [ol]

bullet # 1 type your major

bullet # 2 type the year you plan to graduate

Create an H3 heading (not centered,) named Experience Summary

Within a paragraph [p] write a short description of any experience you have paid or otherwise

Create another H3 heading (not centered,) named My Perceived Calling

Within a paragraph [p] write a short description of what you feel God is calling you to do in your career path.

Insert a picture of yourself Centered under your Name on top.

Your page should now look like this:

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

Display your name using an H2 tag in the center at the top of the page

Under your name in

and italics type in Resume

At this point, you have two options to complete this page

Build your resume using the various heading tags and paragraph tags

Insert an image and create an active link to a .pdf version on your Resume

Save the image you wish to link from into your web folder first

Insert the Image to represent your resume

Save the .pdf version of your resume into the web page folder you are saving all the files into.

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:

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

Display your name using an H2 tag in the center at the top of the page

Under your name in

and italics type in Hobbies and Interests

Show off your skills by showing at least four hobbies, interests, or favorite things. For each one:

Insert an Image that represents the Items

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:

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

Place your full name in an H1 heading at the center of the top of the page

Place your city, state, and postal code in an H2 heading below name (centered on 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

Insert a Horizontal Rule

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.

Insert an image and link it to sed an email to you.

Your page should now look like this:

Now, just zip it and submit it!

Make sure all files in this lab are in the folder you first created.

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.