2.3 Text Formatting
So you've set up your basic page structure as shown in the previous lesson. How do you code the content?
Easy! You just type whatever you want to put in your text editor, then code it up! Let's have a look at some different things below. It would be good to have your text editor open, then you can play with all these examples, save the file, and see what they look like in your browser and learn as you go along!
There are various ways to code for font - or text - size. Let's first look at headings. In HTML there are six of these, the tags being as follows:
So now you've seen how simple it is to code different sizes of heading. You simply type
the text you want, then at the beginning of the text insert one of the heading tags such as
Coding Note: Headings are supposed to be used sequentially down a page, starting from
level 1 down to whatever - it is bad practice otherwise! So, for your first heading start with a
There's another way (at this point in your learning) to specify font size and it means use of an element you have not yet seen here - the FONT element. This can have a number of different attributes, size colour - all sorts! So is a very useful element to know. Take the below example:
The number after the attribute
You saw in the lesson on the previous page how you can set up the default text and background
colours in the
In the above, because
We introduced the
See, there is actually an attribute for colour in there? This is how you can override the
default text colour set in the
Typefaces & Fonts
So how do you get your browser to display different font faces? This is again just down
to an attribute of the
<FONT SIZE="4" COLOR="#ff0000" FACE="Arial">This text is in a style called Arial.</FONT>This text is in a style called Arial.
<FONT SIZE="4" COLOR="#ff0000" FACE="Verdana">This text is in a style called Verdana.</FONT>This text is in a style called Verdana.
<FONT SIZE="4" COLOR="#ff0000" FACE="Times New Roman">This text is in Times New Roman.</FONT>This text is in Times New Roman.
In typography, the different categories of look of characters (like those above) are called "typefaces" - which means the style of the letters, in effect. A whole bunch of characters (i.e. A-Z, 0-9) that are of a particular typeface are called fonts. The first typeface in the list above is Arial, and it appears above as size 4, red. You can perhaps now see why the attribute "FACE" is used for the style of text and the attribute "FONT" is used as the element itself, because fonts are to do with modifying the size and colour of a particular typeface. In fact, most people use the terms "font" and "typeface" (the latter usually abbreviated to "face") interchangeably in reality.
Anyway, the first two typefaces shown above are members of the typeface family called "sans-serif" and the third is a member of the "serif" typeface family. The word "serif" refers to the little tiny bits on the ends and corners of a typeface. Have a look at the "T" in the word "The" in the "Times New Roman" example above compared to the same character on the other typefaces - see how the Times New Roman one has little things - "serifs" - on the T but the T is just a straight unadorned "bar" on the others? Typefaces such as Times New Roman are known because of that as "serif", whereas the Arial and Verdana typefaces are "sans-serif" - sans-serif meaning "without serifs".
Sans-serif typefaces tend to be easier to read than serif faces like the third one above. For this reason, I tend to use sans-serif typefaces (like the first two above) for my pages (as in this tutorial) but I use Times New Roman (a serif typeface) for anything with a legal connotation such as the copyright notice at the bottom of this page. In fact, serif typefaces have traditionally always tended to be used for legal stuff (probably because they are not so easy on the eye and put people off reading the "small print"!!).
You do have to be a bit careful when choosing which typefaces to use in your web pages. When you look in, say, Microsoft Word, you will have seen that you can write letters using all sorts of different typefaces. However, browsers do not offer quite as much possibility and can only display certain ones - and, even more confusingly, some browsers display some typefaces and others don't!
I will put a page in the Appendix on typefaces when I get a bit of time - look at the menu on the left - if there's one for typefaces I've done it, if not then I haven't got around to it yet - sorry!
Paragraphs & Text Alignment
So, we've just looked at typefaces and their characteristics: font size and colour, but what about alignment and spacing?
The most fundamental thing in separating text is to know about
What does this code actually look like when used to code a web page? Check this out:
Here's a bit of text that we want to make into a whole paragraph. So I will just keep typing for a bit so that you can see the effect this has when I end the paragraph - which I will do now...
...and here's the next paragraph.
In the above, you can see that although there is a break between the paragraphs, the alignment of the text itself looks weird. This is because we didn't tell
the browser how to align it and in this case it just defaults to aligning the text centrally on the page. In fact, the
<P ALIGN="left"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">Left Aligned Text looks like this</FONT></p>
Left aligned text looks like this!
<P ALIGN="right"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">Right Aligned Text looks like this</FONT></p>
Right aligned text looks like this!
<P ALIGN="center"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">Centre Aligned Text looks like this</FONT></p>
Centre aligned text looks like this!
<P ALIGN="justify"><FONT SIZE="3"COLOR="#d83281" FACE="Verdana">Justify Aligned Text looks like this</FONT></p>
Justified text looks like this but I need to write a lot of text to show it because it is to do with how the text wraps at the end of each line - see, all the right hand edge of this bit of text is level with the next line? That is what "justified" means and it can be very useful because it makes everything look neat and tidy! However, some people hate it because it can make everything look too contrived so you need to consider carefully before you use it!
The reason the pink text above fits the whole way across the page and kind of looks weird is because we haven't specified indent and margins yet, which could have the effect
of making the text start with a bit of a margin on the left and the right - the way this paragraph that I am now typing looks! There is a way to do this and it is by use of the
...which looks like the below:
Breaking Up Lines Of Text
Okay, we've looked at paragraphs. But what about if you want to have a line of text appear on a separate line rather than have it with an entire
empty line between the two lines of text as you would have if you were to use the
Simple - you just use
<P ALIGN="left"><FONT SIZE="3" COLOR="#ff0000" FACE="Verdana">here's a bit of text that we want on one line<br> but we want this bit to be on a separate line<br><br> and this bit two lines below it.</FONT></p>
The above actually looks like the below if you were to code it into a web page:Here's a bit of text that we want on one line
but we want this bit to be on a separate line
and this bit two lines below it.
So you can see that we put two <br> tags at the end of the second line to get the third line with a blank line about it. Obviously you can use as many <br> in your code that you need! In the code example above, note how I have just written it on lines with no physical breaks. However, when I am coding, I would in fact write it as follows:
Notice how, in the example given above, the code appears spaced out with the
The DIV Element
As described above, sometimes you don't want to use the
You just need to remember to use the <BR> tag - like I have in the examples above - to make sure that each bit is on a separate line otherwise you may get unpredictable results in different browsers!
What about actually spacing out words in a sentence, heading or whatever? Well, the first thing to know is that when you are typing a bunch of stuff into your text editor for web coding, if you leave a space between words of text as opposed to code (as in this text) your browser will recognise those spaces so your text is spaced out as you'd expect. However, if you want an extra space - i.e. two spaces - between words, the browser doesn't recognise if you put an extra space between the words.
In traditional english it was the thing to do to leave two spaces after a full-stop and before the capital letter of the next sentence. However, the web browser only recognises one space even if you do press the spacebar twice! To get around this you just use the following:
Consider the following bit of code:
<P> Bit of text</P>
If you were to code the above and then look at it in a web page, it would appear that the "bit of text" text had
five spaces before it - one space which the browser does recognise, but four
<P> Bit of text</P>
You can probably see from the above that each
These are rather important - you use exclusion tags when you want something to appear on your source pages but not be seen in the browser window. This is usually called "commenting out" text. I use exlusion tags to break-up the sections of my code into chunks so I can find it easier to find something in a page of code that I may need to edit later! All you do is enclose the text in a tag with an exclamation mark and a certain amount of dashes, as below:
Do remember though, that just coz it don't appear in a browser window it don't mean others can't see it! If you are able to view source, then so is everyone else! You would be surprised at some of the funny stories I have heard where people have received email from others, commenting on the nature of things they had written in their view source pages, simply because they had forgotten that other people can view this! You would also be surprised the other silly stuff people put in their exclusions such as information that could be useful to a hacker. So do be careful what you put in there!
Other text tags
There are all sorts of other text tags that add character to your text as well. These are used in pairs either side of the text you want to apply them to. Here are the main ones:
You can see by now that in your code you use symbols like /, =, ", < and >. Well, because these symbols are used in HTML, you can't use them in your text otherwise your browser will think they are codes. In fact, browsers often do allow some of these in your texts - but other browsers do not! So how do you get those characters to display if you can't actually type them in your text? You use what are called HTML escape characters, also known as escape sequences.
How do you type an escape sequence? Well, they always start with an & and end with a
; - you can see that the latter two symbols are also characters that if you want them in your text, you have
also to use the escape sequence! For example, to put an & in your text, say in the example "apples &
pears", you simply type the text with an escape sequence, thus typing
See the appendix (menu on the left) for a full list of HTML escape sequences.
NEXT: So what about things like lists and other types of formatting?