ThinkQuest '98 | The Library of Web Design

Table of Contents | Chapter 2 | Chapter 4 | Graphical Version

So here we are, learning about body tags. I have grouped together in this chapter essential and basic body tags, but lack a catagory. All are relatively easy to learn, and are used in high frequency in web design. I suggest that you pay close attention to this chapter in particular.

Misc. Body Tags
Demo no. 1

Now we go onto the <div> tag. This is a nickname for "division". As the name suggests, the <div> tag creates a division within a webpage. What type of division? Well, paraphrasing the ProjectCool webpage, a <div> division is similiar of a webpage within a webpage. Although this tag is not used very much in standard coding, it becomes an essential element in Cascading Style Sheets and Dynamic HTML. A few notes notes about the <div> tag:

This tag creates a line break. That means that anything after the division will start on a new line, instead of following the last element of the previous line.
If you want to make the text align to the left, right, or center, you use the <idv> tag, with the appropriate attribute.
Divisions are easy and fun to use. They are a bit easier than tables; with the right attributes and a splash of some easy CSS programming, you can achieve design effects otherwise too complicated or impossible (the green tip boxes are a conjunction of <div> tags, tables, and a little bit of CSS)

Divisions are quick, easy, and very useful. Make sure you pay attention to the following chart.

Quick Information: <div>

This tag creates a division within an HTML document, which acts like a mini-webpage

Like in a word processor, anything inside the division will be horizontally aligned to the left, center, or right.

The <span> tag is a sister to the <div> tag. The two are very similiar in the fact that they compartmentalize a webpage. But whereas the <div> will force a line break, the span does not. Also, the span doesn't have the alignment capabilities that <div> has. However, <span> is an important part of many CSS and DHTML effects, such as some of the green tip boxes in this book. That's basically it.

Quick Information: <span>

This tag creates a span of space within an HTML document, which acts like a mini-webpage, but doesn't force a line-break

Paragraphs are the basic structural element in any text document. Since you want some text in your page, to deliver content, you must learn to utilize this valuable element. A paragraph is a line break with one line's worth of space preceding the text. That's all it is. There is no indenting (the indent effect you see here is done with CSS).

Basically, the paragraph tag is <p>. It's end tag is optional, and almost no one includes it. I suggest that you don't; omitting the end tag will save some memory. There are no attributes. The <p> tag is the easiest and most frequent tag you will ever use.

Quick Information: <p>

A paragraph is a line break with a line's worth of space preceding the text in the paragraph.

Attributes:Name

Values

What it does

None for the poor <p> tag.

The line break element, when used, is exactly as if you hit the "Enter" key. You have to use the <br> tag to create a line break in the page. HTML doesn't recognize extra "returns" as an element to be displayed. You could type in a dozen returns and get nothing, while a single <br> will give you the "Enter" key result. It's somewhat similar to the <p> element, but there is not space in between the preceeding text and following text.

Quick Information: <br>

This tag creates a line break like the paragraph element, but without the space in between

Our second to last miscallaneous body tag is <hr>, the tag for the horizontal rule element. This element basically creates a horizontal line across the webpage. There are several attributes to control its length, size, and et cetera; all will be revealed below.

Horizontal rules force a line break, so nothing can be on the same line as a horizontal rule. Another feature of horizontal rules is that they have a nice three-dimensional look, just as if a little divet had been carved into stone. There is an attribute if you prefer regular lines, like the ones on this page. Horizontal rules are defaulted to take up the entire width of the browser window as well. Here's the vital information, as well as a nice demo:

Quick Information: <hr>

This tag makes a little horizontal line on the page

The size attribute determines how tall the hr is. The rules on this page are 1 pixel tall. Rules can be as tall as you want, ie 100 pixels or more.

width=

no. of pixels

XXX% (percent of window)

"Width" determines the width of the rule. This can be a fixed number of pixels, or can be a percentage of the window; if the browser window is resized, then the rule also resizes in proportion to the percentage.

noshade

no values

Horizontal rules usually have a 3D look, ie they are carved into the page. This attribute makes the rule look like a 2D, flat line, like the rules on this page.

align=

left
center
right

This attribute aligns the horizontal rule to either left, center, or right. Horizontal rules are, by default, aligned to the center.

Example - hr.htm

<html>
<head>
<titlegtDemo of Horzontal Rules</title>
</head>
<body>
<hr>
This is a default (normal) horizontal rule above
<hr noshade>
A non-shaded rule
<hr width=50%>
A rule set to 50% of the browser window
<hr size=10>
A rule that is 10 pixels tall
<hr align=left width=50%>
A rule that is aligned to the left, as opposed to the center. The width is 50% so you can see the difference. <br>
</body>
</html>

Well, my demo code is all ready to go. If you type in that code into Notepad (or whatever) and save it as "hr.htm" and loaded it in a browser, this is what you would get something like this:

Demo of Horizontal Rules - Microsoft Internet Explorer

This is a default (normal) horizontal rule above

A non-shaded rule

A rule set to 50% of the browser window

A rule that is 10 pixels tall

A rule that is aligned to the left, as opposed to the center. The width is 50% so you can see the difference.

There are several default settings for horizontal rules, as listed below:

Rules are 2 pixels in size
Rules are center aligned
Rules will take up 100% of the browser window
Rules start with the three-dimensional look
Not really an attribute, but rules take the color of the background

Now our final tag in this chapter. Aren't you excited?! I know I am. Now we will talk about the wild and wacky world of comments. Comments are elements that exist in the code and are not seen in the page. "Not seen? So why have them?" you may ask. Well, comments are designed to be used as an aid for programmers like me and you. It may be hard for you (I know it is for me!) to find the spot to work on if you are reading gibberish. So you would put a comment in whatever spot that was noteworthy so you, the programmer, could see it quickly while editing your page. Net surfers don't need to see those little comments, and they would probably be confused by the cryptic remarks anyway.

Uh oh, anaology coming on (you may now roll your eyes up in disbelief). Comments are like bookmarks in, well, a book; they allow the reader, in this case, the programmer, to see where they left off, or where there was an interesting section.

Comments have a somewhat different syntax than normal tags, so please bear with me. They are actually simpler. Every comment begins with the these characters:

<!--

And comments end with these characters:

-->

The text you would want as the comment would be placed in between those two strings of characters. So you would get something like this:

You can put pretty much anything into those comment tags. NOTE: There is a <comment> tag. However, it is nonstandard and not supported by Netscape Navigator. That's it for comments. Simple, no?

I bet you want a demo, right? Well, I couldn't fit it on this page. So turn the page for it. If you don't, then just flip to Chapter 4: Lists.
Top