Santa Clara University

Web Publishing @ SCU

CommonSpot Elements

Rich Text Editor: HTML Snippets

The Rich Text Editor includes a menu option called "HTML Snippets".

CommonSpot HTML Snippets

These are small blocks of HTML code that can be dropped into a page to create headings, floating tables for images and captions, and pull quote blocks. These snippets were created in order to make it possible to include headings, an important structural HTML component not otherwise presented in the editor, and small tables for images and pull-quotes that would be possible, but tricky, to build using the editor's interface.

Headings

HTML documents can be structured using heading tags. These tags are interpreted by the Web browser as defining the hierarchy and order of content within a page. There are six HTML heading tags, H1 is the highest level. The HTML snippets menu lists headings 3, 4, 5, and 6 for use within the content well. (Headings 1 and 2 are used within the site template).

Heading 3

Heading 4

Heading 5
Heading 6


The SCU Web site's global style sheet includes font size and color formatting attributes for each of the heading tags, which helps to ensure a standard look-and-feel across all sites.

Floating Image and Caption tables

To insert one of these snippets into a page, hit the enter key to create a paragraph break, then select the left- or right-aligned image/caption snippet.

Left-aligned
sample image
caption


 

 

 
 
Right-aligned
sample image
caption


 

 

 

Pull Quote

This HTML snippet is a right-aligned table that includes special formatting class assignments for the quotation and citation table cells:

"Quotation pulled from page content."
-Citation


 

 

Features - Content Well and Right Column

The "features" snippets can be used to apply special formatting to content in the main content well or right column:

small placeholder image
If no image is available, delete this column.

Title (heading 4)

Subtitle (heading 5)

By default, the content well feature uses teal background and border color settings. To change the color format to yellow or blue, switch to Author mode and right-click in each table cell. Select "cell properties", and change the Style Class settings.

If the feature does not include an image, the left column should be deleted. (Right-click in the left column, then select "Delete Columns") Otherwise, select a new image from the Image Gallery and delete this text.

Add link to additional content, if needed go



Title (heading 5)
small placeholder image
Subtitle (heading 6)

By default, the right column feature uses yellow background and border color settings. To change the color format to teal or blue, switch to Author mode and right-click in each table cell. Select "cell properties", and modify the Style Class settings.

Select or upload a new image using the Image Gallery, or delete the placeholder image.

Add link to additional content, if needed go

Related Links

Related links allow you to call special attention to important links within your site that might not be represented by a left navigation item.

Related links
Link Name Go Link URL or Description


Printer-friendly format