Read whichever of these you're interested in (still mostly short):
Read these when you're comfortable making simple pages:
HTML stands for HyperText Markup Language. It is the language used to describe the layout of a web page. It consists of tags that tell the browser how the page should be rendered.
The official HTML docuemntentation is kept at World Wide Web Consortium ("W3C"), which is the central research organization that defines standards used on the Web.
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 graphical editor like FrontPage 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.
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" ... >
Some tags, like <img>, stand by themselves; they don't really affect things around them. Other tags have a starting tag and an 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, unlike start tags, have no attributes.
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 Microsoft Web site.
Click to visit <a href="http://www.microsft.com/">Microsoft Web Site</a>.
This is rendered as:
Click to visit Microsoft Web Site.
Note that the attribute href has the value "http://www.microsft.com/", which is the URL (Web page address) to go to when the user clicks on this link.
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).
For an email link, set href to "mailto:email-address". For example,
is rendered asTell <a href="mailto:president@whitehouse.gov">the President</a> what you think.
Tell the Instructor what you think.
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
which is rendered asRead about <a href="http://mysite/index.htm#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,
is rendered as<a href="#toc">Back to Table of Contents</a>
Back to Table of Contents
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 (caption) of the browser window.
So a simple "hello, world" HTML file, with title, would be
<html> <head> <title>Test Page</title> </head> <body> <h1>Test Page</h1> Hello, world. </body> </html>
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.
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. |
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:This is an unordered list:
- First item
- Second item
- Third item
- 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,
will be rendered as: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).
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.
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.
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.
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
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:
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.
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).
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 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.
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:
The <form> tag has:
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:
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 and password fields have the following optional attributes:
checkbox and radio fields have the following optional attributes:
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">
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:
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>
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>
You can set the color of several things in HTML, by setting color attributes in certain tags:
Color attribute values take one of the following forms:
For example, the <body> tag used in this document is
except the background color isn't really olive.<body bgcolor=olive link="#0000FF" vlink="#007090" alink="#00A0FF">
Frames have become standard part of HTML.
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.
Contained between <frameset> and </frameset> can be:
Frames may become part of standard HTML someday, once the complexities they introduce are ironed out.
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, ">" means the greater-than symbol, "<" means the less-than symbol, """ means double-quotes, and "&" means the amperand itself. For example, the line
To display the < character, use the sequence &lt;.
will be rendered as
To display the < character, use the sequence <.
Use this method to put non-typable characters in your pages; for example, "©" shows the copyright symbol ©. Here's a list of special characters, with accented letters first, followed by non-alphabetic symbols.
Unlike tag names, these character names are case-sensitive, so ">" 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).
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.
Send feedback to <a href="mailto:myname@myhost.com">me</a>.
<img src="bluebar.gif" alt="blue bar" width=500 height=5>