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

Lesson 1 > Lesson 2 > Lesson 3 >

What you will learn in this Lesson

 * Uses of    tags.
 * How div elements arrange themselves on a page.
 * How to create a gallery with div elements.
 * How to position div elements

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!

Here is a div element using some of the attributes we used on tables: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 * Notice that there is no wikitext equivalent to HTML div tag.

Arrangement of Div Elements
What happens when you put two or more div elements on a page? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. How do the div elements arrange themselves on the page? These are the default positions of div tags by your browser. It always places the div element to the upper left hand corner as far up the page as it can.
 * Here are three div containers of text and they will have a different background color so you can see how they arrange themselves on a page.
 * The text goes the full width of the page.
 * The div elements are up against the left side of the page.
 * They are stacked on top of each other.
 * There is no space between the div elements.

Let's apply some attributes to the div tags like width, padding, and borders to see what happens next: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. There is no difference in the div tags position other than they are now thinner and have a border. They still are stacked on top of each other.

Gallery Arrangement of Div Elements
What if we want to put them side by side like in a gallery. How do we do that? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 * We use our float attribute.
 * Install float:left into all three starting div tags. What do you see now?
 * They are now beside each other on the left side of the page.
 * If we want to float to the right side of the page substitute right for left in the div tag.
 * You have to watch the width of the individual div tags.
 * If they are collectively to wide for the page, one or both of them will be placed on a new line below the others like so:

Positioning Div Elements

 * Relative position - put the object in a spot relative to the position the computer would have put it. In other words if the computer would normally put it in the middle of the article, you can tell the browser to place it, for example, 20px to the right and 100px down from where the browser would normally put your object.
 * Absolute position - puts an object in a position relative to the container it is in or the whole page as a whole. If the object was put in another div element, you tell the browser to put the object 20px to the right and 100px down from the edge of the div element it is in.  Or you can place the object as it relates to the whole article.  You could put it 20px to the right and 100px down from the top of the article.  Absolute positioning is used to position inside of containers whether it be another container, div element, or the page as a whole.  Use sparingly as it might look good on your monitor but it could be overlapping on someone else's monitor.  Relative positioning is a better choice.
 * Fix position - stays put even as you scroll up or down the page.

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