- Demonstrates the skill of creating, saving and
opening your own webpage.
- Demonstrates knowledge of webdocument structure
- Uses tag for headlines to create your own web page.
- Understands the differences between the types of
- Uses basic tags to create your own webpage.
words and phrases:
• Website, webpage,
WYSIWYG, text editor, CMS, Microsoft Front Page, Adobe Dream Weaver, Notepad,
Joomla, Word Press, HTML
A series of useful phrases
for dialogue / writing:
• HTML is used for ,,,,
• We use tags for ....
• Tags are ...
• I used (a) title tag ...
The font tag was brought in early
in HTML’s life to allow designers to change the size, typeface and colour of
their text. It proceeded to do more harm than good — for all sorts of reasons —
but mainly because it is a hugely inefficient way to format text. CSS text
formatting is vastly superior, but knowledge of these old-style techniques is
You have two options when setting
your text’s size: sizing it absolutely or relatively. Absolute sizes are
between the range 1 and 7, and are set like this:
Most browsers have their default
font size set as 3. The majority of sites will have their text set at around
size 2 or 3.
Relative sizing means the text will
resize relatively to the user’s default size. This is better because it adapts
to your users’ preferences — if they have specifically set their browsers up to
display larger text than normal, your text will grow in proportion. You have a
range between +6 to +1 and -1 to -6. Plus 1 and minus 1 will be the ones you’ll
use most. As shortcuts to these two sizes, there are the tags
<big></big> and <small></small>, which helps.
size="+1">Text one size greater than the browser’s
Stay away from really small text,
as it’s always too hard to read. Big text can swamp a page and induce too much
scrolling. In the end, your choice of font size will have a lot to do with how
much text is going to be on a page at a time. It is also tied to your choice of
font, which we’re getting to next.
First off, if you make no changes
at all, your text will probably look like this:
12pt Black Times New Roman
Not the most beautiful or suitable
font in the world because it was really designed for reading off paper, not
computer screens. So, you’ll want to change it to something more readable and
Have a look in your fonts folder
(on a PC it’s C:\windows\fonts). You should have a few dozen different fonts in
there. Some will be suitable for usage on the web and others you will use again
and again. One of the most common fonts used on the net is Arial (a variant of
the Mac’s Helvetica). To change text to Arial, or any other font, the tags are
face="Arial">Your text here.</font>
The face attribute was so-named
because font designs are more accurately known as typefaces.
A particular font face will only
appear on a reader’s computer screen if they have that font installed on their
computer. So if you have your whole page defined in Digital font (» download)
or something, a load of your viewers will just get a page with boring old Times
New Roman. To get around this, the best idea of course is to use common fonts.
There are a set of common fonts that you can be more or less assured will turn
up on all your readers’ systems. The face attribute allows you to specify a
list of fonts at a time. It is good practise to specify back-up fonts in case
things go awry. Watch:
See — you get a couple of chances
to find a good font, separated by commas. If the first one isn’t available your
second choice will be used and so on. You can go on with a long list but
really, you should stop after around 3 because you’re wasting your time
otherwise. Try to keep the fonts similar along the way and try and end it on a
common font to stay away from Times.
All fonts are a member of a certain
family of fonts. For instance, Arial is of the type ‘sans-serif’. If all of
your alternatives are exhausted without finding a match, your last resort is to
specify a family of fonts. If it comes to this, the default for this family
will be used. You can learn all about font families and the differences between
them in web typography.
Even then, most people won’t be
seeing your super cool font, so if you want this font to be used, make it into
a graphic in your image editor and put the graphic on your page where you want
it. It’s frowned upon in proper web design, but if you’re just starting out
it’s acceptable until you learn how to go around it properly. Do remember of
course that if someone has images turned off they won’t be able to read this
text at all. Make sure it’s not too important and always use the alt attribute.
sourcetip: if you have a word
processor like Word, try a couple of fonts out in that. It’s a lot faster to
find the one you want.
For your convenience, here is a
group of the most popular and common font lists:
MS, Arial, Helvetica, sans-serif
New Roman, Times, serif
Garamond, Palatino, serif
New, Courier, monospace
To change the colours of the text
on a page for the entire page, you can define it in the <body> tag. I
have a complete tutorial on body here.
To change the colours of just a
small block of text or an individual word, you have to use the old font tag
again. The format is
Colours in HTML have to be defined
as HEX codes, which are 6-digit codes representing the amount of red, green and
blue (RGB) in the colour. To see a full chart of these codes so you can pick
out the ones you like, see the HEX colour chart.