HTML: A Guide to Hard-Coding

 
   

Starting your first page

The Body

Paragraphs

Headings

Images

Fonts

More Fonts

Line Breaks

Links

Colors

Backgrounds

Horizontal Lines

Mailto

Basic Tables

Advanced Tables

Putting your page Online

Frames

Forms

The Head

JavaScript Drop-Down Menu

Cascading Style Sheets

Basic HTML tags

HTML Home

 

 

Dreamweaver Tutorial

Adobe Acrobat

Faculty Resource Center

 

Susan's Homepage

 

Using the Font tag <FONT>

The font tag is probably the most used tag since it controls the look of your text. You can set the default text color in the <body> tag, but there are many times you may wish to modify certain areas of text on your page. You may wish to change the face, size or color of some text.

Face:
this attribute controls the kind of type you use.

When coding your text, one thing that you must keep in mind is that different computers have different fonts installed on them. Also, each browser uses a default font. This means that if do not specify what font you want, you will get the browser default, usually Times Roman. Additionally, if you code <font face="arial"> you will not get the font arial unless it is installed on the computer of the user viewing your page.

The best way to control the look of your text is to list at least two different fonts in the code as well as a font family. The browser will look for the first font first, the second second and so on until it finds a match. If there is no match, then the browser will choose the closest font in the font family.

There are two main families of type:

  • Serif: has a "tail" attached to each letter; good for print but bad for the web
  • Sans-serif: clearer type because it has no "tail" and therefore better suited for the web.

 

Save, then reload in the browser.

  • Font size and color work the same, and when coding, you just stack the attributes within the tag. The order of the attributes is not important.

Size:

The available sizes are 1-7, with one being the smallest and 7 the largest. Size 4 is about the size of normal paragraph text.

Additionally, you can use relative sizes, ie. +2 or +3. This means "make this text two sizes larger than the previous text." This works for minuses as well.

Save, then reload in the browser.

 

Go on to the next page.