HTML Support

As you become more familiar with AcuWeb and adding stories, you may wish to manually insert or adjust various HTML commands within the text area. This list is designed to provide you with a quick reference for the most commonly used HTML commands.

• Links (Hyperlinks)
• Images
• Text Formatting (Italic, Bold, etc.)
• Tables
• Lists (Bulleted, Numbered, Sub-level)

Links

Links, also known as hyperlinks, are used for many purposes on a web site. AcuWeb Updater allows you to set up four (4) different kinds of links:

1. External
2. Internal
3. Object
4. E-mail

The bolded items are the parts that you change.

External

External links point to a web site page that is not on your site.

<a href="http://www.externalwebsite.com" target="_blank" title="An External Website">External Link</a>

Internal

Internal links point to a page that is within your site.

<a href="/yourpage.php" title="AnInternal Link">Internal Link</a>

Object

Object links can point to media files such as graphics, PDFs, word documents, audio and video files.

<a href="/images/uploads/object.pdf" title="Objectopens into a PDF file.">Object Name</a>

E-mail

E-mail links are the most popular links used on a web site.

<a href="mailto:johndoe@yourdomain.com">Contact John Doe</a>

Back to Top

Images

Upload the images you want to use into your Image Library. Then you can copy the image name from the Image Library list and paste into the code below:

<img src="/images/uploads/myphoto.jpg" align="right" width="150" height="150" alt="MyPhoto">

To link an image, use the following code:

<a href="/mylink.php"><img src="/images/uploads/myphoto.jpg" align="right" width="150" height="150" border="0" alt="MyPhoto"></a>

Back to Top

Text Formatting

Bold/Strong

This is an example of <strong>bold</strong> text. OR This is another example of <b>bold</b> text.

This is an example of bold text.

Italics

This is an example of <em>italicized</em> text. OR This is another example of <i>italicized</i> text.

This is an example of italicized text.

Align Text

<div align="left">This is text aligned to the left.</div>

<div align="right">This is text aligned to the right.</div>

<div align="center">This is text aligned in the center.</div>

Available Styles

AcuWeb Updater has many styles available to you for making your story look great. To apply a style to any of your text, use the code below and replace the bold sections with the appropriate style. You can view available styles in the story edit mode next to the story body section.

<span class="text-header">Main Header</span>

Main Header

<span class="text-callout">This is an example of a text callout.</span>

Back to Top

Tables

Tables are very customizable. Just use the code below to start. The comments are indicated like this <!--This is a comment--> and are there for your reference only.

<table width="400" border="1" cellspacing="0" cellpadding="4" summary="This is a description of your table. It is important to use for accessiblity purposes.">
   <caption>This is the title of your table</caption><!--Optional-->
   <tr>
      <th>Header 1</th><!--Use the <th> tag for headers-->
      <th>Header 2</th>
   </tr>
   <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
   </tr>
   <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
   </tr>
</table>

If you want to add additional rows, to the table, use this code in-between the <table></table> tags.

   <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
   </tr>

Back to Top

Lists

There are two kinds of lists you can choose from. They are bulleted lists and numbered lists. You can also have a sub-level list as well.

To add additional items to either one, simply add a <li>This is your text.</li> in-between the <ul></ul> or <ol></ol> tags.

Bulleted List

Use the following code to create a bulleted list.

<ul>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ul>

Example:

• Item one
• Item two
• Item three

Numbered List

Use the following code to create a numbered list.

<ol>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
</ol>

Example:

1. Item one
2. Item two
3. Item three

Sub-level Lists

To have a sub-level embedded within a list, insert the ordered <ol> or unordered <ul> list within a list <li> item.

<ul>
      <li>List item
            <ul>
                  <li>List item</li>
            </ul>
      </li>
      <li>List item</li>
</ul>

Looks like this in your browser:

• List item
  • List item
• List item

Back to Top

Go Back