.. _HTML Components: ################################# HTML Components ################################# To add an HTML component to your course, you can either in-line it in the parent XML file, or split it up into either 1 or 2 additional files. HTML configuration can be broken out into a .xml file in the html directory. In addition, HTML content can be broken out into an additional .html file in the same directory. Breaking out HTML content is especially useful if you are embedding HTML which is not valid XML. See: * `Create the XML File for an HTML Component`_ * `HTML Component XML File Elements`_ * `html Element Attributes`_ * `Example HTML Component XML File`_ * `Create the HTML File for an HTML Component`_ * `Example HTML Component Content`_ ************************************* In-line HTML Example ************************************* .. code-block:: xml ... The above has an error. x should be y in the second equation. ********************************************* Fully split HTML file example and explanation ********************************************* You create an XML file in the ``html`` directory for each HTML component in your course. 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, if the vertical XML file contains: .. code-block:: xml . . . You create the file ``html/Introduction.xml`` to define the HTML component. ************************************* HTML Component XML File Elements ************************************* The root element of the XML file for the HTML component is file is ``html``. In this case, the ``html`` element contains no children. ************************************* ``html`` Element Attributes ************************************* .. list-table:: :widths: 10 70 :header-rows: 1 * - Attribute - Meaning * - ``display_name`` - The value that is displayed to students as the name of the HTML component. * - ``file_name`` - The name of the HTML file that contains the content for the HTML component, without the ``.HTML`` extension. ************************************* Example HTML Component XML File ************************************* The following example shows an XML file for an HTML component: .. code-block:: xml ********************************************* Create the HTML File for an HTML Component ********************************************* You create an HTML file in the ``html`` directory for each HTML component in your course. The name of the HTML file must match the value of the @file_name attribute of the ``html`` element in the component's XML file. For example, if the component's XML file contains: .. code-block:: xml You create the file ``html/Introduction.html`` to define the HTML component content. ************************************* Example HTML Component Content ************************************* 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: .. code-block:: html

Lesson 2: Let's Get INTERACTIVE!

InteractiveNow that you know your way around an edX course let's look at some of the exciting interactive tools you may encounter. Use the learning sequence above to explore.  

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.