You are on page 1of 28

HTML Writing Guide

Jerry Stratton
http://www.hoboes.com/NetLife/Web_Writing/
January 16, 2006
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free
Documentation License, Version 1.1; with no Invariant Section, with no Front-Cover Text, and with no
Back-Cover Texts. A copy of the license is included in the section entitled “GNU Free Documentation
License”

HTML is the language of web browsers. Using HTML, you describe what you want your
document to look like on the reader’s web browser. Unlike normal desktop publishing, with
HTML you only work in generalities, if you know what you’re doing. Rather than
specifying exactly what your document looks like, you specify which parts of the document
are important, and in what way they’re important. The reader’s browser then takes that
information and creates a web page, regardless of whether that browser is a graphical
browser on Windows, a text-based browser on Unix, or a voice reader for the blind.
When writing HTML, you surround various parts of the text with descriptions of what added
meaning you want the text to convey. For example, if you want a word to be emphasized,
you surround that word with the ‘emphasis’ HTML code. Almost all HTML ‘markup’ is
done by surrounding the words with the code that affects it. The beginning tag is always a
word, such as “em”, surrounded by the greater than and less than symbol: <em>. The ending
tag is the same thing, but with a slash added: </em>.

2 Head

The Most Basic Web Document
You need to surround your entire web document with the ‘html’ tag:
<html> to begin and </html> to end.
You need to surround the top of the document, or document information
with the ‘head’ tag: <head> and </head>.
You need to surround the ‘body’ or meat of the document with the ‘body’
tag: <body> and </body>.
It’ll look like:
<html>
<head>
document information
</head>
<body>
the main part of the document
</body>
</html>

The tag for your keywords is <meta name="keywords" value="keyword1. Title The title of the document is used to bookmark your web page if the reader wants to keep a bookmark of it. "> and the tag for the description is <meta name="description" value="This is a summary of my document. keyword3. You’ll want to give the title of your document. It’s for the browser software. the keywords that are important in your document. Meta tags stand on their own: you don’t specify an ending for a meta tag. and the description that summarizes your document. this is the title of your document in their index. If a ‘web spider’ such as Alta Vista indexes your document. It is cool. etc."> Sample <head> <title>A Web Writing Guide: Marking Text</title> <meta name="keywords" value="Web." /> </head> . You make some text your title by surrounding it with the <title> and </title> tag. It is also the text that appears in the window bar of graphical web browsers. This is information about the document itself. not for the human reading the page. using basic HTML markup code. keyword2. Keywords and Descriptions There are two ‘meta’ tags that set your document’s keywords and description. HTML" /> <meta name="description" value="A guide to creating web documents by hand. You should keep it reasonably short and descriptive.3 Head Putting text in HTML documents Head The ‘head’ is where document information goes.

but many changes always affect entire paragraphs. Paragraph Tags Paragraph tags affect entire paragraphs of text. HTML ignores whatever carriage returns you put into the document. This is true. when you start using such attributes you are trying to set a style for your web pages. They modify how the text affected by that tag appear on the screen. you will want to avoid such attributes in favor of cascading style sheets. you will want to center your paragraphs or align them to the right: <p align="right">This is a right-aligned paragraph. Marking paragraphs Otherwise normal paragraphs need to be marked with the <p> tag. good web browsers will only display one space.</p> You might notice that the “align” attribute does not specify meaning. It usually looks ugly. It also ignores any multiple spaces or tabs: no matter how many spaces you put between two words or at the beginning of a line. . Style sheets let you do that much more easily. Since it describes physical layout it will be ignored where that layout makes no sense. If you mean for ‘layout’ changes such as ‘align’ to convey meaning.)</p> <p align="center">This is a centered paragraph. that meaning will be lost under certain circumstances. Often. The HTML code: <p>This is an HTML paragraph. But that’s a topic for another tutorial.4 Body Body The body is where the meat of the document goes. Please read carefully. Attributes are things that appear inside of tags. You can modify your paragraph tag with the align attribute. In general. it replaces them with a space. it specifies layout.</p> Will end up looking like: This is an HTML paragraph. All of the information that you’re giving to the reader goes in the body. and for this reason you need to be careful using it. some changes can be made to individual letters. Please read carefully. by default. (Most of them are. Usually. If necessary.</p> <p align="left">This is a left-aligned paragraph. Very much like in your word processor.

you’ll often want to set it off from the rest of the text. Heading tags mean that the marked text is the headline for the following text. Scooob. For example.--<cite>Doug Shaw</cite> </blockquote> will produce: “Hey. But I think you can probably guess what they do by looking at the text they produce! . For example: <h1>This is level 1</h1> <h2>This is level 2</h2> <h3>This is level 3</h3> <h4>This is level 4</h4> The above html code produces something like: This is level 1 This is level 2 This is level 3 This is level 4 You should not use heading tags just to make large text. The headline tag is <h#>. <blockquote> &ldquo.”--Doug Shaw We’ll be getting to that cite thing and what those ‘&’ things are. for example.&rdquo.s just hide from our droogies in this creepy old cellar. You can align your headlines in the same way that you align your paragraphs: <h1 align="right">. let’s not risk our lives going upstairs to viddie ghosts doing the old in out in out.5 Body Marking headlines You have a number of ‘headline levels’ to work with. Use the <blockquote> tag.s not risk our lives going upstairs to viddie ghosts doing the old in out in out. Let’s just hide from our droogies in this creepy old cellar.Hey. replacing the ‘#’ with the heading level you want. The highest level headline—which produces the largest text—is level 1. Let&rsquo. later on. let&rsquo. You can currently use up to level 6. Use the <font> tag to increase text size in non- headlines if you absolutely must. Scooob. Marking quotes When you make a quote.

Becomes: “But I don’t want a cookie. you’ll need to use the <pre> tag. and spaces. tabs. Be careful doing this: it is usually better (if you have the time) to convert your text-only documents to web documents. They refer to the source of something that you’re quoting or attributing. and pray make it improbable. and multiple carriage returns to keep its formatting.</strong> Here it is.6 Body Pre-formatted text Web browsers ignore your carriage returns and format your text according to the size of the reader’s screen. <strong>Algernon. in a small room.t <em>want</em> a cookie. (Hands cigarette case. with you upon my mind.But I don&rsquo. You may well have a large number of documents formatted in a ‘text only’ format that requires multiple spaces. Web browsers also ignore spaces and tabs at the beginnings of lines.t ever shine<br> Then to be in some big city. a citation. This maintains the ends of lines. The tag is <strong>.</em>) becomes: Algernon. I&rsquo.) Now produce your explanation.<br> --<cite>Dark Hollow</cite> . and pray make it improbable. or a ‘keyboard’ entry. Emphasis Emphasis is usually shown to the reader as italicized.&rdquo.) Citations Citations are also usually shown as italic. (<em>Hands cigarette case.” she cried. strong. Here it is. If you want to keep these spaces in. To emphasize a word or phrase. (<em>Sits on sofa. &ldquo. tabs.</em>) Now produce your explanation. Strong The strong tag is usually shown to the readers as bold. Marking text You can mark specific parts of your text as emphasized. she cried.d rather be in some dark hollow where the sun don&rsquo. surround the word or phrase with <em> tag. (Sits on sofa.

in a small room. for example—but you may have less use for it. give them a font-size style: <h1 style="font-size: 800%. Typographical Changes Most of the HTML tags have some sort of semantic meaning. in order to say: Type 666 and press return. Size If you want your headlines to be really big. I use this a lot for tutorials—like this one. But for now. They tell the browser. to get Go to 5th Street and drop the CO2 in the first Buick Regal. Styles are a topic all their own. --Dark Hollow From the Keyboard The keyboard tag is for those times when you’re talking about what the reader is doing on their keyboard. respectively: Go to 5<sup>th</sup> Street and drop the CO<sub>2</sub> in the first Buick Regal. Styles can be stored in a separate file so that all of your pages have a similar style. and you can change that style without having to edit every page."> . you can also use styles inside each page by adding a “style” attribute to any tag. however. what kind of text is contained by the tag. you might write: Type <kbd>666</kbd> and press <kbd>return</kbd>. you can use styles. whether that browser is a graphical web browser or an audio web reader or a cell phone. Superscript and subscript You can make superscripts and subscripts with the <sup> and the <sub> tags. Sometimes. you want to specify purely typographical changes with no meaning whatsoever. For example. For that.7 Body becomes: I’d rather be in some dark hollow where the sun don’t ever shine Then to be in some big city. with you upon my mind.

">Kermit</span> <span style="font-size: 150%. you can specify several fonts. border: inset.">H</span>ello. The style for color is “color”.8 Body You should not use styles tag to create headlines out of paragraphs of other non-headline tags! That's what the <h> tags (<h1> through <h6>) are for. Always remember that font requests are guidelines for the browser. If you create headlines with the style attribute. color: gold. Color You can also change the color of your text.">loves</span> Piggy. separated by commas. The paragraph-level functionless tag is <div>. You should be careful doing this: graphical browsers use colors to let the reader know what a link is. <div style="float: right. The <div> and <span> tags do nothing on their own. your fake headlines will blend in with the rest of your document. font-family: koala. their preferred font for that context is used instead."><p><span style="font-size: 200%. Search engines will not prioritize your page based on your headlines. They are designed specifically for adding styles. <h1 style="font-family: American Typewriter. Because you can’t be guaranteed that the reader has the font you specify. <span style="color: green. You can also combine multiple style specifications by separating them with semicolons. If they don’t have any of them. but as far as computers go. and whether that link has been visited recently. . <h1 style="color: green. If you change the color."> Styles Without Tags Sometimes you’ll want to add a style where you have no tags. it might look the same as creating them with <h> tags. Courier.apple chancery. The character-level functionless tag is <span>. because you don't really have any. that can confuse the reader. monospace. There are no guarantees that the reader will see that font. Browsers that output to devices other than screen or printer won't see any difference between your fake headlines and your text.zapf chancery. There are two “functionless” tags for this purpose.</p></div> Will give you something like: Hello."> Face You can specify the font itself if you want to use a specific font on your page. The first font that matches a font that the reader’s computer has will be used. Kermit loves Piggy.

and you surround each item with <li>. In order to start a list. Orange 3. you use the <ul> tag.9 Body Making lists When you want to present the reader with a list of items. and to determine the correct indentation. if you ‘nest’ lists as I did above. Unordered Lists Unordered lists use bullets. you can use HTML to handle the bullets or to automatically number the items. Kumquat 4. It looks just like an unordered list except that the list is marked by <ol>. Replace the ‘ul’ with ‘ol’ in the above list. Ordered Lists An ordered list is numbered. <ul> <li>Apple</li> <li>Orange</li> <li>Kumquat</li> <li>Potato</li> <ul> <li>Russet</li> <li>Yellow Fin</li> <li>of the Earth</li> </ul> <li>Tomato</li> </ul> will become:  Apple  Orange  Kumquat  Potato  Russet  Yellow Fin  of the Earth  Tomato Some browsers will use different bullets for each level of the list. and you get: 1. Potato . Apple 2.

of the Earth 5. You will often want to use the strong or emphasis tag along with the definition term (<dt>) to make it stand out. Mary. Alice’s Adventures Through the Looking Glass The final Alice book was written by Adam Weisshaupt under the auspices of the Bavarian Illuminati in 1893.s Adventures in Wonderland</dt> <dd><em>Wonderland</em> is a re-telling of <em>Underground</em>.”.</dd> <dt>Alice&rsquo.”: John &amp. if you really want an ampersand you’ll want to write it as “&amp. Surround the definition list with the tag <dl>. Mark the terms with <dt> and the definitions with <dd>.</dd> <dt>Alice&rsquo. Special Characters Some text characters don’t use standard beginning and ending tags. Yellow Fin c.10 Special Characters a. Tomato Definition Lists A definition list is like a dictionary entry: each item has a term and a definition.s Adventures Through the Looking Glass</dt> <dd>The final <em>Alice</em> book was written by Adam Weisshaupt under the auspices of the <em>Bavarian Illuminati</em> in 1893.000 words. Wonderland was published in 1865 with illustrations by Sir John Tenniel. Russet b. Alice’s Adventures in Wonderland Wonderland is a re-telling of Underground.s Adventures Underground</dt> <dd>The first <em>Alice</em> book was written between 1862 and 1864 by Charles Lutwidge Dodgson as a tale for the three Liddell girls.000 to 35. and expands the story from 18.000 to 35. Most of these look like “&word. for example. and expands the story from 18.000 words. Because the “&” marks the beginning of a special character. <dl> <dt>Alice&rsquo. .” or “&#number. <em>Wonderland</em> was published in 1865 with illustrations by <em>Sir John Tenniel</em>.</dd> </dl> will become something like: Alice’s Adventures Underground The first Alice book was written between 1862 and 1864 by Charles Lutwidge Dodgson as a tale for the three Liddell girls.

but it is still not well supported. “Hello. Mary. The ampersand codes to not convey any meaning. . Copyrights Use ‘&copy. Mary. there is no ‘end’ to this tag.’ to place a copyright symbol: ©. you are specifying some real meaning: that this is a quote. All HTML tags require an end. That final slash tells the browser that this tag is its own ending. &ldquo. and the web took a long time to catch up. it is its own end. "Hello. Forcing Line Breaks If you need to force line breaks. It’s nice seeing you!” These are easy to remember as “left single quote”. Mary. It's nice seeing you!'' Fortunately. They tend to look pretty stupid (the quotes. “right single quote”.s nice seeing you!&rdquo. This is the <q> tag. ‘ &rsquo. Mary. “ &rdquo. You would occasionally even see silliness such as.11 Special Characters Quotes Most computer geeks use “straight” quotes. will appear as it is supposed to: John said. More specifically. ``Hello. There is another way of showing quotes that is conceptually better. computers couldn’t display normal quotes. John said. It&rsquo. Even though this looks like a normal tag. Use the following special codes for curly quotes: Code Quote &lsquo. and “right double quote”. they are simply methods of displaying specific characters. you don’t have to do that sort of thing any more. ’ &ldquo. in the past. not the geeks): John said. By surrounding a quote with the <q> tag. and it begins and ends here. respectively. but for those that don’t need any text between the beginning and end you can imply an immediate ending with <TAG />. “left double quote”. ” Thus. John said.Hello. It's nice seeing you!" That’s because. you can use the <br /> tag.

or even another document on someone else’s web site. In general. you have to specify the site where the image is: <img src="http://sitename/image" /> Usually. if you are charged for extra disk space). GIF is better for simple drawings. you can put them inside your web documents. except that there isn’t an ‘end’ tag. The ‘picture’ tag (called an image) is: <img src="wherethepictureis" /> If you have a picture called ‘mom. Image Links If you have pictures on your web site. use: <img src="pictures/mom. a picture. This somewhere else can be another part of your document. you’ll use your web browser to look at the image. In the future.gif’ in your web site. It is often a good idea to store your images in a separate folder just to keep things neat. because that’s what most web browsers can read. ‘GIF’ is more widely known.gif" /> This only works if the image is in the same folder as your web page. you could point to it with: <img src="mom. In .12 Image Links What are Links? On the web. another document on your web site. Pointing to the picture Pointing to a picture is like most other things in html. or URL. a link is a connection to somewhere else. and then get the image’s location. Your pictures should be in ‘gif’ or ‘jpeg’ format. you have to specify the folder as well. If you call the folder “pictures”. The URL is what goes in between the straight quotes on “src”.gif" /> If you want to show off an image that isn’t on your personal site. and ‘JPEG’ uses smaller files (saving quota on your account. and for the most part you can use PNG now if you wish to. You can also use any picture accessible on the net! You will of course want to use this ability responsibly: always make sure you have permission to use someone else’s work. PNG is going to take over from GIF. and JPEG is better for photographs. If the image is in a separate folder.

Long text will wrap around in an ugly manner—only the first line will be aligned. however. ‘bottom’. Web browsers treat top.jpg" /> Always check with the image owner before doing something like this! They might not want you using their image. (For Windows computers.13 Image Links graphical web browsers. <img src="/Graphics/Cerebus. include the attribute alt="alternate text to be displayed" in your img tag. or middle with short text. ‘Bottom’ is the default. Aligning text to the image You can align the text next to the image to the top. and one of the items is to “copy” the image location. albeit a large one.hoboes. or middle. You can. or middle of the image. bottom. And remember who your alternate text is for: people or computers that are not downloading your image. This aligns the image to the left or right side of the viewer’s page. . also align with ‘left’ or ‘right’. bottom. and middle-aligned image as if they were just another text character.jpg" alt="The Negative Space Logo" /> You’ll need to be careful that your alternate text makes sense next to whatever normal text you’ve got the picture near. You’ll probably usually want ‘middle’: <img src="http://www. Alternate text for the image A lot of people don’t have graphical interfaces to the net. When someone without a graphical interface gets a page that has pictures on it.jpg" align="middle" />Negative Space! You should only want to <em>align</em> top.com/Graphics/Cerebus. which aligns the image’s top. or ‘middle’. This points to the Negative Space logo no matter where the web page is: <img src="http://www.) A menu will pop up. the pictures are replaced with the word [IMAGE].com/Graphics/Cerebus. you can have the text of a page wrap nicely around your pictures. with nothing. like always link back to their page. or middle with the text’s top. or with something else. The rest will be underneath the image.hoboes. or they might want you to do something special with it. The addition of ‘clear’ causes the line to break and resume at the bottom of the current image. bottom. Here’s how to align text to your picture: <img src="picture" align="alignment" /> The alignment can be ‘top’. You can force it to stop wrapping with the <br clear="all" /> tag. you can find an image’s location by holding the mouse button down while the mouse is over the image. Using ‘left’ and ‘right’. with the top of the image at the same level as the next new line. hold the right mouse button down. If you want something else to be displayed. bottom. bottom.

The attribute ‘href’ specifies the page you’re anchoring to. if you would like your readers to send e-mail to president@white-house. Your web page filenames should always (if it is an html file) end in . for example. When the reader selects that link. you would use: <a href="mailto:president@white-house. <a href="mailto:president@white-house.hoboes. and they’ll be able to click on your link and go directly to the mail your rep page without having to know its address on the net.html">Click here for the file</a>. that means you’re showing your readers the ‘way’ to get there. they’ll be able to send a message to the address you linked. The <a href="http://www.14 Linking to other documents on your site Hypertext: Linking to other places When you link to other places on the net.hoboes. In graphical browsers. The ‘clickable’ text usually appears blocked out or in color to the reader. you’ll have more than one web page on your web site.com/Politics/electednet/"> FireBlade Mail Your Rep</a> page!</a> The above example will “link” the words “FileBlade Mail Your Rep” to the web page listed in the “href” option. For example. You might decide. you can add “?Subject=This%20is%20my%20Subject” to the end of the address.com/Politics/electednet/) is something that your readers should be able to get to. When the reader selects this type of link. so you have to put ‘%20’ wherever a space should appear.gov">The President of the United States</a> <a href="mailto:vice-president@white-house.html. They’ll “click” and write their message. <a href="filename. that the FireBlade Mail Your Rep page (http://www. You are ‘anchoring’ this text to another page on the net.gov. readers will be able to “click” that text to get to that page. You can’t have spaces in a ‘URL’. which stands for ‘anchor’. You’ll ‘link’ to that page from your document.gov">The Vice President of the United States</a> This allows any of your readers to send e-mail directly to the President or Vice President just as if they were visiting another web page. . If you want to specify a subject for the message. The ‘tag’ is ‘a’.gov?Subject=Vote%20Libertarian">The President of the United States</a> Linking to other documents on your site Generally. You can link to these other documents on your site in the same way that you make links to e-mail addresses. they are transported to the new file. Mailing to someone You can also link to an e-mail address.

This ‘html code’ links to the search page on Negative Space: <a href="/Search.html’ can have the ‘index. which is usually in the upper part of your web browser.html">The link text</a> For example. If the web pages are in different folders. you’ll have to specify the full ‘path’ to the new page: <a href="/folder/filename. you have to specify what web site it is on: <a href="http://sitename/filename. but the best web servers do it that way).html’ but instead end in ‘/’.html">Click here for the file</a>.hoboes. You can find the ‘href’ for any site you’ve visited by looking in the ‘location’ box. For example.com/Search. Just like with images. if the web page you’re linking to is not on your web site. http://www.15 Linking to other people’s documents That form only works if the new web page is in the same folder as the web page that is doing the linking.com/.html’ left out of the address.html">Search the Great Negative Space!</a> You can point to most any Internet site from inside your web pages. you would have to include the site name: <a href="http://www. Your main page should almost always be called ‘index.hoboes.html is better addressed as simply http://www.com/index.hoboes. if you wanted to link to the Negative Space search page from your web site.html’ (it depends on your web server. These are the ‘main pages’ of that area of that web site. . Any page that is called ‘index. You’ll often see ‘URL’s which don’t end in ‘.html">Search Negative Space</a> Linking to other people’s documents You can also link to web pages on other web sites.

The alignment of a cell takes precedence over any alignment specified for the row the cell is in. text is centered up and down. right. You’ll almost always work with them by row rather than by column. Within the <table> and </table>. You should be careful with tables. Sample Here’s a simple table that corresponds fruit to colors: <table> <tr><th>Fruit</th><th>Color</th></tr> <tr><td>Apple</td><td>Red</td></tr> <tr><td>Orange</td><td>Orange</td></tr> <tr><td>Lemon</td><td>Yellow</td></tr> </table> . so that if you have three columns. The tag is ‘table’. They’re so simple to create. bottom. you’ll surround your rows with <tr> and </tr>. the line in the one-line cells will be in the center of the cell. you can easily make a web page that can’t be read by anyone but you. You can specify the ‘align’ or ‘valign’ of your cells just like you can the rows. Simpler is almost always better! Table Rows HTML tables are made up of ‘rows’ and ‘columns’. The tag for a header cell is <th> and </th>.16 Sample Tables Web tables allow you to create fairly complex pages. Specify ‘valign=’ top. some of them that don’t even use computer screens. Headers tend to be marked off with bold and special alignment. or center. By default. you surround the text you’re putting in the table with ‘<table>’ and ‘</table>’. but tables themselves are basically quite simple. Table Cells There are two types of table cells: headers and data. or middle to specify the vertical alignment of the cells in this row. You can specify the alignment of the text in that row with ‘align=’ left. The tag for a normal ‘data’ cell is <td> and </td>. Remember that there are lots of different web browsers out there. where data is just normal text. You might also need to specify the up/down alignment. and just like any other tag. and one column has three lines and the other two have one line.

A table tag that says “<table width="100%">” will . you can specify the ‘width’ of the table to be a certain percentage. Text wraps around it on the right. or a ‘border’ of ‘1’ or greater for borders of increasing thickness.17 Table Width It produces a table that looks like: Fruit Color Apple Red Orange Orange Lemon Yellow Table Borders By default. <table border="0"> Aligning Your Tables You can align your tables with ‘left’ and ‘right’. size ‘1’. with thicker borders: <table align="right" border="3"> <tr><th>Fruit</th><th>Color</th></tr> <tr><td>Apple</td><td>Red</td></tr> <tr><td>Orange</td><td>Orange</td></tr> <tr><td>Lemon</td><td>Yellow</td></tr> </table> Fruit Color Apple Red Orange Orange Lemon Yellow Table Width If you need your table to take up a specific amount of the screen. Here’s a table that is set off to the right. A right-aligned table appears on the right of the computer screen. Text wraps around it on the left. You can specify a ‘border’ of ‘0’ to have no visible borders. A left-aligned table appears on the left of the computer screen. your tables have either no visible border. or small visible borders.

18 Table Width span the entire width of the computer screen. whereas “<table width="33%">” will take up a third of the computer screen. All cells in any column must be the same width! (There are special ways around this. The browser will have to ignore one of them. You can do the same thing to your cells: <td width="50%"> will make that cell take up half the table’s width. you can’t specify that the first cell in row one is 50% of the table width. and then specify that the first cell in row two is 33% of the table width.) So. . but that’s for a more advanced lesson.

Usually. If they don’t. but <em>post</em> is the standard. The method has to be post. You need to surround your form with the <form> tag. forms go through a special web program called a ‘CGI’ that takes the form data. <input type="radio" name="rd" /> A radio button. With a group of radio buttons (radio types with the same name). you’ll have to have the results of the form e-mailed to you. or you can send it to a special web-based computer program. the user can select any number of checkboxes within that group. Ask your web service provider if they have any generic forms for you to use. With a group of checkboxes. You’ll almost never need the others. and action. If your web service provider doesn’t have a generic computer program for you to use. <input type="checkbox" name="cb" /> A checkbox. The “name” of your input type can be whatever you want. you can just specify your e-mail address: mailto:username@wherever. <form method="post" action="mailto:username@domain"> Replace username@domain with your full e-mail address. What can forms ask for? Forms ask for input. It’s a lot like a paper form. .cgi"> <em>the text of the form</em> <input type="submit" value="Submit This Form" /> </form> The form tag has two attributes: method. Action The action attribute tells the reader’s web browser where to send this information. You can send it to an e-mail address. There are other methods. formats it. The Form Tag Forms get marked just like anything else in HTML. and sends it to you. And they do it with—guess what?—an input tag: <input type="input type" name="input name" value="default value" /> The input type describes how you want the data to be entered. You can have the following input types.19 What can forms ask for? What are Forms? A form is a way for other people to easily give you information. as in: <form method="post" action="/cgi-bin/GenericEMailForm. the user can select only one radio button within that group.

For better results. <input type="reset" value="Reset to A button that the user can press to erase all Defaults" /> the data they have entered and return to the defaults you have set. the value is the text that the reader types into the box. resulting in a set of results: Computer=IBM-PC 486&Computer=Macintosh IIcx&Computer=Newton 100 Yes. For the text input type. If you have a checkbox with the name ‘Computer’ and value ‘IBM-PC’ in your form. <input type="text" name="tx" /> A line of text. the user can select only one radio button within that group.20 What can forms ask for? with the same name). . as it makes it very easy for your users to mistakenly erase all of their hard work! The input tag has a ‘name’ attribute and a ‘value’ attribute. <option selected>A</option> <option>List</option> <option>of</option> <option>Items</option> </select> And there are two control ‘buttons’: <input type="submit" value="Submit A button that the user can press to submit Data!" /> the data. The name is the name of the form field when it gets returned to you. find out if your web service provider has a default generic form CGI. You might even have more than one ‘computer’ checkbox that the reader can check. Forms weren’t really designed to be e-mailed. this looks pretty ugly. There are two other ways of getting data that don’t use the input tag: <textarea name="TextArea" rows="3" A Text Box cols="40">A Text Box</textarea> <select name="select"> A list of items that the user chooses from. or your reader won’t have any way to send you the form info once they’ve filled it out! Be careful with the “Reset” type. The value is the default value of that form field. You have to have at least one ‘submit’ button for each form. you’ll get the result Computer=IBM-PC when the form is mailed to you. and the reader checks that box.

21 Radio Buttons Checkboxes You use checkboxes to allow the reader to select any number of options from a list of options. You might have the reader select what fruit they want you to throw at them. The reader can only select one fruit and one topping at a time. The web browser knows what group each button belongs to by the name: each “fruit” button has the name “Fruit”. <input type="radio" name="Fruit" value="Orange" />Squishy Orange <input type="radio" name="Fruit" value="Apple" checked />Rotty Apple <input type="radio" name="Fruit" value="Banana" />Infested Banana<br> <input type="radio" name="Topping" value="Reddi-Whip" />Reddi-Whip <input type="radio" name="Topping" value="Cool Whip" />Cool Whip <input type="radio" name="Topping" value="Cheez Wiz" />Cheez Wiz <input type="radio" name="Topping" value="TV Brand" />TV Brand Whipped Topping The above html code will create radio buttons for “fruit” and “topping”. That’s because we included the checked option inside its input tag. On a graphical interface. you should only preselect one button in any group. The Rotty Apple fruit is the default—it’s preselected with the checked option. . checkboxes are boxes that the reader can ‘check’ by clicking the mouse. You can pre-check as many checkboxes as you want. The reader will have to uncheck those if they don’t want them checked. you will notice that the Macintosh IIcx option is already checked. <input type="checkbox" name="Anonymity" value="Yes" />Would you like to remain anonymous?<br /> <input type="checkbox" name="Computer" value="IBM 486" />I have an IBM ‘486<br /> <input type="checkbox" name="Computer" value="Macintosh IIcx" checked />I have a Macintosh IIcx<br /> <input type="checkbox" name="Computer" value="None of the above" />I don’t have any of those. Your users will only be able to select one fruit and one topping. When you type this in. and each “topping” button has the name “Topping”. Since only one radio button can be selected at one time. Radio Buttons Radio buttons are like checkboxes. This will produce checkboxes that allow the reader to select any number of computer types. except that only one radio button can be selected in any group of radio buttons.<br /> <input type="checkbox" name="Computer" value="None" />I don’t have a computer. and what brand of whipped topping they want in their face.

You can control the height (rows) and width (columns) of the <em>textarea</em> with the ‘rows’ and ‘cols’ attribute. <option>James Earl Carter. You can also specify the size and the maximum length of the line. Jr. in that you have one tag to surround the selections. Selecting from lists When there are large numbers of options to choose from. So if you use the value attribute here. for instance. a collection of radio buttons can get unwieldy and completely fill up your page. Please tell us your name: <input type="text" name="Name" /><br /> Please tell us your e-mail address: <input type="text" name="E-Mail" /> The value of a “text” input type is whatever the reader types into the box. <option selected>Abraham Lincoln</option> etc. The marking resembles lists. Please tell us your zip code: <input type="text" name="Zip" value="49421" size="5" maxlength="5" /> Accepting lots of text The input type of text only accepts one line of text. and the maximum length is the maximum number of characters the reader can type in. you’ll need to use the textarea tag. </textarea> And the reader sees a box with four rows and 30 columns that they can type multiple lines into. The select tag produces a pull-down menu of choices. The size is the width of the displayed box. that value is displayed as the default. you have to surround the default text with the <textarea> tag: <textarea name="Essay" rows="4" cols="30"> Please type your essay here. and another tag to mark the beginning of each selection: <select name="President"> <option>George Washington</option> <option>John Adams</option> <option>Thomas Jefferson</option> etc. If you want to accept lots of text. The textarea tag is a normal html tag. which they can edit or replace.</option> <option>Ronald Wilson Reagan</option> <option>George Herbert Walker Bush</option> .22 Selecting from lists Lines of text You’ll often want the reader to fill out some sort of text: their name or their e-mail address.

You have to have a submit input type (unless you don’t want anyone sending the form anywhere useful) and you can also have a reset input type. <input type="submit" value="Submit This Form!" /> <input type="reset" value="Erase What You Said!" /> . You can specify any one of the items as the default by adding the attribute selected after the option tag. The submit type is a button that. in this case) is the default selection. the first item in the list (George Washington. if they want to easily start filling out the form from scratch. as we did here with Abraham Lincoln.23 Sending it all in <option>William Jefferson Clinton</option> </select> Go ahead. mix and match your dream ticket! Normally. when pressed. Sending it all in You’ve got two other ‘buttons’ that can be used to control the form. sends the form back to you. The reset type allows the user to re-set all the form values back to their defaults.

com/jerry/) .shtml) Cascading Style Sheets and HTML (http://www.shtml) Neon Alley (http://www.24 Sending it all in More Information Congratulations! You now know how to create some pretty cool web documents.com/Mimsy/?ART=116) Webmaster in a Nutshell (http://www.hoboes.com/NetLife/) Recommended Reading for the Internet (http://www. For further information.com/NetLife/Software. please let me know at http://www.hoboes.com/NetLife/bookstore.hoboes.hoboes.hoboes.com/Mimsy/?ART=95) Recommended Software for the Net (http://www.com/Mimsy/?ART=129) And have fun writing! Jerry (http://www.hoboes.jerrystratton. look for: HTML: The Definitive Guide (http://www.com/.hoboes. If you have any comments.

Texinfo input format. it can be used for any textual work. 59 Temple Place. A copy made in an otherwise Transparent file format whose markup has been designed to thwart or discourage subsequent modification by readers is not Transparent. The "Document". or other written document "free" in the sense of freedom: to assure everyone the effective freedom to copy and redistribute it. if the Document is in part a textbook of mathematics. . commercial. The "Invariant Sections" are certain Secondary Sections whose titles are designated. philosophical.25 1. Opaque formats include PostScript. SGML or XML for which the DTD and/or processing tools are not generally available. below. A "Secondary Section" is a named appendix or a front-matter section of the Document that deals exclusively with the relationship of the publishers or authors of the Document to the Document's overall subject (or to related matters) and contains nothing that could fall directly within that overall subject. Boston. which is a copyleft license designed for free software. with or without modifying it. MA 02111-1307 USA Everyone is permitted to copy and distribute verbatim copies of this license document. whose contents can be viewed and edited directly and straightforwardly with generic text editors or (for images composed of pixels) generic paint programs or (for drawings) some widely available drawing editor. refers to any such manual or work. which means that derivative works of the document must themselves be free in the same sense. or of legal. and is addressed as "you". (For example. either copied verbatim. The "Cover Texts" are certain short passages of text that are listed. 0. in the notice that says that the Document is released under this License. PDF. and standard-conforming simple HTML designed for human modification. regardless of subject matter or whether it is published as a printed book. proprietary formats that can be read and edited only by proprietary word processors. We have designed this License in order to use it for manuals for free software. A "Modified Version" of the Document means any work containing the Document or a portion of it. Suite 330. ethical or political position regarding them. and that is suitable for input to text formatters or for automatic translation to a variety of formats suitable for input to text formatters. a Secondary Section may not explain any mathematics. Inc. or with modifications and/or translated into another language. Examples of suitable formats for Transparent copies include plain ASCII without markup. It complements the GNU General Public License. This License is a kind of "copyleft". but changing it is not allowed. Preamble The purpose of this License is to make a manual. as being those of Invariant Sections. 1. represented in a format whose specification is available to the general public. A copy that is not "Transparent" is called "Opaque". textbook. A "Transparent" copy of the Document means a machine-readable copy. this License preserves for the author and publisher a way to get credit for their work. while not being considered responsible for modifications made by others. We recommend this License principally for works whose purpose is instruction or reference.1. either commercially or noncommercially. LaTeX input format. Any member of the public is a licensee. in the notice that says that the Document is released under this License. because free software needs free documentation: a free program should come with manuals providing the same freedoms that the software does. Secondarily.) The relationship could be a matter of historical connection with the subject or with related matters. SGML or XML using a publicly available DTD. and the machine- generated HTML produced by some word processors for output purposes only. But this License is not limited to software manuals. Applicability and Definitions This License applies to any manual or other work that contains a notice placed by the copyright holder saying it can be distributed under the terms of this License. March 2000 Copyright (C) 2000 Free Software Foundation. as Front-Cover Texts or Back-Cover Texts. Applicability and Definitions GNU Free Documentation License Version 1.

If the required texts for either cover are too voluminous to fit legibly. thus licensing distribution and modification of the Modified Version to whoever possesses a copy of it. the copyright notices. . the material this License requires to appear in the title page. You may use the same title as a previous version if the original publisher of that version gives permission. However. free of added material. under the same conditions stated above. if it has less than five). The front cover must present the full title with all words of the title equally prominent and visible. 4. you must enclose the copies in covers that carry. For works in formats which do not have any title page as such. 2. Preserve all the copyright notices of the Document. and the Document's license notice requires Cover Texts. but not required. legibly. if there were any. together with at least five of the principal authors of the Document (all of its principal authors. as the publisher. In addition. 4. It is requested. you may accept compensation in exchange for copies. in the form shown in the Addendum below. clearly and legibly. all these Cover Texts: Front-Cover Texts on the front cover. and Back-Cover Texts on the back cover. Copying in Quantity If you publish printed copies of the Document numbering more than 100. 5. "Title Page" means the text near the most prominent appearance of the work's title. to ensure that this Transparent copy will remain thus accessible at the stated location until at least one year after the last time you distribute an Opaque copy (directly or through your agents or retailers) of that edition to the public. If you use the latter option. Include. and you may publicly display copies. be listed in the History section of the Document). State on the Title page the name of the publisher of the Modified Version. that you contact the authors of the Document well before redistributing any large number of copies. or state in or with each Opaque copy a publicly-accessible computer-network location containing a complete Transparent copy of the Document. a license notice giving the public permission to use the Modified Version under the terms of this License. You may also lend copies. 6. provided that you release the Modified Version under precisely this License. one or more persons or entities responsible for authorship of the modifications in the Modified Version. when you begin distribution of Opaque copies in quantity. either commercially or noncommercially. You may not use technical measures to obstruct or control the reading or further copying of the copies you make or distribute. plus such following pages as are needed to hold. 2. Modifications You may copy and distribute a Modified Version of the Document under the conditions of sections 2 and 3 above. immediately after the copyright notices. which the general network-using public has access to download anonymously at no charge using public-standard network protocols. if any) a title distinct from that of the Document. and that you add no other conditions whatsoever to those of this License. 3. If you distribute a large enough number of copies you must also follow the conditions in section 3. Copying with changes limited to the covers. provided that this License. for a printed book. and the license notice saying this License applies to the Document are reproduced in all copies. Add an appropriate copyright notice for your modifications adjacent to the other copyright notices. and from those of previous versions (which should. to give them a chance to provide you with an updated version of the Document. you must take reasonably prudent steps. Verbatim Copying You may copy and distribute the Document in any medium. can be treated as verbatim copying in other respects. you must either include a machine- readable Transparent copy along with each Opaque copy. and continue the rest onto adjacent pages. Modifications The "Title Page" means. List on the Title Page. preceding the beginning of the body of the text. you must do these things in the Modified Version: 1. you should put the first ones listed (as many as fit reasonably) on the actual cover. as long as they preserve the title of the Document and satisfy these conditions. as authors. the title page itself. You may add other material on the covers in addition. with the Modified Version filling the role of the Document. Both covers must also clearly and legibly identify you as the publisher of these copies. 3. If you publish or distribute Opaque copies of the Document numbering more than 100.26 4. Use in the Title Page (and on the covers.

preserve the section's title. If there are multiple Invariant Sections with the same name but different contents. You must delete all sections entitled "Endorsements. Do not retitle any existing section as "Endorsements" or to conflict in title with any Invariant Section. add their titles to the list of Invariant Sections in the Modified Version's license notice. If the Modified Version includes new front-matter sections or appendices that qualify as Secondary Sections and contain no material copied from the Document. provided that you include in the combination all of the Invariant Sections of all of the original documents. Preserve in that license notice the full lists of Invariant Sections and required Cover Texts given in the Document's license notice. then add an item describing the Modified Version as stated in the previous sentence. year. you must combine any sections entitled "History" in the various original documents. to the end of the list of Cover Texts in the Modified Version. Combining Documents You may combine the Document with other documents released under this License.27 6. 9. you may at your option designate some or all of these sections as invariant. provided that you follow the rules of this License for verbatim copying of each of the documents in all other respects. year. The author(s) and publisher(s) of the Document do not by this License give permission to use their names for publicity for or to assert or imply endorsement of any Modified Version. These titles must be distinct from any other section titles. and multiple identical Invariant Sections may be replaced with a single copy. create one stating the title. and its title. You may add a section entitled "Endorsements". and likewise the network locations given in the Document for previous versions it was based on. To do this. Preserve the network location. Collections of Documents 7. provided it contains nothing but endorsements of your Modified Version by various parties--for example. authors. and replace the individual copies of this License in the various documents with a single copy that is included in the collection. unaltered in their text and in their titles. In the combination. likewise combine any sections entitled "Acknowledgements". the name of the original author or publisher of that section if known. The combined work need only contain one copy of this License. under the terms defined in section 4 above for modified versions. statements of peer review or that the text has been approved by an organization as the authoritative definition of a standard. Collections of Documents You may make a collection consisting of the Document and other documents released under this License. 10. You may add a passage of up to five words as a Front-Cover Text. If there is no section entitled "History" in the Document. and any sections entitled "Dedications". new authors. you may not add another. and add to it an item stating at least the title. but you may replace the old one. or else a unique number. Include an unaltered copy of this License. make the title of each such section unique by adding at the end of it. Preserve all the Invariant Sections of the Document. 5. 11. forming one section entitled "History". If the Document already includes a cover text for the same cover. Make the same adjustment to the section titles in the list of Invariant Sections in the license notice of the combined work. Section numbers or the equivalent are not considered part of the section titles. given in the Document for public access to a Transparent copy of the Document. or if the original publisher of the version it refers to gives permission. on explicit permission from the previous publisher that added the old one. previously added by you or by arrangement made by the same entity you are acting on behalf of. and a passage of up to 25 words as a Back-Cover Text." 6. . 8. Such a section may not be included in the Modified Version. 12. Preserve the section entitled "History". Only one passage of Front-Cover Text and one of Back-Cover Text may be added by (or through arrangements made by) any one entity. and publisher of the Document as given on its Title Page. In any section entitled "Acknowledgements" or "Dedications". These may be placed in the "History" section. 14. Delete any section entitled "Endorsements". and publisher of the Modified Version as given on the Title Page. and list them all as Invariant Sections of your combined work in its license notice. 13. You may omit a network location for a work that was published at least four years before the Document itself. in parentheses. and preserve in the section all the substance and tone of each of the contributor acknowledgements and/or dedications given therein. if any. unmodified.

If the Document does not specify a version number of this License. the Document's Cover Texts may be placed on covers that surround only the Document within the aggregate. 10. and this License does not apply to the other self-contained works thus compiled with the Document. 7. so you may distribute translations of the Document under the terms of section 4. provided you insert a copy of this License into the extracted document. If the Cover Text requirement of section 3 is applicable to these copies of the Document. Otherwise they must appear on covers around the whole aggregate. then if the Document is less than one quarter of the entire aggregate. Such new versions will be similar in spirit to the present version. from you under this License will not have their licenses terminated so long as such parties remain in full compliance. . does not as a whole count as a Modified Version of the Document. modify. You may include a translation of this License provided that you also include the original English version of this License. if they are not themselves derivative works of the Document. or rights. but you may include translations of some or all Invariant Sections in addition to the original versions of these Invariant Sections. you have the option of following the terms and conditions either of that specified version or of any later version that has been published (not as a draft) by the Free Software Foundation. Future Revisions of this License You may extract a single document from such a collection. revised versions of the GNU Free Documentation License from time to time. See http://www. parties who have received copies. However. 8. Termination You may not copy. provided no compilation copyright is claimed for the compilation.gnu. modify. sublicense. and will automatically terminate your rights under this License. Future Revisions of this License The Free Software Foundation may publish new. or distribute the Document except as expressly provided for under this License. on account of their being thus compiled. 9.28 10. but may differ in detail to address new problems or concerns. Translation Translation is considered a kind of modification. Such a compilation is called an "aggregate". Aggregation with Independent Works A compilation of the Document or its derivatives with other separate and independent documents or works.org/copyleft/. in or on a volume of a storage or distribution medium. and follow this License in all other respects regarding verbatim copying of that document. you may choose any version ever published (not as a draft) by the Free Software Foundation. Any other attempt to copy. Each version of the License is given a distinguishing version number. and distribute it individually under this License. If the Document specifies that a particular numbered version of this License "or any later version" applies to it. the original English version will prevail. Replacing Invariant Sections with translations requires special permission from their copyright holders. In case of a disagreement between the translation and the original English version of this License. sublicense or distribute the Document is void.