Basic Text Structures

IMAGES AND COLORS

This is the part that most people like the best… adding in their own colors and images to their pages. Granted, this really is the most fun-filled part of Web page design. However, I caution you on the use of images in your Web page. Do not fill your pages with images because they will take a very long time to download. Thoughtful and discreet usage of images will create a good look while maintaining a reasonable download time. For example, I will often use a background image, a title image, and perhaps a few small images as horizontal rules or as bullets. (As an example, look at this site I created: The EMU Homepage.) Sites maintained by companies such as Microsoft, The Weather Channel, and Intel make heavy use of images, and can take a very long time to download.

Putting an image in your page
The tag to add an image to your screen is one which does not have an "ending" counterpart.

<img src="filename">
This is called an inline image. It is important to remember the quotation marks around the file name. Most browsers require that they be there, otherwise the image will not be displayed at all. The image can be centered on your page by simply enclosing it within the <center> </center> tags described before.

<img src="filename" width="50%"> <img src="filename" width="240">
In both these cases, the width (and subsequently the height) of the image is being directly controlled by the page author. In the first example, the width is limited to 50% the width of the browser’s screen. In the second example, the width is limited to 240 pixels. It is usually a better idea to specify the size as a percentage so that it will always be displayed properly on every browser on every screen resolution across the world. However, that is left to the author’s discretion. It is also possible to specify the image’s height, just add height=xx to the tag above (where xx is the height you’re specifying for the image, in either a percentage or in pixels).

<img src="filename" align="XX">
This will let you change the alignment of the image on the screen. "XX" is replaced with one of these keywords:

top	This will align any following text with the top of the image. However, the next line will be underneath the picture instead of directly under the previous line.
middle	This will align any following text with the middle of the image. However, the next line will be underneath the picture instead of directly under the previous line.
bottom	This will align any following text with the bottom of the image. However, the next line will be underneath the picture instead of directly under the previous line.
right	This will align the picture to the right of the screen and any text will be to the left of the image.


<img src="filename" alt="alternate text">

With the "alt" parameter, you can specify text will be displayed in the image’s place while it is being loaded, and will serve as a way to identify what should be there if the image can’t be downloaded or if it is missing from the directory. Once again, be sure to use quotation marks around the text otherwise some older browsers may become confused. Also, if you are wanting to have a blank "alt", use at least one space between the quotes. Some older versions of Netscape become confused if nothing appears between the quotation marks.

It is possible to have the image located in a directory other than the one in which the page resides, you just have to tell it where to look. So, for example, let’s say you’re in directory C:\mystuff and you have a file "stuff.html" and a directory for your images, say C:\mystuff\images. To use the image "stuff.gif" in the images directory, simply use this as your filename: <img src="images/stuff.gif">. USE A FORWARD SLASH INSTEAD OF THE BACKSLASH WHICH DOS USES. This is because the Web is based off UNIX systems, which use the forward slash in directory paths.

Note: You must use relative paths here! You cannot do something like this:

<img src="C:/html/images/stuff.gif"> This will not be interpreted correctly by the browser. Instead, if you need to go up directories, you can do something like this:
<img src="../../images/stuff.gif">

Putting a background image on your page
It is a simple thing to add a background image to your page. It is specified within the <body> tag introduced to you earlier. Here’s how to do it:

<body background="filename">
The same rules about image file location apply here, too. They can reside in a different directory, just make sure the directory path is included in the filename.

Changing the background color
Sometimes, people wish to simply have a colored background instead of a background image on their page. This is also accomplished within the <body> tag.

<body bgcolor="FFFFFF">
The color is specified by a hexidecimal number representing a color. The first two digits of the hexidecimal number represent RED, the next two digits represent GREEN, and the last two digits represent BLUE. For example, to have a pure red background image, the hexidecimal digit would be "FF0000". Similarly, for yellow the digit would be "FFFF00". (Remember, with light RED + GREEN = YELLOW.) In the references section, I have listed a URL for the Colour Selector Page. It can help you see how those numbers work.

Changing the color of your text
There are two different ways to do this. You can either change the color of a small portion of your text, or you can change the default color for ALL the text on your page.

<body text="FFFFFF">
This will change the default text color of the entire page to the specified color, here white.

<font color="FFFFFF">
Any text appearing between these tags will appear in the specified color, here white.

Example

Here are some sample pages to demonstrate the discussed tags.

Sample 3: This page will have a white background and will demonstrate inline images.

<html>
<head>
<title>Sample Page #3</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body bgcolor="FFFFFF">

<img src="chip03.gif" align="top">Here is some text to demonstrate
     what happens when you use "align=top".  Notice how it 
     doesn't scroll the way you might expect it to.
     <hr><p>

<img src="chip03.gif" align="middle">Here is some text to demonstrate
     what happens when you use "align=middle".  Notice how it 
     doesn't scroll the way you might expect it to.
     <hr><p>

<img src="chip03.gif" align="bottom">Here is some text to demonstrate
     what happens when you use "align=bottom".  Notice how it 
     doesn't scroll the way you might expect it to.
     <hr><p>

<img src="chip03.gif" align="right">Here is some text to demonstrate
     what happens when you use "align=right".  Notice how it 
     doesn't scroll the way you might expect it to.
     <hr><p>

</body>
</html>

This is how it would look on a browser.

Sample 4: This page will have a background image and will demonstrate the use of "alt" parameters and colored text.

<html>
<head>
<title>Sample Page #4</title>
<!-- This page created by Valerie Bradley 13 June 1997 -->
</head>

<body background="walpap02.jpg" text="000000">

Default text color set to BLACK.

<img src="chip02.gif" alt="Missing image"><br>
This image is missing on purpose to demonstrate the "alt" 
parameter.
<hr><p>

<center>
<font color="FF0000">This text is in RED!</font>
<font color="00FF00">This text is in GREEN!</font>
<font color="0000FF">This text is in BLUE!</font>
</center>

</body>
</html>

This is how it would look on a browser.

Previous | Next

This page created by Valerie Bradley
Last updated: