The address for this web page is: http://fishcaro.crosswinds.net/day_9_text_appearance.htm

On to the next lesson! Back to the COURSE SYLLABUS

9. TEXT APPEARANCE

Here's a neat calendar: how many days until your next vacation?
Click on the PREV and NEXT buttons to change the year and month.

Today's lesson presents tags that affect the appearance of text.

INDEX CARD #9:

TEXT APPEARANCE—inline styles (9a)

What is meant by an "inline style" tag? This means that the tag can be applied to a string of characters without introducing line breaks (as opposed to, say, heading tags, which introduce some extra space above and below).

What are the common structural tags for controlling text appearance? (Recall the difference between structure and presentation that was discussed on Day 6!) Use the following tags whenever it is appropriate to do so:

<CITE>For citations: books, magazines, articles, etc.</CITE> <CODE>Denotes a code sample.</CODE> Denotes emphasized text. <KBD>Denotes text that is typed on a keyboard.</KBD> <SAMP>Used for sample output from computer programs.</SAMP> Enclosed text is strongly emphasized. <VAR>Used for variables or program arguments.</VAR>

TEXT APPEARANCE—forced presentation

It's best to use the structural tags listed on (9a) whenever possible. However, there are times when you want to force a special effect, in which case you may want to use the following:
<BIG>Sets the type one font size larger than the surrounding text.</BIG>
<BLINK>Causes the text to blink (on Netscape Navigator only).</BLINK> Enclosed text is displayed in italic. <S>~~Enclosed text is displayed as strike-through. (deprecated)~~</S> Sets the type one font size smaller than the surrounding text. _{Enclosed text is in subscript style.} ^{Enclosed text is in superscript style.} <TT>Formats enclosed text as "typewriter type."</TT> Enclosed text is underlined. (deprecated) <MARQUEE>This only works in Internet Explorer!</MARQUEE> Used to affect the color, typeface, and size of the enclosed text. The "font" tag will be discussed in a future lesson.

Printable version of Index Card 9a

Printable version of Index Card 9b

WORKSHEET #9:

(W9.1) Continue with the tutorial located at: http://www.cwru.edu/help/introHTML/toc.html (link is no longer valid) Please read Chapter 5 (SPECIAL EFFECT TAGS) and take the quiz at the end of Chapter 5. There is an interactive part to the quiz; make sure you don't miss it!
(W9.2) Write the code to produce the following: This is REALLY REALLY REALLY REALLY big! Hint: Use nested BIG tags.
(You can view the SOURCE CODE for this page to check your answer... but don't cheat! Try it yourself first!)

ASSIGNMENT #9:

(A9.1) Read pages 104–108 (from "Text Appearance (Inline Styles)" up to "Spacing and Positioning") in the Weasel book. Skim through all the tags, but focus attention on the ones covered on today's index cards.
(A9.2) Also read pages 114–116 (from "Inline Type Styles" up to "The Tag") in the Weasel book.
(A9.3) View Index Card #9 using both Internet Explorer and Netscape Navigator. Put the two browsers side-by-side, so you can view both at the same time. Does everything display the same? Comment.
(A9.4) Use some of the tags that affect text appearance on your homepage.