HTML | Введение в веб-разработку
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
HTML — это первое, с чем сталкиваются начинающие веб-разработчики.
Когда мы открываем страницы сайтов, перед нами, обычно, красивые картинки, текст, иногда реклама и другие элементы. Но если вызвать контекстное меню и нажать на пункт «Исходный код страницы» (в зависимости от браузера и языка системы называется по-разному), то мы увидим примерно следующее:
<div> <a aria-hidden='true' href='/'>Hexlet</a> <ul> <li> <a href="/my"><span></span> Мой Хекслет </a> </li> <li><a href="/courses"><span></span> Курсы </a> </li> </ul> </div>
Именно такой код и называется HTML. Hypertext Markup Language (HTML) — это язык разметки для создания веб-страниц или веб-приложений. Пусть вас не смущает слово «язык», HTML не является языком программирования.
Формально языком программирования называют только тот язык, который является Тьюринг-полным.
Проще всего понять идею HTML на примере редактирования текста в редакторе. Когда нам необходимо выделить текст жирным, создать список или вставить таблицу, мы «размечаем» текст. В обычных текстовых редакторах это делается визуально. Мы выделяем текст, затем нажимаем кнопку «Жирный», и текст становится жирным.
Так мы видим текст, когда открываем наш файл через специализированный редактор, понимающий его формат. Но внутри самого файла, конечно же, нет никакого жирного текста. Просто тот блок, который мы видим как жирный, помечен специальным образом. При выводе разметка превращается в визуальные выделения.
В HTML такие выделения делаются с помощью тегов. Теги — своеобразные кирпичики, из которых строится страница. Например, для подчеркивания текста используется тег u
и выглядит это так:
текст c <u>ашыпкой</u> будет подчёркнутым
Тег u
относится к парным тегам. Кроме открывающего тега <u>
он требует наличия закрывающего тега: </u>
. Так браузер понимает, когда нужно перестать делать текст подчеркнутым.
Подобных тегов в HTML довольно много. С помощью них, например, можно создавать таблицы, списки, заголовки, вставлять картинки, ссылки и тому подобное. Некоторые элементы, такие как списки, требуют использования сразу нескольких тегов, вложенных друг в друга. Еще есть теги, которые для корректной работы нуждаются в атрибутах.
<!-- Список из двух элементов --> <ul> <li>one</li> <li>two</li> </ul>
Перед тем, как двигаться дальше, давайте попробуем создать нашу первую страничку. Вы увидите, насколько это тривиально.
Создайте файл index.html
в любом удобном месте вашего компьютера. Добавьте туда html код, указанный ниже, а затем откройте файл в браузере.
<!DOCTYPE html> <html> <head> <title>Title</title> <meta name="description" content="My first page"> </head> <body> <h2>Hello, World!</h2> <ul> <li>One</li> <li>Two</li> </ul> </body> </html>
Поздравляю, вы сделали свою первую страницу! Если захотите потренироваться, то это всегда можно сделать здесь https://plnkr. co/edit/ (другие подобные сервисы легко гуглятся).
Подобным образом вы можете создать сколько угодно страниц. Добавив на эти страницы ссылки, которые сплетают их в единое целое, мы получим статический сайт. Именно из-за ссылок веб называется гипертекстовым. Ссылки выглядят так:
<a href="/about">О компании</a> <a href="https://hexlet.io">Хекслет</a>
В данном случае мы воспользовались атрибутом href
тега a
и подставили туда место для перехода. Как видите, это может быть страница на том же сайте или ссылка на внешний ресурс.
HTML — не единственный язык разметки. Например, текст этого урока я пишу с использованием разметки Markdown. Она обладает более скромными возможностями, чем HTML, но при этом сильно удобнее для простых текстов, которые пишутся вручную и требуют только базового форматирования. Более того, на Хекслете Markdown используется повсеместно. Практически в любом месте, где вы можете написать нам, можно использовать markdown.
## Заголовок * Первый элемент списка * Второй элемент списка
Но браузер не понимает разметку Markdown. Как же она работает? Все очень просто: сначала Markdown транслируется в HTML, который уже отдается браузеру, а браузер уже выполняет свою главную задачу — отрисовывает страницу. Трансляция производится программным способом, но для понимания общего принципа работы это не важно.
Важно понимать, что страница, созданная с использованием только HTML, статична, то есть на ней ничего не двигается, не выезжает, не меняется при наведении и вообще никак себя не выдает (на самом деле есть некоторые элементы, которые добавляют каплю динамизма, но суть от этого не меняется). Динамизм появляется благодаря CSS и JavaScript.
HTML, как и большинство языков разметки, очень прост. Учить его «от и до» не нужно. Главное, понять общую схему работы и научиться применять правильные теги. Этого достаточно для старта. Хороший справочник по html можно найти на developer.mozilla.org.
Браузер для разработчиков
В любом современном браузере есть специальная панель разработчика (Developer Tools или «инструменты разработчика»). Она позволяет в удобном виде просматривать структуру страницы и менять её. Показывает статистику по загрузке зависимых ресурсов. Помогает анализировать изменения во время взаимодействия с загруженной в браузере страницей. Попробуйте открыть её в вашем любимом браузере и поэкспериментировать.
Хекслет
На Хекслете есть бесплатный курс Основы современной вёрстки, содержащий текстовые уроки, интерактивные упражнения и тесты.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Основы программирования HTML
Для многих новичков в программировании мысль о написании нового веб-сайта наполняет их ужасом и вызывает у них страх. Однако есть и те из нас, кому нравится мечта о создании веб-сайта с нуля. Приятно создавать и видеть, как то, к чему вы прикоснулись, превращается в функционирующий и полезный веб-сайт. Вы хотите знать, каково это, поэтому вы решили начать работу и создать сайт. Как лучше всего начать? Знакомство с некоторыми основами кодирования HTML — отличный первый шаг.
Мы собрали четыре указателя и совета, которые должен знать каждый новый программист HTML. В нашем руководстве мы покажем вам, как создать простую HTML-страницу. Навыки, которые мы даём вам в этой статье, являются основой каждого кодера и необходимы для того, чтобы стать веб-разработчиком. Имея за плечами наши основы кодирования HTML, вы сможете начать накапливать знания и улучшить свои навыки программирования. Давайте начнём!
Введите разметку
Вот и мы на первом этаже, ребята. Разметка — это текст, определяющий внешний вид веб-страницы. На самом базовом уровне веб-сайт — это строки текста и ссылок — всё остальное появится позже. Разметка определяет способ отображения текста и ссылок. Очень важно знать, как начать разметку; оттуда это ваш выход в широкий мир HTML.
Для разметки HTML угловые скобки — король. Текст в квадратных скобках представляет собой инструкции по форматированию, поэтому используйте их осторожно. Первая пара скобок открывает инструкцию форматирования разметки (тег), а вторая закрывает тег. Второй тег часто включает косую черту для обозначения закрытия. Например, если вам нужна строка «Я съел слишком много пиццы!» чтобы быть выделенным курсивом, вы должны написать это как:
<i>Я съел слишком много пиццы!</i>
Это будет отображаться как:
Я съел слишком много пиццы!
Используйте бесплатный онлайн-редактор HTML, чтобы проверять свою работу на ходу; онлайн-редакторы HTML — это удобные инструменты, позволяющие протестировать код перед его реализацией. Онлайн-редакторы HTML часто предоставляют быстрые ссылки на популярные теги, что является отличным способом продолжить изучение HTML в процессе.
Построить тело
Все HTML-страницы можно разделить на две основные части: заголовок и тело. В то время как заголовок содержит инструкции по управлению страницей и является важным аспектом страницы, в теле вы будете проводить много времени в качестве начинающего перфоратора кода. Тело — это место, где вы будете размещать ваши разметки и текст, и там, где разрабатывается страница.
Теперь, когда мы изучили концепцию разметки и тегов, мы можем создать простую веб-страницу. Обратите внимание, что, за исключением заголовка страницы, мы работаем над разделом тела страницы. Для справки, h2 обозначает заголовок, а p обозначает абзац.
<html>
<head>
<title>Too Much Pizza</title>
</head>
<body>
<h2>Oh, No!</h2>
<p>I ate too much pizza!</p>
</body>
</html>
Теперь перетащите приведённый выше код в редактор HTML и сохраните полученный файл в виде текстового файла с именем page.html. Когда вы откроете сохранённый файл с помощью веб-браузера, вы откроете самодельную веб-страницу. Довольно круто, правда?
Хотя вы не сможете превратить эти быстрые основы HTML-кодирования прямо в шестизначный урок кодирования, наше руководство даёт вам базовые навыки, которые необходимы для того, чтобы стать качественным разработчиком программного обеспечения. Великие дела начинаются с малого, и ваша карьера не исключение. Воспользуйтесь нашими простыми уроками, и, прежде чем вы это узнаете, вы станете дураком в области веб-разработки.
Основы HTML — Изучите веб-разработку
- Предыдущий
- Обзор: Начало работы в Интернете
- Следующий
HTML ( H yper T ext M arkup L язык) — это код, который используется для структурирования веб-страницы и ее содержимого. Например, контент может быть структурирован в виде набора абзацев, списка маркированных пунктов или с использованием изображений и таблиц данных. Как следует из названия, эта статья даст вам общее представление о HTML и его функциях.
HTML — это язык разметки , который определяет структуру вашего контента. HTML состоит из серии элементов , которые вы используете для включения или переноса различных частей контента, чтобы он отображался определенным образом или действовал определенным образом.
Моя кошка очень сварливая
Если бы мы хотели, чтобы строка стояла отдельно, мы могли бы указать, что это абзац, заключив его в теги абзаца:
Мой кот очень сварливый
Анатомия элемента HTML
Давайте рассмотрим этот элемент абзаца немного подробнее.
Основные части нашего элемента следующие:
- Открывающий тег: Он состоит из имени элемента (в данном случае p), заключенного в открывающую и закрывающую угловые скобы . Это указывает, где элемент начинается или начинает действовать — в данном случае, где начинается абзац.
- Закрывающий тег: Это то же самое, что и открывающий тег, за исключением того, что он включает косую черту перед именем элемента. Здесь указывается, где заканчивается элемент — в данном случае там, где заканчивается абзац. Отсутствие закрывающего тега является одной из стандартных ошибок новичков и может привести к странным результатам.
- Содержимое: Это содержимое элемента, в данном случае просто текст.
- Элемент: Открывающий тег, закрывающий тег и содержимое вместе составляют элемент.
Элементы также могут иметь следующие атрибуты:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите отображать в фактическом содержимом. Здесь класс
это атрибут имя и примечание редактора
— это значение атрибута . Атрибут
позволяет вам присвоить элементу неуникальный идентификатор, который можно использовать для нацеливания на него (и любые другие элементы с тем же значением класса
) с информацией о стиле и другими вещами. Некоторые атрибуты не имеют значения, например required
.
Атрибуты, которые устанавливают значение, всегда имеют:
- Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
- Имя атрибута, за которым следует знак равенства.
- Значение атрибута, заключенное в открывающие и закрывающие кавычки.
Примечание: Значения простых атрибутов, которые не содержат пробелов ASCII (или любых символов "
'
`
=
<
>
), но рекомендуется оставить без кавычек вы указываете все значения атрибутов, так как это делает код более последовательным и понятным.0019
Вложенные элементы
Вы также можете помещать элементы внутрь других элементов — это называется вложением . Если бы мы хотели указать, что наша кошка очень сварливая, мы могли бы обернуть слово «очень» в элемент
, что означает, что слово должно быть сильно подчеркнуто:
Мой кот очень сварливый.
Однако вам нужно убедиться, что ваши элементы правильно вложены. В приведенном выше примере мы открыли сначала элемент
, затем элемент
; поэтому мы должны сначала закрыть элемент
, затем элемент
. Следующее неверно:
Мой кот
очень сварливый.
Элементы должны правильно открываться и закрываться, чтобы они находились внутри или снаружи друг друга. Если они перекрываются, как показано выше, ваш веб-браузер попытается сделать наилучшее предположение о том, что вы пытались сказать, что может привести к неожиданным результатам. Так что не делай этого!
Пустые элементы
Некоторые элементы не имеют содержимого и называются пустыми элементами . Возьмите элемент
, который уже есть на нашей HTML-странице:
Содержит два атрибута, но без закрывающего тега
и без внутреннего содержимого. Это связано с тем, что элемент изображения не оборачивает содержимое, чтобы воздействовать на него. Его цель — встроить изображение в HTML-страницу в том месте, где оно появляется.
Анатомия HTML-документа
Это обобщает основы отдельных элементов HTML, но сами по себе они неудобны. Теперь мы рассмотрим, как отдельные элементы объединяются в целую HTML-страницу. Давайте вернемся к коду, который мы поместили в наш пример index.html
(с которым мы впервые познакомились в статье Работа с файлами):
<голова> <метакодировка="utf-8" />Моя тестовая страница голова> <тело> тело>
Здесь имеем следующее:
-
-
lang
, устанавливающий основной язык документа. -
-
-
-
— элемент
. Это устанавливает заголовок вашей страницы, который отображается на вкладке браузера, в которую загружается страница. Он также используется для описания страницы, когда вы добавляете ее в закладки/избранное. -
Давайте снова обратим внимание на элемент
:
Как мы уже говорили, он вставляет изображение на нашу страницу в том месте, где оно появляется. Он делает это через атрибут src
(источник), который содержит путь к нашему файлу изображения.
Мы также включили атрибут alt
(альтернативный). В атрибуте alt
вы указываете описательный текст для пользователей, которые не могут видеть изображение, возможно, по следующим причинам:
- Они слабовидящие. Пользователи со значительными нарушениями зрения часто используют инструменты, называемые программами чтения с экрана, чтобы зачитывать им замещающий текст.
- Что-то пошло не так, из-за чего изображение не отображается. Например, попробуйте намеренно изменить путь внутри атрибута
src
, чтобы сделать его неверным. Если вы сохраните и перезагрузите страницу, вы должны увидеть что-то вроде этого вместо изображения:
Ключевые слова для замещающего текста: "описательный текст". Замещающий текст, который вы пишете, должен предоставить читателю достаточно информации, чтобы получить представление о том, что передает изображение. В этом примере наш текущий текст «Мое тестовое изображение» совсем не годится. Гораздо лучшей альтернативой нашему логотипу Firefox был бы «Логотип Firefox: пылающая лиса, окружающая Землю».
Попробуйте придумать лучший альтернативный текст для вашего изображения.
Примечание: Узнайте больше о специальных возможностях в нашем обучающем модуле по специальным возможностям.
В этом разделе рассматриваются некоторые важные элементы HTML, которые вы будете использовать для разметки текста.
Заголовки
Элементы заголовков позволяют указать, что определенные части вашего контента являются заголовками или подзаголовками. Точно так же, как книга имеет основное название, заголовки глав и подзаголовки, HTML-документ тоже может. HTML содержит 6 уровней заголовков,
-
, хотя обычно вы будете использовать максимум от 3 до 4:
Мой основной заголовок
Мой заголовок верхнего уровня
Мой подзаголовок
Мой подподзаголовок
Примечание: Все в HTML между
является комментарием HTML . Браузер игнорирует комментарии при отображении кода. Другими словами, на странице их не видно — только в коде. HTML-комментарии позволяют вам писать полезные заметки о вашем коде или логике.
Теперь попробуйте добавить подходящий заголовок на HTML-страницу прямо над элементом
.
Примечание: Вы увидите, что ваш уровень заголовка 1 имеет неявный стиль. Не используйте элементы заголовков, чтобы сделать текст больше или жирнее, потому что они используются для доступности и других причин, таких как SEO. Постарайтесь создать осмысленную последовательность заголовков на своих страницах, не пропуская уровни.
Абзацы
Как объяснялось выше, элементы
предназначены для содержания абзацев текста; вы будете часто использовать их при разметке обычного текстового контента:
Это один абзац
Добавьте образец текста (вы должны взять его из Как будет выглядеть ваш сайт? ) в один или несколько абзацев, разместив их непосредственно под элементом
.
Списки
Большая часть веб-контента состоит из списков, и в HTML есть специальные элементы для них. Списки разметки всегда состоят как минимум из 2-х элементов. Наиболее распространенными типами списков являются упорядоченные и неупорядоченные списки:
- Ненумерованные списки предназначены для списков, в которых порядок элементов не имеет значения, например для списка покупок. Они заключены в элемент
. - Упорядоченные списки предназначены для списков, где порядок элементов имеет значение, например, рецепт. Они заключены в элемент
.
Каждый элемент в списках помещается внутрь элемента
(элемент списка).
Например, если мы хотим превратить часть следующего фрагмента абзаца в список
<р> Мы в Mozilla — глобальное сообщество технологов, мыслителей и строителей. работаем вместе…
Мы можем изменить разметку на эту
Мы в Mozilla являемся глобальным сообществом
<ул>
работаем вместе…
Попробуйте добавить упорядоченный или неупорядоченный список на страницу примера.
Ссылки очень важны — они делают сеть сетью! Чтобы добавить ссылку, нам нужно использовать простой элемент —
— «а» является сокращенной формой слова «якорь». Чтобы превратить текст абзаца в ссылку, выполните следующие действия:
- Выберите текст. Мы выбрали текст «Манифест Mozilla».
- Оберните текст в элемент
Манифест Mozilla
- Присвойте элементу
href
, как показано ниже:Манифест Mozilla
- Заполните значение этого атрибута веб-адресом, на который вы хотите установить ссылку:
Манифест Mozilla
Вы можете получить неожиданные результаты, если опустите часть https://
или http://
, называемую протоколом , в начале веб-адреса. После создания ссылки щелкните по ней, чтобы убедиться, что она отправляет вас туда, куда вы хотели.
Примечание: href
поначалу может показаться довольно неясным выбором имени атрибута. Если вам трудно его запомнить, помните, что это означает h ypertext ref erence .
Добавьте ссылку на свою страницу сейчас, если вы еще этого не сделали.
Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, похожую на приведенную ниже (вы также можете просмотреть ее здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.
Здесь мы только поверхностно коснулись HTML. Чтобы узнать больше, перейдите к нашей теме Learning HTML.
- Предыдущий
- Обзор: Начало работы в Интернете
- Следующий
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять больше участия? Узнайте
, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Руководство по HTML для начинающих 2023 (бесплатное руководство)
Если вы хотите стать веб-мастером и научиться создавать веб-сайты, перспектива изучения HTML может показаться вам пугающей.
Однако этого нельзя избежать, поскольку подавляющее большинство целевых страниц веб-сайтов, которые вы посещаете, будут написаны и структурированы с использованием элементов HTML. Фактически, в настоящее время HTML используется более чем 74% всех известных веб-сайтов, в то время как этот язык также помогает улучшить все, от дизайна вашего сайта до качества контента, который он содержит.
В этом руководстве мы рассмотрим основные принципы HTML и его возможные применения, а затем рассмотрим примеры отдельных элементов, которые вы используете при кодировании своего веб-сайта.
Что такое HTML?
Проще говоря, HTML представляет собой стандартный язык разметки для создания веб-страниц в Интернете. Он расшифровывается как язык гипертекстовой разметки, и его основная функция заключается в установлении структуры, макета и представления отдельных целевых страниц. Хотя веб-браузеры не отображают язык HTML напрямую, он играет ключевую роль в создании видимого, доступного и простого в использовании сайта.
HTML также поддерживается рядом отдельных элементов, которые постепенно создают веб-страницы, структурируют представление контента и оживляют ваш веб-сайт. Эти элементы создаются и содержатся в «тегах», которые определяют альтернативные части контента, такие как заголовки, абзацы и подобные примеры.
Ниже мы более подробно рассмотрим эти элементы и их структуру, а также посмотрим, как их можно персонализировать, чтобы добавить цвет, ссылки и вариативную типографику на ваш веб-сайт.
График веб -технологий :
- 1991 - HTML
- 1994 - HTML2
- 1996 - CSS1 + JavaScript
- 1997 - HTML4
- 1998 - CSS2
- 2000 - XHHT4 - XHHT4 - XHHT4 - XHHT4
- 1998 - CSS2
- 2000 - XHHT4
- 1998 - CSS2
- 2000 - XHHT4
- 1998–
- 2005 – AJAX
- 2009 – HTML5
Где используется HTML?
Популярные веб-сайты, использующие HTML :
- Wikipedia. org
- Google.com
- YouTube.com
- Facebook.com
- Yahoo.com
- Baidu.com
- Reddit.com
Как мы видим, наиболее распространенным применением HTML является дизайн отдельных целевых страниц, составляющих ваш веб-сайт. Это не единственное применение популярного инструмента кодирования, однако понимание его дополнительных применений поможет вам получить максимальную отдачу от языка в качестве нового веб-мастера. Итак, вот еще несколько способов применения HTML:
- Создание настраиваемых элементов на существующей странице . Если вы намерены разрешить комментарии к сообщениям блога или публикацию пользовательского контента на своем веб-сайте, вы можете использовать фрагменты HTML-кода, чтобы включить это. Эти элементы позволят пользователям выделять ключевые слова, вставлять ссылки и форматировать комментарии в зависимости от ограничений, установленных вами как модератором.
- Создать дополнительный контент для электронной почты . Электронная почта также использует HTML в качестве языка для форматированных текстовых сообщений, которые содержат ссылки, текст и множество других элементов, которые не могут быть представлены только в виде простого текста. Итак, если вы хотите поделиться электронной книгой, связанной с вашим веб-сайтом, по электронной почте, вы можете использовать HTML для оптимизации воздействия вашего сообщения.
- Понимать автономные справочные документы, установленные на вашем компьютере . Интересно, что HTML используется в качестве формата компьютерных справочных документов, доступных в автономном режиме. Таким образом, базовые знания HTML могут помочь вам понять проблемы с вашим оборудованием и решить их быстрее, что, в свою очередь, может гарантировать, что вы сможете быстрее восстановить свой веб-сайт в случаях, когда он отключился.
Подробнее:
Просмотр HTML и CSS [Шпаргалка]
Структура HTML-страницы
Прежде чем вы сможете создать HTML-страницу, вам необходимо подготовить основы.
Как правило, страница состоит из трех структурных элементов:
- Заголовок: Заголовок содержит контент, относящийся ко всем страницам вашего сайта, например, логотип или название веб-сайта, а также систему навигации. Заголовок виден на каждой странице.
- Основная часть: Занимает наибольшую площадь веб-страницы. Он содержит контент, относящийся к просматриваемой странице.
- Нижний колонтитул: Содержимое нижнего колонтитула обычно включает контактную информацию, адрес доставки или официальные уведомления. Как и верхний колонтитул, нижний колонтитул появляется на каждой странице, но располагается внизу.
Вот как эти основные структурные элементы выглядят вместе:
Сюда можно поместить текст или код, например,
код отслеживания Google Analytics для
.
Основная часть вашей страницы идет
здесь. Заполните его текстом и изображениями!
Вот еще один пример использования тегов заголовка и тега абзаца для эстетической структуризации контента. Кроме того, мы добавили тег нижнего колонтитула для контента под основным текстом страницы:
Здесь можно поместить текст или код, например
код отслеживания Google Analytics для примера
. .
Мой первый заголовок
Добро пожаловать на мой сайт!
Контактная информация может идти здесь
Теги HTML
Отправной точкой для любого кода HTML являются отдельные теги, которые можно использовать для создания всех важных элементов и помочь структурировать веб-страницы.
Ведущие технологии HTML Tags Technologies Share на Web
- HTML5 Canvas TAG - 0,27%
- HTML5 Audio Tag - 0,29%
- Video Tag
Ниже мы рассмотрим наиболее распространенные теги, прежде чем исследовать, как их можно использовать для создания конкретных элементов на странице:
Теги заголовков
Все онлайн-документы, включая веб-страницы, начинаются с заголовком. Они создаются с использованием тегов HTML, а язык в настоящее время позволяет использовать до шести элементов переменного размера, которые также позволяют структурировать контент с помощью дополнительных заголовков, подзаголовков и выделенных строк полужирного текста. Чтобы начать заголовок, вы просто добавляете к соответствующему тексту префикс
,
,
,
,
или в зависимости от желаемого размера.
Затем вы должны применить закрывающий тег в конце заголовка, чтобы инкапсулировать текст, и он будет отображаться в формате HTML следующим образом:
Это заголовок 1
Это заголовок 2
Это заголовок 3
Это заголовок 4
Это заголовок 5
Это заголовок 6
После подтверждения это будет выглядеть следующим образом на целевой странице вашего веб-сайта:
Это заголовок 2
Это заголовок 3
Это заголовок 4
Это заголовок 5
666 6 Здесь хорошо видны различные размеры переменных заголовков, а также тот факт, что браузер добавляет строку до и после заголовка. Вы также заметите, что закрывающий тег в конце текста заголовка имеет немного другую эстетику, но мы рассмотрим это в следующей главе, поскольку мы рассмотрим использование тегов для определения конкретных элементов.
Теги абзаца
Аналогичный принцип применяется к начальным тегам абзаца, которые обозначаются
. Это позволяет вам структурировать ваш контент и разделить его на соответствующие абзацы, что, в свою очередь, упрощает и упрощает чтение. Еще раз, тег
должен быть помещен в начале соответствующего текста до того, как в конце будет применен альтернативный закрывающий тег для завершения эффекта. Однако, в отличие от тегов заголовков, здесь нет числовых переменных, которые могут изменить размер текста в абзаце.
Например:
Ваш первый абзац
Ваш второй абзац
Ваш третий абзац1
Вне формата HTML текст на готовой веб-странице будет разбит следующим образом:
Ваш первый абзац
Ваш второй абзац
Ваш третий абзац
Теги разрыва строки
Первые примеры представляют самые основные HTML-теги, но есть и другие, которые используют другой формат и альтернативные заключительные дубли. Возьмем, к примеру, разрывы строк, которые создают различие, в котором строки текста разрываются и продолжаются на следующей строке. Существует основное различие между разрывами строк и абзацами в области HTML, так как последние являются стандартными блочными элементами, содержащими текст, а первые создают разделение внутри существующего элемента
.
Из-за этого разрывы строк представляют собой пустой элемент в HTML и поэтому не определяются ни открывающими, ни закрывающими тегами. Вместо этого они обозначаются тегом
, который можно вставить в существующие элементы
, чтобы разбить текст и потенциально выделить важные фрагменты информации. Одиночный пробел между символом и косой чертой имеет решающее значение, иначе тег не распознается в формате HTML.
Вот пример:
Доброе утро
Большое спасибо за ваш запрос, мы свяжемся с вами, если нам потребуется что-то еще.
С наилучшими пожеланиями
Mr. Jones
После применения текст будет разбит на следующие части:
Доброе утро,
Большое спасибо за ваш запрос, мы свяжемся с вами вы, если нам потребуется что-нибудь еще.
С наилучшими пожеланиями
Мистер Джонс
Как видите, вы можете применять разрывы строк в существующем элементе абзаца так часто, как вам нравится, до тех пор, пока они добавляют ценность и облегчают усвоение информации. Вы также увидите, что открывающие и закрывающие теги абзаца остаются неизменными, а теги разрыва строки используются для изменения макета текста, включенного в них.
Это один из примеров того, как теги HTML можно использовать для изменения существующих элементов, что играет ключевую роль в определении визуального макета ваших веб-страниц и контента.
Горизонтальные линии
Точно так же существуют и другие теги, которые можно использовать внутри элемента
или для дальнейшего разделения текста на веб-странице. Одним из наиболее широко используемых является тег
, который помогает создать пустой элемент, который рисует визуальную горизонтальную линию между чередующимися разделами онлайн-документа. Например, вы можете поместить линию между двумя частями текста, чтобы переориентировать читателя или просто ввести новый визуальный элемент. Вот как вы создаете такой разрыв в HTML: Ваш первый абзац
Ваш второй абзац
Здесь разрыв между символами hr и косой чертой выделить конструкцию из пустого элемента, при этом для завершения эффекта снова не требуется закрывающий тег. Будет создан следующий визуальный элемент:
Ваш первый абзац
________________________________________
Ваш второй абзац
Теги изображений
Теги изображений также представляют собой пустые элементы в HTML, что еще раз означает, что они не имеют закрывающего тега. Поскольку они содержат только атрибуты, относящиеся к URL-адресу изображения, которое вы встраиваете на сайт, они определяются просто тегом в начале элемента. Они могут быть размещены в любом месте на вашем веб-сайте, хотя необычно включать их в существующие элементы, такие как абзацы или заголовки. Вот как выглядит типичный HTML-тег изображения:
Вы также должны указать альтернативный текст для вашего изображения, который поможет людям просматривать его в случае медленного время загрузки или использование программы чтения с экрана. Таким образом, если браузер не может найти изображение, он будет отображать для зрителей значение альтернативного атрибута. Это снова использует тег изображения, но включает в себя другой набор атрибутов:
Элементы HTML
Ранее мы рассмотрели, как простые теги HTML используются для определения элементов на странице, а также рассмотрели, как их можно дополнительно настроить с помощью пустых элементов, содержащих теги изображения и разрыва строки. Это помогает нам понять отношения, существующие между тегами и элементами, и то, как их можно использовать для определения различных типов контента на вашем веб-сайте.
Хотя все аспекты языка HTML представлены тегом, например, определенный элемент, включающий содержимое, должен иметь как начальный, так и закрывающий тег. Таким образом, заголовки и абзацы являются элементами HTML, потому что они используют начальный и закрывающий теги для инкапсуляции и дополнения соответствующего текста. Напротив, пустые элементы либо содержат атрибуты, либо вообще не содержат содержимого, что позволяет использовать их в существующих элементах без необходимости закрывающего тега.
Определение элементов HTML
При использовании таких примеров, как заголовки и абзацы, правильное применение открывающих и закрывающих тегов имеет решающее значение. Это начальный тег (такой как
или
), который определяет рассматриваемый элемент, например, в то время как закрывающий тег гарантирует, что этот элемент не будет продолжаться на оставшейся части веб-страницы. Например, если вы не используете закрывающий тег p> в конце нужного абзаца, текст будет отображаться в виде единого блока, что будет неприглядно и чрезвычайно трудно читать.
Все закрывающие теги идентичны начальным, за исключением того факта, что первые содержат косую черту перед соответствующими символами. Таким образом, в случае заголовка
закрывающим тегом будет
h2> , а для абзацев вы всегда будете использовать p> для определения разрыва текста. Это требует внимания к деталям при написании кода, и при программировании заголовков важно помнить, что число, которое вы используете (например, h2 или h3), применяется как в начальном, так и в закрывающем тегах. Использование вложенных элементов HTML
На данном этапе ясно видно, что HTML-документы и веб-страницы формируются деревом различных элементов, которые служат строительными блоками для массива ресурсов. Мы также рассмотрели, как эти элементы могут быть сформированы и использованы для структурирования онлайн-контента, и мы продолжим это сейчас, рассмотрев вложенные элементы HTML.
Так же, как пустые элементы и автономные теги (такие как
, могут быть включены в определенные элементы HTML, так называемые вложенные элементы также могут быть размещены в содержимом, таком как заголовки и абзацы. К ним относятся такие примеры, как выделение полужирным шрифтом и курсивом) Надписи и подчеркнутый текст, а также их можно применять для придания индивидуальности вашему контенту и привлечения внимания читателя к определенным интересным моментам. 0019
Жирный, курсив и зачеркнутый текст в HTML
Допустим, вы хотите выделить слово в существующем элементе абзаца. Вы можете добиться этого, сделав его полужирным, используя простые теги в стандартном элементе
. Используя HTML, вы запрограммируете это следующим образом:
Я хочу, чтобы это слово было выделено жирным шрифтом.
Здесь вложенный элемент имеет как начальный, так и закрывающий тег, каждый из которых соответствует формату тегов, связанных с заголовками и абзацами. Их можно беспрепятственно использовать в существующих элементах, и в этом случае это даст следующие результаты:
Я хочу, чтобы это слово было выделено жирным шрифтом.
Теперь предположим, что вы также хотели бы изменить типографику этого слова, чтобы оно также было выделено курсивом. Этого можно добиться, просто добавив еще один вложенный элемент, который должен быть закодирован следующим образом:
Я хочу, чтобы это слово было выделено жирным шрифтом. p>
Как видите, начальный и закрывающий курсивные теги просто включены в элемент
. Теперь это изменит содержимое внутри элемента, чтобы оно выглядело следующим образом:
Я хочу, чтобы это слово было выделено жирным шрифтом.
Конечно, вы можете решить, что хотите выделить это слово по-другому. Таким образом, вы можете использовать альтернативный вложенный элемент, такой как перечеркнутый (который представлен тегами и . Эти теги можно применять таким же образом в элементе
, что выглядит следующим образом в HTML:
Я хочу, чтобы это слово было зачеркнуто.
В этом случае текст в вашем документе или на целевой странице будет выглядеть следующим образом:
Я хочу, чтобы это слово было зачеркнуто.
Это дает представление об элементах, которые могут быть сформированы с помощью тегов, которые, в свою очередь, определяют структуру ваших веб-страниц и их содержание. Не только это, но и пустые и вложенные элементы также можно использовать для дальнейшего определения вашего контента.
HTML-атрибуты
Если теги являются строительными блоками, которые создают и определяют элементы, то атрибуты HTML можно использовать для настройки их характеристик (таких как стиль, цвет и язык). Все элементы HTML имеют основные атрибуты, которые предоставляют основную информацию и всегда указываются в теге статистики. Обычно они идут парами, поэтому часто отображаются в следующем формате: имя = «значение».
Проще говоря, имя представляет собой свойство, которое вы хотите установить, а значение относится к конкретным критериям, которые вы хотите включить.
Существует большое количество атрибутов, которые можно применить к вашим HTML-элементам, но те из них, которые наиболее важны для начинающих веб-мастеров: его элементы. Он объявляется с использованием атрибута «lang», и хотя его легко упустить из виду, он делает контент более доступным для программ чтения с экрана и поисковых систем. Обычно он будет представлен в начале документа в следующем формате:
После атрибута lang первые две буквы определяют язык (в данном случае английский). После дефиса следующие две буквы определяют диалект, хотя он присутствует не для каждого языка. Важно, чтобы вы правильно поняли этот атрибут, если хотите успешно охватить свою аудиторию.
Атрибут «выравнивание»
Мы уже коснулись формата HTML-атрибутов (имя = «значение»), и наилучшее воплощение этого происходит, когда вы пытаетесь выровнять содержимое внутри своих элементов. Вы можете решить центрировать все абзацы на определенной странице, например, с выравниванием, являющимся свойством, которое вы хотите установить. Следовательно, «центр» — это значение атрибута, хотя у вас есть выбор выравнивания текста по левому или правому краю.
Например:
Этот текст выровнен по центру
Это выровняет ваши элементы
по центру страницы и создаст единый макет в соответствии со спецификой вашего сайта (см. ниже):
Этот текст выровнен по центру
Этот текст выровнен по центру
Этот текст выровнен по центру
Атрибут 'href'
Если вы собираетесь создать видимый веб-сайт, важно, чтобы вы включили как входящие, так и исходящие ссылки. Создание портфеля ссылок, включающего обратные ссылки на внутренние целевые страницы, также является жизнеспособной стратегией, поэтому вам нужно научиться кодировать их в HTML.
HTML-ссылки определяются с помощью тега , который включает в себя целевую ссылку вместе с аффилированным якорным текстом, в котором будет содержаться URL-адрес. Это атрибут «href», который указывает адрес сайта, однако он включен как часть начального тега. Он закодирован в HTML следующим образом:
Это четко подчеркивает различие между начальным и закрывающим тегом и будет переводиться как следует на вашей целевой странице:
Google
Атрибут «цвет»
Это еще один важный атрибут, поскольку использование цвета может вдохнуть жизнь в ваш веб-сайт, помогая создать важные контрасты и сильную эстетику дизайна. В HTML цвет можно указать с помощью его имени, хотя для достижения этой цели также можно использовать значение RGB или HEX. Однако проще всего следовать первому варианту, хотя его также можно применять к заголовкам, абзацам и другим элементам на вашей странице.
Это атрибут стиля, в котором вы можете выбрать цвет, представляющий значение, которое вы хотите установить. При применении красного цвета к основному заголовку, например, это будет выглядеть так:
Цвет текста, установленный с использованием красного цвета
После применения этот элемент появится следующим образом на вашем веб-сайте:
Цвет текста, установленный с помощью красного цвета
Опять же, существует четкое различие между начальным и закрывающим тегами, определяющими элемент, хотя это один из самых простых атрибутов для применения в HTML. Он также подчеркивает формат атрибутов HTML name="value", что значительно упрощает процесс изучения и применения их на вашем веб-сайте.
Подробнее:
Просмотр HTML5 Canvas [Шпаргалка]
Протестируйте сами
После базового понимания HTML и его отдельных элементов следующим шагом будет выполнение нескольких простых проектов и применение ваших теоретических знаний для решения практических задач. .
В приведенном ниже упражнении мы представили текст, кроме и попросили отформатировать различные аспекты с помощью HTML. Используйте руководство и все, что вы узнали до сих пор, чтобы выполнить задание, готовясь к кодированию собственного веб-сайта.
Главный заголовок
Добро пожаловать на наш сайт, Example.com! Мы надеемся, что вам понравится читать наш контент, не стесняйтесь обращаться к нам.
Спасибо за визит!
Подробнее.
Вопросы:
- Завершите элемент заголовка правильным закрывающим тегом.
- Сделать заголовок жирным.
- Вставьте горизонтальную линию под заголовком.
- Используйте атрибут цвета и затените «Спасибо за посещение» зеленым цветом
- Вставьте эту гиперссылку (https://www.w3schools.com/html/) в якорный текст «Узнать больше».
- В заголовке страницы используйте формат name="value" для выравнивания абзацев по левому краю
- Элементы HTML, head и body являются частью спецификации HTML с середины 1990-х годов и позже еще несколько лет назад они были основными элементами, используемыми для придания структуры HTML-документам. Однако за последние несколько лет ситуация резко изменилась, поскольку в HTML5 было добавлено множество новых тегов, которые можно использовать для добавления богатого семантического значения в структуру HTML-документа.
- HTML-документы должны начинаться с объявления типа документа (неофициально «doctype»). В браузерах тип документа помогает определить режим рендеринга. HTML5 не определяет DTD; поэтому в HTML5 объявление типа документа проще и короче.
- Мобильные браузеры полностью приняли HTML5, поэтому создавать проекты, готовые для мобильных устройств, так же просто, как проектировать и конструировать для небольших сенсорных экранов — отсюда и популярность адаптивного дизайна. Есть несколько отличных метатегов, которые также позволяют оптимизировать для мобильных устройств.
- 78% разработчиков контента согласны с тем, что структура подходит для создания мобильных приложений, а 68% говорят, что она подходит для разработки любых приложений.
- HTML5 также поставляется с множеством отличных API-интерфейсов, которые позволяют вам создавать более удобные для пользователя и более мощные, более динамичные веб-приложения — вот краткий список собственных API-интерфейсов:
- Drag and Drop (DnD)
- База данных для автономного хранения
- Управление историей браузера
- Редактирование документов
- Воспроизведение мультимедиа по времени
- HTML5 не контролируется одной компанией. Одна из его лучших особенностей заключается в том, что это открытый стандарт. Разработчики могут дать волю своему творчеству и добавить столько функций и возможностей, сколько смогут.
- По сравнению с другими браузерами каждое обновление Google Chrome обязательно включает поддержку HTML5. Кроме того, проигрывателем YouTube по умолчанию теперь является HTML5, а Flash-объявления Google теперь преобразуются в HTML5.
- Использование HTML5 разработчиками (по регионам):
- Северная и Латинская Америка — 70 %
- Южная Америка — 61 %
- ASPAC — 60 %
- Австралия — 60 %
- Европа — 59 %
- Африка — 50003 %
Заключение
Хотя HTML был создан совсем недавно, в 1991 году (первая версия языка программирования была выпущена в 1995 году), он быстро стал основополагающим инструментом в дизайне функциональных и визуально привлекательных веб-сайтов. Уровень влияния HTML также продолжает расти, и последняя версия (HTML5) используется все большим числом веб-сайтов по всему миру.
Это заголовок 1
Это заголовок 2
Это заголовок 3
Это заголовок 4
Это заголовок 5
Это заголовок 6
Ваш первый абзац
Ваш второй абзац
Ваш третий абзац1
Вне формата HTML текст на готовой веб-странице будет разбит следующим образом:
Ваш первый абзац
Ваш второй абзац
Ваш третий абзац
Теги разрыва строки
Первые примеры представляют самые основные HTML-теги, но есть и другие, которые используют другой формат и альтернативные заключительные дубли. Возьмем, к примеру, разрывы строк, которые создают различие, в котором строки текста разрываются и продолжаются на следующей строке. Существует основное различие между разрывами строк и абзацами в области HTML, так как последние являются стандартными блочными элементами, содержащими текст, а первые создают разделение внутри существующего элемента
.
Из-за этого разрывы строк представляют собой пустой элемент в HTML и поэтому не определяются ни открывающими, ни закрывающими тегами. Вместо этого они обозначаются тегом
, который можно вставить в существующие элементы
, чтобы разбить текст и потенциально выделить важные фрагменты информации. Одиночный пробел между символом и косой чертой имеет решающее значение, иначе тег не распознается в формате HTML.
Вот пример:
Доброе утро
Большое спасибо за ваш запрос, мы свяжемся с вами, если нам потребуется что-то еще.
С наилучшими пожеланиями
Mr. Jones
Ваш первый абзац
Ваш второй абзац
, могут быть включены в определенные элементы HTML, так называемые вложенные элементы также могут быть размещены в содержимом, таком как заголовки и абзацы. К ним относятся такие примеры, как выделение полужирным шрифтом и курсивом) Надписи и подчеркнутый текст, а также их можно применять для придания индивидуальности вашему контенту и привлечения внимания читателя к определенным интересным моментам. 0019
Здесь вложенный элемент имеет как начальный, так и закрывающий тег, каждый из которых соответствует формату тегов, связанных с заголовками и абзацами. Их можно беспрепятственно использовать в существующих элементах, и в этом случае это даст следующие результаты:
Этот текст выровнен по центру
Главный заголовок
Добро пожаловать на наш сайт, Example.com! Мы надеемся, что вам понравится читать наш контент, не стесняйтесь обращаться к нам.
Спасибо за визит!
Подробнее.
- Drag and Drop (DnD)
- База данных для автономного хранения
- Управление историей браузера
- Редактирование документов
- Воспроизведение мультимедиа по времени
- Северная и Латинская Америка — 70 %
- Южная Америка — 61 %
- ASPAC — 60 %
- Австралия — 60 %
- Европа — 59 %
- Африка — 50003 %