Preview only show first 10 pages with watermark. For full document please download

Document 32902

   EMBED

Share

Transcript

Lesson 4 - Text and Fonts HTML Tags Introduced • Using the font Tag Using the Font Tag The font tag has for the most part been replaced by Cascading Style Sheets which you will learn about later in the course. Cascading Style sheets allow you to do everything that the font tag can do and much more. This lesson on fonts is included because even though style sheets replaced the font tag, it is still used and as a designer you should know how it is used, what it is capable of, and what its limitations are because you will most likely come across it. The use of fonts and graphics can help make web pages more attractive and interesting. Changing the style of fonts is accomplished using the tag. The tag is used to modify font styles, however, by itself it does not do anything. The font tag must be used in conjunction with its attributes. There are three available attributes associated with the font tag. The face attribute allows you to modify the typeface. The size attribute allows you to modify the display size of the text. The color attribute allows you to change the display color of the text. The Face Attribute The default font face style for most browsers is "Times New Roman," however, you are not limited to this font style. Most computers have a number of built in font types that you can use. There are five basic font classifications: Serif, Sans Serif, Script, Fancy, and Monospace. The Serif font is a more formal font style. A Serif refers to the little angle lines coming off the ends of the letters which give them a more formal appearance. Serif actually means curves. Sans Serif means "without serif, or curves" and refers to a block letter style. A Script font style has an appearance of handwriting. A fancy font is one which appears graphical or decorative. Finally a monospace font is one which all the letters have the same width. The monospace font often resembles that of a typewriter. Sample font Code Output This font is Serif This font is Serif This font is Sans Serif This font is Sans Serif This font is Script This font is Script This font is monospace This font is Monospace This font is fancy This font is fancy The Fancy font is not listed above because there is no default font face for that category, therefore, if you specify a Fancy font face that is installed on your computer, the visitors to your site who may not have it installed on their computer will only see the default font style, which is Times New Roman. It is a good idea to avoid using fancy font styles when designing web pages. Many browsers are moving away from recognizing the font categories to specific font types. This move was accelerated with the introduction of Cascading Style Sheets, which will allow you to specify alternate font types if the primary is not available. The table below displays some of the more common fonts faces that you can for the most part count on being available on most computers. If any of the font styles shown below are not installed on your computer, you will see Arial, which is the default font style set for this page. Common font faces Times New Roman Comic Sans MS Impact Courier New Tahoma Century Gothic Haettenschweiler Terminal Wide Latin Lucida Handwriting Playbill Algerian Arial Britannic Bold Abadi MT Condensed Light Verdana Arial Black Colonna MT Notice in the code below the quotes around "wide latin." Any time a value to an attribute consists of more than one word, the entire value should be enclosed within quotes, otherwise the browser will just read up to the white space after wide and stop. Try removing the quotes from "wide latin" and see the result. Try It in IE Editor! This is Playbill
This is Verdana
This is Wide Latin The Size Attribute The font tag may also be used to change the font size of text by adding the size attribute. There are only 7 font sizes available with 1 being the smallest, and 7 being the largest. If a size larger than 7 is specified, the size will max out at a size 7. The section on Style Sheets explains how to set specific font sizes. The table below demonstrates the various font sizes. HTML Code Sample Output size 1 size 1 size 2 size 2 size 3 size 3 size 4 size 4 size 5 size 5 size 6 size 6 size 7 size 7 Font styles with intricate details such as script style fonts should not be displayed any smaller than 3. Fonts displayed at a size 1 or 2 should only be a Sans Serif style font, otherwise it may not be able to be read. The Color Attribute To color attribute is added to the font tag to change the color of a block of text. To assign colors, you may use the color name of a basic color, or the RGB color code. The sample code below specifies that a block of text should be red. This text is red This text is red The sample code shown below illustrates how multiple font tags can be applied to a line of text. It also demonstrates how a single font tag with multiple attributes can be applied to a line of text. Try It in IE Editor! This is red Verdana
This is red Playbill

This is blue Verdana