Creating Your Layout
Divs
The basis of the layout for your website should be divs, not tables. A div is a block element, meaning it takes up the whole line and pushes other elements down. However this can be be changed by either converting it to a an inline object and for more controls setting a width and/or height for your div. Creating a div is simple, just type this code into the body of your document.
Content for your div would appear here.
</div>
If you want to make it inline, add a width, or a height these are the pieces of CSS you would use.
height:100px;
width:100px }
Note: You can use px or % to specify your height and width, and in order to make an inline element a block element you can change inline to block.
Spans
Divs are generally used to hold multiple types of elements. If you want to change say one word out of a sentence you would use the span tag.
Paragraphs
The p tag is also useful for formatting text, see how each paragraph on this page has a space between it? That was set up using CSS on the elements contained within the p tag. Each paragraph of text should be surrounded with it to allow for more control. This is a block element by default, although most resets set it to inline.
Titles
There are another 6 tags that are helpful when it comes to more control. They are generally used for titles, subtitles, and captions. By default they are block elements, with different sizes and weights. They are h1 - h6, with h1 being the largest, h6 being the smallest, and h4 is generally the same size as default text.
<h2>Subtitles</h2>
<h3>Third Subtitle</h3>
<h4>Regular Text</h4>
<h5>Captions</h5>
<h6>Footer Text</h6>
These are all just suggested uses for each of these tags, if you go further into web design you will learn more about the various uses for these different tags in particular.
Breaks
While paragraphs can be useful in order to control the way text splits there are two useful tags. They will send text to a new line.
<br />moves to the next line.
Changing Position
In order to tie this all together you will want to be able to control where these elements appear on the page. The easiest way is through absolute positioning. With absolute positioning you will be able to control where an element sits in relationship to the element it is inside of. You can position it from the top, right, left, and bottom of the element.
top:100px;
left:200px; }
Did You Know?
Tables used to be the way to set up the layout of a website, and while some people still do this it actually slows loading time and leads to messier code. They are also more difficult to control, especially in cases of cross browser compatibility.