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>, <h3>, <h4>, <h5>, or <h6>: Increasingly smaller sub-headings
Ensure that you include the closing </h1> (or </h2>, </h3>, </h4>, </h5>, or </h6>) 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:[email protected]">Homeland Security</a>
Here are the parts you would use, similar to the hyperlink:
<> 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>Third list item</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>Third list item</li>
</ol>: Closes the bulleted list