This article details basic HTML that may 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
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" : The 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
- Note: The type attribute of the <ol> tag, defines the type of the list item marker.
- <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
Feedback About the Article
Let us know what was helpful or not helpful about the article below.0 comments
Please sign in to leave a comment.