User:Ccsmith/sandbox?HTML and Wikitext - Lesson 4

Lesson 1 > Lesson 2 > Lesson 3 >

Divisions
As we have seen, tables can help us put material on a page and have some control over how the data looks and where it is a the page, but there are better ways.
 * In this lesson we will look at  tags.

We use two main elements:  and   tags.
 * Is there an easier way to put up material if we only have one cell to fill?
 * What if we do not want to create a table every time we want to put an image or text on a page, what do we do?
 * Is there a simpler way to manage material without tables?

tag

 * A  tag (stands for division) segregates a block of material that might include images, tables, text, etc.
 * We may want this block of material to appear differently than the rest of the material on our page.
 * tags require a closing  tag.


 * A  (stands for paragraph) usually deals with a block of text.  We may want it to be emphasize it such as surrounding it with a border or making it smaller in size and centering it on the page.
 * Just as we can put  tags inside   tags, we can put   tags inside of   tags.


 * Notice how the nested  tags are indented.
 * The opening and closing tags pairs are line up vertically.
 * This is a common programming practice to help you keep track of your opening and closing tags especially if they are nested inside each other. Lot of lines of code can be difficult to follow so indenting helps.


 * The same is true for  tags.
 * This ability allows us to do many creative things with our pages.


 * We manipulate either of these elements with the same codes as we do with tables, such as alignment, colors, etc. Let's look at each in detail.

Small Project using div tags

 * Notice how the boxes all place their upper left hand corners on the same spot.
 * If we want to move the two smaller boxes to other places within the red box, we have to use relative and adsolute positioning.

Lists
Let's start a whole new topic - lists. There are two kinds of lists:

Fonts

 * Font-family
 * Font-size
 * Font-weight
 * Font-style
 * Font- variant

Floating as opposed to align
Floating for text wrapping around images for example.
 * Left
 * Right
 * None

Position

 * Absolute
 * Relative
 * Fixed
 * Static
 * Top
 * Bottom
 * Left
 * Right
 * Overflow
 * Z index

Internal

 * headers are anchors.