Sampler Page

This is the sampler page. It demonstrates the use of most common HTML tags. To view the HTML used for this page, use the "View Source" option in your web browser. You can then compare the page and the HTML that created it. The "View Source" option can be used with any web page, but some of them have very messy HTML.

Notice that no matter how much space I put between items in the HTML code, it is all condensed to a single space when you view it in your web browser. The browser does this so it can display the page properly, regardless of what size the window is on the screen.

Sometimes, you want the less-than symbol to appear on the page, like this <. Since tags are made from less-than symbols, greater-than symbols, and quotation marks, you need to write special codes to make them appear on the page. By the way, a greater-than symbol looks like this >. Another special symbol of this type is the "non-breaking space", which allows you to put extra space between items on the page.

Heading 1

Heading 2

Heading 3

Heading 6

The <p> tag can be confusing. It is used to create the space between paragraphs. In the first version of HTML, a single <p> was intended to create a between-paragraph space. No closing tag was necessary. Now, most people like to use <p> and </p> around a paragraph, the same way you would use heading tags around a heading. Most web browsers will accept either format, so feel free to choose which one you want. However, do not mix the two forms on a page, as this can cause problems.

A picture of an eagle, where the picture has the filename "eagle.gif". This picture has been resized so that it is 100 by 100 pixels. The align="right" property has been used to put the text beside the picture. You have to be careful when using image alignment such as this, since the effects change with the size of the browser window. Try making the window narrower and wider. What happens to the text and the line below?

Indiana University - An absolute link, linking to the IU home page.
The web pages tutorial - A relative link, which does not need the full URL.

Parts of this room:

Door
Windows
Floor

Things to do today:

Get out of this class
Get some food
Go to sleep

Emphasized Text
Strong Text

Normally, the browser ignores extra whitespace in your file. Sometimes, you want to keep the whitespace in its original form, so items line up properly.

Name    Score
----    -----
Bob        5
Amy        7
Harold     8
Frank      2
Miranda    9

However, it is usually more effective to use a table when precise positioning is desired.

Name Score

Bob 5

Amy 7

Harold 8

Frank 2

Miranda 9