A6 – Miscellaneous HTML and CSS Features


Objectives: Gain experience using Lists with Images, Advanced Images and Figures, Description Lists, Quotations

Description: In this assignment you will develop a page that includes all of the above features.


Structure an HTML Page

Use Notepad++ to develop an html page that shows current average starting salaries for IT positions.

Name your file assn06.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 text for the web page content can be downloaded here.
  • The images and icons for the web page can be downloaded here.

Visual Guidance

Your web page should resemble the demo page as closely as possible.

HTML Details

Be sure that your page includes the following features:

  • Use a header for the h1 tag.
    • The h1 should appear on the left.
    • See CSS Details for more.
  • Use three sections – one for each major.
  • The major name should be in an h2 tag.
  • The quotation, attribution (a paragraph tag), and citation (if present) should be enclosed in a div.
  • The image should be in a figure tag, and be accompanied by a caption.
  • The course list heading should be an h3 tag, and the course list should be in a description list, with each class number/name in a description term and each course description in a detail description tag.
  • The heading for the professor list should be in an h3 tag, and the each name should be in an li tag, but also enclosed in a span tag, such as <li><span>name</span></li>. This is a trick to fix an alignment problem when we replace the bullets with images.
  • The footer should contain four images in one line (no paragraph tags needed).
    • The first image should contain an email link to ics@isu.edu, with a subject set to "Program inquiry", and body set to "Please send me more information about ICS!"
    • The next image should link to http://homepages.cob.isu.edu/informatics/ with the target attribute set to a new tab.
    • The next image should link to https://www.facebook.com/groups/informaticsAndCS/ with the target attribute set to a new tab.
    • The next image should link to https://twitter.com/informatics_CS with the target attribute set to a new tab.
    There should also be a link to the brochure, with the target attribute set to a new tab. No paragraph tag is required, but include class="brochure".

CSS Details

Please try to follow the order below when creating your CSS selectors.

  • Provide a universal selector:
    • Specify a font family list with Arial, Helvetica, sans-serif.
  • Include a selector for the body element:
    • Specify a width of 94 percent.
    • Specify a left margin of 3 percent.
  • Include an element selector for h1.
    • Specify #D97700 for color.
    • Specify a font size of 4.5vw.
    • Specify a property-value pair that adds a dark gray (#333) shadow a little to the right (0.15vw) and down (0.15vw) relative to the normal text.
    • Specify a display property set to inline.
  • Include an element selector for h2.
    • Specify #D97700 for color.
    • Specify a font size of 3 vw.
    • Specify a property-value pair that adds a dark gray (#333) shadow a little to the right (0.15vw) and down (0.15vw) relative to the normal text.
    • Specify italicized text.
    • Set the margin bottom to 1 vw.
  • Include an element selector for h3.
    • Set the font size to 2.2 vw.
    • Set the margin bottom to 0.
  • Use a header for the h1 tag.
    • The height of the header should be set to 6 vw.
    • The header should have a 0.5 vh solid bottom border with a color set to #A85418.
    • Set the background color to rgba(255,191,127,0.5).
    • Set the background image to linear-gradient(45deg, #fff, #999).
    • For rounded corners, set the border-radius to 10 px.
    • Set the top padding to 2 em, and the other sides to 1 em each.
  • Specify a series of shared settings for all figures.
    • Set the top and bottom margins to 0, and the left and right margins to auto.
    • Set the padding to 1 em.
    • Set the width to intrinsic, but you need to look this up in the notes!
  • Specify a class selector for figures named "left".
    • Set float to left.
  • Specify a combined class and element selector for figures named "right".
    • Set float to right.
  • Specify a selector for figcaptions.
    • Set the font size to 0.75 em.
    • Set the color to #A85418.
    • Set the font to bold.
    • Italicize the font.
    • Center align the text.
  • Specify a selector for an image inside a figure.
    • Set display to block.
    • Set the left and right margins to auto.
    • To round the corners of the image, set the border radius to 10 px.
  • Specify a combined class and element selector for paragraph named "attribution".
    • Set the font size to 0.8 em.
    • Set the bottom margin to 1 em.
  • Specify a combined class and element selector for div named "quotation".
    • Set the background color to rgba(255,191,127,0.5).
    • Set the background image to linear-gradient( 0deg, #ffffff, #CD6600).
    • To round the top left corner, set the border top left radius to 25 px.
    • To round the top right corner, set the border top right radius to 25 px.
    • Set the top padding to 1.3 em, and the other sides to 1 em each.
    • Set the top margin to 0;
  • Provide a selector for a dt element.
    • Set the font to bold.
  • Provide a selector for a dd element.
    • Set the font size to 0.95 em.
    • Italicize the font.
    • Set the bottom margin to 1 em.
  • Provide a combined class and element selector for ul called "health".
    • Set the top margin to 1 vh.
    • Set the list style image to healthIcon.jpg.
  • Provide a combined class and element selector for ul called "business".
    • Set the top margin to 1 vh.
    • Set the list style image to businessIcon.png.
  • Provide a combined class and element selector for ul called "cs".
    • Set the top margin to 1 vh.
    • Set the list style image to computerIcon.png.
  • Provide a selector for a span inside an li inside a ul. This is the trick to align the list item text with the list item image.
    • Set top to -0.5 em.
    • Set position to relative.
  • Provide a combined class and element selector for section named "bordered".
    • Set the top border to a thick grooved line with color #D97700.
  • Provide a selector for a footer element.
    • Set the background color to rgba(255,191,127,0.5).
    • Set the background image to linear-gradient( to bottom, #ffffff, #CD6600).
    • For a rounded lower left corner, set the border bottom left radius to 25 px.
    • For a rounded lower right corner, set the border bottom right radius to 25 px.
    • Set the font to bold.
    • Set the font size to 1.1 vw.
    • Center align the text.
    • Set the top and bottom padding to 0.5 vw, and the right and left to 0.
  • Provide a selector for an anchor tag inside a footer.
    • Set the color to black.
  • Provide a selector for an anchor tag inside a footer named "brochure".
    • Set display to block.

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 assn06.htm.
  • Remember that every time the source text includes an ampersand (&), you must code it as &amp;

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
           April 15, 2018
          Assignment 6
          Purpose: This web page....
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->