HTML PRACTICE DOCUMENT

Reference Book:
Fluency with Information Technology: Skills, Concepts, & Capabilities

Author:  Lawrence Snyder

Anchor: Defines hyperlink using the ref="x" attribute, where "x" is a file name. The text between the two tags is known as the link and is highlighted.

Body: Specifies the extent of the body of the HTML document: refer to the preceding section to see the HTML document structure. Useful attributes include:

Background="x" fills the page background with the image (possibly tiled) from the file x

Bgcolor="color" paints the background the specified color

Text="color" displays text in specified color

Link="color" displays links in the specified color

Bold: Specifies style of the enclosed text is to be bold font
This text prints as Bold

Caption: Specifies caption of a table, and must be enclosed by Table tags

Comment: The comment text is enclosed within the angle brackets; avoid using single brackets in the comments, which can confuse browsers

Click here for next page

Definitional List: Is composed of two-part entries, called the definitional-list term and the definitional list definition. Terms on separate lines and the definitions are on the line following. A useful attribute is compact, which displays terms and definitions on the same line.

First Term
First definition goes here
Second Term
Second definition goes here

Font: Defines a range of text in which the style of the font is to be adjusted from the prevailing style. Useful attributes include:

color="color" displays the text the specified color
face="type" displays text the specified type face
font face="Helvetica" This is san serif font

Header: Defines the extent of the header of the HTML document, which must include a Title. Refer to the "HTML Document Structure," for an example.

Headings: Specifies the enclosed text that the enclosed text is to be one of headings. The smaller the number the larger and more prominent the text will be.

Horizontal Rule: Defines a line that spans the window, though it can be reduced in size using the width="x%" attribute. The attribute size = "x" specifies the point thickness of the line.

Ex: hr width="x%" See line below:


 

HTML: Defines beginning and end of the document. Refer to the first section, "HTML Document Structure," for an example.

Image: Causes an image -specified by src="x" attribute -to be placed in the document at the current position. Positioning info uses the align attribute to specify the position in the window -left, center, right. Also, height and width attributes specify the displayed image's size in pixels.

Ex: img src="scaryPic.html" align='left' height='200' width='140'

Italics:   Specifies the style of the enclosed text is to be italic.
Ex:  This is in italic text

 

Line Break:   Ends the current line and continues the text on the next line
Ex:  This text is on one line. <br>
This text is on the next line.

Line Item: Specifies an entry in either an "Ordered List" or an "Unordered List" definitions.

Ordered List: Specifies the extent of an ordered list, whose entries are list items. The list items are prefixed with a number.

Ex:

  1. First list item
  2. Second list item

Paragraph: Specifies the extent of a paragraph. Paragraphs begin on a new line.
This text forms a small paragraph

Title: Defines the title for the page, and must be given in the Header section of the HTML source.
Titles display at the top of the browser window

Table: Defines a table of Table Rows; the rows contain Table Data. The first row of the definition can optionally be formed of Table Heading tags. A useful attribute is border, giving the table a border.

Ex:

Description
Head Col 1 Head Col 2 Head Col 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

Table Data: Specifies a cell in a table, and must be enclosed by Table Row tags. A useful attribute is <bgcolor="color">. See "Table" for an example.

Table Heading: Specifies a cell in the heading row of a table and must be enclosed by Table Row tags. A useful attribute is <bgcolor="color">. See "Table" for an example.

Table Row: Specifies a row in a table, and must be enclosed by table tags. A useful attribute is bgcolor="color". See "Table" for an example.

Unordered List: Specifies the extent of an unordered list, whose entries are list items. The list items are prefixed with a bullet. A list item can enclose another list.

Ex:


This is only meant for practice use only.

hyhyhyhy


hjhjhjhjh

ghghgh

dfdfdfd


space


ghghgh




Volcano Web

VOLCANO WEB

The first V is now increased in size by 4 units above the base value, and the other letters (now capitalized) are increased by three units above base value. This provides the layout style of SMALL CAPS. Also note, that we have added a bold tag to make the title stand out. And finally, because we are not using a header tag that carries a line break by default, we had to add a paragraph tag above the title to force it to appear on a new line (we do not need another one after because the next HTML is a blockquote that carries its own line break -see Lesson 13).

Next, we would like to make the quote from Pliny stand out abit more, so we will raise it one font size:

"Nature raves savagely, threatening the lands"
♦Note that the paragraph tag forces one line break with preceding text above and the break tag forces a line break (no white space) to subsequent text.

Two Methods for Creating Headings:

Sample 1

...before the next great innovation that rocked the world of rotten milk.  

History of Longhorn Cheese

Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...

 

Sample 2
...before the next great innovation that rocked the world of rotten milk.

History of Longhorn Cheese

Longhorn Cheese was first discovered by Alister Longhorn in 1754 when he...

VOLCANO WEB

It was a long time after the sad death of Click here for next page Sir Longhorn that someone was able to recreate his formula.

blah blah blah blah blah

Cheese in History

Cheese has been there for many major events

When Magellan sailed through the narrow straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just finished a cheese snack.

Cheese in History

Cheese has been there for many major events

When Magellan sailed through the narrow straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just finished a cheese snack.

 

Cheese in History

When Magellan sailed through the narrow straits, he was eating cheese.
When the Allied troops landed in Europe, cheese was there.
When Neil Armstrong stepped onto the moon, he had just finished a cheese snack.

Volcano Web

blah blah blah

Introduction



Cheese in History

Cheese has been there for many major events

When Magellan sailed through the narrow Straits, he was eating cheese.

When the Allied troops landed in Europe, cheese was there.

When Neil Armstrong landed onto the moon, he had just finished a cheese snack.

V OLCANO WEB

"Nature ravages savagely, threatening the lands."

-- Pliny the Elder, who died of asphyxiation after observing the destruction of Pompei by the 79 A.D. erruptopn of Mount Vesuvius.

In this lesson you will use the Internet to research information on volcanoes and then write a report on your results.

You must place paragraph tabs at the end of each sentence if you want it to end up on the next line with a space between the other sentence.

"Nature ravages savagely, threatening the lands."

-- Pliny the Elder, who died of asphyxiation after observing the destruction of Pompei by the 79 A.D. erruption of Mount Vesuvius.

V OLCANO WEB

Lesson 21

Row 1 col 1 Row 1 col 2 Row 1 col 3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 2 Row 3 col 3

tr>
Row 1 col 1 Row 1 col 2-3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 2 Row 3 col 3

Row 1 col 1 Row 1 col 2-3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 3

Eruption Date Volume in km
Paricutin, Mexico 1943 1.3
Mount Vesuvius, Italy 79 A.D. 3
Mount St. Helens,
Washington
1980 4
Krakatoa, Indonesia 1883 18
Long Valley, California pre-historic 450, 700
Yellowstone, Wyoming pre-historic 400

Volumes of Some Well-Known Volcanic Eruptions
Eruption Date Volume in km
Paricutin, Mexico 1943 1.3
Mount Vesuvius, Italy 79 A.D. 3
Mount St. Helens,
Washington
1980 4
Krakatoa, Indonesia 1883 18
Long Valley, California pre-historic 450, 700
Yellowstone, Wyoming pre-historic 400

Volumes of Some Well-Known Volcanic Eruptions
Eruption Date Volume in km
eruptions
by humans
Paricutin, Mexico 1943 1.3
Mount Vesuvius, Italy 79 A.D. 3
Mount St. Helens,
Washington
1980 4
Krakatoa, Indonesia 1883 18
Inferred
by study
of deposits
Long Valley, California pre-historic 450, 700
Yellowstone, Wyoming pre-historic 400

Mount St. Helens
On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided on the mechanics of highly explosive eruptions.

Long Valley
This field seismometer measures earthquakes associted with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago.

Mount St. Helens  
On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided detailed observations on the mechanics of highly explosive eruptions. This field seismometer measures earthquakes associted with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago.

  • Alaska Volcano Observatory
  • Cascades Volcano Observatory
  • The Electronic Volcano
  • Michigan Tech Valcanoes Page
  • NASA Earth Observing System (EOS) Vlocanology Team
  • Volcano Information Center
  • Volcano/Earth Science-Oriented Servers
  • US Geological Survey Volcanic Hazards Program
  • Global Volcanism Program (GVP)
  • Volcano Watch Newsletter
  • Volcanoes Online
  • VolcanoWorld

Coloring Tables

Table:  Color the area behind the entire table
<table bgcolor=#880000>
 
Row:  Color the area behind a single row
<tr bgcolor=#880000>
 
Cell: Color the area behind a single cell
<td bgcolor=#880000>

Eruption   Date   Volume in km  

Eruption
Date


Volume in km

 

 

 

fedfd

hkhkjh

symbol for space:  

 

Font 5:
Font 5 is closest to 12 in. font

 

jkjlkjkjkj

Eruptions
by humans

Inferred
by study
of deposits

For Image Placement in Table Row
♦ See Code in Code View

Eruption Date Volume in km

V O L C A N O

Inferred
by study
of deposits

Eruption Date Volume in km
Paricutin, Mexico 1943 1.3
Mount Vesuvius, Italy 79 A.D. 3
Mount St. Helens,
Washington
1980 4
Krakatoa, Indonesia 1883 18
Long Valley, California pre-historic 450, 700
Yellowstone, Wyoming pre-historic 400

 
6:00 am Sunday Monday Tuesday Wednesday Thursday Friday Saturday
7:00 am              
7:30 am              
8:00 am              
8:30 am              
9:00 am              
9:30am              
10:00 am              
10:30 am              
11:00 am              
11:30 am              
12:00 pm              
12:30 pm              
1:00 pm              
1:30 pm              
2:00 pm              
2:30 pm              
3:00 pm              
3:30 pm              
4:00 pm              
4:30 pm              
5:00 pm              
5:30 pm              
6:00 pm              
6:30 pm              
7:00 pm              
7:30 pm              
8:00 pm              
8:30 pm              
9:00 pm              
9:30 pm              
10:00 pm              
10:30 pm              
11:00 pm              
11:30 pm              

Lesson 22:  More for Images and Lists

Bullets for Unordered List:

Important Cheese Laws

  1. Cheese Curing Act of 1905
  2. Milk Content Ruling of 1923

  3. Cheese Import Tariff of 1942
  4. Cheese Freshness Codes of 1942

  5. Cheese Values Act of 1789

    Important Cheese Laws

    1. Cheese Curing Act of 1905
    2. Milk Content Ruling of 1923

    3. Cheese Import Tariff of 1942
    4. Cheese Freshness Codes of 1942

    5. Cheese Values Act of 1789

         

      Lesson 25:  Target that Window

      In this lesson we will see how to modify the reference link to specify that the link be loaded in a new browser window. In this tutorial we have been creating new windows with our web browser -- now we can see how to provide this function via HTML.

      The HTML code we use to specify a target browser (the window to display content in) looks like:
      <a href="some_url.html" target="window_name">

      Whereas we know from earlier lesson href indicates the URL, either a web address or another one of our own web pages. The new part of the tag is the name we provided for target=

      We can provide any name for the target;it is an internal identifier for teh web browser. What happens when you click a link like:
      <a href="http//www.mcli.dist.maricopa.edu/tut/likethis.html" target =tutorial>

      is that your browser says, "Hmmm. I must go fetch the HTML for the URL
      http://www.mcli.dist.maricopa.edu/tut/likethis.html, and place it in a window named tutorial.
      Ahhh, I don't have any such window, so I will create a new one."

      The name you provide in the target= attribute can eb almost anything. We will see later that there are four names that have special meaning:
      1.  _top
      2.  _shelf
      3.  _blank
      4.  _parent

      We suggest that you use short descriptive names.

       

      Adding a Targeted Window Link to Your Pages

      We will now use this code in our volcano lesson. From our previous work, the apeg we created describing Volcanoes in the U.S. contained the small graphic of thew seismograph, that when it was clicked, linked to a larger image. We will now adjust the HTML so that the large image opens in a new browser.

      Ex:
      <a href="../pictures/seismo.jpg" target="photo">

      Now both the links from the smaller image as well as it's hypertext caption should load the larger JPEG image in a new browser window.

      We will now show you a way to set the TARGET attribute so that the link is forced to open in a new browser window and be in front... by using the special window target name "_blank." The disadvantage with this approach is that if you have 20 links with this window target name, it is possible to then have your single web page spawn 20 different browser windows. Because additional browser windows require more computer memory, this might be a recipe for a computer crash.

      But let's look at a case where we can use this feature. In the Volcano Website, the page for terminology contains tne image of differernt volcano types, each hyperlinked to a external web site. Although teh href links are written differently because they are embedded in the code we created to make the clickable image map.

      Since we have a series of links all with the same window target, we can use a different tag to write HTML that will do the same thing:
      <base target="window_name">

      which means all hypertext links after tsi tag will be opened in the window specified. So now we will update our working file with a new tag.
      Ex:
      <font size=+2>Investigate each type by clicking on a picture</font><br>

      <font size=-1>Each link will open its own browser window</font><br>
       

      Investigate each type by clicking on a picture
      Each link wil open its own browser window

      But there is another problem; below our image map we have more hypertext links to other documents and websites that we do not wnat to load in a new window! We can take care of this situation by using another one of the special window target names, "_self" which means load the new URL/page into the same browser window.

      Ex:
      <base target="_self">

      ♦Note:  This tag now over-rides the previous <base target="..."> tag so that all links following this will load into the current browser window.

      Lesson 26:  Framed Web Pages

      Frames make this web page two different HTML documents:
      1.  One document defines the layout for the top portion with the navigation links
      2.  The other contains the remainder of this lesson
      (Each frame is independent of each other.)

      The advantage is clear for web sites that contain navigation links to many other web pages. For another example, see our multimedia Authoring Web, a searchable database that keps all of the navigation and control elements in the left frame while content is displayed in the right side.

      Hyperlinks have special uses in framed web pages. Sometimes a hyperlink in one frame will replace the contant in that frame with new content. Other times a hyperlink will load new content in another frame. And you can have this link that will completely replace all of the frames with a new page. This is actually the same kind of link "targeting" we learned in lesson 25.

      What are some disadvantages of frames? As a web designer, you must keep track of more HTML documents. When converted to a framed design, one single HTML file might end up as 3,4, or maybe 12 HTML files. For the viewer, a framaed page can take longer to load and dsipaly. Poorly designed, framed web pages look crowded and sometimes amateurish. Frames also make it difficult to print paaper copies of the entire page. Fianlly, you may be restricting some users from your site if they have a web browser that does not support frames (most browsers since Netscape 2.0 amd Internet Explorer 3.0 display frames).

      When should you use frames? The content should tell you. If there is a need to keep some elements on a web page visible at times while changing the content of other areas, frames can be effective. You can get a better sense of by examining other web sites and see how they use frames.

      Frame Basics

      A web page that uses frames consists of a master HTML document, that we'll call the "blueprint" for the layout, that defines the frames, to the content of other areas on the page. This is the document that loads the frame structure and the one that represents the URL for the framed page.

      You can devise many ways to slice and dice the web page area.

      Each sub-divided area will be associated with an HTML file that defines what goes into that particular box. Therefore, the frist step is to sketch out how the page should be divided up and how much relative space each area needs.

      Once you have a visual idea, you must define it in terms of rows and columns, similar to the approach for designing tables (see lesson 21). Start working from the upper left to the lower right.

      Each collection of rows and columns makes up a HTML frameset and the HTML "blueprint" document for the framed page can have one or more framesets. The HTML format is slightly different from the ones we've created so far --it lacks a set of <body>... <body> tags. This makes sense from what we learned way back in lesson 1 since none of the frameset definitions actually specify the content that appears on the web page (normally everything inside the <body>...< body> tags), but rather the structure of how they are arranged.

      Below is a generalized format of a "blueprint" HTML document:

      <head>
      <title>Title of this Whole Page</title>
      </head>

      <frameset rows/cols="X,Y...Z">
      <frameset src="frame_source1.html">
      <frameset src="frame_source2.html">
      : :
      <frameset src="frame_sourceN.html"> </frameset>
      <noframes>
      This is what someone would see who does not have a web browser that can display frames.
      </noframes> </html>

      Lesson 28

      Javascript offers you, the web page designer, a way to further enhance the design and functionality of your web pages. Unfortunately a complete tutorial on JavaScript is beyond the scope of this tutorial (but see some of the other references we recommend), but what we will do is give you a taste of what JavaScript can do.

      Please be aware of the tremendous differences between Java, a programming language, and JavaScript, a scripting language. Too often people use them interchangebly. Java was developed by Sun Microsystems as a computer paltform independent programming langauge for creating small applications, or "applets" taht could be aprt of a web apge as well as being a stand alone desktop program. Java applets are like small, self-contained prograsm, that yo can use wihtout seeing or even caring about what is inside of them (we will in a later lesson show you how to find an duse Java applets).

      The downside of Java is taht to create applets, you must learn a pretty complex language or try to use some of teh newer software tools that make the coding less difficult. The other downside is that amny Java applets can take a disturbing amount of time to download and run, essentially stalling your web paeg until it "loads" (in our opinion, waiting to load a scrolling banner is not too many notches above the <blink> tag!).

      Originally named "LiveScript," JavaScript was developed by NetScape is something quite different. It was renamed because of the structural similarities to the Java programming language. To create JavaScript you simply type commands interspersed with your HTML and teh browser follows the commands as it tries to format the web page.

      Hopefully, by now you have a sense that as a web browser reads the HTML code for a page, it starts assembling and displaying the page layout from the top down, so that as a page may partially display even as he browser is reading the later parts of the HTML document. As each HTML code is read in the browser reacts and formats, without asking any questions.

      When the web browser encounters some JavaScript code, it starts interpreting it line by line. But the JavaScript code can instruct the browser to do different things under different situations, or build in some funtionality that is not set in motion until the user does something on a page. JavaScript can even create HTML content on the fly, so you can have it do something like print a different HTML message depending on what day of the week it is or changing the background to a random color everytime you reload the page.

      So think about JavaScript as a way to add a little bit more 'smarts' to your web page. While not as difficult to learn as a pure programming language like Java, to use JavaScript is to taek a step in complexity up from HTML formatting.

      Putting JavaScript in its Place

      Where JavaScript code depends on what it needs to do. AS we will see, sometimes we will palce JavaScript code inside the <head>..</head> of your HTML file. Other times it sits inside your HTML content. And in other instances, it is added to other HTML tags ti initiate "events" triggered by the person interacting with your web page.

      The basic approach for writing most "doses" of JavaScript reads like:

      The command to make this happen looks like:
      alert('JavaScript here, boss! What do you want?');

      Now if we simply inserted this into our HTML file like:

      alert('JavaScript here, boss! What do you want?');

      The alert message would pop up immediately as the browser read the code, likely not what we want. To see this in action, try the test page.

      More typically, as with the button above, you want this JavaScript command to happen when it is triggered by an "event" such as the viewer clicking the mouse or even moving the mouse over different parts of the screeen. We'll learn more about events as we go.

      Objects

      Now we will throw some more programming jargon at you! Don't recoil in horror!

      JavaScript references an object model for teh web environment. What does this mean? Think of it as a family tree structure that as you read it moves from left to right but really references things structure from most global to more specific.

      Huh?

      The big "parent" is the "navigator"- it has many different "properties" that describe more or less the web browser you are using, i.e., what kind (NetScape, Microsoft, etc.) and version number. Below is teh "window" object that desrcibes teh properties of one web window, with its own special properties. Next down is the "document" object, that describes information about a particular web page, say its URL, the time it was last changed, how many links ther are in this page. And within the document object are many more objects that we will soon.

      So in JavaScript we often have to refer to things by where they are in the object family tree, like:

      window.document.form[3].choices.options[2]

      which woudl refer to soem property of "options" contained wihtin something called "choices," which is part of one "form" insie the document of a window. So from left to right this object model goes from biggest to smallest objects, each one separated by a period. The things in square brackets ([x]) represent arrays, or collections of similar objects, in the case forms within the document. In the example above, the document has at least 4 forms since we are referring to a 3 inside the [] (it gets confusing because JavaScript starts counting many objects starting with 0 rather than 1!). Within the 4th form we we are working with a part of it which is a selection menu named choices and actually the 3rd option (menu item) in that menu.

      Are you still with us? Do not worry about the forms that will be covered in Lesson 28.

      Sometimes we can use this type of structure to "test" or get some value from our web page environment, known as properties. Other times we use the structure to change these values or properties.

      Caution Flag

      As we continue with these advanced lessons, your task becomes more difficult. Some web browsers, especially in older ones, do not support JavaScript, but we have chosen examples of basic code that should work in most web browsers.

      Also, JavaScript code is pretty picky! When you are copying the code examples, it is very important to not have extra return characters wihtin a single line of JavaScript code. You will see what we mean in the next lesson.

      Check Your Work

      This is an introduction, so we have not made any changes to our project.

      Each JavaScript statement must end with a semi-colon, which is how the browser knows it is time to do whatever that line is told to.

      An example of format for a form:

      <form action="[url for server program]" method="Get/Post">
      :
      :
      (form elements) :
      </form>

      Samples Of Text Imput Elements (type="text")

      ♦Are used to create one line fields that viewres can type text
      ♦The default width is 20 characters long, and you can create other field sizes by the value in the size option
      ♦You can limit the numbers of characters by the value of the Maxlength option
      ♦Text input fields will be empty when page loads, unless you provide an intitial text string for VALUE option

      A text field named "text1" that is 30 characters wide:
      <input type="text" name=text1" size="30">

      A text field named "text2" that is 30 characters wide but will only accept 20 characters:
      <input type="text" name="text2" size="30" maxlength="20">

      A text field named "text3" that is 40 characters wide with default value: <input type="text" name="text3" size="40" value="We are not alone.">

      Samples of Password Input Elements (type="password")

      ♦Are exactly the same as text input elements, except when viewer types in, they see "bullet" characters rather than the letter they are typing
      ♦Password text is scrambled during transmission and then unscramble when form data is recieved at the end of the server

      A password filed named "pass1" that is 30 characters wide.
      <input type="password" name="pass1" size="30">

      A password field named "pass2" that is 30 characters wide but will only accept 20 characters
      <input character type="password" name="pass2" size="30">

      A password field named "pass3" that is 40 characters wide with default value
      <input type="password" name="pass3" size="40" value="We are not alone">

      Samples of Text Area Input Elements (type="textarea")

      ♦Are text fields that have more than one line and can scroll as the viewer enters more text
      ♦Tag options define the size of the field by the numbers of rows and character cloumns
      ♦By adding option WRAP=VIRTUAL, the text entered will automatically wrap at the right hand side of the field
      ♦Can also include default text to appear in the field

      A textarea field named "comments" that is 45 characters wide and 6 lines high:
      <textarea name="comments" rows="6" cols="45" wrap="virtual">
      The first time I ever saw a web page, I thought.... (continue)</textarea>

      Samples of Radio Buttons (type="radio")

      ♦Are sets of controls linked so tha only radio button among each set is selected at a time; if you click one radio button, others in set are automatically de-selected
      ♦A set of radio buttons is defined by providing them the same name
      ♦Value set in the web form in the value of the radio button was last selected
      ♦Adding the option CHECKED to one of the following buttons in a set will make taht button highlighted when page loads

      4 Radio Buttons with Default Selection
      <input type="radio" name="food" value="hotdogs" checked>Hotdogs are my favorite food<br>
      <input type="radio" name="food" value="hamburgers">I like hamburgers <br>
      <input type="radio" name="food" value="steak">Steak is tasty <br>
      <input type="radio" name="food" value="beans">Beans are for vegetarians<br>

      Hotdogs are my favorite food
      I like hamburgers
      Steak is tasty
      Beans are for vegetarians

      3 Radio Buttons with No Default Selection
      <input type="radio" name="spread" value="katsup">katsup<br>
      <input type="radio" name="spread" value="mustard">mustard<br>
      <input type="radio" name="spread" value="mayonnaise">mayonnaise<br>

      katsup
      mustard
      mayonnaise

      Samples of Check Boxes (type="checkbox")

      <input type="checkbox" name="food1" value="hotdogs" checked>Hotdogs are my favorite food<br>
      <input type="checkbox" name="food2" value="hamburgers">I like hamburgers <br>
      <input type="checkbox" name="food3" value="steak" checked>Steak is tasty <br>
      <input type="checkbox" name="food4" value="beans">Beans are for vegetarians<br>

      Hotdogs are my favorite food
      I like hamburgers
      Steak is tasty
      Beans are for vegetarians

      3 Check Boxes with No Default Selection

      <input type="checkbox" name="spread1" value="katsup">katsup<br>
      <input type="checkbox" name="spread2" value="mustard">mustard<br>
      <input type="checkbox" name="spread3" value="mayonnaise">mayonnaise<br>

      katsup
      mustard
      mayonnaise

      Menu Select (type="select")

      ♦"Provides drop-down mensu that allow viewer to choose oen or more from a list of choices
      ♦The OPTION tag defines the text that is displayed in the menu
      ♦The value of the option last selected is returned when the form data is transmitted
      ♦Adding the SELECTED option indicates which element is displayed initially when page loads; if this is not provided, the first term is selected by default

      Samples of Menu Select

      <select name="cheeses"><br>
      <option value="colby"> Colby from Ohio </option>
      <option value="sharp"> Sharp Cheddar from Oregon</option>
      <option value="swiss"> Holy Cheese from Switzerland</option>
      <option value="longhorn"> English Longhorn</option>
      </select>

      Submit and Reset (type="submit" and type="reset")

      ♦Creates buttons on the form
      ♦Submit button tells web browser to gather up all selections, values, and entered text in the form elemenst and send it off to the place defined in the ACTION part of the form tag
      ♦Reset button restores the form to default state (how it looked when viewer first entered page
      ♦The VALUE option defines the text string that is placed on these buttons

      Samples of Submit and Reset

      Submit Button
      <input type="submit" value="Send this form data now!">

      Reset Button
      <input type="reset" value="Clear the web form">

        Send Report

        Send Report

        Send Report