A4 – Structural HTML


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.

As always, work on a local copy and then upload it to the server. (classweb.cob.isu.edu) using these directions.

Useful Downloads

Here are some useful downloads:

  • The remaining text for the web page content can be downloaded here.

Visual Guidance

  • Your web page should be arranged like the figure.
  • Your web page should look as closely as possible as the demo page.

HTML Details

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 Science" details.
    • 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
      • italicized
      • 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
      • table
      • th
      • td ul
      • td ul li
      • caption
  • 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.

Notes

  • 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.

Alternative Versions

  • 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:

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
           Ima Student
           March 16, 2018
          Assignment 4
          Purpose: This web page....
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->