HTML Links (and an Intro to CSS) Assignment #2 Solution

Note that this and future assignments will likely take a little longer to complete than the first assignment, so plan accordingly.

Before you begin this assignment, you should download the assignment’s submission file (YourName-html-a2.docx) from Canvas. This is the file you will be working on and eventually submitting back into Canvas for grading. It is a Microsoft Word 2013 file, so you must have access to Word in order to edit that assignment file.

Part 1: Links Video with Questions & Answers

For this part of the assignment, you are asked to watch and listen to an instructional video that covers HTML links and then to answer some questions based on this video. Note that you DO NOT need to create the code shown in the video, just watch it (and answer questions about it later)!

The links to this video appear below (both a standard and a closed-captioned version). The questions you need to answer are in the submission file you download from Canvas for this assignment.

Below is the link to the standard Flash Links Video (50 min, 32 sec video):

http://www.faculty.rcc.edu/mcleod/html/flash/xhtml_video_2_links.html

If instead you want to view the closed-captioned version of this video, read how to do so by following the link below:

http://www.faculty.rcc.edu/mcleod/html/handouts/about_closedcaptioned_videos.html

But before you watch this video, you should download and read the questions in the assignment 2 submission file "YourName-html-a2.docx" from Canvas’ assignment 2 area. That way, as you watch the video, you can be thinking about the questions and noting the correct answers. Also, don’t forget to save (or rename) that Word file using your own name instead of the original “Your Name”.

Keep in mind that this is an older video and it does not demonstrate the best HTML5 coding standards that we saw in assignment 1’s videos. That is ok, just focus your attention on the links, headings, and lists. Those tags are done properly and will serve as good examples for you when you have to create some of your own links later in this assignment.

When you are done watching this video and answering the corresponding questions in your submission Word file, you will be ready to move on to part 2 of this assignment, which appears below.





Part 2: Your Own Favorite Links Page

For this part you must first complete the HTML coding that is given to you as one of your Canvas downloads for this assignment. The html file that serves as your starting point for this part is named “a2p2.html” (a2p2 means assignment 2, part 2). That is your starting point for this part. The steps below will guide you through the work that needs to be done.

1. Once you have downloaded a2p2.html from Canvas, you should open this file in an HTML editor (such as Brackets) and in a browser (such as Chrome or Firefox or Safari) – or if you are using Brackets, you can just open it with Live Preview.

2. Examine this partially complete favorite links page. It has some structure to it, and some intentionally fake content, but there is clearly quite a bit of work left to do. Here is what needs to be done.

3. Put your actual full name in the h1 heading in place of “Your name” and remove the part at the end of the heading in parenthesis.

4. Come up with 3 categories of links that you would like to use for this favorite links page. Keep in mind that later you will have to come up with 3 links within each of those categories (9 links total). You cannot use any categories from the “links video”, so come up with 3 different ones of your own. Add those category names into the existing bullet list of category names, replacing the extra text around them. This should just be a list of category names, nothing else.

5. These same category names should be used as the h2 headings for the 3 sections of links to be. Replace the existing dummy text in the existing h2 headings to your new category names (match the same wording and spelling as in the 3 category links above). For the 3rd heading, you will have to create the appropriate heading tags yourself.

6. Next, you should add in an appropriate “id” to each heading, and then modify the category names so that they act as links that scroll the browser window down those corresponding h2 headings. Double-check that these links work in the browser.

7. Now it is time to fill in the favorite links themselves within the given description list tags below each h2 heading. Remember that you need 3 links within each category. The links go within the “dt” tags and the description of each link goes within the “dd” tags. Create the “dl”, “dt”, and “dd” tags needed to make a similar looking 3rd section of favorite links. It should look the same as the first 2 sets of links. When you write your link descriptions (within the "dd" tags), describe the site as if you are talking to someone who is not familiar with the site and is wondering if it is worth the time to click on your link. Save and test all your links in the browser.

8. Toward the bottom of the page, enter your own actual rcc email address in the appropriate place within the “footer”, replacing some of the placemark text. Make an email link out of that address. Compare your link to the video’s link if you don’t recall the details of an email link.

9. Before you should consider this page to be complete, there are several details to double check:

Be sure to test all of these links in the browser to make sure that they all function as expected.
Make sure that all of your code is correct – the page’s code is valid, all tags are closed, text is spell checked, etc. (Use validators to check this, not your own eyes.)
Save and “Beautify” your code. (If you are using Brackets, use the Beautify extension. If not, use an equivalent tool that results in consistent and proper indentation.) Test one last time in the browser.
10. When your page is complete and passing the above tests, capture a screen shot of your page displaying in the browser so that the entire favorite links page is showing up (from the main page heading all the way down to the footer). Use 2 screenshots if you cannot capture it all with one. I need to see it all to give you full credit. To capture a screen shot in windows, you can use the “Snipping Tool” from the Windows Accessories Group or use the “PrintScreen” key.

11. Paste your screenshot(s) into your submission Word document in the indicated area.

12. With your favorite links page in your editor (such as Brackets), select and copy all of the HTML code (from the DOCTYPE all the way down to the closing “html” tag). Make sure to get it all. Then paste this code into your Word document starting on a new page (below your screenshot). Adjust the font of this code to “Courier New” or another monospace font and bold it if that helps to make it more readable. Note that this should NOT be a screen shot of your code, it should be the actual text of your HTML code.





Part 3: Textbook Chapter 2 Rock Climbing Web Page

1. For this part of the assignment, you are asked to read and follow along with the steps given in the textbook to create the "Rock Climbing Fun" Web page built up within chapter 2 on pages HTML 33-78. A screenshot of the completed page is shown below. Also pay attention to the additional notes below.



2. Change the given "html" tag (from the book's code) to include the lang="en" attribute as usual.

3. Note that toward the end of this project, you will be asked to insert an image of a rock climber into the Web page you are building. (You can see from the screenshot above that this image ends up displaying toward the top of the page.) The file you need, "rockclimber.jpg", appears below along with a link to it.



Below is the link to this image in case you need it. You should download a copy of this image into the same folder that contains your rock climbing web page file.

http://www.faculty.rcc.edu/mcleod/html/handouts/rockclimber.jpg

4. As shown in the above screenshot, you need to modify the given copyright area. Replace the "address" portion of the copyright section at the bottom of the page (shown in red in the screenshot) with your own full name so that it reads "Rock Climbing Fun by Joe Student", where Joe Student is your name.

5. Make sure that all of your code is correct – all tags are closed, lower case tags, etc. Use the usual validation tools to check for this. Also make sure that your name does appear in the copyright area as indicated above.

6. When your page is complete and double checked for correctness, capture a screen shot of your rock climbing page displaying in the browser so that the entire page is showing up (much like it is in the sample screenshot above.) Use 2 screenshots if you cannot capture it all with one. I need to see it all to give you full credit.

7. Paste your screenshot(s) into your submission Word document in the indicated area.

8. With your rock climbing page in your editor (such as Brackets), select and copy all of the HTML code (from the DOCTYPE all the way down to the closing “html” tag). Make sure to get it all. Then paste this code into your Word document starting on a new page (below your last screenshot). Select all of this code and use Word to change the font of this code to “Courier New” or another monospace font and bold it if that helps to make it more readable. (This should NOT be a screen shot of your code but the actual text of your HTML code.)

9. Save your Word submission file, making sure that your own name is part of the file’s name (instead of “YourName”). After saving, exit Word, and then submit your Word file (the one containing the answers to the questions, the screen shots and the HTML code for all parts of this assignment.) You should submit just this one Word file. Do not submit other files. Submit only once, when you are all done. Remember that lateness deductions will occur if it is after the deadline so get it in on time if you can.