This action might not be possible to undo. Are you sure you want to continue?
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>.
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>
Keywords and Descriptions There are two ‘meta’ tags that set your document’s keywords and description. Meta tags stand on their own: you don’t specify an ending for a meta tag. You make some text your title by surrounding it with the <title> and </title> tag. You should keep it reasonably short and descriptive. It is cool." /> </head> . The tag for your keywords is <meta name="keywords" value="keyword1. It’s for the browser software. "> and the tag for the description is <meta name="description" value="This is a summary of my document. If a ‘web spider’ such as Alta Vista indexes your document. the keywords that are important in your document. keyword3. Title The title of the document is used to bookmark your web page if the reader wants to keep a bookmark of it. keyword2.3 Head Putting text in HTML documents Head The ‘head’ is where document information goes."> Sample <head> <title>A Web Writing Guide: Marking Text</title> <meta name="keywords" value="Web. etc. using basic HTML markup code. this is the title of your document in their index. and the description that summarizes your document. not for the human reading the page. It is also the text that appears in the window bar of graphical web browsers. HTML" /> <meta name="description" value="A guide to creating web documents by hand. This is information about the document itself. You’ll want to give the title of your document.
You can modify your paragraph tag with the align attribute. it specifies layout. . by default. This is true. you will want to center your paragraphs or align them to the right: <p align="right">This is a right-aligned paragraph. Please read carefully. you will want to avoid such attributes in favor of cascading style sheets. Paragraph Tags Paragraph tags affect entire paragraphs of text. If necessary. (Most of them are. when you start using such attributes you are trying to set a style for your web pages.</p> <p align="left">This is a left-aligned paragraph. But that’s a topic for another tutorial. Please read carefully.)</p> <p align="center">This is a centered paragraph. In general.</p> Will end up looking like: This is an HTML paragraph. Marking paragraphs Otherwise normal paragraphs need to be marked with the <p> tag. but many changes always affect entire paragraphs. It usually looks ugly. All of the information that you’re giving to the reader goes in the body. The HTML code: <p>This is an HTML paragraph. it replaces them with a space. Attributes are things that appear inside of tags. If you mean for ‘layout’ changes such as ‘align’ to convey meaning. HTML ignores whatever carriage returns you put into the document. and for this reason you need to be careful using it. Usually. Very much like in your word processor. Style sheets let you do that much more easily. They modify how the text affected by that tag appear on the screen. some changes can be made to individual letters. Since it describes physical layout it will be ignored where that layout makes no sense.</p> You might notice that the “align” attribute does not specify meaning.4 Body Body The body is where the meat of the document goes. good web browsers will only display one space. Often. 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. that meaning will be lost under certain circumstances.
<blockquote> &ldquo. The headline tag is <h#>.5 Body Marking headlines You have a number of ‘headline levels’ to work with. The highest level headline—which produces the largest text—is level 1.Hey.s just hide from our droogies in this creepy old cellar. For example. Heading tags mean that the marked text is the headline for the following text. You can currently use up to level 6. Let’s just hide from our droogies in this creepy old cellar. But I think you can probably guess what they do by looking at the text they produce! . You can align your headlines in the same way that you align your paragraphs: <h1 align="right">.&rdquo. you’ll often want to set it off from the rest of the text. Marking quotes When you make a quote.s not risk our lives going upstairs to viddie ghosts doing the old in out in out. For example: <h1>This <h2>This <h3>This <h4>This is is is is level level level level 1</h1> 2</h2> 3</h3> 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. replacing the ‘#’ with the heading level you want. let’s not risk our lives going upstairs to viddie ghosts doing the old in out in out. let&rsquo. Use the <blockquote> tag.--<cite>Doug Shaw</cite> </blockquote> will produce: “Hey. for example. Scooob. Use the <font> tag to increase text size in nonheadlines if you absolutely must. Let&rsquo.”--Doug Shaw We’ll be getting to that cite thing and what those ‘&’ things are. Scooob. later on.
But I don&rsquo. with you upon my mind. tabs. The tag is <strong>. Be careful doing this: it is usually better (if you have the time) to convert your text-only documents to web documents. and spaces. If you want to keep these spaces in. Here it is. &ldquo. I&rsquo. you’ll need to use the <pre> tag. You may well have a large number of documents formatted in a ‘text only’ format that requires multiple spaces.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. tabs.t ever shine<br> Then to be in some big city.” she cried. (Sits on sofa.) Now produce your explanation. Strong The strong tag is usually shown to the readers as bold. They refer to the source of something that you’re quoting or attributing. a citation. To emphasize a word or phrase.&rdquo. This maintains the ends of lines. Marking text You can mark specific parts of your text as emphasized. and multiple carriage returns to keep its formatting. (<em>Hands cigarette case.</strong> Here it is. (<em>Sits on sofa. in a small room.d rather be in some dark hollow where the sun don&rsquo. Web browsers also ignore spaces and tabs at the beginnings of lines. (Hands cigarette case. surround the word or phrase with <em> tag. Becomes: “But I don’t want a cookie.) Citations Citations are also usually shown as italic. and pray make it improbable.<br> --<cite>Dark Hollow</cite> . or a ‘keyboard’ entry.t <em>want</em> a cookie. and pray make it improbable. strong. she cried.</em>) Now produce your explanation.</em>) becomes: Algernon. Emphasis Emphasis is usually shown to the reader as italicized.
"> . you want to specify purely typographical changes with no meaning whatsoever. you can use styles.7 becomes: I’d rather be in some dark hollow where the sun don’t ever shine Then to be in some big city. in a small room. Typographical Changes Most of the HTML tags have some sort of semantic meaning. I use this a lot for tutorials—like this one. Styles can be stored in a separate file so that all of your pages have a similar style. They tell the browser. whether that browser is a graphical web browser or an audio web reader or a cell phone. For example. respectively: Go to 5<sup>th</sup> Street and drop the CO<sub>2</sub> in the first Buick Regal. you can also use styles inside each page by adding a “style” attribute to any tag. to get Go to 5th Street and drop the CO2 in the first Buick Regal. and you can change that style without having to edit every page. with you upon my mind. Styles are a topic all their own. what kind of text is contained by the tag. But for now. in order to say: Type 666 and press return. --Dark Hollow Body From the Keyboard The keyboard tag is for those times when you’re talking about what the reader is doing on their keyboard. For that. you might write: Type <kbd>666</kbd> and press <kbd>return</kbd>. Sometimes. for example—but you may have less use for it. Size If you want your headlines to be really big. give them a font-size style: <h1 style="font-size: 800%. however. Superscript and subscript You can make superscripts and subscripts with the <sup> and the <sub> tags.
<span style="color: green. font-family: koala. color: gold.</p></div> Will give you something like: Hello. They are designed specifically for adding styles. your fake headlines will blend in with the rest of your document. you can specify several fonts.">H</span>ello. their preferred font for that context is used instead.">Kermit</span> <span style="font-size: 150%. border: inset. . monospace. Search engines will not prioritize your page based on your headlines. Color You can also change the color of your text. <h1 style="font-family: American Typewriter. Browsers that output to devices other than screen or printer won't see any difference between your fake headlines and your text. <h1 style="color: green. You should be careful doing this: graphical browsers use colors to let the reader know what a link is.">loves</span> Piggy. The first font that matches a font that the reader’s computer has will be used. If you change the color."><p><span style="font-size: 200%. If they don’t have any of them.zapf chancery."> Styles Without Tags Sometimes you’ll want to add a style where you have no tags. but as far as computers go."> Face You can specify the font itself if you want to use a specific font on your page. <div style="float: right. You can also combine multiple style specifications by separating them with semicolons. it might look the same as creating them with <h> tags. There are two “functionless” tags for this purpose. that can confuse the reader. Kermit loves Piggy. Because you can’t be guaranteed that the reader has the font you specify. because you don't really have any. Courier. The <div> and <span> tags do nothing on their own. There are no guarantees that the reader will see that font. The style for color is “color”. If you create headlines with the style attribute. separated by commas.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. The character-level functionless tag is <span>. The paragraph-level functionless tag is <div>.apple chancery. Always remember that font requests are guidelines for the browser. and whether that link has been visited recently.
and you get: 1. In order to start a list.9 Body Making lists When you want to present the reader with a list of items. 4. 3. and you surround each item with <li>. Ordered Lists An ordered list is numbered. you can use HTML to handle the bullets or to automatically number the items. you use the <ul> tag. Replace the ‘ul’ with ‘ol’ in the above list. <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. Unordered Lists Unordered lists use bullets. 2. and to determine the correct indentation. It looks just like an unordered list except that the list is marked by <ol>. if you ‘nest’ lists as I did above. Apple Orange Kumquat Potato .
and expands the story from 18. Wonderland was published in 1865 with illustrations by Sir John Tenniel. of the Earth 5.s Adventures in Wonderland</dt> <dd><em>Wonderland</em> is a re-telling of <em>Underground</em>.000 to 35. Russet b.”: John &. Because the “&” marks the beginning of a special character. 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. . Most of these look like “&word.” or “&#number. Alice’s Adventures in Wonderland Wonderland is a re-telling of Underground.”.</dd> <dt>Alice&rsquo. Yellow Fin c. and expands the story from 18. if you really want an ampersand you’ll want to write it as “&.000 words. for example.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.10 Special Characters a.000 to 35. <em>Wonderland</em> was published in 1865 with illustrations by <em>Sir John Tenniel</em>. You will often want to use the strong or emphasis tag along with the definition term (<dt>) to make it stand out.</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.</dd> <dt>Alice&rsquo. Mary.000 words. Special Characters Some text characters don’t use standard beginning and ending tags. Surround the definition list with the tag <dl>. <dl> <dt>Alice&rsquo. Mark the terms with <dt> and the definitions with <dd>.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. Tomato Definition Lists A definition list is like a dictionary entry: each item has a term and a definition.
John said. &ldquo. you are specifying some real meaning: that this is a quote. “left double quote”. Quote ‘ ’ “ ” Thus. but for those that don’t need any text between the beginning and end you can imply an immediate ending with <TAG />. and the web took a long time to catch up. Mary. All HTML tags require an end.Hello. &rsquo. That final slash tells the browser that this tag is its own ending. you don’t have to do that sort of thing any more. they are simply methods of displaying specific characters. ``Hello. it is its own end. It's nice seeing you!'' Fortunately. and “right double quote”.s nice seeing you!&rdquo. Use the following special codes for curly quotes: Code &lsquo. Forcing Line Breaks If you need to force line breaks. not the geeks): John said. This is the <q> tag. You would occasionally even see silliness such as. Copyrights Use ‘©. and it begins and ends here. “Hello. in the past.’ to place a copyright symbol: ©. will appear as it is supposed to: John said. &rdquo. “right single quote”. It's nice seeing you!" That’s because. John said. They tend to look pretty stupid (the quotes. "Hello. respectively. Even though this looks like a normal tag. The ampersand codes to not convey any meaning. Mary. you can use the <br /> tag. there is no ‘end’ to this tag. There is another way of showing quotes that is conceptually better. By surrounding a quote with the <q> tag. . &ldquo. It&rsquo. computers couldn’t display normal quotes. but it is still not well supported. Mary. It’s nice seeing you!” These are easy to remember as “left single quote”. Mary. More specifically.11 Special Characters Quotes Most computer geeks use “straight” quotes.
GIF is better for simple drawings. and JPEG is better for photographs. you can put them inside your web documents.gif" /> If you want to show off an image that isn’t on your personal site. PNG is going to take over from GIF. you’ll use your web browser to look at the image. This somewhere else can be another part of your document. In the future. a link is a connection to somewhere else. or even another document on someone else’s web site. Pointing to the picture Pointing to a picture is like most other things in html.12 Image Links What are Links? On the web. another document on your web site. Your pictures should be in ‘gif’ or ‘jpeg’ format.gif’ in your web site. The URL is what goes in between the straight quotes on “src”. and ‘JPEG’ uses smaller files (saving quota on your account. you could point to it with: <img src="mom.gif" /> This only works if the image is in the same folder as your web page. if you are charged for extra disk space). because that’s what most web browsers can read. Image Links If you have pictures on your web site. except that there isn’t an ‘end’ tag. a picture. If the image is in a separate folder. It is often a good idea to store your images in a separate folder just to keep things neat. In . If you call the folder “pictures”. use: <img src="pictures/mom. ‘GIF’ is more widely known. The ‘picture’ tag (called an image) is: <img src="wherethepictureis" /> If you have a picture called ‘mom. you have to specify the site where the image is: <img src="http://sitename/image" /> Usually. In general. 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. and then get the image’s location. you have to specify the folder as well. or URL.
com/Graphics/Cerebus. Web browsers treat top. The rest will be underneath the image. bottom. however. . If you want something else to be displayed. or they might want you to do something special with it.hoboes.jpg" /> Always check with the image owner before doing something like this! They might not want you using their image. with the top of the image at the same level as the next new line.jpg" align="middle" />Negative Space! You should only want to <em>align</em> top.) A menu will pop up. (For Windows computers. You can. bottom. or with something else. you can find an image’s location by holding the mouse button down while the mouse is over the image. bottom. This aligns the image to the left or right side of the viewer’s page. Alternate text for the image A lot of people don’t have graphical interfaces to the net. which aligns the image’s top. This points to the Negative Space logo no matter where the web page is: <img src="http://www. ‘bottom’.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. or middle with the text’s top. The addition of ‘clear’ causes the line to break and resume at the bottom of the current image. you can have the text of a page wrap nicely around your pictures. and one of the items is to “copy” the image location.hoboes. When someone without a graphical interface gets a page that has pictures on it. include the attribute alt="alternate text to be displayed" in your img tag. the pictures are replaced with the word [IMAGE]. hold the right mouse button down. like always link back to their page. or middle with short text. bottom. You’ll probably usually want ‘middle’: <img src="http://www. And remember who your alternate text is for: people or computers that are not downloading your image. ‘Bottom’ is the default. Long text will wrap around in an ugly manner—only the first line will be aligned. Here’s how to align text to your picture: <img src="picture" align="alignment" /> The alignment can be ‘top’. or middle. <img src="/Graphics/Cerebus.com/Graphics/Cerebus.13 Image Links graphical web browsers. You can force it to stop wrapping with the <br clear="all" /> tag. Using ‘left’ and ‘right’. or middle of the image. or ‘middle’. albeit a large one. Aligning text to the image You can align the text next to the image to the top. bottom. and middle-aligned image as if they were just another text character. also align with ‘left’ or ‘right’. with nothing.
readers will be able to “click” that text to get to that page. In graphical browsers. <a href="filename. The ‘tag’ is ‘a’. You might decide.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.14 Linking to other documents on your site Hypertext: Linking to other places When you link to other places on the net. they are transported to the new file. so you have to put ‘%20’ wherever a space should appear. You can’t have spaces in a ‘URL’.hoboes. The ‘clickable’ text usually appears blocked out or in color to the reader.hoboes. When the reader selects this type of link. The attribute ‘href’ specifies the page you’re anchoring to. You can link to these other documents on your site in the same way that you make links to e-mail addresses.com/Politics/electednet/) is something that your readers should be able to get to. if you would like your readers to send e-mail to president@white-house. you can add “?Subject=This%20is%20my%20Subject” to the end of the address.html.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. that means you’re showing your readers the ‘way’ to get there. which stands for ‘anchor’.gov. For example. Mailing to someone You can also link to an e-mail address. You’ll ‘link’ to that page from your document. They’ll “click” and write their message. you would use: <a href="mailto:president@white-house. Your web page filenames should always (if it is an html file) end in . <a href="mailto:firstname.lastname@example.org">Click here for the file</a>. you’ll have more than one web page on your web site. for example. You are ‘anchoring’ this text to another page on the net. When the reader selects that link. The <a href="http://www. they’ll be able to send a message to the address you linked. 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.gov?Subject=Vote%20Libertarian">The President of the United States</a> Linking to other documents on your site Generally.gov">The President of the United States</a> <a href="mailto:vice-president@white-house. If you want to specify a subject for the message. that the FireBlade Mail Your Rep page (http://www. .
Any page that is called ‘index.com/. Just like with images.hoboes.hoboes. if the web page you’re linking to is not on your web site.html is better addressed as simply http://www. . but the best web servers do it that way).com/Search.html’ left out of the address. which is usually in the upper part of your web browser. If the web pages are in different folders.html">Search the Great Negative Space!</a> You can point to most any Internet site from inside your web pages. You can find the ‘href’ for any site you’ve visited by looking in the ‘location’ box.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. Your main page should almost always be called ‘index.com/index.html">The link text</a> For example. These are the ‘main pages’ of that area of that web site. you have to specify what web site it is on: <a href="http://sitename/filename. For example. you would have to include the site name: <a href="http://www.hoboes. you’ll have to specify the full ‘path’ to the new page: <a href="/folder/filename.html’ but instead end in ‘/’.html’ can have the ‘index. if you wanted to link to the Negative Space search page from your web site. This ‘html code’ links to the search page on Negative Space: <a href="/Search.html’ (it depends on your web server.html">Click here for the file</a>. http://www.html">Search Negative Space</a> Linking to other people’s documents You can also link to web pages on other web sites. You’ll often see ‘URL’s which don’t end in ‘.
Remember that there are lots of different web browsers out there. You should be careful with tables. You’ll almost always work with them by row rather than by column. bottom.16 Sample Tables Web tables allow you to create fairly complex pages. Headers tend to be marked off with bold and special alignment. By default. You can specify the ‘align’ or ‘valign’ of your cells just like you can the rows. you can easily make a web page that can’t be read by anyone but you. The tag for a header cell is <th> and </th>. The alignment of a cell takes precedence over any alignment specified for the row the cell is in. They’re so simple to create. text is centered up and down. but tables themselves are basically quite simple. You can specify the alignment of the text in that row with ‘align=’ left. you’ll surround your rows with <tr> and </tr>. you surround the text you’re putting in the table with ‘<table>’ and ‘</table>’. right. where data is just normal text. so that if you have three columns. The tag is ‘table’. and just like any other tag. the line in the one-line cells will be in the center of the cell. Table Cells There are two types of table cells: headers and data. or center. The tag for a normal ‘data’ cell is <td> and </td>. Within the <table> and </table>. some of them that don’t even use computer screens. Simpler is almost always better! Table Rows HTML tables are made up of ‘rows’ and ‘columns’. 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> . or middle to specify the vertical alignment of the cells in this row. Specify ‘valign=’ top. You might also need to specify the up/down alignment. and one column has three lines and the other two have one line.
Text wraps around it on the right. You can specify a ‘border’ of ‘0’ to have no visible borders. your tables have either no visible border.17 It produces a table that looks like: Fruit Apple Color Red Table Width Orange Orange Lemon Yellow Table Borders By default. Here’s a table that is set off to the right. size ‘1’. you can specify the ‘width’ of the table to be a certain percentage. or small visible borders. A right-aligned table appears on the right of the computer screen. or a ‘border’ of ‘1’ or greater for borders of increasing thickness. Text wraps around it on the left. <table border="0"> Aligning Your Tables You can align your tables with ‘left’ and ‘right’. A table tag that says “<table width="100%">” will . A left-aligned table appears on the left of the computer screen. 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 Apple Color Red Orange Orange Lemon Yellow Table Width If you need your table to take up a specific amount of the screen.
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. but that’s for a more advanced lesson. You can do the same thing to your cells: <td width="50%"> will make that cell take up half the table’s width. whereas “<table width="33%">” will take up a third of the computer screen.18 Table Width span the entire width of the computer screen.) So. The browser will have to ignore one of them. . All cells in any column must be the same width! (There are special ways around this.
but <em>post</em> is the standard. The method has to be post. and sends it to you. The Form Tag Forms get marked just like anything else in HTML. Usually. you’ll have to have the results of the form e-mailed to you. . With a group of radio buttons (radio types with the same name). It’s a lot like a paper form. If they don’t. or you can send it to a special web-based computer program. A radio button. forms go through a special web program called a ‘CGI’ that takes the form data.19 What can forms ask for? What are Forms? A form is a way for other people to easily give you information. You can have the following input types.cgi"> <em>the text of the form</em> <input type="submit" value="Submit This Form" /> </form> The form tag has two attributes: method. The “name” of your input type can be whatever you want. the user can select only one radio button within that group. With a group of checkboxes. You can send it to an e-mail address. You need to surround your form with the <form> tag. you can just specify your e-mail address: mailto:username@wherever. 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. and action. <form method="post" action="mailto:username@domain"> Replace username@domain with your full e-mail address. Action The action attribute tells the reader’s web browser where to send this information. What can forms ask for? Forms ask for input. You’ll almost never need the others. There are other methods. the user can select any number of checkboxes within that group. If your web service provider doesn’t have a generic computer program for you to use. formats it. <input type="checkbox" name="cb" /> <input type="radio" name="rd" /> A checkbox. Ask your web service provider if they have any generic forms for you to use. as in: <form method="post" action="/cgi-bin/GenericEMailForm.
find out if your web service provider has a default generic form CGI. There are two other ways of getting data that don’t use the input tag: <textarea name="TextArea" rows="3" cols="40">A Text Box</textarea> <select name="select"> <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 Data!" /> <input type="reset" value="Reset to Defaults" /> A button that the user can press to submit the data. 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.20 What can forms ask for? with the same name). The value is the default value of that form field. 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. and the reader checks that box. You might even have more than one ‘computer’ checkbox that the reader can check. you’ll get the result Computer=IBM-PC when the form is mailed to you. The name is the name of the form field when it gets returned to you. <input type="text" name="tx" /> A line of text. A button that the user can press to erase all the data they have entered and return to the defaults you have set. You have to have at least one ‘submit’ button for each form. A Text Box A list of items that the user chooses from. For better results. If you have a checkbox with the name ‘Computer’ and value ‘IBM-PC’ in your form. . resulting in a set of results: Computer=IBM-PC 486&Computer=Macintosh IIcx&Computer=Newton 100 Yes. Forms weren’t really designed to be e-mailed. the value is the text that the reader types into the box. this looks pretty ugly. For the text input type. the user can select only one radio button within that group.
This will produce checkboxes that allow the reader to select any number of computer types. On a graphical interface. Since only one radio button can be selected at one time. checkboxes are boxes that the reader can ‘check’ by clicking the mouse. you should only preselect one button in any group. . you will notice that the Macintosh IIcx option is already checked. The web browser knows what group each button belongs to by the name: each “fruit” button has the name “Fruit”. and each “topping” button has the name “Topping”. The reader can only select one fruit and one topping at a time. The reader will have to uncheck those if they don’t want them checked. You might have the reader select what fruit they want you to throw at them. Radio Buttons Radio buttons are like checkboxes.<br /> <input type="checkbox" name="Computer" value="None" />I don’t have a computer. <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”.21 Radio Buttons Checkboxes You use checkboxes to allow the reader to select any number of options from a list of options. <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. except that only one radio button can be selected in any group of radio buttons. You can pre-check as many checkboxes as you want. and what brand of whipped topping they want in their face. The Rotty Apple fruit is the default—it’s preselected with the checked option. When you type this in. Your users will only be able to select one fruit and one topping. That’s because we included the checked option inside its input tag.
So if you use the value attribute here.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. </textarea> And the reader sees a box with four rows and 30 columns that they can type multiple lines into. Jr. The select tag produces a pull-down menu of choices. for instance. <option>James Earl Carter. If you want to accept lots of text. 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. You can control the height (rows) and width (columns) of the <em>textarea</em> with the ‘rows’ and ‘cols’ attribute. Selecting from lists When there are large numbers of options to choose from. <option selected>Abraham Lincoln</option> etc. which they can edit or replace. You can also specify the size and the maximum length of the line.</option> <option>Ronald Wilson Reagan</option> <option>George Herbert Walker Bush</option> . The size is the width of the displayed box. 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. you have to surround the default text with the <textarea> tag: <textarea name="Essay" rows="4" cols="30"> Please type your essay here. and the maximum length is the maximum number of characters the reader can type in. The textarea tag is a normal html tag. 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. you’ll need to use the textarea tag. in that you have one tag to surround the selections. that value is displayed as the default.
The reset type allows the user to re-set all the form values back to their defaults. Sending it all in You’ve got two other ‘buttons’ that can be used to control the form. in this case) is the default selection. if they want to easily start filling out the form from scratch. 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. mix and match your dream ticket! Normally. when pressed.23 <option>William Jefferson Clinton</option> </select> Sending it all in Go ahead. sends the form back to you. 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. <input type="submit" value="Submit This Form!" /> <input type="reset" value="Erase What You Said!" /> . the first item in the list (George Washington. as we did here with Abraham Lincoln.
com/jerry/) . If you have any comments.com/.24 Sending it all in More Information Congratulations! You now know how to create some pretty cool web documents.hoboes.com/Mimsy/?ART=129) And have fun writing! Jerry (http://www.hoboes.com/NetLife/Software.hoboes.com/Mimsy/?ART=116) Webmaster in a Nutshell (http://www.jerrystratton.hoboes.hoboes.com/NetLife/) Recommended Reading for the Internet (http://www. look for: HTML: The Definitive Guide (http://www.com/Mimsy/?ART=95) Recommended Software for the Net (http://www.shtml) Neon Alley (http://www.shtml) Cascading Style Sheets and HTML (http://www.hoboes. For further information. please let me know at http://www.com/NetLife/bookstore.hoboes.
MA 02111-1307 USA Everyone is permitted to copy and distribute verbatim copies of this license document. Boston. as Front-Cover Texts or Back-Cover Texts. A "Modified Version" of the Document means any work containing the Document or a portion of it. Secondarily. The "Document". Opaque formats include PostScript. SGML or XML for which the DTD and/or processing tools are not generally available. which is a copyleft license designed for free software. which means that derivative works of the document must themselves be free in the same sense.25 1. 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. refers to any such manual or work. 0. It complements the GNU General Public License. this License preserves for the author and publisher a way to get credit for their work. textbook. in the notice that says that the Document is released under this License. as being those of Invariant Sections. SGML or XML using a publicly available DTD. and is addressed as "you". 59 Temple Place. Applicability and Definitions GNU Free Documentation License Version 1. PDF. 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. The "Cover Texts" are certain short passages of text that are listed. regardless of subject matter or whether it is published as a printed book. . because free software needs free documentation: a free program should come with manuals providing the same freedoms that the software does. Texinfo input format. But this License is not limited to software manuals. 1. Any member of the public is a licensee. it can be used for any textual work. while not being considered responsible for modifications made by others. either copied verbatim. ethical or political position regarding them.) The relationship could be a matter of historical connection with the subject or with related matters. and standard-conforming simple HTML designed for human modification. but changing it is not allowed. or of legal.1. commercial. if the Document is in part a textbook of mathematics. A "Transparent" copy of the Document means a machine-readable copy. We recommend this License principally for works whose purpose is instruction or reference. proprietary formats that can be read and edited only by proprietary word processors. Inc. LaTeX input format. represented in a format whose specification is available to the general public. (For example. Examples of suitable formats for Transparent copies include plain ASCII without markup. March 2000 Copyright (C) 2000 Free Software Foundation. philosophical. or with modifications and/or translated into another language. A copy that is not "Transparent" is called "Opaque". in the notice that says that the Document is released under this License. Preamble The purpose of this License is to make a manual. either commercially or noncommercially. a Secondary Section may not explain any mathematics. Suite 330. and the machinegenerated HTML produced by some word processors for output purposes only. with or without modifying it. below. This License is a kind of "copyleft". The "Invariant Sections" are certain Secondary Sections whose titles are designated. 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" 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. or other written document "free" in the sense of freedom: to assure everyone the effective freedom to copy and redistribute it. 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. We have designed this License in order to use it for manuals for free software.
and continue the rest onto adjacent pages. If the required texts for either cover are too voluminous to fit legibly. Verbatim Copying You may copy and distribute the Document in any medium. if it has less than five).26 4. if there were any. 3. If you distribute a large enough number of copies you must also follow the conditions in section 3. the title page itself. You may also lend copies. You may not use technical measures to obstruct or control the reading or further copying of the copies you make or distribute. one or more persons or entities responsible for authorship of the modifications in the Modified Version. either commercially or noncommercially. thus licensing distribution and modification of the Modified Version to whoever possesses a copy of it. but not required. if any) a title distinct from that of the Document. can be treated as verbatim copying in other respects. 4. Copying with changes limited to the covers. 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. 2. and the Document's license notice requires Cover Texts. Copying in Quantity If you publish printed copies of the Document numbering more than 100. as long as they preserve the title of the Document and satisfy these conditions. together with at least five of the principal authors of the Document (all of its principal authors. for a printed book. Modifications The "Title Page" means. For works in formats which do not have any title page as such. the material this License requires to appear in the title page. all these Cover Texts: Front-Cover Texts on the front cover. The front cover must present the full title with all words of the title equally prominent and visible. under the same conditions stated above. Add an appropriate copyright notice for your modifications adjacent to the other copyright notices. and that you add no other conditions whatsoever to those of this License. as the publisher. with the Modified Version filling the role of the Document. legibly. You may use the same title as a previous version if the original publisher of that version gives permission. . However. "Title Page" means the text near the most prominent appearance of the work's title. If you publish or distribute Opaque copies of the Document numbering more than 100. 6. 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. Include. you must take reasonably prudent steps. provided that this License. and the license notice saying this License applies to the Document are reproduced in all copies. to give them a chance to provide you with an updated version of the Document. a license notice giving the public permission to use the Modified Version under the terms of this License. you must do these things in the Modified Version: 1. plus such following pages as are needed to hold. Both covers must also clearly and legibly identify you as the publisher of these copies. be listed in the History section of the Document). you may accept compensation in exchange for copies. You may add other material on the covers in addition. you must enclose the copies in covers that carry. and from those of previous versions (which should. the copyright notices. 5. free of added material. as authors. or state in or with each Opaque copy a publicly-accessible computer-network location containing a complete Transparent copy of the Document. clearly and legibly. immediately after the copyright notices. List on the Title Page. Use in the Title Page (and on the covers. 2. when you begin distribution of Opaque copies in quantity. you must either include a machinereadable Transparent copy along with each Opaque copy. 3. you should put the first ones listed (as many as fit reasonably) on the actual cover. Preserve all the copyright notices of the Document. It is requested. In addition. and you may publicly display copies. 4. preceding the beginning of the body of the text. and Back-Cover Texts on the back cover. Modifications You may copy and distribute a Modified Version of the Document under the conditions of sections 2 and 3 above. in the form shown in the Addendum below. provided that you release the Modified Version under precisely this License. If you use the latter option. which the general network-using public has access to download anonymously at no charge using public-standard network protocols.
year. and its title. 6. and publisher of the Modified Version as given on the Title Page. 14. preserve the section's title. unaltered in their text and in their titles. You may omit a network location for a work that was published at least four years before the Document itself. Include an unaltered copy of this License. you must combine any sections entitled "History" in the various original documents. you may not add another. . and add to it an item stating at least the title. 8. new authors. 11. then add an item describing the Modified Version as stated in the previous sentence. you may at your option designate some or all of these sections as invariant. and multiple identical Invariant Sections may be replaced with a single copy. To do this. create one stating the title. 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. provided it contains nothing but endorsements of your Modified Version by various parties--for example. Preserve the section entitled "History". on explicit permission from the previous publisher that added the old one. and likewise the network locations given in the Document for previous versions it was based on. Make the same adjustment to the section titles in the list of Invariant Sections in the license notice of the combined work. Combining Documents You may combine the Document with other documents released under this License. likewise combine any sections entitled "Acknowledgements". 12.27 7. Collections of Documents You may make a collection consisting of the Document and other documents released under this License. If there are multiple Invariant Sections with the same name but different contents. forming one section entitled "History". You must delete all sections entitled "Endorsements. add their titles to the list of Invariant Sections in the Modified Version's license notice. These titles must be distinct from any other section titles. and any sections entitled "Dedications". but you may replace the old one. Delete any section entitled "Endorsements". previously added by you or by arrangement made by the same entity you are acting on behalf of. These may be placed in the "History" section. and list them all as Invariant Sections of your combined work in its license notice. and a passage of up to 25 words as a Back-Cover Text. 10. Such a section may not be included in the Modified Version. year. under the terms defined in section 4 above for modified versions. 9. and replace the individual copies of this License in the various documents with a single copy that is included in the collection. the name of the original author or publisher of that section if known. 5. If there is no section entitled "History" in the Document. Do not retitle any existing section as "Endorsements" or to conflict in title with any Invariant Section." 6. or else a unique number. statements of peer review or that the text has been approved by an organization as the authoritative definition of a standard. If the Document already includes a cover text for the same cover. You may add a section entitled "Endorsements". to the end of the list of Cover Texts in the Modified Version. Section numbers or the equivalent are not considered part of the section titles. Preserve all the Invariant Sections of the Document. provided that you include in the combination all of the Invariant Sections of all of the original documents. If the Modified Version includes new front-matter sections or appendices that qualify as Secondary Sections and contain no material copied from the Document. The combined work need only contain one copy of this License. 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. You may add a passage of up to five words as a Front-Cover Text. provided that you follow the rules of this License for verbatim copying of each of the documents in all other respects. or if the original publisher of the version it refers to gives permission. In the combination. In any section entitled "Acknowledgements" or "Dedications". Collections of Documents Preserve in that license notice the full lists of Invariant Sections and required Cover Texts given in the Document's license notice. given in the Document for public access to a Transparent copy of the Document. and publisher of the Document as given on its Title Page. in parentheses. and preserve in the section all the substance and tone of each of the contributor acknowledgements and/or dedications given therein. 13. if any. Preserve the network location. authors. unmodified. make the title of each such section unique by adding at the end of it.
Replacing Invariant Sections with translations requires special permission from their copyright holders. revised versions of the GNU Free Documentation License from time to time. Each version of the License is given a distinguishing version number. modify. on account of their being thus compiled. Any other attempt to copy. the Document's Cover Texts may be placed on covers that surround only the Document within the aggregate. Such new versions will be similar in spirit to the present version. Future Revisions of this License The Free Software Foundation may publish new. you may choose any version ever published (not as a draft) by the Free Software Foundation. modify. If the Cover Text requirement of section 3 is applicable to these copies of the Document. so you may distribute translations of the Document under the terms of section 4. and distribute it individually under this License. 10.gnu. See http://www. and will automatically terminate your rights under this License. However. and this License does not apply to the other self-contained works thus compiled with the Document. but may differ in detail to address new problems or concerns. if they are not themselves derivative works of the Document. then if the Document is less than one quarter of the entire aggregate. 8. the original English version will prevail. and follow this License in all other respects regarding verbatim copying of that document. sublicense. in or on a volume of a storage or distribution medium. Future Revisions of this License You may extract a single document from such a collection. provided you insert a copy of this License into the extracted document. sublicense or distribute the Document is void. parties who have received copies. provided no compilation copyright is claimed for the compilation.28 10. from you under this License will not have their licenses terminated so long as such parties remain in full compliance. or rights. 7. In case of a disagreement between the translation and the original English version of this License. Termination You may not copy. or distribute the Document except as expressly provided for under this License. does not as a whole count as a Modified Version of the Document.org/copyleft/. 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. Translation Translation is considered a kind of modification. You may include a translation of this License provided that you also include the original English version of this License. Otherwise they must appear on covers around the whole aggregate. 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. 9. If the Document specifies that a particular numbered version of this License "or any later version" applies to it. . but you may include translations of some or all Invariant Sections in addition to the original versions of these Invariant Sections. If the Document does not specify a version number of this License.
This action might not be possible to undo. Are you sure you want to continue?