FAQ: How do I prepare content for the Saga content management system?

Following are some best practices and recommendations for preparing content for the Saga content management system.

Well-Formed HTML | Styles | Cut & Paste | HTML Tags

Don't be afraid to experiment...but before you fiddle too much with a complex page, we recommend toggling to the HTML Source view, copying the whole page and pasting it in your favorite text editor (eg, Windows Notepad, Mac TextEdit) to save a clean copy in case you need to go back to where you started.

Well-Formed HTML: Keeping Your Code Clean

All HTML in Saga content items should be well formed, eg:

  • tags should be nested correctly
  • all tags should be lowercase (eg, <a> not <A>)
  • all tag parameters should be lowercase in double quotemarks (eg, parameter="value")
  • all tags with end tags should have them (eg, </p>, </li>, etc)
  • all tags without end tags should be properly closed (eg, <br />, <img />, etc)

If you use Saga's WYSIWYG feature to enter HTML, it should be well-formed automatically. You can use the HTML Tidy button in the WYSIWYG toolbar (it looks like a pushbroom) in either the WYSIWYG view or the HTML Source view to make your code well-formed. Toggling to the HTML Source view from the WYSIWYG view automatically applies HTML Tidy to your code.

When you preview or save a content item, Saga will scan for any badly-formed HTML code and attempt to clean it up. If Saga finds badly-formed code, you may receive an error (eg, "Invalid or missing body"); previewing your item again may not generate the same error because Saga has cleaned up any badly-formed HTML it found. If you want to see what is going on with your code, toggle to the HTML Source view.

Styles: Making Your Page Pretty

Local Styles

You can apply local "in-line" HTML styles within individual Saga content items on any allowed tag, eg:

<h1 style="color:red;">this headline would be red</h1>

In general however, we discourage local styles in order to maintain a consistent look and feel across a Saga site using the site's global CSS stylesheet. Also, if you refrain from adding local styles to individual pages, you can easily change the look of your whole site by changing its global stylesheet rather than manually changing individual pages.

Global Styles

A Saga site's styles are set using one or more global cascading stylesheets that set site-wide styles for all basic HTML tags. Accordingly, if you enter a plain <h1> tag on your site, it will display using whatever style is defined for <h1> tags in the site's global stylesheet(s). Changing the look of every <h1> tag on your site is as easy as changing the <h1> style definition in the stylesheet(s). The same is true for all other basic HTML tags used without style parameters.

We recommend you keep your pages as simple as possible to take advantage of the power of global styles. Define local styles sparingly and only when you need to make a small section of content look unique from the rest of your site. If you find yourself making a lot of similar local styles, consider making some changes to your site's global stylesheet(s).

Cut & Paste: Importing Content into Saga

It is a great idea to bring already composed content into Saga. Unfortunately, bringing already formatted content into Saga and having it look good in your site requires some extra workımostly to remove formatting added by other programs.

Copy & Paste HTML

Highlighting and copying material from another webpage you are browsing and pasting into Saga's WYSIWYG view actually pastes the original HTML code into Saga. This can work well as long as the original HTML code is simple and does not include local styles (see above). You may have to toggle to HTML Source view in Saga and clean up the HTML to simplify it for your site.

Similarly, you can copy raw HTML code from another program, and then toggle to Saga's HTML Source view before pasting. Again, you may need to clean up the original HTML to simplify it for your site.

We do not recommend using programs like MS Word to create HTML from text documents for use in Saga. Typically, these programs create highly complex HTML code in an attempt to preserve the original text documents formatting exactly. Such complex HTML will not look good on your Saga site.

Copy & Paste Wordprocessed Text

You can copy text from documents made in wordprocessing programs (like MS Word, but follow similar practices for other programs) and paste it into Saga, but we recommend the following steps to ensure you produce clean code:

  1. Save your MS Word document as a plain text file (Windows users: choose "Allow character substitution" in the File Conversion dialog box to replace special characters).
  2. Close the document and open again in your word processing program to make sure it is now plain text, or open it in a text editor (like Windows Notepad or Mac TextEdit).
  3. Either copy individual paragraphs and paste them into Saga's WYSIWYG view;
    or
    copy the entire file and paste into Saga's WYSIWYG view, but be aware that the text will be formatted as a single, long paragraph with double line breaks between paragraphs, so it can sometimes be more difficult to use the WYSIWYG tools to format the text exactly as you want;
    or
    copy the entire file and paste it into Saga's HTML Source view and manually add the HTML tags you want to format the content before you switch back to WYSIWYG view (tip: just add all the starting tags, then use the HTML Tidy button to automatically add proper end tags).

Basic HTML Tags

Following is example text showing the effects of some basic HTML tags with default Saga styles (ie, type styles may look different on your Saga site).

<h1-6> Tags

Heading tags establish a hierarchical structure for your document. Do not use heading tags just to change the size of text. Instead, use heading tags to organize your content: an <h1> for the main heading for the page, <h2> tags for subsections, <h3> tags for sections within the subsections, and so on.

Note: most Saga sites display event, news, and profile title fields and FAQ question fields as <h1> tags, so you may want to start organizing the bodies of such Saga content items using <h2> tags.

H1 header

H2 header

H3 header

H4 header

H5 header

H6 header

<p> <a> <i> <em> <b> <strong> Tags

A paragraph with an anchor tag, italics, emphasis, bold and strong. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<blockquote> Tags

Blockquote tags indent what they contain. Other HTML tags can be contained within blockquote tags. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<hr> Tags

Horizontal rule tags display a horizontal line across the page.

<table> Tags

table header table header
table cell table cell

<ul> Tags

  • unordered list
  • unordered list
  • unordered list

<ol> Tags

  1. ordered list
  2. ordered list
  3. ordered list