| Free HTML Tutorials • CSS • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Intermediate HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads |
|
Beginners Section |
|
TAGS 2 - FONTS, HEADERS & LINES |
|
|
|
FONTS
In simple terms, a font is a type face, and selecting the correct font or fonts for your web page can make a huge difference to its interest and readability. For example, the body of these pages was written mainly in Arial, a sans-serif font, which is quite easy to read. This paragraph is written in Times New Roman, a serif font. The serif is the little tags you see on the ends of the letters. Each browser has its own default font face and font size, but you can change the options and select your own fonts and colours in your browser's set up and preference options. In addition each viewer may or may not have the fonts installed that you specify. What this means is, you should always choose the font (and its colour, size and style) from the list of "safe" fonts. Here is a list of some of the "browser safe" fonts you can use:
Codes for fonts look like this:
<FONT FACE="Comic Sans MS,Arial,sans-serif" SIZE=4 > <FONT FACE="Times,Courier New, serif" SIZE=3> <FONT FACE="Tahoma,Helvetica,sans-serif" SIZE=-1> You should always include alternatives, including the generic "san-serif" or "serif" in case the person viewing your page does not have that particular font installed. The default size is usually 3 so you do not have to specify it unless you are changing sizes. You can use actual numbers, 1, 2, 3, 4 etc., or plus (+) and minus (-) to indicate the size you want. So for one size larger than the default you would use either +1 or 4. You can vary the look of basic fonts by using different sizes and colours, bold and italic, like this: Comic Sans MS, Size 4 Times, Size 5, Bold Tahoma, Size 3, Italic Don't forget to close each tag or the rest of the page will continue in the same font. CHANGING TEXT COLOURS If you want to use a black or other dark background, choose a light text colour, like white or yellow, as the black text (the default) won't show up. If you have a white or pale coloured background and you want black text, no FONT COLOR tags are needed as black is the default. Add these tags to change text colour: <FONT FACE="Arial,Verdana,sans-serif" COLOR =#FF0000 SIZE=2> All text between the beginning and ending tags will appear RED. </FONT> <FONT FACE="Arial,Verdana,sans-serif" COLOR=#006200 SIZE=2> All text between these tags will appear GREEN. </FONT> For other colours, refer to the Colour Chart (see COLOUR TAGS below) and type in the 6-digit colour code, not forgetting to precede it with the # symbol. Don't forget to close with </FONT> or the rest of the page will also be that colour. FONTS AS GRAPHICS If you want something unusual, you can create a graphic and use the font you want in that. Here are two examples of unusual fonts, Igloo and Rotondo, which are actually graphic files:  
Simple words-only graphics like this take less than 5 minutes to create in the humblest graphics programme. Free fonts are available from numerous web sites. Some extra fonts are included in the Download files. HEADERS Want to make a BIG first impression? Try HEADER TAGS like these. Header tags are used for titles, headers and special effects. They are automatically BOLD. They start with <Hx> and end with </Hx > (where x is a number), as follows: <H1>This is the largest header tag.</H1><H2>This is a smaller header tag.</H2><H3>This is an even smaller header tag.</H3>These headers will appear in the default font face, but you can change it and the colour of your header tags, as above, using this code: <FONT FACE="Times" COLOR=#FF0000> inside the <Hx> and </Hx > tags. See the next section for colour tags. COLOUR TAGS A web page can look pretty boring in plain old black and white so this is where we get to add a bit of excitement. The default background colour of a web page is white. To choose another colour for your background, look at following tag. The numbers and/or letters between "# and " will give you a BLACK background. <BODY BGCOLOR="#000000"> There are 16 colours you can refer to by name as per the chart below. The one missing is WHITE which is "#FFFFFF" or "white". When specifying any of these colours you can just use the name of the colour instead of the code, for example, "red" or "blue".
If you would like to experiment with more colours, click here for a Colour Chart. Make sure you click the right tag to come back here as we will be referring to this chart in another section later. Also check in "Downloads" for information about one of the free programmes, "ColorCop". It will give you the HTML and hex codes for any of the multitude of colours you can select, including “web-safe” colours. Make sure there are 6 characters between " # and ". The letters can be in upper or lower case; for 0 use numeric zero. (NOTE - a lot of people leave out the quotes - most browsers don't really need them. Having said that, all the web creation programmes I have seen use them.) To see what a difference a coloured background makes, have a look at an example. This page has a BLACK background and WHITE text. Click the link to return. HORIZONTAL LINES OR RULES Use these to divide one section from another or to add emphasis.
Below are two examples of a horizontal line using a combination of various elements. The first one has these elements: NOSHADE, SIZE 5 pixels (thickness), centre aligned, covering 70% of the screen. In the second, where COLOR=#FF0000 (red), Netscape users (there are still some around) will only see a clear thin box. There is a way you can show a coloured line in Netscape - if you use an image for your background and also specify a background colour, the line will come out the colour of the background. This is specified in the BODY tag (next lesson). You will see an example of this in the practice page at the end of the Beginners' section. In the Intermediate Section I will show you a couple of neat ways to put a coloured line in any browser. COMMENT TAGS You may have sections of your page in which you need a reminder or a COMMENT. The beauty of comments is that they do not appear in an opened web page. Comments start with <!-- and end with -->. (That is exclamation mark followed by two hyphens.) You can actually put more than two but there must be at least two.) You can put anything you like inside the < !-- and --> . They are useful as reminders when you are dividing your page into sections, using multiple tables, repeating a bit of code like a header or email address or trying out new code. This is how comments will look in code: <!-- Start the footer here --> <!-- *** Edited text starts ***--> <!-- ***** Lots of stuff here ***** --> Remember these comments are NOT seen in the browser. THE PRE TAG Web browsers will ignore extra spaces, tabs and carriage returns. However, if you use the <PRE> tag you can show your text exactly as you want it. ( The "PRE" means "preformatted".) If you want to save doing lots of BR or P tags, say, for a poem, song or long quoted passage, the <PRE> tag is the one to use. Just use the space bar (no tabs) or a non-breaking space code, which is to put the text where you want. You can also add FONT tags after the <PRE> opening tag. Put them on the same line. Here it is an arrowhead shape:
<PRE> <FONT FACE="Verdana,Sans-Serif" COLOR=#FF0000 SIZE=2>
Anyhow
if I
wanted
to do
this for
some
reason
this is
how I
would
do it
</FONT> </PRE>
Mostly you wouldn't use it like this - it is probably most useful for quoted passages of something. For example, you may have a document you have created in a word processor that you would like to put on a web page. All you need to do is copy it, paste it to a page between <PRE> and </PRE> tags. No need to add lots of P or BR tags which would take a lot of work for a long piece of text. Just remember that your text will be EXACTLY as you see it.
Beginners Index
Help
| |||||||||||||||||||||||||||||||||||||||