HTML - это аббревиатура, происходящая от английских слов HyperText Markup Language, или “язык гипертекстовой разметки”. Формально html - не язык программирования. Он не использует функции, операторы и прочие атрибуты для создания полноценных программ. Гипертекст работает через теги. С их помощью он сообщает интернет-браузеру, какой элемент нужно показать на экране и где его можно найти. Но разберемся во всем по порядку.
Сферы применения языка html
Гипертекстовая разметка предназначена для разработки сайтов. Через нее на веб-страницы добавляются тексты, таблицы, изображения, видеоролики и другие объекты. Кроме того, на html можно создать простейшие формы для сбора данных - например, поля для ввода текста или таблицы с выбором одной из предложенных опций.
Рассматриваемый язык (будем все же говорить так, несмотря на формальности) - профессиональная область знаний для вебмастеров, seo-специалистов, интернет-маркетологов. При этом для всех владельцев сайтов - в том числе директоров и менеджеров коммерческих компаний - будет не лишним понимание основ html.
Когда не стоит применять html
Для полноценного форматирования страниц сайтов - смены шрифтов, обозначения отступов и редактирования прочих параметров обычно используют не html код, a CSS. Это отдельные файлы, в которых на специальном языке прописываются правила - как и во что браузер должен “покрасить” каждый элемент заданной через html структуры.
CSS значительно экономит время, затрачиваемое на верстку страниц. Вебмастеру не приходится каждый раз по новой указывать параметры форматирования для однотипных элементов. Вместо этого стили прописываются один раз в отдельном файле.
Активные формы для сбора обрабатываемых данных, как и пользовательские скрипты, обычно пишутся на JavaScript. Этот язык программирования обладает значительно большим количеством функций, чем html, и с его помощью проще обеспечить безопасность передаваемой информации.
История языка
Гипертекст появился на рубеже 80-х и 90-х годов как стандартизированное средство для быстрой верстки web страниц, и изначально включал в себя лишь 18 базовых элементов. В первые годы существования язык разметки активно развивался. Уже к 1999 году появилась версия html 4.01, содержащая множество новых возможностей в сравнении с первыми спецификациями.
Актуальная версия html - 5.3, действует с конца 2018 года.Она поддерживается большинством браузеров. Сайты, использующие устаревший синтаксис, могут отображаться некорректно в современных программах.
Отдельно стоит упомянуть XHTML - гипертекстовый язык, основанный на синтаксисе XML. Он схож со стандартным html, но предъявляет более строгие правила к написанию кода. Например, все спецсимволы в нем (&, <> / и другие) прописываются в виде сущностей - например, “&”.
Как работает html
Когда пользователь вводит адрес сайта в соответствующую строку, браузер посылает запрос к серверу. В качестве ответа сервер отправляет html-документ, который расшифровывается браузером. Передаваемый файл содержит как отформатированный через теги текст, так и гиперссылки на дополнительные документы - изображения, видео, стили и скрипты. Браузер последовательно выгружает всю полученную информацию. Пользователь видит страницу уже в готовом виде. Открыть исходный код можно кликнув правой кнопкой мыши в области просмотра сайта и выбрав в меню пункт “Просмотр кода страницы”.
Гипертекст выступает “каркасом” сайта, его общей схематической картой.
Основная единица html - тег. С помощью тегов задаются конкретные элементы страницы. Так <p> обозначает текстовый абзац, а <img> - изображение.
Тэги бывают одиночными и парными. После открывающего тега <p> всегда должен идти закрывающий - </p>. То же самое относится к контейнерам (div), заголовкам (h1-h6), таблицам (table) и другим объектам. Но, например, для разрыва строки - <br>, закрывающая метка не требуется.
Часто теги сопровождаются атрибутами, через которые элементам на странице присваиваются дополнительные параметры - цвет, размер, расположение на экране. Так, чтобы выровнять текст по правому краю, к метке p нужно добавить атрибут align со значением right.
<p align = “right”>Текст абзаца</p>
Похожим образом на страницу добавляются ссылки.
<a href = “https://example.com”>Текст ссылки</a>
Тег img также сопровождается атрибутами.
<img src="picture.jpg" width="250" height="500" alt="альтернативное описание" >
В примере задаются ширина и высота изображения, а также текст, который появится на экране, если браузер не сможет загрузить картинку.
Кавычки и знак равно - стандартный синтаксис для указания значений атрибутов.
Опечатки в html коде приводят ошибкам в отображении страницы. Если тег будет прописан неправильно, браузер просто не сможет определить, какой фрагмент нужно отобразить на экране. Но регистр написания тегов значения не имеет. Записи <img> и <IMG> воспринимаются браузером одинаково.
Базовая структура страницы и ее элементов
HTML документ состоит из заголовка и основного тела. Заголовок обозначается парным тегом <head>. Внутри него размещаются все служебные метки и элементы. Вот основные из них:
- title - название страницы;
- description - краткое описание контента;
- кодировка страницы;
- ссылки на файлы со стилями;
- java-скрипты, например, счетчики аналитики.
Непосредственно демонстрируемый пользователю контент размещается внутри тега <body>. Все элементы - абзацы, таблицы, изображения и пр. последовательно прописываются в теле страницы.
HTML документ может также содержать неотображаемые комментарии. С их помощью веб разработчик может пояснить назначение конкретных элементов в коде или указать другую важную информацию. Синтаксис комментария выглядит так:
<!-- Поясняющий текст -->
В начале документа всегда указывается его тип - <!DOCTYPE html> и открывающий тег <html>.
Базовая страница с заголовком и текстом будет выглядеть так:
<!DOCTYPE html>
<html>
<head>
<title>Информативный заголовок</title>
<meta name="description” content="Описание страницы”>
</head>
<body>
<h1>Главный заголовок</h1>
<p>Hello world!</p>
</body>
</html>
Этот код можно скопировать в блокнот и, сохранив документ в формате .html, открыть через браузер. Получится такая картинка
Содержание тега title отображается в названии вкладки браузера.
Мета-тег description используется поисковыми системами. По нему поисковые роботы определяют содержание страницы, а текст тега выводится в описании сайта в результатах поиска.
Совместимость языков
Чаще всего html применяется совместно со следующими технологиями.
-
PHP
Инструмент для создания веб-приложений и служебных скриптов. На нем пишутся различные формы для сбора данных, счетчики аналитики и другие элементы страницы. PHP также используется для обработки сессии cookies, загрузки и интерпретации файлов, работы с базами данных.
-
JavaScript.
Язык программирования, приложения на котором легко встраиваются в html - как сами по себе, так и в виде ссылки на отдельный файл. Скрипты на JS делают сайт интерактивным. Пользователи могут загружать собственные посты и файлы, отправлять сообщения, получать оповещения о новых событиях и т.д.
-
Ajax
Предназначен для асинхронной работы с сервером, в том числе для обновления данных на странице без перезагрузки.
Плюсы и минусы html
Гипертекст обладает рядом весомых преимуществ, за счет которых остается актуальным средством разработки даже в 2022 году.
-
Универсальность.
Сейчас сайты на html, за редким исключением, одинаково отображаются во всех браузерах - от Microsoft Edge и Mozila FireFox до Safari и Google Chrome.
-
Простота использования.
Структура html понятна даже для новичка в программировании. К тому же браузеры не сильно “придираются” к синтаксису, в отличие от компиляторов других языков, где каждая точка должна быть на своем месте.
-
Интегрируемость.
В сочетании с CSS, PHP и JavaScript гипертекстовая разметка превращается в полноценный инструмент для разработки сайтов разной сложности, в том числе интернет-магазинов и новостных порталов.
-
Поддержка.
За обновление и развитие стандартов языка html отвечает Консорциум Всемирной Паутины (W3C).
-
Готовые шаблоны и фреймворки.
Сейчас вебмастерам доступно большое количество инструментов для создания сайтов на html - как небольших плагинов, так и масштабных фреймворков.
При всех плюсах, гипертекст обладает рядом недостатков..
-
Ограниченные возможности.
На чистом html можно написать только небольшие статичные сайты с простым дизайном. Для расширения доступного функционала нужно подключать скрипты и плагины на других языках.
-
Необходимость постраничной проработки.
Гипертекст не предполагает создания общей логики всего сайта. Даже шапка и футер прописываются отдельно на каждой странице.
Заключение
HTML - универсальное средство для разработки каркаса веб страницы. С его помощью на сайт добавляются тексты и мультимедийные объекты, создаются шаблоны верстки. Главный плюс гипертекстового языка - простота и универсальность синтаксиса. Сайты на html легко дорабатываются и модифицируются.
HTML, как правило, работает в связке с CSS, PHP и JavaScript. Вместе эти инструменты позволяют разрабатывать полноценные площадки с интерактивными пользовательскими функциями и сложными интерфейсами.
