7.1. Working with HTML Components

This section describes how to work with HTML components in Studio.

7.1.1. HTML Component Overview

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. Web browsers present HTML code in a more readable format.

When students see text and images in your course, they are seeing HTML code that is formatted and presented by their browsers. For more information about HTML, see Wikipedia.

7.1.1.1. HTML Components

HTML components are the basic building blocks of your course content. You use HTML components to add and format text, links, images, and more. You can choose to create HTML components directly in HTML code, or in a visual editor that hides the HTML code details, as described below.

Note

Review Developing Your Course and Use Best Practices for HTML Markup before you start working with HTML components.

To add an instant hangout to an HTML component, see Google Instant Hangout Tool.

7.1.2. Options for Editing HTML Components

You can work with HTML in two ways.

  • The Visual Editor

    With the visual editor you can create, edit, and format content in a word processing-like interface, without using HTML code directly. With the visual editor, you can more easily format your content, and add links and images. The visual editor provides access to HTML code so you can make small changes to formatting, if required. However, the HTML view in the visual editor does not provide the detailed control you can get with the raw HTML editor, and does not support custom formatting or scripts.

  • The Raw HTML Editor

    With the raw HTML editor, you work directly with HTML code. If you need to use custom formatting or scripts in your content, you should use the raw HTML editor.

Note

If you copy text from another source and paste it into either the visual or raw HTML editor, be sure to proofread the result carefully. Some applications automatically change quotation marks and apostrophes from the “straight” version to the “smart” version. The HTML editor requires “straight” quotation marks and apostrophes.

7.1.2.1. Set the Editor for an HTML Component

You set the editor for an HTML component in the Settings tab.

The Editor selection dropdown list in the HTML Component Settings tab.

Select Visual or Raw. When you change the editor, you must select Save and re-open the component to begin using the new editor.

Warning

If you work with content in the raw HTML editor, then switch to the visual editor, you may lose custom HTML that you created. Therefore, it is recommended that you start by using the visual editor, then switch to the raw HTML editor when you need to create custom HTML.

7.1.3. The Visual Editor

The visual editor provides a “what you see is what you get” (WYSIWYG) interface that allows you to format text by selecting the formatting buttons at the top of the editor.

An image of the HTML component editor in Studio.

Note

The visual editor is not available for course handouts.

The following image shows call-outs for the editing options and is followed by descriptions.

An image of the HTML editor in Studio, with call-outs for formatting buttons.
  1. Choose a formatting style for the selected paragraph, such as heading 1, heading 2, or paragraph.
  2. Choose a font family for selected text, such as Arial, Courier New, or Times New Roman.
  3. Format selected text in bold. The editor inserts <strong> tags around the selected text.
  4. Format selected text in italics. The editor inserts <em> tags around the selected text.
  5. Underline the selected text. The editor encloses the selected text in the tag <span style="text-decoration: underline;">.
  6. Apply a color to the selected text. The editor encloses the selected text in the tag <span style="color: color-hex-code;">.
  7. Format selected text as a code block. The editor inserts <code> tags around the selected text, which is then displayed in a monospace font.
  8. Create a bulleted list. The editor inserts <ul> tags around the selected text, and encloses each paragraph in <li> tags.
  9. Create a numbered list. The editor inserts <ol> tags around the selected text, and encloses each paragraph in <li> tags.
  10. Decrease and increased the indentation of the selected paragraph.
  11. Format the selected paragraph as a blockquote. The editor inserts <blockquote> tags around the selected text, which is then displayed as a separate paragraph in a monospace font.
  12. Create a link from the selected text. See Add a Link in an HTML Component.
  13. Delete the current link.
  14. Insert an image at the cursor. See Add an Image to an HTML Component.
  15. Work with HTML source code, described below.

7.1.3.1. Work with HTML code in the visual editor

To work with HTML source code for the content you create in the visual editor, select HTML in the editor toolbar. The HTML source code editor opens.

An image HTML source code editor available in the visual editor in Studio.

Edit the HTML code as needed.

You should not add custom styles or scripts in the HTML code view in the visual editor. Use the raw HTML editor instead.

Select OK to close the source code editor and apply your changes in the visual editor. The visual editor then attempts to ensure the underlying HTML code is valid; for example, if you do not close a paragraph tag, the editor adds a closing tag for you.

Warning

Selecting OK in the source code editor does not save your changes to the HTML component. You return to the component editor, where your changes are applied. You must then also select Save to save your changes and close the component. If you select Cancel, the changes you made in the HTML source code are lost.

7.1.4. The Raw HTML Editor

When you select the raw editor for the HTML component, you edit your content in a text editor.

The raw HTML editor

You must enter valid HTML. The raw HTML editor does not validate your HTML code. Therefore you should thoroughly test the HTML content in your course.

7.1.5. HTML Component Templates

When you create a new HTML component, you select from a list of templates.

The list of HTML Component templates in the Studio unit page.

The raw HTML template is set to use the raw HTML editor. All other templates use the visual editor.

For any HTML component, you can change the editor, regardless of the template used to create the component. See Set the Editor for an HTML Component.

7.1.6. Create an HTML Component

  1. Under Add New Component, select HTML.

    An image of the controls in the Studio unit page to add a new component.
  2. Select the template.

    The rest of these instructions assume that you selected Text, which creates an empty HTML component with the visual editor selected.

    An empty HTML component appears at the bottom of the unit.

    An image of an empty HTML component in the Studio unit page.
  3. In the component, select Edit.

    The HTML component opens in the visual editor.

    An image of the HTML component in the visual editor.
  4. Enter and format your content. You can Work with HTML code in the visual editor if needed.

  5. Enter a display name (the name that you want learners to see). To do this, select Settings in the upper right corner of the component editor, and then enter text in the Display Name field.

    To return to the text editor, select Editor in the upper right corner.

  6. Select Save to save the HTML component.

When using the visual editor, you can also perform the following tasks.