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 row or table tags.
 * 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: 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.
 * Text
 * Images
 * Tables
 * Other  elements
 * All the above at the same time!
 * 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 did the div elements arrange themselves on the page?
 * 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.
 * There is no space between the div elements.
 * The div elements begin in the upper left hand corner on a blank page or under what is already on the page.
 * They are arranged vertically in order of entry just as if you were adding new text.

These are the default positions of div tags by your browser. It always places the div element to the upper left hand corner.

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. They are still in the same order they were entered in spite of the attributes given to them.

Floating Div Elements
What if we want to put them side by side like in a gallery. How do we do that?
 * We do not have to create a table and place these boxes in a row of cells.
 * We use our float attribute in the div tag.
 * 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.
 * Again we do not have to use tables to accomplish the gallery format.

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.


 * Notice what happens to text that is outside our boxes. Because we are floating the boxes to the left, what text was around them wrap around to the right.  This is rather annoying so how do we keep text from wrapping?  Put the text in a set of div tags.

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.

The code should look something like this:  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 * To prevent text from wrapping put it in a div element.
 * Be sure to install a width attribute of 99% or less or an exact number of pixels.
 * Don't use 100% as it allows wrapping for some reason.
 * If you should float one of the boxes to the right, then it looks like this:

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.
 * 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
Another neat thing we can do with div tags to to be able to place objects exactly where we want them on the page. Regardless of what is on the rest of the page even to overlap other objects. Normally you don't want to do this but placing images or blocks of text might require position abilities. There are three:
 * Relative position - putting an object in a spot relative to the position the computer would have put it on its own. In other words if the computer would normally put an image at the top left corner of the page, but you want it 50 pixels to the right and 50 pixels down from the top of the page, you would use relative positioning.
 * Here is the coding: position:relative; left:50px; top:50px;
 * Notice that it is in three parts. The name of the attribute and the attributes of left and top.


 * Absolute position - puts an object on a page in an exact position. If you put it at 100 pixels to the right and 100 pixels down from the top, it will always be in that spot regardless of whose computer is looking at the page.  It will not change position if something is placed above it or beside it.

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.