Advanced features by topic

Use HTML elements

You can edit a website with a content management system such as Webhare, without any knowledge about HTML or other programming languages. However, sometimes a few lines of HTML-code can produce nice additions. 

We have gathered a few tips, to ensure that your own piece of HTML-code also appears as intended on a smartphone, because that is not always self-evident.

When do you use HTML?

For example: You can use HTML to load information from another website.

  • Embedding content of another website into your own
    • Video's (see below for specific button)
    • Social media elements
    • Presentations of slideshare
    • Content from other systems, for example the publications of the department of another person
  • Add extra functionality to your page

For adding extra functionality to your website we must disappoint you: you will need programming experience to do so. For adding extra functions you don't! Many systems give you a small piece of HTM-code, that you can use without any programming experience. Below we explain how to implement this code into your website.

Automatically present publications on your WebHare website?
Lees meer
This instruction explains how to load the publication of one or more scientists or one or more departments in your website. Publications are fetched from the UT research information system Pure (research.utwente.nl).

What do I have to pay attention to?

Responsive content on small screens

The standard UT-template is built so that all content is automatically responsive to the size of the screen, assuring for good interaction and readability on small devices. Using your own HTML-code can cause problems. If you use a small piece of HTML-code (mostly not more than 2 or 3 lines of text), for example for a video, they mostly come with measurements. Example: <iframe width="560" height="315" src="https://www.youtube.com/embed/KgzM_YS8258" frameborder="0" allowfullscreen></iframe>. If you have this kind of measurements in your HTML-code, then the video will not be responsive to smaller screens. The result is shown in the pictures below. Therefore, it is important that you:

  • use as many specific elements as possible in Webhare, to avoid problems
  • use HTML-elements without definite measurements

Always use the video embedding fuction from the editor to embed videos in Webhare. Webhare then automatically resizes the videos depending on the size of the screen:

For embedding PDF's via Isssuu.com, you can use the following button (inline element). For many other HTML-elements, such as Slideshare-presentations or other content, you don't have a specific button in Webhare. In case specific elements are often used, these buttons can be added to Webhare. In case you are missing a button, you can always insert a piece of HTML-code into your website, risking that content doesn't respond properly when specific measurements are included.

Secure content: http and https

The UT-website uses a secure connection via https as opposed to http. Browsers only display HTML-elements when they are secure. A piece of HTML-code can therefore never contain http://.... When used as a link, you have to use https://.... Otherwise your element wont be shown. You will only see a white area. Of course the website you are trying to link towards must support HTTPS. But that is usually the case for all big websites. Adding an 's' in a link should be sufficient if your HTML-element isn't visible.

Use HTML within a WebHare-editor page

If you want to use an HTML-element on your website, choose the HTML inline element provided by the editor. Click in the editor on the {...} symbol and choose raw html. from the list. You can now add your own piece of HTML-code and save it:

How to add a piece of HTML code to your web page

Add an entire page in HTML

You can also add an HTML-file instead of the HTML code within the Webhare editor file (upload > html file upload, e.g. xxx.html). Then, your whole page is in HTML. This has some disadvantages. For example, you can't produce internal links any more that change automatically when files are moved and you can't use inline elements in this page. These things are only available in the Webhare editor. For advanced users, an .html file can be a useful option. We advise to give preference to using HTML code within the Webhare editor to ensure a proper alignment of information on your website.