Editing Basics

Using HTML

HyperText Markup Language (HTML) is the language used to present information via the web editor. The Expression Engine content management system (CMS) allows you to edit web pages without having to know HTML. However some fundamentals will help you manage your pages more fluently.

HTML operates on a principle of tagging. Every grouping of content must be marked with tags, and each must have both an opening tag and a closing tag.

  1. Example: <p>This is a paragraph of text.</p>
  2. Another Example: <li>This is an item in a list.</li>

In HTML, there is a standard set of tag types: paragraphs (<p></p>), lists (<li></li>), bold (<strong></strong>, italics (<em></em>), etc.

A CSS (Cascading Style Sheets) file of formatting-style rules, linked to a website, determines how the tags will render the a website page's content in a web browser. For example, if the CSS specifies that <p></p> content display in 12-pixel type, each paragraph on the website will render at that size in a browser.

Because the CED website has a CSS file specifying many aspects of the CED website's formatting, hand-coded formatting done in HTML in the CMS editor may not work. The CSS rules override hand-coding in many circumstances. The purpose for this is to keep formatting consistent across the website. Hand-coding should be done minimally or (ideally) not at all.

Principle Hex colors for website

  • Red - #df1c1a
  • Green - #328e17
  • Blue - #2884a3
  • Yellow - #ebb444

CMS Editor Icons

Many of the CSS styles are actually available at the styleguide page

  • Image Templates
  • Character Formatting:
    • Bold
    • Italics
    • Underscore
    • Strikethrough
  • Lists:
    • Numbered ("ordered")
    • Bulleted ("unordered")
  • Subscript/Superscript
  • Blockquote
  • Paste
    • Paste as Plain Text
    • Paste from Word
  • Remove Format
  • Link
  • Anchor
  • Undo/Redo
  • Source (Switches between screen and HTML view)
  • "Styles" Format (these are your H tags)
  • Paragraph "Format"
  • Maximize
  • Show Blocks
  • Image
  • Table
  • Horizontal Line

Heading Appearance

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6