The first part of this tutorial dealt with the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings. The second section discussed Hyperlinks, Pictures and Lists and the final section will now cover the use of forms for collecting information from the visitor, and how to display tabular data in tables.

Tables

Tables are the perfect way to show data which needs to be tabulated. Please please don’t use tables for layout out your content on the page – that’s what CSS and style sheets are for! Here is an example of a basic table:

<table border="1">
   <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
   </tr>
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
   </tr>
</table>

This would result in a table which looked like the following:

It’s not the prettiest thing in the world, but it does get the job done. You can alter the look and feel using CSS. Here is a quick explanation of what each tag is for:

<table border="1"> – This tells the web browser you want to start showing a table, with a small border

<tr> – This is the code to start a new row

<td> – This is a cell in the table. The number of cells you put in each row will determine the number of columns

Forms

So now you know how to show content on a page using HTML, what happens when you want to get some information from a visitor to your website? The technique used to do this is appropriately called a form. Once you have collected the information, you need to decide what to do with it. You can either add it to a database (a bit beyond the scope of this article), or email it. HTML can’t deal with emails or databases, but a different language called PHP or ASP can. Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:

<form action="submit.php" method="get">
   Name: <input type="text" name="name" /><br />
   Email Address: <input type="text" name="email" /><br />
   Message: <textarea name="message"></textarea><br />
   <input type="submit" value="Send Form" />
</form>

This will result in a form which looks similar to the following:

So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:

<?php
$subject = "Website Message";
$message = "Someone sent you a message from your website:
Name: $name
Email: $email
Message: $message";
$youremail = "me@mywebsite.com";
mail($youremail,$subject,$message,"From: $email");
echo 'Thankyou for filling in a form!';
?>

All you need to do is change me@mywebsite.com to your actual email address. You’ll be receiving form submissions from your website in no time!

Conclusion

That rounds up our Introduction to HTML, and you should have a basic grasp of how to start creating a website. We’d recommend looking at our CSS Basics now, to grasp how to get your website looking great. Also, check out our Introduction to Web Standards to see how they can help your designing.