Page Layout and Text Formatting

by Randall S. Davis



"Sharing ideas is what the Internet is all about!"

- Randall Davis


[HOME]
CHATHANDOUTSLINKSSEARCH STUDENTS TESTSTOOLSVOCABHELP

What are some of the basic HTML tags?

I. The Main Tags

Here is the very basic code for your first home page. Notice that you have beginning and ending tags in most cases.

<html>
<head>
<title>My Home Page</title>
</head>
<body>
<center><h1>My Home Page</h1></center>

(Your text would go here . . . )

</body>
</html>

II. Background Colors

You can add background colors to the page by adding the line below to the body tag:

<BODY BGCOLOR="#FFFFFF">

The code with this line would look like this:

<html>
<head>
<title>My Home Page</title>
</head>
<BODY BGCOLOR="#FFFFFF">
<center><h1>My Home Page</h1></center>

(Your text would go here . . . )

</body>
</html>

Colors for the background, visit this page The 216-color browser-safe palette with codes for other choices of colors. You can simply substitute the code in this example for the color code you want to use.

NOTE: In addition to white and black, you can just use the word rather than the code for them for the colors below:

  • silver
  • gray
  • green
  • lime
  • blue
  • magenta
  • purple
  • teal
  • olive
  • cyan
  • yellow
  • navy
  • light green
  • maroon
  • red

III. Links Colors

You can also select the color of your links and visited links. To help visitors remember what links they have visited from your page, you can tell the page to change the colors of the visited links. On this page, the links color is a light purple and the visited links are a dark pink. Visit the 216-color page listed above to select these colors.Here is what the background color and links codes look like for this page.

<html>
<head>
<title>My Home Page</title>
</head>
<BODY BGCOLOR="#FFFFFF" LINK="#6633FF" VLINK="#FF0099">
<center><h1>My Home Page</h1></center>

(Your text would go here . . . )

</body>
</html>

IV. Background Images

Background images are like wallpaper on your page. They are usually are small and repeat themselves over and over to cover the page. Here are some points to consider before you use a background image:
  1. use small background images so your pages load quickly;
  2. avoid backgrounds with "busy" backgrounds that make reading the text difficult;
  3. give credit to the designer who created the image.

Look at this example:

notebook

I would add the following tag to my page:

<BODY BACKGROUND="images/notebook.gif" BGCOLOR="#FFFFFF" LINK="#6633FF" VLINK="#FF0099">

Notice that I just added the body background tag in front of the body bgcolor tag. I include both because if people view my page with images off, I still have a background color they can see. The entire code would look like this:

<html>
<head>
<title>My Home Page</title>
</head>
<BODY BACKGROUND="images/notebook.gif" BGCOLOR="#FFFFFF" LINK="#6633FF" VLINK="#FF0099">
<center><h1>My Home Page</h1></center>

(Your text would go here . . . )

</body>
</html>

Here's what the page would look like (CLICK HERE). Turn images off first before you view the page to see what it would look like with out the background. Here are some sites that contain background images:

IV. Background Borders Made Simple

So you want an easy way to make a background border. You can by using a small graphic (like this one ) and then enlarging it to make it look like a large border image (see example).

Okay, here's what the code looks like:

<IMG SRC="images/black.gif" width="50" height="1800" align=left>

The actual size of the graphic is 10 pixels by 10 pixels, but you can make it bigger by adjusting the size of both the height and width to the desired size. You can also adjust the space between the background and the text by adding the following code:

<IMG SRC="images/black.gif" width="50" height="1800" align=left hspace=10>

You can create similar graphics by using programs like Photoshop or PaintShop Pro. You can download some of my samples from THIS directory.

V. Font and Letter Sizes

Fonts refer to the styles of the letters. You can also change the size of letters. Remember that the the code for titles (headings) (<center><h1>Title</title> should not be used for changing the size of letters in your sentences and paragraphs.

Body Text

Use the "basefont" tag for changing the size, color, and style of the entire page:

<html>
<head>
<title>My Home Page</title>
</head>
<BODY BACKGROUND="images/notebook.gif" BGCOLOR="#FFFFFF" TEXT="black" LINK="#6633FF" VLINK="#FF0099">
<BASEFONT="5" COLOR="navy" FACE="arial"> Here is the code for changing a sentence to look like this:

My name is Randall.

<font size="5" color="#0033CC" face="arial">My name is Randall.</font>

The entire code in your page would look this:
<html>
<head>
<title>My Home Page</title>
</head>
<BODY BGCOLOR="#FFFFFF">
<center><h1>My Home Page</h1></center>
<font size="1" color="#000000" face="times new roman">My name is Randall.</font>
</body>
</html>
[ Practice Quiz Questions ]

top

CHAT HANDOUTS LINKS SEARCH STUDENTS TESTS TOOLS VOCAB HELP

Copyright © 1998 - 2000 by Randall S. Davis, All rights reserved.