A HTML form can allow people to enter data through a web page. This data can then be processed by their computer, or sent to the web-server and processed there. HTML forms can be used in many different ways. The most common use of a HTML form is to send a search query to a search engine, as with, for example, Google. This HTML form tutorial will give you all the information you need to start making your own HTML forms.

HTML form tutorial – basic elements

Each HTML form element corresponds to a pair of HTML tags. All of these are enclosed in the form tags <form></form>. The <form> tag attributes are used to configure the behavior of the form (how the form data will be processed).

The most common HTML form element is the <input> element. By setting the ‘type’ attribute, you can make the input element appear in a variety of different ways. A list follows:

type=”text”, a text field allowing a single line of text;

type=”checkbox”, a single checkbox;

type=”radio”, a single radio button;

type=”file”, a file selection control which can be used to upload a file;

type=”reset”, this creates a special button that when pressed will clear the values in the form;

type=”submit”, a submit button, the action of this button is determined in the ‘action’ attribute of the enclosing <form> tag.

type=”readonly”, a text field containing text that cannot be edited, often appears dimmed/grayed;

type=”hidden”, a text field that is not visible to the user, its data will be processed just the same as any other HTML form element;

type=”button”, a general purpose button, scripting code can be attached to it so that the desired action is performed;

type=”password”, a text field which will not show the characters typed into it, usually they will appear as asterisks so to hide the entered text from view.

Other form elements are created using a specific tag rather than the <input> tag, these are:

<button>, a general purpose button, similar to <input type=”button”> but it allows for greater variation including the use of images;

<selection list>, use this to create a drop-down list;

<textarea>, this form element creates a large box for entering multi-line text.

HTML Form Tutorial – labels

Labels are automatic for some HTML form elements, for instance buttons, but other HTML form elements like text fields and checkboxes do not have automatic labels. For these HTML form elements there is the <label> tag. Correct use of the label tag means that each label is associated with exactly one form element.

To apply a label to a form element, wrap the form element tag(s) with <label> tags. For example: <label><input type=”checkbox”>Label text</label>.

Another method for a applying a label to a form element is to use the ‘for’ attribute on the label tag. For example <label for=”my_checkbox”>Label text</label>. You then use a corresponding ‘id’ attribute on your form element: <input type=”checkbox” id=”my_checkbox”>.

HTML Form Tutorial – access keys

Access keys allow a user to give focus to a variety of HTML elements. This occurs when the user presses the designated key on their keyboard. The operation can differ depending on the user’s computer operating system; on a windows machine, the user will need to old the ‘alt’ key, on a Mac system the user will need to hold the ‘cmd’ key.

When using labels, the access key is generally attributed to the label of the form element. For instance, <label accesskey=”s”><input type=”text”>Search:</label>. In this example, when the user presses “alt-s” on a windows machine, the focus go to search field, meaning a cursor would appear in the search field. Access keys can be set on the following elements: <a>, <area>, <input>, <label>, <legend> and <textarea>.

HTML Form Tutorial Scripting

Forms may be combined with a variety of scripting languages in order to create dynamic web sites.

With client-side scripting, the script, typically JavaScript, will run on the users web browser. The Document Object Model allows for JavaScript scripts to access the data that the user has entered. This can be useful for pre-validation, where form data is tested before being sent to the web-server. Note that a hacker can modify any pre-validation code so client side validation cannot be relied upon for security purposes.

With server-side scripting, the data is processed on the webserver. A common scripting language used is PHP, but there are many others. Server-side scripting can ensure the security of the data processing, and ensure that the data is processed the same way for every user. The ‘method’ attribute on the <form> element determines how the data is sent to the sever. With method=”get” the data is appended to the URL, the script on the server must then anticipate this and process the data accordingly. With method=”post”, the data is sent directly to the webserver. Method=”post” allows for no limit on the amount of data being sent, and also for the data to be encrypted. Techniques for accessing method=”post” data will vary depending on the server-side scripting language being used.

The definition of the HTML <div> tag is that it divides the HTML document into sections. The following tutorial will explain why the <div> tag is important and how it should be used. Proper usage of the <div> tag is fundamental to good HTML coding; the <div> tag is one of most powerful tools available to a Web developer.

The key to understanding the <div> tag is that it does not carry any semantic meaning. To give you a contrasting example, the <p> tag is used to specify paragraphs of text. As another example there is the <strong> tag, which is used to provide emphasis. Although both of those tags can be used to modify the layout of a HTML document, part of their purpose is to give meaning to different elements on the page. The <div> tag, and its cousin, the <span> tag, do not, on their own, give any meaning to their content. The usefulness of this quality will become apparent as you read on through this tutorial.

HTML DIV TUTORIAL – CSS

One of the most popular uses of <div> is to use it in combination with Cascading Style Sheets (CSS). CSS is a means of specifying the layout and style of different elements on the web-page. CSS can be used to specify just about any aspect of layout you could think of. Font size, font color, background color, borders, margins and text alignment are some of the things you can change with CSS.

The HTML <div> tag allows you to specify the areas of your document you wish to control with CSS. You may have four paragraphs that you want to center on the screen. What you might do is put them all within a pair of <div> tags and use CSS to make the content of those tags centered.

As the name suggests, use your <div> tags to divide your page up into different layout sections. Once you have done this, use CSS to specify the layout for those sections. Thus by combining the HTML <div> tag with CSS, you can build an unlimited variety of page layouts.

HTML DIV TUTORIAL – SEMANTICS

Another purpose of the <div> tag is to implement Web semantics. When people talk about Web semantics, or the semantic Web, they are talking about labelling the different elements of a web page so that a machine would be able to interpret the meaning behind them.

As mentioned in the beginning of this tutorial, the <p> tag can be used to signify a paragraph. So a machine reading a HTML page would know that the text inside the <p> tags represents a paragraph. What if you wanted to mark a more specific piece of information, like say a phone number? Unfortunately there is no <phone> tag, but this is where <div>, which has no prescribed semantic meaning, comes into play.

To explain, any <div> tag may carry an id or class attribute. Thus you might write, <div class=”phone”> or <div id=”mary_phone”>. In this way, very specific semantic information can be embedded into your HTML document.

HTML DIV TUTORIAL – SCRIPTING

Another extremely important use for HTML <div> tags is to implement client-side scripting. Client-side scripting can be used to create animated buttons, scrolling text, drop down boxes, and many other engaging functionalities for your web-page. Typically when we talk about client-side scripting, we are talking about JavaScript.

Now, say you would like something interesting to happen when the user moves the mouse over a certain graphic on the page. You would like some piece of text to change depending on the graphic that the mouse has moved over. This is possible in JavaScript, but the JavaScript must be able to ‘target’ the piece of text somehow.

What can be done is the area where the text is to be changed can be contained within a <div> tag. The <div> tag is given an id, say, for example, <div id=”text_target”>. Now the JavaScript is will be able to take control of the text in that area of the page, by looking for a <div> tag with an id of “text_target”.

So you see, proper <div> tag usage is essential for any JavaScript programmer.

DIV vs SPAN

Now, one last piece of information before I conclude this tutorial — when to use a <span> tag and when to use a <div> tag.

What you should know is that <div> tags are block level elements that are used to divide up whole sections of HTML. The <span> tag, however, are in-line level elements, they only span across small amounts of content, typically words or phrases. For instance, a <span> tag might be used to make a word red in color, or to give it an underline. The crucial thing to remember is that a <span> tag can only contain other in-line elements, while a <div> tag can contain both in-line and block elements. Because of this, a <span> tag cannot contain images, tables or forms. However <span> is still used for the three purposes described above: to style with CSS, to give semantic meaning to web-page content, and to target web-page content with JavaScript. Practice all three of these purposes with both <div> and <span> and one day you will become a HTML master.

MySpace, one of the leading social networking websites on the internet, grows by leaps and bounds. For those that are new to the MySpace circle, there are several things that must be learned to enjoy all that it has to offer. HTML is a series of codes that are used to create website pages on MySpace, as well as change the features that are displayed.

For a simple and easy to understand HTML MySpace tutorial, a MySpace account should first be created. This can be done by signing up for a free account on the website. Once an account is established and the user is logged in, the HTML changes can come into play.

With MySpace there are numerous HTML codes that are used for such features as leaving comments, changing pictures, and uploading graphics for backgrounds. Typically these codes are offered on the internet. For example, should someone search for a comment to leave on a friend’s MySpace page, they can create an internet search for “comments”. This will typically result in several outcomes for various websites that will offer these codes for free.

To retrieve the codes for use, simply highlight and copy the code. In order to place the code on a friend’s page, take the copies of the HTML code, and click on “add comment” under the comment section of the friend’s MySpace page. A dialogue box will then open up, and the information can be pasted into the comment box. This information will look like a series of parenthesis, equal signs, and other important coding. This is the HTML code. Once the information has been pasted and copied into the “leave comment” section, simply click on the “post a comment” link, and it will automatically leave the picture and any text that you have placed into the box in their comment area. Below you will find some examples on how to do some HTML in the comment section of your Myspace page:

If an individual wants to hide all of their comments, they have the ability to do this. To do so, there is another HMTL code that is to be added to the final section of the “I’d Like To Meet” portion of the MySpace webpage:

<div style=”position:relative; height:400px; overflow:hidden; border:0px;”><table><tr><td><table><tr><td>

Where it claims that the information is “hidden” in the above code will represent that the comments will be safe from others seeing them. Should the user decide to restore the comment section back to the way that it was, this can be done also, and will instantly open up the comment section once more.

The same also holds true for the hiding friends in the comment section. For those that do not want others knowing who their friends are on their MySpace page, they can easily eliminate this by adding the following code to the end of the “I’d Like to Meet” section as well:

<style type=”text/css”>
table table td.text table td.text table table tbody td table, .redlink, span.btext {display: none !important}
</style>

For those that are looking to add a scroll bar to their comment section, they, too, can make these changes to their MySpace page. Copy and paste this code under the “about me” section on the web page:

<br><DIV style=”height:560px; width:490px;overflow:scroll;border:none 0px solid”><table><tr><td><table><tr><td><br><br>

Adding this to the end of the “about me” section in the home page profile will ensure that the scroll bar is available for the comment section.

Leaving comments is not the only thing that MySpace is capable of. Items such as the background layout can also be changed on a personal page. As with the comments, a new layout can be searched for with an internet search engine. Once a desired layout has been selected, the HTML codes can then be selected and copied. From here, however, one has to click on the link that states “edit profile”. Once in this section, the code can be pasted under the “about me” area, which is where most of the HMTL codes will go for new backgrounds.

In order to manually edit the background section, the codes to be edited will look like this:

<style type=”text/css”>
body{background-image:url(“your image url“);
</style>

Where it states “your image URL” in the above code is where the copied URL should be pasted. Checking out the selected images with a preview will show the results of the background change before it is posted.

Fun widgets, comments, colors, pictures, and more can be changed on a MySpace page, thanks to the various HTML codes. As much, the codes can be changed as many times as desired, and can even be manipulated to where the codes are created to preference. Once a basic understanding of how the HTML codes work under MySpace, other horizons can also be used with the HTML understanding, such as with a blog on MySpace. The possibilities that are created with HTML codes and MySpace are expansive, and only end when the imagination stops.

The use of frames may not be as prevalent in HTML design as it once was, but it is still a worthy form of organizing your Web site and making it easy to navigate.

Dividing a page using frames (called a frameset) allows the visitor to view more than one page at a time without cluttering the screen. Each frame is its own Web site and can be viewed independently in a separate window.

The use of frames can be a dynamic way to get the most visual aspect out of your Web site. For example, the banner frame can be used for a business logo along with the company name. The index frame, on the left side of the screen, can be used as a table of contents, or as a place to link to other Web sites. The home frame will contain all the primary contents of the site, whose data changes each time the visitor clicks on a link. The footer frame at the bottom can be used as a means to briefly describe the company and offer e-mail addresses for contact information.

All of these contents will be seen on the same screen with the visitor accesses your Web site.

A frameset is basically a window with individual panes. Each pane has different content. You can decide the quantity and size of the panes, as well as the appearance of the borders and if the panes will have scroll bars.

Once the window is built, you create the landscape behind the window by assigning individual URLs to each frame.

Here is an example of HTML code creating a simple frameset:

<HTML>

<HEAD>

<TITLE>Frameset Example</TITLE>

</HEAD>

<FRAMESET ROWS = “130, *, 75”>

<FRAME NAME = “banner” SRC = “banner.html”>

<FRAMESET COLS = “130, *”>

<FRAME NAME = “home” SRC = “home.html”>

<FRAME NAME = “index” SRC = “index.html”>

</FRAMESET>

<FRAMENAME = “footer” SRC = “footer.html”>

</FRAMESET>

</HTML>

This example shows the frameset creates three rows of frames and two columns. The widths of these frames are denoted by the pixel numbers in quotations. The asterisk indicates the space remaining for the main (home) screen after the spaces used by the index, banner and footer.

The use of framesets is not as common as it was in early Web development primarily because of the use of navigation bars, which direct a visitor to information they want. Furthermore, some Web designers argue that the use of frames counteracts their intention – they clutter a screen rather than simplify it.

However, in order for the novice Web designer to understand all the functions HTML has to offer, utilizing framesets is a good steppingstone toward maintaining an optimum site. The experienced designer can picture a page without the frames but design the site with the framesets in mind in order to create an appealing site that is easy to navigate.

If you are embarking on a project to start your own Web site, you should know that the use of HTML tables will make your business or personal venture thrive.

Reference any professionally produced Web site and you will find that the most successful sites use many HTML tables to draw the browser’s attention. It is identical to using colorful graphics and charts as part of a report to highlight the nuts and bolts of your presentation.

Most Web sites utilize invisible HTML tables to divide the page into different sections. HTML tables can be used to create headers, menus and forms. They are also valuable for text and alignment of photos to create an organized display.

HTML tables put the fun into designing your Web page. The HTML table allows designers to arrange their data into columns and rows of cells. Each box within the HTML table is called “cells.” The data in these cells can include text, preformatted text, links, images, form fields, forms and other tables.

HTML Table Elements

TABLE – Denotes the range of the HTML table and uses attribute to define properties of the table.

BORDER – An attribute that indicates the size of the border that is drawn around the HTML table and between the cells.  

CAPTION – Defines the HTML table’s purpose. It can take only one attribute, which is ALIGN.

ALIGN – Defines where the caption should be placed. Possible values are “center”, “top”, “bottom”, “left” or “right.”

TR – Defines an HTML table row. Depending on your design, an HTML table consists of any number of rows. Each row contains cells defined by table data (TD) or table header (TH) elements. TD or TH elements define how many columns are in the HTML table. TR indicates the number of rows. Each row should contain the same number of cells; otherwise the alignment will be off.

HTML Table Example

Following is a simple HTML table example with 2 rows and 3 columns:

<TABLE BORDER = “2”>

<caption align=“top”> Family birthdays</caption>

<TR><TH> Name <TH> Relation <TH> Birthday </TH></TR>

<TR><TD> Joe </TD> <TD> Brother </TD>  <TD> 7/31/67 </TD></TR>

<TR><TD> Mary </TD> <TD> Sister </TD>  <TD> 2/11/70 </TD></TR>

</TABLE>

You should have a nifty HTML table that includes a border and the data neatly displayed to show the birthdays of the brother and sister.

Defining the HTML Table Example

End tags – You notice that </caption>, </TR>, </TH>, </TD>  and </TABLE> were used in the HTML table example. With many browsers the formatting of the table will be affected if these end tags are omitted. You should always use end tags especially when you design a table within another table.

Defaults – By default, a table is drawn without a border, so the HTML table designer must include the BORDER attribute to draw the lines. Also by default, a table is flush with the left margin. Use the ALIGN attribute for desired HTML table layout. If you want the table to be centered, input <TABLE ALIGN  = “center”>.

This is a basic tutorial of an HTML table design. Needless to say, the production of a full-scale HTML table design incorporates much more attributes. If you can perfect these basics, that will lead your productivity to a new level. Similar to how an artist works his sketch before laying the paint, this basic knowledge of HTML tables is a start toward building your ideal Web site.

With the widespread use of the web these days, knowing a bit of HMTL is useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages, and Markup means you’ll use some simple characters to mark how you want your words to appear. While you can do very complicated things with HTML, the basics are straightforward.

If you’ve used a word processor that has styles, you probably already understand the basic idea – you may want some words to be bold, and others to be italic. In HMTL, type plain text, and use markup to describe how it should display. When you view your text in a web browser, the formatted text is shown. Different browsers may display the text slightly differently. You’ll also use markup to make your links to other pages.

One important thing to know is that any formatting you type in your editor, like tabs, extra spaces and carriage returns are ignored when the page is displayed. You must use the markup to do your formatting.
How Enter Markup
In HTML, the markup has a standard format – the markup instructions go inside angle brackets, like these <>. There’s always a start and end to a markup. If you want some text to be bold, you start with <b> and you end with </b>. The slash indicates you’re done with the bold markup. For example:

Do <b>not</b> leave the door open, <b>or else!</b>

Displays as

Do not leave the door open, or else!

Here are some of the common markup types, also called tags:

<p>                              Starts a paragraph.

<i>                               Italic

<b>                              Bold

<h1>, <h2>,<h3>        Header1, Header2, Header3

How these display depends on your browser, but they are headings, and usually are a bigger font than the main text.
Create an HTML page
Every HTML pages has the following parts – it is marked as an html document, has a head, and a body.