Screen shot showing the HTML Editor window, with typical HTML code

Intro to Editing HTML

What is HTML?

HTML is an abbreviation for Hypertext Markup Language.

  • Hypertext: a text (document, or web page) in which some of the text has clickable links to other, related documents or pages.
  • Markup Language: a system for marking up or annotating a text or page, e.g., to create the aforementioned links in hypertext pages, or to add images or formatting (bold, italic, etc.).

More simply, it is the language in which web pages are created. Without HTML, all web pages would appear as one long block of plain text, with no images, formatting, or line breaks.

Despite being called a "language", it is not a programming language per se, and is in fact much simpler to learn and understand.

Why you would want to edit HTML

Most of the time when editing a page in Cascade, you can simply use the WYSIWYG (What You See Is What You Get) page editor to attain the results you want.

Occasionally, however, it is helpful to be able to "tweak" the HTML by hand, to fine-tune the HTML code and make your page appear as you wish it to. For example, some special styles such as accordion sections are easier to trouble-shoot in HTML rather than in the WYSIWYG editor.

HTML basic concepts

All web pages are, at their core, just plain text files. Contained within that text file is the content (the words that appear on the screen) and the HTML code that tells the web browser how to display that content (e.g., "make this text a headline", "make that text italic", "make this text an underlined blue link that takes you to another page", "insert an image here"). The HTML codes used to accomplish this are more commonly called elements or tags.

In order to separate the HTML tags (instructions) from the text (content), all HTML tags are positioned between two angle brackets <>, like so:

<p>Hello World</p>

The <p> tag is called a paragraph tag, and indicates the start of a new line of text on screen. The </p> tag is the close paragraph tag, and indicates the end of that block of text on the screen. Almost all HTML tags come in pairs, with the closing tag being similar to the opening tag, with a forward slash "/" added. Here are some examples. Notice how the opening and closing tags are identical except for the slash:

  • <p>Paragraph tag encloses all manner of text displayed on the screen.</p>
  • The <strong>strong tag</strong> creates bolded text.
  • The <em>emphasis tag</em> creates italicized text.

Almost all tags come in pairs, an opening and a closing tag. Tags can be nested inside each other, e.g., you can have a text that is both bold and italic by coding it so:

Screenshot showing HTML for nested tags

Note that the order in which the tags are closed is the reverse order in which they were opened-- since the <em> tag was added last to the above text, it has to be closed first.

Tag Attributes

Although close tags always consist of just the base tag with a slash after the first angle bracket, the opening tag may have additional attributes, which modify the appearance or functionality of that tag. Attributes usually take the form of attribute="value"

One of the more common attributes is class, which applies a pre-defined style to the tag. Select the text you wish to apply the style to, then select the appropriate style from the Styles drop-down menu:

Screenshot of the Cascade WYSIWYG editor, with the Styles drop-down menu outlined, showing where the blueButton style is located.

So, for example, applying the blueButton style will insert the class="blueButton" attribute into the paragraph code:

<p class='blueButton'>Use Button!</p>

The style blueButton is defined in the Cascade system to turn the text so tagged into a button, like so:

Use Button!

How to edit HTML in Cascade

To begin, click the "Edit HTML Source" button at the far right-hand side of the editor toolbar:

screenshot of editor menu bar, showing location of HTML button on the right hand side of the second row of buttons

This opens a pop-up window displaying the HTML code:

screenshot of HTML Editing window, filled with typical HTML code

You can edit the text in this window. Note that the HTML editor attempts to be helpful-- if you type in an opening paragraph tag, <p>, it will immediately add a closing tag </p> after your cursor; this can be useful if you are adding text in the HTML editor. But it can be annoying if you are just trying to add a tag to the start and end of a block of already existing text.

When finished editing the HTML, click Insert.

When you Submit your edits to Cascade, it runs a program called HTML Tidy which will attempt identify and fix any errors you may have introduced into the HTML code during your manual editing.


Common editing scenarios

Instances where you might wish to edit HTML directly:

Image caption

Left or right aligned images can also have a caption that sits under the image and has a slightly different style from regular paragraph text. This process is very similar to aligning the image.

  • Write a paragraph directly underneath your image.
  • Select the paragraph so it is highlighted.
  • In the Styles drop down menu choose leftCaption or rightCaption.
  • In order to get your caption to line up with the image they must be the same width. Click the HTML icon to edit the source code.
  • Find the paragraph that is going to become your caption. It should look something like:
    <p class="leftCaption">Here is my caption text.</p>
  • If your image is 250px wide then your caption should be the same. Add the following text to your paragraph:
    <p class="leftCaption" style="width: 250px;">Here is my caption text.</p>

Result:

Screenshot showing the result of applying leftCaption style to the paragraph text following an image, as demonstrated in the previous image screenshot.

Accordion text

You can apply accordion style to text to make a longer document more compact (see Applying the Accordion Style). However, if you have more than one paragraph in the accordionContent section, you will need to edit the HTML to make it work properly; instead of multiple <p>aragraphs each with class="accordionContent", you need to enclose all the associated <p>'s in a container <div> with class="accordionContent":

screenshot of the HTML edit screen with accordionContent divs highlighted

Clearing a float

When you insert an image and apply a style of imageLeft or imageRight to it, you're applying a "float" to it, which causes subsequent text and images to wrap around it. This can be useful if the image is surrounded by a lot of text, but the results can be odd if you have a lot of smaller images; they will "pile up" and staircase across the page:

Random face 1

Some text after the image...

Random face 2

Some text after the image...

Random face 3

Some text after the image...

Random face 4

Some text after the image...

The solution is to edit the HTML and "clear" the float, by inserting the following HTML code before each image:

<div class="clear"></div>

like so:

<img alt="" class="leftImage" src="/_files/images/iammiami/tiles/2.png" height="160" width="160" />
<p>Some text after the image...</p>
<div class="clear"></div>
<img alt="" class="leftImage" src="/_files/images/iammiami/tiles/3.png" height="160" width="160" />

which will give you this:

Random face 1

Some text after the image...

Random face 2

Some text after the image...

Random face 3

Some text after the image...

Random face 4

Some text after the image...

Embed an iframe manually

An iframe is a small section of another web site embedded in your web page– the most common examples are a YouTube video, or a live Google map on your page.

In most cases, if you wish to insert an iframe you can successfully use the Insert/Edit Embedded Media button:  screenshot of the editor menu bar, showing the Insert/Edit Embedded Media button highlighted

 screenshot of the embed media dialog box. Select iframe from the first drop-down menu, then enter the appropriate URL into the File/URL text entry box. Enter desired dimensions in pixels high and wide. The bottom of the dialog box will show a preview of the content being embedded.

If you wish to have more control over your iframe, such as wishing to paste in code from elsewhere directly, you'll need to paste that code in using HTML edit view.

Common HTML Tags

<p></p> Paragraph

<div></div> Div - a way of dividing up a page into sections, without necessarily being in paragraph form (with line spaces between blocks), or for images only (no text).

<a href="..."></a> Link or Anchor, with the ... being replaced by a URL, such as http://www.google.com or http://www.miamioh.edu.

<strong></strong> Strong (bold)

<em></em> Emphasis (italics)

The following are "Empty" Tags (that is, unlike most tags, they have no close tag):

<img src="..." /> Image, with the ... being replaced by a URL to an image file

<br /> Line break-- begins a new line, but without extra space between the lines as a paragraph <p></p> tag does.

<hr /> Horizontal Rule - draws a line across the screen, dividing sections

Common stumbling blocks

  • Not closing a tag. If you forget to include the closing element on a paired tag, i.e., the </p> after the <p>, odd things can happen, as different sections of text merge together in unintended ways.
  • Not including the close angle bracket Similarly, entering a tag as <p or <p. instead of <p> will cause all sorts of havoc.
  • Improperly nested tags. Tags need to be nested so that the first one opened is the last one closed, i.e., <tag1><tag2><tag3>text</tag3></tag2></tag1>. Sometimes web browsers can cope with closing tags that are in the wrong sequence, sometimes not. If things look odd on a section of a page where you've nested tags, double-check the ordering.
  • Missing close-quotes on attributes. When adding an attribute by hand to a tag, remember that it has the format of attribute="value". Forgetting one or both quotes on the value (e.g., <div style="clear:both;> can make large chunks of subsequent text seemingly vanish, as the browser takes all the following text to be part of the attribute's value.

To learn more