Fundamental HTML Codes for use with NetForum Some of the codes shown here are specifically noted as NOT being recommended for use with NetForum. Please respect that notation and understand that they are demonstrated here to further develop your knowledge of HTML coding. Keep in mind that everyone will see if you ignored this warning, so do pay attention to them!
When you are putting text into HTML, you will eventually want to add a "paragraph break". This is the blank line that separates one paragraph from another--like this.The code for a paragraph break is:
<p>Most students can successfully use NetForum for an entire average ETL course by knowing only this HTML code! Everything else beyond this point is "added value" information.
If you don't want a blank line between sections of text, but you want to force the text to start on the next line (like this),
you would use this code:<br>
You may have noticed that I am separating each of these code explanations with a horizontal line that goes from almost one side of the page to the other. You can put one of those into your text by adding this HTML code:
<hr>
Want to list some items, and want those items to be numbered? It's a little more complicated to do, but not that bad. Here's what an ORDERED LIST looks like on a Web page...
- this is an ordered list
- it divides up things by line
- and it numbers each element
...and here's what it looks like in HTML Code:
<ol> <li> this is an ordered list <li> it divides up things by line <li> and it numbers each element </ol>A variation of this is the UNordered list. It puts the items into a "bullet list", like this:
- this is an unordered list
- it divides up things by line
- and it "bullets" each element
...and here's what it looks like in HTML Code:
<ul> <li> this is an unordered list <li> it divides up things by line <li> and it "bullets" each element </ul>
This next HTML code will link this page to another site with the word "LINK". This particular link goes to a site that will show you a color chart that gives you the 6-digit codes for indicating different basic colors in an HTML document. An even fancier color chart can be seen by clicking HERE (my thanks to Brian Hall, and associates, for sharing this very useful Web tool).
The HTML code that you would use for making the first link happen is:
<a href="http://gwu.edu/~brobie/color.htm">"LINK"</a>You will naturally see that the URL ("http://...") must be changed to the full URL of your own desired site in order for it to go there, and the word "LINK" may be changed to anything you want (even an HTML code for an image, if the image is to be the "hot link"). Remember that ALL elements of the rest of the html code must be duplicated exactly!
This shows an image at its original size and centered to the page. This may be an early ETL student...hard at work:
![]()
The codes being used look like the following (note that the pair of center codes can be used for text, as well as images).
<center> <img src="http://www.gwu.edu/~etltech/images/book.jpg"> </center>Note that the image being displayed here is located on another Web site. If you want to display an image in NetForum, it must first be loaded to a Web site somewhere. BE VERY CAREFUL about displaying images directly on NetForum because they can slow down the whole forum for everyone. Before using this feature, first clear it with your Instructor and etltech. They may feel that your illustration is worth the potential risk.
A better way to make a file available is to link it to the page using the link technique shown previously. In that case, you would link to The Book by using:
<a href="http://www.gwu.edu/~etltech/images/book.jpg">"THE BOOK"</a>
This will show an image and center it, but it will also force the size of that image to display at 70 pixels high and 50 pixels wide
![]()
Here's how the HTML codes look when you add the height and width elements:
<center><img src="http://www.gwu.edu/~etltech/images/book.jpg" height="70" width="50"> </center>Again, it is a much better idea to LINK an image to netForum than to display it directly on the page.
Here are some more HTML codes and examples of how they will look on your Website:
This puts text into bold
In HTML code, it looks like:<b>bold</b>This puts text into italics
In HTML code, it looks like:<i>italics</i>These are ways to change FONT SIZE:
FONT
In HTML code, it looks like:<font size="1">FONT</font>As a general rule, you should not use fonts larger than size "4" on NetForum!.
FONT
In HTML code, it looks like:<font size="3">FONT</font>FONT
In HTML code, it looks like:<font size="5">FONT</font>FONT
In HTML code, it looks like:<font size="6">FONT</font>
And ways to change FONT COLOR:
FONT
In HTML code, it looks like:<font color="ff0000">FONT</font>FONT
In HTML code, it looks like:<font color="00ff00">FONT</font>FONT
In HTML code, it looks like:<font color="0000ff">FONT</font>
And also ways to change the FONT "FACE" (Style):
Helvetica Font, size 8
In HTML code, it looks like:<font face="helvetica" size="8">Helvetica Font, size 8</font>Avant Garde, size 6
In HTML code, it looks like:<font face="avant garde" size="6">Avant Garde, size 6</font>Tahoma Font, size 10
In HTML code, it looks like:<font face="tahoma" size="10">Tahoma Font, size 10</font>
These font codes can be combined:
Times Roman Font, size 8, color code #FF00FF
In HTML code, it looks like:<font face="times roman" size="8" color="FF00FF"> Times Roman Font, size 8, color code #FF00FF </font>
Finally, this is how to put a "mail to" link in. This one goes to Bill Robie (etltech).
In HTML code, it looks like:<a href="mailto:etltech@gwu.edu">
CLICK HERE to return to the "How NetForum Works" document.
CLICK HERE to return to the Step Three document.