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

Lesson 1 > Lesson 2 > Lesson 3 > > Lesson 5

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 upper left corner of the div element to the next available place on your page in upper left 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.
 * Here's what the code will look like in each other the three boxes.



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.
 * Notice what happens to text that is outside our boxes.
 * Because the boxes are floating to the left side of the page, the text is wrapping around to the right.
 * This is rather annoying so how do we keep text from wrapping when using the float attribute?
 * Put the text in its own set of div tags.
 * Be sure to install a width attribute of 99% or less or an exact number of pixels.
 * Don't use 100% as it is the default anyway and will allow wrapping to take place.


 * 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 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.
 * Positioning attribute is a little tricky to understand but will make sense as you think about it.
 * Let's take the example of an image on a page.
 * If we were to put an image on a blank page, where would the browser put it? In the upper left corner of the browser window.


 * Here is an illustration. The yellow box represents an image and the red box represents the browser window or what you see on your monitor.

How to Position Objects

 * PLEASE TAKE NOTE: All measurements are taken from the upper left corner of the object you are trying place. We're not measuring from the center or the edge or from any other part of the object, we are always measuring from the upper left corner.  This is critical to understand positioning.


 * Now if you wanted to put the image somewhere other than where the browser puts it on the page, you would probably say to yourself how far from the left side of the page or how far down from the top of the page do you want to put it?
 * In positioning we say just the opposite.  We have to think little differently.

How to measure Position

 * For horizontal positioning the question is NOT how far is the image from the left side of the page, but how far is the left side of the image from the left side of the page.
 * You are not measuring from left to right, but right to left. So if the image is 50px from the left side of the page you are now to say that the left side of the page is 50px left of my image.


 * In relation to vertical positioning the question is NOT how far is the image from the top of the page, but how far is the top of the page from my image. So if my image is 70px from the top of the page, you are to say that the top of the page is 70px above the top of my image.


 * Let put our yellow box (image) 50px from the left side of the red box and 70px down from the top:

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.