During this tutorial, we will establish basic under-lying structure within an HTML document. You will be surprised just how simple a language HTML is and how quickly it can be adopted.
Let me first of all explain what HTML is. HTML is an acronym for ‘Hyper-Text Mark-up Language’. It is an adaptation of the original ‘Mark-up Language’ found within the first word processors back in the 1980’s. HTML is a few levels higher, allowing for better layout, picture placement and ‘hyper-link’ (links to other internal or external pages).
HTML Structure Example
Type the following in to your source code editor:
This is an example of our first tag. The <html> tag lets a web-browser know for sure that it is dealing with an html based web page. Please note the manner in which the tag is surrounded by chevrons and that the tag is repeated with the inclusion of a ‘/’ to terminate the mark-up. In most instances, you’ll see this same structuring for all manner of tags.
Now within the <html> tags, add a little more code so that it appears as:
<html> <head></head> </html>
It is worth noting that line breaks (caused by pressing the ‘Enter’ or ‘Return’ key on your keyboard), can be applied to help you easily organise and read your html code. They will not appear in the browser, so do use them.
Now add the following:
<html> <head></head> <body>This is my first HTML page!</body> </html>
The <body> tag is where all of your visible page contents will reside. The tag must be below the <head> tag and within the <html> tag.
OK, so you may think that this study of HTML structure is a little complicated, but if you start every page you create with the above structuring, you can’t go wrong. Make a back-up of this example and cut-and-paste from it.