WATS 3010: Advanced Markup Project
This is the source repository for the WATS3010 Introduction to Web Development Advanced Markup project.
The purpose of this assignment is to practice additional markup techniques, including presentation of tabular data in an accessible format, and the HTML/CSS interaction required to make page layouts work to elegantly organize and contain information.
In order to complete this assignment, you must fulfill the following requirements:
- Pay attention to the TODOs in the HTML files. They tell you what enhancements you must make.
- Add proper HREF values so navigational links allow you to click between all three pages of the site.
- Style navigational lists so those links display horizontally on the page in the header and footer.
- Add internal links to the in-text citations (denoted with a numnber in
brackets like this:
) so users can click the links and scroll directly to the citation.
- Use the
<sup>tag around the in-text citations to make them pop up on the line (so they look like footnote indicators).
- In the
about-poe.htmlfile, add an accessible HTML table listing the Selected Works provided in the
poe_selected_works.pdffile. (Note: This is the same information contained in the
poe_selected_works.csvfile, which you are also free to use as a resource.)
- In the
about-poe.htmlfile, add a definition list (
<dl>) to structure the biographical summary in the
- In the
about-poe.htmlpage float the image and caption to the left and use visual styling to make it apparent that the image and caption go together.
If you feel like all of the above has been too easy, try to complete these stretch goals:
- Make the social links in the
<aside>element have icons. You can find social media icons in many places. Here's a link to get you started: http://designyoutrust.com/2013/08/flat-icons-super-minimalist-social-media-icons/
- Add an email share link and use a
mailtolink to open an email message dialogue for the user. Try using querystring parameters to set the subject line. Here's an info link to get you going: http://en.wikipedia.org/wiki/Mailto
borderattributes to make a "navbar" look for your navigation, and use the
:hoverpseudoselector to make the navbar react when a user puts their mouse over a menu item.
- Once again, find/replace is a useful tool in your development editor. Use the find/replace feature to make sure you don't miss any TODOs.
- As you complete TODOs, remove the comments containing the TODO message so you can more effectively use find/replace to keep track of your work.
- As you link to pages and images in the page, or via styles, remember to keep in mind absolute vs. relative paths. Absolute paths start with "http" and "/". Absolute paths will usually not work on Github Pages.