Exercise 2

The goal of this exercise is the practice using HTML elements and laying out a webpage based on the HTML5 semantic elements.

Due Date and Time

Exercise 2 is due by 12:59am on September 11th, 2018. I will disable submission at the start of class.

Instructions

Setup

1. Download the exercise files from the Box Folder named CS0134-Exercise-2-<username> that I shared with you.
2. Unzip and copy the ‘CS0134-Exercise-2-<username>’ folder onto your flash drive.
3. Copy your ‘template.html’ file from Exercise 1 into the ‘CS0134-Exercise-2-<username>’ folder and rename it to ‘index.html’.
4. Open VSCode and open the ‘CS0134-Exercise-2-<username>’ folder.
   1. ‘File’ -> ‘Open Folder…’
   2. Open the ‘CS0134-Exercise-2-<username>’ folder on your flash drive. This opens the folder in the Explorer pane in VSCode. If the Explorer pane isn’t open, click on the first icon in the Activity Bar. You will be able to use it to manage the folders and files for your web sites.
   3. From the Explorer pane, double click on ‘index.txt’. This is the text that will go in ‘index.html’

Goals

Each goal is worth 1 point.

• Set the title to ‘CS0134 Travel Agency’
• Set the favicon to the ‘globe.ico’ file in the ‘images’ folder.
• Layout the page based on the HTML5 semantic elements header, main and footer.
• In the header section: Create two levels of headings using ‘CS0134 Travel Agency’ and ‘See the World’.
• In the header section: Add the ‘globe.png’ image from the ‘images’ folder and set alt attribute.
• In the main section: Add the appropriate headings to ‘Need to get away?’, ‘Destination Categories’ and ‘Our fees’.
• In the main section: Strong emphasize ‘$50’ in the ‘Our fees’ section.
• In the main section: Wrap each paragraph in a p tag.
• In the main section: Create a list of links for each of the three vacation destination categories. Assume that the links point to the pages ‘us-beaches.html’, ‘us-national-parks.html’ and ‘international.html’ in a folder named ‘destinations’ at the same level as index.html.
• In the footer section: Wrap footer content in a p tag.
• In the footer section: Use an HTML entity for the copyright symbol.
• Validate and test your HTML file with https://validator.w3.org/ and NGINX respectively.

What Your Page Should Look Like

How to Submit Your Work

Upload your index.html file to the ‘CS0134-Exercise-2-<username>’ Box folder.

I highly recommend that each time you work on this or any other exercise, that you upload your files to Box even if you are not done with the exercise. In this way, if something happens before the submission deadline that keeps you from uploading the finished exercise, there is still something to be graded.