General HTML page Layout tags and elements
In this section we will briefly go over and prepare you for the following sections to come. We show you the general layout of the web pages and follow up with a more detailed explanation.
The <!DOCTYPE>
The doctype declaration is placed on the very first line in an HTML document and normally comes just before the <html> tag. It is a command to tell the browser how the markup is to be interpreted and rendered to the screen.
A doctype Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Although there are many different types of Doctype and in each type there are different sets of rules we will start with probably the most common and definitely the most flexible which is:
HTML 4.01 Transitional
Dont worry too much about this element at the moment as its almost always the same and its not absolutely nessecary for the webpage to show properly in the browser.
The <html> tag
<html>.....</html>
As we learnt in the previous pages of the tutorial, HTML stands for Hyper Text Markup Language. For a document to be recognized and interpreted by a web browser (such as Internet explorer or Mozilla Firefox) as a HTML file, the tags <html> and </html> should be declared at the top and bottom of the document. Example:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
<html> All webpage contents </html> |
So where as <html> indicates starting of the HTML page. </html> indicates the ending of the HTML page. Between this tag are contained all the elements and their attributes of the web page.
The <head> tag
<head>...</head>
Located in the first section of the HTML document are the <head> tags, they are normally placed immediately after the <html> tag and contain the header elements.
This is where information about the document is located and this element also starts with the <head> tag and ends with the </head> tag.
The information located between the <head>...</head> tags is NOT displayed in the browser window.
Contained here is information such as:
- Language settings
- Page title
- External scripts
- Styles (CSS)
- Search Engine helpers
- MetaTags
The <body> tag
<body>.....</body>
The next section following the </head> of the HTML document and normally the largest part is the web page body and this starts with the <body> tag. The body element starts with the <body> tag and ends with the </body> tag.
All contents and information you want displayed in the browser is included here. This includes text, images, links, forms etc.
Body tags can also have their own attributes, including:
- Background colours and images
- Link colours
- Text colours
It is also worth noting here that the attributes controlling the tags and elements in the body are far better controlled by Cascading Style Sheets or CSS for short, but we will not go into this in this tutorial.
Example of this sections tutorial
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Type of Document
................... HEAD Area and location of elements and document info not visible in browser.
</head> end of header
................... BODY Area and location of visible contents
</body> end of body |
Want to see how a normal webpage is layed out ?
Right click on this page and in the dialog box click “view page source” this should open a window showing you the HTML source that the web site contains.