Lesson 1: Changing Text
Overview
In this lesson students will learn various attributes that will change the appearance of the text from bold and italics to size, style and font color.
Learner Outcomes
At the end of this lesson you will have a basic understanding of different text styles and their applications.
Activities
- Bold or Italicize Text
- Opening and closing Tags usually tags travel in pairs (note the difference between the two). It is important to understand that making text changes should serve a purpose i.e. emphasis a certain aspect of the page.
- To create Bold Text type <B> followed by the text you want to make bold. End with the closing tag </B>
- To create Italic Text type <I> followed by the text you want to make italic. End with the closing tag </I>
- Changing Font
- In some cases, you may want to change the font face, to do so use the following tags and attributes. (see example below)
- Type<font face="type the name of the font you want to use here"> </Font>
- Text Color
- You can change the color of text on all or part of your Web page. There are names and color codes for Web safe colors commonly used. Color codes are often refered to as a hexidecimal value with six digit combinations of both letters and numbers.
- To create a color text you can specify it as an attribute inside the body tag (see example below).
- Type<body text="ff00cc"> the text is an attribute inside the body tag that will give a color to all the text on the page.
- Type<font="ff00cc"> this will give a color to all the text within the font tags. When finished end with the following tag </font>
- Changing Font Size
- When you need to change the size of text there are basically two ways to do it. You can create an exact font size or you can change it relative to the surrounding text.
- To create the specific size of one or more characters:
- Type <Font Size="n">where n is a number from 1-7. At the end of the text you want to change close with the following tag </font>.
- To change the size of text in relation to surrounding text:
- Type <Font Size="+n or -n"> where +n or -n is a number specifying how much bigger or smaller you want the text compared to the surrounding text. </font>.
Handouts/Online documents
COMMON HTML TAGS
