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.

Div Element
A  tag (stands for division) segregates a block of material that might include images, tables, text, etc. There is another element, the  that is simuliar which we will discuss later.
 * Think of a  tag as a container.  A box you can put many different items and move around.
 * Think of a  tag 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 a  tag as a   without the need of a row or table tag.
 * Think of a  tag as a layer that can be setting on top of other layers.
 * You should be able to guess that this element has a great number of uses which should open your creative juices.

Div element as a container
You can put these kinds of elements in a  element:
 * Text
 * Images
 * Tables
 * Other  elements
 * All the above at the same time!

Div element as a layer

 * Just as we can put  tags inside   tags, we can put   tags inside of   tags. This creates the layering effect as we see below.


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