Краткий мануал по HTML для ардуинщиков
Всем привет! В этой статье я вам расскажу основы создания веб-страниц с помощью HTML, CSS и JS. Погнали!
ЧТО ТАКОЕ HTML, CSS и JS?
Сначала рассмотрим, что представляют из себя эти три слова.
HTML — HyperText Markup Language — гипертекстовый язык разметки. Используется в 100% всех сайтов. Нужен для создания визуальных и активных элементов веб-страниц.
CSS — Cascade Style Sheet — каскадные таблицы стилей. Используются для стилизации веб-страниц. Добавление цвета, указание шрифтов, расположений элементов, отступов и так далее.
JS — Java Script — язык программирования для создания сценариев (скриптов), чтобы страница имела какие-нибудь функции. Например, обработка нажатия кнопки, смена текста в абзаце при каком-то действии и прочие действия на странице.
Также есть ещё язык программирования PHP — но он используется только на сервере, не поддерживается в браузерах и его поддержку нужно устанавливать на сервер, нам такого не надо.
КАК ПИСАТЬ НА HTML?
Написание кода на HTML выполняется с помощью тегов — специальных блоков, каждый из которых имеет свои собственные функции и возможности. Теги пишутся в угловых скобках (знаки больше-меньше). В этих скобках указывается название тега и через пробел параметры тега с из значениями. Пример тега в HTML можно посмотреть здесь:
<input type="button" class="simple_button" id="button" onclick="alert('Boo!')">
У большинства тегов пишется парный тег с косой чертой. Он называется закрывающим, нужен для ограничения тега, завершения. Тег с закрывающим парным тегом выглядит так:
<div> <!-- Открывающий тег DIV -->
тут пишем содержимое тега DIV - другие теги или просто текст
</div> <!-- Закрывающий тег DIV -->
Если вам нужно сделать пометку в коде, написать что-то и чтобы это не отображалось на странице, то есть комментарий, нужно писать так:
<!-- Тут пишем что хотим и никто этого не увидит =)))) -->
Также, таким способом можно «отключать» фрагменты кода, если они сейчас не нужны и чтобы не стирать их насовсем.
<!--
Тут можно написать код и он не будет работать, пока он находится в комментарии.
<p>Это параграф, он тоже не будет отображаться.</p>
-->
ОСНОВНЫЕ ТЕГИ HTML
В этом разделе я вам перечислю все теги, которые могут понадобиться для создания веб-интерфейса для вашей платы =)
ВНИМАНИЕ! Рекомендую внимательно изучить таблицу. В столбце ПОПУЛЯРНЫЕ АТРИБУТЫ указаны атрибуты тегов с кавычками. На сайте из-за особенностей отображения показываются кавычки в виде треугольничков, нужно писать классические кавычки, как на картинке справа.
Вот таблица:
| № | НАЗВАНИЕ ТЕГА | ОБОЗНАЧЕНИЕ | ОСНОВНЫЕ АТРИБУТЫ | ПРИМЕР НАПИСАНИЯ | ПАРНЫЙ |
|---|---|---|---|---|---|
| 1 | DOCTYPE | Этот тег пишется в самом начале любой веб-страницы. Нужен для указания типа страницы. Пишется точно так, как представлено справа>>> | html | <!DOCTYPE html> | Нет |
| 2 | html | Пишется сразу после предыдущего тега, во второй строке кода. Является контейнером для всего, что будет отображаться и работать на странице. | lang | <html lang=»ru»>содержимое страницы</html> | Да |
| 3 | head | Дочерний тег предыдущего тега, пишется внутри. В нем указываются параметры страницы (иконка страницы, название страницы, отображаемое во вкладке браузера) и указываются внешние файлы (файлы стилей, скриптов и т.д.) Также указываются стили страницы, если вы их пишите прямо в этом файле. | нет атрибутов | <head><title>Заголовок страницы</title></head> | Да |
| 4 | body | Дочерний тег для HTML. В нём указывается всё содержимое страницы, а также скрипты, которые пишутся прямо в этом файле. | нет атрибутов | <body>…</body> | Да |
| 5 | style | Дочерний тег для HEAD. В нём пишутся стили на языке CSS. | нет атрибутов | <style>…</style> | Да |
| 6 | link | Также дочерний тег для HEAD. В нём указываются ссылки на внешние файлы, обычно файлы со стилями. Ссылка прописывается в атрибуте тега. | href=»ссылка» rel=»тип файла» | <link> | Нет |
| 7 | meta | Дочерний тег для HEAD. В нём указывают мета-данные страницы, такие как ключевые слова, кодировка и т.д. Также указывается кодировка страницы. Если на странице будет русский текст, то нужно указать кодировку (см. ниже, пример страницы). Для простой страницы веб-интерфейса достаточно только указать кодировку. Подробнее рассказано ниже. | charset=»кодировка» keywords=»ключи» | <meta> | Нет |
| 8 | script | В нём прописываются скрипты, либо подключается внешний файл со скриптами с форматом .js Ссылка на внешний файл прописывается в атрибуте. | src=»ссылка» | <script>function()…</script> | Да |
| 9 | div | Это универсальный тег для создания блоков, фигур (круг, треугольник, квадрат), оболочка для других элементов. | class=»название блока» id=»айди для скриптов» | <div>Просто обычный блок, для создания чего-нибудь интересного.</div> | Да |
| 10 | main | Тег-оболочка для содержимого главной части страницы, если у вас страница разделена на колонки. Необязательный тег. | class=»название блока» id=»айди для скриптов» | <main>Содержимое главного блока страницы.</main> | Да |
| 11 | section | Аналог тега DIV, только используется для веб-сайтов, в целях улучшения читаемости сайта поисковыми системами. Для локальной страницы достаточно тега DIV. | class=»название блока» id=»айди для скриптов» | <section>Содержимое очень крутого тега.</section> | Да |
| 12 | p | В этом теге можно написать простой текст (параграф, абзац). Теги в нем не пишутся. | class=»название блока» id=»айди для скриптов» | <p>Просто самый обычный текст, ничего особенного.</p> | Да |
| 13 | span | Нужен для выделения фрагмента текста (одно или несколько слов) и последующего выделения цветом. | Нет смысла добавлять, но можно. class=»название блока» id=»айди для скриптов» | <p>Это <span style=»color: red;»>выделенное</span> слово.</p> | Да |
| 14 | b/strong | Оба тега выделяют текст жирным (пример). Разница лишь в том, что тег B просто выделяет текст, а STRONG ещё и указывает системе, что это важный фрагмент текста. Для локальных страниц используйте тег B. | Нет смысла добавлять, но можно. class=»название блока» id=»айди для скриптов» | <b>Жирный текст.</b> | Да |
| 15 | i | Также является текстовыделительным тегом, делает текст наклонным (пример). | Нет смысла добавлять, но можно. class=»название блока» id=»айди для скриптов» | <i>А это наклонный текст</i> | Да |
| 16 | u | Ещё один текстовыделительный тег, добавляет черту под текстом (пример). | Нет смысла добавлять, но можно. class=»название блока» id=»айди для скриптов» | <u>Это подчёркнутый текст</u> | Да |
| 14 | a | Этот тег нужен для создания ссылок на другие файлы или страницы, для перемещения на них пользователя. | href=»адрес сайта» target=»blank» — чтобы в новой вкладке открывалась ссылка | <a href=»https://arduino-uno-ws.ru»>Это ссылка</a> | Да |
| br | Дочерний для P/A/SPAN и др. Используется для создания принудительного переноса текста, обычно используется в тегах P (абзац), SPAN (выделение) и A (ссылка). | Нет смысла добавлять атрибуты. | <p>Одна строка<br>Вторая строка</p> | Нет | |
| 15 | img | Тег для отображения картинки по ссылке. Можно отобразить картинку из Интернета (если плата подключена к интернету), либо с локального хранилища (нужно много места для картинки). Указываем адрес картинки в атрибуте SRC (сокр. source — источник), размеры в атрибутах HEIGHT (высота) и WIDTH (ширина). Атрибут ALT выводит указанный текст, если не удалось загрузить картинку. | src=»адрес картинки» width=»ширина в пикселях» height=»высота в пикселях» alt=»текст вместо картинки» | <img src=»image001.png» width=»400px» alt=»Тут должна быть картинка, но не получилось загрузить»> | Нет |
| 16 | video | Тег для отображения видео по ссылке. Можно отобразить видео из Интернета (если плата подключена к интернету), либо с локального хранилища (нужно очень много места для видео). Указываем адрес видео в атрибуте SRC, размеры в атрибутах HEIGHT и WIDTH. Чтобы у видео появилась панель управления, нужно добавить атрибут CONTROLS без параметров. Атрибут AUTOPLAY делает автовоспроизведение видео после загрузки страницы. | src=»адрес видео» width=»ширина в пикселях» height=»высота в пикселях» controls autoplay | <video src=»my-video.mp4″ width=»500px» class=»main-player» controls autoplay id=»mainVideo»></video> | Нет |
| 17 | iframe | Тег для отображения другой веб-страницы прямо внутри нашей. | class=»имя для стилей» id=»айди для скрипта» | <iframe src=»https://www.arduino.cc» width=»100%» height=»600px»>Загружаем сайт ARDUINO.CC …</iframe> | Да |
| 18 | form | Тег для создания формы с полями и кнопкой для последующей отправки на сервер для обработки. Но для наших целей можно не использовать, так как у нас JavaScript и всё обрабатывается на странице. | class=»имя для стилей» id=»айди для скрипта» | <form>форма</form> | Да |
| 19 | input | Тег для создания поля. Имеет разные типы, которые указываются в атрибуте TYPE. Например: 1. тип TEXT отображает поле для ввода текста и чисел. Для этого типа текст нужно указывать в атрибуте PLACEHOLDER, атрибут VALUE обозначает текстовое значение поля. 2. тип NUMBER отображает поле для ввода только чисел, без возможности ввести буквы, а с краю поля есть стрелочки для +/- числа. 3. тип BUTTON отображает кнопку, в VALUE пишем текст кнопки. 4. тип COLOR отображает удобный интерфейс для выбора цвета. | type=»text/number/button/color» class=»имя для стилей» name=»имя этого поля» id=»айди поля для скрипта» value=»текст на кнопке» placeholder=»текст в поле на фоне» | <input type=»text» id=»textovoepole» placeholder=»Напиши сюда»> | Нет |
| 20 | button | Отдельный тег, создающий кнопку. Тег парный, текст кнопки указывается между тегами. | name=»имяэтогополя» id=»айдиполядляскрипта» onclick=»вызываемаяфункция» | <button id=»btn01″ onclick=»func()»>Кнопка</button> | Да |
| 21 | |||||
| № | НАЗВАНИЕ ТЕГА | ОПИСАНИЕ ТЕГА | ПОПУЛЯРНЫЕ АТРИБУТЫ | ПРИМЕР НАПИСАНИЯ | ПАРНЫЙ да/нет |
ОСНОВА СТРАНИЦЫ НА HTML
У любой HTML страницы есть основа. Вот здесь можете скопировать основу для любой веб-страницы:
<!DOCTYPE html>
<html>
<head>
<title>Пример страницы</title>
<style>
/* Стили пишем тут */
</style>
</head>
<body>
<!-- Здесь пишем основной код страницы -->
<script>
<!-- А здесь пишем код на JavaScript для интерактивности страницы -->
</script>
</body>
</html>
Теперь вы можете создать веб-интерфейс на HTML. Если вы не хотите копаться в коде страницы, можете сделать простой, удобный и красивый веб-интерфейс на библиотеке GyverPortal.
Спасибо за внимание! =)