CMS and HTML Tips
Tips for managing your content
- Keep your content up-to-date: use expiration notifications to remind you when to update your content.
- Make sure your content is readable: copy and paste text from Microsoft Word into notepad or word pad and then into the WYSIWYG (What You See is What You Get) editor to remove unnecessary HTML. Don’t copy and paste your text from Microsoft Word into the WYSIWYG editor.
- Allow your visitors to see your site: set permissions to allow the public to read only to allow visitors to your site.
- Publish content when it’s ready: to restrict access in order to proof and edit, set permissions to do not share with public.
- Keep your formatting consistent: use h1, h2, or h3 for styled text. Do not change the font type, color, or size of your text. Font formatting is determined by your site’s CSS (cascading style sheet).
- Call out the important information: use bold or italics for emphasis. Underlined text is reserved for links.
- Protect your work: save your changes often when working in the WYSIWYG editor. It may freeze if interrupted by your screensaver or other applications.
- Help visitors find things easily: name your pages, files, and images concisely but descriptively.
- Maintain the architecture of your site: to add or remove pages, contact Publications. Otherwise, you may break your site.
- Use quality images: Optimize images for the Web in Adobe Photoshop before uploading them into the CMS.
Naming Conventions
Naming conventions provide structure for Web pages and content, and support file management and organization. As well as ensuring a good user experience, consistently named Web pages, files, and images make maintenance and updates easier to perform.
Tips
- Do consider how filenames will appear to users once they're published:
- Do use meaningful but concise names.
- Do name files in lowercase, with no spaces or special characters in the file name. Use hyphens or underscores to separate words.
- Don't use special characters (%, &, +), punctuation, or spaces.
- Don't use confusing abbreviations.
Special Characters
Commonly Used Special Characters
To display different text styles, accented letters, and other characters, you must insert the correct encoding in your HTML. Below is a short list of special characters you may commonly use on your website. For a comprehensive list of special characters, visit www.avenue-it.com/html/symbols.html.
| Encoding | Glyph | Description |
| “ | “ | Left Curly Quote |
| ” | ” | Right Curly Quote |
| ’ | ’ | Right Single Quote/Apostrophe |
| — | — | Em Dash |
| – | – | En Dash |
| $ | $ | US Dollar Sign |
| & | & | Ampersand |
| ? | ? | Question Mark |
| á | á | Accute A |
| é | é | Accute E |
| Á | Á | Accute A |
| É | É | Accute E |
| ã | ã | Tilde |
HTML "Cheat Sheet"
Text Tags
Note: Do not insert tags to change font style, size, color, etc. These elements are determined by the style sheet and will occur automatically. The text tags below are for creating headlines and emphasis. Note: header tags may vary in style and size based on the template your site is in.
| <h2></h2> | Creates the largest header/page header |
| <h3></h3> | Creates sectional header |
| <h4></h4> | Creates a header within a section |
<em></em> Emphasizes a word (italic)
<strong></strong> Emphasizes a word (bold)
Links
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
Formatting
<p></p> Creates a new paragraph
<br /> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<ol></ol> Creates a numbered list
<li></li> Precedes each list item, and adds a number
<ul></ul> Creates a bulleted list
<img src="name"> Adds an image
For a more comprehensive list of HTML tags, please visit www.w3schools.com or www.webmonkey.com/reference/HTML_Cheatsheet.
Commonly Used DIV Classes
Dotted line (Gray)
<div class="dotted"></div>
Dotted line (Blue)
<div class="dotted-blue"></div>
Date font style
<div class="date">January, 1, 2010</a>
Sidebar Boxes
For additional documentation on creating sidebar microcontent "boxes," see this Knowledge Base item.
Document Download
<a href="#" class="document">Download this document (PDF, 24KB)</a>
Download this document (PDF, 24KB)