HTML Made Really Easy

Home > Web Technology Made Really Easy > HTML Made Really Easy

Donate

En español (in Spanish), as translated by René Alvarez.

HTML is very easy to use; it was designed that way. You don't have to be a programmer to use it. If you can edit a text file, then you can write HTML (and if you can write email, you can edit a text file). If you tried to learn before and couldn't, then someone wasn't telling you the right things.

This tutorial will explain the structure of HTML quickly and clearly, and show you through examples the practical things you need to know, so you can be making your own pages soon (like, this afternoon). The whole tutorial is about 14 printed pages, but you only need the first four or so to be off and running.

In this tutorial, you'll create small pages and view them. There aren't really any "required" exercises, but you should play with new concepts until you're comfortable with them. If your browser supports frames, fire up this HTML Test Bed (non-frames version), where you can type HTML in one frame and see the resulting page in another. Resize the input and output frames/windows for best viewing.

If your browser doesn't support frames, or when you're making real pages, you'll want a real text editor. Start up TeachText on the Mac, pico in Unix, or Notepad in Windows, or a better one if you have it (here's a directory of text editors at Yahoo). Give your HTML files names ending in ".html" (or ".htm"). Use your browser to view the HTML files you create, with the menu command "File/Open File" or something similar; use the "Reload" function after each change.

OK, Ready?

Read these sections to get a solid grounding in HTML (none longer than a page, including examples):

• What is HTML?
• Anatomy of a Web Page
• Anatomy of an HTML Tag
• Container Tags (including the cool part)
• More About Links
  • Picture links
  • Email links
  • Linking to the middle of a page
• Anatomy of an HTML File
• Line Breaks and White Space
• A Few More Useful Tags

Read whichever of these you're interested in (still mostly short):

• Numbered or Bulleted Lists
• Comments
• Tables
• Forms
• Color
• Frames
• Special Characters Like "<" and ">"

Read these when you're comfortable making simple pages:

• An Important Note about HTML
• Tips for Making Better Web Pages

And finally, the end of the page has some useful links.

What is HTML?

Although HTML stands for HyperText Markup Language, it's not really a programming language like Java, Perl, C, or BASIC-- it's much simpler. It's a way of describing how a set of text and images should be displayed to the viewer, similar in concept to a newspaper editor's markup symbols.

Back to Table of Contents

Anatomy of a Web Page

A Web page consists of an HTML file, plus any image (picture) files used on the page. The HTML file (a normal text file) contains all the text to display, and also acts as the "glue" to hold the text and images together in the right places, and display them in the right style.

Writing an HTML file means composing the text you want to display, then inserting any tags you want in the right places. Tags begin with a < character and end with a > character, and tell a browser to do something special, like show text in italic or bold, or in a larger font, or to show an image, or to make a link to another Web page. Although HTML has many tags you can use, you don't need to know them all to use HTML-- you can get by with just a handful.

One great thing about learning HTML is that you can see how everyone else has done it, by looking at their source code. You can see the HTML source of any page you're viewing. Try it now: In Netscape, use the menu command "View/Document Source". Other graphical browsers have a similar menu item, maybe under "File/" or "Edit/". In Lynx, the backslash key toggles the source code view on and off.

View lots of source code. View the source code of any page that makes you wonder how they did something. Everyone who uses HTML has learned it by reading other people's HTML code-- the Internet is a big, mutual-learning community thing.

You don't need an "HTML editor" program to write HTML. Some people like to use them, and that's fine, but many pros and beginners prefer to use a plain text editor and insert the tags themselves, as we're doing here. To each their own.

Back to Table of Contents

Anatomy of an HTML Tag

Tags have a simple structure. They begin with a < character, and end with a > character. Between the <> characters are the tag name, and maybe some attributes, depending on the tag. Most attributes take a value too. Some attributes are required, and some are optional. The general form of a tag is

<tagname attribute1="value1" attribute2="value2" ... >

Tag names and attribute names are not case-sensitive, but some attribute values are. The tag name must come first, but the order of the attributes doesn't matter. So you could also write this tag as:

<TAGNAME ATTRIBUTE2="value2" ATTRIBUTE1="value1" ... >

Different people write them different ways; do whatever you're most comfortable with.

There are many different tags to do many different things. For example, use the <img> tag to show an image on your Web page:

<img src="blueribbon.gif">

This means "show the picture blueribbon.gif at this place on the page." Note that the src attribute gives the URL of the image file, either a relative or absolute URL. The above example using an absolute URL would be:

<img src="http://www.jmarshall.com/easy/html/blueribbon.gif">

Back to Table of Contents

Container Tags

Some tags, like <img>, stand by themselves; they don't really affect things around them. Other tags have a starting tag and a ending tag, and affect everything in between them (even other tags). These are called container tags, because they contain stuff between the start and end tags. For example, to make text bold, you need to mark where the bold text starts, and where it returns to normal. Do this with <b> and </b>, like:

This is normal text.  <b>This is bold text.</b>  Normal again.

This is rendered as:

This is normal text. This is bold text. Normal again.

Every container tag ends with </tagname>, whatever that tag name is. In the example here, the <b> (bold) tag ends with </b>. End tags have no attributes, unlike start tags.

Here's the cool part:

The tag that makes the Web what it is, a whole bunch of interlinked pages, is the <a> tag. The <a> tag is a container tag that defines a link to another page, and it's easy to use. By way of example, here's how you make a link to EFF's Blue Ribbon page:

Read about <a href="http://www.eff.org/blueribbon.html">issues that affect you</a>.

This is rendered as:

Read about issues that affect you.

Note that there's a start tag (<a href="http://www.eff.org/blueribbon.html">) and an end tag (</a>), and that everything in between ("issues that affect you") is rendered as the link the user can click on-- typically blue and underlined, in Netscape.

Note that the attribute href has the value "http://www.eff.org/blueribbon.html", which is the URL (Web page address) to go to when the user clicks on this link. For more info and help with HTTP URL's, try one of these pages.

That's how to use the <a> tag to put links in your Web page. Simple, eh?

Back to Table of Contents

More About Links

Picture links

You can put an <img> between <a> and </a>, so the user can click on the picture to follow the link. For an example, see the blue ribbon at the top of this page-- it's a link to another page (one that everyone should visit at least once).

Email links

For an email link, set href to "mailto:email-address". For example,

Tell <a href="mailto:president@whitehouse.gov">the President</a> what you think.

Tell the President what you think.

(The U.S. President, that is.)

Linking to the middle of a page

To link to another part of the same page, or to the middle of another page, first create a named anchor at the point you want to link to. Do this with the <a> tag and the name attribute, like

<a name="anchorname"></a>

Note the different use of the <a> tag; in fact, <a> was originally short for "anchor". Since the anchor just marks a point on the page, you don't need to put anything between <a> and </a>.

Once the anchor exists at the target location, link to it with the <a href> tag, appending "#anchorname" (the URL fragment) to the target URL, like

Read about <a href="http://www.jmarshall.com/easy/html/#lists">HTML lists</a>.

Read about HTML lists.

To point somewhere else on the same page, leave out the rest of the URL altogether. For example,

<a href="#toc">Back to Table of Contents</a>

Back to Table of Contents

Anatomy of an HTML File

Now that you understand what tags and container tags are, here's how to make an HTML file the right way: identify your file as an HTML file by enclosing the entire thing in the <html> container tag-- in other words, stick an <html> start tag at the top of your file and an </html> end tag at the bottom.

Technically, the <html> tag can only contain two things: a <head> container tag, and a <body> container tag. Inside the <body> tag is where you put your whole page. All displayed text, images, hyperlinks, and so on, are contained between the <body> and </body> tags.

The optional <head> section, placed before the <body> section, lets you store certain information about the document itself. When the <head> section even exists at all, it might contain only the <title> container tag, which says what to display in the title of the browser window, above the menu bar (if you have a graphical browser). For example, this page has a title of "HTML Made Really Easy".

So a simple "hello, world" HTML file, with title, would be

<html>

<head>
<title>Hello, world</title>
</head>

<body>
Hello, world.
</body>

</html>

If you don't want a title, leave out the lines beginning with <head>, <title>, and </head>.

If this is confusing, don't worry. Just stick the text <html><body> at the beginning of your file and </body></html> at the end, and it will magically become a legitimate HTML file.

Back to Table of Contents

Line Breaks and White Space

You can add as many spaces or blank lines (collectively called "whitespace") as you want to make your HTML file easier to read. The browser will display all consecutive whitespace as a single space, no matter how much of it there is. This tutorial uses one indentation style for examples, but use whatever style works for you and is easy to read.

To start a new paragraph, use the <p> tag-- you'll use this a lot. The browser will word-wrap all text correctly, based on the width of the viewer's window (which you, the HTML author, can't predict). If you really want to force a new line, like in a street address, use the <br> tag to insert a line break.

You can already write Web pages with what you know-- you can even show images and make hyperlinks. Try it; you'll see it really works. Make a simple page and view it in your browser.

Back to Table of Contents

A Few More Useful Tags

Try these out:

<i> </i>	Make the text italic.
<tt> </tt>	Make the text teletype (fixed width).
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>	Show different styles of "header" text, in descending order of importance (size). For example, the "HTML Made Really Easy" at the top of this page uses <h1>, and the "A Few More Useful Tags" just above uses <h2>.
<hr>	Put a "horizontal rule" (line) in the page, like just above the title "A Few More Useful Tags", above.
<center> </center>	Centers text and images between the left and right margins.
<blockquote> </blockquote>	Indent the enclosed text from both margins. Used for most examples in this document.
<pre> </pre>	Denotes "preformatted" text in source code: display as fixed-width font, and preserve spaces and line breaks (much like a typewriter). Quick way to make margins and tab stops. Convenient to quote a section of source code, so is used for many examples in this document.

Back to Table of Contents

Numbered or Bulleted Lists

HTML provides a simple way to show numbered lists ("ordered lists") or bullet lists ("unordered lists"). Use the container tags <ol> and <ul> to make ordered lists and unordered lists, respectively. Inside the container tags, use the <li> tag to denote the start of a list item.

For example, the HTML code

This is an ordered list:
<ol>
<li>First item
<li>Second item
<li>Third item
</ol>

This is an unordered list:
<ul>
<li>First item
<li>Second item
<li>Third item
</ul>

will be rendered as

This is an ordered list:

1. First item
2. Second item
3. Third item

This is an unordered list:

• First item
• Second item
• Third item

Inside the list items, you can put whatever you want-- links, images, tables (more on those later), or even other lists. Nested lists are actually quite common, useful for outlines or cascading menus.

Less common, but still useful, are "definition lists", which contain an alternating set of terms and definitions. Enclose the entire list in the <dl> container tag, and use <dt> and <dd> to denote the start of terms and definitions, respectively. For example,

Here's a definition list:
<dl>
<dt>Term 1
<dd>Definition of Term 1
<dt>Term 2
<dd>Definition of Term 2
</dl>

Here's a definition list:

Term 1

Definition of Term 1

Term 2

Definition of Term 2

Be sure to end your lists with </ol>, </ul>, and </dl>, or the rest of your page will show up as part of the final list item (if at all).

Back to Table of Contents

Comments

You can put comments in your HTML file that won't display on the Web page. This lets you explain why your HTML code is a certain way, to anyone viewing your HTML source code. This may be someone else, or (more likely) it may be you at some point in the future.

Start a comment with "<!--" and end it with "-->", like

<!-- This is a comment, and won't display to the user -->
<!-- comment examples inserted by JSM on 9-23-96, for clarity -->

Don't put private information in comments, as anyone viewing the source code can still see them. Also, don't put HTML tags inside your comments, since most browsers will think the comment ends with the first ">" character.

Back to Table of Contents

Tables

HTML tables let you show arrays of data cells, like in the section A Few More Useful Tags, above. They also let you right-align text, or make columns of text line up like tab stops. They're not hard to use, once you know clearly what you want to display in each cell. The "standard definition" of HTML tables has changed a few times, but is pretty stable now; this section will show you how to make tables that almost every browser will display correctly.

1. Tables are defined with the <table> container tag.
2. The <table> tag contains rows of cells, defined with the <tr> container tag.
3. Each <tr> tag contains data cells, defined with the <td> container tag.
4. Each data cell contains whatever you want-- links, images, lists, or even other tables.

Rows are defined from top to bottom, and cells are defined from left to right. If you want lines to show up between the table cells, use the border attribute in the <table> tag. (Remember how attributes in HTML tags work? You'll be using a few attributes in this section.)

For example, the HTML code

<table border>
<tr>
    <td>northwest</td>
    <td>northeast</td>
</tr>
<tr>
    <td>southwest</td>
    <td>southeast</td>
</tr>
</table>

will be rendered as:

northwest	northeast
southwest	southeast

Most browsers don't require the ending </tr> or </td> tags; they assume one cell or row ends when the next one begins. So you might see tables written without those end tags (though the </table> end tag is still required). Note: As of October 1996, this may cause trouble with nested tables, due to a browser bug.

Cells that Span Multiple Columns or Rows

Sometimes, you may want one cell to span more than one column across, or more than one row deep. In these cases, use the colspan and rowspan attributes of the <td> tag. Then, just skip defining the cells that the large cell would overlay. For example,

<table border>
<tr>
    <td rowspan=2>west</td>
    <td>northeast</td>
</tr>
<tr>
    <!-- Don't define "southwest", since it's overlaid by "west" -->
    <td>southeast</td>
</tr>
</table>

will be rendered as:

west	northeast
	southeast

Aligning Cell Contents Within the Cells

Usually, all cell contents are left-justified and vertically centered by default. To set the horizontal or vertical placement within the <td> tag, use the align and valign attributes, respectively:

• align can be left, right, or center.
• valign can be top, middle, bottom, or baseline (aligned to baseline of the text).

For example, this borderless grocery receipt lines up the prices on the right margin:

<table>
<tr>
    <td>laundry detergent</td>
    <td align=right>$4.99</td>
</tr>
<tr>
    <td>cat food</td>
    <td align=right>$128.00</td>
</tr>
</table>

It will be rendered as:

laundry detergent	$4.99
cat food	$128.00

You can also use the align and valign attributes in the <tr> tag, to affect all cells in that row.

Other Useful Table Stuff

Normally, the browser will figure out an appropriate size for the table, and for the cells within the table, based on the browser size and the cell contents. If you want to suggest specific widths for the table or for the cells, use the width attribute in the <table> and <td> tags. Use either a percentage of browser or table width, like <td width="20%"> (usually preferred), or an absolute pixel value like <td width=138> (useful to make an image fit exactly within a table cell).

If you want more details, Netscape has a good summary of table-related tags and their attributes, and a good collection of sample tables. These documents are slightly obsolete compared to the latest HTML standard, but are plenty up-to-date for most tables on the Web today.

Back to Table of Contents

Forms

You've probably seen fill-out forms on the Web, used for search engines, online surveys, and so forth. You fill in your data, submit the form by pressing a submit button, and the data is sent to a CGI script on a Web server somewhere. Forms, like everything else in HTML, are defined with a small set of tags. These tags simple define all the form elements, like input fields or buttons. The harder part is writing the CGI script to handle the form input; that's a topic for another tutorial.

Forms start with the <form> tag and end with the </form> tag. In the form, you can still put any HTML code you want, but you can also use these tags to define input fields:

• <input> defines text entry fields, checkboxes, radio buttons, or pushbuttons.
• <select> defines dropdown menus and selection boxes.
• <textarea> defines multi-line text-entry fields.

The <form> tag has:

• an action attribute, which is the URL of the CGI script to send the form data to, and
• a method attribute, which is the HTTP method used to submit the form data (either get or post will work-- coordinate this with your CGI script).

So a typical <form> tag is:

<form action="http://www.myhost.com/mypath/myscript.cgi" method=post>

Every input field in a form has a name, defined by the name attribute of the <input>, <select>, or <textarea> tag. Every input field also has a value, which the user sets by typing in it or clicking on it. The entire set of form data is represented as a set of these name-value pairs when it is submitted to the CGI script.

Empty text fields are sent as name-value pairs with a value of an empty string, but checkboxes and radio buttons that aren't checked are not sent at all.

To test your form, you can call simple scripts at NCSA that tell you what name-value pairs were submitted. To do this, set the action attribute to the following:

• For get submissions: http://hoohoo.ncsa.uiuc.edu/cgi-bin/query
• For post submissions: http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query

The <input> Tag

Use the <input> tag to create most form fields, as well as submit and reset buttons. It has a varying set of attributes depending on the type attribute, which can be any of:

• text-- a normal text entry field (default)
• password-- identical to text, but the user's typing is not displayed
• checkbox-- a checkbox (for simple on/off values)
• radio-- a radio button (for choosing one of several choices)
• submit-- a button that submits the form data, when user input is done
• reset-- a button that resets all form fields to their initial values
• image-- like submit, but shows an image as the button
• hidden-- lets you define extra name-value pairs to be sent to the CGI script, but not displayed

text and password fields have the following optional attributes:

• value sets a default value for the field
• size sets the displayed length of the field
• maxlength sets the max amount of data that can be entered

checkbox and radio fields have the following optional attributes:

• value is the value the field has when checked; the default is the word "on"
• checked (no value needed) means it's checked by default

submit and reset fields use the optional value attribute as the label on the button.

The image field requires a src attribute with the URL of the image to use, and it supports most attributes the <img> tag does.

The hidden field uses the name and value attributes to define a name-value pair. Use it to send data to the CGI script that the user doesn't need to know. Don't use it for secret data, since the user can always view the source code.

To create a set of radio buttons, give them all the same name but different values. Only the selected value will be sent to the server when the form is submitted.

Usually, you'll have text before or after text, password, checkbox, and radio fields, to label them for the user. No label is shown automatically.

The submit and image fields can actually have a name attribute, to send info about how the form was submitted. If you have multiple submit buttons, your CGI script can distinguish them by their different names or values (only the submit button you click is sent as a name-value pair). If an image field has a name attribute of (let's say) "foo", then the x-y location of the mouse click on the button is sent as two integer fields, with names of "foo.x" and "foo.y". This effectively allows an imagemap with an image button.

Examples of <input> fields, in the same order as listed above, are:

State: <input type=text name="state" value="CA" size=2 maxlength=2>
Password: <input type=password name="password">
<input type=checkbox name="moreinfo" value="yes" checked>Send me more info.

Select your gender below:
<br><input type=radio name="gender" value="F">Female
<br><input type=radio name="gender" value="M">Male
<br><input type=radio name="gender" value="O">Other

<input type=submit value="  OK, let 'er rip!  ">
<input type=reset value=" Whoops-- erase that ">
<input type=image src="/images/gobutton.gif" width=60 height=30>
<input type=hidden name="totalsofar" value="1290.65">

The <select> Tag

Use the <select> container tag to create dropdown menus and scrolled lists. Between <select> and </select> you can only have <option> tags and their text, which define the items in the list.

The <select> tag has a name attribute, like every input field. Other optional attributes:

• size is the displayed height of the list. If it's 1 (or omitted), the list is a dropdown menu; otherwise, it's a scrolled list.
• multiple (no value) lets the user select multiple items from the list (usually with ctrl-click or shift-click). Each selected item will be sent as a name-value pair to the CGI script.

An <option> tag can have a value attribute, which is what's sent to the CGI script if that item is selected. If there's no value attribute, the value sent is the text following the <option> tag.

To make an item selected by default, use the selected attribute in the <option> tag.

An example of a <select> dropdown list is:

Choose your favorite color: 
<select name="favecolor">
<option>green
<option>aquamarine
<option selected>emerald
<option>turquoise
<option>aqua
<option value="green2">green
<option value="green3">green
</select>

The <textarea> Tag

Use the <textarea> container tag to create multi-line, scrollable, text entry boxes. Whatever's between the <textarea> and </textarea> tags will be the initial contents of the entry box, so put them right next to each other if you don't want initial contents.

The <textarea> tag has a name attribute, like every input field. Use the rows and cols attributes to set the displayed height and width of the text area. Note that the text area scrolls as much as needed, so you're only setting the display size, not the data size.

An example of a <textarea> entry field is:

<textarea name="stuff" rows=10 cols=60>Enter stuff here</textarea>

Other Form Stuff

Try making a few forms to see how they look. You don't need a CGI script just to view them in your browser.

NCSA has a few examples near the end of this forms page (page up once or twice from the bottom). The page itself is old but still accurate; they claim it's for their browser only (Mosaic for X-Windows), but the information is accurate for all browsers and forms.

Back to Table of Contents

Color

You can set the color of several things in HTML, by setting color attributes in certain tags:

• In the <body> tag, the bgcolor, text, link, vlink, and alink attributes define the colors for the page background, text, unvisited links, visited links, and active links (i.e. the moment the link is being clicked on).
• To change text color for part of a page, use the <font> container tag with a color attribute.
• For tables, some browsers support the bgcolor (background color) attribute in the <table>, <tr>, <th>, and <td> tags.

Color attribute values take one of the following forms:

• "#RRGGBB", where RR, GG, and BB are the red, green, and blue components of the color, in hex, ranging from 00 to FF. Confused? Then stick with the next method:
• One of sixteen "widely understood color names": aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)

For example, the <body> tag used in this document is

<body bgcolor=olive link="#0000FF" vlink="#007090" alink="#00A0FF">

Don't rely on color for important things, since some browsers can't display it.

Besides the sixteen standard color names above, Netscape supports lots of other color names, from firebrick to mediumspringgreen. Here's a list of Netscape color names, part of Sam Kington's excellent HTML Primer. Of course, these only display correctly in Netscape browsers-- use #RRGGBB color codes to reach the largest audience.

Back to Table of Contents

Frames

Frames are not part of standard HTML. They are an extension to HTML that Netscape created. They don't work in all browsers, so you limit your audience by using them. I'll describe the general approach here, but Netscape has a page with all the details.

Basically, you create a normal HTML file for each frame, plus a special HTML file (the "frame document") to hold them all together. This frame document has the <frameset> container tag in place of the <body> tag. The <frameset> tag splits the main browser window into multiple rows or columns. It contains either the rows or cols attribute, which is a comma-separated list of sizes, either in pixels or percentages of the total window width. For example, <frameset cols="10%,80%,10%"> splits the window into three columns: narrow left and right margins, and a wide central page. (See Netscape's page for more details.)

Contained between <frameset> and </frameset> can be:

• <frame> tags, whose src attributes name the URLs to show in those columns or rows;
• other <frameset> tags to further split the columns or rows into more rows or columns; or
• <noframes> </noframes> to define a page for browsers that don't support frames (always wise to use).

Frames may become part of standard HTML someday, once the complexities they introduce are ironed out. For the official word on frames and the HTML standard, see the section "Next Steps" on this page at W3C.

Back to Table of Contents

Special Characters Like "<" and ">"

How do you display the "<" and ">" characters? If you just type them in your HTML file, the browser will think you're starting or ending a tag. You've got to escape the characters, as it's called, by typing special sequences of characters in their place. When displaying your page, the browser translates the sequences back into the characters you need.

All special character sequences start with "&" (ampersand) and end with ";" (semicolon), and in between is the name of the special character. For example, "&gt;" means the greater-than symbol, "&lt;" means the less-than symbol, "&quot;" means double-quotes, and "&amp;" means the amperand itself. For example, the line

To display the < character, use the sequence <.

will be rendered as

To display the < character, use the sequence &lt;.

Use this method to put non-typable characters in your pages; for example, "&copy;" shows the copyright symbol ©. Here's a list of special characters, called character entity references. (Unfortunately, this doesn't display the characters like the old reference at Sandia did.)

Unlike tag names, character entity references are case-sensitive, so "&GT;" does not display the greater-than symbol.

You need to escape every "<" or ">", but not every ampersand, etc. These codes are just there when you need them, i.e. when your page doesn't display right without them (and you should be visually checking every page you make).

Back to Table of Contents

An Important Note about HTML

A Web page may be displayed on a wide variety of devices-- graphical browsers, text-only browsers, text-to-speech or braille devices, or other devices no one's invented yet. Even graphical browsers vary a lot, since the user can resize the window at will, or set their own colors or fonts. Accordingly, HTML gives great leeway to the browser to decide how to display a page, and surprisingly little control to the HTML author.

Technically, HTML is a way of describing what kind of data you're displaying, not explicitly how it should be displayed. For example, the <h1> tag says "This is a primary section header"; it doesn't really say "Show this in a big font, and bold, and centered". The browser decides how to display it. In fact, the browser makes the final decision how to display everything; all HTML tags are only suggestions.

This lack of control takes some getting used to, but it's the nature of the Web. Remember, there's no way to know the size and capabilities of the browsers that will display your page. Just try to write HTML so your pages don't rely on a particular layout (which will certainly vary from user to user). Otherwise, tables and layouts that look great on your screen may look terrible on someone else's (always worth checking anyway). If possible, don't rely on the browser showing images-- use the alt attribute of the <img> tag to define alternate text to show, for browsers that can't show the image. If you write flexible HTML, any good browser will display your page acceptably.

These days, HTML does have tags that say explicitly how to display something, rather than just describe what kind of data it is. Examples are the commonly used <b> and <i> tags. These are actually a slight deviation from the original aim of HTML, because of their explicitness. Purists sometimes use the <strong> and <em> tags, for strong and emphasized text, rather than <b> and <i>. You can use whatever you want.

Back to Table of Contents

Tips for Making Better Web Pages

1. Get feedback by making a link with your email address, and listen to the feedback. This will lead to more improvements than anything else. For example,

   Send feedback to <a href="mailto:myname@myhost.com">me</a>.

2. Look at your page in a variety of browsers, or at least in different size windows.
3. Ask a friend to browse your pages and comment on them.
4. Don't rely on things that don't work in all browsers, like color. Use such features if you like, but make sure your page is still useful on browsers that don't support them.
5. If you make a site of several related pages, allow intuitive navigation among them.
6. When using the <img> tag, include the alt, width, and height attributes. The alt attribute defines text to show to non-graphical users, and the width and height attributes give the size of the image, in pixels. This lets a browser display the rest of the page without waiting for the image to download, making life a lot better for the user. For example,

       <img src="bluebar.gif" alt="blue bar" width=500 height=5>
       

7. Write HTML source code that is easy to read. You'll have to edit it at some point, and other people might have to also. Messy source code is hard to work with, and increases the chance of errors. Make it easy on everyone, by writing clear source code.
8. Read other people's (conflicting) opinions in the various style guides within this Yahoo directory. In the end, don't be afraid to form your own opinions and create your own style. Do what looks good. Do what fits any other criteria you have (easy to use, informative, fun, attractive, etc.).

Back to Table of Contents

Fini (and some links)

OK, you know plenty of HTML to make Web pages. Go make a page or two. Go teach someone else how to do it. HTML has other useful tags you can play with, but you don't have to. In fact, the only tags used in the making of this page have been described here.

Here's a good, though somewhat technical, list of all HTML tags that is part of Sandia's larger HTML Reference Manual-- ignore the parts that are Sandia-specific. Note: This site no longer exists, unfortunately. :-( When I find another good reference of HTML tags, I'll put a link here.

Here's a really great (and official) summary of HTML 3.2 features at the World Wide Web Consortium ("W3C"), which is the central research organization that defines standards used on the Web.

Back to Table of Contents

Last (significantly) Modified: April 23, 1998

http://www.jmarshall.com/easy/html/