Today we're going over a few basics in web design. In this document we are going to implement alot the character formats it HTML.

• Contents (Formatting tags)
  • Abbr
  • acronym
  • b
  • big
  • blockquote
  • cite
  • code
  • del
  • dfn
  • em
  • i
  • ins
  • kbd
  • q
  • s
  • samp
  • small
  • span
  • strikethrough
  • strong
  • sub
  • tt
  • u

Formatting

There are many different kinds of character formatting tags. Here they are in alphabetical order with a brief explanation of each.

<abbr> and <acronym>, Abbreviations and Acronym

The tag for using abbreviations is the <abbr> tag. If you want to use an acronym, use the <acronym> tag. Use both with the title="description" attribute so that people can scroll their mouse over it and see a description if they don't know what your abbreviation or acronym means.

The code:

<p>Abbr example: <abbr title="abbreviation">abbr</abbr> is anabbreviation.</p>

Results in:

Abbr example: abbr is an abbreviation.

The code:

<p>Acronym example: <acronymtitle="Light Amplification by Stimulated Emission of Radiation">Laser</acronym>is an acronym.</p>

Results in:

Acronym example: Laser is an acronym.

IE6 supports just the acronym tag, Amaya ignores both, and Netscape 8 underlines the text so you can see that help is available, and supports both tags in Firefox mode.

<b> To boldly go...

To make text bold use the <b> tag. Example:

The code:

<b>This text is bold.</b></p>

Results in:

This text is bold.

<big> Big text

To make text bigger than the surrounding text use the <big> tag. Example:

The code:

<big>This text is big!</big>

Results in:

This text is big!

The big text can be used in combination to create bigger and badder text, for example,

This is a combination of two big tags! (<big><big></big></big>.)

<blockquote> Quoting lots of text

Blockquote is used when citing just isn't going to cut it. It is a block-level element.

The code:

<blockquote cite="http://www.cooks.com"> HERSHEY'S COCOA FUDGE</blockquote>

Results in:

HERSHEY'S COCOA FUDGE

<cite> Citing text in a paragraph.

There are two tags for marking quoted text. The block-level <blockquote> tag, and the inline <q> tag. If you use either it is desirable to use the cite attribute to show the url of the copied text.

The code:

<p>Quote example: <q cite="http://www.boisestate.edu">Boise State is the

largest university in Idaho with 18,599 students.</q></p>

Results in:

Quote example: Boise State is the largest university in Idaho with 18,599 students.

<code> Including code in your text or using a monospaced font.

This tag is used throughout this document to aid in formatting.

The code:

<p>Other tags that use monospaced fonts are the <code>&lt;tt&gt;</code>,<code>&lt;kbd&gt;</code>, and <code>&lt;samp&gt;</code> tags.</p>

Results in:

Other tags that use monospaced fonts are the <tt>, <kbd>, and <samp> tags.

<del> displaying deleted text.

Sometimes in publicly edited web pages in documents it is important to display what had been remomed in a web page.

The code:

<p>Del example: <del>This text has been deleted.</del></p>

Results in:

Del example: This text has been deleted.

<dfn> Adding a definition

This tag lets you add a brief description to your inline text.

The code:

<p>This is a definition of dog from Dictionary.com: <dfn>domesticated carnivorous mammal (Canis familiaris) related to the foxes and wolves and raised in a wide variety of breeds. </dfn></p>

Results in:

This is a definition of dog from Dictionary.com: domesticated carnivorous mammal (Canis familiaris) related to the foxes and wolves and raised in a wide variety of breeds.

<em>, When you need emphesis

The EM tag lets the browser know that it should display (or say) something with emphesis.

The code:

<p>Emphasizing <em>hello.</em></p>

Results in:

Emphasizing hello.

<i> i is for italicize text.

To italisize use the i tag.

The code:

<p><i>This text is italicized.</i></p>

Results in:

This text is italicized.

<ins> Inserted text.

To mark text as inserted or underline the text, you can use the ins tag. (Amaya displays in italics.)

The code:

<p><ins>This is inserted text</ins></p>

Results in:

This is inserted text

<kbd> Keyboard style text

I'm not sure why there are so many ways to display monospaced fonts, but here's another one.

The code:

<p><kbd>Keyboard text</kbd></p>

Results in:

Keyboard text

<q> Quoted text.

This is similar to citing text, ans is better supported. This puts quotation marks around your text.

The code:

<p><q>Quoted text</q></p>

Results in:

Quoted text

<s> Strikethrough text.

This tag has become deprecated due to styles, but is still widely supported.

The code:

<p><s>Strikethrough text</s></p>

Results in:

Strikethrough text

<samp> Sample text for computers

Yet another monospaced font tag.

The code:

<p><samp>Sample code</samp></p>

Results in:

Sample code

<small> Small font

This tag is related to big, and can be combined with other small parent tags to make extra small fonts.

The code

<p><small>This is small text</small></p>

Results in:

This is small text

<span> A generic inline span

This is one of the most useful tool to select a portion of text to be manipulated by CSS. I'll talk about this tag later.

<strikethrough> Make a line through text.

This is yet another deprecated tag that puts a line through text. No example given.

<strong> bold text

This is the recommented bold tag, if tags are going to be used at all, because it is more accesible for those who have disabilities.

The code:

<p><strong>bold text</strong></p>

Results in:

bold text

<sub> Subsripts

This tag can be used for displaying mathematical functions.

The code:

<p>Y₀</p>

Results in:

Y₀

<sup> Superscipt

This is related to sub and can be used in mathematical notation.

The code:

<p>1.6*10²⁰⁰</p>

Results in:

1.6*10²⁰⁰

<tt> Yet another monospaced font tag

The code:

<p><tt>True-type font</tt></p>

Results in: xmlns:xlink="http://www.w3.org/1999/xlink"

True-type font

<u> underlined text

This format will underline text. This tag is deprecated.

The code:

<p><u>Underlined text.</u></p>

Results in:

Underlined text.