Система автополива

Всем привет!

Хочу поделиться своей самоделкой, которая служит мне уже больше года.
Начав осваивать Arduino, думал над тем, какой бы проект реализовать. Вспомнил, что у меня много комнатных растений, которые периодически забывают поливать, да и вопрос полива во время отпусков и командировок имеет место быть. 

Система состоит из следующих компонентов:

Блок управления – сердце системы. Здесь находится Аккумуляторы, Arduino, модуль времени DS3231, дисплей, преобразователи напряжения и органы управления.

Могут понадобиться

Беспроводной радио модуль Arduino NRF24L01
Драйвер двигателей на L293
Контроллер Arduino UNO
TM1637 7-сегментный светодиодный модуль-дисплей
Беспроводная система управления на 433 Мгц

Рядом с растениями расположена канистра с водой. В канистре находятся погружные помпы, которые перекачивают воду по трубкам в растения. 

Распределение воды между растениями можно дополнительно отрегулировать с помощью гребенки с кранами

Все технические элементы системы можно спрятать за шторы и горшки, чтобы сильно не бросались в глаза

Основные параметры системы:

1. Автономная работа от аккумуляторов около 5 месяцев
2. Система поддерживает управление 3-мя помпами. К каждой помпе можно подключить гребенку с 2-4 кранами и дополнительно регулировать потоки воды. Итого получаем возможность подключить до 12 растений 
3. Время снимается с отдельного независимого модуля часов DS3231. Помпа срабатывает при наступлении часа, указанного в настройке (например 8:00) . 
4. На дисплей выводится информация
5. Настройки полива указываются в коде программы, их можно поменять, перепрошив Arduino

Пояснения по отображаемой на дисплее информации:
Первая строка – шапка таблицы. Каждая строка показывает информацию по соответствующей помпе. Первый столбец – показывает период работы (ПР) . Например при значении «5» — помпа будет срабатывать каждые 5 дней. Второй столбец – час работы (ЧР) – час в начале которого включится помпа. Третий столбец – время работы (ВР) – продолжительность работы помпы в секундах. Четвертый столбец – дней осталось (ДО) – показывает сколько осталось дней до ближайшего срабатывания. Дата и время также выводятся на дисплей.

Система не имеет обратной связи, поэтому настройки нужно подбирать опытным путем. Лучше всего группировать растения близкие по требованиям к поливу (какие-то хорошо переносят засуху, другие наоборот любят обильный полив) и размерам горшков.
Настройки задаются примерно следующим образом: каждые 5 дней включать помпу в 8:00 на 30 секунд.
Ниже будет указано, в какой части кода эти настройки находятся.

В коде программы можно отключить 2-ю и 3-ю помпы. В этом случае на экран будет выводиться информация только по включенным помпам. 

Автономность обеспечивается благодаря:
• Питанию от аккумуляторов формата 18650
• Ардуино и уходит в глубокий сон (Powerdown) и просыпается по Watсhdog
• У стабилизатора напряжения Arduino откушена левая нога 
• Дисплей во время работы находится в выключенном состоянии. Для активации дисплея нужно удерживать кнопку выхода из сна около 10 секунд.
• С модулей выпаяны все индикаторные светодиоды

Система потребляет около 3мА, 1 помпа потребляет около 350 мА в режиме работы.

Основные Детали:

• Пищевой контейнер для корпуса
• Китайский клон Arduino nano
•  DS3231 Модуль реального времени
• Аккумуляторы формата 18650 
• Повышающий модуль до 5В (ток около 1 А)
• Понижающий модуль до 3,3В для питания дисплея
• Дисплей Nokia 5110
• TP4056 модуль для зарядки (+защита) аккумулятора 
• Индикатор зарядки аккумулятора
• Различная «рассыпуха»: полевые транзисторы, резисторы, конденсаторы (электролитические и керамические) 
•  Выключатели и кнопки 

Монтажная «схема» устройства:

Пояснения по схеме:

1. 4 аккумулятора формата 18650 соединены параллельно. Общая емкость – около 13000 мА/ч.
2. Аккумулятор подключен к зарядно — защитному модулю TP4056. Зарядка осуществляется через разъем micro USB от телефонной зарядки. Зарядка нужна с током не менее 1А. Примерное время полной зарядки – 13 -14 часов. Индикаторные светодиоды можно выпаять и вывести на корпус.
3. Далее через выключатель подключен повышающий преобразователь до 5В. Он будет питать большую часть компонентов схемы, включая помпы. С падением уровня заряда аккумуляторов напряжение снизится с 4,2В до 2,7В, что для работы схемы не достаточно. Модуль обеспечит стабильное напряжение. На выход модуля ставится фильтр из электролитического и керамического конденсаторов. Электролитический конденсатор выполняет сглаживающую, стабилизирующую роль. Керамический конденсатор служит для борьбы с высокочастотными помехами. Если у модуля «пищит» дроссель во время работы, для устранения этого явления можно поставить ещё дополнительный электролитический конденсатор на вход модуля. Электролитические конденсаторы емкостью 1000 мкФ на 6,3В. Керамические конденсаторы подойдут от 1-2 мкФ. В схеме использованы на 10 мкФ, потому, что у меня было много лишних.
4. Для питания дисплея нужно напряжение 3,3В, поэтому добавляется понижающий преобразователь с аналогичными фильтрами из конденсаторов.
5. Модуль часов DS3231, нужен для более точного отсчета времени. Светодиод Power (1) отпаян у модуля DS3231. Сделано это для целей энергосбережения. Если вы используете обычные батарейки (не аккумуляторные), то нужно отпаять резистор (2). Модуль рассчитан на аккумуляторные батарейке в том числе заряжает их. Если батарея обычная, зарядный ток быстро приведет ее в негодность.

6. Основной мозг системы – платформа Arduino nano. Для целей энергосбережения нужно отпаять все светодиоды (или хотя бы только Power), а также откусить левую ногу стабилизатора напряжения. \

7. Управление помпы осуществляется через полевые транзисторы. Подойдут любые, которые открываются 5В напряжением и способны коммутировать ток от 1А. Сначала я использовал готовые. Я спаял батарею из полевых транзисторов + резисторы (100 Ом для защиты Arduino, 10к Ом для подтягивания затвора транзистора к земле, чтобы мосфет закрывался)+ также припаял разъемы KF 301-2P для фиксации проводов

8. На дисплей выводится вся информация. Для пробуждения дисплея, нужно удерживать кнопку до 10 секунд. При смене минуты в часах система уйдет в сон, а дисплей отключится.

Дополнительные моменты по сборке:
• Емкость с водой, должна обязательно располагаться ниже горшков, иначе есть риск, что после отключения помп вода продолжит литься.
• Расстояние от дна емкости до конца трубки не должно превышать 70см. На большую высоту помпе будет сложнее поднять воду.
• На мини помпу с Али отлично подходят прозрачные шланги 6х1,5 мм
• Важно чтобы отверстие помпы для забора воды не упиралась в стенку емкости с водой, иначе нормального напора не будет.
• Для крепления шланга на помпу нельзя использовать железные детали (хомуты, проволоку и т.д.) Всё ржавеет очень быстро.
• У помпы короткие провода. Их скорее всего придется наращивать. Для герметизации проводов лучше всего использовать термоклей, а сверху термоусадку. 

Логика работы программы:

• Arduino выходит из сна
• Показания модуля DS3231 (дата и время) присваиваются переменным
• При изменении даты меняется значение счетчика прошедших дней
• Если период работы (настройка) совпадает с числом прошедших дней, проверяется час
• При совпадении часа (настройка) и часа из модуля времени включаем помпу на время указанное в настройках
• Arduino уходит в сон
• Если удерживать кнопку выхода из сна подается питание на дисплей и Arduino пробуждается

Настройки полива указываются вот в этой части кода:


Отличие аналоговых пиров от цифровых

На этом занятии мы рассмотрим, цифровые и аналоговые выходы Arduino, разберем чем отличается цифровой сигнал от аналогового. Соберем с помощью макетной платы схему из двух светодиодов и будем плавно регулировать их яркость. Рассмотрим тип данных int, условный оператор if и команду analogWrite для управления аналоговыми портами в языке программирования Ардуино.

Чем отличается аналоговый сигнал от цифрового

Аналоговый сигнал непрерывно изменяется во времени. Вся информация в природе аналоговая — волны на воде, колебание струны и т.д. Изначально человек записывал информацию (звуки, изображения, видео) с помощью аналоговых устройств. Но аналоговые сигналы чувствительны к воздействию шумов и помех.

Цифровой сигнал передается в виде единиц и нулей, для компьютеров и цифровой техники это проще реализовать (есть сигнал или нет сигнала). Для оперативной памяти в компьютерах используют конденсаторы, один заряженный конденсатор — 1 бит. На флеш-памяти используют транзисторы с плавающим затвором.

С появлением компьютеров аналоговые сигналы стали переводить в цифру, поскольку аналоговый сигнал подвержен искажениям и затуханию при передаче или записи. Наглядно продемонстрировать разницу между аналоговым и цифровым сигналом поможет картинка, где изображен процесс квантования — разбиение непрерывной величины на конечное число интервалов (перевод аналогового сигнала в цифру).

Квантование — разбиение диапазона непрерывной величины на конечное число интервалов

Квантование — разбиение непрерывной величины на интервалы

Аналоговые и цифровые выходы на Ардуино

Если вы хотите регулировать выходное напряжение на порте, то следует использовать пины, помеченные символом «~». Для Arduino Uno — это 3, 5, 6, 9, 10, 11. С помощью аналоговых портов на Arduino можно выдавать любое напряжение 0 до 5 Вольт. Цифровые выходы Arduino можно только включать (5 Вольт) и выключать (0 Вольт). Аналоговые порты используют ШИМ (широтно-импульсную модуляцию), по английски PWM (pulse-width modulation), с помощью которой имитируется аналоговый сигнал.

гнал.

Аналоговые выходы на Ардуино имеют, отметку тильда

Аналоговые выходы на плате Ардуино имеют, отметку тильда «~»

Чтобы понять разницу между цифровым и аналоговым сигналом, соберите на макетной плате схему из светодиода и резистора, как на первом занятии — Подключение светодиода. Но в этот раз подключите светодиод к аналоговому выходу ~9. Откройте скетч для мигания светодиодом из первого занятия и измените в нем порт выхода с Pin13 на Pin9. Загрузите скетч в плату Arduino NANO или UNO.

На Arduino аналоговый выход будет работать, как цифровой

На Arduino аналоговый выход будет работать, как цифровой

9 порт может работать, как цифровой выход. Но если функцию digitalWrite изменить на analogWrite, то вместо значения HIGH (1) и LOW (0) можно поставить любое значение от 0 до 255. Именно в этом интервале можно менять напряжение на аналоговых выходах. Загрузите программу для плавного включения и затухания светодиода. Скачать готовый скетч можно можно по ссылке здесь с Google Дис

Скетч. Аналоговый сигнал Ардуино

int svet = 0; // начальная яркость свечения светодиодаint fade = 5; // шаг изменения яркости свечения светодиода

void setup() {
  pinMode(9, OUTPUT); // используем Pin9 для операции вывода
}

void loop() {
 // устанавливаем яркость светодиода на Pin9analogWrite(9, svet);

// изменяем яркость, прибавляя заданную величину fade в каждом цикле
  svet = svet + fade;

// меняем порядок затухания при минимальной и максимальной яркостиif (svet == 0 || svet == 255) {
    fade = -fade;
  }

  delay(20); // устанавливаем паузу для эффекта
}

C/C++ основы

Данный материал для тех, кто хочет изучить языки С/С++ от самых его основ до сложнейших конструкций.

C++ является языком программирования, знание этого языка программирования позволит вам управлять вашим компьютером на высшем уровне. В идеале вы сможете заставить компьютер сделать всё, что сами захотите. Наш сайт поможет вам в освоении языка программирования C++.

Установка /IDE

Самое первое, что вы должны сделать, прежде чем приступить к изучении C++, это убедиться, что у вас есть IDE — интегрированная среда разработки (программа в которой вы будете программировать). Когда определитесь с выбором IDE, установите её и потренируйтесь создавать простые проекты.

Введение в язык C++

Язык C++ представляет собой набор команд, которые говорят компьютеру, что необходимо сделать. Этот набор команд, обычно называется исходный код или просто код. Командами являются или «функции» или «ключевые слова». Ключевые слова(зарезервированные слова С/С++) являются основными строительными блоками языка. Функции являются сложными строительными блоками, так как записаны они в терминах более простых функций — вы это увидите в нашей самой первой программе, которая показана ниже. Такая структура функций напоминает содержание книги. Содержание может показывать главы книги, каждая глава в книге может иметь своё собственное содержание, состоящее из пунктов, каждый пункт может иметь свои подпункты. Хотя C++ предоставляет много общих функций и зарезервированных слов, которые вы можете использовать, все-таки возникает потребность в написании своих собственных функций.

В какой же части программы начало? Каждая программа в C++ имеет одну функцию, её называют главная или main-функция, выполнение программы начинается именно с этой функции. Из главной функции, вы также можете вызывать любые другие функции, неважно, являются ли они написанными нами, или, как упоминалось ранее, предоставляются компилятором.

Так как же получить доступ к этим Стандартным функциям? Чтобы получить доступ к стандартным функциям, которые поставляются с компилятором, необходимо подключить заголовочный файл используя препроцессорную директиву — #include. Почему это эффективно? Давайте посмотрим на примере рабочей программы:

Следующая важная строка программы int main(). Эта строка сообщает компилятору, что есть функция с именем main, и что функция возвращает целое число типа int. Фигурные скобки { и } сигнализируют о начале { и конце } функции. Фигурные скобки используются и в других блоках кода, но обозначают всегда одно — начало и конец блока, соответственно.

В C++ объект cout используется для отображения текста (произносится как «Cи аут»). Он использует символы <<, известные как «оператор сдвига», чтобы указать, что отправляется к выводу на экран. Результатом вызова функции cout << является отображение текста на экране. Последовательность \nфактически рассматривается как единый символ, который обозначает новую строку (мы поговорим об этом позже более подробно). Символ \nперемещает курсор на экране на следующую строку. Опять же, обратите внимание на точку с запятой, её добавляют в конец, после каждого оператора С++.

Следующая команда cin.get(). Это еще один вызов функции, которая считывает данные из входного потока данных и ожидает нажатия клавиши ENTER. Эта команда сохраняет консольное окно от закрытия, до тех пор пока не будет нажата клавиша ENTER. Это даёт вам время для того, чтобы посмотреть результат выполнения программы.

По достижении конца главной функции (закрывающая фигурная скобка), наша программа вернёт значение 0 для операционной системы. Это возвращаемое значение является важным, поскольку, проанализировав его, ОС может судить о том,   успешно завершилась наша программа или нет. Возвращаемое значение 0 означает успех и возвращается автоматически (но только для типа данных int, другие функции, требуют вручную возвращать значение), но если бы мы хотели вернуть что-то другое, например 1, мы должны были бы сделать это вручную.

Для закрепления материала, наберите код программы в своей IDE и запустите его. После того, как программа запустилась, и вы увидели результат работы, поэкспериментируйте немного с оператором cout. Это поможет вам привыкнуть к языку.

Обязательно комментируйте свои программы!

Добавляйте комментарии к коду, чтобы сделать его понятнее не только для себя но и для других. Компилятор игнорирует комментарии при выполнении кода, что позволяет использовать любое количество комментариев, чтобы описать реальный код. Чтобы создать комментарий используйте или //, который сообщает компилятору, что остальная часть строки является комментарием или /* и затем */. Когда вы учитесь программировать, полезно иметь возможность комментировать некоторые участки кода, для того, чтобы увидеть, как изменяется результат работы программы. Подробно прочитать о технике комментирования, вы можете тут.

Что делать со всеми этими типами переменных?

Иногда это может сбить с толку — иметь несколько типов переменных, когда кажется, что некоторые типы переменных являются избыточными. Очень важно использовать правильный тип переменной, так как некоторым переменным, требуется больше памяти, чем другим. Кроме того, из-за способа хранения в памяти, числа с плавающей точкой, типы данных float и double являются «неточным», и не должны использоваться, когда необходимо сохранить точное целое значение.

Объявление переменных в C++

Чтобы объявить переменную используется синтаксис тип <имя>;. Вот некоторые примеры объявления переменных:

Допустимо объявление нескольких переменных одного и того же типа в одной строке, для этого каждая из них должна быть отделена запятой.

Если вы смотрели внимательно, вы, возможно, видели, что объявление переменной всегда сопровождается точкой с запятой.

Распространенные ошибки при объявлении переменных в C++

Если вы попытаетесь использовать переменную, которую не объявили, ваша программа не будет скомпилирована, и вы получите сообщение об ошибке. В C++, все ключевые слова языка, все функции и все переменные чувствительны к регистру.

Использование переменных

Итак, теперь вы знаете, как объявить переменную. Вот пример программы, демонстрирующий использование переменной:

Давайте рассмотрим эту программу и изучим её код, строку за строкой. Ключевое слово intговорит о том, что number — целое число. Функция cin >> считывает значение в number, пользователь должен нажать ввод после введенного числа.  cin.ignore () — функция, которая считывает символ и игнорирует его. Мы организовали свой ввод в программу, после ввода числа, мы нажимаем клавишу ENTER, символ который также передаётся в поток ввода. Нам это не нужно, поэтому мы его отбрасываем. Имейте в виду, что переменная была объявлена целого типа, если пользователь попытается ввести десятичное число, то оно будет обрезано (то есть десятичная часть числа будет игнорироваться). Попробуйте ввести десятичное число или последовательность символов, когда вы запустите пример программы, ответ будет зависеть от входного значения.

Обратите внимание, что при печати из переменной кавычки не используются. Отсутствие кавычек сообщает компилятору, что есть переменная, и, следовательно, о том, что программа должна проверять значение переменной для того, чтобы заменить имя переменной на её значение при выполнении. Несколько операторов сдвига в одной строке вполне приемлемо и вывод будет выполняться в том же порядке. Вы должны разделять строковые литералы (строки, заключенные в кавычки) и переменные, давая каждому свой оператор сдвига <<. Попытка поставить две переменные вместе с одним оператором сдвига << выдаст сообщение об ошибке. Не забудьте поставить точку с запятой. Если вы забыли про точку с запятой, компилятор выдаст вам сообщение об ошибке при попытке скомпилировать программу.

Изменение и сравнение величин

Конечно, независимо от того, какой тип данных вы используете, переменные не представляют особого интереса без возможности изменения их значения. Далее показаны некоторые операторы, используемые совместно с переменными:

  • * умножение,
  • - вычитание,
  • + сложение,
  • / деление,
  • = присвоение,
  • == равенство,
  • > больше,
  • < меньше.
  • != неравно
  • >= больше или равно
  • <= меньше или равно

Операторы, которые выполняют математические функции, должны быть использованы справа от знака присвоения, для того, чтобы присвоить результат переменной слева.

Вот несколько примеров:

Вы часто будете использовать == в таких конструкциях, как условные операторы и циклы.

Данные примеры не очень наглядно показывают использование знаков сравнения, но когда мы начнём изучать операторы выбора, вы поймете, зачем это надо.

HTML основы

Основные понятия

HTML (HyperText Markup Language) — язык разметки гипертекста — предназначен для создания Web-страниц.

Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.

HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-броузер на компьютере пользователя Интернета. 

HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

Даже, если вы не собираетесь в дальнейшем редактировать «вручную» текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и «читаемым» при просмотре броузерами разных фирм.

Основными компонентами HTML являются:

• Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения.

• Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.

• Значение. Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.

Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше). 

Закрытие тега отличается от открытия только наличием символа ‘/’.

Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом <X>, и мы хотим применить его к словам «Это мой текст».

HTML-последовательность кодов и собственно текста будет выглядеть так:

<X>Это мой текст</X>

Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида <teg1><teg2></teg2></teg1>, но не <teg1><teg2> </teg1></teg2>.

Действие вложенных тагов объединяется.Например, если внутрь тега, создающего жирное начертание шрифта, вложен тег курсива, то в результате получится жирный курсив.

Первое правило

Первое правило HTML: закрывайте все, что вы открыли! 

НО! Из этого правила, как и из всех остальных, существуют исключения.

HTML- программа должна начинаться тегом <HTML> и заканчиваться тегом </HTML>

<HTML>

…… (здесь будут другие теги программы)

</HTML>

HTML- программы состоят из двух основных частей: заголовка и тела. Заголовок ограничивается парой тегов<HEAD> и </HEAD>, а тело — парой тегов<BODY> и </BODY>.

В результате HTML- программа выглядит следующим образом:

<HTML>

<HEAD>

… (здесь будет заголовок)

</HEAD>

<BODY>

…. (здесь будут другие теги тела программы)

</BODY>

</HTML>

Кроме того, каждая HTML- программа имеет заголовок, который помещается в заголовок окна броузера. Заголовок окна броузера создается при помощи двух тегов <TITLE> и </TITLE> и содержится между тегами <HEAD> и</HEAD>.

Тогда программа принимает следующий вид:

<HTML>

<HEAD>

<TITLE> Основы HTML </TITLE> ;

</HEAD>

<BODY>

…. (здесь будут другие теги тела программы)

</BODY>

</HTML>

Некоторые авторы, пишущие об языке HTML, советуют записывать теги прописными буквами, другие — используют строчные. Редактор HTML — Allaire HomeSite 4.5.1, например использует по умолчанию нижний регистр для записи тегов. При создании моих страниц использовались оба варианта написания тегов. Как видите, допустимо и то и другое. Современные броузеры допускают запись тегов в любом регистре. 

Уже позднее я узнала, что нельзя делать категоричные заявления по этому вопросу. Существуют теги и атрибуты «чуствительные» к написанию прописными или строчными буквами. Это регламентируется стандартами языка HTML, определенными Консорциум W3C.

Обращайтесь к первоисточнику!

Хорошее знание технического английского обязательно!

 При написании HTML-программ возникает необходимость вставки комментариев — поясняющих текстов, которые невидны при загрузки документа в броузер. Для этой цели служит тег <!>. Все, что заключено между символами <! и > считается комментарием и не отображается в броузере.

 Еще один тег, который очень важен в HTML-программе, но так же не предназначается для отображения какого-либо объекта в броузере — тег <META>. Этот тег служит специальным целям, а именно — указания языка, на котором написан документ, его кодовой страницы, ключевых слов, используемых поисковыми системами для классификации этого документа и т.п. Теги <META> обычно вставляются в HTML-программу на заключительном этапе создания Web-страницы —публикации.

 Для вставки в HTML-программу фрагмента программ, написанных на языке JavaScript или Viual Basic Script сценариев используют теги <SCRIPT> и </SCRIPT>.

Общая структура HTML-файла

Суммируя вышесказанное приведем общую структуру HTML-файл :

<HTML>

<HEAD>

<Мета-теги>

<Функции скриптов>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

Основная часть документа

</BODY>

</HTML>

Заголовки, абзацы, разрывы строк

Заголовки

Каждый пользователь компьютера, работающий в текстовом редактором Microsoft Word знаком с понятием стиля заголовка. В HTML тоже применяется это понятие для структурирования документа и выделения важности заголовка. Всего существуют 6 стилей заголовка. Каждый из них обозначается в HTML-документе парными тегами  и  Здесь i обозначает важность стиля. H1 обозначает самый важный стиль заголовка, H2 — стиль заголовка второго уровня, а H6 — стиль заголовка самого нижнего уровня.

В подавляющем большинстве случаев для заголовков Web-страниц используют три первых уровня заголовков 

 и 

. Объясняется это тем, что размеры шрифтов оставшихся заголовков (теги

 — 

) меньше размера обычного шрифта Web-страницы.

Вот как в документ можно добавить очень важный заголовок.

An important heading

А вот результат.

An important heading

Посмотрим другие примеры:

Это заголовок второго уровня

Это заголовок третьего уровня

Это обычный текст

Это заголовок четвертого уровня

Это заголовок пятого уровня

Это заголовок шестого уровня

Абзацы

Понятие абзаца в HTML-документе также аналогично понятию абзаца в Microsoft Word. Абзац обозначается в документе парными тегами 

 и 

 . Впрочем, применение закрывающего тега не является строго обязательным. 

НО! Специфика тега 

заключается в том, что после текста, который находится в его пределах, пустая строка добавляется автоматически.

Следует помнить и о другой особенности текстовых абзацев: когда текст достигает правой границы окна Web-браузера. переход на новую строку осуществляется автоматически, независимо от расположения тега

.

Для отдельного абзаца можно указать тип, размер и цвет шрифта отличным от стиля остального документа.

Например:

My greetings to you!

А вот и результат —

My greetings to you!

Разрывы строк

Если в середине строки появилась необходимость ее разорвать — используйте одиночный тег переноса строки .(Это соответствует нажатию клавишной комбинации [Shift]-[Enter] в текстовых процессорах Word). Код 

не означает конца логического абзаца, и за строкой с этим кодом дополнительная пустая строка не появится.

Вот и нарушено первое правило!

Кроме тега  не требует закрытия тег добавления изображения, использование закрывающего тега абзаца

 также не является строго обязательным.

HTML довольно «демократичен»: неправильный тег или неправильное вложение тегов обычно не приводят к «зависаниям» браузера, а только вызывает сообщение об ошибке в строке состояния окна браузера вашего Интернет-читателя. Разумеется ошибки могут привести к неправильному форматированию HTML-документа.

Примером использования тега  может служить написание почтового адреса или стихотворения.

Браузеры показывают текст в своем окне, автоматически осуществляя перенос слов. Поэтому, если вы считаете необходимым запретить разрыв блока текста с пробелами между словами — воспользуйтесь специализированным символом  — символом неразрывного пространства (non-breaking space). Например,

Освежающий и бодрящий напиток Coca Cola,

приобрел широкую популярность в нашей стране.

А вот и результат:

Освежающий и бодрящий напиток Coca Cola, приобрел широкую популярность в нашей стране.

Не следует использовать цепочку символов &nbsp; для выравнивания текста в окне броузера. Для этой целеи рекомендуется использовать таблицы стилей.

Предварительно отформатированный текст

Достоинством браузеров является их способность самостоятельно распределять текст в окне браузера. Но иногда вы не нуждаетесь в этой услуге, хотите самостоятельно определить представление вашего текста в окне браузера. Например, вы хотите представить код программы в наиболее удобочитаемом виде. Такую возможность вам предоставляет тег <pre>. Посмотрим пример:

<pre>

void Node::Remove()

{

if (prev)

prev->next = next;

else if (parent)

parent->SetContent(null);

if (next)

next->prev = prev;

parent = null;

}

</pre>

Это выполнится так

void Node::Remove()

{

if (prev)

prev->next = next;

else if (parent)

parent->SetContent(null);

if (next)

next->prev = prev;

parent = null;

}

Красиво, правда? Привлекает внимание, удобно читать программный код. Это сделано при помощи таблицы стилей.

Обратите внимание на то, что в случае использования тега <pre> , текст отображается броузером точно в таком виде, как он был создан в HTML-документе. Сохраняются все пробелы,табуляцииУ и переводы строк. Исключением является только новая строка, следующая сразу же за тегом <pre>. Таким образом, эти два примера кода HTML на эране дисплея будут показаны одинаково:

<pre>предварительно отформатированный текст</pre>

<pre>

предварительно отформатированный текст

</pre>

А именно:

предварительно отформатированный текст

предварительно отформатированный текст

У этого тега существует необязательный атрибут, указывающий желаемый размер строки в символах, а именно:

<PRE width=»N»>

Попробуем?

Предмет истории есть жизнь народов и человечества.

Непосредственно уловить и обнять словом — описать жизнь не только

человечества, но одного народа, представляется невозможным.

Обычно, для отображения предварительно отформатированного текса используются моноширинные шрифты, все символы которого имеют одинаковую ширину. Для того, чтобы броузер «не забыл» об этом следует применить таблицы стилей. Например, это можно сделать так:

<style type=»text/css»>

pre { color: green; background: white; font-family: monospace; } </style>

Результат такого определения стиля для тега <pre> вы можете видеть на этой странице.

Если вы устанавливаете цвет текста, желательно также установить цвет фона. Это поможет вам избежать ситуации, когда буквы будут практически неразличимы на близком к ним по цвету фоне.

Совет № 2. Вместо того, чтобы устанавливать цвет фона для элемента <pre>, установите цвет фона для элемента <body>. Например, это можно сделать так:

<style type=»text/css»>

body { color: black; background: white; }

pre { color: green; font-family: monospace; }

</style>

Выделенный текст

В тех случаях, когда необходимо обратить особое внимание пользователя на тот или иной фрагмент текста, следует использовать стандартные средства форматирования.

Стандартные средства форматирования представлены специальными тегами, которые обязательно являются парными (т.е. имеются открывающий и закрывающий теги).

Чтобы увеличить размер шрифта на один пункт, используйте тег <big>.

Чтобы выделить текст полужирным шрифтом, воспользуйтесь тегом <b> или тегом <strong>.

Чтобы выделить текст курсивом, воспользуйтесь тегом <i> или тегом <em>.

Вы заметили, что в данном случае выделение текста тегами <i> и <em> различаются?

Объяснение простое — в HTML-коде этой страницы используется внедренная таблица стилей, в которой для тега <em> указан шрифт: полужирный курсив.

Шрифт пишущей машинки можно имитировать с помощью тега <tt>.

С помощью тега <small> размер шрифта можно уменьшить на один пункт.

Существуют и другие теги, которые также предназначены для выделения текста.

Кроме того, в HTML включена поддержка математических символов и научных обозначений. Для построения простейших равенств и выражений вам могут пригодиться два тега <sub> (нижний индекс) и <sup> (верхний индекс). Например:

A2+B2=C2

CO2=углекислый газ

В HTML-коде это записано так:

<p align=»center»>A<sup>2</sup>+B<sup>2</sup>=C<sup>2</sup></p>

<p align=»center»>CO<sub>2</sub>=углекислый газ</p>

Если вы намерены придерживаться хорошего стиля программирования Web-страниц (с помощью HTML и XHTML), то вместо тегов форматирования используйте каскадные таблицы стилей.

На сегодняшний день многие старые теги HTML, которые предназначались специально для выделения текста, вытеснены новыми возможностями форматирования с помощью каскадных таблиц стилей.  

Ультразвуковой датчик HC-SR04

Добрый день, уважаемые схемотехники и программисты. Сегодня мы переходим к третьему уроку.Мы научимся подключать ультразвуковой дальномер HC-SR04 к Arduino. Разберем принцип работы дальномера и программирование этого устройства.
Урок подойдет начинающим, но будет интересен и более опытным инженерам.

Читать далее