Step 1: Creating an HTML skeleton

Меньше 1 минуты

Step 1: Creating an HTML skeleton

Create an index.html file in project folder.

Fill it with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tangl Basic Demo</title>
    <meta charset="utf-8">
    <meta lang="en">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div style="position: absolute; top:0; bottom: 0; left:0; right:0; background-color: gray">
    <div id="viewer" style="height: 100%"></div>
</div>
</body>

In this example, the HTML file contains two DIV containers. One sized for the entire browser window area and one inside for the viewer.

All the main code will be added to a separate file index.js for convenience.

Create it in the "src" folder and import it after the DIV blocks:

...
<div style="position: absolute; top:0; bottom: 0; left:0; right:0; background-color: gray">
    <div id="viewer" style="height: 100%"></div>
</div>
<script type="module" src="/src/index"></script>
...