Editing Articles in HTML - part 2

Submitted by admin on Sat, 10/24/2009 - 12:39

Printer-friendly version

Send to friend

PDF version

Part 2 of the HTML authoring guide.

Part 1 of this article

- The span tag

The and tags are used to define a region of text for which you want to change the formatting.
Many of the parameters which are accepted with the tag are intended only for use with templates and style sheets, which does not apply to authoring articles with PostNuke. The most useful parameter remaining is the "style" parameter, which we will describe here.

Like parameters for other HTML tags, the style parameter is specified using the parameter name, followed by an equal (=) sign, followed by the parameter value surrounded by double quotes ("). However, unlike parameters for other HTML tags, the value for a style parameter contains one or more additional parameters and values. This makes the style parameter actually behave like many parameters in one.

Here is a simple example:

Some blue text.
The reader would see:

Some blue text

In HTML terminology, the "color" portion of the style parameter is called a property. The property is followed by a colon (:) and then the property value ("blue", in this example).

This particular example is not very useful, since you could easily accomplish the same thing using the tag, and it would take fewer words to accomplish. However, the usefulness of the style parameter does not end here. There are a number of properties you can set with the style parameter. You can also combine multiple properties into the same style parameter by separating them with a semicolon(;).

The color property

The color property is used to set the color of the text between the and tags. The value for the color property may either be one of 17 predefined color names, or a hexadecimal value which indicates the color as a combination of red, green, and blue.
These are the predefined color names, along with their corresponding hexadecimal values:

Color Name Hex Color

black #000000

silver #C0C0C0

gray #808080

white #FFFFFF

maroon #800000

red #FF0000

purple #800080

fuchsia #FF00FF

green #008000

lime #00FF00

olive #808000

yellow #FFFF00

navy #000080

blue #0000FF

teal #008080

aqua #00FFFF

You can, alternatively, use a hexadecimal value to specify the color. The hexadecimal value should be preceeded by a hash symbol (#) followed by a two character hexadecimal value for each of red, green, and blue:

#RRGGBB

The font-family property

The font-family property is used to specify the font family (i.e., font face) for the text between the and tags. The value for the font-family property may be a specific font family, or one of the generic font family identifiers. Note that a specific font family is not guaranteed to be available on every browser (though there are some common ones which are pretty much always available), but a font which is suitable for each of the generic font families will always be available with any graphic web browser.
Some common specific font families are:

Verdana

Times New Roman

Courier

The generic font families are:

sans-serif

serif

monospace

cursive

fantasy

Here is an example, using the font family Verdana, combined with the color blue:

Blue Verdana

The reader would see:

Blue Verdana

The font-size property

If you've had a peek at the official HTML specification, then you know that the style parameter supports a property called "font-size". The intention of this property is to allow you to change the size of the text font.
Unfortunately, while PostNuke will permit you to use the font-size property in your articles, any changes you specify will be overridden by the style sheets in the PostNuke theme. In order words, the size of the text won't be changed.

If we find a way to overcome this limitation then I will include the documentation for the font-size property here. In the meantime, the only option you have for using different size text in your articles are the heading tags <h1> through <h6>.

The font-style property

The font-style property allows you to specify normal, italic, or oblique font styles. Normal is the default way in which text is displayed. Italic is identical to the style of text displayed by the tag. Under most conditions, oblique is identical to italic.
Here are some examples:

normal 
italic 
oblique 

The reader would see:

normal
italic
oblique

It's probably easier to just use the tag for most purposes, unless you are using a tag anyway.

The font-variant property

The font-variant property allows you to choose an alternate form of the font face in which ALL letters are displayed using capital letters. Those letters which you type in lower-case are displayed using small capital letters, while those which you type in upper case are displayed using large capital letters. This font style is sometimes referred to as "drop cap".
There are two values which can be used with the font-variant property; "normal" and "small-caps". The normal value is the same as the default way that text is displayed, while the small-caps value indicates that text should be displayed using only capital letters

Normal 
Small-Caps 

The reader would see:

Normal
Small-Caps

The font-weight property

The font-weight property allows you to change the intensity, or "weight" of the text. There are two ways in which you can specify the weight; as a predefined name, or as a weight number. In actual practice, the only difference this property has is to either make the text appear normal, or to make it appear bold. In most cases, it's probably easier to use the tag, unless you are already using a tag for some other purpose.

normal 
bold 
bolder 
lighter 
100 
200 
300 
400 
500 
600 
700 
800 
900 

The reader would see:

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

As you can see, all of those options only produce two results; the text is either normal or bold.

The text-decoration property

The text-decoration property is used to add text effects like underlines, overlines, and strike-through lines. There is also a value which is intended to make the text blink on/off, but this value has no effect on most web browsers.

none 
underline 
overline 
line-through 

The reader would see:

underline
overline
line-through
blink

The text-transform property

The text-transform property has limited usefulness because there isn't anything this property can do that you can't do yourself simply by editing the text. Even so, if you have a large amount of text to paste into your article, and you want to apply one of the transforms supported by the text-transform property to all of it, then you might find it easier than editing all of the text by hand.
The text-transform property can apply any of three different transforms to a block of text. It can transform all of the text to uppercase letters, or it can transform all of the text to lowercase letters, or it can capitalize the first letter in every word. It might have been useful if it could capitalize only the first letter of the first word in each sentence, but this is not one of the features of the text-transform property.

none. this is my sentence. 
capitalize. this is my sentence. 
uppercase. this is my sentence. 
lowercase. this is my sentence. 

The reader would see:

none. this is my sentence.
capitalize. this is my sentence.
uppercase. this is my sentence.
lowercase. this is my sentence.

The text-align property

The text-align property can be used to change the "justification" of the text, or how the text is aligned with the left and right edges of it's boundaries. You can choose to have the text aligned along the left size of the boundary (this is the default), or the right side, or both! Aligning to both sides (called "full justification") is done by the browser by controlling the amount of space in between letters and words so that the line of text completely fills the boundary area.
What is the boundary area? Well, if you haven't used any tags to index your text (such as the <blockquote> tag), then the boundary area is the box in which your article is displayed. Otherwise, the boundary area is the indented rectangle.

If you have trouble seeing the different alignments in the examples below then try adjusting the width of your browser window to change where the automatic line breaks occur.

This is a left-justified paragraph:

 Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation - or any nation, so conceived and so dedicated - can long endure. 

The reader would see:

Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation - or any nation, so conceived and so dedicated - can long endure.

This is a right-justified paragraph:

 Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation - or any nation, so conceived and so dedicated - can long endure. 

The reader would see:

Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation - or any nation, so conceived and so dedicated - can long endure.

This is a full-justified paragraph:

 Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation - or any nation, so conceived and so dedicated - can long endure. 

The reader would see:

Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation - or any nation, so conceived and so dedicated - can long endure.

<strike> - Strike through tag

The <strike> and </strike> tags are used to define a region of text which should be displayed with a line drawn horizontally through it; i.e., stricken out.

Everyone <strike>would</strike> should write articles for FFI!
The reader would see:
Everyone would should write articles for FFI!

<table> - The table tag.

The <table> tag is very useful for dividing the content of all or a portion of your article into neatly organized rows and columns. The <table> and </table> tags define the beginning and end of the table definition. There are also a number of tags which you use in between the <table> and </table> tags to define the structure and content of your table. There are, however, some general attributes you can specify with the <table> tag that affect the entire table.
Please note that HTML tables can be very complex, and are far and away the most common means used by programs like Microsoft FrontPage and Macromedia DreamWeaver to control the placement of text and graphics on web pages. We are only going to discuss the most commonly used table tags and attributes in this article. If you would like a more detailed (and far more confusing) description of tables, please refer to the official HTML specification:

W3C committee home page.

Attributes for the <table> tag

These are the attributes which are currently supported with the <table> tag in PostNuke.

align - This attribute defines how the table will be aligned with respect to the rest of your article. The available values for the align attribute are:

left - Align the table along the left side of the article box.

center - Align the table in the center of the article box.

right - Align the table along the right side of the article box.

Although the align value is officially deprecated in the HTML 4.01 standard, it is still supported by virtually all web browsers, so it isn't likely to be abandoned anytime soon.

width - This attribute specifies the width of the table, specified as a percentage of the width of the article box.

bgcolor - This attribute specifies the background color for the table. This can be one of the predefined color names, or a hexadecimal color value. See the tag for a description of the permissable color values.

border - This attribute specifies the thickness of the table border, in pixels. Note that many browsers add a 3D shadow effect around table borders, so specifying a border of 1 pixel may result in a border which is actually a few pixels thicker than this. You can make the border invisible by setting this attribute to zero.

Let's look at a simple example. The following table is divided into two rows with two columns each. For now, just ignore the contents of the table, and focus on the attributes in the <table> tag. This table is aligned to the center of the article box, the width is 50% of the article box, the background is yellow, and the border is 1 pixel thick (though you may see some 3D shadows around the border, depending on your web browser).

<table align="center" width="50%" bgcolor="yellow" border="1"> <tr>
<td>R1,C1</td>
<td>R1,C2</td>
</tr>
<tr>
<td>R2,C1</td>
<td>R2,C2</td>
</tr>
</table>

The reader would see:

R1,C1 R1,C2

R2,C1 R2,C2

Defining rows - the <tr> tag

You define each row in your table using the <tr> and </tr> tags. You can put as many rows in your table as you like.
There are some attributes which you may specify with the <tr> tag which will affect everything in that table row:

align - This attribute specifies the horizontal alignment of the contents of the cells in the table row. This attribute can be overridden within the definition of each cell. The available values for the align attribute are:

left - Align to the left side of the cell.

center - Align to the center of the cell.

right - Align to the right side of the cell.

valign - This attribute specifies the vertical alignment of the contents of the cells in the table row. This attribute can be overridden within the definition of each cell. The available values for the valign attribute are:

top - Align to the top of the cell.

middle - Align to the middle of the cell.

bottom - Align to the bottom of the cell.

bgcolor - Specifies the background color of the cells in the table row. This can be one of the predefined color names, or a hexadecimal value. See the for the permissable color values.

Here is a simple example. The cells in the first row are aligned to the top left with a background color of green. The cells in the second row are aligned to bottom right with a background color of yellow.

<table align="center" width="50%" border="1">
<tr align="left" valign="top" bgcolor="green">
<td>R1,C1</td>
<td>R1,C2</td>
</tr>
<tr align="right" valign="bottom" bgcolor="yellow">
<td>R2,C1</td>
<td>R2,C2</td>
</tr>
</table>

The reader would see:

R1,C1 R1,C2

R2,C1 R2,C2

Defining cells - the <td> and <th> tags

There are two tags which are used for defining a cell in a table. These are the <td> and <th> tags. The <td> tag is used for defining normal cells , or "table data" cells. The <th> tag is used for defining a heading for a column of cells, or "table header".
Each cell must have a closing tag. That is, a <td> cell must end with a </td> tag, and a <th> must end with a </th> tag.

The <td> and <th> tags support a number of optional attributes.

rowspan - A cell may span more than one row, allowing you to divide up the table into irregular size blocks. The rowspan attribute defines how many rows the current cell will cover.

colspan - A cell may span more than one column, allowing you to divide up the table into irregular size blocks. The colspan attribute defines how many columns the current cell will cover.

nowrap - This is a boolean attribute, which means it is either on or off. If you specify this attribute, then it is on. Otherwise, it is off. When the nowrap attribute is on then rows of text in the cell will not be automatically split by the web browser to make them fit within the cell. Instead, the browser will force the width of the cell to fit the width of the row of text.

align - This attributes specifies the horizontal alignment of contents of the cell. This will override any align attribute which was set for the row with the <tr> tag. The permissable values are:

left - The cell contents are aligned along the left edge of the cell.

center - The cell contents are aligned to the center of the cell.

right - The cell contents are aligned aloing the right edge of the cell.

valign - This attributes specifies the vertical alignment of the cell contents. This wil override any valign attribute which was specified for the row with the <tr> tag. The permissable values are:

bottom - The cell contents are aligned along the bottom edge of the cell.

middle - The cell contents are aligned in the middle of the cell.

top - The cell contents are aligned along the top edge of the cell.

bgcolor - This attribute specifies the background color for the cell. The value may be a predefined color name, or a hexadecimal value. See the tag for a list of permissable values.

Let's look at an example of a table which uses some of these attributes.

<table align="center" width="75%" border="1">
<tr align="center" bgcolor="blue">
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr align="center" bgcolor="yellow">
<td colspan="2">This cell spans two columns</td>
</tr>
<tr align="center" bgcolor="yellow">
<td rowspan="2">This cell spans two rows</td>
<td>This is the upper right cell</td>
</tr>
<tr align="center" bgcolor="yellow">
<td>This is the lower right cell</td>
</tr>
</table>

The reader would see

Column 1 Column 2

This cell spans two columns

This cell spans two rows This is the upper right cell

This is the lower right cell

Now, let's look at an actual practical application of a table, as it might be used in an article. In this case, we're going to set the table border to zero so that the table itself will not be visible - only it's contents will be seen. Look carefully at the HTML tags and see if you can determine how this table will look:

<table align="center" width="75%" border="0">
<tr align="center" valign="middle">
<th colspan="2">A Comparison Of Two Muhammad's</th>
</tr>
<tr align="center" valign="middle">
<td><img src="gallery2/d/27-1/Mo.jpg" width="200" height="300"></td>
<td><img src="gallery2/d/30-1/muhammad.gif" width="200" height="300"></td>
</tr>
<tr align="center" valign="middle">
<td>Muhammad #1</td>
<td>Muhammad #2</td>
</tr>
<tr align="left" valign="top">
<td colspan="2">These are two classical paintings of the Islamic prophet Muhammad. In the painting on the left, Muhammad #1, we see a comparatively younger Muhammad, carrying a staff topped with the Islamic crescent symbol, and carrying a sword in his belt. In the painting on the right, Muhammad #2, we see an older Muhammad, carrying a book which can only presume is the Qu'ran, and wearing a knife in his belt. One can only speculate as to why the older Muhammad is carrying the Qu'ran, when the verses it contains were not collected into written form until years after his death.</td>
</tr>
</table>

The reader would see:

A Comparison Of Two Muhammad's

Muhammad #1 Muhammad #2

These are two classical paintings of the Islamic prophet Muhammad. In the painting on the left, Muhammad #1, we see a comparatively younger Muhammad, carrying a staff topped with the Islamic crescent symbol, and carrying a sword in his belt. In the painting on the right, Muhammad #2, we see an older Muhammad, carrying a book which can only presume is the Qu'ran, and wearing a knife in his belt. One can only speculate as to why the older Muhammad is carrying the Qu'ran, when the verses it contains were not collected into written form until years after his death.

Column 1	Column 2
This cell spans two columns
This cell spans two rows	This is the upper right cell
This is the lower right cell

A Comparison Of Two Muhammad's

Muhammad #1	Muhammad #2
These are two classical paintings of the Islamic prophet Muhammad. In the painting on the left, Muhammad #1, we see a comparatively younger Muhammad, carrying a staff topped with the Islamic crescent symbol, and carrying a sword in his belt. In the painting on the right, Muhammad #2, we see an older Muhammad, carrying a book which can only presume is the Qu'ran, and wearing a knife in his belt. One can only speculate as to why the older Muhammad is carrying the Qu'ran, when the verses it contains were not collected into written form until years after his death.

<tt> - The teletype tag

The <tt>, or "teletype" tag, specifies a region of text which will be displayed in a monospaced font, i.e., all characters are the same width. The only advantage to using a monospaced font is that columns of characters in successive rows will be vertically aligned. This tag gets it's name from the Teletype machine - a type of printing computer terminal which was common decades ago, and which always printed in a monospaced type font.
Here is an example:

<tt>Here is a sentence using the Teletype tag. 
Notice how the columns of letters are aligned?</tt>
The reader would see:

Here is a sentence using the Teletype tag. Notice how the columns of letters are aligned?

- The underline tag

The and tags are used to defined a region of text which should be displayed with an underline.
Here is an example:

We use the underline tag to emphasize</ul> words or phrases.
The reader would see:

We use the underline tag to emphasize words or phrases.

Character entities

If you've been paying attention, then you've noticed that there are some characters which have a special meaning in HTML. For example, the < character (also called the "left angle bracket", or the "less than" symbol) is used to indicate the beginning of an HTML tag. Likewise, the > character (also called the "right angle bracket, or the "greater than" symbol) is used to indicate the ending of an HTML tag.
You've probably also noticed that the web browser doesn't display what's in between the < and > character, but rather it interprets the text in between and adjusts the displayed page accordingly.

One more thing you may have noticed is that every page in this article contains references to HTML tags. For example, and .

Look carefully at the previous sentence and think about it for a moment. How did we include the and tags without the word "and" being displayed in bold text?

The answer is called "character entities. A character entity is special sequence of characters which represent a single character which would otherwise be difficult to display on the web browser. For example, we can't simply type the tag without the browser switching into bold mode. However, we can use special character entities for the two angle bracket characters, rather than using the real angle bracket characters. The browser will display the angle brackets without interpreting them as the boundaries of an HTML tag.

For example, the character entity for the left angle bracket is <, while the character entity for the right angle bracket is >. An easy way to remember these is that "lt" means "less than", while "gt" means "greater than". So, if we use we can get the browser to display . See?

Character entities always begin with the &, or "ampersand" character. They always end with a ;, or semicolon character. What's in between these two characters determines which character will be displayed by the browser. There are some predefined names for common characters. For characters which do not have a predefined name, you can enter the numerical code for the character (you should rarely need to do this).

Before we list the common character entities, there is one more "special" character entity we should mention -  . This character entity means "non-breaking space". So, why would we need a special character entity for a space character, when we could just as easily type a space? The answer is in the way that the web browser deals with spaces. Normally, it will ignore spaces at the beginning or end of a physical line of text. In addition, it will gather sequential spaces into a single space character. This behavior may not be what you want. You can force the browser to insert any number of spaces by using the   character entity instead of using actual space characters.

Here is the list of common character entities (your browser may not display all of them):

  - Non breaking space.

& - Ampersand, displayed as &

" - Quotation mark, displayed as "

¡ - Inverted exclamation mark, displayed as ¡

¢ - Cent sign, displayed as ¢

£ - Pound sign, displayed as £

¤ - Currency sign, displayed as ¤

¥ - Yen sign, displayed as ¥

¦ - Broken vertical bar, displayed as ¦

§ - Section sign, displayed as §

¨ - Diaeresis, displayed as ¨

© - Copyright sign, displayed as ©

ª - Female ordinal, displayed as ª

« - Left angle double quotation, displayed as «

¬ - Not sign, displayed as ¬

 - Soft hyphen, displayed as

® - Registered sign, displayed as ®

¯ - Macron, displayed as ¯

° - Degree sign, displayed as °

± - Plus-minus sign, displayed as ±

² - Superscripted digit "2", displayed as ²

³ - Superscripted digit "3", displayed as ³

´ - Acute accent, displayed as ´

µ - Micro sign, displayed as µ

¶ - Paragraph (pilcrow) sign, displayed as ¶

· - Middle dot, displayed as ·

¸ - Cedilla, displayed as ¸

¹ - Superscripted digit "1", displayed as ¹

º - Masculine ordinal, displayed as º

» - Right angle double quotation, displayed as »

¼ - One quarter fraction, displayed as ¼

½ - One half fraction, displayed as ½

¾ - Three quarters fraction, displayed as ¾

¿ - Inverted question mark, displayed as ¿

À - Latin capital "A" with grave accent, displayed as À

Á - Latin capital "A" with acute accent, displayed as Á

Â - Latin capital "A" with circumflex, displayed as Â

Ã - Latin capital "A" with tilde, displayed as Ã

Ä - Latin capital "A" with diaeresis, displayed as Ä

Å - Latin capital "A" with ring, displayed as Å

Æ - Latin capital "AE" with ligature, displayed as Æ

Ç - Latin capital "C" with cedilla, displayed as Ç

È - Latin capital "E" with grave accent, displayed as È

É - Latin capital "E" with acute accent, displayed as É

Ê - Latin capital "E" with circumflex, displayed as Ê

Ë - Latin capital "E" with diaeresis, displayed as Ë

Ì - Latin capital "I" with grave accent, displayed as Ì

Í - Latin capital "I" with acute accent, displayed as Í

Î - Latin capital "I" with circumflex, displayed as Î

Ï - Latin capital "I" with diaeresis, displayed as Ï

Ð - Latin capital "ETH", displayed as Ð

Ñ - Latin capital "N" with tilde, displayed as Ñ

Ò - Latin capital "O" with grave accent, displayed as Ò

Ó - Latin capital "O" with acute accent, displayed as Ó

Ô - Latin capital "O" with circumflex, displayed as Ô

Õ - Latin capital "O" with tilde, displayed as Õ

Ö - Latin capital "O" with diaeresis, displayed as Ö

× - Multiplication sign, displayed as ×

Ø - Latin capital "O" with stroke, displayed as Ø

Ù - Latin capital "U" with grave accent, displayed as Ù

Ú - Latin capital "U" with acute accent, displayed as Ú

Û - Latin capital "U" with circumflex, displayed as Û

Ü - Latin capital "U" with diaeresis, displayed as Ü

Ý - Latin capital "Y" with acute accent, displayed as Ú

Þ - Latin capital "THORN", displayed as Þ

ß - Latin small sharp "s", displayed as ß

à - Latin small "a" with grave accent, displayed as à

á - Latin small "a" with acute accent, displayed as á

â - Latin small "a" with circumflex, displayed as â

ã - Latin small "a" with tilde, displayed as ã

ä - Latin small "a" with diaeresis, displayed as ä

å - Latin small "a" with ring, displayed as å

æ - Latin small "ae" with ligature, displayed as æ

ç - Latin small "c" with cedilla, displayed as ç

è - Latin small "e" with grave accent, displayed as è

é - Latin small "e" with acute accent, displayed as é

ê - Latin small "e" with circumflex, displayed as ê

ë - Latin small "e" with diaeresis, displayed as ë

ì - Latin small "i" with grave accent, displayed as ì

í - Latin small "i" with acute accent, displayed as í

î - Latin small "i" with circumflex, displayed as î

ï - Latin small "i" with diaeresis, displayed as ï

ð - Latin small "eth", displayed as ð

ñ - Latin small "n" with tilde, displayed as ñ

ò - Latin small "o" with grave accent, displayed as ò

ó - Latin small "o" with acute accent, displayed as ó

ô - Latin small "o" with circumflex, displayed as ô

õ - Latin small "o" with tilde, displayed as õ

ö - Latin small "o" with diaeresis, displayed as ö

÷ - Division sign, displayed as ÷

ø - Latin small "o" with stroke, displayed as ø

ù - Latin small "u" with grave accent, displayed as ù

ú - Latin small "u" with acute accent, displayed as ú

û - Latin small "u" with circumflex, displayed as û

ü - Latin small "u" with diaeresis, displayed as ü

ý - Latin small "y" with acute accent, displayed as ý

þ - Latin small "thorn", displayed as þ

ÿ - Latin small "y" with diaeresis, displayed as ÿ

There are a number of additional character entities defined, including many which are useful for mathematical equations, plus the entire Greek alphabet. If you need a symbol which is not represented above then you should consult the official HTML reference.

Average:

Your rating: None

Random Articles from All categories

The Force Behind Muhammad

Honoring Nonie Darwish (Videos)

Defeating Defeatism : The End of the Phony War

Search

Navigation

Articles

Taxonomy

Tags