HTML

HTML (англ. HyperText Markup Language) — это язык для гипертекстовой организации страницы, если перевести дословно. Его используют, чтобы показать браузеру как нужно корректно отображать сайт. С его помощью расставляют текст и изображения там, где они нужны.

Основа HTML - это теги. С помощью таких своеобразных команд браузер понимает, где нужно поставить текстовый блок, а где разместить изображение. Для каждого элемента страницы нужен свой тег. Например, <img>. Его используют для того, чтобы сообщить HTML, где нужно изображение. С ним парой идет атрибут src. С ним HTML размещает ссылку на саму картинку.

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

Для пользователя такой код будет выглядеть примерно так:

Для оформления текста используют тег <p>. Он парный, в конце строки должен стоять заключительный </p>. Такие теги применяют для разметки:

• контейнеров
• абзацев
• заголовков
• списков
• таблиц и т.д.

Такие блоки можно разнообразить другими визуальными элементами. Например, как мы показали в примере, вставить картинку.

Для изменения положения текста на странице также нужен свой тег. Например, в блоке <center> сообщение от кота Семёна выглядело бы так:

Алгоритм работы HTML такой:

1. Ввести в адресную строку адрес сайта или страницы
2. Браузер запрашивает этот сайт и получает файл в формате .html
3. Код из полученного файла обретает визуальное

В разных браузерах внешний вид сайта может отличаться - это нормально. Отображение визуала зависит от версии, системы и типа обозревателя.

Корректному отображению информации может помешать ошибка в коде. Рассмотрим это на примере вставки таблицы. Для неё используют тег <table>. <tr> — это ряд, а <th> и <td> — столбцы.

Вот как код будет выглядеть на сайте:

В этом примере число цена галстука “уехала” из столбца, где она должна быть, в ряд с нумерацией. Это из-за того, что HTML не понял, где его нужно разместить. На это повлияла ошибка в 4 ряду кода.

Подведем небольшой итог. HTML создаёт основу для сайта. Он оформляет такие элементы сайта, как:

• абзацы
• ссылки
• изображения
• таблицы
• блоки
• формы
• заголовки и т.д.

Пока существует только пять версий языка. Первая вышла между 1986 и 1991 годами, а последняя (5.2) — в 2017. По задумке разработчиков, HTML должен стать независимым от других языков. Но из-за развития технологий и больших требований к мультимедиа, такого не случилось.

В итоге, код по-разному видят пользователи разных браузерах и разных устройств. Однако, сейчас пользователь смартфона привык к минималистичному дизайну сайта. Но владелец ПК ожидает от него большего.

Сейчас HTML может поставить текст и изображения в правильном порядке. Но, его функционал не способен:

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

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

С этой версией также пришёл встроенный плеер, как альтернатива Adobe Flash Player. С атрибутом draggable можно сделать простую анимацию, которая будет выглядеть как перетаскивание элемента с одного места на другое.

Команда разработчиков HTML стремится к тому, чтобы ускорить разработку и снизить нагрузку на браузер. Но пока его возможности не настолько велики, как хотелось бы. Для полноценной разработки сайтов всё ещё нужны другие языки. Так CSS - более детальный редактор визуала для веб-разработки. В нём прописывают отступы, выравнивания, позиционирование, прозрачность, границы, тени и многое другое. Для прописывания действий пользователя требуется знание JS. Без него не прописать уникальные анимации нажатия кнопок.

Как вы заметили, главный элемент HTML - это теги и атрибуты. В настоящих языках программирования синтаксис выстроен сложнее. У настоящих языков есть переменные, операторы условия, функции и другие элементы. У каждого языка свой набор таких частей. Однако, в некоторых источниках можно увидеть HTML как язык программирования, что технически неточно.

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