tags: HTML

Page Layout

So we have talked a bit already about different things to do with HTML. You have a basic understanding sure. Now comes the fun part. I am sure you have heard some folks say that divs are bad. Nope they aren't. Well not really anyways. You just need to now when and how to use them.

  • Here are a few images as examples

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Breaking down your page into boxes always helps. What do you want to go where.

Want a cool trick to help with layout and styling? Add the following code to your css document: * { border: 1px dotted red;}. This gives every element on your html documents a thin dotten red border.

Things to keep in mind

  • Never use an empty element anywhere in your document. Do you need extra spacing? Use CSS around the existing elements. You should never have empty elements like a div.
  • Some students ask if there is a basic outline or way to structure their html. No there isn't, is the short answer. Do I create similar outlines on my documents? For the most part yes I do, but I add or remove elements that aren't needed for each page.
  • However just look at the 3 images above. Are their similarities? Sure, but there are also some big differences. Making a drawing like those or like the one below are good ways to at least in the beginning get you started

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’