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

Lesson 1 > Lesson 2 > Lesson 3 >

What you will learn in this Lesson

 * Uses of    tags.

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, the work horse of the internet and wiki.

tags
A  tag (stands for division) segregates a block of material that might include images, tables, text, etc.
 * Think of it as a container. A box you can put many different items and which you can move around.
 * Think of it as a element that you can locate elsewhere on a page without having to settle for where your browser wants to put it.
 * Think of it as a  without the need of a row or table tag.
 * Think of it as a layer that can be setting on top of other layers.
 * You should be able to guess that the  element has a great number of uses which should open your creative juices.


 * 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.