Site Development
Downloads
Help!!
Home
Making Multi-Colored TextYou can use the <font> and </font> tags to produce all sorts of effects in your text. You just make the tags and put the text you want effected between them. Lets make a section of text blue:
<body> Below is the effect. Remember that the hex code "#0000ff" is the code for pure blue: This is regular text and this text is blue Notice that only the text between the <font> and </font> tags is effected. The other text is the default green of this page. The <font> tag will override the TEXT attribute in the <body> tag. As a general rule, tags nearest the content will override parent tags like the <font> tag overriding the TEXT attribute in the <body> tag. Also note that the <font> tag does not cause a line break. Tags like <font> that do not cause line breaks are called "inline tags". Tags like <p> and <div> are called "block level" or "block" tags and do cause line breaks. Changing Font SizeWe can change the size of our letters by using the SIZE attribute in the <font> tag:
<body> Here's the rendered code: This is regular text and this text is big and blue I used a "10pt" or "ten point" font size. "Points" are a value system from traditional printing. You can use other value systems like pixels ("px"). You can also base the size of the text between the <font> tags on the size of the default text. To do this we use positive and negative numbers: <font size="+3"> The first example makes the font bigger by a factor of 3. The secnd example makes the font smaller than the default font by a factor of 2. You have seven choices ranging from -3 to +3. Using points and pixels will give you much more flexibility and allows you to absolutely size the font. If you use the positive and negative numbers, the font is sized according to the default size of the viewer's browser. Using points and pixels presents fonts at the exact size you selected in all browsers. This gives you much more control over your page's look and layout. Changing The Font's "Face"A font's "face", or "font family" refers to the style and shape of the individual letters. We can choose a font face by using the FACE attribute in the <font> tag: <font size="20pt" face="Tahoma"> This would present the Tahoma font face at 20 points in size. What happens if the "Tahoma" font is not installed on the viewer's machine? The browser will present its default font instead. You can control this to some degree by selecting more than one font and presenting this as a prioritized list: <font face="Tahoma,Arial,sans-serif"> Now if "Tahoma" isn't installed, the browser will try "Arial", another sans-serif type font. If both fail, the viewer's system default "sans-serif" font will be used. Notice that the list goes from most preferred to a generic last-ditch option. Also note that the fonts are separated by commas ( , ). Most of the time when a font face is specified, at least a generic option like "sans-serif" is included in case the specified font is not installed on the viewers machine. This will generally keep your page looking much like you want it to. There are different types of generic fonts: sans-serif -- These fonts don't have the little wings on the end of the lines making up letters. serif -- These letters will have the little wings at the end of the lines that compose the letters. monospace -- This looks sort of like an old tyewriter. Often used when displaying computer code. fantasy -- This font can vary wildly from one machine to another. Be careful in its use. So be sure to backup your desired font with at least a generic option to maintain the overall style of your pages. Some Matters Of TasteAs a rule, it's generally best to stick with common fonts like "Times New Roman", "Arial", and "Tahoma". Sans-serif fonts are somewhat preferred for headers and emphasized text. Serif fonts are more preferred for general reading text and are easier to read at smaller sizes. These are only guidelines and not hard-and-fast rules. You'll generally try out several fonts before choosing just the right one. DeprecationThe <font> tag has been deprecated. This means that it's marked for doom and no longer an "official" part of HTML. It's a holdover from an earlier time. Today, fonts are styled with Cascading Stylesheets (CSS). Don't be afraid to use the <font> tag, however, I don't think browsers are going to drop support for it anytime in the foreseeable future. And, you haven't been wasting your time learning about the <font> tag. The same properties and values will still hold when your learn Beginning CSS. Now lets move on and learn how to add clickable links to our pages that will take the viewer from one page to another and even other sites. |
To Next Beginning HTML Lesson
Back To Beginning HTML Index