Text Effects with HTML

We will now learn how to make different text effects with HTML, now that you have learned several basic level tags that every website needs in order to get started.

No doubt you've seen some really interesting effects with text in HTML: colors, italics, bolding, size changes, and in some cases things like rainbow text, scrolling text, even rippling text. These things can all be achieved with HTML or with JavaScript, a programming language based around HTML that we'll touch on later. (While you won't learn to create JavaScript as it is outside the scope of this course, we will talk about how you can incorporate it into your web page design and even change certain critical parts.)

The core text effects in HTML are the emphasizing elements (bold, italic, and sizing), header elements, and color.

Header Tags: Not The Same As Bold/Large Text

Header tags are used to mark text headers: titles, subtitles, and other text you want to use in order to divide your page. Though many webmasters treat them the same, they are different from bolded and enlarged text. For one thing, when search engines catalog pages, they treat the text contained in a header tag differently, giving it more importance in page rankings. If you use good headers, you can make your page appear higher when someone searches for your keywords.

For another thing, headers can be easily and quickly changed with CSS functions. This, again, is something that we'll discuss later. For now, you just need to know that if you have a header, it should have a header tag, not a bold/large tag.

You have several levels of headers, from <H1> through <H6>. The <H1> default header appearance is gigantic, so most people opt for the <H2> as a top-level header or reset the appearance using CSS.

To see how this looks, paste the following code into your HTML editor.

<HTML>
<HEAD>
      <TITLE>Whatever You Want To Put For Your Title</TITLE>
</HEAD>
<BODY>
      <H1> Heading 1</H1>
      <P>This is some text.</P>
      <H2> Heading 2 </h2>
      <P>This is some text.</P>
      <H3> Heading 3 </H3>
      <P>This is some text.</P>
      <H4>Heading 4 </H4>
      <P>This is some text.</P>
      <H5> Heading 5 </h5>
      <P>This is some text.</P>
      <H6> Heading 6 </h6>
      <P>This is some text.</P>
</BODY>
</HTML>


Now look at it in your page preview. See the variations in size and bolding, and probably in font as well? (Not all browsers translate headings exactly the same, so while most change the font to a sans serif, others don't.)

Italics and Bolding

Italics and bolding are both referred to as emphasis text, as they are used to emphasize some part of your page. Here is an example of italics emphasis:

<HTML>
<HEAD>
      <TITLE>Whatever You Want To Put For Your Title</TITLE>
</HEAD>
<BODY>
      <EM>I want to Emphasize my text</EM><BR>
      <I>I want to italicize my text, and this code is better if I want to print my text.</I>
</BODY>
</HTML>


If you want your text to be bold, you have two choices in this as well:

<HTML>
<HEAD>
      <TITLE>Whatever You Want To Put For Your Title</TITLE>
</HEAD>
<BODY>
      <B> This type of Bold code is good if printing is necessary</b>
      <STRONG>However, I can also use this code if no printing is necessary</STRONG>
</BODY>
</HTML>


Why Are There Two Ways To Do It?

HTML is a language that is agreed upon, but different corporations have used it in different ways. Remember that Microsoft went its own way, defying the W3C for a while? Well, when they were doing their own thing, they developed some of their own code, and because they had the biggest web browser on the block - Internet Explorer - most people using their methods could write web pages with their outlaw code and have it read by most people online.

That doesn't mean people went out and started doing it the Microsoft way. Instead, most of the outlaw code was created using FrontPage, Microsoft's web editor. When it became standard for <EM> and <STRONG> to be used in many web pages to italicize and bold text, the W3C had no choice but to treat it as part of their code.

There are two basic categories of font codes. One is the font style element set:

  • <TT></TT> - renders teletype text
  • <I></I> - denotes italics
  • <B></B> - denotes bolding
  • <BIG></BIG> - increases your text size. There is no set percentage increase; instead, browsers all interpret it differently.
  • <SMALL></SMALL> - decreases your text size. As with <BIG>, there is no set percentage decrease.

It's not hard to figure out that the most commonly used members of this set are <I> and <B>.

The other major category is the phrase element. There is some overlap between phrase and font style, but you'll also see some new members.

  • <EM></EM> - Renders as emphasized text, usually italicized. Some browsers will also capitalize this text.
  • <STRONG></STRONG> - Usually renders as bold text.
  • <DFN></DFN> - Denotes a definition term, often rendered in italics.
  • <CITE></CITE> - Indicates a citation or quote, and is usually rendered in italics.

The outstanding characteristic of all these is that, besides the <B> and <I> codes, each may be interpreted somewhat differently by different browsers.

That's okay, too. HTML is not designed to be a fixed medium, where every line breaks in exactly the same place and all the text looks all the same on every computer. If you want that, you'll need to use PDF files!

The strength of HTML is its flexibility. You can easily change the appearance of text either from the webmaster end or from the user end. If you're a webmaster and have your site set up properly, you can change all the header text on your site at the same time, for a site-wide spruceup. Or you can set your text in such a way that the user can choose to enlarge text for easy reading.

On the user end, well-put-together text is easy for people who are visually impaired to blow up, or easy for programs to read to the blind, or easy to set in different colors for those who are color blind. For the most part, using only the <B>, <I>, and the various header formats is more than enough to create robust, flexible, and beautiful web pages.

See, you are already learning what it takes to make a great website by learning all about text effects with HTML tags. You are well on your way to learning everything you need to know about HTML and creating an attractive website with which you can monetize.