Lab 5

Lab 5. Containers, Cascading Style Sheets

Part 1 - Structural elements for pages.

Introduction: When the Web first began, the HTML (HyperText Markup Language) scripting language was a brain-dead subset of a much more complex language called SGML (more on SGML and its relation to HTML here: http://www.w3.org/TR/REC-html40/intro/sgmltut.html). When HTML appeared, it did only a few things and web developers wanted ways to do more complex formatting to make web pages more interesting to the end reader. The solution was for Netscape and Internet Explorer to define novel elements into HTML that were not SGML compliant. With me so far? One example were Tables, which was a way to number, size and position of rows and columns. Tables were heavily used for formatting pages. However, Tables and many other features of HTML that were added did not appropriately distinguish between structure, content and style, which should really be kept completely separate. A structural element contains content and may have have a set of style features. The positions of structural elements and their definition should be conceptually separate from any styles of either the structure itself or the style of content (text, images, video). This led to a revolution in web page coding. You will hear this described as Dynamic HTML (DHTML),

Cascading Style Sheets (CSS), etc. These new coding mechanisms are much more in tune with classic ideas about different kinds of metadata (structural metadata, stylistic metadata, content metadata, etc...) To get background coding using DHTML/CSS, just skim the following tutorials ---- don't try any of the code examples yet. Just skim through these and discuss with your peers:

http://www.hotwired.com/webmonkey/templates/print_template.htmlt?meta=/webmonkey/98/10/index1a_meta.html

http://www.brainjar.com/css/using/

The tutorials get you used to the idea of coding structural elements and style definitions as separate entities. Coding this way as opposed to the sloppy ways in the past means you don't have to unlearn very bad habits (like I did).

Now, here are some exercises to start you coding DHTML/CSS.

PART 1 - THE <DIV> TAG

<DIV> TAGS.

from: http://webdesign.about.com/cs/htmltags/a/aa011000a.htm

"The <div> tag defines logical divisions in your Web page. In terms of layout, the <div> tag does only one thing, it determines the alignment of that section of your page. <div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text. But that's not all it does! The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.

The primary attributes of the <div> tag are:

* align (left|center|right|justify)

* style

* name

Make a short properly formed webpage:

<HTML>

<HEAD>

<TITLE>DIV EXAMPLE</TITLE>

</HEAD>

<BODY>

My Left Bar is Wacky!

</DIV>

</BODY>

</HTML>

What do you see?

Now add another DIV like so:

<HTML>

<HEAD>

<TITLE>DIV EXAMPLE</TITLE>

</HEAD>

<BODY>

My Left Bar is Wacky!

</DIV>

STUFF IN MAIN CONTENT AREA

</DIV>

</BODY>

</HTML>

Now try something crazy. Move one of the bars to overlap the other, by changing the position of the DIV on the right to be on top of the DIV to the left, like so:

<HTML>

<HEAD>

<TITLE>DIV EXAMPLE</TITLE>

</HEAD>

<BODY>

My Left Bar is Wacky!

</DIV>

STUFF IN MAIN CONTENT AREA

</DIV>

</BODY>

</HTML>

What is you wanted the left bar to overlap the right one? There is a style property for DIVs called the z-index property. With that property set, you can change which DIV is on top. Lets add another DIV to show it off properly. Keep in mind in this example, ALL the DIVs have had a z-index property set for the style tag.

<HTML>

<HEAD>

<TITLE>DIV EXAMPLE</TITLE>

</HEAD>

<BODY>

My Left Bar is Wacky!

</DIV>

STUFF IN MAIN CONTENT AREA

</DIV>

MY Z-INDEX RULES

</DIV>

</BODY>

</HTML>

Try moving around the DIVs yourself. Also play with other style features. Style features are part of Cascading Style Sheets. More on that soon. See here - http://www.htmlhelp.com/reference/css/properties.html - for other styles you can set for your DIV. Don' be afraid to try them.

PART 2 - Cascading Style Sheets

For this part, try out this quick tutorial for Cascading Style Sheet here: http://www.htmlhelp.com/reference/css/quick-tutorial.html.

Read more on CSS structure and rules, CSS properties and linking style sheet to HTML.

Note: You have been working with CSS already with your DIVs.

PART 3 - Rollovers using CSS hover

DHTML means Dynamic HTML, and the idea was that by naming different elements, you could refer to those named elements and, using Javascript, access them and change their properties on the fly. Javascript is still used for that, but some functionality has been built directly into CSS itself. A new CSS element is HOVER, and it works like this:

<HTML>

<HEAD>

<TITLE>DIV EXAMPLE</TITLE>

A:link {text-decoration: none}

A:visited {text-decoration: none}

A:active {text-decoration: none}

A:hover {text-decoration: underline; color: red;}

</style>

</HEAD>

<BODY>

<a href=http://google.com>GO TO GOOGLE</a>

</BODY>

</HTML>

What happened here? The link tag is <A>. In almost all cases, the property associated with the <A> tag is the location of the URL, written like this <A HREF=http://...></a>. The style sheet defines the properties of the <A> tag above, including what happens when you HOVER over the tag in the page. When you HOVER over the tag, change the text to red and underline it. Just like it works on the page.

What about having content and styles in different DIVs that are affected different when rolled-over? To do this, we need to define different classes of styles and reference them to the named DIV classes.

<html>

<head>

.class1 A:hover {text-decoration: underline; color: red;}

.class2 A:hover {text-decoration: underline; color: green;}

</style>

</head>

<body>

STRANGE LINKS

<br>

<a href="http://www.yahoo.com">YAHOO</a>

<a href="http://www.google.com">GOOGLE</a>

</div>

<a href="http://www.yahoo.com">YAHOO</a>

<a href="http://www.google.com">GOOGLE</a>

</div>

</body>

</html>

Now for some even more complicated CSS stuff. Type this in and try it out.

<HTML>

<HEAD>

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: 3px 12px 3px 8px;

text-decoration: none;

border-bottom: 1px solid #fff;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

#navcontainer li li a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: 3px 12px 3px 8px;

text-decoration: none;

border-bottom: 1px solid #fff;

}

</style>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

<li><a href="#">Free-range</a></li>

<li><a href="#">Other</a></li>

</ul>

</li>

<li><a href="#">Cheese</a>

<ul>

<li><a href="#">Smelly</a></li>

<li><a href="#">Extra smelly</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

Go here for an explanation on how this works: http://css.maxdesign.com.au/listutorial/sub01.htm

The hardest thing is understanding what the "display: block" tag does.