A Sample HTML Document

A Sample HTML Document

A Sample HTML Document

A Sample HTML Document

A Sample HTML Document
A Sample HTML Document
The purpose of this document is to illustrate various features of the Hyper Text Markup Language (HTML). You can view the "source" to see how various things were done. For example, the header lines above show the different sizes possible for headings. Note that size=h6 is the smallest, and size=h1 is the biggest.

We just began a new paragraph here. Now here are the same headings as above, but centered on the screen.

A Sample HTML Document

A Sample HTML Document

A Sample HTML Document

A Sample HTML Document

A Sample HTML Document
A Sample HTML Document

Special characters (not supported by all browsers)
ÑØÈ<>&"öñÆÁ
ÂÀÅÃÄÇÐÉÊÈ
°←→

Greek Symbols (supported only by newer browsers)
a b c d e f g h i j k l m n o p q r s t u v w x y z
! " # $ % & ' @ \ ^ _ ` | ~

More Greek Symbols (supported only by newer browsers)
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z


Example of Pictures and Text on same line

The first example shows text aligned with the top of the picture

Top alignment test

The next example shows text aligned with the middle of the picture

Middle alignment test

The next example shows text aligned with the bottom of the picture

Bottom alignment test

It is also possible to have text "flow around" an image. This is demonstrated below:

In this first example, the picture is placed to the left, and the text apparently flows around on the right hand side. We achieved this effect by use of the <align=left> tag, which you can verify by selecting the "view source" option from the menu. The way this looks on the client screen does vary a bit with the browser used, and most importantly it varies with the screen size selected. It is therefore important to test all your web pages with a variety of browser types and screen sizes. Avoid using more than 256 colors in pictures where possible, and above all do not overload your web pages with cutesy pictures that serve no purpose other than to slow download time.

In this next example, the picture is placed to the right, and the text apparently flows around on the left hand side. We achieved this effect by use of the <align=right> tag, similar to what we had done above with the <align=left> tag. When creating web pages, a good rule of thumb is that it should not take more than 10 seconds to load for the "typical" user. For most people today (April 1997) that means a connection at 28.8 kb over a modem connection. This translates to a max. page size (including images) of about 40,000 bytes. Note that if an image occurs more than once on the same page (as it does on this one) then you should only count it once when estimating page size, since most browsers are smart enough to not download the same image twice.


Screen Backgrounds

It is possible to change the screen background color, and even to use an image as a background or "wallpaper". For example, for this page, we use the bgcolor="#ffffff" command in the <BODY> tag to set the background color to white.

Click here to see how this page looks with a background image added, instead of a background color. We did this by adding the command background="bakg2.gif" to the <BODY> tag. Notice how the background image repeats itself to fill the space available.

Click here to return to the version without the background image.


Return to Computing Page
This page last modified on : Jan. 3, 2007