Homework -> Homework #3: HTML Layout

Homework #3 is designed to introduce you to the basics of HTML Layout.

This will be the "L" in the "Iron C.L.a.D." (lesson 3 of 3) method of HTML authoring.

PART 1 - Read About Basic HTML Layout Using CSS and <div> elements

Estimated time for completion: 1 hr.

My way of teaching how to understand layout is unique so you likely won't find anything that talks about doing it the way I do, but you should at least go through the Beginner links below to get a grip on how CSS layout works:

  • Intermediate:
    A clear step-by-step for creating a two-column layout (it’s a more “complex” lesson than what we covered in class, but still allows you to learn one step at a time). Start with Step 1 and work your way through the entire exercise using his example text at the bottom of the page.

Remember, just reading these articles is never going to be enough. Practice makes perfect! If you are confused, it’s better to just jump in and start creating simple layouts and then make them increasingly complex until you get it.

PART 2 - Create a Layout for Your Webpage

Estimated time for completion: 6-8 hrs.

We are continuing to improve on your web page by doing basic layout. The layout can be any way you wish as long as you are using CSS and <div> elements to put the sections of your web page into place. Remember, layouts used on the web are organized by row and require stacking blocks next to, and on top of, one another (exactly the same way you might use the table creation tools in Word). Each block within a row holds some kind of defined content, e.g., a row might have an image in one block, some text in the next block and so on...

This will allow you to create a neat and organized looking webpage.

Step #1: Draw it out

Please create a layout for your main webpage from Homework #2 using graph paper (provided here). Make sure you do all the height and width calculations of each row, and each block within each row, on paper or else you will quickly get frustrated with creating layouts in HTML using CSS.

Just as we did in class, please use the number of "pixels" to specify height & width of:

  • the boundary (container) for the layout
  • each row in the boundary (container)
  • and each block within each row.

The boundary for your webpage should be a maximum of 950 pixels wide x 700 pixels tall so as to fit within the minimum size of older model 15" desktop computer screens (typically around 1024 pixels wide x 768 pixels tall). The graph paper I have given you will restrict you to these dimensions.

Step #2: Code it

Once you have all the information down on graph paper, replicate your graph paper drawing using HTML <div> elements and CSS. Start from the leftmost corner of your layout and build each section moving left-to-right, then top-to-bottom. You start by:

  1. First, creating a “boundary” where you specify the width and height of the entire layout grid
  2. …then create your rows within the boundary
  3. …then create separate blocks within each row (as needed)
you should name each section according to what you plan to place there.

EXAMPLE (one main "boundary" holding two (2) rows; the second row contains two blocks of data: one for a left navigation list and one for the main content): 

<div id="boundary">
  <div id="row1-heading">header</div>
  <div id="row2-navigation">navigation</div>
  <div id="row2-content">content</div>
</div>

Next you need to define how this will be laid out using CSS:


#boundary {
  width: 800px;
  height: 600px;
  }
#row1-heading {
  width: 800px;
  height: 100px;
  float: left;
  }
#row2-navigation {
  width: 200px;
  height: 500px;
  float: left;
  }
#row2-content {
  width: 600px;
  height: 500px;
  float: right;
  }

Make sure to place the <div>...</div> code blocks surrounding the various sections of content you created from Homework #2. Watch the recording this week again if this doesn't make sense. WARNING: Layout does involve a lot of pre-planning, so think it through before you start! Think:

  • What part of my code should be contained in a "header" block?
  • What part is my main content and should be contained in a "content" block?
  • What part is my footer and should be contained in a "footer" block?
  • Which row should my image go in and what should I name that block (maybe "pic-of-me")? Which block do I want to place my image next to? (maybe to the right of the header?)....etc.
    •

The requirements are that your main web page possess all the elements from homework #2 in addition to a horizontal and/or vertical navigation bar ("nav" bar) with hyperlinked text to your own pages or other pages on the internet.

    • horizontal style "navs" look like what Apple uses at the top
    • vertical style "navs" look like what Google News uses on the left
PART 3 - (BONUS CHALLENGE) Create an HTML Version of Your Resume

Please ALSO recreate A SHORT version of your resume as a grid layout in HTML. I would like to see a minimum of 3 columns and 4 rows in the resume.

You might find this to be a difficult task, but it is a GREAT way to practice grid layouts.

HINT: If you print out your resume on paper beforehand, draw a border around the entire page, draw the "blocks" around each section and then calculate sizes before you start coding, you should have a much easier time.

Once you've created the table grid in HTML using CSS and <div> elements, it should be easy just to copy/paste text out of your "normal" electronic resume copy into the various cells and format it a bit using CSS elements.

When you are done creating a resume as a HTML webpage, link it to your home page though the navigation bar.

  • The width should not exceed 1000 pixels, but the length can be as long as you need to fit all your information (start with a length of 1000 pixels just to be safe)

FYI - The "Horizontal Rule" orphan element (<hr>) might be useful in your resume creation efforts as this is a quick way to "lazy code" drawing a line across the screen. This way you can make your grid border invisible to make your resume look clean but still have a line that clearly separates your resume sections.

PLEASE ZIP AND SUBMIT FOR GRADING WHEN COMPLETE:

  • YOUR "HOME" PAGE WITH FULL LAYOUT
  • (OPTIONAL) YOUR SHORT RESUME IN FULL LAYOUT LINKED TO THE "HOME" PAGE

If you want to see what other freelancers have done with their websites using simple layouts check these out!

  • Liza Tripp's website (French, Spanish, Portuguese, Italian > English): www.lizatripp.com
  • Mark Kellner's website (Japanese > English): mk-translation.com
    (former graduate of website translation & localization)