Introduction to HTML – Part 3
HTML (Hyper Text Markup Language) is the core of designing websites. Part three of this introduction covers the use of forms for collecting information from the visitor, and how to display tabular data in tables.
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.
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Shopify, Tumblr & More
Landing Pages & Email
Logos, Print & Mockups
PowerPoint & Keynote
Sans Serif, Script & More
Icons, Vectors & More
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:
This would result in a table which looked like the following:
|Heading 1||Heading 2||Heading 3|
|Data 1||Data 2||Data 3|
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.
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" />
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:
$subject = "Website Message";
$message = "Someone sent you a message from your website:
$youremail = "[email protected]";
echo 'Thankyou for filling in a form!';
All you need to do is change [email protected] to your actual email address. You’ll be receiving form submissions from your website in no time!
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.