Creating a webpage using HTML

The purpose for HTML is to lay out the structure of the web page.

This is achieved by organising the text with the page. Giving weight to the content as it is distributed over the each page. Taking the reader from the general theme to more particular areas of detail within the text, and than on the further reading on other page or contained on other sites.

Attention is drawn to areas of text by making the text stand out. This is achieved by making the text appear either large, smaller, or in bolder print. In changing the size of the font text within your theme may be modified serving to establish the level of importance which may be attributed to passages of text over the page. Indicating to the site visitor which areas of content within the page would be of greatest value to read and which areas provided additional secondary information.

At a deeper level the layering of information contained within the page is organised through the implementation and positioning of div’s (division’s) throughout the web page.

These elements are positioned by giving them a position left or right, top or bottom.

They present the designer with the ability to create a layout that reflects the look and feel of a magazine.

The styling of a basic page is created by positioning five simple elements in the page. Those items are the; body, header, navigation, content, and footer for the site.

When styling an element it is required that two basic attributes are given values and qualities. For example the header may be given the following values, a width, a height and a background-color. To define division’s (div’s) on a page they are given an ‘id’ the ‘selector’ to which is added the ‘decoration’.It is the decoration that describe the qualities an object has and displays.

The qualities displayed are its position and size. In placing an item, in this case the header to the site, twenty pixels to the left, and twenty pixel from the top of the page. It will also be given a set width and height. All elements on a page must be given dimensions relating to its width and height in order to be visible on a page. The order in which elements are position on screen will define how they flow over the page.

In the example below I have created a div, with the id ‘header’, and I’ve also given it dimensions and a color.

All elements in the page you are to design are to be styled using the same method. Please note that I have deliberately used lower case lettering in defining the header tag. This is an important feature in how the page markup is written.

<div id=”header” style=”position:absolute; width:250px; height:100px; background-color: blue; top:20px; left:20px;“>



Each page viewed on screen is made up of ‘tags’. The tags embrace the content that is intended to be viewed by the user. All tags work in pairs and require to be opened and closed in order to render text, images and media to screen.

The first set of tags you create are those which outline the page basic page structure. They create the page ‘title’ which is displayed in the header bar to the browser of choice. The ‘body’ contain the content with the body we use div’s to position all items.

Below are a list of the individual elements used in creating a page. They follow the structure used to create a simple page.


<head><title></title> <head>


<div id=“header”></div>


<div id=’container’></div>

<div id=”footer”></div>








Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: