Don's Notes About HTML
Copyright 2005 Don Woods
1. HTML Marker Tags 11. Images
2. Container Tags 12. Tables
3. Break Tags 13. Frames
4. Object Tags 14. Input Devices
5. HTML Document Structure 15. Selection Lists
6. Text and Headlines 16. Text Area Containers
7. Ordered and Unordered Lists 17. Forms
8. Dictionary Lists 18. Meta Tags
9. Properties of Containers and Breaks 19. Advanced Web Page Design
10. Anchors and Links Main Menu

1. HTML Marker Tags

Hypertext Markup Language (HTML) is the universally-recognized protocol of instructions describing how a browser should display web pages on a computer screen. HTML does this by marking a web page file with a variety of tags, beginning with a greater-than symbol and ending with a lesser-than symbol.
Examples:
This is an example of the <b>boldfaced text</b> tags.
You can use <B>uppercase</B> or <b> lowercase</b> instruction codes for your tags.

Displayed by browser:
This is an example of the boldfaced text tags.
You can use uppercase or lowercase instruction codes for your tags.

2. Container Tags

A web page, also known as an HTML document or file, begins and ends with the HTML document container tags:
<html> Everything that's part of the web page goes here. </html>
Container tags mark a range of text for special treatment by the browser. The HTML document container tags, for example, identify the beginning and end of an HTML document. In the following examples, other types of container tags tell the browser how to format text inside the container. The ending tag of a container is distinguished from the beginning tag by a backslash symbol.
Examples:
<b>Boldfaced text</b> container
<i>Italicized text</i> container
<u>Underlined text</u> container

Displayed by browser:
Boldfaced text container
Italicized text container
Underlined text container

Containers can be nested inside other containers. They can also overlap each other.
Examples:
<i>This example combines italicized and <b> boldfaced</b> text.</i>
<i>This example combines italicized and <b> boldfaced</i> text.</b>

Displayed by browser:
This example combines italicized and boldfaced text.
This example combines italicized and boldfaced text.

Caution!
Don't leave a space between the greater-than symbol and the instruction code.
Don't forget the backslash symbol.

3. Break Tags

HTML uses a variety of break tags to interrupt the text of a page. The most commonly used break tags include the line break, horizontal rule, and paragraph break. The paragraph tag behaves somewhat like a container--it can be used to set the page alignment of text following the paragraph break. However, paragraphs are not true containers and do not require an ending container tag.

<br> Line breakFollowing text begins on next line.
<hr> Horizontal ruleInserts a horizontal rule across page.
<p> Paragraph breakInserts a blank line across page.

4. Object Tags

Object tags instruct the browser how to insert things other than text or breaks on the page. These include images, buttons, input devices, and special effects. Some objects are hidden from display, serving a purpose without being seen. Most objects are marked with a single tag and have no affect on text following the object. Some objects double as containers, with text and other objects between the beginning and ending tags.
Examples:
<input type=button value="Please Click Here">
<!-- Comment objects store notes for the page designer, but --> comments are not displayed.

Displayed by browser:


comments are not displayed.

Visit Don's Quick Reference to HTML Tags
for a convenient, sorted list of the various Hypertext Markup Language tags.

5. HTML Document Structure

HTML documents (also referred to as pages) have at least three containers:
  1. HTML document container, <html> </html>
  2. Head section, <head> </head>
  3. Body section, <body> </body>
The Head section typically contains a title, comments about the creation and maintenance of the page, and scripts. A well-designed web page will always have a title and at least a few comments. The Head section may contain several meta tag objects, storing information used by design tools and search engines.

The Body section contains the text and objects displayed as a web page by a browser.

Example:
<html> <head>
<title>Title displayed in browser title bar </title>
<!-- Created 6/13/05 by Don Woods, updated 6/16/05 -->
</head>
<body>
<h3>A headline would be appropriate here</h3>
Text to be displayed on page by browser.
</body> </html>
The example above could have been written on a single line with the same results displayed by the browser. Browsers ignore line breaks, indentation and more than one consecutive blank space in the code of an HTML document. Extra space and blank lines are used by web page designers to make code easier for human beings to read.

For some hands-on practice at designing web pages,
try Exercise 1 ("Getting Started")
and Exercise 2 ("Basic HTML Structure") in Practical Exercises.

6. Text and Headlines

A browser prefers to display text in a simple, dull format: Until the browser wanders across a tag instructing it to do otherwise, it relies on the same old format. We can improve on this somewhat with boldfaced, italicized and underlined text. (See Container Tags for examples.)

Headlines are another tool we can use to dress up our web page. All browsers recognize six basic headlines sizes, ranging from <h1>, the largest, down to <h6>, the smallest. <h4> is indistinguishable from standard boldfaced text. <h5> and <h6> produce tiny boldfaced text.

A headline cannot be combined with standard paragraph text or another headline size on the same line, because the browser treats the end of the headline container as a paragraph break. You can underline or italicize all or part of a headline. Paragraph breaks and line breaks also work inside headlines. Boldface tags, however, do nothing to headlines, because headline text is already boldfaced.

Example:
<h4> This is a <i>size 4</i> headline <br>displayed on <u>two lines!</u>> </h4>

Displayed by browser:
This is a size 4 headline
displayed on two lines!

Indentation was used to emphasize the above example of a size 4 headline. This was done with the blockquote container.
Example:
<blockquote>
Everything between<br>
the blockquote tags will be indented.
</blockquote>

Displayed by browser:

Everything between
the blockquote tags will be indented.
The browser also inserts a paragraph break before and after a blockquote container. In the example above, a double indentation was created by nesting a second blockquote within the first.

You may occasionally see a web page with subscript and superscript text. Bear in mind that subscript and superscript text distort line spacing and can make a paragraph look messy.
Fine print created by subscript or superscript text is also difficult to read.

For some hands-on practice with text and headlines,
try Exercise 3 ("Headlines and Text") in Practical Exercises.

7. Ordered and Unordered Lists

Web pages often use bulleted (unordered) or sequentially numbered (ordered) lists. The contents of ordered and unordered lists are preceded by a list item break. A bullet (unordered) or sequential number (ordered) is inserted before each list item.
Examples:
<ol>
<li>Red
<li>Green
<li>Blue
</ol> 		<ul>
<li>Red
<li>Green
<li>Blue
</ul>

Displayed by browser:
  1. Red
  2. Green
  3. Blue
  • Red
  • Green
  • Blue

8. Dictionary Lists

A dictionary list, marked by the <dl></dl> container tags, provides an attractive alternative to ordered and unordered lists. Text inside the dictionary list is organized by the <dt> (dictionary term) and <dd> (dictionary definition) break tags. In dictionary style format, each dictionary term is followed by one or more defintions. The definitions are indented.
Example:
<dl>
<dt><b>Signal Colors</b>
<dd><b>Red</b>: Driver must stop, right turn permitted after stopping
<dd><b>Amber</b>: Caution, signal about to change
<dd><b>Green</b>: Driver may proceed through intersection
<p>
<dt><b>Compass Directions</b>
<dd>N = North
<dd>S = South
<dd>E = East
<dd>W = West
</dl>

Displayed by browser:

Signal Colors
Red: Driver must stop, right turn permitted after stopping
Amber: Caution, signal about to change
Green: Driver may proceed through intersection

Compass Directions
N = North
S = South
E = East
W = West

For some hands-on practice with lists,
try Exercise 4 ("Lists") in Practical Exercises.

9. Properties of Containers and Breaks

The appearance of text on a page can be modified still further by adjusting the properties (such as page alignment) of container and break tags.
Examples:
<p align=center>Example of centered text
<h4 align=center>Example of centered headline </h4>

Displayed by browser:

Example of centered text

Example of centered headline

The size and color of ordinary text can be modified by setting the size and color properties of the font container. Fonts of size 4 through 6 are as big as headlines, but not boldfaced.
Examples:
<font size=1>Size 1 is the <font color=green>smallest text</font> size.</font>
<font size=3>Size 3 is the default <font color=red>standard text</font> size.</font>
<font size=4>Size 4 is <font color=green> larger.</font></font>
<font size=8>Size 8 is the <font color=blue> biggest.</font></font>
Small and <font size=5>large</font> fonts can be combined on the same line.

Displayed by browser:
Size 1 is the smallest text size.
Size 3 is the default standard text size.
Size 4 is larger.
Size 8 is the biggest.
Small and large fonts can be combined on the same line.

The background color of a web page is a property of its Body section container.
Example:
The beige color of this page was specified in its Body tag.
<body bgcolor=beige>

For some hands-on practice working with properties,
try Exercise 5 ("Properties") in Practical Exercises.

For a convenient, sorted list of the properties available with various containers, objects and breaks,
visit Don's Quick Reference to Properties of Containers, Objects, Breaks.

10. Anchors and Links

Anchor or Link container tags, redirect the browser to another location when the user clicks a pointing device over the text or image marked by the <a></a> tags. The target location is identified by the container's href property. To find another page within the same directory, a link needs to identify only the name and extension of the new location. For a more distant site, the link may need the full URL address.
Examples:
<a href="Exercises.html">Practical Exercises</a>
<a href="http://www.erols.com/jesterbear/stuff.html"> See some really neat stuff here!</a>

Displayed by browser:
Practical Exercises
See some really neat stuff here!

A link can also be used to redirect the browser to a named anchor on the same page or a named anchor on a distant site. This is done by assigning a name to the target anchor and attaching that name to the link's href property.
Target anchor location:
<a name="Links">10. Anchors and Links</a>

Links to target anchor:
<a href="#Links">Notes about Links</a>
<a href="Notes.html#Links">Notes about Links</a>
<a href="http://www.erols.com/jesterbear/DonsStuff/Notes.html#Links" >Notes about Links</a>

Displayed by browser:
Notes about Links
Notes about Links
Notes about Links

The first example above is a local link, used to reach the target from a source on the same page. The second will reach the target from another page within the same directory and the third from a more distant location.

For some hands-on practice with anchors and links,
try Exercise 11 ("Anchors and Links") in Practical Exercises.

11. Images

Artwork and photographs, stored in separate files, are inserted into a web page with the Image object. The src property identifies the source file of the image to be copied onto the page. Its size can be adjusted with the width and height properties. Unless the height or width properties are specified, the image will be displayed at its original size.

The alt property provides a label for the space where the image should appear. If the browser is unable to find the image file or for any reason unable to display the image, the label identifies the image that should have been displayed. The alt description of "box" will appear when you move your pointer onto the box image below.

Example:
<img src="box.jpg" alt="box" width=50>

Displayed by browser:

box

Caution!
It's usually best to set only one dimension, allowing the other dimension to adjust proportionaly up or down to fit. Setting both dimensions could distort the image. In the example above, only the width property was adjusted.

For some hands-on practice with images,
try Exercise 6 ("Images") in Practical Exercises.

12. Tables

A table arranges text and objects in rows and columns, assembled with the following containers:

<table> </table> Table container
<tr> </tr> Table row
<th> </th> Table header, optional
<td> </td> Table data

Each cell of a table is created by either a table header container or a table data container. The optional table header stores only text, displayed boldfaced and center-aligned within the cell. A table data container may contain text or any type of object, including other tables nested between its tags. Its contents can be aligned within the cell using the align property. Background color can be set with its bgcolor property.

Example:
<table align=left bgcolor=gold border=1>
<tr>
<th bgcolor=beige>Signal Color</th> <th bgcolor=beige>Signal Meaning</th>
</tr>
<tr>
<td align=center bgcolor=green>Green</td>
<td bgcolor=beige>Go</td>
</tr>
<td align=center bgcolor=yellow>Amber</td>
<td bgcolor=beige>Caution, light changing</td>
</tr>
<tr>
<td align=center bgcolor=red>Red</td>
<td bgcolor=beige>Stop</td>
</tr>
</table>

Displayed by browser:

Signal Color Signal Meaning
Green Go
Amber Caution, light changing
Red Stop

The following example uses a table to create three columns on a page, with another table nested inside the third column. A border was omitted from the outer table, because the table's border property was not used to set a border. Cellpadding and cellspacing, measured in picas, assigns more space between the columns and rows.
Example:
<table align=center cellpadding=3 cellspacing=3>
<tr>
<td><img src="signal.jpg"></td>
<td>Tables control how objects<br>
and text appear on a page,<br>
making highly complex<br>
displays possible.</td>
<td>
<table bgcolor=gold border=1>
<tr><th bgcolor=beige>Signal Color</th>
<th bgcolor=beige>Signal Meaning</th></tr>
<tr><td align=center bgcolor=green>Green</td>
<td bgcolor=beige>Go</td></tr>
<tr><td align=center bgcolor=yellow>Amber</td>
<td bgcolor=beige>Caution, light changing</td></tr>
<tr><td align=center bgcolor=red>Red</td>
<td bgcolor=beige>Stop</td></tr>
</table>
</td>
</tr>
</table>
Displayed by browser:
Tables control how objects
and text appear on a page,
making highly complex
displays possible.
Signal Color Signal Meaning
Green Go
Amber Caution, light changing
Red Stop

For some hands-on practice with tables,
try Exercise 7 ("Tables") in Practical Exercises.

13. Frames

Frames are often used to make sidebars, headers and footers appear on multiple pages without the need to repeat their code on each page. Sidebars, headers, footers and other components of such a page are stored in separate HTML files. A framing page assembles the components together within the frames of its Frameset section, replacing the Body section used by other HTML files.
Example:
<html><head>
<title>Don's Notes</title></head>
<frameset frameborder=yes cols="25%,*" bordercolor=gold>
<frame src="Sidebar.html">
<frame src="MyNotes.html">

<noframes>
<body bgcolor=beige>
<h3 align=center>Don's Notes</h3>
Click on <a href="notes2.html"> Continue </a>
for a frame-free alternative.
</body>
</noframes>

</frameset></html>

To see the example displayed on your browser, Click Here!

The above example arranges the frames containing Sidebar and MyNotes as two columns on the framing page. The cols property sets the frame for Sidebar to a column filling 25 percent of the page. An asterisk allows the MyNotes column to fill the rest of the page. Alternatively, I could have used the asterisk for the Sidebar column and "75%" for the MyNotes column, or stated the percentages for both columns.

Caution! Frames are not universally accepted by browsers.
In the example above, I provided alternative instructions inside a noframes container.
Whenever you use frames, always include a noframes alternative.

In the following example, the rows property was used to add a header and footer frame to the page. A second frameset, nested within a column of the first frameset, allows me to place the additional frames above and below MyNotes, leaving the entire left side of the page available to Sidebar.

Example:
<frameset frameborder=yes cols="25%,*" bordercolor=gold>
<frame src="Sidebar.html" name="frSidebar">
<frameset frameborder=yes rows="15%,*,13%" bordercolor=gold>
<frame src="MyHeader.html">
<frame src="MyNotes.html">
<frame src="MyFooter.html">
</frameset>
</frameset>

To see the example displayed on your browser, Click here!

A frame is an identifiable object and can be assigned a name property.
Example:
<frame src="MyNotes.html" name="frMain">
In the following example, a link in Sidebar uses its target property to change the src property in "frMain."
Example:
<html><head>
<title>Don's Sidebar</title>
</head>
<body bgcolor=gold>
<b><u>Index</u></b>
<ol>
<li><a href="MyNotes.html" target="frMain"> HTML Marker Tags</a>
<li><a href="MyNotes2.html" target="frMain"> Container Tags</a>
</ol>
</body></html> <p>
To return to the tutorial<br>
<a href="Notes.html#Frames" target="_top"> Click here!</a>

To see the example displayed on your browser, Click here!

Using "_top" as a target fills the entire browser window, eliminating the frame effect.

For some hands-on practice with frames,
try Exercise 12 ("Frames") in Practical Exercises.

14. Input Devices

Web pages that simply display information on browsers, with no interaction other than links to other pages, are referred as informational pages. HTML has a variety of input devices available to build interactive pages, capable of receiving and responding to data and commands from a person operating a browser, who is known as a client in web designer jargon.

Most input devices are marked with the input object tag and identified by the type property. Other input devices have their own unique object tags.

Textboxes provide the client with a fill-in-the blank space to enter data.

Example:
Please enter your name: <input type=text size=20 name="txtName">

Displayed by browser:
Please enter your name:

Buttons respond to the click of a mouse (or another pointing device). When the client's mouse clicks on the button, the button triggers a command to the browser, causing it to perform some sort of function. The value property of buttons identifies text to be displayed on the button.
Examples:
<input type=button value="Generic Command Button">
<input type=reset value="Cancel selection">
<input type=submit value="Add selection to shopping cart">

Displayed by browser:



Checkboxes and Radio buttons are turned on or off by the click of a mouse (or another pointing device) to indicate the client's selection. Radio buttons restrict a client to a single selection from a group (also known as an array) of radio buttons, while checkboxes may allow multiple selections.
Example:
Vehicle features:
<input type=checkbox name="ckSunRoof"> Sunroof
<input type=checkbox name="ckWideTires">Wide tires
<input type=checkbox name="ckCDPlayer">CD player
<br>
Color:
<input type=radio name="rColor" value="red" checked> Red
<input type=radio name="rColor" value="silver"> Silver
<input type=radio name="rColor" value="white"> White

Browser display:
Vehicle features: Sunroof Wide tires CD player
Color: Red Silver White

In the above examples, names were assigned to textboxes, checkboxes and radio buttons. The value properties of these objects are used to store data received from the client. Names provide a means of identifying the objects where the data is stored, so that forms and scripts (discussed later) can find this information and use it. Reset, Submit and generic buttons are not used to store data.

The checked property was used to make "red" the default value of the rColor radio buttons. A radio button or checkbox containing the checked property will automatically be checked when the browser opens the page.

Caution!
Be careful not to assign the checked property to more than one
radio button of an array (a group of objects with the same name).

For some hands-on practice with input devices,
try Exercise 8 ("Input Devices") in Practical Exercises.

15. Selection Lists

A selection list usually resembles a text box. It may have a default text or a blank space displayed inside. When the client clicks on an arrowhead button to the right of the space, a drop-down list of options appears. The value of each option is defined by the value property inside the option's tag. Text following the option tag is used to describe the option's value. This text appears in the drop-down list.

Selection of an option assigns its value to the selection list value property. The drop-down list disappears and the option's description appears in the selection list's text box.

Example:
<select name="selMonth">
<option value="">
<option value="Jan">January
<option value="Feb">February
<option value="Mar">March
</select>

Displayed by browser:

The first option provides the default value and description of the selection list. A value of "" (null) or 0 (zero) is often assigned to the first option to indicate the client did not make a selection. Option values can be numbers or text.

For some hands-on practice with selection lists,
try Exercise 9 ("Selection Lists") in Practical Exercises.

16. Text Area Containers

A text area box provides a comfortable input device for a client to record large amounts of text. It can also display a default value. Rather than using a value property inside the object tag, the default text appears between the text area's container tags. Everything between the tags is displayed in the text area box, including page breaks. The rows and cols properties define the size of the text area displayed, but do not limit the amount of text the client can record inside the box.
Example:
<textarea name="areaDirections" rows=10 cols=40>
Directions to your house
from the Silver Spring Metro:
</textarea>

Displayed by browser:

17. Forms

Individual input objects cannot independently transmit data across a network or interact with scripts. These capabilities are provided by a form, which may have several input objects stored between its container tags.
Example:
<form>
Name: <input type=text size=20 name="txtName"><br>
Address: <input type=text size=30 name="txtAddress"><br>
To do something...
<input type=button value="Click Here" onClick="DoSomething(this.form)"><br>
To clear form, click below.<br>
<input type=reset value="Clear">
</form>

Displayed by browser:

Name:
Address:
To do something...
To clear form, click below.
Enter a name and address in the text boxes above. Click on "Click Here." Then click on "Clear."

In the example above, the "Click Here" button calls the "DoSomething" function. "DoSomething" is a script stored elsewhere on the same web page. Using "this.form" as the argument sent to "DoSomething" gives the function access to all of the form's objects.

"Clear" is actually a reset button. Its value property was used to give it a label that seemed more appropriate for this particular form. A reset button tells the browser to reset the values of the form's input objects to their default values, whatever the text boxes contained before the client entered any data. In the example, the text boxes were originally empty. If the page designer had used the value property of "txtName" to fill the text box with a default text, that text would appear in "txtName" when the page was opened and everytime the reset button was clicked.

Writing scripts goes beyond the scope of this tutorial, but the "DoSomething" function below is a simple example of scripts used to provide web pages with functionality. Script functions are stored inside a script container. Several functions may be stored inside the same script container.

Example:
<script language=javascript>
function DoSomething(form){
strName = form.txtName.value;
strAddress = form.txtAddress.value;
strMessage = strName + " lives at " + strAddress;
alert(strMessage);
}
</script>
Tables are used to create neat, well-organized forms.
Example:
<form>
<table>
<tr>
<td align=right>Name: </td>
<td><input type=text size=20 name="txtName"></td>
</tr>
<tr>
<td align=right>Address: </td> <td><input type=text size=30 name="txtAddress"></td>
</tr>
<tr>
<td align=right>To do something...</td>
<td><input type=button value="Click Here" onClick="DoSomething(this.form)"></td>
<tr>
<td align=right>To clear form, </td>
<td>click below.</td>
</tr>
<tr>
<td></td> <td align=right> <input type=reset value="Clear"><td>
</tr>
</table>
</form>

Displayed by browser:

Name:
Address:
To do something...
To clear form, click below.
The Submit button signals the browser to transmit a form's data across a network to a distant web server, identified in the form container's action property.
Example:
<form action="http://RegistrationDesk.org/cgi-bin/register.cgi" method=post>
<table>
<tr>
<td align=right>Name: </td>
<td><input type=text size=20 name="txtName" ></td></tr>
<tr><td align=right>Address: </td>
<td><input type=text size=30 name="txtAddress" ></td>
</tr>
<tr>
<td align=right>To register now, click on </td>
<td><input type=submit value="Submit Form"></td></tr>
<tr><td align=right>To clear form, </td><td> click below.</td></tr>
<td></td><td><input type=reset value="Clear"></td>
</tr>
</table>
</form>

Displayed by browser:

Name:
Address:
To register now, click on
To clear form, click below.
Forms have two methods for transmitting data across networks: the get method and the post method.

Get is commonly to send parameter data to search engines. It appends the form data to the end of the search engine's URL address, then sends the information across the internet just like a request for an ordinary web page file. This method is simple and quick, but it can be used only for short strings of data (less than 256 characters) and does not provide encryption.

Post is better suited for complex forms, especially forms used to collect confidential information. Instead of appending form data to the destination URL address, the Post method transmits data in a message-like format allowing encryption. The maximum size of a posted data stream depends upon the the destination server, but typical servers are designed to handle massive data flows.

For some hands-on practice with forms,
try Exercise 10 ("Forms") in Practical Exercises.

18. Meta Tags

Most web sites use meta tags to attract the attention of search engines, which look for keywords and descriptions.
Example:
<meta name=keywords content="HTML tutorial, HTML reference">
<meta name=description content="Don's quick references & tutorial for HTML">
The name property identifies the type of information stored by the content property of the meta tag. Meta tags should be placed only within the Head section of a web page.

19. Advanced Web Page Design

These notes cover only the basics of the Hypertext Markup Language, sufficient for building attractive informational web pages. If you'd like to work on interactive sites, with multiple pages and e-commerce tools, you should look for information on the following subjects:
  1. Javascript, a script language popularly used to provide functionality for web pages
    (Don't confuse Javascript with Java; they're not the same language.)
  2. Cascading Style Sheets (CSS), used to control the appearance of multiple pages on your site while reducing the amount of code needed to do so
  3. File Transfer Protocol (FTP), for uploading web page files from your computer to a distant web server
    (You'll need an FTP client program to upload web pages from your computer to the web server.)
  4. Common Gateway Interface (CGI), the category of programs used by web servers to process data received from browsers
  5. Perl, a language used to write Common Gateway Interface programs for web servers
  6. Apache Server, a popular web server program
  7. Unix, an operating system, the platform of most web servers
Visit Don's Quick Reference to HTML Tags for a convenient, sorted list of the various Hypertext Markup Language tags. For a convenient, sorted list of the properties available with various containers, objects and breaks, visit Don's Quick Reference to Properties of Containers, Objects, Breaks.

Thanks for visiting Don's Notes About HTML.

Go to: Don's Main Menu