Div and Span

Tools

HTML to PDF translator: Prince 8.0 download or online converter.

A sample page with various frame settings.

To validate your CSS files: http://jigsaw.w3.org/css-validator.

Lab 10/9-11/12

Renovating the HeadFirst Lounge (stage 2)

  1. Here is the code for chapter 10 from the (old) text's web site.
  2. Download and unzip this file in the My Documents directory on your work station.
  3. Double-click on the HFHTML_ch11.zip and extract it in place.
  4. Copy the resulting HFHTML_ch11 directory to the LABS directory on your thumbdrive.
  5. Rename that directory to Chapter10
  6. Convert the lounge.html from XHTML to HTML5:
    1. The top line should be: <!doctype html>.
    2. The next should be: <html lang=en>.
    3. The fourth: <meta charset=utf-8> (make sure to save the file as utf-8).
    4. Change all occurrences of /> to >.
  7. Use the HTML <div> element to create a elixirs section of the lounge.html page.
  8. Use CSS to style that section (as directed by the text).
  9. Use CSS and the HTML <span> element to style the play list (as directed).
  10. Style the footer of the lounge.html.
  11. Float the elixers div (see page 465).
  12. Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
  13. Edit the index.html file in your LABS directory to have a link to your revised lounge.html page.

Check with Bowen that the work you have done is visiable on your web site, today, before leaving class.

Always turn off your computer and screen before leaving the room.