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!

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
 * Notice that there is no wikitext equivalent to HTML div tag.

Div element as a movable container
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. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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. 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. You can place a div element just where you want it on a 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.
 * Notice how they stack up along the left side of the page on top of each other. This is the way the browser puts all things that you give it to process.
 * The upper left hand corner is the starting point for all placement of object on a page.
 * 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 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.