- Feature Links
- Intranet
- Your Project Guide
- Maintaining Your Website
- Basic HTML for Modules
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.
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.