CS170 – Computer Applications for Business
Assignment 4
|
Due Date:
|
Before 11:59 p.m. on Friday, Sept 23, 2024
|
|
Accept Until:
|
Before 11:59 p.m. on Friday, Oct 11, 2024
|
|
Evaluation:
|
25 points
|
|
Submit to Canvas:
|
Assignment4.zip
|
|
Related Materials:
|
Spain4Final.pdf
Spain4Main.html, Spain4Catalonia.html, Spain4CanaryIslands.html, Spain4Andalusia, spain.jpg
https://www.w3schools.com/html/
|
|
Need help?
|
TA office hours and Lab Support Schedule posted in Canvas
|
To earn credit for this assignment:
1. Your zip file must be submitted to Canvas on time.
2. All work submitted should be your own work and not downloaded from the Internet or written
by someone else (in whole or part).
Overview: This assignment is designed to introduce you to creating a multi-page website using HTML5. You will focus on the following concepts:
● Apply styles using CSS code.
● Apply classes to create a menu
● Using the Box model of CSS
You will upload your completed assignment via CANVAS Assignment Tool. You should read the entire assignment before beginning to do your work.
General Directions and Focus of your Webpage:
● Download or view the following pdf file: Spain4Final.pdf. This is the intended result of the
webpages you are to create. You will refer to this pdf file to see the required formatting. Your resulting web pages should display the information in the same format as the pdf file. Note that each page of the pdf will be a separate web page.
2. You will be using the files you created on the last assignment and building upon your
work. You will need to CREATE a css file, create a NEW html page and modify your existing three HTML files. Make a copy of your existing files and rename them
Spain4Main.html, Spain4Catalonia.html and Spain4CanaryIslands.html. You will do the following:
a. Create a css file named Spain.css. You will be defining the background color,
top navigation and box classes in this file.
i. Define the body so each page has a background color (a light, readable color)
ii. Define the box class so that the background color is lighter than the border color. You must choose a new color scheme, making sure to make the text legible.
iii. Define the top navigation class so that the active link is a different color
than the rest. You must choose a new color scheme, making sure to make the text legible. The links should NOT highlight when moused over.
iv. Link this style sheet in the tags of each page.
b. The header on each page should function as follows:
i. Home should take the user to the main page.
ii. For each page, the current page link should be highlighted (see sample).
iii. Catalonia, Canary Islands, and Andalusia should appear on the right side of
the navigation bar. Andalusia should take the user to the Andalusia page (see part e)
iv. Mousing over other links should not highlight them.
c. On the main Spain page (Spain4Main.html):
i. Add a comment with your name and section number within the tags.
ii. Add a comment with the following statement within the tags: “On my honor, I have neither received nor given any unauthorized assistance on this assignment.”
iii. Using the top navigation class defined in the style sheet, create a horizontal navigation bar per part B.
iv. Update the page, checking Spain4Final.pdf for changes on alignment and text.
d. On Spain4Catalonia.html and Spain4CanaryIslands.html
i. Using the top navigation class defined in the style sheet, create a horizontal navigation bar per part B.
ii. Update the header formatting.
iii. Using the box class definition, format the rules paragraph
e. Create a new html file named Spain4Andalusia.html. Find appropriate text to add to this page, per the sample file Spain4Final.pdf.
i. Using the top navigation class defined in the style sheet, create a horizontal navigation bar per part C.
ii. Link image of a tourist attraction in Andalusia
iii. Add a paragraph providing information about the attraction pictured in the image you found. Using the box class definition, format the paragraph
iv. Add a table listing six fast facts about Andalusia: the first three should be population, area, and location (in that order).
v. Add a link to an additional source of information
vi. Add the source(s) you reference below the horizontal rule at the bottom.
Once you are done:
● Test to make sure the pages look like the sample and that the links work.
● Then, create a .zip file adding in all the files .
● Read the creating_zip_file.pdf guide if you are unfamiliar with creating zip files.
● Upload the .zip file to Canvas.
References:
● Chapter 4 of the Fluency textbook
● Learning Objectives listed in Week_04_Resources
● Spain4Final.pdf
● Recitation information