This option allows you to develop a channel using HTML language, which is an easy language to understand and use. Use it to easily customize the design in order to make eye-catching channels.

1 HTML Channel Definition

Select the HTML option in the Channel type. The example is going to show a simple customized channel developed in HTLM language.

Script commands for the example:

Copy

<script>
    
    return  ` 
        <html lang="en-US">
            <head>
            <title>HTML Test</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
            * {
                box-sizing: border-box;
            }
            body {
                font-family: Arial, Helvetica, sans-serif;
            }
            /* Style the header */
            header {
                background-color: #666;
                padding: 30px;
                text-align: center;
                font-size: 35px;
                color: white;
            }
            /* Create two columns/boxes that floats next to each other */
            nav {
            float: left;
            width: 30%;
            background: #ccc;
            }

            /* Style the list inside the menu */
            nav ul {
            list-style-type: none;
            padding: 20;
            }

            article {
                float: left;
                padding: 20px;
                width: 70%;
                background-color: #f1f1f1;
                color: black;
            }

            /* Clear floats after the columns */
            section:after {
                content: "";
                display: table;
                clear: both;
            }

            /* Style the footer */
            footer {
                background-color: #5F9EA0;
                padding: 10px;
                text-align: center;
                color: white;
                }

            /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
            @media (max-width: 600px) {
                nav, article {
                width: 100%;
                height: auto;
                }
            }
        </style>
        </head>
        <body>

<h2> HTML DEISTER CHANNEL</h2>
<p> Use HTML channels to create your own design</p>


<header>
  <h2>DEISTER SOFTWARE</h2>

</header>

<section>
  <nav>
    <ul>
        <li>Choose the desired option:</li>
        <br>
        <li><a href="https://www.deister.net/en" target="_blank">Access to Deister website</a></li>
        <br>
        <li><a href="https://www.google.es/maps/place/Deister+Software/@41.406459,2.1147953,17z/data=!3m1!4b1!4m5!3m4!1s0x12a498398c65eebf:0x834cfbe72c3db32d!8m2!3d41.406459!4d2.116984" target="_blank">Visit Deister office</a></li>
        <br>
        <li><a href="http://www.deister.net/en/other/contact-location/" target="_blank">Contact Deister</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>Deister Software</h1>
        <button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
<mark>Click me to display Date and Time.</mark></button>

<p id="demo"></p>
    <p>Business solutions adapted to your company</p>
    <p>Deister provides applications, products and global solutions that help your company to improve its business processes.</p>
  </article>
</section>
<footer>
  <p>Deister Software © 2018. All Rights Reserved</p>

</footer>

</body>
        </html>
    `

        
    
    
</script>

1.1 Columns headers

TO DO

This section is incomplete and will be concluded as soon as possible.

1.2 Output Fields

In the output field the user has to add the columns.

1.3 Result

The customization of this channel shows the following result.