HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определенным образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то еще, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмем следующую строку контента:
My cat is very grumpy
Если мы хотим строку стоящую саму по себе, мы можем указать, что это параграф, заключая ее в тег параграфа (<p>) элементом:
<p>My cat is very grumpy</p>
Анатомия HTML элемента
Давайте рассмотрим элемент параграфа более подробно.
Главными частями нашего элемента являются:
- Открывающий тег: Состоит из имени этого элемента (в данном случае, p), заключенного в открывающие и закрывающие угловые скобки. Указывает, где элемент начинается или начинает действовать — в данном случае, где начинается параграф.
- Закрывающий тег: Это тоже самое, что и открывающий тег, кроме того, что он включает в себя косую черту перед именем элемента. Указывает, где элемент заканчивается — в данном случае, где заканчивается параграф. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.
- Контент: Это контент элемента, который в данном случае является просто текстом.
- Элемент: Открывающий тег, плюс закрывающий тег, плюс контент, равняется элементу.
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, атрибут класса позволяет дать элементу идентификационное имя, которое может позже использоваться для целевого элемента с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
- Пространство между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов.)
- Имя атрибута, а затем знак равенства
- Открывающие и закрывающие кавычки, обернутые вокруг значения атрибута
Вложенные элементы
Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка ОЧЕНЬ раздражена, мы можем обернуть слово "very" в <strong> элемент, это означает, что слово должно быть сильно акцентированно:
<p>My cat is <strong>very</strong> grumpy.</p>
Вы также должны убедиться, что ваши элементы вложены правильно: в примере выше мы открыли первым <p> элемент, затем <strong> элемент, потом мы должны закрыть сначала <strong> элемент, затем <p>. Приведенное ниже неверно:
<p>My cat is <strong>very grumpy.</p></strong>
Элементы должны открываться и закрываться правильно, поэтому они явно внутри или снаружи друг друга. Если они перекрываются как в примере выше, тогда ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, и вы также можете получить непредсказуемые результаты. Так что не стоит этого делать!
Пустые элементы
Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмем <img> элемент, который мы уже имеем в нашем HTML:
<img src="images/firefox-icon.png" alt="My test image">
Он содержит два атрибута, но не имеет закрывающего </img> тега, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
Анатомия HTML документа
Завершает основы отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернемся к коду, который мы вкладывали в наш index.html пример (с которым мы в первые встретились в статье Работа с файлами):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
Здесь мы имеем:
<!DOCTYPE html>— доктайп. В прошлом, когда HTML был молод (около 1991/2), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и он на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент, это все, что вам нужно знать.<html></html>— элемент<html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.<head></head>— элемент<head>. Этот элемент выступает в качестве контейнера для всего, чего вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете зрителям ваших страниц. К ним относятся такие вещи, как ключевые слова и описание страницы, которые вы хотите, чтобы появлялись в результатах поиска, CSS стили нашего контента, кодировка и другое.<body></body>— элемент<body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь это текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то еще.<meta charset="utf-8">— этот элемент устанавливает utf-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.<title></title>— это устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.
Изображения
Давайте снова обратим наше внимание на элемент изображения:
<img src="images/firefox-icon.png" alt="My test image">
Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source), в котором содержится путь к нашему файлу изображения.
Мы также включили атрибут alt (alternative). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, потому что:
- Они с нарушенным зрением. Пользователи со значительным нарушением зрения часто используют инструменты, называемые читателями с экрана, которые читают альтернативный текст для них.
- Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте
src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:
Ключевые слова об альтернативном тексте - это "пояснительный текст". Альтернативный текст, который вы должны написать, должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передает изображение. В этом примере, наш существующий текст "My test image" не годится для всех. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth."
Попробуйте придумать какой-то более хороший альтернативный текст для изображения прямо сейчас.
Примечание: Узнайте больше о Доступности.
Разметка текста
В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.
Заголовки
Элементы заголовка позволяют вам указывать определенные части вашего контента являющимися заголовками или подзаголовками вашего контента. Точно также как книга имеет главный заголовок, названия глав и подзаголовков, HTML документ может тоже самое. HTML включает шесть уровней заголовков <h1>–<h6>, хотя обычно вы будете использовать только 3–4 не более:
<h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4>
Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше <img> элемента.
Параграфы
Как было сказано раньше, в <p> элементах содержатся параграфы текста; вы будите использовать их регулярно при разметке текстового контента:
<p>This is a single paragraph</p>
Добавьте ваш абзац текста (у вас должен он быть из Каким должен быть ваш веб-сайт?) в один или несколько параграфов, расположенных прямо под <img> элементом.
Списки
Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит, по меньшей мере, из двух элементов. Наиболее распространенными типами списков являются нумерованные и ненумерованные списки:
- Ненумерованные списки - это списки, где порядок пунктов не имеет значения, например, как список покупок. Они оборачиваются в
<ul>элемент. - Нумерованные списки - это списки, где порядок пунктов имеет значение, например, как рецепт. Они оборачиваются в
<ol>элемент.
Каждый пункт внутри списков располагается внутри <li> (list item) элемента.
Например, если мы хотим включить часть следующего фрагмента параграфа в список:
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
Мы могли бы изменить разметку на эту:
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>
Попробуйте добавить упорядоченный или неупорядоченный список в вашем примере страницы.
Ссылки
Ссылки имеют очень большое значение — они являются тем, что делает Веб Вебом. Для добавления ссылки, нужно использовать простую ссылку — <a> — a это сокращение от "anchor". Для того, чтобы текст в вашем параграфе стал ссылкой, выполните следующие действия:
- Выберите некоторый текст. Мы выбрали текст "Mozilla Manifesto".
- Оберните текст в <a> элемент, например, так:
<a>Mozilla Manifesto</a>
- Дайте <a> элементу href атрибут, например, так:
<a href="">Mozilla Manifesto</a>
- Заполните значение этого атрибута веб-адресом, на который вы хотите, чтобы ссылалась ссылка:
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
Вы можете получить неожиданные результаты, если вы опустите https:// или https:// часть, называемую протоколом, в самом начале веб-адреса. После создания ссылки, кликните по ней, чтобы убедиться, что она отправляет вас туда, куда вы хотели.
href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы, вспоминая его, помните, что он выступает как hypertext reference.
Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.
Заключение
Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, как на рисунке ниже (вы также можете посмотреть ее здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.
Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на нашу страницу изучения HTML.