Layout and Formatting Web Pages
Table of Contents
To Home page
- How do I apply font style & sizes?
- What is a font style ?
- What are HTML tags?
- How does HTML format text?
- Some examples of HTML tags
As a general rule you should aim for consistency
in use of font style & sizes
- Use the same style of
font for headings e.g. a serif font such as Times New Roman and
the same style for body text e.g. Arial
- Use the same consistent
sizes for all headings (if possible throughout the web site!) For
example all the help page on this site use Banner Headlines size36p,
Subheadings size18, main body text size 14.
- Only use fonts that are found on most computer
systems and are easy to read. Go to Tools menu 'Page Options - Default font
to set up default for your use of program. Fonts like 'Accent'
may look fine but are sometimes not available on some systems and when used
a lot are tiresome to read!
A style is a stored collection of font and
paragraph settings. It is quick to apply when you start to type or by
highlighting imported text.
- Look at the stored
styles on the formatting toolbar. The most common to use are
the 'normal style' set up for the page and the various Heading styles.
These are based on HTML 'tags' for their sizes (see 'What are HTML tags'
below). The largest is size 1 and the smallest is size 5.
- Style sizes are as
follows in the table list below
|
Style |
HTML Font Size |
Normal Font Size (in Points) |
| Normal |
3 |
12 |
| Heading 1 |
6 |
24 |
| Heading 2 |
5 |
18 |
| Heading 3 |
4 |
14 |
| Heading 4 |
3 |
12 |
| Heading 5 |
2 |
10 |
| Heading 6 |
1 |
8 |
| Numbered/Bulleted list |
2 |
10 |
| |
|
|
Hypertext Markup Language codes your page so it appears as you want it on the
screen
- The content is plain text (ASCII) or graphic image representation
- The layout of the text and images is created by control codes called
MARKUPS or TAGS. These controls do not show up on the screen when you
view the page but can be viewed if you look at the HTML of the page.
- Editors such as FrontPage and Dreamweaver will
enter the tags automatically as you work. You can however enter then
yourself in HTML view.
What do tags look like?
They are delineated by opening and closing brackets eg the paragraph
tag is <p> Some have just the tag such as line break <br> and
others have an opening tag <p> and a closing tag </p> when something
new is started with another command .
Have a look at these from a simple page.
- Text in HTML is separated into paragraphs, so
if you press the enter key it will create a new paragraph and leave an empty
line between text
- Text will however 'wordwrap' at the end of a
line without creating a gap in the lines.
- Within tables text also wraps to the next line
- If you want to force the writing to appear on
the next line down you must give the tag <br> by holding down the
shift key as you press the enter key at the end of the line.
- See this below.
- Pages are separated into 3 sections, the HEAD,
BODY and FOOT The HEAD has ceratin specific tags for page recognition.
- The main BODY content is enclosed within the
body tag
- Tables are enclosed within table tags
-
Any formatting such as colour
change or font changes are marked up by tags as can be seen below.
-
Lists such as this have their
own tags.
-
If you align something to centre
another tag is produced.
-
See some examples below.
Copyright © 1999 [Learnsouthwest.co.uk]. All rights reserved.
Revised: August 04, 2002
.