FONT attributes in HTML

[arthurk]

Please could anyone advise on the correct way to change font faces and sizes in HTML when creating fairly simple web pages and without using CSS (which I understand not all browsers support)?

What I have read suggests that if you are using a non-default font face and size for several adjacent paragraphs of text it is necessary to close the FONT tag at the end of each paragraph and redefine the font attributes at the start of the next. Is this correct, and is it strictly necessary?

(In fact my browser (IE6) doesn't seem to mind if you use a P tag without first closing the FONT tag, but I know that doesn't make it correct HTML, and I'd rather do things properly.)

Also, if you want to use a different font from the default Times New Roman throughout a web document, is it good practice to define this as a BASEFONT attribute, rather than as a FONT attribute for each element on the page? Some reference guides seem to suggest that defining the face in BASEFONT is poorly supported and better avoided - but it's obviously a lot quicker and easier than repeatedly redefining the FONT attributes.

If I do use BASEFONT to define the font face, will it work in tables? I gather that some browsers ignore any defined BASEFONT size in tables, but does this apply to the other attributes as well?

Thanks for any help,
Arthur

[Rod Neep]

Please could anyone advise on the correct way to change font faces and sizes in HTML when creating fairly simple web pages and without using CSS (which I understand not all browsers support)?
It is some features of CSS that some browsers don't support, but font definitions are fine!


What I have read suggests that if you are using a non-default font face and size for several adjacent paragraphs of text it is necessary to close the FONT tag at the end of each paragraph and redefine the font attributes at the start of the next. Is this correct, and is it strictly necessary?
It is good practice, if you are changing the font, to close the last one first, and then start the new one. It is not a good idea to use non-standrd fonts (Times New Roman and Arial, Helvetica, Geneva, sans-serif are ok). If the end user doesn't have the font that you specify on their computer, then they can't display it!

Rod

[Rod Neep]

A typical CSS file to define fonts:

BODY {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#000000"; font-size : 9pt;}
P {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#000000"; font-size : 9pt;}
TD {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#000000"; font-size : 9pt;}
DIV {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#000000"; font-size : 9pt;}
A-link {color : blue} A:visited {color : purple}
A:active {color : green}
H1 {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#800000"; font-weight : bold; font-size : 16pt;}
H2 {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#800000"; font-weight : bold; font-size : 14pt;}
H3 {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#800000"; font-weight : bold; font-size : 12pt;}
H4 {font-family : Arial, Helvetica, Geneva, sans-serif; color : "#800000"; font-weight : bold; font-size : 10pt;}

Name this file myfonts.css, and put it in a folder called /common

and then in the header section of the web page, make a call to it, e.g.

<LINK REL=stylesheet TYPE="text/css" HREF="common/myfonts.css">

[Rod Neep]

Also, if you want to use a different font from the default Times New Roman throughout a web document, is it good practice to define this as a BASEFONT attribute, rather than as a FONT attribute for each element on the page? Some reference guides seem to suggest that defining the face in BASEFONT is poorly supported and better avoided - but it's obviously a lot quicker and easier than repeatedly redefining the FONT attributes.

If I do use BASEFONT to define the font face, will it work in tables? I gather that some browsers ignore any defined BASEFONT size in tables, but does this apply to the other attributes as well?

Thanks for any help,
Arthur
I never use BASEFONT
Yes. some browsers will ignore it in tables.
The CSS file illustrated above will work in all browsers though (including Apple Mac) and in tables.

And finally, it is not a good idea to use lots of different font faces on a web page. It becomes too fussy and cluttered. Stick to one font, and by all means change its size, make it bold, italic, or change its colour for emphasis.

Rod

[Peter Goodey]

But isn't it true that specifying font sizes in that way (eg 10 pt) means that the user is unable to resize the text? This can cause problems for some users.

Also it's my understanding that with style sheets, tables - which can be used simply for laying out text in HTML - simply aren't needed to the same extent (except of course when you really need to show a genuine table!)

[Mary Young]

Hi, Arthur
The vast majority of browsers support CSS nowadays. If you are writing "simple HTML pages" now is the time to bite the bullet and tackle a simple CSS stylesheet, such as Rod's example above. It will save much time and trouble in the end. As a bonus, the filesize of your pages will be smaller and faster to load. You can change the appearance of your entire site in a couple of minutes - even change the fonts if you really want to. (Though it's good advice to stick to basic fonts that everyone has on their computer.)
I'm in process of changing my old site to CSS and starting to appreciate the benefits. Steep learning curve for an oldie like me - but fun :)
Excellent advice, tutorials and sample files at http://www.yourhtmlsource.com/fullindex/

[Peter Goodey]

Arthur

I spotted a simple demo to illustrate what I was saying about font sizes.

1. Call up http://www.w3schools.com/css/tryit.asp?filename=trycss_font-size

2. The CSS code is on the left, the result on the right.

3. Before you do anything else, note the way the font sizes are described in the CSS code and change the text size with your browser (View...Text Size in IE). Try Largest, Smallest etc.

4. Now edit the CSS code on the webpage entering font sizes as absolutes. For example:

h1 {font-size: 14pt}
h2 {font-size: 12pt}
p {font-size: 10pt}

and press the "click me" button

5. Now, as before, try altering the text size in the browser. Not so useful doing it that way, I think you'll agree.

[arthurk]

Many thanks for all the replies - you've given me (and my wife) plenty of food for thought! The plan of action now is to get hold of a good guide to CSS, and take it from there, though in creating pages we are anxious not to exclude those genealogists who cannot afford up-to-date systems with the latest browsers.

Also, just to reassure you all - neither of us is into using lots of different or fancy fonts, it's just a case of using Arial in preference to Times New Roman.

Peter - I take the point about fixed text sizes in CSS, and I agree with you on this. However, please could you explain a bit more about CSS making it less necessary to use tables for positioning text, as I tend to do this quite a lot.

Thanks,
Arthur

[Peter Goodey]

Because you can position different chunks of text more precisely using CSS than you can with plain HTML.

But I'm not an expert - just a dabbler.

For example (I don't make any claims for this, it's probably shot through with errors but it seems to demonstrate the principle if only by accident). This the style embedded which isn't good practice but needs must. You should be able to cut and paste this and call it up with a browser.

By the way, if you're looking for a book, try the library first. I did :)


<html>
<!-- Created on: 04/09/2005 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<STYLE TYPE="text/css" MEDIA=screen>
<!--
.text1 { position: absolute; top: 1px; left: 1px; right: 48%}
.text2 { position: absolute; top: 1px; left: 52%}

-->
</STYLE>
</head>
<body>
<p class=text1> Put any text here. Put any text here. Put any text here. Put any text here. Put any text here. Put any text here. Put any text here. Put any text here. Put any text here. Put any text here. Put any text here.
</p>
<p class=text2>
Put some different text here. Put some different text here. Put some different text here. Put some different text here. Put some different text here. Put some different text here.
</p>
</body>
</html>

[arthurk]

Thanks for your help, Peter. I've got some books from the library - now I need to try and work out what they're saying...

Arthur

[gibo]

Hi I read your request with interest. There are a few basic rules about HTML and I have only learnt from trial and error. Some browsers are more forgiving over others and Internet Explorer is far from perfect. When you design a page you should test it by opening it up in a few different browsers and you will be surprised that the effect you were seeking is not always the same in each browser. Some html editors allow for easy testing by giving you this option but if you are doing html the hard way - you can still open it different ways to see the results.
I use Front Page these days but have used Cutehtml and Arachnophilia
http://www.arachnoid.com/arachnophilia
(freebies although I am not sure about Cutehtml now). Do a search in google and I am sure you could find a good free editor.
I find tables needing font defined per cell but that is where CSS handles it better (saving typing), if you dont want to use an editor.

I will include a few links that may help with html learners.
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

http://www.idocs.com/tags/

Good luck!
Regards,
Jeff