BASIC HTML

©2003 Bonnie Dalzell

This is now part of an expanded lesson set at: http://www.batw.net/htmllessons/index.html

Example Page for simple HTML tags.
Save this as a local page in HTML format and open it in a simple text editor such as bbedit or notepad.

Basics
HTML pages have three parts, the HEADER, the BODY (which contains the part which is readable when displayed in your browser) and the FOOTER.

The HTML commands to the browser are 'marked-up' by being surrounded by the < (less than) and the > (greater than) characters.

When you examine this page in your simple text editor you will see various HTML commands. The HTML commands to your browser are called tags or elements. Explanations for each one will appear within the area affected by the tag. When viewed in your browser the tag will not be visible but the results will be visible. Most tags are paired. To close the range of influence of a tag you use a negated versions of the tag. Negation is indicated by the right leaning slash. Here is the headline 1 tag < H1 >. Here is the negation for the headline 1 tag. </H1>

About the Header

The header is invisible to the person looking at a page in their browser but it is needed so that the browser can successfully read the page. I am not going to teach you all the details of a header in this first lesson.

Minimally your page should have the following invariant items in the header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html> >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

You can cut those lines out and paste them at the top of a web page that you may wish to make.

The following fields should be in the header of your web page if you want it properly indexed by internet search engines such as Yahoo! and Google. You will need to fill in the appropriate information in the values part of the meta tags. The title is important and should have a descriptive phrase associated with it.

The basic form of a meta tag is this:
<meta name="descriptor" content="value of descriptor">

<meta http-equiv="Title" content="Page title and descriptive phrase here" >
<meta http-equiv="Description" content="Description of the page content, no more than 25 words.">
<meta name="Author" content="Author of the page" >

<meta name="Generator" content="generating software (for example your brain if you made your page by hand).">
<meta name="Copyright" content=" copyright date and copyright owner.">

<meta http-equiv="Keywords" content="enter a list of comman separated key words here, use no more than 11 ">
<title> Page Title </title>

The header must be closed by a header close tag:
</head>

About the Body

The body tag

The body is delimited by a pair of body tags, <body> and </body>. The simplest form of the body definition can use these two tags unmodified. However if you look at the beginning (opening) body tag for this page you see it looks like this:
<body bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#0000ff">
This body tag has arguments, bgcolor, text color, visited link (vlink) color and unvisited link (link) color all expressed as a hex numbers.
Common colors are:
   White = "#ffffff"
   Black = "#000000"
   Red = "#ff0000"
   Blue = "#0000ff"
   Green = "#00ff00"
   Cyan = "#00ffff"
   Magenta = "#ff00ff"
   Yellow = "#ffff00"

You can also set a background image for the page using the background="path2image/imagename" argument BUT this needs to be done very carefully because most backgrounds result in unreadable text.

It is a good idea always to define the background color and text color, even if it is white background with black text because different browsers have different default background colors, some are white and some are grey, and if you define one without defining the other you may end up with an unreadable page due to your users browser's defaults.

The body is terminated with the end body tag </body>.

Special Characters

You may want to display characters on your page that are found in the HTML tags such as the less than and greater than characters. HTML has the ability to display non-standard characters by using escape commands. < is the escaped representation of the < while > is the escaped representation of the > and © is the escaped representation of the copyright symbol seen at the top of the page. Another useful escaped character is the hard space  . This allows you to overide the browser's actions where multiple spaces are not displayed unless they are specificially marked up. As in this example.

There are escaped representations for a very large set of special symbols.

Other Basic Mark-up tags

Paragraphs are deliminated by paragraph tags <p> and </p>.
Emphasis is created with the bold tag set <b> </b>
Italics is created with the italic tag set <i> </i>. Sometimes italic text can be very hard to read;
The letters can be magnified within a line with the big tag set <big> </big> This is an example.
The letters can be reduced within a line with the small tag set <small> </small> This is an example.
Line breaks can be created by the break tag <br>. It is not paired up with a break negation tag.
A horizontal separator can be created with the <hr> tag. It is not paired up with a negation tag.

Under the newest standard for HTML, the tags should be in lower case .
Nesting of tags: If multiple tags are used around a body of text the order of nesting of the tags and their negations is important.

This is an example with three levels of nesting. The negations need to be in reverse order

<h1><b><i> This is an example with three levels of nesting. The negations need to be in reverse order</i></b></h1>

Headline sizes

In this section various headline sizing tags have been used to change the size of the print.
Headline tags indicate the font size by a number from 1 to 6. For example <H1> would be the command to have the browser use its largest font size. What font family and what size will be used is determined by the viewer's choices in their browser set up on their computer.

This is headline sized 1 as a default headline sizes get smaller as they are designated with large numbers - they go from 1 to 5

Headline tags can take additional instructions called arguments.
<H1 align="center">
is an example. The value of the argument should be lower case and enclosed in double quotes.

This is headline size 2, aligned to the right.

This is headline size 3, aligned to the left

This is headline size 4, if alignment is not designated it defaults to the left. The "end headline" tag inserts blank space so you cannot use headline size tags to get different font sizes on the same line

This is headline size 5 aligned to the center.

Font tag

The font tag allows you to set attributes of the displayed font within a line. The font tag has an opening and a closing component. Unlike the headline tag, the closing font tag does not insert a line break in the line. The font sizes run from 1 to 6 and the sizes are the opposite of the headline sizes, 1 is the smallest, 6 is the largest.

This is font size 1 in red This is font size 2 in green This is font size 3 in blue This is font size 4 in yellow This is font size 5 in magenta This is font size 6 in cyan

The basic structure of these font tages is <font size ="6" color="#00ffff"> Text to be displayed </font>.

Lists

List tags allow text to be set up with successive levels of indenting. There are two basic types, unordered lists in which the individual elements are designated by a non-text marker and ordered lists in which the individual elements are numbered by the browser. First is an example of an unordered list. Unordered lists are started with a list opening tag <ul> and closed with a negation of that tag </ul>.
List elements are surround by the list element tags: <li> and </li>

Links use both opening and closing tage. This list shows the links as working links, the second list displays the code.
This is the form of a link to another page at the same site.
This is the form of a link to another page at a distant site.
This is the form of a link to another part of the same page.

This second list example is an ordered list. Its tags are <ol> and </ol>

<a href="simple_page.html"> This is the form of a link </a> to another page at the same site.
<a href="http://www.batw.net/simple_page.html"> This is the form of a link </a> to another page at a distant site.
<a href="#end"> This is the form of a link </a> to another part of the same page. You need to place a target at the place you want the browser to jump to. The target looks like this: <a name ="target_word"> some text </a>. Several different links can point to the same target.

Here is a multiple level UNORDERED list:

Level one item 1
- Level two item 1
- Level two item 2
- Level two item 3
- - Level three item 1
  - Level three item 2
  - Level three item 3
  - Level three item 4
- Level two item 4
Level one item 2
Level one item 3

Break can also be used to force a line break. The break tag used above clears any commands that might affect the text, such as a large image which could force the text to one side. It looks like this: <br clear="all">

Below is a working example of a tag that displays an image on the page.
It is of this form:
<img src="ButtonLogo_150_150.jpg" align = "middle" height="150" width="150" alt="a sample picture 150 pixels high and 150 pixels wide">
The page loads faster if you include the image height and width in pixels in the tag. The alt variable should describe the image, not just name it. The alt variable is used when the browser does not display images, for example for a browser used by a blind person.

a sample picture 150 pixels high and 150 pixels wide The sample picture, 150 pixles wide and 150 pixels high is displayed to the left.
Here 10 break tags create white space.

By default browsers ignore carriage returns and multiple spaces that are typed into the text and only display formatting that is created by the HTML tags.


If you want to have the browser display what you have typed
                      e x a c t l y
as you typed it you use the preformat tag pair  <pre> and </pre>.

However some browsers to not recognize this tag pair. WebTV is an example.

This is a target for a link within a page. It is included here so that you can see the page jump to the target if you press the third working link in the unordered list above. The form is <a name="end"> This is a target </a>. Note that the displayed text of the target does not stand out from the paragraph.

You can check your page by submitting it to the W3C validation service at http://validator.w3.org/ .

You can even check the page from your home computer using the Local File Upload feature.

Back to home page .

Have a question or a suggestion for this page? Email bdalzell at Q I S dot net
Home ] [ Some Tips on Site Design Tutorial on constructing a simple web page.