Technical Assistance & Support


 





Helpful Basic HTML

Overview

This article show basic HTML that may be help you use your CivicPlus products.

Headings

Headings and subheadings are useful for sectioning off parts of your page and text.

  • <h1>: Primary header
  • <h2> or <h3> or etc: Increasingly smaller sub-headings

Ensure that you include the closing </h1> (or </h2>, </h3>, etc) tag to mark the end of the header/subheader text.

Paragraph Tags

<p> is a paragraph tag. Use this tag to mark text that should be within one paragraph. Ensure that you include the closing </p> tag to mark the end of the paragraph. 

Break Tags

<br> marks a break in text and starts the text after that tag as being on another line. You do not need to include a closing tag. 

Bold

If you want to bold text, use the <strong> and </strong> opening and closing tags. 

Hyperlink

Example: <a class="Hyperlink" title="Google website" href="http://google.com">Google website</a>

Here are the parts:

  • <a : Opening tag
  • class="Hyperlink" : Tells the system to use the default hyperlink style on the site styles for the link
  • title="Google website" : Alt-tag for the hyperlink
  • href="http://www.google.com" : Link address
  • > : Make sure you have this after the address, before the displayed text
  • Google website : Text you want to display
  • </a> : Closes the hyperlink

Email

Example: <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" : Tells the system to use the default style from your site styles
  • title="Email Homeland Security" : Alt-tag for the hyperlink; important for ADA
  • href="mailto:abc.civicplus.com" : Email address you want to direct to 
  • > : Make sure you have this after the address, before the displayed text
  • Homeland Security : Text you want to display
  • </a> : Closes the hyperlink

Bulleted Lists

If you want to create a bulleted list in any module, use this code around your list.

  • <ul> : Opens an unordered (bulleted) list
  • <li>First list item</li> : Identifies an item that needs a bullet
  • <li>Second list item</li>
  • <li>Etc.</li>
  • </ul> : Closes the bulleted list

Numbered/Alphanumeric Lists

If you want to create a numbered or alphanumeric (alphabetical) list in any module, use this code around your list:

  • <ol> : Opens a numbered list
    • Note: The type attribute of the <ol> tag, defines the type of the list item marker.
      • Example: <ol type="1">
    • Types: 
      • type="1":Numbers (default)
      • type="A":Uppercase letters
      • type="a":Lowercase letters
      • type="I":Uppercase roman numbers
      • type="i":Lowercase roman numbers
  • <li>First list item</li> : Identifies an item that needs a bullet
  • <li>Second list item</li>
  • <li>Etc.</li>
  • </ol> : Closes the bulleted list



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback