Main HTML CSS PHP Web Design Top Tips Be a Web Designer

Web Design for Beginners

Free top tips for web designers

Tutorial Areas

Basic webpage structure

By James Middleton - Added 25th of June 2008

During this tutorial, we will establish basic under-lying structure of an HTML document. You will be surprised on 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', or links to other internal or external pages.

For the time being, our attention will be directed at creating 'Mark-up' or 'tags' to structure our page.

HTML Structuring Example

Type the following in to your source code editor:

<html></html>

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 webpage. Please note the manner in which the tag is surrounded by cheverons 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>

We have now added the 'head' tag inside of the html tag. The head tag is used to hold information about your page, such as a title or description for search engine usage.

It is worth pointing out at this point that line breaks (caused by pressing the 'Enter' or 'Return' key on your keyboard), can be applied to help you easily 'read' your html code. They will not appear in the browser, so do use them.

Now add the following:
<html>

<head></head>

<body></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.

Conclusion

Ok, so you might think that it is all 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.

Credits & Links

Article written by James Middleton - www.webdesign-4-beginners.co.uk.

Information for Publishers

You are free to republish this article, provided you retain all hyperlinks as active in the above credits.

Add your own comments

«Back