COAP 3120 Final 2011

Instructions

Unless otherwise requested, do not make any changes to the XHTML code. Only change the CSS in the embedded stylesheet on top of this page.
  1. Change the default font to Arial with a sans-serif as fallback
  2. Change the background color of the three following boxes: top, left, and right. Tip: These are identified by id's. Also change the background color of the class = center boxes.
  3. Reduce the height of the box on top. Tip: Do not think "height", look at another property.
  4. Draw a border around the paragraphs that are children of the box that has id="right".
  5. HTML links should be rendered in red (font color).
  6. First letters of paragraphs in all boxes of class "center" should be 100% taller. Paragraphs in other boxes should not change! You are not allowed to change anything in the HTML code.
  7. Make the menu to the left fixed, i.e. it should remain visible when the user scrolls down the page.
  8. Lists within lists should have smaller fonts. Don't change the HTML.
  9. Add your name in the center box at the bottom and make its font blue. Needs a text change in the HTML.
  10. Add an element with a border on top right of the page that says "HELP". Needs an addition to the HTML.
Bonus questions (less points):
  1. Change color of links for "hovering" and "visited". Tip: Use a pseudo tag
  2. Change the background color of the box containing the instructions back to a bright yellow without changing anything in the HTML code.
  3. Paragraphs that follow another paragraph should be indented, if they are within a center div.
Tips:
  • Read the questions twice before doing any modifications.
  • This page includes all necessary HTML elements that you need for testing. The only exceptions are (a) your name to add (b) the help box on top right.
  • Both XHTML and CSS must remain valid.

The short story of HTML 5

The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000. In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.

Even though HTML5 has been well known among web developers for years, it became the topic of mainstream media in April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that Adobe "Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win". This sparked a debate in web development circles where some suggested that while HTML5 provides enhanced functionality, developers must consider the varying browser support of the different parts of the standard as well as other functionality differences between HTML5 and Flash. In early November 2011 Adobe announced that it will discontinue development of Flash for mobile devices and reorient its efforts in developing tools utilizing HTML 5.

Source: Wikipedia

Some advice for good CSS:

  • Rules:
    • Validate the HTML !
    • Validate the CSS !
    • Avoid inline styles !
    • Avoid adding classes and ids when you can use child and descendant selectors
  • Read the manual !
Made by: [REPLACE THIS and make the font of your name blue]

EduTechWiki links:

Other links: