Objectives: Gain experience using structural HTML.
Description: In this assignment you will modify the page created in the last assignment, adding various structure tags, tables, and lists.
Structure an HTML Page
Use Notepad++ to modify the html page that was designed to serve as an advertising page for the Informatics program.
Make a copy of your assn03.htm file, and rename assn04.htm.
Here are some useful downloads:
- The remaining text for the web page content can be downloaded here.
- Your web page should be arranged like the figure.
- Your web page should look as closely as possible as the demo page.
Be sure that your modified overview page includes the following features:
Use a header for the h1 tag and the logo image.
- The h1 should appear on the left.
- The logo should be on the right.
- The height of the header should be set to 8 vw.
- The header should have a 0.5 vh coral groove bottom border.
- Delete the hr that appeared below the original heading and logo.
Use a section with the id set to "ICS" for the "Informatics and Computer
- You should already have all of the h2 and p tags that make up the text, but in this structured version all of that text prior to the horizontal rule should be included in the first section element.
The ICS section element should also include an aside element.
- Refer to the source code from the notes for an example of formatting an aside.
- The aside should include an h2 heading.
- The aside requires the following CSS:
- border is thin, black, and dotted
- background is cornsilk
- floats to the right
- 24% wide
- 1 vw left margin
- 1 vw bottom margin
- padding of 1 vw for top, right, and left, and padding of 0.5 vw for bottom
- The h2 in the aside requires the following CSS:
- brown text
- font size of 1.35 vw
- 0.5 vh top margin
- 0.5 vh bottom margin
- Paragraphs in the aside require the following CSS.
- #663d00 text
- font size of 1 vw
Enclose the shared courses details in a section, and give it the id "Courses".
- Add a table with a table header (background color coral), five rows, three columns, and a bold caption.
- The rightmost column will include a list for each course.
- Provide CSS for each of the following selectors. Note that
the fourth and fifth are contextual selectors.
- table, td, th
- td ul
- td ul li
- Enclose the professors details in a section, and give it the id "Professors".
- Enclose the summary details in a section, and give it the id "Summary".
- Include a footer with the two paragraphs containing the specified information. Both the mail link and the URL link should be functional.
- The footer requires the following CSS:
- background silver
- bold font
- font size of 1.5 vw
- centered text
- padding set to 0.5 vw for top and bottom, and 0 vw for right and left. Specify top and bottom with one setting, and right and left with another setting.
- The header should have a 0.5vh coral groove top border
- Delete the hr that appeared before the footer.
- Your lines will not break where the demo lines break. The demo screen shot was taken in Chrome, full screen, with a negative zoom. Do not use <br/> tags to force artificial breaks.
- Name your file assn04.htm.
- If you wish to express your creativity by coming up with a more visually appealing page than the demo, feel free to do so. While you must upload a version of the assignment that meets the specs so the grader can do an efficient job, I would welcome the opportunity to see how creative you can be. An alternate version would provide you with additional practice as well.
Reminder! You should ALWAYS do the following, whether I specify it or not.
- Include the HTML5 doctype.
- Include a title using the title tag.
- Nest your tags correctly.
- Indent code correctly.
- Validate your html using the W3C HTML Validator.
- Validate your css using the W3C CSS Validator.
- Link your page to your index page. There will be a 15 point deduction if you fail to do so.
For each assignment that you set
up this semester you need to include adequate commenting. For
example, in the first part of this assignment you might include
a comment block like the following at the top, per the instructions
at the bottom of the Assignments Page:
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
March 16, 2018
Purpose: This web page....
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->