Basic HTML for Modules

Hyperlink


<a class="Hyperlink" title="Google Website" target="_blank" href="http://google.com">Google Website</a>

Here are the parts:
  • <a - This is the opening of the HTML tag.
  • class="Hyperlink" - This tells the system to use the site's default hyperlink style when displaying the link.
  • title="Google Website" - This is the title of the hyperlink. For accessibility reasons, it should be the same as the text of the link.
  • 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.
  • > - This bracket ends the first part of the tag and is very important. Make sure you have this after the address, but before the text you want to link.
  • Google Website - This is the text that is actually displayed on the page - the text you would like to show up as a link.
  • </a> - This part closes the hyperlink.

Email


<a class="Hyperlink" title="Email Homeland Security" href=mailto:abc@civicplus.com</a>

Here are the parts you would use, similar to the hyperlink:
  • <a - This is the opening of the HTML tag.
  • class="Hyperlink" - This tells the system to use the site's default hyperlink style when displaying the link.
  • title="Email Homeland Security" - This is the title of the hyperlink. For accessibility reasons, it should be the same as the text of the link.
  • href=mailto:abc@civicplus.com - This portion specifies the email address you want to link to. You can see that the actual email address portion comes after the mailto: part of the HTML.
  • > - This bracket ends the first part of the tag and is very important. Make sure you have this after the email address, but before the text you want to link.
  • Homeland Security - This is the text that is actually displayed on the page - the text you would like to show up as a link.
  • </a> - This part closes the hyperlink.

Bulleted Lists


What the HTML Looks Like


The following animals are scary:
<ul>
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ul>

What the Result Looks Like


The following animals are scary:
  • Lions
  • Tigers
  • Bears

Breakdown of the Tags Used to Create a List


  • <ul> - This stands for unordered list. This begins the list.
  • <li> - This stands for list item. This opening tag comes before the text you'd like to display as a list item.
  • </li> - This is the closing tag for your list item.
  • </ul> - This is the closing tag for an unordered list. This ends the 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 class=simpleborder alt=" alt" src="link"> 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. This is very important for site accessibility reasons.
  • 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.