HTML: Text Formatting

 

Text Formatting

HTML includes many tags that format text:

<b>..</b> makes text bold

<u>..</u> underlines text

<i>..</i> italicizes text

<h1>..</h1> creates a large heading

<h2> to <h6> create successively smaller headings

<em>..</em> emphasizes text

<strong>..</strong> emphasizes text

<pre>..</pre> "preformatted" text retains formatting

<tt>..</tt> makes text look like it's from a teletype

<strike>..</strike> puts a line through text

<small>..</small> makes text small

<big>..</big> makes text big

<sub>..</sub> creates a subscript

<sup>..</sup> creates a superscript

<blockquote>..</blockquote> formats long quotations

 

Other Commands

<br> causes a "line break" or "carriage return"

<center>..</center> centers text

<hr> creates a horizontal line ("horizontal rule")

<hr size=5 width=75 noshade>, for example, creates a horizontal rule 5 pixels thick, 75 pixels wide, with no shadow

<font>..</font> designates a font

<font face="Verdana, Arial, Helvetica, sans-serif" size="+2">, for example, designates a preferred series of fonts and a size that is 2 units larger than the default

 

There are codes to represent various special characters. To get a © symbol, for example, type "&copy". To get a ™ symbol, type "&#153." For a list of the special characters available, check out W3C's website at www.w3.org/MarkUp/Guide/Advanced.html. (Scroll down a couple of screens to the section titled "How to use entities for special characters.")

 

A useful special character is the "non-breaking space" or "&nbsp;". It can be used to specify that two words should not be separated on different lines; for example: White&nbsp;House. It can also be used in a paragraph whose sole purpose is to create a blank line; for example: <p> &nbsp; </p>.

 

Example

Here is some HTML that demonstrates these text formatting tags:

<p><b>Bold text</b><br>

<p><u>Underlined text>/u><br>

<p><i>Italicized text</i><br>

<p><h1>Header of size "h1"</h1>

<p><h2>Header of size "h2"</h2>

<p><h3>Header of size "h3"</h3>

<p><h4>Header of size "h4"</h4>

<p><h5>Header of size "h5"</h5>

<p><h6>Header of size "h6"</h6>

<p>[ <u>Note</u>: The 6 headings above do not descend in size as one would expect, because I re-defined several of the "headings" tags elsewhere.]

<p><em>Text inside "em" tags</em>

<p><strong>Text inside "strong" tags </strong>

<p><pre>Text inside "pre" tags</pre>

<p><tt>Teletype text inside "tt" tags</tt>

<p><strike>Strikethrough text inside "strike" tags</strike>

<p><small>Text inside "small" tags</small>

<p><big>Text inside "big" tags</big>

<p>Here's a 2 inside a subscript tag: H<sub>2</sub>O

<p>Here's a 2 inside a superscript tag: E=mc<sup>2</sup>

<p>Here's a quote inside "blockquote" tags:<blockquote>Put the right kind of software into a computer, and it will do whatever you want it to. There may be limits on what you can do with the machines themselves, but there are no limits on what you can do with software. -- Editor of a software magazine, April 1984</blockquote>

<p>I need three "br" tags for this address:<br>Metuchen High School<br>400 Grove Avenue <br>Metuchen, NJ 08840

<p><center>This text is inside "center" tags</center>

<p>Following is a horizontal rule:<br><hr noshade>

<p><font face="Monospace" size="+2">This text is in Monospace font with a size of +2. This text is inside "font" tags.</font><br>

to see this how this code looks in a window.

 

Other Resources

Try these links on HTML Text Formatting:

Page Link
HTML Primer #2 http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479581

 

Exercise

Work on your own website or on eEverything.com. Use at least 6 of the formatting tags listed above. In addition, use the <hr>, <br>, &nbsp and <font> tags. Finally, find a special character on the W3.org website and include it.

If you work on eEverything.com, give some basic information on the site. Mention that the site offers frequent specials, the prices are frequently better than those found on those better-known sites, eEverything offers a huge range of merchandise, and shoppers can get their own e-mail address, yourname@eEverything.com.