This chapter introduced many, many new HTML tags. I hope that you took extra notice of the authors notes when describing which HTML generation the tags belong to. This will help you when making a decision on which tags to use to best accommodate your target audience. Understanding the browser used by the majority of your target audience will dictate which tags will be recognized in that browser. If you are designing a Web page that will be used on a company Intranet, this is a more controlled environment. You may have the luxury of knowing exactly what single version of browser is being used, monitor color and resolution settings. In this case, you can design specifically for this environment. On the other hand, if you are designing a Web page that will be viewed on the internet, you will not have this luxury.
For up-to-date information on Internet user trends check out the W3School's Browser Statistics page.
Character styles are tags that affect words or characters within other HTML entities and change the appearance of that text so it is somehow different from the surrounding text.
There are two kinds of character tags: logical styles and physical styles. Logical style tags indicate how the text is to be used, not how it is to be displayed. The browser will decide how to display the text. For example, the <strong> tag indicates that the text associated with it be displayed in a "strong" manner in relationship with the normal text on the page. Physical style tags indicate exactly the way text is to be formatted.
Some of these style tags will actually produce the same appearance when viewed in the browser. For example, the logical style <em> will produce the same effect as the <i> tag is most browsers.
Both of these types of style tags have a beginning and ending tag that are placed around the character/characters that are to be formatted. Multiple style tags can be placed around text so that more that one style is applied to text. For example, the word XHTML, is bolded and italicized using the physical style tags <b> and <i>. This time XHTML has been formatted using the logical style tags <em> and <strong> producing the same results in most browsers.
Although physical style tags are still commonly used in web authoring tools such as Microsoft FrontPage, be aware that logical style tags, and our next topic, Cascading Style Sheets, provide for a wider range of web access, and should be used instead of physical style tags.
In Lesson 3 "Introducing HTML and XHTML" you read about Cascading Style Sheets and how it is used to control the look and feel of your page. The advantage of CSS is that is provides a lot of flexibility in how you can alter the appearance of any type of element, and it can be used in a number of different ways.
CSS can be used as a replacement for many tags and, in fact, the World Wide Web Consortium recommends using CSS whenever possible. As we go through this course, you will be introduced to how you can use CSS to achieve the same results using various HTML tags. We will not be going into great depth in the CSS language but you will be introduced to it.
The style attribute allows you to include one or more style declarations and can be used with just about any tag. For example, if you wanted to format the <h1> tag in Arial, you would write:
<h1 style="font-family: Arial">Heading</h1>
All style declarations follow this same pattern, with the property on the left and the value associated with the property on the right (with a colon separating the two). In the above example, the property is font-family, and the value is Arial.
The <span> tag was created specifically for style sheets to ensure that a tag does not have any inherent effect on the text it's wrapped around. For example:
<p>This is an example of the <span>usage of the span tag</span>.</p>
Used by itself, the <span> tag has no effect on the text. Paired with the style attribute, it can take the place of any of the tags you have been introduced to today.
The text-decoration property is used to specify which decoration will be applied to the text within the affected tag. The valid values are: underline, over-line, line-through, and blink.
<p>Here is some <span style="text-decoration: underline">underlined text</span>.</p><p style="text-decoration: underline">I can also apply an underline to the whole paragraph using the style attribute.</p>
Font properties can be used to modify the appearance of text. Some of these styles can be used in place of the tags you have learned about today:
- font-style can be used to italicize text. It's values are: normal, italic or oblique.
Example: <p>Here is some <span style="font-style: italic">italic text</span>.</p>- font-weight can be used to bold text. It's values are: normal, bold, bolder, lighter and 100 through 900, in units of 100.
Example: <p>Here is some <span style="font-weight: bolder"> bolder text</span>.</p>- font-family sets the typeface for the text. You can set this to a particular font family (such as Arial or Verdana) or to more generic font values such as serif or sans-serif.
Example: <p><span style="font-family: serif">This text is serif text</span>.</p>- font-size sets the size of the text. There are several units of measurement available including pt, px, or %.
Example: <p><span style="font-size: 200%">This text is twice the size of the default</span>.</p>The font-style property is used to italicize text:
<p>Here's some <span style="font-style: italic">italicized text</span>.</p>
The font-weight property is used to bold text:
<p>Here's some <span style="font-weight: bold">bold text</span>.</p>
Another benefit of using CSS over HTML for formatting is that you are giving additional formatting options that are not available with regular HTML. Be sure to read Lesson 6 in your textbook to find out more.