|
 |
::: Tutorials > HTML
Text formatting
Manipulating text formats and styles
Tutorial by Andrew
Sunday March 30, 2003
|
There are many ways to adjust the formatting of text. The preferred way is with CSS (Cascading StyleSheets), but all the following tags are still legitimate and useful.
BOLD TEXT
The <b>...</b> tag is used to modify the text in between the tags to be shown as bold.
<b>TEXT</b>
This tag results in this: TEXT instead of plain TEXT
BIG TEXT
The <big>...</big> tag is used to modify the text in between the tags to be shown as slightly bigger than the surrounding text.
<big>TEXT</big>
This tag results in this: TEXT instead of plain TEXT
The <blink>...</blink> tag is used to modify the text in between the tags to blink. This is supported with Netscape Navigator and the more recent browsers.
<blink>TEXT</blink>
This tag results in this: instead of plain TEXT
BLOCKQUOTED TEXT
The <blockquote>...</blockquote> tag is used to indent text. You can use this tag several times to indent even further. This tag is much like setting the tabs in a word processor.
<blockquote>TEXT</blockquote>
This tag results in this: TEXT instead of plain TEXT
CITING TEXT
The <cite>...</cite> tag is used to display text in italics. Although outdated, it is still a legal command and is used mainly in formatting quotes or citations.
<cite>TEXT</cite>
This tag results in this: TEXT instead of plain TEXT
CODE TEXT
The <code>...</code> is a tag used to display text that relates to programming. Browsers are free to define how they wish to display text within these tags.
<code>TEXT</code>
This tag results in this: TEXT instead of plain TEXT
DIV
The <div>...</div> tag is used to define a new block of text and can therefore be used to set up the style using a class from a stylesheet. Stylesheets are especially useful for keeping a consistent look and feel about a large(r) website.
CONTENT
ALIGNMENT (Optional) - This allows you to set the alignment of the text and objects. Four choices are available, 'left', 'center', 'right', and 'justify'. Currently, only the latest versions of Mac browsers support justify.
CLASS (Optional) - This allows you to set a stylesheet class to affect the objects within the div tags.
ID (Optional) - This allows you to set a stylesheet id to affect the objects within the div tags.
FONT CHANGES
The <font>...</font> tag will control the appearance of the text and can modify the font, size, color, and style of the text.
<font color="COLOR" face="FACE" id="ID" size="SIZE" style="STYLE">...</font>
COLOR (Optional) - This will set the color of the text within the font tags. Either a hexvalue (#000000) or shortcut (blue) can be used.
FACE (Optional) - This will allow you to set the font that should be used. Make sure the font is typed in case sensitive. If you wish to use several fonts in case one font is not available, enter it in like this: Font1, Font2, Font3, etc...
ID (Optional) - Apply a stylesheet ID to the font tag.
SIZE (Optional) - Determine the size of the text. A value from 1-7 can be used as well as relative sizes by using a negative or positive in front of the integer.
STYLE (Optional) - Apply a stylesheet style to the font tag.
H1, H2, H3, H4, H5, H6
The <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5>, and <h6>...</h6> tags change the text within the tags to a default style. The <h1> tag displays the text using a large size while the <h6> tag does the opposite and displays the text at a small size.
<h1>TEXT</h1>
This tag results in this: TEXT instead of plain TEXT
ITALIC TEXT
The <i>...</i> tag is used to modify the text in between the tags to be shown as italicized.
<i>TEXT</i>
This tag results in this: TEXT instead of plain TEXT
PRE-FORMATTED TEXT
The <pre>...</pre> tag is used for displaying a block of text in a monospace font.
<pre cols="COLS" width="WIDTH" WRAP>...</pre>
COLS (Optional) - This sets the maximum amount of characters per line. If you were to display an e-mail, a value of 72 or 80 would be a good figure.
WIDTH (Optional) - This allows you to set the width of the block of text (in pixels).
WRAP (Optional) - This causes the text to be wrapped automatically. It is normally not included.
This tag results in this: TEXT instead of plain TEXT
QUOTES
The <q>...</q> tag is used for displaying a quote with the correct opening and closing quote symbols.
<q>TEXT</q>
This tag results in this: TEXT instead of plain TEXT
SAMPLES
The <samp>...</samp> tag is used to display a sample. Most browsers display text within the samp tags in a monospaced font although this can be modified with style sheets.
<samp>TEXT</samp>
This tag results in this: TEXT instead of plain TEXT
SMALL TEXT
The <small>...</small> tag is used to modify the text in between the tags to be shown as slightly smaller than the surrounding text.
<small>TEXT</small>
This tag results in this: TEXT instead of plain TEXT
STRIKE
The ... tag renders text within the tags as striked out. This works identically to the ... tags.
TEXT
This tag results in this: TEXT instead of plain TEXT
STYLE
The tag is used to define styles and is usually found within the section of a web page.
TYPE - This tells the browser what type of information is between the tags. The default is 'text/css'.
UNDERLINED TEXT
The <u>...</u> tag underlines the text in between the tags.
<u>TEXT</u>
This tag results in this: TEXT instead of plain TEXT
|
|
|
|
|
|
|
 |
|
|
|
