Accessible Forms

Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, it is a good idea to add a number of elements to the form.

Labels

Each form field should have its own label. The label tag sorts this out, with a for attribute that associates it to a form element:

<form>
<label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName" />
...

Labels have the added bonus of visual browsers rendering the labels themselves clickable, putting the focus on the associated form field.

Note: name and id are both required - the name for the form to handle that field and the id for the label to associate it to.

Field sets and legends

You can group fields, for example name (first, last, middle, title etc.) or address (line 1, line 2, county, country, postal code, country etc.) using the fieldset tag.

Within the field set, you can set a legend with the legend tag.

Note: Visual browsers tend to represent field sets with a border surrounding them and legends breaking the left of the top border.

<form action="somescript.php" >
<fieldset>
<legend>Name</legend>
 <p>First name <input type="text" name="firstName" /></p>
 <p>Last name <input type="text" name="lastName" /></p>
</fieldset>
<fieldset>
 <legend>Address</legend>
 <p>Address <textarea name="address" ></textarea></p>
 <p>Postal code <input type="text" name="postcode" /></p>
</fieldset>
...

Option groups

The optgroup tag groups options in a select box. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the drop-down list of visual browsers.

<select name="country">
 <optgroup label="Africa">
  <option value="gam">Gambia</option>
  <option value="mad">Madagascar</option>
  <option value="nam">Namibia</option>
 </optgroup>
 <optgroup label="Europe">
  <option value="fra">France</option>
  <option value="rus">Russia</option>
  <option value="uk">UK</option>
 </optgroup>
 <optgroup label="North America">
  <option value="can">Canada</option>
  <option value="mex">Mexico</option>
  <option value="usa">USA</option>
 </optgroup>
</select>

Navigating fields

Like links, form fields (and field sets) need to be navigated to without the use of a pointing device, such as a mouse. The same methods used in links to make this task easier can be used on form elements - tab stops and access keys.

The accesskey and tabindex attribute can be added to the individual form tags such as input and also to legend tags.

input type="text" name="firstName" accesskey="f" tabindex="1" />
<

More about tables

The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.

What is left then?

The two attributes colspan and rowspan are used when you want to create fancy tables.

Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:

Example 1:

 
 <table border="1">
   <tr>
  <td colspan="3">Cell 1</td>
   </tr>
   <tr>
  <td>Cell 2</td>
  <td>Cell 3</td>
  <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1
Cell 2	Cell 3	Cell 4

By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.

Example 2:

 
 <table border="1">
   <tr>
  <td colspan="2">Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
  <td>Cell 5</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1		Cell 2
Cell 3	Cell 4	Cell 5

What about rowspan?

As you might already have guessed, rowspan specifies how many rows a cell should span over:

Example 3:

 
 <table border="1">
   <tr>
  <td rowspan="3">Cell 1</td>
  <td>Cell 2</td>
   </tr>
   <tr>
  <td>Cell 3</td>
   </tr>
   <tr>
  <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2
	Cell 3
	Cell 4

In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.

Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.

Not confused? Then go ahead and create a couple of tables with both colspan and rowspan on your own.

The final tips

Congratulations, you have now reached the final lesson.

So now I know everything?

You have learned a lot and you are now capable of making your own websites! However, what you have learned are the basics and there is still a lot more to be mastered. But you now have a good foundation from which to build on.

In this last lesson, you will get some final tips:

• First, it is a good idea to maintain order and structure in your HTML documents. By posting well arranged documents you will not only show others your mastery of HTML but will also make it considerably easier for yourself to keep an overview.
• 
  
• Stick to the standards and validate your pages. This cannot be stressed enough: Always write clean XHTML, use a DTD and validate your pages on validator.w3c.org.
• 
  
• Give your page contents. Remember that HTML is a tool, which enables you to present information on the Internet, so make sure that there is information to present. Pretty pages may look nice but most people use the Internet to find information.
• 
  
• Avoid overloading your pages with heavy images and other fancy stuff you have found on the Internet. It slows down the loading of the page and could be confusing for visitors. Pages that take more than 20 seconds to load can lose up to 50% of their visitors.
• 
  
• Remember to add your website to search engines/directories so people other than your closest family can find and enjoy it. On the front page of all search engines, you will find a link to add new pages (The most important is Google, but there are also others like DMOZ, Yahoo, AltaVista,AlltheWeb and Lycos).
• 
  
• In this tutorial, you have learned to use Notepad, which is a simple and very easy to use editor, but perhaps you will find it helpful to use a more advanced editor which gives a better overview and more possibilities. You can find a summary and reviews of different editors on Download.com.

How do I learn more?

First of all, it is important that you continue to work and experiment with the things you have learned in this tutorial. Study other people's websites and if you find something you like see how it was made with "View Source" (Click "View" in the menu in your browser and choose "Source").

Search the Internet for examples and articles on HTML. There are lots of websites with great contents on HTML.

Read and ask questions in the Forums. This is where you meet the real experts from whom you can learn a lot.

Last, but not least, you should - whenever you feel ready - continue learning CSS in our CSS Tutorial.

The only thing left is to wish you hours of fun with your new friend, HTML.

See you on the Internet :-)

Web standards and validation

In this lesson, you will get a little more theoretical knowledge on HTML.

What more is there to know about HTML?

HTML can be coded in many different ways. And browsers can read HTML in just as many ways. You could say that HTML has many dialects. That is why some websites look different in different browsers.

There have been attempts to make a common standard of HTML through the World Wide Web Consortium (W3C) founded by Tim Berners-Lee (yep! the great guy who invented HTML). But it has been a long and tough road.

In the old days - when browsers where something you had to pay for - Netscape was the dominate browser. Back then, the most supported HTML standard where called 2.0 and later 3.2. But with a market share of over 90% Netscape did not have to - and did not - care much about common standards. On the contrary, Netscape invented their own strange elements, which did not function in other browsers.

For many years Microsoft almost completely ignored the Internet. After a while they took up the competition with Netscape and introduced a browser. The first versions of Microsoft's browser, Internet Explorer, were not any better than Netscape at supporting the HTML standards. But Microsoft chose to give away their browser for free (always a popular thing to do) and Internet Explorer soon became the most popular browser.

From version 4 and 5 Microsoft aimed to support more and more of the HTML standards from W3C. Netscape did not manage to develop a new version of their browser and continued to distribute the outdated version 4.

The rest is history. Today the HTML standards are called 4.01 and XHTML. Now it is Internet Explorer that has a market share of over 90%. Internet Explorer still has its own strange elements but it also supports the W3C HTML standards. And so do all of the other browsers, such as Mozilla, Opera and Netscape.

So, when you code HTML following the W3C standards, you make websites that can be seen in all browsers - both now and in the future. And luckily, what you have learned in this tutorial is a new and stricter and cleaner version of HTML called XHTML.

How do I tell which version is used?

With all the different types of HTML you need to tell the browser which "dialect" your HTML is in, in your case XHTML. To do that, you use a Document Type Declaration. The Document Type Declaration is always written in the top of the document:

Example 1:

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

 <head>
 <title>Title</title>
 </head>

 <body>
 <p>text text</p>
 </body>

 </html>
 
 

Besides the Document Type Declaration (the first line in the example above), which tells the browser that you want to write XHTML, you also need to insert some extra information in the html tag with the two attributes xmlns and lang.

xmlns is short for "XML-Name-Space" and should always have the value http://www.w3.org/1999/xhtml. That is all you need to know. But if you have a big hunger for complicated knowledge you can read more about namespaces on W3C's website

.

In the lang attribute you state which language the document is written in. For this the ISO 639 standard is used, which lists codes for all the languages in the world. In the example above the language are set to English ("en").

With a DTD the browser knows exactly how it should read and show your HTML. Hence, use the example above as template for all your future HTML documents.

The DTD is also important when you want to validate your pages.

Validate? Why and how should I do that?

Insert a DTD in your pages and you can always check your HTML for errors by using W3C's free validator.

To test this out, make a page and upload it to the Internet. Now, go to validator.w3.org and type the address (the URL) of your page and validate it. If your HTML is correct you will get a congratulations message. Otherwise you will get an error report telling you exactly what and where you have done something wrong. Make some errors on purpose to see what happens.

The validator is not just helpful to locate an error. Some browsers try to compensate for lack of skills among web developers by trying to fix errors in the HTML and showing the page as they guess it should look. With such browsers, you might never see an error in your own browser. However, other browsers might guess differently or not show the page at all. The validator can help you find errors you did not even know existed.

Always validate your pages to be sure they will always be shown correctly.

Uploading pages

Until now, only you have had the satisfaction of viewing your pages. Now it is time for the rest of the world to see your masterpieces.

Is the world ready for that?

The world is ready - you soon will be too. To get your website on the internet, you just need some server space and a free FTP program.

If you have Internet access, you might already have some free server space for your website. Your server space will then probably be called something like http://home.provider.com/~usernumber. But you might need to activate it first. Read more about this in the papers from your Internet provider or on their support pages.

Another option is to get some free server space on the Internet. In the same way that you set up an e-mail account (at for example Hotmail), you can register for free server space on the Internet. Several companies offer such a service - among them webhost.com (click "Order Now" under "Free Hosting") - it will only take a couple of minutes to register.

To have access to the server, you need to know the "Host Name" (For example, ftp.htmlnet.site50.net) and have your username and password ready.

Is that all I need?

To access the server and upload your pages, you also need an FTP program. FTP is short for File Transfer Protocol. A FTP program is used to connect two computers over the Internet so that you can transfer files from your computer to another computer (the server). You might not have such a program yet, but fortunately, this can be downloaded for free.

There are many different FTP programs. One of the better is FileZilla, which is entirely free. So now you can download FileZilla at filezilla.sourceforge.net.

And how do I upload the pages?

Described below is how you upload your pages to a free account at 000webhost.com with FileZilla. But the procedure is, more or less, the same for all providers and FTP programs.

Open the FTP program while connected to the Internet. Insert "Host Name" ("ftp.htmlnet.site50.net" under "Address"), username (under "User") and password (under "Password") and click "Connect". You should now have access to the server. In one side of the program you can see the contents of your computer ("Local Site"), and in the other side, you can see the content of the server ("Remote Site"):

Find your HTML documents and images on your computer (on the "Local site") and transfer them to the server (the "Remote site") by double clicking on them. Now the whole world can see them! (For example, at the address http://htmlnet.site50.net/page1.htm).

Name one of the pages "index.htm" (or "index.html") and it will automatically become the start page. i.e. if you type http://htmlnet.site50.net (without any filename) you will actually open http://htmlnet.site50.net/index.htm.

In the long run, it might be a good idea to purchase your own domain (for example www.your-name.com or www.your-name.net) and avoid the long and complicated addresses you are being assigned by your Internet provider or from providers of free server space. You can find and purchase domains at for example Speednames or NetworkSolutions

Making An Image a Link

Making An Image a Link

This code will create the google logo which will link to the html tips homepage:

<a href="http://www.google.com"
Title="Link to Google"><img
src="http://www.google.com/images/logo.gif"
alt="Link to Google"></a>

Insert the code above onto one line and you will get this:

Open a Page in a New Window

Open a Page in a New Window

To have a link in which, when a viewer presses it, will open a page in a new window, you need to listen to this:
Insert something like this: 

<A HREF="http://www.google.com/" TARGET="_blank">Open Google in a New Window</a> 

And look at what happens:
Open Google in a New Window 

Automatically Redirect Visitors

Automatically Redirect Visitors

To redirect anyone who visits your site, automatically, you just need to insert html: 

<meta HTTP-EQUIV="REFRESH" content="0"; url=http://www.google.com"> 

See the content = "0" thing?
Change the zero to change the amount of seconds before your viewer will be redirected.
I decided not to show an example on this site.