TwoPointFour Beginner's Guide to HTML
This tutorial will attempt to explain the basics of HTML web design. HTML is short for Hypertext Markup Language and was developed by Tim Berners-Lee and colleagues in 1990. HTML is the language most web sites are based on although modern developments have introduced XHTML (Extensible Hypertext Markup Language). You can read w3's explanation of XHTML here.
HTML consists of tags which declare certain parts of a web page such as the header <head></head> or a table <table></table>. Everything in between the opening <head> and closing </head> tags will be processed within the header.
The most basic of web pages consists of the following:
<html>
<head>
</head>
<body>
This is a basic web page!
</body>
</html> |
There are no instructions within the header and the body (main output area) of the page contains just one short line of text. Try copying the above snippet of code into notepad and save it as test.html - you will need to set the dropdown as All Files where it says 'Save as type' otherwise it may save it as a text (.txt) file. Open your Internet Browser and go to File, Open then browse to the file you just created. You will see your very first web page!
When creating a web page it is important to close your tags in the correct order. You will see from the above example that we open with the <html> tag - this declares a html page which will conform to standard html rules. Next is the <head> tag which is closed with </head> straight after. Within the head tag we can put important information such as the title of the page and a description of it's content. Once we are finished with the header information we can close the tag. Next comes the body tag and all the information you want to appear on the page goes in here, before the </body> tag. We finally add the closing </html> tag to signify the end of the page.
To test the title function go back to notepad and add the following line directly underneath the <head> tag but above the </head> tag:
| <title>My First Web Page</title> |
Once you have added the line save the file and refresh your browser window. Have a look at the very top bar of the window and you should notice it has changed to the text inside the title tag. Great, isn't it! You can change the title tag to anything you wish. The title is a very important part of your site when it comes to Search Engines such as Google.
Continue to next page >>
Return to Tutorials homepage
