top of page

Basic Positioning

Positioning is one of the most important things in HTML when it comes to layouts. It can change the entire dynamic of your page. When you know how to work with the simple tags, positioning is easy.
Before considering positioning make sure everything you have created is in a basic table, so you can control your items easier.

When playing around with HTML coding I recommend doing it on a HTML preview programme

This is my preferred editor as it changes the page preview as you work so you can see what is happening in real time.

Centering: simply place the <CENTER> tag infront of the text/image you wish to center. Anything after this will be centered.


Stop Center: Place </CENTER> after your text/image that has been centered.

Page Break: Place <BR> to move the item onto the next line. Using more than one <BR> will make bigger spaces as it goes onto the next line.


Text Alignment:

When entering simple text the <P> tag can be used infront of text to create a new paragraph. When you want to move the text either left or right the following code can be placed before the text you wish to align.


<p style="text-align:right"> or <p style="text-align:left">


When you are changing the alignment of text from one way to another make sure you end the previous text with </P> and start the next text with <P> before you try to align it with the codes above.

 

Image Alignment:
In image alignment there are two basic directions: left and right.


First make sure you have a similar code to this:


<img src=" IMAGE.JPG " width=" WIDTH OF PIC " height="HEIGHT OF PIC " alt=" NAME OF PIC " border="0" hspace=" A " align=" B ">

 

Then you can change the values to move your image.
A =  Hspace value: how far to the alignment direction it goes. E.g. If aligned right, the bigger Hspace value will push it further from the right (i.e. towards the middle). The number entered must be numerical digits.


B = Direction of alignment: Only left or right can be entered in the value.

bottom of page