Basic HTML for Modules

Hyperlink

<a class="Hyperlink" title="Google Web site" target="_blank" href="http://google.com">Google Web site</a> Here are the parts:

  • <a - opening tag
  • class="Hyperlink" - This tells the system to use the default hyperlink style on the site styles for the link.
  • title="Google Website" - This is the alt tag for the hyperlink
  • target="_blank" - This tells the hyperlink to open in a new window. Leave it out if you want it to open in the same window.
  • href="http://www.google.com" - this is the address for the link.
  • > - VERY IMPORTANT. Make sure you have this after the address, before the displayed text.
  • Google Web site - This is the text that is displayed instead of the address.
  • </a> - This part closes the hyperlink.

Email

<a class="Hyperlink" title="Email Homeland Security" href=mailto:abc@civicplus.com>Homeland Security</a> Here are the parts you would use, similar to the hyperlink:

  • <a - opening tag
  • class="Hyperlink" - This tells the system to use the default style from your site styles
  • title="Email Homeland Security" - alt tag for the hyperlink
  • href=mailto:abc.civicplus.com - email address you are wanting this to go to
  • > - VERY IMPORTANT - Make sure you have this after the address, before the displayed text
  • Homeland Security - Text you want to display
  • </a> - This part closes the hyperlink

Bulleted Lists

If you want to do a bulleted list in any module follow the following steps and use this code around your list: Text text text about whatever the module item is talking about

  • <ul> <-- this tag opens an unordered (bulleted) list.
  • <li>First list item</li> <-- These two tags identify an item that needs a bullet
  • <li>Second list item</li>
  • <li>Etc.</li>
  • </ul> <-- This tag closes the bulleted list

Staff Directory Biographies

When adding a photo AND a bio in the Staff Directory, use this procedure so the text will wrap around the picture.

  • Copy and paste <img src="link" align="right" alt=" alt text" hspace=5> in the bio box before any text.
  • Place the name of the person (or what you want as the alt text) in replacement of alt text
  • Put a picture in the normal way (insert image button, etc.), select the image and hit 'insert selected image'.
  • Copy the '/image' (image path) from the box below the buttons 'Insert Image' and 'Remove Image'.
  • Paste the image path as a replacement for the link.
  • Remove the image from the box by hitting the 'Remove Image' button.
  • Add the biography after this skeleton code and the text will wrap around the image.