Building Web Pages

Formatting Web Pages

Formatting

In the beginning...

Making your text look good

Positioning your text on the page

Adding images

to other pages and web sites

eBooks.
Free templates

Info.
What next?

<PRE> …… </PRE>
Pre-formatted
A very simple tag which displays text, as written, with paragraphs, etc.
Place it around your page text and view the difference.
You now have:

<PRE>
This is where your text is
copied in with it's
line breaks, etc.
</PRE>

</BODY>
</HTML>

View your page.
Now you have seen the affects of <PRE>, remove the <PRE> start and end tags.

So how do we format the text without <PRE>?
<br>
The Break tag. Used without a closing tag.
Insert these into your text, at the line breaks and see what happens.

You can use <br><br> to start a new paragraph or the <P> tag.

<P> ………</P>
Defines a paragraph and is also used in Style Sheets.

Make sure that you have removed the <PRE> and </PRE> tags.
Try <br> and <P>... </P> in your page and view the effects.

Set Page Colour.
Can be done within the <BODY> tag or by Style Sheets.
i.e.:
<BODY bgcolor="red"> or <BODY bgcolor="#FF0000">
Simple colours can be called direct but colours are usually defined by hexadecimal codes.

Hexadecimal colour coding
(You do not have to worry too much about this now but this explanation may be of interest anyway)

All colours are made up from varying degrees of red, green and blue, (RGB).
You can set font or background colour using these values.

i.e.:
Black is #000000, (no colour at all)
White is #FFFFFF, (all at full colour produces white)
Red is #FF0000
Green is #00FF00
Blue is #0000FF

In 33FF99
(written #33FF99)

33 = a low degree of red
FF = max green
99 = medium level of blue

So if these are numeric values, like perhaps, percentages, where do the letters come from?
The hexadecimal numbers are to a base of 16 not 10.
They are represented by 0 to 9 then A to F.

Internet-safe colours are generally made up using 00 33 66 99 CC FF.

________________________________________________________
In most graphic applications, you can set colours using a 0 to 255 scale for Red, Green and Blue.
In some graphic tools, these may represented as percentages of the full colour.
You can actually convert all these to and from hexadecimal.
Fairly mind boggling at first but it is the sort of thing you can end up doing in your head.

You can also define font and link colours, in the body tag, but Style Sheets are better.

For now, just set the page and font colour.
<BODY bgcolor="#FFFFFF" text="#000000">
Gives white page and black font.
or
<BODY bgcolor="#000000" text="#FFFFFF">
Gives black page and white font.
Or
<BODY bgcolor="#FF0000" text="#FFFF00">
Gives red page and yellow font.

Add the colours to your body tag and view the new page.

Browser Compatibility - Margins
'leftmargin' and 'topmargin' tell Internet Explorer how to display the page.
'marginwidth' and 'marginheight' tell Netscape how to display the page.
Example:
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

The Font Tag
This tag defines the font.
e.i:

This is the code

This is how it will look.

Your text here…..

'face' defines, Arial, Times New Roman, etc.
This is a simple version.
Note the use of 'color' for font as opposed to 'bgcolor' for the page or background color in body tag.

Bold
Add <b> and </b>
i.e.

Your text here…..

Note the alternative face terms. To start you can use just 'Arial' or 'Times New Roman'.
Note how first tag opened is last closed.

Title Tags
H1 is the largest title size, H6 is the smallest, i.e.:

<H1>Your title here…..</H1>
or
<H4>Your title here…..</H4>

Your title here…..