HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML text formatting (part 1)

Text in an HTML document can be formatted in many ways such as changing the texts size, color, and font type, as well as advanced formatting such as creating lists, paragraphs, and line breaks.

As text formatting in HTML is a huge topic with alot of possibilities, we have written three text formatting tutorials.

You can skip ahead to Text formatting part 2 or Text formatting part 3 right away though it is recommended to read the text formatting tutorials in order.

This tutorial focuses on:

The <font> tag

The <font> tag is used to set text size, font type, and color. It takes three attributes - size, face, color.

Attributes of the <font> tag
Example:
<font face="Goergia" color="green" size="4"> The font of this text will be Georgia, it will be green, and a size of 4. </font>
Output:
The font of this text will be Georgia, it will be green, and a size of 4.

NOTE: This tag is deprecated.

Bold, italic, and underlined text

The <b> tag makes text bold, the <i> tag makes text italic, and the <u> tag underlines text.

Example:
<b>here is some bold text</b> <br /> <i>here is some italic text</i> <br /> <u>here is some underlined text</u> <br /> <u><i><b>here is some bold, italic, and underlined text</b></i></u>
Output:
here is some bold text here is some italic text here is some underlined text here is some bold, italic, and underlined text

Headings

Headings can be displayed using the <h1> through <h6> tags. The lower the number in a heading tag, the bigger the heading.

Heading tags: <h1> (biggest heading), <h2>, <h3>, <h4>, <h5>, <h6> (smallest heading)

NOTE: The browser will automatically place a line break before and after each heading.

<h6>Text in a small heading</h6> <h5>Bigger heading</h5> <h4>Even bigger heading</h4> <h3>Another heading</h3> <h2>And another heading</h2> <h1>The biggest heading</h1>
Output:
Text in a small heading
Bigger heading

Even bigger heading

Another heading

And another heading

The biggest heading

NOTE: Headings should be used to present the logical order of a document and used in order - <h1> as a main heading, then <h2>, then <h3>, and so on. Our pages are an example of this - we have the title of the page in an <h1> heading, and the title for each part of the page (subtitles) in an <h2> heading. Do not use headings to simply display text in a certain size.

Big and small text

You can display big text using the <big> tag and small text using the <small> tag.

The <big> tag will display text as only a little bigger than its regular size, and the <small> tag will display text as only a little smaller than its regular size.

Example:
Here is some <big>big text</big> <br /><br /> Here is some <small>small text</small>
Output:
Here is some big text Here is some small text

Centering text

You can center text (as well as other elements) using the <center> tag.

Example:
<center> This text will be centered </center>
Output:
This text will be centered

NOTE: This tag is deprecated.

Abbreviations and acronyms

Abbreviations

Abbreviations are specified with the <abbr> tag. This tag is used to display the value of data which is abbreviated. The <abbr> tag contains a title attribute that sets what the data is an abbreviation of.

Example:
<abbr title="Introduction">Intro.</abbr>
Output:
Intro.

Move your mouse over 'Intro.' to find out what it is an abbreviation of. A small box (called a tooltip) with the abbreviation should appear right next to the word.

Acronyms

Acronyms are specified with the <acronym> tag. This tag works similarly to the <abbr> tag but is used to display the value of data which is displayed as an acronym. The <acronym> tag contains a title attribute that sets what the data is an acronym of.

Example:
<acronym title="Beginners All Purpose Symbolic Instruction Code">BASIC</acronym>
Output:
BASIC

Move your mouse over 'BASIC' to find out what it is an acronym of. A small box (called a tooltip) should appear with the acronym right next to the word.

Addresses

Addresses are placed on a webpage with the <address> tag.

Example:
<address> Mickey Mouse<br /> P.O. BOX 12345<br /> Disneyland, USA<br /> </address>
Output:
Mickey Mouse P.O. BOX 12345 Disneyland, USA

NOTE: The <address> tag automatically sets text to be italic.

Computer output tags

Computer output tags are used to display text as computer programming code.

Computer output tags: <code>, <kbd>, <tt>, <samp>, <var>

Example:
<code>This tag displays computer programming code</code> <br /> <kbd>This tag displays input from the keyboard</kbd> <br /> <tt>This tag displays teletype text</tt> <br /> <samp>This tag displays sample text</samp> <br /> <var>This tag displays variables</var>
Output:
This tag displays computer programming code This tag displays input from the keyboard This tag displays teletype text This tag displays sample text This tag displays variables
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information