Guide to HTML, CSS and JavsScript (Buffalo State College Version)


Chapter 6: Using DIVs to Modify Your Home Page Layout

Task - Create an HTML5/CSS Compliant Web Page

For this Assignment you will first read the appropriate chapters in the textbook and then copy your index.html file to a new file called index_old.html. Then you will modify your index.html.

Your new home page should utilize the following HTML tags and include the following:

  1. Appropriate <html>, <head>, and <title> tags to give your page a title that contains your name.
  2. A <body> tag.
  3. A <div> tag that spans the top of the page containing header-type information such as:
    • an <h1> tag that contains your name
    • an <img> tag with appropriate src and alt elements and CSS styles that define the width and height values. It doesn't matter at this time what the graphic is as long as it is legal and moral.
    • a <p> tag that encloses a brief paragraph about yourself.
  4. A set of <div> tags that replace the current <ol> and <li> tags that list the links to the assignments for this course. Each <div> should contain a brief description of the assignment and an <a> tag link to the appropriate web page for that assignment.
  5. A final <div> that spans the bottom of the page that contains footer-type information such as your name, what editor your used, when the page was last modified, etc.

The layout of your page is up to you. It could be two, three or four columns. Take this opportunity to show off your knowledge of CSS styles for your div, such as border, color, background, width, margins, padding, etc. Examples:

DIVs Figure
Figure 6-1: Sample DIVs Layouts

You can (and should) use the W3C HTML Validator to verify your HTML5 code and the W3C CSS Validator to verify your CSS styles.

This web page should also have a link back to your Home Page web page.

You should then add an <a> (anchor) tag to your Home Page web page that opens your HTML5 web page.

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2017 Jim Gerland