Short instruction about the HTML for IoT developers
Hi everyone! In this lesson I will tell you the base of coding with HTML, JavaScript and CSS. Let’s go!
WHAT’S HTML, CSS AND JS?
Let’s look, what do these three words mean.
HTML – HyperText Markup Language. Is used in 100% of all sites. Is needed for creating visual and active elements of web-pages.
CSS – Cascade Style Sheet. Used for stylization of web-pages. Coloring, fonts, margins, paddings and others.
JS – Java Script. Needed for make interactive on your page. For example, make onclick button function (change color, send query to server and other).
Also there is a PHP programming language – but it is used on servers, it is not supported in browsers and it needs to download it to our server, that is not our variant.
HOW TO WRITE CODE WITH HTML?
Writing code in HTML is made with tags – special blocks, and any tag has it’s functions. Tags are usually write in triangle parentheses (more-less signs). In these parentheses are writing tag’s name and it’s parameters. Example of usual HTML tag:
<input type="button" class="simple_button" id="button" onclick="alert('Boo!')">
Most tags has pair tag with a slash. It is usually named closing tag, it is needed for closing tag, ending. Tag with closing pair tag looks like that:
<div> <!-- Opening tag DIV -->
write here the content of DIV - other tags, comments or just text
</div> <!-- Closing tag DIV -->
If you need to make a note in HTML code, you can use this tag for comments. No one will see this comment, except you and code editors.
<!-- You can write here what you want, and no one will see it =)))) -->
So, you can turn OFF some parts of code without deleting it, for example, for test.
<!--
You can write here HTML code, and it won't work, while it is in a comment
<p>This is paragraph, and nobody will see it.</p>
-->
BASIC HTML TAGS
In this part I will list all tags, which you need for your web-interfaces for your ESP boards.
ATTENTION! I recommend to learn this table CAREFULLY. In the POPULAR ATTRIBUTES column are listed attributes with double quotation marks. You need to use classic marks, not which you can see here. The site displays quotation marks in the form of triangles because of the display features. You need to write classic quotation marks, as in the picture on the right.
Here is the table:
| № | TAG NAME | DESCRIPTION | MOST POPULAR ATTRIBUTES | WRITING EXAMPLE | IS PARE |
|---|---|---|---|---|---|
| 1 | DOCTYPE | This tag is writing in the beginning every of HTML code. Is needed for selecting code type. Write it, like in the example. | html | <!DOCTYPE html> | No |
| 2 | html | Is writing after DOCTYPE tag. This tag is a container for all code of page. | lang | <html lang=”ru”>page content</html> | Yes |
| 3 | head | This tag is a child for HTML tag. it contains page settings – tab icon, page title and meta-tags – keywords and others. Also in this tag usually are adding some else files, that are used in this file. If you write styles right here, in this file, you can write style tag in HEAD. | no attributes | <head><title>Page title</title></head> | Yes |
| 4 | body | Is a child for HTML tag. It contains all page content and scripts, if you write scripts in this file. | no attributes | <body>…</body> | Yes |
| 5 | style | Is a child for HEAD. Contains CSS styles. | no attributes | <style>…</style> | Yes |
| 6 | link | Is a child for HEAD. You can add style files in HTML file with this tag. Link to file is on HREF attribute. | href=”link” rel=”file type” | <link rel=”stylesheet” href=”styles.css”> | No |
| 7 | meta | Is a child for HEAD. Contains meta tags with coding, keywords and others. For web-interface you can add only coding, KEYWORDS attribute is needed for SEO and search optimisation. | charset=”coding” keywords=”keys” | <meta keywords=”arduino, esp8266, esp32″> | No |
| 8 | script | Needed to write scripts or connect script files. Link to script file usually is write in SRC attribute. | src=”link” | <script>function()…</script> | Yes |
| 9 | div | This is an universal tag for making blocks (squares, circles, triangles) and for containing any content. | class=”block name” id=”id for scripts” | <div>Just one simple block fro making something interesting…</div> | Yes |
| 10 | main | Container-tag for main part of page. Not important for simple pages. | class=”block name” id=”id for scripts” | <main>Content of main part of page.</main> | Yes |
| 11 | section | Analog of DIV tag. Is needed for SEO, for big sites, for searching. Not important for simple pages without search (Google, Yandex) | class=”block name” id=”id for scripts” | <section>Content of a very cool tag.</section> | Yes |
| 12 | p | A tag for simple text (paragraph). Does not contains block tags, only text formatting. | class=”block name” id=”id for scripts” | <p>A simple text.</p> | Yes |
| 13 | span | Нужен для выделения фрагмента текста (одно или несколько слов) и последующего выделения цветом. | class=”block name” id=”id for scripts” | <p>Here is <span style=”color: red;”>a colored</span> wordThese tags needed for making text bold.</p> | Yes |
| 14 | b/strong | These tags needed for making text bold. STRONG needed to tell search bots (Yandex, Google), that this text is important. For simple pages are used B tag. | class=”block name” id=”id for scripts” | <b>Bold text.</b> | Yes |
| 15 | i | Makes text italic. | class=”block name” id=”id for scripts” | <i>This is italic text, it will be italic in browser.</i> | Yes |
| 16 | u | One more formatting tag, adds a line under text. | class=”block name” id=”id for scripts” | <u>This is underlined text.</u> | Yes |
| 14 | a | This tag makes clickable text to send user to another page. | href=”site address” target=”blank” – for opening this link in a new tab of browser | <a href=”https://arduino-uno-ws.ru”>This is a link</a> | Yes |
| br | Is needed for making line break in text. Is a child for A, P tags. | Not needed to add attributes | <p>One string<br>First string</p> | No | |
| 15 | img | A tag for view an image. You can show a picture from Internet, if your board has Internet connection, or from local storage. Add your picture’s address in SRC attribute (src – source), height of image in HEIGHT and width in WIDTH attributes. The ALT attribute shows some text, if the image wasn’t load. | src=”image address and name with format” width=”width in pixels” height=”height in pixels” alt=”alternative text, tell what this picture means” | <img src=”image001.png” width=”400px” alt=”If you see this text, it means that image isn’t loaded!”> | No |
| 16 | video | Tag for viewing video. You can view video from Internet (if board is connected to Internet), or from local storage. Add address to a video in SRC, height and width in HEIGHT and WIDTH. To view control panel add CONTROLS attribute without parameters. AUTOPLAY attribute makes this video autoplay after loading page. | src=”video address and name with format” width=”width in pixels” height=”height in pixels” controls autoplay | <video src=”my-video.mp4″ width=”500px” class=”main-player” controls autoplay id=”mainVideo”></video> | Yes |
| 17 | iframe | A tag for viewing another web-page right in our page with it’s address. | class=”name for styles” id=”name for scripts” | <iframe src=”https://www.arduino.cc” width=”100%” height=”600px”>Loading site ARDUINO.CC …</iframe> | Yes |
| 18 | form | A tag for creating contact form. Is used in PHP and server, not needed for our local page. | class=”name for styles” id=”name for scripts” | <form>write here a code for form – inputs, buttons…</form> | Yes |
| 19 | input | Tag for creating a field. Has different types, that are selected in TYPE attribute. Example: 1. TEXT type gives a field to write text. This type can have PLACEHOLDER attribute to say user, what he can write here. VALUE is a content of field, that user writes. 2. NUMBER type shows a number field, user can write only numbers. In right side of this field will be + and – button, to increment or decrement number. 3. BUTTON type shows a button, text on button is in VALUE attribute. 4. COLOR shows a tool to select color in palette. | type=”text/number/button/color” class=”name for styles” id=”name for scripts” name=”name, exmp – phone” value=”text on button or example of text in field” placeholder=”background text in field” | <input type=”text” id=”textovoepole” placeholder=”Write here something”> | No |
| 20 | button | A tag for making a button. Is a pare tag, between BUTTON tags usually is a text of button. | name=”name” id=”name for script” onclick=”onclick calling function” | <button id=”btn01″ onclick=”func()”>A button</button> | Yes |
| № | TAG NAME | DESCRIPTION | MOST POPULAR ATTRIBUTES | WRITING EXAMPLE | IS PARE |
BASE OF HTML PAGE CODE
Every HTML page has it’s base. Here you can copy the base of HTML page for easy writing code.
<!DOCTYPE html>
<html>
<head>
<title>Page example</title>
<style>
/* Write here styles for this page */
</style>
</head>
<body>
<!-- Write here the content of page -->
<script>
<!-- And here write JavaScript code for interactive -->
</script>
</body>
</html>
Now, you can write code for your ESP web-interfaces. If you think that HTML is too difficult, you can make web-interface with GyverPortal, it gives you a chance to make web-interface for your board easy!
Thank you for reading!