Making Edits & Basic HTML (Editing & HTML)

When you are at your department’s secure site, you will see a bar such as the one below.

  • Edit Draft / Edit (if site is live): This is what you will mostly use. Here you can directly edit the page’s content and make any applicable changes.

  • Revisions: Here you can see who made the last changes on a page, as well as when the changes were made.

  • Panelizer: You will not need this tab.

Editing Drafts

Click on the Edit Draft button and you will be directed to the page editor.

Here you can add your content in two ways:

  1. You can enter your information into the box as is, or

  2. Go into the Source view and edit your content’s HTML by hand.

Note: If copying and pasting content from a Google Doc, or any outside source, you MUST hit the “Remove Source Formatting” button. This will strip the content of any extraneous HTML that may have carried over from the other source.

WYSIWYG Editing

Drupal uses a WYSIWYG format--What You See Is What You Get. With this, you can edit text without having to go into the HTML code. Almost everything you need to format and style text is located on the toolbar above the text box.

  1. Formatting

    Here you can bold, italicize, or remove formatting.

  1. Lists

    Here you can create a bulleted list  or numbered list. The last three     

            options—decrease/increase indent and block quote—are not used.

  1. Copy/Pasting

Either three of these options allow you to copy/paste content from another source. You can bypass this step by pasting directly into the textbox; however, these options remove any outside formatting.

  1. Links

To insert a link, highlight desired text and click on the first button in this box. This screen will appear:

Directly enter the URL you would like to link to OR

Search for existing content on the site.

 

To remove a link: highlight linked text and hit the second button in the WYSIWYG box.

The button with a flag is for creating anchor links. CLA and general web standards are moving away from the use of anchor links.

   5.  Source code

    Hitting this button will take you into the HTML source. This is useful for creating items such as tables, panels, or accordions.

  6. Formatting choices

This is where you can style text into headers.

  7. Styles

    Here you can create panels and call-outs.

   8. Spell check, Images

    If needed, there is a spell check tool.

    Here too, is where you can insert or upload an image. See more on images here.

 

WYSIWYG Advanced

Not every user will have the ability to utilize the WYSIWYG Advanced option. This option allows you to make accordions, as it allows for more advanced HTML.

To switch to WYSIWYG Advanced:

    Beneath the text box is a drop down menu. Click down to choose CLA WYSIWYG Advanced.

    

Basic HTML

HTML stands for Hypertext Markup Language. It consists of tags, which are code offset by <>. Whenever there is an opening tag, there must also be an ending tag. Ending tags are identified by the use of a /.

    Example: <p>Here is an opening and closing tag.</p>

 

While the WYSIWYG feature of Drupal allows you to make simple edits without using HTML, sometimes you need to go into the source code and make changes by hand (such as in accordions). Here is a breakdown of the basic HTML tags you may need:

Formatting

Bold text: <b></b> or <strong></strong>

Italicized text: <i></i> or <em></em>

Paragraphs: <p> </p>

Line break: <br> </br>

The code &nbsp; means non-breaking space; you will not use this, but you may see it if you copy from a Google Doc. This can be deleted.

Headers

All headers are entered as  <h2>, <h3>, or <h4> with the appropriate closing tag.

    Heading 1: available only as a page title; do not enter into markup

    Heading 2: used as the top most hierarchical header within a body of content

    Heading 3: also used for a top-level heading, preferably after an h2 has been used

    Headings 4 and 5 are rarely used, or used as a very last-level subheading, as they

are similar to normal text