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.
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 using a visual editor that hides the HTML code details, as described below.
For more information, see the following topics:
Note
Review Developing Your Course and 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.
You can work with HTML in two ways:
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.
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.
You set the editor for an HTML component in the Settings tab:
Select Visual or Raw. When you change the editor, you must click 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.
The visual editor provides a “what you see is what you get” (WYSIWYG) interface that allows you to format text by clicking the formatting buttons at the top of the editor.
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.
To work with HTML source code for the content you create in the visual editor, click HTML in the editor toolbar. The HTML source code editor opens:
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.
Click 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 will close it for you.
Warning
Clicking 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 click Save to save your changes and close the component. If you click Cancel, the changes you made in the HTML source code are lost.
When you select the raw editor for the HTML component, you edit your content in a text 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.
When you create a new HTML component, you select from a list of templates:
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.
To create an HTML component:
Select the template.
The rest of these instructions assume you selected Text, which creates an empty component with the visual editor selected.
An empty component appears at the bottom of the unit.
In the component, click Edit.
The HTML component opens in the visual editor.
Enter and format your content. You can Work with HTML code in the Visual editor if needed.
Enter a display name (the name that you want students to see). To do this, click 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, click Editor in the upper-right corner.
Click Save to save the HTML component.
When using the visual editor, you can also:
When using the visual editor, to add a link to a website, course unit, or file in an HTML component, you work with the Insert link dialog box.
You can:
To add a link to a website:
Select the text that you want to make into the link.
Click the link icon in the toolbar.
In the Insert link dialog box, enter the URL of the website that you want in the URL field.
If you want the link to open in a new window, click the drop-down arrow next to the Target field, and then select New Window. If not, you can leave the default value.
Click OK.
Save the HTML component and test the link.
You can add a link to a course unit in an HTML component.
Obtain the unit identifier of the unit you’re linking to. To do this, open the unit page in Studio, and copy the unit ID from the Unit Identifier field under Unit Location in the right pane.
Open the HTML component where you want to add the link.
Select the text that you want to make into the link.
Click the link icon in the toolbar.
In the Insert link dialog box, enter the following in the URL field.
/jump_to_id/<unit identifier>
Make sure to replace <unit identifier> (including the brackets) with the unit identifier that you copied in step 2, and make sure to include both forward slashes (/).
If you want the link to open in a new window, click the drop-down arrow next to the Target field, and then select New Window. If not, you can leave the default value.
Click Insert.
Save the HTML component and test the link.
You can add a link in an HTML component to any file you’ve uploaded for the course. For more information about uploading files, see Adding Files to a Course.
Note
You must use the Embed URL to link to the file, not the External URL.
Select the text that you want to make into the link.
Click the link icon in the toolbar.
In the Insert link dialog box, enter the following in the URL field.
/static/FileName.type
Make sure to include both forward slashes (/).
If you want the link to open in a new window, click the drop-down arrow next to the Target field, and then select New Window. If not, you can leave the default value.
Click Insert.
Save the HTML component and test the link.
When using the visual editor, you can add any image that you have uploaded for the course to an HTML component. For more information about uploading images, see Adding Files to a Course.
Note
Review Best Practices for Describing Images before you add images to HTML components.
To add an image, you’ll need the URL of the image that you uploaded to the course. You’ll then create a link to the image in the HTML component.
Note
You must use the Embed URL to add the image, not the External URL.
Click the image icon in the toolbar.
In the Insert image dialog box, enter the following in the Source field.
/static/FileName.type
Make sure to include both forward slashes (/).
Enter alternative text in the Image description field. This text becomes
the value of the alt
attribute in HTML and is required for your course to
be fully accessible. See Best Practices for Describing Images for more
information.
As needed, customize the image dimensions. Keep Constrain proportions checked to ensure the image keeps the same width and height proportions.
To change the spacing and border of the image, click the Advanced tab.
Enter the Vertical space, Horizontal space, and Border as needed. The values you enter are automatically added to the Style field.
Click OK to insert the image in the HTML component.
Save the HTML component and test the image.
You can import LaTeX code into an HTML component. You might do this, for example, if you want to create “beautiful math” such as the following.
Warning
The LaTeX processor that Studio uses to convert LaTeX code to XML is a third- party tool. We recommend that you use this feature with caution. If you do use it, make sure to work with your Program Manager.
This feature is not enabled by default. To enable it, you have to change the advanced settings in your course.
To create an HTML component that contains LaTeX code:
In the component editor, click Launch Latex Source Compiler. The LaTeX editor opens.
Write LaTeX code as needed. You can also upload a LaTeX file into the editor from your computer by clicking Upload in the bottom right corner.
When you have written or uploaded the LaTeX code you need, click Save & Compile to edX XML in the lower-left corner.
The component editor closes. You can see the way your LaTeX content looks.
On the unit page, click Preview to verify that your content looks the way you want it to in the LMS.
If you see errors, go back to the unit page. Click Edit to open the component again, and then click Launch Latex Source Compiler in the lower-left corner of the component editor to edit the LaTeX code.