10.1. HTML Components#
To add an HTML component to your course, you can embed the XML for it in the parent XML file, or split it up into either 1 or 2 additional files. You can break up the HTML configuration into an .xml file in the html directory and an additional .html file in the same directory.
If you are including HTML that is not valid HTML, you must break out HTML content in a separate file.
<vertical display_name="Lesson_1_Unit_1"> ... <html>The above has an error. <b>x</b> should be <b>y</b> in the second equation.</html> </vertical>
You create an XML file in the
html directory for the content that you
choose to break out into separate HTML files.
The name of the XML file must match the value of the @url_name attribute of the
html element in the vertical XML file.
For example, a vertical XML file contains the following url_name.
<vertical display_name="Lesson_1_Unit_1"> <html url_name="Introduction"/> . . . </vertical>
You create the file
html/Introduction.xml to define the HTML component.
The root element of the XML file for the HTML component is file is
In this case, the
html element contains no children.
Required. The value that is displayed to students as the name of the
HTML component. If you do not supply a
The name of the HTML file that contains the content for the HTML
component, without the
The following example shows an XML file for an HTML component.
<html filename="Introduction" display_name="Unit Introduction"/>
In the component’s HTML file, you add valid HTML to represent the content you want to be displayed to students. For example, the following is from an HTML file for the edX Demo course:
<h3>Lesson 2: Let's Get INTERACTIVE!</h3> <p> <img src="/static/interactive_x250.png" alt="Interactive" width="250" hspace="12" vspace="12" border="0" align="right" />Now that you know your way around an edX course let's look at some of the exciting interactive tools you may encounter. Use the unit navigation bar above to explore. </p> <p>Once you have tried the interactive tools in this lesson, make sure to check out the week 2 homework where we show you several of the really cool interactive labs we’ve created for past courses. They’re fun to play with. Many courses will have tools and labs that you need to use to complete homework assignments.</p>