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.
Click on the Edit Draft button and you will be directed to the page editor.
Here you can add your content in two ways:
You can enter your information into the box as is, or
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.
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.
Here you can bold, italicize, or remove formatting.
Here you can create a bulleted list or numbered list. The last three
options—decrease/increase indent and block quote—are not used.
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.
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
6. Formatting choices
This is where you can style text into headers.
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.
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.
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:
Bold text: <b></b> or <strong></strong>
Italicized text: <i></i> or <em></em>
Paragraphs: <p> </p>
Line break: <br> </br>
The code 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.
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