HELP

COAP 3120 Final 2011

Possible solution (quickly made, there may be 1-2 smaller issues).

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 boxes of class center.
  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 inside 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. This needs a text change in the HTML. You are allowed to use inline CSS.
  10. Add an element with a border on top right of the page that says "HELP". This needs an addition to the HTML. You are allowed to use inline CSS.
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.
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 HTML 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: Daniel K. Schneider

EduTechWiki links:

Other links: