Что такое HTML
HTML — язык гипертекстовой разметки. Это стандартный язык разметки, который используется для создания веб-страниц и других типов цифрового контента, который может отображаться в интернете. В этой статье расскажем, чем он полезен и для чего используется.
Из чего состоит HTML-код
HTML-код состоит из набора тегов и текстовых данных, которые определяют структуру и содержимое веб-страницы. Теги — это дескрипторы (или описатели), передающие браузеру информацию о способе отображения содержимого, помещенного между ними. Теги представляют собой элементы языка разметки. У каждого тега есть название, которое заключено в угловые скобки < >.
Например, приведенный ниже HTML-код содержит теги «head» и «body», а также теги «h1» и «p», которые определяют заголовок и абзац текста на странице:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Это абзац текста.</p>
</body>
</html>
Здесь тег «head» определяет метаданные страницы, такие как заголовок страницы, а тег «body» определяет содержимое страницы, которое отображается в браузере.
Что такое теги?
Теги HTML — это команды, которые используются для описания содержимого веб-страницы. Теги используются для создания элементов на веб-странице, таких как заголовки, абзацы, изображения, ссылки и многое другое. Каждый тег начинается с символа «<» и заканчивается символом «>».
Дескрипторы (теги) делятся на парные и непарные. Первые — двухчастные (один тег открывает, другой — закрывает), а вторые — из одной. В то же время, непарный тег можно закрыть, но он будет выполнять свою функцию и без закрытия.
Например, тег <img> нужен, чтоб размещать на сайте изображения. Он непарный. У любого тега есть атрибуты, позволяющие сообщать дополнительную информацию об элементах на странице (размеры, идентификатор элемента, гиперссылки и т. д.).
Итак, у <img> два главных атрибута — src и alt. Первый указывает гиперссылку на файл изображения, а второй сообщает альтернативный текст, который отображается, если изображение невозможно загрузить.
Тег <p> парный и во всех случаях должен быть закрыт тегом </p>. Парные дескрипторы нужны при разметке блоков (это такие элементы, что содержат другие элементы, в том числе блоки другого уровня). Типичные примеры — контейнеры (div), заголовки, абзацы, таблицы и списки.
Заголовок
Заголовок (англ. «header») — это элемент, который используется для определения названия документа или раздела. Заголовки представляют собой текст, который располагается в верхней части веб-страницы или раздела и обычно оформляется более крупным и выделенным шрифтом, чем остальной текст на странице.
В языке HTML заголовки могут быть шести уровней (от <h1> до <h6>). H1 имеет наибольший размер и важность, а h6 — наименьший.
<h1>Добро пожаловать на Elbrusboot.camp</h1>
<h2>Расскажите нам больше</h2>
<h3>О разных уровнях заголовков</h3>
<h4>Их использование и функции</h4>
Заголовок <h1> следует использовать только один раз на странице, поскольку он является основным.
Абзац
Абзацы в HTML делят смысловые отрезки текста, аналогично любому письменному тексту. Для создания абзаца используется дескриптор <p> </p>.
Списки
Существует два основных вида: нумерованные и ненумерованные.
Ненумерованные (маркированные) списки, обозначаются тегом <ul></ul>. Эти списки используются, когда порядок расположения пунктов не имеет значения.
Нумерованный список нужен, когда последовательность его элементов принципиально важна. Он обозначается тегом <ol></ol>.
Каждый элемент списка (независимо от вида) создается при помощи тега <li></li>. Необходимо закрывать этот тег по каждому пункту.
Как HTML работает на сайтах
Рассмотрим, как браузер показывает Вам страницу, используя файлы HTML:
- Пользователь набирает адрес сайта в поисковой строке.
- Браузер посылает запрос на указанный адрес, в ответ получая файл HTML.
- Код из этого файла расшифровывается, и вы видите привычные изображения, текст, анимацию и т. д.
Для каждого из браузеров работают собственные правила, по которым отображаются объекты. Ранее создатели сайтов должны были делать версию каждой страницы под каждый браузер. Если специфика Google Chrome или Safari не учитывалась, сайт мог выглядеть неправильно, что приводило к недовольству пользователей. Однако, благодаря разработке веб-стандартов W3C, сайты теперь отображаются примерно одним образом во любом из браузеров.
Но есть набор обычных ошибок разработчиков. Например, при создании страницы забыли закрыть тег, или содержимое добавили в неправильное место. Тогда в браузере отобразится нечто совсем неожиданное.
HTML-код составляет основу веб-сайта, благодаря которой браузер понимает принцип отображения содержимого, добавляя стили из CSS (язык описания внешнего вида документа) и логику JavaScript. В HTML можно создавать заголовки, абзацы, блоки, гиперссылки, изображения, таблицы и формы.
Цвет и шрифт текста, фоновый цвет блока можно задать прямо в HTML. Все же рекомендуется создать отдельный файл CSS для определения стилей, поскольку это позволяет свободно экспериментировать с множеством свойств (отступы, позиционирование, анимация, тени и прозрачность).
В настоящее время обработка пользовательских действий обычно осуществляется при помощи JavaScript и его фреймворков (программных платформ), но ряд функций, например, перетаскивание объектов (drag-and-drop), последовательно переносятся в HTML. То, что ранее работало только при использовании JavaScript, сегодня уже базовая функциональность HTML.
Какие возможности дает HTML?
Файл HTML можно создать в любом текстовом редакторе (например, Notepad в Microsoft Windows, TextEdit на Mac и Pico на Linux). Но чтобы увидеть, как результат будет выглядеть в сети, необходим браузер. Просматривать страницы HTML возможно и без доступа к сети. Например, можно поместить файлы HTML в одну папку, вставить в них гиперссылки, которые будут переводить пользователя из одного документа в другой.
HTML-код позволяет реализовать базовый дизайн сайта, выбрать цвета и шрифты для текста и фон для блоков. Однако, использование одного HTML при верстке страниц нежелательно, так как дизайн будет выглядеть слишком простым и несовременным. Для того, чтобы творчество не ограничивалось базовым набором, нужен CSS. Но многие функции, доступ к которым раньше был только в более сложных инструментах, сейчас также доступны в HTML. Например, ранее Drag&Drop (перетаскивание мышкой) работал только при использовании JavaScript, однако, теперь это реализовано в HTML.
HTML как язык программирования
HTML не выполняет операций с данными, он лишь диктует правила их отображения на странице. Невозможно выполнить математические действия прямо в HTML, поскольку его главной функцией является разметка содержимого страниц. При этом у HTML есть все признаки декларативного языка программирования (уникальный синтаксис, семантика и лексика).
HTML — основой внутренней структуры сайта, он представляет собой базовый каркас веб-страницы. Стоит отметить, что этот язык не является программным (как C++ или Python). HTML применяется при разметке гипертекста, что позволяет браузеру выстраивать веб-страницу в форме, удобной для восприятия человеком, а затем оформлять ее при помощи CSS и добавлять логику JavaScript. HTML является отличным выбором для новичков в программировании, поскольку он легок в освоении и полученные навыки могут помочь при изучении собственно языков программирования. В ходе обучения как frontend, так и backend-разработке HTML — обязательный компонент образовательного процесса.
Сколько времени нужно, чтобы освоить HTML
Базовый синтаксис HTML активно использовался пользователями LiveJournal без всякой подготовки. Для изучения основ и создания простеньких страниц уйдёт несколько часов. Однако, необходимо не только создать каркас веб-страницы, но и убедиться в том, что он корректно отображается на разных устройствах. Специалисты, которые владеют навыками создания адаптивных, качественных веб-сайтов с продвинутым дизайном и пользовательским интерфейсом, очень ценятся на рынке труда. Быть просто HTML-верстальщиком не слишком выгодно, поскольку это профессия сегодня не является востребованной и не обеспечивает высокий уровень доходов. С другой стороны, frontend и backend-разработчики весьма востребованы, и обязательно осваивают HTML.
Полезные советы
При разработке сайта рекомендуется создать отдельную папку на вашем жестком диске. В нее вы будете сохранять страницы сайта, называя их именами, имеющими смысл. Не рекомендуется использовать бессмысленные названия типа «abc.html» или «111.html», чтобы избежать бардака и не запутаться. Несмотря на то, что это может показаться несущественным на первых порах, в дальнейшем такой подход сделает рабочий процесс значительно более легким и приятным. Когда у вас будет более 20 файлов с именами, которые нужно запомнить, чтобы делать перелинковку (связывать перекрестными ссылками).
В код рекомендуется располагать теги «лесенкой» по мере вложенности одного блока или дескриптора в другой. Такой подход сильно облегчит чтение кода в будущем. Этот же принцип работает в других языках программирования, так что эта привычка поможет вам в дальнейшем развитии.
