HTML allows you to specify which font's to use in a document, the sizes and colours and the 'style' of the font can all be tailored to suit your tastes - however good or bad that may be.
This poses a small problem if you decide to use a font which is not installed on a user's machine. For example, most, if not all Windows machines have Arial and MS Comic (my favourite font) installed. People using an Apple Macintosh will probably also have those fonts or an equivalent.
People using UQLX and a Lynx browser probably won't have those fonts installed (correct me if I'm wrong !) so the browser will ignore the request to use a font, and simply use the default font instead. Bear this in mind when you create your web pages using all sorts of fancy fonts. It might look totally hopeless when displayed in a font other than the one you chose.
To use a specific font, you have to use the <FONT> tag and its attributes.
The FONT tag is the one which defines various attributes for the text on the page. These normally differ from the attributes set by the TEXT attribute defined for the BODY tag. The FONT tag has the following attributes that you can use (this list is not exhaustive - there are others) :
You will note that the word 'requested' is in italics in the above description. This is because you, the HTML author, request that a specific font size and/or face is used. If it is not installed on the reader's machine, a suitable default will be used instead.
Enough waffle, onwards to the lesson ....
If you type the following into the BODY area of an HTML document, what would you see in the browser ?
<BODY>
Hello
World
</BODY>
I suspect you would expect to see 'Hello' on the top line and 'World' below it. This is not what happens, you will see 'Hello World' all on the same line separated by a single space. What about the following where the two words are separated by a number of spaces ?
<BODY>
Hello World
</BODY>
In this case, you would see that 'Hello' and 'World' are separated by a single space - what is going on ?
The rules for HTML are quite simple - unless otherwise defined, all text appears on one line, carriage returns in the source document are replaced by a space (and only one - regardless of how many returns there are), multiple spaces are reduced to a single space, there are no tabs allowed - these too are converted to a single space.
These rules are helpful, but confusing - the text in the HTML document is rendered on screen to fit the current width of the browser's main window. If you reduce the width of the browser's window, the text will be re-wrapped to fit. Why not try it with this document - make the window smaller and the text gets wrapped into the new size of the window. Make it bigger and the same happens.
Fonts can be bold or underlined or italic or Strike Through or Superscript or subscript or a combination of all. The tags used to turn on and off these styles are as follows :
| Style | Old tag | New tag | Effect |
|---|---|---|---|
| Bold | <B> </B> | <STRONG> </STRONG> | This text is bold |
| Italic | <I> </I> | <EM> </EM> | This text is italic |
| Underline | <U> </U> | This text is underlined | |
| Strike Through | <S> </S> | <STRIKE> </STRIKE> | This text is |
| Subscript | <SUB> </SUB> | This text is subscripted | |
| Superscript | <SUP> </SUP> | This text is superscripted |
I have tended to use the word 'style' for the above, however, this is not the same as a Style sheet (or a Cascading Style Sheet) - there will be more on these later.
As you can see, there is a lot we can do with the FONT tag to affect our document. We are not finished yet. As with everything in life there has to be some small print. HTML allows us to specify the small print, simply by using the <SMALL> tag. Here is an example of some small print.
You are allowed to use this tutorial in anyway, shape or form that you please. Please do not try to claim ownership of this tutorial, because if you do, and I find out, I shall set the dogs loose and they will find you and tear you limb from limb etc.
Alternatively, I shall set my lawyers onto you - you'll much prefer the dogs !
As an alternative to the small print, how about some big print, guess what tag we use for big text ? You got it, its the <BIG> tag
<BIG>Big text looks like this - nice isn't it ?</BIG>
Which gives the following :
Big text looks like this - nice isn't it ?
Some browsers make big text bold as well, just to be sure !
Font faces are simply names given to the font to be used on the page. They have names like 'Arial' or 'times new roman' or whatever. You specify them as attributed of the FONT tag as follows :
<FONT FACE="Comic Sans MS","Arial">How does this look then ?</FONT>
Which gives the following :
How does this look then ?
This tells the browser to use the font 'Comic Sans MS' if it can find it. If it can't find it, try to use the font called 'Arial' instead. Assuming that both of these are missing, use the default font. Once again, as with most things, the desire to use a specific font face is simply a request and as many systems won't have the specific font installed you are advised not to rely on font faces for any 'fancy stuff'.
Fonts come in two main flavours, Serif and Sans-Serif. This simply says whether the font has little curly bits - serifs - at the end of each extremity, or not. Serif fonts have these dangly bits to make it easier for your eye to traverse across the page - have a look at a newspaper or magazine article (not an advert !) to see what I mean. Of course, modern times dictate that change must be made and that serif fonts are no longer the best thing, and many modern designers tend to use a sans-serif font because it looks 'cleaner' without all those dangly bits. Here are a couple of example paragraphs - see which you prefer.
There was nothing around, only the dark. Then someone put a coin in the meter and there was light. What was seen by the light was not very nice, so the light was turned off again. Under cover of the darkness, changes were made and when complete, the light was turned on again. It looked better this time, but still not right. "Who cares" came a voice, "it's good enough for me !". And so it came to pass, and that is why things are as they are - not quite right, but good enough.
There was nothing around, only the dark. Then someone put a coin in the meter and there was light. What was seen by the light was not very nice, so the light was turned off again. Under cover of the darkness, changes were made and when complete, the light was turned on again. It looked better this time, but still not right. "Who cares" came a voice, "it's good enough for me !". And so it came to pass, and that is why things are as they are - not quite right, but good enough.
The first example is in a serif font, specified as :
<FONT SIZE="4" FACE="SERIF">and the second is sans-serif, specified by :
<FONT SIZE="4" FACE="SANS-SERIF">I think the first example is easier to read while the second is too glaring and seems to have lots of space around the letters. Hopefully your browser gives a similar effect.
There is an attribute for changing the font size. This is the SIZE attribute surprisingly enough. It works by changing the font size bigger or smaller relative to the basefont size. You specify the basefont size (if you wish) within the BODY area, as follows :
<BASEFONT SIZE="3">
Now, 3 is the default size for a page if BASEFONT is not specified. As mentioned above, font sizes are defined relative to the basefont using the SIZE attribute, here is an example for you to try out :
<FONT SIZE="-6">This is -6</FONT>
<FONT SIZE="-5">This is -5</FONT>
<FONT SIZE="-4">This is -4</FONT>
<FONT SIZE="-3">This is -3</FONT>
<FONT SIZE="-2">This is -2</FONT>
<FONT SIZE="-1">This is -1</FONT>
<FONT SIZE="+1">This is +1</FONT>
<FONT SIZE="+2">This is +2</FONT>
<FONT SIZE="+3">This is +3</FONT>
<FONT SIZE="+4">This is +4</FONT>
<FONT SIZE="+5">This is +5</FONT>
<FONT SIZE="+6">This is +6</FONT>
Which gives the following :
This is -6 This is -5 This is -4 This is -3 This is -2 This is -1 This is +1 This is +2 This is +3 This is +4 This is +5 This is +6
Try it out and see how your browser responds. Some browsers may not show the full range of fonts - mine doesn't.
Alternatively, when specifying font sizes, you can be quite specific and use a non-relative size. As follows :
<FONT SIZE=48>Example 48 point font</FONT>
This should give a 48 point sized line of text like the following :
Example 48 point font
A font defined as 72 point is around one inch tall on the printed page. However, due to something called 'leading', the font has a space above and below to leave room between adjacent lines. Leading is the name given to the spaces between letters & rows of letters. It comes from the old days where type to be printed was created out of a lead alloy, and this was placed in blocks within a frame. This was then placed in the machine and inked ready for printing.
Brief tangent : The first 'computer' I ever saw was in 1968 when I was taken on a school trip to the local newspaper printshop to see how the paper was put together. The text was typed on a typewriter keyboard and 'printed' onto a paper tape. This was fed into a machine which produced little lead tablets with the letters along the top. These were taken and 'set' by the print setters and the newspaper was produced. Paper tape was the big thing in 1968, I was 8 years old !!
So how then have I managed to get all my paragraphs separated by a blank line, if multiple carriage returns are converted into a single one ? Easy, I use the paragraph tag which looks like this <P> and the corresponding closing tag which looks like this </P>
If you still have exercise_one.html open in the editor and browser, switch to the editor and change the text between the BODY tags to the following :
<P>Hello</P>
<P>World</P>
Or this, if you like - the result will be the same :
<P>Hello</P><P>World</P>
What you will see is 'Hello' on one line, a blank line and then 'World' below it. Not quite what we are looking for, but it shows how the paragraph tag works - it inserts a blank line between paragraphs.
If we want to see 'Hello' on line one and 'World' on the line below it without a blank, we need to use the line break tag or <BR>. This tag has no closing tag. Our code should look like the following now :
<P>Hello<BR>World</P>
This gives the desired effect. The <BR> tag inserts a single line feed. Of course, you can use as many as you want to get a number of blank lines. Like this :
<P>Hello<BR><BR><BR><BR>World</P>which shows up as this in the browser :
Hello
World
So, now we know that our text has to be enclosed in paragraph tags, and line breaks must be hard coded using the line break tag, what else can we do to a paragraph of text ?
Well, for a start, this paragraph is justified to the right side of the browser window. Notice how the right side of the paragraph is all neatly lined up ? (If it doesn't show up well in your browser, make the window wider to get the effect better. Alternatively, you should be able to see the last (short) line all over on the right
Still can't see it ? The next line will be right aligned in your browser window
Is this on the right ?
This paragraph will be aligned in the middle of the browser window
The default alignment is left - like this
And finally, we have the justify attribute which lets us have nice neat left and right ends to our lines. This paragraph has been justified - can you see the effect ? Try making the browser window narrower if not - I don't know how much more text I can fit in !
So here is a table showing the various attributes for the paragraph tag :
| TAG & Attribute | Effect |
|---|---|
| <P ALIGN="LEFT"> | Text is left justified. |
| <P ALIGN=CENTER> | Text is centre justified (note spelling !) |
| <P ALIGN="RIGHT"> | Text is right justified. |
| <P ALIGN="JUSTIFY"> | Text is left and right justified. |
As you progress through this tutorial, you will eventually notice that I have split the text up using bold headings. HTML allows 6 levels of heading, these being 1 through 6 (strangely enough) and all we have to do is specify which one we want to use, by specifying the appropriate heading tag. Heading tags are <H1> through <H6>
To see examples of each heading level, create a new file (exercise_two.html) and type the following into it (Between the BODY tags) :
<H1>Heading One</H1>
<H2>Heading Two</H2>
<H3>Heading Three</H3>
<H4>Heading Four</H4>
<H5>Heading Five</H5>
<H6>Heading Six</H6>
When you view the file in a browser, you should (will !) see all 6 different heading styles as follows :
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
The smaller the number, H1 for example, the bigger the font used. My headings in this tutorial are all <H2> or <H3> which I think look the best.
Spookily enough, heading tags have the same align attributes as the paragraph tags we looked at earlier. These cause the headings to be aligned right, left, center (spelling !) or justify - why not try some out, here is an example :
<H1 ALIGN="CENTER">Heading One</H1>
Which will give you the following :
Heading One
When you insert a heading tag, the browser adds a paragraph tag automatically for you, this means that the text following the close header tag, will always be a new paragraph. You don't therefore have to put a paragraph tag at the start of the text, but you will need on at the end. I always put tags in, this allows me to remove headings afterwards (at the proof reading stage) and not have to worry about remembering to put a <P> into the text when I remove the headers.
<P> and <Hn> tags don't allow you to specify a colour (color) so you have to add a <FONT> tag to get the desired effect. For example, you want a heading in red, heading weight (?) 3 and the paragraph following it to be in green text (why ?). You're HTML source file will look like this (as always, between the BODY tags - in fact, I won't be telling you this anymore. All further examples will be required between the <BODY> and </BODY> tags.)
<H2><FONT COLOR="red">My Red heading</FONT></H2>
<FONT COLOR="green"><P>Followed by my green paragraph. Quite why I want my page to look like this escapes me, but needs must I suppose !</P></FONT>
It should turn out something (horribly) like this :
My Red heading
Followed by my green paragraph. Quite why I want my page to look like this escapes me, but needs must I suppose !
What we have done above, is nest a FONT tag and a heading or paragraph tag. Note that after the attributes and actual text content has been removed, the red heading tags look like this :
<FONT><H2></H2></FONT>
When you nest a pair (or more) of tags, you must un-nest them in the reverse order. In Quill, when you turn on text attributes, (bold, underline for example) you turn them off in any order. In HTML if you turn on bold then underline, you must turn them as underline first them bold - it is like nesting a pair of REPeat loops in SuperBasic.
1000 REPeat Outer_loop 1010 REMark - Do stuff here 2000 REPeat Inner_loop 2010 REMark - Do stuff here 3000 END REPeat Inner_loop 3010 REMark - Do stuff here 4000 END REPeat Outer_loop
You must end the inner loop before ending the outer loop in the above example. This is how it must be with HTML tags when they are nested.
In most of the examples above, for the FONT tag anyway, I give the impression that only a single attribute can be used. This is not the case. If you want to specify a font which is red, sized at 23 point and in the Garamond font face, go ahead and do it. Just like this :
<FONT COLOR="red" FACE="Garamond" SIZE="23">Some fancy attributes</FONT>
The result looks like this, in case you were wondering !
Some fancy attributes
Just for your information, the STRIKE and U tags (and the S tag) have been deprecated in HTML 4 and have been replaced by the DEL and INS tag respectively. Unfortunately, only Internet Explorer displays DEL as STRIKE and INS as Underlined.
The Lynx (text only) browser shows EM and STRONG text as underlined text - confusing or what ?
The W3C (WWW Consortium) want to return to the old days when an HTML document was concerned with content and not with fancy looks. To this end they have deprecated a number of HTML tags and are encouraging the use of style sheets instead. Unfortunately, not all browsers are very good at using them yet
There are advantages to style sheets - all the font, colours, text sizes etc can be centralised on one place, either at the top of the page or in a separate document all together. This means that the main body of the text is less cluttered and changes can be quickly applied, once, at the top.
I shall be dealing with internal, local and external style sheets in a later lesson. (When I figure them out myself !)
Malcolm Cadman suggested the paragraphs on serif & sans-serif fonts. A good suggestion, so I have included it above. Malcolm also suggested explaining about leading in type faces, so I did that as well !
| Previous Lesson | Home Page | Next Lesson |