Help Center API Reference Data API Community

HTML Tab

HTML (Hyper Text Markup Language) is the standard markup language with which any web page is structured. By using HTML elements, the user can tell the browser where and how to display content.

Examples:

  • <title> Page Title </title>: This element tells the browser to display the "Page Title" message as the tittle for the web page.

  • <h1> This is a h1 header </h1>: This element tells the browser to display the "This is a h1 header" message as an H1 header wherever it is placed in the HTML file.

  • <p> My first paragraph </p>: This element tells the browser to display the "My first paragraph" message as a paragraph wherever it is placed in the HTML file.

Typical HTML structure:

In every HTML file the following structure is mandatory:

<html>
<head>
</head>
<body>
</body>
</html>

HTML structure on the HTML Canvas widget:

When using HTML elements on the HTML Canvas widget, using the following tags is optional:

  • <html></html>

  • <head></head>

  • <body></body>

This means that all the code that is placed in the HTML code editor tab will be interpreted as if it were inside an HTML body element on the widget:

Typical HTML fileUbidots equivalent HTML inside the widget

<html> <head> </head> <body> <h1> This is a h1 header </h1> <p> This is a paragraph </p> <p> This is another paragraph </p> </body> </html>

<h1> This is a h1 header </h1> <p> This is a paragraph </p> <p> This is another paragraph </p>

Advanced example:

Suppose the following web content has to be displayed:

This can be achieved with the following HTML code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Online HTML Editor </h1>
<p> This is a real time online HTML Editor </p>
</body>
</html>

In order to achieve this same result on the HTML Canvas, the following code can be used on the HTML tab of the code editor:

<h1> Online HTML Editor </h1>
<p> This is a real time online HTML Editor </p>

The resulting HTML Canvas Widget is shown below on a dasboard:

PreviousCode editorNextCSS Tab

Last updated