Editing Articles in HTML - part 1
Submitted by admin on Sat, 10/24/2009 - 12:39
Printer-friendly version
Send to friend
PDF versionThis article discusses how to edit your article using the HTML editing mode.
Previous article in series: Submitting your article
Quick Links
If you've already read the introductory material in this article and just want to skip directly to the documentation for a particular HTML tag you can use the links below. Please note that some of these links will take you to the second part of this two-part article.
<!-- comment --> - The comment tag
<!--pagebreak--> - The pagebreak tag
<a> - The anchor tag
<b> - The bold tag
<blockquote> - The blockquote tag
<br> - The line break tag
<center> - The center tag
<cite> - The cite tag
<code> - The code tag
<em> - The emphasis tag
<font> - The font tag
<h1> through <h6> - The heading tags
<hr> - The horizontal rule tag
<i> - The italic tag
<img> - The image tag
<ol>, <ul>, <li> - The list tags
<p> - The paragraph break tag
<pre> - The preformatted tag
<span> - The span tag
<strike> - The strikethrough tag
<table> - The table tag
<tt> - The teletype tag
<u> - The underline tag
Character entities
Adding links using relative URL's
If you're familiar with HTML then you probably already know that you can use tags to create links to other web content or place images in your text. The <a> or "anchor" tag is used to create a link which the user can click on, and the <img> or "image" tag can be used to place images on a page. Both of these tags require as parameters an internet address in the form of a "uniform resource locator", or "URL".An example of a URL is:
http://www.news.faithfreedom.org/index.phpThis is currently the URL for the main page of the PostNuke site. This is known as a "fully qualified URL" because it contains everything which your web browser needs to know to find the information on the internet. The internet protocol is specified (http:), the address of the domain is specified (www.news.faithfreedom.org), and the specific file on the domain's server is specified (index.php). If you clicked on a link containing this URL then your computer would know how to access and display this file regardless of where the link was placed; on a web page, in an email message, or in a document file.
Because this particular URL refers to a script file (index.php), we can extend it even further by adding additional parameters for the script to interpret and process. For example, the fully qualified URL for the article you are currently reading is:
http://www.news.faithfreedom.org/index.php?name=News&file=article&sid=92There is now a parameter list which begins with a question mark (?), and contains individual parameters separated by ampersands (&). The index.php script will read these parameters to determine what it should do. In this case, it will use the "News" module to display an "article" with the "story ID" of 92.A fully qualified URL is the most consistent and reliable way to specify content in any link you use in your article, which is why the following is going to sound odd: We don't want you to use fully qualified URL's in your articles.
Ok, so why did I spend all of this time explaining how a fully qualified URL is constructed, and why it's the best way to specify a link to internet content, if we don't want you to use them? The answer is because they may not always work.
The truth is that a fully qualified URL may contain too much information which may forever lock your content to a specific location. If you used the example URL given above then your link would certainly work today, but it would not work if we decided to move the PostNuke site from the "news.faithfreedom.org" subdomain to the "faithfreedom.org" domain. Your link would still refer to the "news" subdomain, even though the "index.php" script file would no longer be at that location.
The fact is that your browser doesn't need all of this information, when it can figure out some of it on it's own. For example, if a URL does not contain the protocol (http:) then your browser will simply assume that the protocol is the same as the page the URL was found on. In addition, if a URL does not contain the domain address (www.news.faithfreedom.org) then your browser will assume that the rest of the URL refers to a location and file which relative to the location and file where the URL was found.
In other words:
index.php?name=News&file=article&sid=92contains the same information, and refers to the same script file and article, as:
http://www.news.faithfreedom.org/index.php?name=News&file=article&sid=92So what's the difference? The partial, or "relative" URL will still work correctly, even if the entire web site is moved to another domain. For this reason, we want you to use relative URL's whenever you refer to any other content which is part of the PostNuke site installation, including any scripts which are part of the PostNuke system (like the index.php script), as well as images which are part of the gallery2 image gallery system.
You can easily obtain the relative URL by simply editing out the protocol and domain from the fully qualified URL.
IMPORTANT: When referring to content which is on another web site or another subdomain of faithfreedom.org you MUST use a fully qualified URL. If you don't then your web browser is going to assume that the content is located in the same place as the PostNuke installation, and the URL will not work.
Permitted tags
PostNuke does not permit all possible HTML tags to be used in an article. The administrators also have the ability and authority to further restrict which tags are available for your use. The primary reason for restricting which HTML tags can be used is security. Some HTML tags make it possible to execute malicious code or compromise a visitor's privacy. It's not that the administrators don't trust the FFI authors. It's just that any HTML tag which is made available for the authors to use will also be available for the members to use in their comments.The HTML tags which are currently permitted for use are displayed beneath the "Body text" box:
We'll briefly describe each of the HTML tags which are available, and the proper formatting required for PostNuke. Please be aware that this information may not be 100% complete or 100% accurate, since it is not described in the PostNuke documentation, and had to be collected by trial and error.
HTML tag basics
HTML has been around for a couple of decades, and many changes have been made in the HTML standard over the years. Many new tags were added, and many existing tags were expanded to permit you to do more things with them. Other tags have become "deprecated", and their use is officially discouraged by the HTML standards committee. However, most of the deprecated tags are in such widespread use that they will likely be around for a long time to come. Most of the deprecated tags are fully supported by PostNuke.You might also be interested to note that the latest "official" HTML specification no longer refers to these fundamental building blocks of HTML as "tags", but now refers to them as "elements". Well, outside of the official HTML steering committee (the W3C), the rest of the world still calls them "tags", and I see no reason to change now. This is especially in light of the fact that the W3C committee have developed a whole new representational language for their documentation, requiring anyone who wants to learn HTML to first learn how to read their documentation.
Unlike the W3C committee, I'm not going to try to impress you with my knowledge of HTML, but rather to teach you as much about HTML (especially as it relates to PostNuke) as I currently know. I don't want to obfuscate - I want to illuminate!
However, if you feel a real need to see the "official" documentation, you can find it at http://www.w3.org.
All HTML tags begin with a left angle bracket character - <. All HTML tags end with a right angle bracket character - >. These characters are often referred to as the "less-than" and "greater-than" symbols, since they are used for these purposes in mathematical expressions.
In between the angle brackets will be at least one piece of text which indicates HTML tag type. This has historically been called the "tag name", though the HTML specification now calls this the "element name". The tag name may be as brief as a single letter, or as long as a complete phrase - it just depends on the tag.
Some tags have two forms - an opening tag, and a closing tag. The only difference between the two is that the tag name of the closing tag is preceeded by a slash character ( / ). These tag types are generally used when a region of an HTML document is going to be affected by the formatting specified by the tag.
For example, if you wanted a region of text to appear in bold then you would insert a <b> tag at the location where the bold text is to begin, and a </b> tag where the bold text is to end.
Some tags have either optional or required parameters (called "attributes" in the HTML specification). These parameters consist of a "parameter name", followed by an equal sign (=), and then followed by the "value" of the parameter.
For example:
<font color="red">This is a "font" tag (as indicated by the tag name), and has a single parameter called "color", which has the value "red". This tag would begin a region of text which is colored red.The HTML specification now requires that all parameter values be surrounded in double quote characters ( " ). This was not always the case, and most browsers will accept parameter values which are not surrounded in double quote characters. However, in order for PostNuke to accept an HTML tag you MUST surround parameter values with double quote characters.
Part 2 of this article: Editing articles in HTML - part 2
<!-- comment --> - The Comment Tag
You can embed comments into your HTML articles using the <!-- comment --> tag. The word comment can actually be replaced with just about any text you like.Most of the time, PostNuke will simply ignore whatever is contained in a comment tag, and it will not be displayed to people who are reading your published article. This makes the tag useful for marking specific locations in your article, or inserting notes or reminders to yourself which may be useful when editing your article in the future.
DO NOT use the comment tag to hide "secret" information in your article. Any viewer can use the "View Source" option in their web browser to read the raw HTML tags, and your comments will be fully visible to them.
<!--pagebreak> - A special variation of the comment tag
There is one form of the comment tag which PostNuke WILL interpret - the <!--pagebreak--> tag.When PostNuke encounters a <!--pagebreak--> tag it will stop displaying the article text at that point, and will insert a link at the bottom of the page which the reader can use to continue to the next page. The <!--pagebreak--> tag can be used to divide your article into easy digested pages, making it easier for the user to read and navigate.
Part 2 of this article: Editing articles in HTML - part 2
<a> - The anchor tag
The <a> tag, or "anchor" tag has two uses. First, it can be used to insert a link into your article which the reader can click on to be taken to another location in your article, or another article on the PostNuke site, or even another website entirely. Second, it can be used to mark a specific location in your article which can then be used as the destination of a clickable link. The second form is technically called an "anchor".The anchor tag has an opening and closing form. The opening form is <a>, and the closing form is </a>.
Creating a link
Creating the link with the anchor tag requires that you have two pieces of information; the destination URL where the link will jump to, and something which the user can click on to make the jump. Usually, you will just provide some text for the user to click on, and the web browser will take care of displaying it as a clickable link. However, you could also use an image.Here is an example of a link which will take the user to the index page of the PostNuke site (note the use of a relative URL):
<a href="index.php">Go to home page</a>This would be displayed to the reader as:
Go to home pageLike all HTML tag parameters, you must place the contents of the "href" parameter inside double quotation marks. If you don't do this then PostNuke will reject the tag, and you will see the HTML tag displayed in your article preview as if it were part of the story text.
You can create links to other articles in the PostNuke system by providing all of the appropriate parameters to the "index.php" script. The require parameters will vary, depending on which module is required to display the article. The best way to find the appropriate parameters is to bring up the article (and page, if applicable) that you want to jump to, and then copy the entire URL from the address line of your web browser. You can then paste this into the "href" parameter to the <a> tag. Be sure to remove everything before "index.php" in order to create a relative URL.
The following example would create a link to the second page of the "Prologue" article, which is displayed by the "Sections" module:
<a href="index.php?name=Sections&req=viewarticle&artid=1&page=2">Second page of Prologue</a>This would be displayed to the reader as:
Second page of PrologueYou can create links to other locations in your article (such as footnotes, for example). In order to do this you must use two anchor tags; one for the jump, and one for the destination anchor. Creating destination anchors is described in this next section on this page. To create the link for the jump you just create a URL consisting of the anchor name preceeded by a hash symbol:
See footnote <a href="#footnote1">1</a>.This would be displayed as (don't click on it - it won't jump anywhere...)
See footnote 1Please note that links to anchors, such as the above, will ONLY work if the anchor is on the same page as the link. If you have inserted <!--pagebreak--> tags in your article, and you wish to provide a link to an anchor which is on a different page, then you need to pass the appropriate parameters to the "index.php" script to find the module, article, page, and anchor. This will be difficult since one of the required parameters is the "story ID" or "sid", which you won't know until your article has been submitted. However, the editors can help you out with this. You just substitute the unknown parameter with the text "editor-help", and the editor will insert the appropriate missing parameter for you.
For instance, let's say you wanted to insert a link to an anchor called "myanchor" on page 3 of your article. You could use the following anchor tag:
<a href="index.php?name=News&sid=editor-help&file=article&pageid=3#myanchor">Jump to page 3</a>Obviously, you can't confirm that this link will work properly, but the editor should be able to do this for you. When the editor reviews your submitted article he/she will search the article text for the phrase "editor-help", and will fixup your HTML tags accordingly.
You can also provide links to content on other web sites. To do this you must specify a full qualified URL in the "href" parameter. The following example links to the home page on Yahoo:
<a href="http://www.yahoo.com">Go to Yahoo!</a>This would be displayed to the reader as:
Go to Yahoo!
Creating an anchor
An anchor is simply a form of the <a> tag which provides a location for the destination of a link. Instead of an "href" parameter, you must provide a "name" parameter. The "name" parameter consists of any simple name which is not used for any other anchor on the same page of the same article. However, you are free to re-use the same "name" parameter on different pages of your article.The following provides an anchor called "myanchor":
<a name="myanchor"></a>This example doesn't place anything between the <a> and </a> tags, however, you are free to surround some part of your article with these tags to make that specific part of your article the "anchor". It will not change the way that part of your article is displayed.
When the reader clicks on a link that jumps to an anchor most web browsers will align the displayed page so that the location marked by the anchor is at the top of the browser window. Keep this in mind when determining where to place your anchor tags.
Part 2 of this article: Editing articles in HTML - part 2
<b> - The bold tag
The <b> and </b> tags are used to mark a region of text which should be displayed in a bold font. The <b> tag is straightforward, and requires no parameters.The following example will display only the word "MY" in bold:
This is <b>MY</b> article!This would be displayed to the reader as:
This is MY article!
Part 2 of this article: Editing articles in HTML - part 2
<blockquote> - The blockquote tag
The <blockquote> and </blockquote> tags are used to define a region of your article which should be indented. The amount of indentation is determined by the reader's web browser. Both the left and right portions of the region are indented by the same amount.Each use of a <blockquote> must have a corresponding </blockquote> tag.
The following demonstrates how a single paragraph can be indented from the surrounding text:
John said:
<blockquote>This is my house.</blockquote>
Jane replied:
<blockquote>I see. It's very nice.</blockquote>
John said:This is my house.Jane replied:I see. It's very nice.Note that use of the <blockquote> and </blockquote> tags will force a line and paragraph break.
Multiple levels of indentation are possible:
First level.
<blockquote>
Second level.
<blockquote>
Third level.
</blockquote>
Second level.
</blockquote>
First level.
First level.Note that the original intention of the <blockquote> tag was to provide a means for web authors to cite quotations from other people, and give proper credit for those quotations. For this reason, the official definition of the <blockquote> tag allows for a single parameter called "cite" that specified the URL of the webpage which was being cited. However, most web authors have used the <blockquote> tag for simple indentation, since most web browsers displayed the blocks this way. This has since become the de facto use for the <blockquote> tag, and PostNuke will reject a <blockquote> tag that contains a "cite" parameter.Second level.First level.Third level.Second level.
Part 2 of this article: Editing articles in HTML - part 2
<br> - The line break tag
The <br> tag is used to force a line break in your article text.
First line.<br>Second line.<br>Third line.<br>
First line.
Second line.
Third line.
Part 2 of this article: Editing articles in HTML - part 2
<center> - The center tag
Normally, everything in your article, including text and images, will be aligned along the left edge of the article container box. The <center> and </center> tags are used to define a region of your article which should be displayed centered in the article container box.
<center>Some Text To Center</center>This would be seen by the reader as:
Some Text To Center
Part 2 of this article: Editing articles in HTML - part 2
<cite> - The cite tag
The <cite> and </cite> tags are used to define a region of your article which contains a citation, or a quote which is attributed to someone. In practical use, most web browsers simply render text between a <cite> and </cite> tag in italics, making these tags identical to <i> and </i>.
<cite>This is a citation.</cite>
This is a citation.
Part 2 of this article: Editing articles in HTML - part 2
<code> - The code tag
The <code> and </code> tags are used to define a region of your article which contains an example of program code. The text between the <code> and </code> tags is usually displayed in a monospaced font (i.e., a font where each character is the same width), allowing columns of text to be aligned. Other than the change of font, the <code> doesn't usually have any other effect on the formatting of text on most browsers. It does not force line or paragraph breaks. In fact, you still have to use <br> and <p> tags within a code block in order to force line and paragraph breaks.
<code>The reader would see this as:
ABC | 123<br>
----+----<br>
A | 1<br>
B | 2<br>
C | 3<br>
</code>
You may have noticed the use of the character entity in the above example. This is necessary, in this particular case, because PostNuke will normally ignore leading and trailing spaces in a line of text, and merge multiple spaces within the line into a single space. Specifying the required number of spaces as a character entity will force PostNuke to generate these spaces in the article when it displays them.ABC | 123
----+----
A | 1
B | 2
C | 3
Part 2 of this article: Editing articles in HTML - part 2
<em> - The emphasis tag
The <em> and </em> tags are used to define a region in your article that you want to place emphasis on. With most web browsers, the <em> tag works just like the <i> tag, and simply makes the text appear in italics.
Here is an <em>empasized phrase</em>.The reader would view this as:
Here is an emphasized phrase.
Part 2 of this article: Editing articles in HTML - part 2
<font> - The font tag
The <font> and </font> tags are used to define a region in your article that you want to be displayed with a change in the appearance of the text.The "official" HTML specification defines up to three parameters for the <font> tag. These are:
- color - The color of the displayed text.
- size - The size of the displayed text.
- face - Typeface (i.e., the "font") of the displayed text.
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 For obvious reasons, the text for the "white" color above was not displayed in it's actual color.
I wish I got <font color="green">money</font> for being an FFI author!<br>
I wish I got <font color="#008000">money</font> for being an FFI author!<br>
I wish I got money for being an FFI author!
I wish I got money for being an FFI author!
#RRGGBBEach hexadecimal color value can range from 00 to FF (0 to 255).
Part 2 of this article: Editing articles in HTML - part 2
<h1> through <h6> - The heading tags
The <h1> through <h6> tags are used to specify headings within your articles. For each heading tag there must be a corresponding closing tag containing a slash. All text in between the opening and closing tags is displayed as the heading.
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
Note that the HTML specification does not indicate that particular headings should be displayed centered, bold, underlined, or in different colors. Yet, PostNuke interprets and displays them this way. Keep this in mind when selecting a heading to use.Using a heading will always force both a line and paragraph break.
Part 2 of this article: Editing articles in HTML - part 2
<hr> - The horizontal rule tag
The <hr> tag is used to place horizontal dividing lines, or "rules", in your articles. This can be used to divide a page into sections. For example, this might be useful when writing an article about a discussion to provide a clear division between the comments made by each participant.
- align - This parameter specifies the horizontal alignment of the rule. The value may be "left", "center", or "right". If the align parameter is not specified, then the default alignment is "center". This parameter has no visible effect unless the width of the rule is less than 100%.
- size - This parameter specifies the vertical size of the rule, in pixels. If the size parameter is not specified then the default size is determined by the web browser.
- width - This parameter specifies the width of the rule, as a percentage of the width of the container box. If the width parameter is not specified, then the default width is "100%".
<hr align="right" width="50%" size="5">
With no parameters a horizontal rule would look like:
Note that the <hr> tag forces a line break, but not a paragraph break.
Part 2 of this article: Editing articles in HTML - part 2
<i> - The italic tag
The <i> and </i> tags are used to define regions of text in your article which should be displayed using an italic type face. Italics are commonly used when you want a section of text to stand out from the text which surrounds it. For example, italics are often used when quoting someone else, or when introducing new concepts to the reader.
Shakespeare wrote <i>"To be, or not to be."</i>The reader would see:
Shakespeare wrote "To be, or not to be."
Part 2 of this article: Editing articles in HTML - part 2
<img> - The image tag
The <img> tag is used to embed images into your articles. Images can be linked from other web sites. However, you run the risk of the image in your article disappearing if the file becomes unavailable on the site it was linked from. FFI provides an online gallery which you can use for storing images for use with your articles. Your gallery account information should have been provided to you when you received your authoring privileges on the FFI PostNuke system. If you did not receive a gallery account please contact the admin.The <img> tag has no corresponding closing tag.
Images you link to with the <img> tag should be JPG, GIF, or PNG format.
The <img> tag has one required parameter, and accepts up to three optional parameters.
The required parameter is:
- src - This parameter must specify the URL of the image file. Be sure to read the section about relative URL's on the first page of this article.
The optional parameters are:
- alt - This parameter specifies an alternate text phrase which should be displayed in case the image is not available. Many web browsers also display this phrase if the mouse pointer rests over the image.
- width - This parameter specifies the width of the image, in pixels.
- height - This parameter specifies the height of the image, in pixels.
The HTML specification actually requires the alt parameter. However, PostNuke does not strictly require it, and neither does any modern web browser. For these reasons we have listed it here as optional.
Specifying the width and height of the image will permit the reader's browser to make room for the image before it has finished retrieving it, preventing it from having to rearrange the page after the image has begun loading. It looks more professional if the reader doesn't have to see text and graphics on the page being shuffled around while the page is being rendered by the web browser.
Normally, you will specify the actual width and height of the image. However, you could specify a different value, which would cause the reader's web browser to resize the image to fit the size you specify. Be aware that some web browsers do a really bad job of resizing images, making them grainy and pixelated. It might be better if you used a good quality image processing program and resized the image before uploading it to the gallery.
This is an example of an image from the FFI image gallery (notice that a relative URL is used):
<img src="gallery2/d/27-1/Mo.jpg" alt="Mohammad" width="237" height="350">The reader would see:
Part 2 of this article: Editing articles in HTML - part 2
<ol>, <ul>, and <li> - The list tags
A "list" is a sequence of text items. All text items are indented, and begin with either a number or a bullet. A text item could be as short as a single word, or as long as many paragraphs.An ordered list starts with an <ol> tag and ends with an </ol> tag.
An unordered list starts with an <ul> tag and ends with an </ul> tag.
Here is an example of a simple ordered list:
<ol>
<li>First list item.</li>
<li>Second list item.</li>
<li>Third list item.</li>
</ol>
Notice that the </li> tag forces a line break, but not a paragraph break.Now, the same list items in an unordered list:
<ul>
<li>First list item.</li>
<li>Second list item.</li>
<li>Third list item.</li>
</ul>
Here is an ordered list with another list embedded in the second list item:
<ol>Notice that the </li> tag for the second list item doesn't appear until after the end of the embedded list. This makes the embedded list part of the second list item. The reader would see:
<li>First list item.</li>
<li>Second list item.
<ol>
<li>First embedded list item.</li>
<li>Second embedded list item.</li>
<li>Third embedded list item.</li>
</ol></li>
<li>Third list item.</li>
</ol>
Here is the same embedded lists using unordered lists:
<ul>The reader would see:
<li>First list item.</li>
<li>Second list item.
<ul>
<li>First embedded list item.</li>
<li>Second embedded list item.</li>
<li>Third embedded list item.</li>
</ul></li>
<li>Third list item.</li>
</ul>
Part 2 of this article: Editing articles in HTML - part 2
<p> - The paragraph break tag
The <p> and </p> tags are used to define a region which should be displayed as a paragraph, with an appropriate break between preceeding and following paragraphs.Here is an example of the first format:
<p>This is my first paragraph.</p>The reader would see:
<p>This is my second paragraph.</p>
Here is an example of the second format:
This is my first paragraph.<p>The reader would see:
This is my second paragraph.<p>
This is my first paragraph.You can see that the end result is exactly the same either way.
Part 2 of this article: Editing articles in HTML - part 2
<pre> - The preformatted tag
The <pre> and </pre> tags are used to define a region of tag which is already formatted, and should be displayed as is, without any further interpretation by the web browser.In general, when a web browser is displayed preformatted text it may:
- Leave white space (spaces, tabs, etc.) intact.
- Used a monospace font (all characters the same width).
- Disable automatic word wrapping.
<pre> This is an example of preformatted text.
It will be displayed exactly as entered.
Including all spaces and line breaks.
And in a monospace font.
</pre>
This is an example of preformatted text. It will be displayed exactly as entered. Including all spaces and line breaks. And in a monospace font.
This is the end of part 1 of this article.
Part 2 of this article: Editing articles in HTML - part 2
