Read the entire list of instructions before beginning your assignment.
For the Phase 5 Individual Project assignment, you will complete the following two parts.
Enhance your 3-page Web site by including more content with at least 1 additional style to your external style.css file and at least 1 additional asset. For the additional style, you may include the following:
Various fonts
Various colors
Text alignment
For the additional enhancement, you may include the following:
Images or graphics
Mail-to link
A link to a map
Sound clips (optional)
Video clips (optional)
Submit the following to your instructor:
1 complete Web site with the following:
3 .html Web pages with at least 1 additional enhancement
1 external style sheet with at least 1 additional style
At least 1 image file for the logo of your Web site
A screenshot of one of the pages of the Web site and either saved as an image file or placed in a Word document
Submit the screenshot or Word document to the Submitted Assignments area.
Helpful Hints for Your Final Assignment
The following is an example of CSS code for an external style sheet with four style changes. Remember that you should include code for at least 1 additional style to your previous style.css file.
The following is a sample external style sheet that is saved as style.css:
body {
color: #0000FF;
background-color: #00FFFF;
font-family: Arial;
text-align: center;
}
Next, you will see an example of HTML5 code for the contact.html page of the sample Web site. Remember that you should include at least 1 additional enhancement to any page of your site.
This sample shows how to include an e-mail link and a link to a map. Of course, you are not limited to using these assets.
The following is sample code for the contact.html Web page:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href=”style.css” rel=”Stylesheet” type=”text/css” />
</head>
<body>
<header>
<img src=”logoimage1.jpg” height=”300″ width=”300″ alt=”logo image”>
<h1>Sample Web site</h1>
</header>
<nav>
<a href=”index.html”>Home</a>
<a href=”about.html”>About</a>
<a href=”contact.html”>Contact</a>
</nav>
<section>
<h3>Continue to add content for the contact page.</h3>
<p>Feel free to contact me at:</p>
<!– Here is where you can include your e-mail link –>
<a href=”mailto:yourname@student.ctuonline.edu”>Contact Sample Person</a>
<p>Here is my sample business location:</p>
<!– Here is where you can include your map with the embedded code –>
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.6175625839805!2d-73.985664!3d40.748439999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire+State+Building!5e0!3m2!1sen!2sus!4v1430927556994″ width=”600″ height=”450″ style=”border:0″></iframe>
</section>
<footer>
<h4>Copyright year, student name, date, class, section number</h4>
</footer>
</body>
</html>
Continue to add additional content to the index.html page and the second page of your site.
Reference
Google Maps. (2015). Empire state building search results. Retrieved from https://www.google.com/maps/place/Empire+State+Building/@40.74844,-73.985664,17z/data=!3m1!4b1!4m2!3m1!1s0x89c259a9b3117469:0xd134e199a405a163!6m1!1e1?hl=en
