CRM Software for Economic Development Organizations
Phone: +1 805 967 1280 | email: sales@outreachsystems.com

How much HTML do I need to know to create a great eCenter site?

HTML, which stands for HyperText Markup Language, provides a way for Web browsers to display information in bold, italics, color, or different font sizes. You can use HTML when customizing your eCenter Web site or creating public notices that display in Neoserra. HTML helps make the text more dynamic and interesting for the reader, and helps emphasize important information.

This FAQ article provides you with some basic HTML instruction. For more detailed information about HTML, we recommend you obtain a copy of “HTML For Dummies”® by Ed Tittel and Steven J. James. This book will give you a great introduction to HTML and provide many more commands than what we have included here.

HTML uses tags to tell a Web browser how to display text. HTML tags must surround a word or phrase that you want to emphasize with color or other formatting options. Tags are enclosed in angle brackets, <like this>. Tags always come as pairs–one to start your formatting and one to end your formatting. The ending tag requires a slash (/), </like this>, to indicate that you are ending the formatting.

For example, if you wanted to include the sentence “The quick brown fox jumped over the lazy dog.” in your public or private notice and you wanted to bold the word “brown” and italicize the word “lazy,” your HTML sentence would look like this:

The quick <b>brown</b> fox jumps over the <i>lazy</i> dog.

When viewed within a browser, it will look like this:

The quick brown fox jumps over the lazy dog.

Here are some common tag pairs that may be helpful when customizing your eCenter Web site:

  • <p></p>. Surrounds text that makes up a paragraph.
  • <b></b>. Surrounds text that you would like to bold.
  • <i></i>. Surrounds text that you would like to italicize.
  • <u></u>. Surrounds text that you would like to underline.
  • <font color="color name"></font>. Surrounds text for which you would like to define a different color.
  • <font size="font size"></font>. Surrounds text for which you would like to define a different font size.
  • <ol></ol>. Surrounds an entire ordered (numbered) list, with <li> and </li> surrounding each item in the list.
  • <ul></ul>. Surrounds an entire unordered (bulleted) list, with <li> and </li> surrounding each item in the list.
  • <a href="link to location"></a>. Surrounds text that you would like to designate as a hypertext reference.

Let's take a closer look at lists. Ordered lists and unordered lists are a bit tricky because they require use of either the <ol></ol> or <ul></ul> tag pairs to enclose the entire list as well as the <li></li> tag pair for each line item. Here is what a numbered list might look like with the <ol></ol> tag pair telling the Web browser to start and end your list, and with the <li></li> tag pair surrounding each numbered item:

<ol>
<li>Fox</li>
<li>Dog</li>
</ol>

Also, the creation of a hypertext link is not completely straightforward and deserves some further explanation. When you want to include a link in your notice, but you want it to be an attractive looking link, you can use the <a href></a> tag pair.

For example, perhaps you want to include a link to the NAICS codes, but the URL is not terribly attractive: http://www.census.gov/epcd/www/naics.html. Instead, you would like the link to display as "2007 NAICS Codes" and when the user clicks on this hypertext link it will take them to the NAICS Web page. Let’s use the <a href></a> tag pair to make this happen:

<a href="http://www.census.gov/epcd/www/naics.html">2007 NAICS Codes</a>

When you are editing the eCenter Direct interface text, you may want to include an image. Image files that are publically accessible on the internet can be included as follows:

<div class="image left" style="width: 542px;">
<img src="http://www.center.edu/myimage.gif" alt="" width="400" height="480" />
</div>



Want more? Browse our extensive list of Neoserra FAQs.