Computer Infotech

Table of Contents

A Simple Way to Create Web Pages

More Tags

Headings

There are six heading levels. Most web pages use only three of these headings. To create a heading, use the following tags:

<H1>This is heading 1.</h1>

<H2>This is heading 2.</h2>

<H3>This is heading 3.</h13

<H4>This is heading 4.</h4>

<H5>This is heading 5.</h5>

<H6>This is heading 6.</h6>

When displayed in your browser, the headings should look like this.

This is heading 1.

This is heading 2.

This is heading 3.

This is heading 4.

This is heading 5.
This is heading 6.

Levels 1, 2, and 3 are most often used. Level 4 is the same size as the main text of the document. Level 5 and 6 are often used for copyright or other fine print.

When using subheadings, use them in sequential order. In other words, don't skip heading levels. If you start with Level 1, use Level 2, then 3 and so on in your subheadings. If you start with Level 2, use Level 3 for a subheading.

Centering

To center text, type <center> before the sentences you have created. Type </center> after the sentences. Save and View. You should see all of your sentences centered on the page.

Aligning Text

You can align text three ways: right, left and centered.  You learned how to center text. To align text left or right, you add an attribute to the paragraph tag. Select a sentence and type <p align="right">. After the sentence, type </p> (you should use the </p> tag whenever you include an attribute in the <p> tag. Save and view. Your text should be aligned right in the sentence you chose. Since left alignment is the default alignment, it isn't really necessary to include that attribute in the <p> tag unless you have used the align right tag and want to be certain the next section of your text aligns left.

Special Characters

You can add characters to your document which do not appear on your keyboard. These characters have special codes that you must use to have them display on your pages. Here are some of the most common codes and their symbols:

&copy;

©

&#174;

®

&#038;

&

&#064;

@

&#188;

¼

&#189;

½

&#060; or &lt; <
&#062; or &gt; >

The Body Tag

You can add attributes to the body tag to change the background color. Type <body bgcolor="blue">. Save and view your page. The background should be blue. There are many colors available. You can add the most common colors by typing the color name: red, blue, green, orange, yellow, black, purple, and brown. There are many shades of colors which use numbers to represent them. For a complete list of color numbers and their associated color, visit http://www.maran.com/colorchart.

Lists

There are two types of lists, ordered lists and unordered lists. Ordered lists have numbers preceding each item. Unordered lists have bullets preceding each item. To create an ordered list, use these tags:

Favorite things to do on my computer.
<p>
<ol>
<li>Use my computer</li>
<li>Check my email</li>
<li>Browse the Web</li>
<li>Create Web Pages</li>
</ol>

Save and view in Internet Explorer. It should look like this:

Favorite things to do on my computer.

  1. Check my email

  2. Browse the Web

  3. Create Web Pages

Type the same list, but use <ul> instead of <ol>.

Favorite things to do on my computer.
<p>
<ul>
<li>Use my computer</li>
<li>Check my email</li>
<li>Browse the Web</li>
<li>Create Web Pages</li>
</ul>

When viewed in Internet Explorer, it should look like this:

Favorite things to do on my computer.

  • Check my email

  • Browse the Web

  • Create Web Pages

You can use attributes in your list tag to change the number and bullet style. For ordered lists, add these attributes to the <ol> tag :

<ol start="?"> Replace ? with any number for the starting number of your list.

<ol type="A"> Creates a numbered list that uses capital letters.

Here are some more types: A (A, B, C); a (a, b, c); I (I, II, III); i (i, ii, iii)

For unordered lists, add these attributes to the <ul> tag:

<ul type="disc">

<ul type="square">

<ul type="circle">

Horizontal Rules

You add a horizontal rule to your web page by typing <hr>. This will place a gray shaded line across the width of your page. You specify width of the horizontal rule by adding the width attribute. Type <hr width="80%">. View it in your browser. Your horizontal rule should be across 80% of your page. Notice that a horizontal rule is always centered. You can specify alignment of the rule by typing <hr align="right"> or <hr align="left">.

Some More Tags and their Functions

Here are some tags with their function. Experiment with these to see how they work on a web page:

<blockquote></blockquote> Place around text to indent it about 1/2 inch from the left and right margins.

<strike></strike> Place around text to have a line drawn through the text. Useful for price changes.

<sup></sup> Creates superscript text.

<sub></sub> Creates subscript text.

<!--    --> Type comments in between the dashed lines. There should be at least one space between the dashes and your comment. Comments do not show in the web browser. They can be helpful to people who are viewing your code.

 

Some Simple Tags   Adding Images


This information compliments of
Computer Infotech®
Maine Web Design & Hosting Services
(207) 223-5103
Contact Us

© Copyright 2000 by Computer Infotech®

Updated December 2004