.. _HTML Components:
#################################
HTML Components in OLX
#################################
.. tags:: educator, reference
.. contents::
:local:
:depth: 1
*********************************************
Create the HTML Component
*********************************************
To add an HTML component to a course, split it up into 2 files: The HTML
configuration into an .xml file in the html directory and an additional .html
file in the same directory.
.. caution::
HTML that is not valid HTML must be broken out into a separate file.
*********************************************
Example of XML & HTML Files
*********************************************
Create an XML file in the ``html`` directory for the content that is broken 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, the ``vertical/unit_1_what_is_olx.xml`` file contains the following
``url_name``.
.. code-block:: xml
. . .
This references the file ``html/what_is_olx.xml`` to define the HTML component.
*************************************
Example HTML Component XML File
*************************************
The following example shows the ``html/what_is_olx.xml`` file for an HTML component.
.. code-block:: xml
*************************************
``html`` Element Attributes
*************************************
.. list-table::
:widths: 10 70
:header-rows: 1
* - Attribute
- Meaning
* - ``display_name``
- Required. The value that is displayed to learners as the name of the
HTML component. If a ``display_name`` value is not supplied, "html" is
supplied.
* - ``filename``
- The name of the HTML file that contains the content for the HTML
component, without the ``.HTML`` extension.
*************************************
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.
*************************************
Example HTML Component Content
*************************************
In the component's HTML file, add valid HTML to represent the content that will
be displayed to learners. For example, the following is from an HTML
file from the olx_example_course:
.. code-block:: html