Friday, January 2, 2009

HTML Tutorial

What is an HTML File?

  • HTML stands for Hyper Text Markup Language
  • An HTML file is a text file containing small markup tags
  • The markup tags tell the Web browser how to display the page
  • An HTML file must have an htm or html file extension
  • An HTML file can be created using a simple text editor

Do You Want to Try It?

If you are running Windows, start Notepad.

If you are on a Mac start SimpleText.

In OSX start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files". This is very important because if you don't do this HTML codes probably won't work.

Type in the following text:

Title of page
This is my first homepage. This text is bold

Save the file as "mypage.htm".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.

Example Explained

The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.

The text between the tag and the tag is header information. Header information is not displayed in the browser window.

The text between the tags is the title of your document. The title is displayed in your browser's caption.<o:p></o:p></span></p> <p><span style="font-family: "Garamond","serif";">The text between the <body> tags is the text that will be displayed in your browser.<o:p></o:p></span></p> <p><span style="font-family: "Garamond","serif";">The text between the <b> and </b> tags will be displayed in a bold font.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: "Garamond","serif";"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: "Garamond","serif";">HTM or HTML Extension?<o:p></o:p></span></h2> <p><span style="font-family: "Garamond","serif";">When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inhe<st1:personname st="on">rit</st1:personname>ed from the past when some of the commonly used software only allowed three letter extensions.<o:p></o:p></span></p> <p><span style="font-family: "Garamond","serif";">With newer software we think it will be perfectly safe to use .html.<o:p></o:p></span></p> <h2><span style="font-size: 12pt; font-family: "Garamond","serif";">HTML Tags<o:p></o:p></span></h2> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: "Garamond","serif";">HTML tags are used to mark-up HTML <b>elements</b> <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: "Garamond","serif";">HTML tags are surrounded by the <b>two characters <></b> <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: "Garamond","serif";">The surrounding characters are called <b>angle brackets</b> <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: "Garamond","serif";">HTML tags normally <b>come in pairs</b> like <b> and </b> <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: "Garamond","serif";">The first tag in a pair is the <b>start tag,</b> the second tag is the <b>end tag</b> <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: "Garamond","serif";">The text between the start and end tags is the <b>element content</b> <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: "Garamond","serif";">HTML tags are <b>not case sensitive,</b> <b> means the same as <b> <o:p></o:p></span></li></ul> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: "Garamond","serif";"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: "Garamond","serif";">HTML Elements<o:p></o:p></span></h2> <p><span style="font-family: "Garamond","serif";">Remember the HTML example from the previous page:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: "Garamond","serif";"><html><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: "Garamond","serif";"><head><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: "Garamond","serif";"><title>Title of page

This is my first homepage. This text is bold

This is an HTML element:

This text is bold

The HTML element starts with a start tag:
The content of the HTML element is: This text is bold
The HTML element ends with an end tag:

The purpose of the tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

This is my first homepage. This text is bold

This HTML element starts with the start tag , and ends with the end tag .

The purpose of the tag is to define the HTML element that contains the body of the HTML document.

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: means the same as . When you surf the Web, you will notice that most tutorials use uppercase HTML tags in their examples. We always use lowercase tags. Why?

If you want to prepare yourself for the next generations of HTML, you should start using lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.

Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.

This tag defines the body element of your HTML page: . With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: .

This tag defines an HTML table:

. With an added border attribute, you can tell the browser that the table should have no borders:

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.

Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:

name='John "ShotGun" Nelson'

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.

Headings

Headings are defined with the

to

tags.

defines the largest heading.

defines the smallest heading.

This is a heading
This is a heading
This is a heading
This is a heading
This is a heading
This is a heading

HTML automatically adds an extra blank line before and after a heading.

Paragraphs

Paragraphs are defined with the

tag.

This is a paragraph
This is another paragraph

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks

The
tag is used when you want to end a line, but don't want to start a new paragraph. The
tag forces a line break wherever you place it.

This 
 is a para
graph with line breaks

The
tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Basic Notes - Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.

HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space.

Using empty paragraphs

to insert blank lines is a bad habit. Use the
tag instead. (But don't use the
tag to create lists. Wait until you have learned about HTML lists.)

You might have noticed that paragraphs can be written without the closing tag

. Don't rely on it. The next version of HTML will not allow you to skip ANY closing tags.

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.

We use a horizontal rule (the

tag), to separate the sections in our tutorials.

Basic HTML Tags

Tag

Description

Defines an HTML document

Defines the document's body

to

Defines header 1 to header 6

Defines a paragraph


Inserts a single line break

Defines a horizontal rule

Defines a comment

HTML defines a lot of elements for formatting output, like bold or italic text.

Below are a lot of examples that you can try out yourself:

How to View HTML Source

Have you ever seen a Web page and wondered "How do they do that?"

To find out, simply click on the VIEW option in your browsers toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the actual HTML of the page.

Text Formatting Tags

Tag

Description

Defines bold text

Defines big text

Defines emphasized text

Defines italic text

Defines small text

Defines strong text

Defines subscripted text

Defines superscripted text

Defines inserted text

Defines deleted text

Deprecated. Use <del> instead

Deprecated. Use <del> instead

Deprecated. Use styles instead

"Computer Output" Tags

Tag

Description

Defines computer code text

Defines keyboard text

Defines sample computer code

Defines teletype text

Defines a variable

Defines preformatted text

Deprecated. Use 

 instead

<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use <pre> instead<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><xmp><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use <pre> instead<o:p></o:p></span></p> </td> </tr> </tbody></table> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Citations, Quotations, and Definition Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 20%;" width="20%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 80%;" width="80%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_abbr.asp"><abbr></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an abbreviation<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_acronym.asp"><acronym></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an acronym<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_address.asp"><address></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an address element<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_bdo.asp"><bdo></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the text direction<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_blockquote.asp"><blockquote></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a long quotation<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_q.asp"><q></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a short quotation<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_phrase_elements.asp"><cite></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a citation<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_phrase_elements.asp"><dfn></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a definition term<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Some characters like the <></o:p></span></p> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To display a less than sign (<) in HTML, we have to use a character entity.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Character Entities<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A character entity has three parts: an ampersand (&amp;), an entity name or a # and an entity number, and finally a semicolon (;). <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To display a less than sign in an HTML document we must w<st1:personname st="on">rit</st1:personname>e: <b>&lt;</b> or <b>&#60;</b> <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.<o:p></o:p></span></p> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Note</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> that the entities are case sensitive. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This example lets you experiment with character entities: <a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_entities" target="_blank">Character Entities</a><span class="ieonly"> IE only</span><o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Non-breaking Space<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The most common character entity in HTML is the non-breaking space.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Normally HTML will truncate spaces in your text. If you w<st1:personname st="on">rit</st1:personname>e 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the character entity.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Most Common Character Entities:<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Result<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Entity Name<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Entity Number<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">non-breaking space<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#160;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><<o:p> </o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">less than<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&lt;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#60;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">><o:p> </o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">greater than<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&gt;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#62;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&amp;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">ampersand<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&amp;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#38;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">quotation mark<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&quot;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#34;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">'<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">apostrophe <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&apos; (does not work in IE)<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#39;<o:p></o:p></span></p> </td> </tr> </tbody></table> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Some Other Commonly Used Character Entities:<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Result<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Entity Name<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Entity Number<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#162;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">cent<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&cent;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#162;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#163;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">pound<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&pound;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#163;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#165;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">yen<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&yen;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#165;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#167;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">section<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&sect;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#167;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#169;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">copyright<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&copy;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#169;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#174;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">registered trademark<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&reg;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#174;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#215;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">multiplication<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&times;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#215;<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#247;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">division<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&divide;<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&#247;<o:p></o:p></span></p> </td> </tr> </tbody></table> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Anchor Tag and the Href Attribute<o:p></o:p></span></h2> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML uses the <a> (anchor) tag to create a link to another document.</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The syntax of creating an anchor: <o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="url">Text to be displayed</a><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This anchor defines a link to W3Schools:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/">Visit W3Schools!</a><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The line above will look like this in a browser:<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Target Attribute<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">With the target attribute, you can define <b>where</b> the linked document will be opened.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The line below will open the document in a new browser window:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/"></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">target="_blank">Visit W3Schools!</a><o:p></o:p></span></pre></td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Anchor Tag and the Name Attribute<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Below is the syntax of a named anchor:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a name="label">Text to be displayed</a><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The line below defines a named anchor:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a name="tips">Useful Tips Section</a><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">You should notice that a named anchor is not displayed in a special way.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/html_links.asp#tips"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Jump to the Useful Tips Section</a><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: <o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="#tips">Jump to the Useful Tips Section</a><o:p></o:p></span></pre></td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Basic Notes - Useful Tips<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two HTTP requests to the server, because the server will add a slash to the address and create a new request like this: href="http://www.w3schools.com/html/" <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If a browser cannot find a named anchor that has been specified, it goes to the top of the document. No error occurs. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Link Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 30%;" width="30%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_a.asp"><a></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an anchor<o:p></o:p></span></p> </td> </tr> </tbody></table> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Examples<o:p></o:p></span></h2> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Frames<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The disadvantages of using frames are:<o:p></o:p></span></p> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The web developer must keep track of more HTML documents <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">It is difficult to print the entire page <o:p></o:p></span></li></ul> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Frameset Tag<o:p></o:p></span></h2> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <frameset> tag defines how to divide the window into frames <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Each frameset defines a set of rows <b>or</b> columns <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The values of the rows/columns indicate the amount of screen area each row/column will occupy <o:p></o:p></span></li></ul> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Frame Tag<o:p></o:p></span></h2> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <frame> tag defines what HTML document to put into each frame <o:p></o:p></span></li></ul> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><frameset cols="25%,75%"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <frame src="frame_a.htm"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <frame src="frame_b.htm"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></frameset><o:p></o:p></span></pre></td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Basic Notes - Useful Tips<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Add the <noframes> tag for browsers that do not support frames.<o:p></o:p></span></p> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Important:</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Frame Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_frameset.asp"><frameset></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a set of frames<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_frame.asp"><frame></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a sub window (a frame)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_noframes.asp"><noframes></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a noframe section for browsers that do not handle frames<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_iframe.asp"><iframe></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an inline sub window (frame)<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tables<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><table border="1"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 2</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 2, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 2, cell 2</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></table><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <table class="MsoNormalTable" style="" border="1" cellpadding="0"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 2<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 2, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 2, cell 2<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tables and the Border Attribute<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To display a table with borders, you will have to use the border attribute:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><table border="1"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>Row 1, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>Row 1, cell 2</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></table><o:p></o:p></span></pre></td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Headings in a Table<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Headings in a table are defined with the <th> tag.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><table border="1"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><th>Heading</th><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><th>Another Heading</th><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 2</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 2, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 2, cell 2</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></table><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <table class="MsoNormalTable" style="" border="1" cellpadding="0"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal" style="text-align: center;" align="center"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Heading<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal" style="text-align: center;" align="center"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Another Heading<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 2<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 2, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 2, cell 2<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Empty Cells in a Table<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Table cells with no content are not displayed very well in most browsers.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><table border="1"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 2</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 2, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td></td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></table><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <table class="MsoNormalTable" style="" border="1" cellpadding="0"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 2<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 2, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> </td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible: <o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><table border="1"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 1, cell 2</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td>row 2, cell 1</td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><td> </td><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></tr><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></table><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <table class="MsoNormalTable" style="" border="1" cellpadding="0"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 1, cell 2<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">row 2, cell 1<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Basic Notes - Useful Tips<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a <a href="http://www.w3schools.com/xml/tryit.asp?filename=cd_catalog_island_thead" target="_blank">working example</a> in our XML tutorial.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Table Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_table.asp"><table></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_th.asp"><th></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table header<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_tr.asp"><tr></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table row<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_td.asp"><td></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table cell<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_caption.asp"><caption></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table caption<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_colgroup.asp"><colgroup></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines groups of table columns<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_col.asp"><col></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the attribute values for one or more columns in a table<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_thead.asp"><thead></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table head<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_tbody.asp"><tbody></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table body <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_tfoot.asp"><tfoot></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a table footer <o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML supports ordered, unordered and definition lists.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Unordered Lists<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An unordered list is a list of items. The list items are marked with bullets (typically small black circles).<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><ul><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><li>Coffee</li><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><li>Milk</li><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></ul><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Here is how it looks in a browser:<o:p></o:p></span></p> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Coffee <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Milk <o:p></o:p></span></li></ul> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Ordered Lists<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An ordered list is also a list of items. The list items are marked with numbers.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><ol><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><li>Coffee</li><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><li>Milk</li><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></ol><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Here is how it looks in a browser:<o:p></o:p></span></p> <ol start="1" type="1"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Coffee <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Milk <o:p></o:p></span></li></ol> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Definition Lists<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A definition list is <b>not</b> a list of items. This is a list of terms and explanation of the terms.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><dl><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><dt>Coffee</dt><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><dd>Black hot drink</dd><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><dt>Milk</dt><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><dd>White cold drink</dd><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></dl><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Here is how it looks in a browser:<o:p></o:p></span></p> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Coffee <o:p></o:p></span></p> <p class="MsoNormal" style="margin-left: 0.5in;"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Black hot drink <o:p></o:p></span></p> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Milk <o:p></o:p></span></p> <p class="MsoNormal" style="margin-left: 0.5in;"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">White cold drink <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">List Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_ol.asp"><ol></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an ordered list<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_ul.asp"><ul></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an unordered list<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_li.asp"><li></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a list item<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_dl.asp"><dl></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a definition list<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_dt.asp"><dt></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a definition term<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_dd.asp"><dd></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a definition description<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_dir.asp"><dir></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use <ul> instead<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_menu.asp"><menu></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use <ul> instead<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Forms<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A form is an area that can contain form elements.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A form is defined with the <form> tag.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><form><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><span style=""> </span><input><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><span style=""> </span><input><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></form><o:p></o:p></span></pre></td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Input<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.<o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Text Fields<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Text fields are used when you want the user to type letters, numbers, etc. in a form.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><form><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">First name: <o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="text" name="firstname"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><br /><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Last name: <o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="text" name="lastname"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></form><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <form> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">First name: <input name="firstname" type="text"> <br />Last name: <input name="lastname" type="text"><o:p></o:p></span></p> </form> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default. <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Radio Buttons<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Radio Buttons are used when you want the user to select one of a limited number of choices.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><form><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="radio" name="sex" value="male"> Male<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><br /><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="radio" name="sex" value="female"> Female<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></form><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <form> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input name="sex" value="male" type="radio">Male <br /><input name="sex" value="female" type="radio">Female <o:p></o:p></span></p> </form> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Note that only one option can be chosen. <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Checkboxes <o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Checkboxes are used when you want the user to select one or more options of a limited number of choices.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><form><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="checkbox" name="bike"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">I have a bike<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><br /><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="checkbox" name="car"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">I have a car<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></form><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <form> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input name="bike" value="ON" type="checkbox">I have a bike <br /><input name="car" value="ON" type="checkbox">I have a car <o:p></o:p></span></p> </form> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Form's Action Attribute and the Submit Button<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><form name="input" action="html_form_action.asp"></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">method="get"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Username: <o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="text" name="user"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="submit" value="Submit"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></form><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How it looks in a browser:<o:p></o:p></span></p> <form> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Username: <input name="user" type="text"><input action="html_form_action.asp" method="get" type="submit"><o:p></o:p></span></p> </form> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Form Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_form.asp"><form></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a form for user input<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_input.asp"><input></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an input field<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_textarea.asp"><textarea></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a text-area (a multi-line text input control)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_label.asp"><label></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a label to a control<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_fieldset.asp"><fieldset></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a fieldset<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_legend.asp"><legend></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a caption for a fieldset<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_select.asp"><select></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a selectable list (a drop-down box)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_optgroup.asp"><optgroup></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an option group<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_option.asp"><option></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an option in the drop-down box<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_button.asp"><button></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a push button<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><isindex><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use <input> instead<o:p></o:p></span></p> </td> </tr> </tbody></table> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Image Tag and the Src Attribute <o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">In HTML, images are defined with the <img> tag. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <img> tag is empty, which means that it contains attributes only and it has no closing tag. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The syntax of defining an image:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><img src="url" /><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Alt Attribute <o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><img src="boat.gif" alt="Big Boat" /><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Basic Notes - Useful Tips<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Image Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_img.asp"><img></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an image<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_map.asp"><map></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an image map<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_area.asp"><area></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a clickable area inside an image map<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A good background can make a Web site look really great.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Backgrounds<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.<o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Bgcolor<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><body bgcolor="#000000"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><body bgcolor="rgb(0,0,0)"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><body bgcolor="black"><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The lines above all set the background-color to black. <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Background<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><body background="clouds.gif"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><body background="http://www.w3schools.com/clouds.gif"><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The URL can be relative (as in the first line above) or absolute (as in the second line above).<o:p></o:p></span></p> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Note: </span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you want to use a background image, you should keep in mind:<o:p></o:p></span></p> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Will the background image increase the loading time too much? <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Will the background image look good with other images on the page? <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Will the background image look good with the text colors on the page? <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Will the background image look good when it is repeated on the page? <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Will the background image take away the focus from the text? <o:p></o:p></span></li></ul> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Basic Notes - Useful Tips<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color Values<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This table shows the result of combining Red, Green, and Blue light sources:.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 50%;" width="50%"> <p class="MsoNormal" style="text-align: center;" align="center"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 25%;" width="25%"> <p class="MsoNormal" style="text-align: center;" align="center"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color HEX<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 25%;" width="25%"> <p class="MsoNormal" style="text-align: center;" align="center"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color RGB<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: black none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#000000<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(0,0,0)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: red none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#FF0000<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(255,0,0)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: lime none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#00FF00<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(0,255,0)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: blue none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#0000FF<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(0,0,255)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: yellow none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#FFFF00<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(255,255,0)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: aqua none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#00FFFF<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(0,255,255)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: fuchsia none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#FF00FF<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(255,0,255)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: silver none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#C0C0C0<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(192,192,192)<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: white none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#FFFFFF<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">rgb(255,255,255)<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color Names<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A collection of color names is supported by most browsers.<o:p></o:p></span></p> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Note:</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> Only 16 <b>color names</b> are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the <b>Color HEX</b> value.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 50%;" width="50%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 25%;" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color HEX<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 25%;" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color Name<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: aliceblue none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#F0F8FF<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">AliceBlue<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: antiquewhite none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#FAEBD7<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">AntiqueWhite<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: aquamarine none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#7FFFD4<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Aquamarine<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: black none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#000000<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Black<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: blue none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#0000FF<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Blue<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: blueviolet none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#8A2BE2<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">BlueViolet<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; background: brown none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">#A52A2A<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Brown<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Web Safe Colors<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 different "reserved" fixed system colors (about 20 each). <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">We are not sure how important this is now, since more and more computers are equipped with the ability to display millions of different colors, but the choice is left to you. <o:p></o:p></span></p> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Colors are displayed combining RED, GREEN, and BLUE light sources. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Color Values <o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF). <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML Basic Document<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><html> <br /><head> <br /><title>Document name goes here</title> <br /></head><o:p></o:p></span></p> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><body> <br />Visible text goes here <br /></body> <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></html><o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Heading Elements<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><h1>Largest Heading</h1> <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><h2> . . . </h2> <br /><h3> . . . </h3> <br /><h4> . . . </h4> <br /><h5> . . . </h5><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><h6>Smallest Heading</h6><o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Text Elements<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><p>This is a paragraph</p> <br /><br /> (line break) <br /><hr /> (horizontal rule) <br /><pre>This text is preformatted</pre> <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Logical Styles<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><em>This text is emphasized</em> <br /><strong>This text is strong</strong> <br /><code>This is some computer code</code> <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Physical Styles<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><b>This text is bold</b> <br /><i>This text is italic</i> <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Links, Anchors, and Image Elements<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.example.com/">This is a Link</a> <br /><a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a> <br /><a href="mailto:webmaster@example.com">Send e-mail</a> <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A named anchor: <br /><a name="tips">Useful Tips Section</a> <br /><a href="#tips">Jump to the Useful Tips Section</a><o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Unordered list<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><ul> <br /><li>First item</li> <br /><li>Next item</li> <br /></ul> <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Ordered list<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><ol> <br /><li>First item</li> <br /><li>Next item</li> <br /></ol> <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Definition list<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><dl> <br /><dt>First term</dt> <br /><dd>Definition</dd> <br /><dt>Next term</dt> <br /><dd>Definition</dd> <br /></dl> <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tables<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><table border="1"> <br /><tr> <br /><th>someheader</th> <br /><th>someheader</th> <br /></tr> <br /><tr> <br /><td>sometext</td> <br /><td>sometext</td> <br /></tr> <br /></table><o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Frames<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><frameset cols="25%,75%"> <br /> <frame src="page1.htm"> <br /> <frame src="page2.htm"> <br /></frameset><o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Forms<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><form action="http://www.example.com/test.asp" method="post/get"> <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> <br /><input type="password"> <br /><input type="checkbox" checked="checked"> <br /><input type="radio" checked="checked"> <br /><input type="submit"> <br /><input type="reset"> <br /><input type="hidden"> <br /> <br /><select> <br /><option>Apples <br /><option>Bananas <br /><option>Cherries <br /></select><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><textarea name="Comment" rows="60" cols="20"></textarea> <br /> <br /></form><o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Entities<o:p></o:p></span></h3> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">&lt; is the same as < <br />&gt; is the same as > <br />&#169; is the same as &#169; <o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Other Elements<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><!-- This is a comment --><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><blockquote> <br />Text quoted from some source. <br /></blockquote><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><address> <br />Address 1<br /> <br />Address 2<br /> <br />City<br /> <br /></address><o:p></o:p></span></p> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML columns.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML Layout - Using Tables<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="0" cellpadding="0" width="100%"> <tbody><tr style=""> <td style="padding: 5.25pt; width: 50%;" valign="top" width="50%"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A part of this page is formatted with two columns, like a newspaper page.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">As you can see on this page, there is a left column and a right column.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This text is displayed in the left column.<o:p></o:p></span></p> </td> <td style="padding: 5.25pt; width: 50%;" valign="top" width="50%"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An HTML <table> is used to divide a part of this Web page into two columns. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The trick is to use a table without borders, and maybe a little extra cell-padding.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">No matter how much text you add to this page, it will stay inside its column borders.<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Same Layout - Color Added<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="0" cellpadding="0" width="100%"> <tbody><tr style=""> <td style="padding: 5.25pt; width: 50%;" valign="top" width="50%"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A part of this page is formatted with two columns, like a newspaper page.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">As you can see at this page, there is a left column and a right column.<o:p></o:p></span></p> </td> <td style="padding: 5.25pt; background: aqua none repeat scroll 0% 0%; width: 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" valign="top" width="50%"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An HTML <table> is used to divide a part of this Web page into two columns. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This text is displayed in the right column.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The trick is to use a table without borders, and maybe a little extra cell-padding.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">No matter how much text you add to this page, it will stay inside its column borders.<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The HTML <span> Tag<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">With HTML code like this, you can specify both the size and the type of the browser output :<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><p><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><span style="font-family:Verdana;font-size:85%;"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This is a paragraph.<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></span><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></p><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><p><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><span style="font-family:Times;font-size:100%;"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This is another paragraph.<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></span><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></p><o:p></o:p></span></pre></td> </tr> </tbody></table> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Font Attributes<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Example<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Purpose<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">size="number"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">size="2"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the font size<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">size="+number"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">size="+1"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Increases the font size<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">size="-number"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">size="-1"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Decreases the font size<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">face="face-name"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">face="Times"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the font-name<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">color="color-value"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">color="#eeff00"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the font color<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">color="color-name"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">color="red"<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the font color<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <span> Tag Should NOT be Used<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <span> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The World Wide Web Consortium (W3C) has removed the <span> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How to Use Styles<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:<o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">External Style Sheet<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><head><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><link rel="stylesheet" type="text/css"></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">href="mystyle.css"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></head><o:p></o:p></span></pre></td> </tr> </tbody></table> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Internal Style Sheet<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><head><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><style type="text/css"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">body {background-color: red}<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">p {margin-left: 20px}<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></style><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></head><o:p></o:p></span></pre></td> </tr> </tbody></table> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Inline Styles<o:p></o:p></span></h3> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An inline style should be used when a unique style is to be applied to a single occurrence of an element.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><p style="color: red; margin-left: 20px"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This is a paragraph<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></p><o:p></o:p></span></pre></td> </tr> </tbody></table> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Style Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_style.asp"><style></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a style definition<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_link.asp"><link></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a resource reference<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_div.asp"><div></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a section in a document<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_span.asp"><span></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a section in a document<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_font.asp"><span></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use styles instead<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_basefont.asp"><basefont></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use styles instead <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_center.asp"><center></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use styles instead<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Head Element <o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The head element contains general information, also called meta-information, about a document. <st1:place st="on">Meta</st1:place> means "information about". <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">You can say that meta-data means information about data, or meta-information means information about information. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Information Inside the Head Element <o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The elements inside the head element should not be displayed by a browser. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">According to the HTML standard, only a few tags are legal inside the head section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Look at the following illegal construct: <o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><head><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><span style=""> </span><p>This is some text</p><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></head><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">In this case the browser has two options:<o:p></o:p></span></p> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Display the text because it is inside a paragraph element <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Hide the text because it is inside a head element <o:p></o:p></span></li></ul> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you put an HTML element like <h1> or <p> inside a head element like this, most browsers will display it, even if it is illegal.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Should browsers forgive you for errors like this? We don't think so. Others do.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Head Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 25%;" valign="top" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 80%;" valign="top" width="80%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_head.asp"><head></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines information about the document<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_title.asp"><title></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the document title<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_base.asp"><base></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a base URL for all the links on a page<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_link.asp"><link></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a resource reference<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_meta.asp"><meta></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines meta information<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 25%;" valign="top" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 75%;" valign="top" width="75%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt; width: 25%;" valign="top" width="25%"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_doctype.asp"><!DOCTYPE></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt; width: 75%;" valign="top" width="75%"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines the document type. This tag goes before the <html> start tag.<o:p></o:p></span></p> </td> </tr> </tbody></table> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <st1:place st="on">Meta</st1:place> Element <o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">As we explained in the previous chapter, the head element contains general information (meta-information) about a document. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML also includes a meta element that goes inside the head element. The purpose of the meta element is to provide meta-information about the document. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Most often the meta element is used to provide information that is relevant to browsers or.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Keywords for Search Engines<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Some search engines on the WWW will use the name and content attributes of the meta tag to index your pages.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 2.25pt;" valign="top"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This meta element defines a description of your page: </span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"><o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 2.25pt;" valign="top"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This meta element defines keywords for your page:</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"><o:p></o:p></span></p> </td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The intention of the name and content attributes is to describe the content of a page. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">However, since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Unknown <st1:place st="on">Meta</st1:place> Attributes<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Sometimes you will see meta attributes that are unknown to you like this:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 2.25pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><meta name="secu<st1:personname w:st=">rit</st1:personname>y" content="low"> <o:p></o:p></span></p> </td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Then you just have to accept that this is something unique to the site or to the author of the site, and that it has probably no relevance to you. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">You can see a complete list of the meta element attributes in our <br /><span style=""> </span><o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML Links<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">When you click on a link in an HTML document like this: <a href="http://www.w3schools.com/html/lastpage.htm" target="_blank">Last Page</a>, an underlying <a> tag points to a place (an address) on the Web with an href attribute value like this: <a href="lastpage.htm">Last Page</a>.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The Last Page link in the example is a link that is relative to the Web site that you are browsing, and your browser will construct a full Web address like <a href="http://www.w3schools.com/html/lastpage.htm" target="_blank">http://www.w3schools.com/html/lastpage.htm</a> to access the page.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Uniform Resource Locators<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Something called a Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web. A full Web address like this: <a href="http://www.w3schools.com/html/lastpage.htm" target="_blank">http://www.w3schools.com/html/lastpage.htm</a> follows these syntax rules:<o:p></o:p></span></p> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">scheme</span></b><tt><b><span style="font-size: 10pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">://</span></b></tt><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">host.domain</span></b><tt><b><span style="font-size: 10pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">:</span></b></tt><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">port</span></b><tt><b><span style="font-size: 10pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">/</span></b></tt><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">path</span></b><tt><b><span style="font-size: 10pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">/</span></b></tt><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">filename</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <b>scheme</b> is defining the <b>type</b> of Internet service. The most common type is <b>http</b>. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <b>domain</b> is defining the Internet <b>domain name</b> like w3schools.com.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <b>host</b> is defining the domain host. If omitted, the default host for http is <b>www</b>.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <b>:port</b> is defining the <b>port number </b>at the host. The port number is normally omitted. The default port number for http is <b>80</b>. <o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <b>path</b> is defining a <b>path</b> (a sub directory) at the server. If the path is omitted, the resource (the document) must be located at the root directory of the Web site.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <b>filename</b> is defining the name of a document. The default filename might be default.asp, or index.html or something else depending on the settings of the Web server.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">URL Schemes<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Some examples of the most common schemes can be found below:<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Schemes<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Access<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">file<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">a file on your local PC<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">ftp<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">a file on an FTP server<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">http<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">a file on a World Wide Web Server<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">gopher<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">a file on a Gopher server<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">news<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">a Usenet newsgroup<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">telnet<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">a Telnet connection<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">WAIS<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">a file on a WAIS server<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Accessing a Newsgroup<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The following HTML code:<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="news:alt.html">HTML Newsgroup</a><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">creates a link to a newsgroup like this <a href="news:alt.html">HTML Newsgroup</a>.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Downloading with FTP<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The following HTML code:<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">creates a link to download a file like this: <a href="ftp://www.w3schools.com/ftp/winzip.exe" target="_blank">Download WinZip</a>.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">(The link doesn't work. Don't try it. It is just an example. W3Schools doesn't really have an ftp directory.)<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Link to your Mail system<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The following HTML code:<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="mailto:someone@w3schools.com">someone@w3schools.com</a><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">creates a link to your own mail system like this:<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="mailto:someone@w3schools.com">someone@w3schools.com</a><o:p></o:p></span></p> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Add scripts to HTML pages to make them more dynamic and interactive.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Insert a Script into HTML Page<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A script in HTML is defined with the <script> tag. Note that you will have to use the type attribute to specify the scripting language.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;"><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><html><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><head><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></head><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><body><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><script type="text/javascript"><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">document.w<st1:personname st="on">rit</st1:personname>e("Hello World!")<o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></script><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></body><o:p></o:p></span></pre><pre><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;"></html><o:p></o:p></span></pre></td> </tr> </tbody></table> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The script above will produce this output:<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Hello World!<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How to Handle Older Browsers<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A browser that does not recognize the <script> tag at all, will display the <script> tag's content as text on the page. To prevent the browser from doing this, you should hide the script in comment tags. An old browser (that does not recognize the <script> tag) will ignore the comment and it will not w<st1:personname st="on">rit</st1:personname>e the tag's content on the page, while a new browser will understand that the script should be executed, even if it is surrounded by comment tags.<o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Example<o:p></o:p></span></h3> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 2.25pt;" valign="top"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">JavaScript:</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <br /> <script type="text/javascript"> <br /> <!-- <br /> document.w<st1:personname st="on">rit</st1:personname>e("Hello World!") <br /> //--> <br /> </script> <o:p></o:p></span></p> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">VBScript: <br /> </span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><script type="text/vbscript"> <br /> <!-- <br /> document.w<st1:personname st="on">rit</st1:personname>e("Hello World!") <br /> '--> <br /> </script><o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <noscript> Tag<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">In addition to hiding the script inside a comment, you can also add a <noscript> tag.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is used for browsers that recognize the <script> tag, but do not support the script inside, so these browsers will display the text inside the <noscript> tag instead. However, if a browser supports the script inside the <script> tag it will ignore the <noscript> tag.<o:p></o:p></span></p> <h3><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Example<o:p></o:p></span></h3> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 2.25pt;" valign="top"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">JavaScript:</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <br /> <script type="text/javascript"> <br /> <!-- <br /> document.w<st1:personname st="on">rit</st1:personname>e("Hello World!") <br /> //--> <br /> </script> <br /> <noscript>Your browser does not support JavaScript!</noscript> <o:p></o:p></span></p> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">VBScript: <br /> </span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><script type="text/vbscript"> <br /> <!-- <br /> document.w<st1:personname st="on">rit</st1:personname>e("Hello World!") <br /> '--> <br /> </script> <br /> <noscript>Your browser does not support VBScript!</noscript><o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script Tags<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Tag<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_script.asp"><script></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines a script<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_noscript.asp"><noscript></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an alternate text if the script is not executed<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_object.asp"><object></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines an embedded object<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_param.asp"><param></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Defines run-time settings (parameters) for an object<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><a href="http://www.w3schools.com/tags/tag_applet.asp"><applet></a><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Deprecated. Use <object> instead<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions):<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Core Attributes<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Not valid in base, head, html, meta, param, script, style, and title elements.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 20%;" valign="top" width="20%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 35%;" valign="top" width="35%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Value<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 45%;" valign="top" width="45%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">class<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">class_rule </span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">or<i> style_rule</i><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The class of the element<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">id<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">id_name</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A unique id for the element<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">style<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">style_definition</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">An inline style definition <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">title<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">tooltip_text </span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">A text to display in a tool tip <o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Language Attributes<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 20%;" valign="top" width="20%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 35%;" valign="top" width="35%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Value<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 45%;" valign="top" width="45%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">dir<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">ltr | rtl<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Sets the text direction<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">lang<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">language_code</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Sets the language code<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Keyboard Attributes<o:p></o:p></span></h2> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 20%;" valign="top" width="20%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 35%;" valign="top" width="35%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Value<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 45%;" valign="top" width="45%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">accesskey<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">character</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Sets a keyboard shortcut to access an element <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">tabindex<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">number</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Sets the tab order of an element <o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">New to HTML 4.0 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions.<o:p></o:p></span></p> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Window Events<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Only valid in body and frameset elements.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 25%;" valign="top" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 15%;" valign="top" width="15%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Value<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 60%;" valign="top" width="60%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onload<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when a document loads <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onunload<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when a document unloads <o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Form Element Events<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Only valid in form elements.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 25%;" valign="top" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 15%;" valign="top" width="15%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Value<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 60%;" valign="top" width="60%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onchange<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when the element changes <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onsubmit<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when the form is submitted <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onreset<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when the form is reset <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onselect<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script </span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when the element is selected <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onblur<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script </span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when the element loses focus <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onfocus<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script </span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Script to be run when the element gets focus<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Keyboard Events<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 25%;" valign="top" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 15%;" valign="top" width="15%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Value<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 60%;" valign="top" width="60%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onkeydown<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when key is pressed<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onkeypress<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when key is pressed and released<o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onkeyup<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when key is released<o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Mouse Events<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title elements.<o:p></o:p></span></p> <table class="MsoNormalTable" style="width: 100%;" border="1" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr style=""> <td style="padding: 0.75pt; width: 25%;" valign="top" width="25%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Attribute<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 15%;" valign="top" width="15%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Value<o:p></o:p></span></b></p> </td> <td style="padding: 0.75pt; width: 60%;" valign="top" width="60%"> <p class="MsoNormal"><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Description<o:p></o:p></span></b></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onclick<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do on a mouse click <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">ondblclick<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do on a mouse double-click <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onmousedown<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when mouse button is pressed <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onmousemove<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when mouse pointer moves <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onmouseout<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when mouse pointer moves out of an element <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onmouseover<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when mouse pointer moves over an element <o:p></o:p></span></p> </td> </tr> <tr style=""> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">onmouseup<o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">script</span></i><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <o:p></o:p></span></p> </td> <td style="padding: 0.75pt;" valign="top"> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">What to do when mouse button is released <o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Below is a reference of ASCII characters in URL-encoding form (hexadecimal format).<o:p></o:p></span></p> <p class="intro"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Hexadecimal values can be used to display non-standard letters and characters in browsers and plug-ins.<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Try It<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Type some text or an ASCII value in the input field below, and click on the "URL Encode" button to see the URL-encoding.<o:p></o:p></span></p> <form> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><textarea rows="7" cols="50" name="txt">This is a text </textarea><o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><input action="html_urlresult.asp" value="URL Encode" method="post" name="submit" type="submit"><o:p></o:p></span></p> </form> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Your First Step: A Personal Web Server<o:p></o:p></span></h2> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you want other people to view your pages, you must publish them. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">To publish your work, you have to copy your files to a web server. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Your own PC can act as a web server if it is connected to a network. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you are running Windows 98, you can use the PWS (Personal Web Server). <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">PWS is hiding in the PWS folder in your Windows CD. <o:p></o:p></span></li></ul> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Personal Web Server (PWS)<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">PWS turns any Windows computer into a Web server. PWS is easy to install and ideal for developing and testing Web applications. PWS has been optimized for workstation use, but has all the requirements of a full Web server. It also runs Active Server Pages (ASP) just like its larger brother IIS. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">How to Install a Personal Web Server (PWS):<o:p></o:p></span></h2> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Browse your Windows installation to see if you have installed PWS. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If not, install PWS from the PWS directory on your Windows CD. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Follow the instructions and get your Personal Web Server up and running. <o:p></o:p></span></li></ul> <p><b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Note:</span></b><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> Microsoft Windows XP Home Edition does not come with the option to turn your computer into a PWS!<o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Internet Information Server (IIS)<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Windows 2000's built-in Web server IIS, makes it easy to build large applications for the Web. Both PWS and IIS include ASP, a server-side scripting standard that can be used to create dynamic and interactive Web applications. IIS is also available for Windows NT. <o:p></o:p></span></p> <div class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"> <hr align="center" size="2" width="100%"> </span></div> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Your Next Step: A Professional Web Server <o:p></o:p></span></h2> <ul type="disc"><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you do not want to use PWS or IIS, you must upload your files to a public server. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">Most Internet Service Providers (ISP's) will offer to host your web pages. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If your employer has an Internet Server, you can ask him to host your Web site. <o:p></o:p></span></li><li class="MsoNormal" style=""><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">If you are really serious about this, you should install your own Internet Server. <o:p></o:p></span></li></ul> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;"><o:p> </o:p></span></p> <h2><span style="font-size: 12pt; font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML Summary<o:p></o:p></span></h2> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">This tutorial has taught you how to use HTML to create your own web site.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display.<o:p></o:p></span></p> <p><span style="font-family: &quot;Garamond&quot;,&quot;serif&quot;;">The key to HTML is the tags, which indicates what content is coming up.<o:p></o:p></span></p> </p> <div style='clear: both;'></div> </div> <div class='post-footer'> <p class='post-footer-line post-footer-line-1'> <span class='post-author'> Posted by Sumedh </span> <span class='post-timestamp'> at <a class='timestamp-link' href='https://all-free-tutorials.blogspot.com/2009/01/html-tutorial.html' title='permanent link'>2:42&#8239;AM</a> </span> <span class='post-comment-link'> </span> <span class='post-backlinks post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1921728392'> <a href='https://www.blogger.com/post-edit.g?blogID=8553308360367166330&postID=3183791171740337157&from=pencil' title='Edit Post'> <span class='quick-edit-icon'>&#160;</span> </a> </span> </span> </p> <p class='post-footer-line post-footer-line-2'> <span class='post-labels'> Labels: <a href='https://all-free-tutorials.blogspot.com/search/label/HTML' rel='tag'>HTML</a> </span> </p> <p class='post-footer-line post-footer-line-3'></p> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4> 0 comments: </h4> <dl id='comments-block'> </dl> <p class='comment-footer'> <a href='https://www.blogger.com/comment/fullpage/post/8553308360367166330/3183791171740337157' onclick=''>Post a Comment</a> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='https://all-free-tutorials.blogspot.com/2009/01/sap-script-tutorial.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://all-free-tutorials.blogspot.com/2009/01/ajax-tutorial.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a> </span> <a class='home-link' href='https://all-free-tutorials.blogspot.com/'>Home</a> </div> <div class='kosong'></div> <div class='post-feeds'> <div class='feed-links'> Subscribe to: <a class='feed-link' href='https://all-free-tutorials.blogspot.com/feeds/3183791171740337157/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a> </div> </div> </div><div class='widget AdSense' data-version='1' id='AdSense2'> <div class='widget-content'> <script type="text/javascript"><!-- google_ad_client="pub-4684889708406489"; google_ad_host="pub-1556223355139109"; google_ad_host_channel="00000"; google_ad_width=336; google_ad_height=280; google_ad_format="336x280_as"; google_ad_type="text"; google_color_border="FFFFFF"; google_color_bg="FFFFFF"; google_color_link="0000B0"; google_color_url="666666"; google_color_text="666666"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML1'> <h2 class='title'>Search</h2> <div class='widget-content'> </div> <div class='clear'></div> </div><div class='widget BlogList' data-version='1' id='BlogList1'> <h2 class='title'>My Blog List</h2> <div class='widget-content'> <div class='blog-list-container' id='BlogList1_container'> <ul id='BlogList1_blogs'> </ul> <div class='clear'></div> </div> </div> </div></div> </div> <div id='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget BlogSearch' data-version='1' id='BlogSearch1'> <h2 class='title'>Search This Blog</h2> <div class='widget-content'> <div id='BlogSearch1_form'> <form action='https://all-free-tutorials.blogspot.com/search' class='gsc-search-box' target='_top'> <table cellpadding='0' cellspacing='0' class='gsc-search-box'> <tbody> <tr> <td class='gsc-input'> <input autocomplete='off' class='gsc-input' name='q' size='10' title='search' type='text' value=''/> </td> <td class='gsc-search-button'> <input class='gsc-search-button' title='search' type='submit' value='Search'/> </td> </tr> </tbody> </table> </form> </div> </div> <div class='clear'></div> </div><div class='widget Subscribe' data-version='1' id='Subscribe1'> <div style='white-space:nowrap'> <h2 class='title'>Subscribe To</h2> <div class='widget-content'> <div class='subscribe-wrapper subscribe-type-POST'> <div class='subscribe expanded subscribe-type-POST' id='SW_READER_LIST_Subscribe1POST' style='display:none;'> <div class='top'> <span class='inner' onclick='return(_SW_toggleReaderList(event, "Subscribe1POST"));'> <img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/> <img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/> Posts </span> <div class='feed-reader-links'> <a class='feed-reader-link' href='https://www.netvibes.com/subscribe.php?url=https%3A%2F%2Fall-free-tutorials.blogspot.com%2Ffeeds%2Fposts%2Fdefault' target='_blank'> <img src='https://resources.blogblog.com/img/widgets/subscribe-netvibes.png'/> </a> <a class='feed-reader-link' href='https://add.my.yahoo.com/content?url=https%3A%2F%2Fall-free-tutorials.blogspot.com%2Ffeeds%2Fposts%2Fdefault' target='_blank'> <img src='https://resources.blogblog.com/img/widgets/subscribe-yahoo.png'/> </a> <a class='feed-reader-link' href='https://all-free-tutorials.blogspot.com/feeds/posts/default' target='_blank'> <img align='absmiddle' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/> Atom </a> </div> </div> <div class='bottom'></div> </div> <div class='subscribe' id='SW_READER_LIST_CLOSED_Subscribe1POST' onclick='return(_SW_toggleReaderList(event, "Subscribe1POST"));'> <div class='top'> <span class='inner'> <img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/> <span onclick='return(_SW_toggleReaderList(event, "Subscribe1POST"));'> <img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/> Posts </span> </span> </div> <div class='bottom'></div> </div> </div> <div class='subscribe-wrapper subscribe-type-PER_POST'> <div class='subscribe expanded subscribe-type-PER_POST' id='SW_READER_LIST_Subscribe1PER_POST' style='display:none;'> <div class='top'> <span class='inner' onclick='return(_SW_toggleReaderList(event, "Subscribe1PER_POST"));'> <img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/> <img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/> Comments </span> <div class='feed-reader-links'> <a class='feed-reader-link' href='https://www.netvibes.com/subscribe.php?url=https%3A%2F%2Fall-free-tutorials.blogspot.com%2Ffeeds%2F3183791171740337157%2Fcomments%2Fdefault' target='_blank'> <img src='https://resources.blogblog.com/img/widgets/subscribe-netvibes.png'/> </a> <a class='feed-reader-link' href='https://add.my.yahoo.com/content?url=https%3A%2F%2Fall-free-tutorials.blogspot.com%2Ffeeds%2F3183791171740337157%2Fcomments%2Fdefault' target='_blank'> <img src='https://resources.blogblog.com/img/widgets/subscribe-yahoo.png'/> </a> <a class='feed-reader-link' href='https://all-free-tutorials.blogspot.com/feeds/3183791171740337157/comments/default' target='_blank'> <img align='absmiddle' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/> Atom </a> </div> </div> <div class='bottom'></div> </div> <div class='subscribe' id='SW_READER_LIST_CLOSED_Subscribe1PER_POST' onclick='return(_SW_toggleReaderList(event, "Subscribe1PER_POST"));'> <div class='top'> <span class='inner'> <img class='subscribe-dropdown-arrow' src='https://resources.blogblog.com/img/widgets/arrow_dropdown.gif'/> <span onclick='return(_SW_toggleReaderList(event, "Subscribe1PER_POST"));'> <img align='absmiddle' alt='' border='0' class='feed-icon' src='https://resources.blogblog.com/img/icon_feed12.png'/> Comments </span> </span> </div> <div class='bottom'></div> </div> </div> <div style='clear:both'></div> </div> </div> <div class='clear'></div> </div><div class='widget AdSense' data-version='1' id='AdSense1'> <div class='widget-content'> <script type="text/javascript"><!-- google_ad_client="pub-4684889708406489"; google_ad_host="pub-1556223355139109"; google_ad_width=200; google_ad_height=200; google_ad_format="200x200_as"; google_ad_type="text"; google_ad_host_channel="0001"; google_color_border="FFFFFF"; google_color_bg="FFFFFF"; google_color_link="336699"; google_color_url="336699"; google_color_text="333333"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <div class='clear'></div> </div> </div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <h2>Blog Archive</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'>&#9660;&#160;</span> </a> <a class='post-count-link' href='https://all-free-tutorials.blogspot.com/2009/'>2009</a> <span class='post-count' dir='ltr'>(16)</span> <ul> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'>&#9660;&#160;</span> </a> <a class='post-count-link' href='https://all-free-tutorials.blogspot.com/2009/01/'>January</a> <span class='post-count' dir='ltr'>(16)</span> <ul class='posts'> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/business-application-programming.html'>Business Application Programming Interface</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/sap-script-tutorial.html'>SAP Script Tutorial</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/html-tutorial.html'>HTML Tutorial</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/ajax-tutorial.html'>Ajax Tutorial</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/asp-tutorial.html'>ASP Tutorial</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/css-tutorial-2.html'>CSS Tutorial 2</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/xhtml-tutorial.html'>XHTML Tutorial</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/servlet.html'>Servlet</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/eclipse-tutorial.html'>Eclipse Tutorial</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/getting-started-with-eclipse.html'>GETTING STARTED WITH ECLIPSE</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/javaserver-pages-jsp-v20-syntax.html'>JavaServer Pages (JSP ) v2.0 Syntax Reference</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/siege-fx-reference-script.html'>Siege FX Reference Script Architecture/Terminology</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/siege-fx-tutorial-3.html'>Siege FX Tutorial #3</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/siege-fx-tutorial-2.html'>Siege FX Tutorial #2</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/siege-fx-tutorial-1.html'>Siege FX Tutorial #1</a></li> <li><a href='https://all-free-tutorials.blogspot.com/2009/01/struts-tutorials-jakarta-struts.html'>Struts Tutorials - Jakarta Struts Tutorial</a></li> </ul> </li> </ul> </li> </ul> <ul> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> &#9658;&#160; </span> </a> <a class='post-count-link' href='https://all-free-tutorials.blogspot.com/2008/'>2008</a> <span class='post-count' dir='ltr'>(13)</span> <ul> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> &#9658;&#160; </span> </a> <a class='post-count-link' href='https://all-free-tutorials.blogspot.com/2008/12/'>December</a> <span class='post-count' dir='ltr'>(4)</span> </li> </ul> <ul> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> &#9658;&#160; </span> </a> <a class='post-count-link' href='https://all-free-tutorials.blogspot.com/2008/11/'>November</a> <span class='post-count' dir='ltr'>(4)</span> </li> </ul> <ul> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> &#9658;&#160; </span> </a> <a class='post-count-link' href='https://all-free-tutorials.blogspot.com/2008/09/'>September</a> <span class='post-count' dir='ltr'>(5)</span> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> </div> </div><div class='widget Label' data-version='1' id='Label1'> <h2>Labels</h2> <div class='widget-content'> <ul> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Accessing%20THE%20WINDOWS%20SYSTEM%20ACCOUNT'> Accessing THE WINDOWS SYSTEM ACCOUNT </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/ADA'> ADA </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Ajax'> Ajax </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Analog%20%20Clock%20Tutorial'> Analog Clock Tutorial </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/ASP'> ASP </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/BAPI'> BAPI </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/BusinessObjects'> BusinessObjects </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Computer'> Computer </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/CSS'> CSS </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/CSS%20Tutorial'> CSS Tutorial </a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Eclipse'> Eclipse </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Gaining%20access%20to%20the%20command%20prompt%20when%20it%20has%20been%20disabled'> Gaining access to the command prompt when it has been disabled </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/HTML'> HTML </a> <span dir='ltr'>(2)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/JavaScript'> JavaScript </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/JSP'> JSP </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/MATLAB'> MATLAB </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Oracle9i'> Oracle9i </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Photography'> Photography </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/SAP%20Script'> SAP Script </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Siege%20FX'> Siege FX </a> <span dir='ltr'>(4)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Struts'> Struts </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Tutorial'> Tutorial </a> <span dir='ltr'>(13)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/Windows'> Windows </a> <span dir='ltr'>(1)</span> </li> <li> <a dir='ltr' href='https://all-free-tutorials.blogspot.com/search/label/XHTML'> XHTML </a> <span dir='ltr'>(1)</span> </li> </ul> <div class='clear'></div> </div> </div><div class='widget HTML' data-version='1' id='HTML3'> <h2 class='title'>Infolinks In Text Ads</h2> <div class='widget-content'> <script type="text/javascript"> var infolink_pid=141357; var infolink_wsid = 0; </script> <script type="text/javascript" src="http://resources.infolinks.com/js/infolinks_main.js"> </script> </div> <div class='clear'></div> </div> </div> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'>&#160;</div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <div class='footer no-items section' id='footer'> </div> </div> </div></div> <!-- end outer-wrapper --> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/91768132-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY5qkxg4DjrqYjHiTZPj36yRP2Crhw:1737165304841';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8553308360367166330','//all-free-tutorials.blogspot.com/2009/01/html-tutorial.html','8553308360367166330'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8553308360367166330', 'title': 'All free tutorials', 'url': 'https://all-free-tutorials.blogspot.com/2009/01/html-tutorial.html', 'canonicalUrl': 'http://all-free-tutorials.blogspot.com/2009/01/html-tutorial.html', 'homepageUrl': 'https://all-free-tutorials.blogspot.com/', 'searchUrl': 'https://all-free-tutorials.blogspot.com/search', 'canonicalHomepageUrl': 'http://all-free-tutorials.blogspot.com/', 'blogspotFaviconUrl': 'https://all-free-tutorials.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22All free tutorials - Atom\x22 href\x3d\x22https://all-free-tutorials.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22All free tutorials - RSS\x22 href\x3d\x22https://all-free-tutorials.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22All free tutorials - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8553308360367166330/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22All free tutorials - Atom\x22 href\x3d\x22https://all-free-tutorials.blogspot.com/feeds/3183791171740337157/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-4684889708406489', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d2c988fc3a56b1b1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '3183791171740337157', 'postImageUrl': 'url', 'pageName': 'HTML Tutorial', 'pageTitle': 'All free tutorials: HTML Tutorial'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'HTML Tutorial', 'description': ' What is an HTML File? HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags ...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t_wt4WBSwBUTJ0pKw-aqMmU1pfSKkkU_mdYhyqKCaqR1U3QCuY7t9e4Zzg', 'url': 'https://all-free-tutorials.blogspot.com/2009/01/html-tutorial.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3183791171740337157}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'main', document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/599103511-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense2', 'main', document.getElementById('AdSense2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'main', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogListView', new _WidgetInfo('BlogList1', 'main', document.getElementById('BlogList1'), {'numItemsToShow': 0, 'totalItems': 0}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'sidebar', document.getElementById('BlogSearch1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_SubscribeView', new _WidgetInfo('Subscribe1', 'sidebar', document.getElementById('Subscribe1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'sidebar', document.getElementById('AdSense1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar', document.getElementById('HTML3'), {}, 'displayModeFull')); </script> </body> </html>