Back to Home Back to Desktop View

(X)HTML

The most important transformation: From XML to (X)HTML

Since we are talking about eLearning and eLessons the transformation into HTML is probably the most import one. In eLML you can choose to create the latest HTML5, strict XHTML 1.1 or the older XHTML 1.0 transitional code (default). Described below is how you choose your HTML version and how you create a plain HTML transformation of your lesson. But you most probably want more than just plain white XHTML pages so when you have read this page continue with the following chapter about custom layouts!

So usually you will work with one or more of the options below when creating your final online version of a lesson or a whole course. If you still just would like to create a simple XHTML version (e.g. to check your content) here's how:

Transform a lesson without a layout template (the 'plain' version)

Transform a lesson without a layout template (the 'plain' version)

  1. Open your lesson or the "Introduction to Database Systems" lesson XML file in oXygen or XMLSpy.
  2. In oXygen click on the "Apply transformation scenario" button. Since you didn't yet define a "Transformation Scenario" you will need to do this now. It's pretty straightforward but refer to the oXygen manual if you don't know how to do it. It is important that you choose an XSLT 2 processor like Saxon 8 or later in your transformation scenario, with Saxon 6.5 it wont work! In XMLSpy just click the "XSL" button.
  3. Choose the file ../../../../core/presentation/online/elml.xsl file as input XSLT file (in oXygen you also have to define an output folder: enter e.g. tmp/output.txt but it doesn't really matter since the exact paths for storing files are part of the XSLT 2.0 files anyway).
  4. Open the file gitta/IntroToDBS/en/index.html with any web browser (in XMLSpy the files are opened automatically).

Difference between XHTML 1.0 Transitional and XHTML 1.1 Strict in eLML

Difference between XHTML 1.0 Transitional and XHTML 1.1 Strict in eLML

Since eLML 6 you can choose if you want to either generate the older XHTML 1.0 Transitional or the newer and more advanced XHTML 1.1 Stric version when generating HTML code. Please note that there are no differences between the strict versions of XHTML 1.0 and 1.1 that are affecting eLML. All the differences described here have to do either with the change from transitional to strict XHTML code or with the choice made by the eLML authors to create "better" XHTML code. Keep that in mind when you are reading the list below.

How to create XHTML 1.1 Strict code?

By default eLML generates XHTML 1.0 Transitional HTML code. If you want to change that open your configuration file and set the $html_version parameter to 1.1. Please refert to the configuration chapter if you want to know more about how to configure eLML transformations.

What is different if I choose to create XHTML 1.1 Strict code?

The differences are listed below. As mentioned above those changes have nothing to do with XHTML 1.0 or 1.1 but mainly with the fact that you are switching from transitional to strict XHTMl code. Plus the eLML authors have added some other changes in the XHTML 1.1 version in order to create better HTML code. Refer to the eLML manual if you don't know what the elements listed below are used for. Here is an overview:

  • A lot of the presentation is moved from using HTML attributes like width, height etc. to using CSS (see next item as example or read this article)
  • The eLML attributes "width" and "height" used e.g. in the multimedia element are transformed using <span> with CSS style attribute instead of using HTML attributes width/height
  • The content model is more strict: HTML elements like body, form or blockquote can only contain block elements. Other elements like span or img have do be descendents of a block element.
  • All HTML documents are created using the "xml:lang" attribute to tell the browser what language to expect. Please note that this attribute is the only real difference between XHMTL 1.0 and 1.1 since its not available yet in version 1.0!
  • <citation>: In the XHTML 1.1 version eLML generates a purely semantic approach using the HTML elements <cite>, <blockquote> and <q> plus the according attributes. See here how this looks in your browser! In the older XHTML 1.0 version eLML uses the span- and i-element plus CSS code to display citations.
  • <term>: Creates <dfn> HTML element
  • The "target" attributes in HTML links is not allowed in strict XHTML. Thus the eLML <link> element's "target" attribute is ignored. This does of course not apply to "targetLabel" or "targetLesson" attributes!
  • <formatted style="bold">: Creates <strong> instead using <b> element
  • <formatted style="italic">: Creates <em> instead using <i> element
  • <formatted style="crossedOut">: Creates <del> instead using <span> with CSS style attribute
  • In strict XHTML <br clear="all" /> is not allowed, only <br />. Be aware of this when generating XHTML 1.1 and using the YAML framwork (can cause layout problems although only in certain rare cases)

Difference between XHTML 1.1 and HTML 5 in eLML

Difference between XHTML 1.1 and HTML 5 in eLML

Since eLML 7 you can choose if you want to generate XHTML 1.0 Transitional, XHTML 1.1 Stric or HTML5 when generating HTML code. Please note that HTML5 includes all the changes listed above for XHTML 1.1 with one exception: The "target" attribute of the "link" element is allowed again in HTML5.

How to create HTML5 code?

By default eLML generates XHTML 1.0 Transitional HTML code. If you want to change that open your configuration file and set the $html_version parameter to 5. Please refert to the configuration chapter if you want to know more about how to configure eLML transformations.

What is different if I choose to create HTML5 code?

HTML 5 code is more modern and works better on modern browsers. It contains all the changes of XHTML 1.1 plus some additional ones listed here:

  • Navigate through your lesson using shortcut keys like arrow keys and others listed here.
  • Semantic Web: The new semantic elements section, chapter, navigation, header and footer are generated to structure the code or a page.
  • New HTML elements "audio" and "video" are used for multimedia formats QuickTime, MPEG and MP3.
  • New element "time" is used to mark the creation date of the lesson.
  • And of course: new document type "html" is used.
  • More things will be added as the new HTML5 standard is evolving...