Coolnerds Core HTML Quick ReferenceCoolnerds Core HTML Quick ReferenceThis page represents the core HTML that most browsers support. It's not a comprehensive reference -- it's just a quick reference to the more commonly-used tags and attributes. Also, this reference assumes you already know what HTML is and how to write HTML. This is not a tutorial for beginners just getting started with HTML.
These tags enclose comments to yourself, which can help you document your HTML code and make it more maintainable. The browser ignores all text between <!-- and -->.
<!--This is a comment to myself. -->
Use the anchor element to create hyperlinks in your web pages, or named targets for other hyperlinks to jump to within a page.
onclick, onmouseout, onmouseover
Here's a small web page that contains a bookmark, a hyperlink to that bookmark, and a hyperlink to a site on the web.
<!-- Below A NAME identifies a target named Top is this page --> <A NAME="Top"></A> <H1>This is the title </H1> <P>Body text body text body text body text body text, etc.</P> <!--The line below takes the reader to the Top target in this document --> <A HREF="#Top">Go to Top</A>
<!--The next line takes the reader to http://www.coolnerds.com--> <A HREF="http://www.coolnerds.com/">Go to My Home Page</A>
The heading "HTML Tags" near the top of this page is a target named pageTop, created with the tags below:
<A NAME="pageTop"></A>
Each one of the Top links in this page uses the syntax below to create a link to the top of this page:
<A HREF="#pageTop">Top</A>
These tags format the text that appears between the open and close tag as address information. Use them to specify a mailing address, e-mail address, telephone number, and so on. Typically, the address text appears italicized and an automatic paragraph break appears before and after.
<ADDRESS> Mail comments to <A HREF="mailto:alan@coolnerds.com">Alan</A> </ADDRESS>
look like this in a web browser:
Defines a clickable hot spot within an image map defined by <MAP>...</MAP> tags, and sets the URL to go to when the area is clicked.
COORDS="coords" where coords specifies the coordinates of the hot spot measuring from the top left corner of the image, specified as x1, y1, x2, y2 where x1 and y1 are the pixel at the top left corner of the hot spot, and x2 and y2 represent the pixel at the lower right corner of the hot spot.
SHAPE="shape" where shape is the shape of the hot spot specified as circle, rect, or polygon.
HREF="location" where location is an absolute or relative reference to the page to go to when the hot spot is clicked, or JavaScript code preceded by the word javascript:.
NOHREF specifies that clicking the hotspot doesn't take the user to a new URL.
TARGET="framename" where framename is the name of the frame that will display the new page.
NAME="name" where name is just a name you assign to the hot spot.
onmouseout, onmouseover
See <MAP>...</MAP>.
These tags display the text that appears between them in boldface.
When all else fails, <B>read the instructions</B>.
produce this in a web page:
This tag records the base URL for the document. Any URLs contained within the document then can be in a form relative to this base address. If you omit the <BASE ...> element, the browser resolves any relative URLs by using the URL of the home page. Can also be used to specify a default frame for presenting pages accessed by <A HREF=...> tags. Always place the <BASE> element between the <HEAD>...</HEAD> elements.
<HEAD> <BASE HREF="http://www.coolnerds.com/"> <TITLE>Welcome to my Home Page</TITLE> </HEAD>
This tag changes the base font size for the document. Any <FONT SIZE ...> changes increase or decrease the font size relative to the base font size that you have established. Particularly useful for setting a base font size for use with <BIG> and <SMALL> tags.
<BASEFONT SIZE=4>
sets the base font about 14 points rather than 12 points.
Inserts a background sound on the page that's downloaded and played automatically when the reader opens the page. The sound file can be in .WAV, .AU format, or .MID (MIDI) format. Microsoft Internet Explorer only.
<BGSOUND SRC="drumroll.wav" LOOP=INFINITE>
Text between the <BIG> and </BIG> tags is shown at a slightly larger size than surrounding text.
<BIG>I am Big Text</BIG>
<P>I am regular text</P>
shows in a page as:
I am regular text
Sets the text between the open and close tags apart from other text on a page, usually to display a lengthy quotation. Text is preceded and followed by a blank line, and is indented from the left margin. Multiple <BLOCKQUOTE> tags indents further.
<P>Famous quote from Romeo in Shakespeare's play:</P>
<BLOCKQUOTE>But soft, what light through yonder window breaks?<BR> 'Tis the East, and Juliet is the sun.</BLOCKQUOTE>
<P>Aren't you glad people don't still talk like that?</P>
produces the following in a web page:
Famous quote from Romeo in Shakespeare's play:
But soft, what light through yonder window breaks?
'Tis the East, and Juliet is the sun.
Aren't you glad people don't still talk like that?
This element defines all text and images that make up the page and all items that provide control and formatting for the page.
onload, onunload, onblur, onfocus
<BODY TEXT="White" BGCOLOR="Black" LINK="Yellow" VLINK="Lime" ALINK="Red"> Body text goes here. Body and text will have "inverted" colors. </BODY>
Starts a new line without a blank line. The new line has the same indent as line-wrapped text.
<P>Here is a sample of my Haiku</P> The cat<BR> was Jonesin'<BR> for some food<BR> Meow.</P> <P>Pretty good, huh?</P>
produce the following in a web page:
The cat
was
jonesin'
for some food
Meow.
Pretty good, huh?
Here's another example. Suppose your page contains a graphic image with the ALIGN= attribute set to LEFT or RIGHT so text wraps around the image. But you want to start a new paragraph under that picture. The tag below will ensure that any content that follows the tag is not wrapped around that image:
<P><IMG SRC="whatever.gif" ALIGN="Left"> This text wraps to the right of the image named whatever.gif.</P> <BR Clear="all">
<P>This text and anything below it does notwrap around the image named whatever.gif.</P>
Specify the caption for a table. The caption usually is centered with respect to the table. Any document body HTML tag can appear within a caption.
See <TABLE ...> ... </TABLE> for an example.
Center the text between the left and right margins. Place the text you want to center between the open and closing tags.
<H1><CENTER>Think of Me as a Title</CENTER></H1>
produces this in a web browser:
The text that appears between these tags represents a citation and typically appears in italics.
This was clearly the decision in <CITE>Madison vs. Hartunian, 1996</CITE>.
shows in the page as:
The text that appears between these tags represents programming code and typically appears in monospaced font.
<P>Here's a simple BASIC FOR...NEXT loop that counts from 1 to 10:</P>
<CODE> FOR X = 1 TO 10<BR> ? X<BR> NEXT X </CODE>
<P>And now we're back to regular font.</P>
...end up looking like this in a web page:
Here's a simple BASIC FOR…NEXT loop that counts from 1 to 10:
FOR X
= 1 TO 10
? X
NEXT X
And now we're back to regular font.
Indicates a comment, which is ignored by the web browser. Better to use <!--
--> as this tag has been declared "obsolete".
These tags specify a definition item in a definition list. Definition items typically are indented and formatted paragraph style after the term they define.
See <DL> ... </DL> for an example.
Marks the defining instance of a term (the first time a term is used.) Most browsers display the text in italics.
If you need a high-performance hard drive, go for <DFN>SCSI 3</DFN>.
...produces the following in a web page:
If you need a high-performance hard drive, go for SCSI 3.
These tags define a directory list in which the items can contain up to 20 characters each. In some browsers, items in a directory list are be arranged in columns, typically 24 characters wide. In a directory list, each list items typically is preceded by bullets and does not have extra white space above or below it.
<H4>Student Scores</H4> <DIR> <LI>0-20 (10%)</LI> <LI>21-40 (20%)</LI> <LI>41-60 (30%)</LI> <LI>61-80 (20%)</LI> <LI>81-100 (20%)</LI> </DIR>
...looks like below in this browser:
Sets up a division of text to which attributes are applied. Often used to center, left-align, or right-align text. A chunk of text in DIV tags always starts on a new line and is followed by a blank line. For inline styling, use the <SPAN>...</SPAN> tags instead.
<DIV ALIGN="left">Left align this text.</DIV><BR> <DIV ALIGN="right">Right align this text.</DIV><BR> <DIV ALIGN="center">Center this text.</DIV> </P>
...produce this in a web page:
This pair of tags defines a definition list (or description list) that typically consists of definition terms and definition items. Definition lists are perfect for glossary-type lists in which the term appears flush left and the definition is in indented in paragraph style below the term.
<H2><CENTER>Glossary</CENTER></H2> <DL> <DT>HTML <DD>An acronym for Hypertext Markup Language.</DT> <DT>VRML <DD>An acronym for Virtual Reality Markup Language.</DT> </DL>
products the following in a web page:
Specifies a definition term in a definition list. Definition terms typically are formatted flush left and are followed by the indented definition in a paragraph-style format.
See <DL> ... </DL> for an example.
Marks emphasized text which is typically displayed in italics.
I <EM>really</EM> mean what I say, so <EM>do not</EM> ignore me!
Looks like this in this browser:
I really mean what I say, so do not ignore me!
This pair of tags sets the font size, font color, and font face of text between the open and closing tags.
<FONT SIZE=7 COLOR=#00FF00 FACE="Arial"> This text is big, green, and Arial typeface. </FONT>
comes out like this in your current browser:
This text is big, green, and Arial typeface.
Defines the start and end of a fill-in-the-blank form. The ACTION= attribute defines what happens when the reader clicks the Submit button to submit the form. The simple mailto: action shown in the example doesn't work with all browsers. Ideally, you want to have the action execute a custom CGI script that handles and sends the form data in the format you need. Check with your Internet Service Provider (ISP) to see how they recommend setting up forms in your web site.
onclick, onsubmit, onreset
<FORM ACTION="mailto:nobody@nowhere.com" METHOD="POST"">
Your name:
<INPUT NAME="01Name" VALUE="" MAXLENGTH="50" SIZE=50><P>
Your address:
<INPUT NAME="02address" VALUE="" MAXLENGTH="50" SIZE=50><P>
Your City, State, Zip:
<INPUT NAME="CSZ" VALUE="" MAXLENGTH="50" SIZE=50><P>
<INPUT TYPE=SUBMIT VALUE="Submit" NAME="subbtn">
<INPUT TYPE=RESET VALUE="Reset">
</FORM>
Looks like this in this web browser. (The Submit button won't do anything in this example though):
Defines a single frame within a frameset. Must be enclosed within <FRAMESET>...</FRAMESET> tags.
See <FRAMESET> for an example.
Declares the current page as a set of frames for displaying multiple pages. Use <FRAME> tags between a pair of <FRAMESET >...</FRAMESET> tags to define individual frames.
onblur, onfocus, onload, onunload
Here's a sample structure of a web page that displays frames:
<HTML><HEAD> <TITLE>It's a frame, I tell ya'!</TITLE></HEAD>
<!-- Frameset has 3 columns.-->
<FRAMESET COLS="20%,*,20%">
<FRAME SRC="left.htm" NAME="left">
<FRAME SRC="middle.htm" NAME="middle">
<FRAME SRC="right.htm" NAME="right">
</FRAMESET>
<!-- End of Frameset -->
<!-- Start of content that browsers without frame support will see. -->
<NOFRAMES>
<P>Alternative content for people who are using
ancient frame-lame browsers.</P>
</NOFRAMES>
<!-- End of frame-lame content. -->
</HTML>
Here's a more complete live example.
Encloses information about the web page - not the content that the reader sees. The <TITLE> ... </TITLE> tags can appear within the <HEAD> ... </HEAD> tags. The head can also include these tags: <BASE>, <LINK>, and <META>.
<HTML> <HEAD> <TITLE>My Home Page</TITLE> <!-- Appears in browser window frame--> </HEAD> <BODY> Text and pictures that the reader sees goes inside the BODY tags. </BODY> </HTML>
This tag pair formats text between the open and close tags as any of six levels of heading (where n is 1, 2, 3, 4, 5, or 6). <H1> is the highest heading level, followed by <H2> ... <H6>. The appearance of each heading style is determined by the browser.
<H1>This is heading level 1</H1> <H2>This is heading level 2</H2> <H3>This is heading level 3</H3> <H4>This is heading level 4</H4> <H5>This is heading level 5</H5> <H6>This is heading level 6</H6>
looks like this in this browser:
Draws a horizontal line or rule across the page. Horizontal rules are great for dividing sections of text on the page.
<HR> <!-- Rule spans the page --> <!-- Rule below is left aligned, and 30% of the page width. --> <HR ALIGN=left WIDTH=30%> <!-- Rule below is right-aligned and has no shading --> <HR ALIGN=right WIDTH=70% NOSHADE>
The tags above look like this in your web browser:
Marks the beginning and end of an entire HTML document.
The following listing shows the basic structure of an HTML document:
<HTML>
<HEAD>
...head stuff goes here
</HEAD>
<BODY>
...body stuff goes here
</BODY>
</HTML>
Top
Displays text between the tags as italicized.
Did you know that SCSI is pronounced <I>scuzzy</I>?
looks like this in your web browser:
Did you know that SCSI is pronounced scuzzy?
The <IMG ...> element puts graphics into your web pages.
onabort, onerror, onload
To make an image act as a hyperlink, place the <IMG> tag between <A HREF=....>...</A> tags, as in the example below.
<!-- Image and More About Us are clickable hot spots --> <A HREF="moreinfo.htm"> <IMG SRC="photo_hi.gif" LOWSRC="photo_lo.gif" ALT="Who We Are!" HSPACE=10 VSPACE=10 BORDER=5 ALIGN=middle> </A> <H3><A HREF="moreinfo.htm">More About Us!</A></H3>
This tag sets up an input field to allow data entry in a form. In JavaScript-capable browsers, the <INPUT> tag can accept an event handler as an attribute.
onblur (text)
onchange (text)
onclick (button, checkbox, radio, submit, reset)
onfocus (text)
onselect(text, password)
See <FORM ...> ... </FORM> for an example.
The text that appears between these tags represents user-typed text and typically appears in a monospaced font.
Please type <KBD>copy myfile.txt myfile.bak</KBD> and press Enter.
Shows up like this in your current web browser
Please type copy myfile.txt myfile.bak and press Enter.
Specifies a single list item in a <DIR> (directory), <MENU> (menu), <OL> (ordered), or <UL> (unordered) list. The appearance of the list item depends on the type of list in which it is located.
TYPE="type" where type specifies the appearance of the bullets or numbers. For bulleted lists (<UL>) DISC, CIRCLE, and SQUARE are supported. For numbered lists (<OL>) A, a, I, i, and 1 are supported.
VALUE="number" where number is assigned to the first item in the list.
<P>To get your CD-ROM drive working: <OL> <LI>Stand up</LI> <LI>Touch the tip of your index finger to the top of your head, and hold it there.</LI> <LI>Twirl around clockwise three times.</LI> <LI>Bark like a monkey.</LI> </OL> </P> <P>If the drive still doesn't work, read the instructions, or call the drive manufacturer.</P>
Look like this in your web browser:
To get your CD-ROM drive working:
If the drive still doesn't work:
The tags below illustrate types used in numbered lists:
<ol> <li type="A">I'm a list item.</li> <li type="a">So am I</li> <li type="I">Me too</li> <li type="i">Me three</li> <li type="1">Don't forget me</li> </ol>
They produce the following in a web page:
Indicates a relationship between the current document and some other object. Most often used to link a style sheet to a web page that supports CSS (Cascading Style Sheets) Place the <LINK> element between the <HEAD>...</HEAD> elements.
REL="filetype" where filetype represents the type of file being linked as stylesheet for a style sheet, or fontdef for font definitions.
TYPE="type" the type represents the type of file being linked, such as text/css for a style sheet stored in a text file.
SRC="file" where file is an absolute or relative reference to the linked file.
The tag below links a CSS style sheet named mystyles to the current web page:
<LINK REL="STYLESHEET" HREF="mystyles.css" TYPE="text/css">
Defines the clickable hotspots on a client-side image map, and the action to be taken when the reader clicks the hotspot. The easiest way to create a client-side image map is to use a helper application like LiveImage, available from http://www.mediatec.com/.
<MAP NAME="navmap"> <AREA SHAPE=RECT COORDS="4,158,97,184" HREF='daily.htm'> <AREA SHAPE=RECT COORDS="0,327,98,353" HREF='elsewhere.htm'> <AREA SHAPE=RECT COORDS="40,361,63,388" HREF='wherever.htm'> <AREA SHAPE=RECT COORDS="5,17,102,114" HREF='javascript:myFunc()')> </MAP> <IMG SRC="mymap.gif" USEMAP="#navmap">
Displays the text between the tags as a scrolling marquee. Internet Explorer only. Text is displayed, but doesn't move, in other browsers.
onblur, onbounce, onclick, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfinish, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onpropertychange, onresize, onscroll, onselectstart, onstart
<MARQUEE>This text will do a slow scroll from left to right.</MARQUEE> <P><MARQUEE BEHAVIOR=Alternate BGCOLOR=Red> This is the marquee in red. It goes back and forth. </MARQUEE><P> <P><CENTER><MARQUEE BGCOLOR=Lime WIDTH=50%> This lime marquee will be half the width of the page. </MARQUEE></CENTER></P> <MARQUEE SCROLLDELAY=10 SCROLLAMOUNT=30 BGCOLOR="Pink"> A quickie marquee. </MARQUEE>
If you're using Microsoft Internet Explorer version 3 or later, the text below will be scrolling across the screen.
This tag specifies miscellaneous information about the document that isn't defined by other HTML elements. Many search engines use information in the META tags to index your site. Server and client programs can extract this meta information for identification, indexing, and cataloging purposes. Place the <META> tag between the <HEAD>...</HEAD> tags.
The tags below provide the vast majority of search engines with all the information they need to correctly index this page:
<HEAD> <META NAME="title" CONTENT="Coolnerds HTML Quick Reference"> <META NAME="description" CONTENT="Quick Reference to HTML tags"> <META NAME="keywords" CONTENT="Core HTML tags quick reference"> <META NAME="author" CONTENT="Alan Simpson -- www.coolnerds.com"> <META NAME="robots" CONTENT="All"> </HEAD>
Prevents the browser from word-wrapping any of the text between the open and close tags. Netscape Navigator and Internet Explorer only. This feature is useful for character sequences that shouldn't be broken by word wrapping to the next line. Forces the page to be as wide as the line between the tags. To force a break at a specific place in the line, use <WBR>.
<NOBR>Breaking up is so hard to do, that we really don't want to do it here. The width of you web page would be wide enough to display all this text on one long line!</NOBR>
This pair of tags provides alternative content for browsers that don't support frames. See the <FRAMESET> entry for an example.
Defines an ordered (numbered) list that appears with a sequential number or letter next to each list item. List items are usually indented.
The example below shows a list marked as an ordered list (<OL>) with an unordered list (<UL>) embedded within it:
<H3>Things to Do</H3> <OL> <LI>Wake up, get ready</LI> <LI>Get kids off to school</LI> <LI>Go to the grocery store</LI> <UL> <LI>Milk</LI> <LI>Bananas</LI> <LI>Bread</LI> <LI>Carrots</LI> </UL> <LI>Pick up kids</LI> <LI>Get dinner ready</LI> </OL>
Here's what that list looks like in your web browser:
This tag identifies a single option within a select (drop-down list) box. You must use it within <SELECT...> ... </SELECT> tags inside of <FORM>...</FORM> tags.
<FORM NAME = "sampleForm"> <SELECT NAME="FavoriteColor"> <OPTION>Red</OPTION> <OPTION>Orange</OPTION> <OPTION>Yellow</OPTION> <OPTION>Green</OPTION> <OPTION SELECTED>Blue</OPTION> <OPTION>Violet</OPTION> </SELECT> </FORM>
The tags above look and work like the select box below:
This pair of tags marks a paragraph. Paragraphs usually are surrounded by extra space (a line or half a line); in some browsers, the first line is indented. The closing </P> tag is optional, and often omitted.
<P>This paragraph isn't very interesting, but it makes the point and it will word-wrap to additional lines as needed.</P><P>This is another pretty boring paragraph, but you can see that it's set apart from the paragraph just above it by some extra space.</P> <P ALIGN=center>Centered paragraph</P>
The text shown above looks like this in your browser:
This paragraph isn't very interesting, but it makes the point and it will word-wrap to additional lines as needed.
This is another pretty boring paragraph, but you can see that it's set apart from the paragraph just above it by some extra space.
Centered paragraph
This tag pair uses text "as is" in fixed-width font. Presumably, the text is already formatted as you want it, with line breaks that force text to start on a new line. You also can include anchor elements, character highlighting elements, and the horizontal tab character (though tabs are not recommended). Do not use elements that define paragraph formatting within the preformatted text.
<PRE>This text is formatted to break exactly where I want it to. It will appear in fixed-width text.</PRE>
Looks like this in your browser:
This text is formatted to break exactly where I want it to. It will appear in fixed-width text.
Displays text between the tags in strikethrough style
Yours for <S>absolutely nothing</S> 100.00!
Looks like this in your browser:
Use these tags to differentiate text that should look like a "sample" of something to the reader, such as sample programming code. Most browsers display the sample text in a monospaced font.
To navigate to a new page using JavaScript, use <SAMP>location.href=<I>newURL</I></SAMP> in your code.
When displayed in a web browser, the text above looks like this:
This tag pair marks the beginning and end of a script embedded in a page.
The script below contains a JavaScript function that displays a simple "Howdy World" message. The script is executed when the user clicks on the button titled Click Me:
<SCRIPT LANGUAGE="JavaScript">
function showMsg() {
msg="Howdy World"
alert (msg)
}
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="Click Me" onclick="showMsg()">
</FORM>
Click the button below to try the script:
This tag pair creates a select box (drop-down list) in a form. Each option within the box is defined by an <OPTION> tag.
onblur, onchange, onclick, onfocus
<FORM> <SELECT NAME="ColoList" > <OPTION VALUE="Red">Red <OPTION VALUE="Orange">Orange <OPTION VALUE="Yellow">Yellow <OPTION VALUE="Green">Green <OPTION VALUE="Blue">Blue <OPTION VALUE="Indigo">Indigo <OPTION VALUE="Violet">Violet </SELECT> </FORM>
The tags above present this option list in your web browser:
Text between the <SMALL></SMALL> tags is displayed in a size that's slightly smaller than the base font size.
<P>If businesses were more honest with people, we wouldn't need all that <SMALL>fine print</SMALL> in the contracts we sign.</P>
The HTML above looks like this in most web browsers:
If businesses and lawyers were just honest with people, we wouldn't need all that fine print in the contracts we sign.
Defines attributes for a span of text. Unlike the <DIV>...</DIV> tags, SPAN doesn't insert blank lines above and below the tagged text.
The style tags below define a spanning style named warn. The span tag uses class="warn" to apply that style to a chunk of text:
<head>
<style type="text/css">
span.warn {font-family:'Comic Sans MS'; font-size:10pt;
color:#FF0000;font-weight:bold}
</style>
</head>
<body>
<p><span class="warn">Warning:</span>
Never, ever, count your chickens before they hatch!</p>
</body>
The paragraph text would end up looking like this in the web page:
Warning: Never, ever, count your chickens before they hatch!
Displays strikethrough text between the tags, same as the <S></S>
tags..
The due date shall be <STRIKE>June 1, 1997</STRIKE> July 1, 1997.
The line above looks like this in your web browser:
The due date shall be June 1, 1997 July 1, 1997.
The text between these tags is emphasized - displayed in boldface by most browsers.
<STRONG>Do as I say, not as I do!</STRONG> is a frequent admonition from parent to child.
The line above looks like this in your current web browser:
Do as I say, not as I do! is a frequent admonition from parent to child.
Subscripts the text between the tags.
Hurry! Give me a glass of H<SUB>2</SUB>O!
The line above looks like this in your web browser:
Hurry! Give me a glass of H20!
Displays superscript (raised) text between the tags.
<P>Einstein's famous equation e = mc<SUP>2</SUP> tells us that energy is equal to mass times the speed of light squared.</P>
The line above looks like this in your current web browser:
Einstein's equation E = mc2 tells us that energy is equal to mass times the speed of light squared. (i.e., makes a really big boom.)
This tag pair specifies the start and end of a table. All elements between
the <TABLE ...> ... </TABLE> tags are part of the table. Any table
elements outside of these tags are ignored.
<TABLE BORDER=3 WIDTH=100% CELLPADDING=5> <CAPTION><B>Requirements for Lightweight Blaster</B></CAPTION> <TR> <!-- Row 1 (Header items) --> <TH>Platform</TH> <!-- Header for column 1 --> <TH>Processor</TH> <!-- Header for column 2 --> <TH>Disk Space (Minimum)</TH> <!-- Header for column 3 --> <TH>Memory (Minimum)</TH> <!-- Header for column 4 --> <TH>Memory (Recommended)</TH> <!-- Header for column 5 --> </TR><!-- End of Row 1 (Header items) --> <TR ALIGN=CENTER><!-- Row 2 --> <TD>Windows</TD> <!-- Data for row 2 column 1 --> <TD>486</TD> <!-- Data for row 2 column 2 --> <TD>5MB</TD> <!-- Data for row 2 column 3 --> <TD>6MB</TD> <!-- Data for row 2 column 4 --> <TD>8MB</TD> <!-- Data for row 2 column 5 --> </TR><!-- End of Row 2 --> <TR ALIGN=CENTER><!-- Row 3 --> <TD>Macintosh</TD> <!-- Data for row 3 column 1 --> <TD>68020</TD> <!-- Data for row 3 column 2 --> <TD>5MB</TD> <!-- Data for row 3 column 3 --> <TD>6MB</TD> <!-- Data for row 3 column 4 --> <TD>8MB</TD> <!-- Data for row 3 column 5 --> </TR><!-- End of Row 3 --> <TR ALIGN=CENTER><!-- Row 4 --> <TD>Unix</TD> <!-- Data for row 4 column 1 --> <TD>N/A</TD> <!-- Data for row 4 column 2 --> <TD>6MB</TD> <!-- Data for row 4 column 3 --> <TD>16MB</TD> <!-- Data for row 4 column 4 --> <TD>16MB</TD> <!-- Data for row 4 column 5 --> </TR><!-- End of Row 4 --> </TABLE>
The tags above produce the following table in your web browser:
|
Platform |
Processor |
Disk Space (Minimum) |
Memory (Minimum) |
Memory (Recommended) |
|---|---|---|---|---|
|
Windows |
486 |
5MB |
6MB |
8MB |
|
Macintosh |
68020 |
5MB |
6MB |
8MB |
|
Unix |
N/A |
6MB |
16MB |
16MB |
Defines the data for a cell in a table row. Each <TD ...> ... </TD> pair corresponds to one cell within a table row <TR ...> ... </TR>. Each row within the table need not have the same number of <TD ...> ... </TD> pairs. Any document body HTML tag can appear between the tags.
See <TABLE ...> ... </TABLE> for an example.
These tags place a multi-line text box on a form. If you include text between the <TEXTAREA ...> and </TEXTAREA> tags, that text will appear as the initial value of the input field.
onblur, onchange, onfocus, onselect
<FORM> <P> <TEXTAREA NAME="LifeStory" ROWS=3 COLS=50> Summarize your life story here... </TEXTAREA> </FORM>
Looks like this in your web browser:
Defines a table cell as a header cell -- the cell at the top of a column. Text in these cells is boldfaced and centered by default. The attributes for the <TH ...> ... </TH> element are the same as for the <TD ...> ... </TD> element.
See <TABLE ...> ... </TABLE> for an example.
Specifies the page title that will appear in the browser's title bar. The <TITLE></TITLE> tags should be placed between the <HEAD></HEAD> tags.
The tag below displays the text Welcome to my Home Page in the title bar of the reader's web browser.
<HEAD> <TITLE>Welcome to my Home Page</TITLE> </HEAD>
Defines one row in a table.
<TABLE ALIGN="center" WIDTH=50% BORDER=1> <TR ALIGN="left" BGCOLOR="pink"> <TD WIDTH=50%>Left-Aligned Text</TD> <TD WIDTH=50%>Pink Background</TD> </TR> <TR ALIGN="right" BGCOLOR="yellow"> <TD WIDTH=50%>Right-Aligned Text</TD> <TD WIDTH=50%>Yellow Background</TD> </TR> </TABLE>
The tags above produce this:
| Left-Aligned Text | Pink Background |
| Right-Aligned Text | Yellow Background |
This tag mimics a typewriter or teletype machine's font. Displays fixed width (Courier) text in most browsers.
<P>A teletype machine <TT>types like this</TT>, supposedly.</P>
The lines above look like this in your web browser:
A teletype machine types like this, supposedly.
This tag pair displays underlined text between the tags. Use with caution because underlining is also used to identify hypertext links. (Don't confuse the reader by having a lot of non-hyperlink underlined text on your page.)
Please <U>do not</U> try this at home.
The line above looks like this in your web browser:
Please do not try this at home.
Defines an unordered (bulleted) list that usually appears with a bullet next to each list item. With each indent level, the bullets usually progress to different shapes, depending on the browser.
<H4>A Nested Unnumbered To Do List</H4> <UL TYPE="circle"> <LI>Clean fish tank</LI> <LI>Buy groceries</LI> <LI>Sleep</LI> <UL TYPE="square"> <LI>Sleep in the day</LI> <LI>Sleep a lot!</LI> <LI>Sleep at night</LI> </UL TYPE="CIRCLE"> <LI>Eat</LI> </UL>
The tags and text above look like this in your web browser: