HTML stands for “HyperText Markup Language” and is used for creating webpages. Whilst HTML will define the structure and content of a webpage, a CSS file will determine the styling and layout of that webpage. JavaScript can also be used if you wish to further enhance your HTML files. If you are new to HTML, w3schools provide a good online tutorial.
HTML files can be incorporated into a Sapelli project to display information as a webpage. HTML files can also integrate external resources into a project. For example, HTML files can include videos and images, links to other webpages and links to PDF documents. Furthermore, HTML files can have responsive design where the size of the webpage will automatically adjust to the device’s screen. Therefore, your project may benefit from HTML if you wish to provide information, such as in the Providing legal guidance example project.
Offline webpages
Within a project, a user can click on a Choice that will take them to an offline webpage (a webpage stored within the resources folder). This would require a Choice within the XML decision tree jumping to a HTML file. In this example, the Choice displayed is “Read introduction” which will lead to a webpage containing introductory information:
|
1 |
<Choice id="introduction" caption="Read introduction" jump="Web_Introduction" /> |
At the bottom of the decision tree the HTML tag can then be included in the XML document:
|
1 |
<Html id="Web_Introduction" url="introduction.html" /> |
The ‘HTML id’ value must read the same as the value of the ‘jump’ attribute to which it corresponds, click here for more information on the jump attribute. The ‘url’ within the HTML tag will correspond to the file name of a html page locally stored within the resources folder of the project.
Online webpages
Similarly, within a project, you can lead the user to an online webpage:
|
1 |
<Choice id="excites" caption="Open ExCiteS webpage" jump="ExCiteS_webpage" /> |
At the bottom of the decision tree the HTML tag can then be included in the XML document, which has an attribute ‘url’ with the link of the webpage:
|
1 |
<Html id="ExCiteS_webpage" url="https://www.ucl.ac.uk/excites" /> |
Open links externally
There is also an ‘externalLinks’ attribute that can be included within the HTML tag. This attribute will determine whether the webpage will be viewed externally using the device’s web browser rather than viewing the webpage within the Sapelli app. Note that this option will take the user out of the Sapelli app in order to view the webpage:
|
1 |
<Html id="Web_Introduction" url="introduction.html" externalLinks="true" /> |
Click here to see the full list of attributes that you can include within the HTML tag.