Tables & Frames - Part 1

Both tables and frames provide the ability to organize not only information on your Web pages, they can also be used to layout your entire Web page. Today we’ll look at a few of the basic HTML tags necessary to create tables.

To begin a table, we use the <table> tag. This tells the browser that we are starting a table. When the table is finished, we close the tag like so, </table>. Read more

Forms - Lists & Menus

Lists are scrollable boxes from which a user can choose multiple items. This can be useful when there’s a long list of choices and you want to save space on your Web page. Using checkboxes for a large number of items is not very user friendly. Using a list allows you to contain the items within a small box and still give the user full access to all of the choices through a scroll bar. You can also choose to have any one of the items in your list as the selected item when a form is loaded into the user’s browser. To do this, add the the selected attribute to the option you want selected.

< select name=”cars” size=”4″>
<option value=”audi”>Audi</option>
<option value=”dodge”>Dodge</option>
<option value=”toyota” selected>Toyota</option>
<option value=”vw”>Volkswagen</option>
</select>

A menu or a drop-down menu, is a drop-down box from which a user can choose only one item. When an item from a drop-down box is selected, the box disappears while displaying your selection. Read more

Forms - Form Tag & Attributes

Forms are used to collect information over the Internet from a user. Forms are essential for communication between the user and the Webmaster. They can be utilized for many purposes. Some forms may be used for logging-in to a website while others may be significantly more complex allowing the user to shop or send Web mail.

In the following posts, we will look at the common form elements, their purpose, how to organize forms, and provide an opportunity to practice building simple, as well as more complex forms.

Let’s start with the first tag necessary to create a form, the form tag (<form></form>). All elements of a form must be placed in-between the opening and closing form tag. If a form element is not between these tags, it will not function as a part of the form.  Although a Web page may have more than one form tag on it, it is not recommended. Even though multiple forms may exist on a page, they must not be nested (one inside the other).

The form tag has three attributes that are important to understand. The first being the name or id, the second the  method attribute, and finally the action attribute.

The name or id attribute is used to identify one form from another. The value used should be descriptive of the forum and its purpose. It should NOT contain a space or reserved characters.

The second attribute that is rather important is the method attribute. The method attribute specifies the manner in which the form data is sent. There are two possible values the the method attribute can use: get and post. Get appends the form data to the URL of the page to which the data is sent. This is a severe privacy issue if telephone numbers, social security numbers, or other sensitive data is part of the form.

Post on the other hand, does not append the form information to the URL. Data is sent behind the scenes along with a request for the new Web page. Since the data is not visible in the URL, post is more secure than with the previously mentioned get method. In addition, post allow a larger amount of text to be sent to the corresponding action page than the get method.

The final attribute of significance, is the action attribute. This attribute specifies the action that will take place when the submit button is pressed. A form may accept user data, it cannot work alone. It needs a another file that will accept the data and process it in some way. The easiest way to process the data from a form is by giving an email address as the data’s destination (mailto:farmer@dairy.com). While this is easy, it is not practical for large amounts of data. Not to mention, their is no way to rapidly sort the data. This requires a database. The more practical solution is to select a Web page that is a .php or .asp script file.These programming languages can process the form data and properly insert it in a database.

The w3.org’s explanation of forms.

A quick, concise tutorial on forms.

Today’s Objectives:

• Understand what a form can be used for
• List and explain the purpose of the name, method, & action attributes (for the form tag)
• Place a form into a Web page

Classwork: Lesson 6-1 and vocabulary.

Prep Questions:

• A tool that accepts user data from a Web page.
• A text box designed to gather short bits of information.

More Templates…

Extending their current knowledge of templates, students completed creating HTML templates and began constructing pages off of these templates. A short demonstration was provided, illustrating the ease of creating additional pages from a template as well as the beauty of Dreamweaver’s automatic update feature. A quick overview of templates can be found here. Additionally, here is Adobe’s (maker of Dreamweaver) developer area with more information about templates than most people could ever use. In case that’s not enough, here is a final offering. Enjoy…

Today’s Objectives:

• Exhibit the knowledge of how to effectively use templates
• Construct a simple Web site plan (mission statement, target audience, topics & features, organizational diagram)

Classwork: Students worked on Lesson 4 - Critical Thinking.

Prep Questions:

• Explain where the following sites are generally found:
  • local
  • remote
• What is the approximate length and purpose of a mission statement?
• This application connects to a server that houses a Web site and facilitates the addition, removal, movement, etc. of files.
• This dialog box specifies settings including (background color or image, pagetitle, etc.)

Note: Lesson 4 quiz on Thursday the 22nd.