: Основы HTML — Изучение веб-разработки |

Содержание

Основы HTML — Изучение веб-разработки

Назад
Обзор: Getting started with the web
Далее

HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

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

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

<p>Моя кошка очень раздражена</p>

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
Контент (Content): Это контент элемента, который в данном случае является просто текстом.
Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
Имя атрибута, за которым следует знак равенства.
Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент  , который указывает, что слово должно быть сильно акцентированно:

<p>Моя кошка <strong>очень</strong> раздражена.</p>

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент , затем элемент , потом мы должны закрыть сначала элемент , затем . Приведённое ниже неверно:

<p>Моя кошка <strong>очень раздражена.</p></strong>

Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент <img>, который уже имеется в нашем HTML:

<img src="images/firefox-icon.png" alt="Моё тестовое изображение">

Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images/firefox-icon. png" alt="Моё тестовое изображение">
  </body>
</html>

Здесь мы имеем:

<!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
<html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
<head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
<body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
<meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
<title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Давайте снова обратим наше внимание на элемент изображения:

<img src="images/firefox-icon.png" alt="Mоё тестовое изображение">

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.

Примечание: Узнайте больше о специальных возможностях.

В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.

Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2> (en-US)–<h6> (en-US), хотя обычно вы будете использовать не более 3-4 :

<h2>Мой главный заголовок</h2>
<h3>Мой заголовок верхнего уровня</h3>
<h4>Мой подзаголовок</h4>
<h5>Мой под-подзаголовок</h5>

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента <img>.

Абзацы

Как было сказано раньше, элемент  предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

<p>Это одиночный абзац</p>

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>.

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>

Мы могли бы изменить разметку на эту:

<p>Mozilla, мы являемся мировым сообществом</p>
<ul>
  <li>технологов</li>
  <li>мыслителей</li>
  <li>строителей</li>
</ul>
<p>работающих вместе ... </p>

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
Оберните текст в элемент <a>, например так:
```
<a>Манифест Mozilla</a>
```
Задайте элементу <a> атрибут href, например так:
```
<a href="">Манифест Mozilla</a>
```
Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
```
<a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>
```

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

Назад
Обзор: Getting started with the web
Далее

Установка базового программного обеспечения
Каким должен быть ваш веб-сайт?
Работа с файлами
Основы HTML
Основы CSS
Основы JavaScript
Публикация вашего веб-сайта
Как работает Веб

Last modified: 27 окт. 2022 г., by MDN contributors

— HTML | MDN

Элемент сильной значимости () указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.

Этот элемент включает в себя глобальные атрибуты.

Элемент  предназначен для контента, который имеет «большое значение», включая вещи большой серьёзности или срочности (например, предупреждения). Это может быть предложение, которое имеет большое значение для всей страницы, или вы можете просто попытаться указать, что некоторые слова имеют большее значение по сравнению с соседним контентом.

Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS font-weight для этой цели. Используйте элемент , чтобы привлечь внимание к определённому тексту без указания более высокого уровня важности. Используйте элемент  element для выделения текста, который имеет выраженный акцент.

Другим приемлемым использованием для  является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.

против

Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте.  и  возможно, является одним из наиболее распространённых источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать  или ? Разве они не делают одно и тоже?»

Не совсем. Элемент  для контента, который имеет большее значение, в то время как элемент  используется для привлечения внимания к тексту, не указывая на то, что это более важно.

Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчёркивают ). Каждый элемент предназначен для использования в определённых типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS font-weight.

Предполагаемое значение или цель прилагаемого текста должно быть тем, что определяет, какой элемент вы используете. Значение общения — вот что такое семантика.

против

Добавление к путанице заключается в том, что, хотя HTML 4 определяет  как просто указывающий на более сильный акцент, HTML 5 определяет  как представляющий «большое значение для его содержимого». Это важное различие.

В то время, как  используется для изменения значения предложения, поскольку делается устный акцент («Я люблю морковь» против «Я люблюморковь«),  используется, для придания предложению порции особого значения (например, «Предупреждение! Это очень опасно.«) Оба элемента  и  могут быть вложены для увеличения относительной степени важности или усиленного акцента, соответственно.

Основной пример

<p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p>

Результат:

Маркировочные предупреждения

<p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p>

Это приведёт к:

Specification
HTML Standard # the-strong-element

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Элемент 
Элемент 
Элемент font-weight

Last modified: 13 авг. 2022 г., by MDN contributors

Учебник по HTML

❮ Главная
Далее ❯

Простое обучение с помощью HTML «Попробуйте сами»

С помощью нашего редактора «Попробуйте сами» вы можете редактировать HTML-код и просматривать
результат:

Пример

Название страницы

Это заголовок

Это является абзацем.

Попробуйте сами »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.

Примеры HTML

В этом руководстве по HTML вы найдете более 200 примеров. С нашим онлайн
Редактор «Попробуй сам», вы можете редактировать и тестировать каждый пример самостоятельно!

Перейти к примерам HTML!

HTML-упражнения

Этот HTML-учебник также содержит около 100 HTML-упражнений.

Проверьте себя с помощью упражнений

Упражнение:

Добавьте «подсказку» к абзацу ниже с текстом «О W3Schools».

W3Schools — это сайт веб-разработчиков.

Начать упражнение

Тест HTML-викторины

Проверьте свои навыки работы с HTML с помощью нашей HTML-викторины!

Начать викторину HTML!

Мое обучение

Отслеживайте свои успехи с помощью бесплатной программы «Мое обучение» здесь, в W3Schools.

Войдите в свою учетную запись и начните зарабатывать баллы!

Это дополнительная функция. Вы можете учиться в W3Schools без использования My Learning.

Справочники по HTML

В W3Schools вы найдете полные справочники по элементам HTML,
атрибуты, события, имена цветов, сущности, наборы символов, кодировка URL,
коды языков, сообщения HTTP, поддержка браузера и многое другое:

Элементы HTML

Поддержка браузера

Атрибуты

Глобальные атрибуты

Атрибуты событий

Названия цветов

Canvas

Audio/Video DOM

Наборы символов

Кодирование URL

Языковые коды

Коды страны

HTTP Сообщения

PX в EM Converter

Keyboard Sertcuts

Kickstart

. пройти курс

Получить сертификат

w3schoolsCERTIFIED. 2022

❮ Главная
Далее ❯

NEW

Мы только что запустили
видео W3Schools

Узнать

ПАЛЕТКА ЦВЕТОВ

КОД ИГРЫ

Играть в игру

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ |
О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.

Базовый HTML

❮ Предыдущий
Далее ❯

В этой главе мы покажем несколько основных примеров HTML.

Не волнуйтесь, если мы используем теги, о которых вы еще не знаете.

Документы HTML

Все документы HTML должны начинаться с объявления типа документа: .

Сам документ HTML начинается с и заканчивается .

Видимая часть документа HTML находится между и .

Пример

Мой первый заголовок

Мой первый абзац.

Попробуйте сами »

Объявление

Объявление представляет тип документа и помогает браузерам правильно отображать веб-страницы.

Должен появиться только один раз в верхней части страницы (перед любыми тегами HTML).

Объявление не чувствительно к регистру.

Объявление для HTML5:

Заголовки HTML

Заголовки HTML определяются с помощью тегов

`от`

до 2

определяет самый важный заголовок.

определяет наименее важный заголовок:

`Пример`

`Это заголовок 1`

`Это заголовок 2`

`Это заголовок 3`

Попробуйте сами »

`HTML-абзацы`

HTML-абзацы определяются тегом

:

`Пример`

Это абзац.

Это другой абзац.

Попробуйте сами »

`Ссылки HTML`

Ссылки HTML определяются тегом :

`Пример`

Это ссылка

Попробуйте сами »

Назначение ссылки указано в атрибуте href .

Атрибуты используются для предоставления дополнительной информации об элементах HTML.

Вы узнаете больше об атрибутах в следующей главе.

`HTML-изображения`

HTML-изображения определяются тегом .

Исходный файл ( src ), альтернативный текст ( alt ), ширина и высота предоставляются как атрибуты:

`Пример`

Попробуйте сами »

Вы когда-нибудь видели веб-страницу и задавались вопросом: "Эй! Как они это сделали?"

`Просмотреть исходный код HTML:`

Щелкните правой кнопкой мыши HTML-страницу и выберите «Просмотр исходного кода страницы» (в Chrome) или «Просмотр исходного кода» (в Edge) или аналогичные в других браузерах. Это откроет окно содержащий исходный HTML-код страницы.

`Проверка элемента HTML:`

Щелкните элемент правой кнопкой мыши (или пустую область) и выберите «Проверить» или «Проверить элемент», чтобы увидеть, из каких элементов состоят (вы увидите оба HTML и CSS). Вы также можете редактировать HTML или CSS на лету в Откроется панель «Элементы или стили».

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили Видео W3Schools

Узнать

`ВЫБОР ЦВЕТА`

`КОД ИГРЫ`

Играть в игру

`Top Tutorials`

Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебное пособие по Python Учебное пособие по W3.CSS Учебное пособие по Bootstrap Учебное пособие по PHP Учебное пособие по Java Учебное пособие по C++ Учебное пособие по jQuery

`Лучшие ссылки`

Справочник по HTML Справочник по CSS Справочник по JavaScript Справочник по SQL Справочник по Python Справочник по W3.CSS Справочник по Bootstrap Справочник по PHP Цвета HTML Справочник по Java Справочник по Angular Справочник по jQuery

`Top3 Examples Примеры HTML`

Примеры CSS Примеры JavaScript Примеры How To Примеры SQL Примеры Python Примеры W3.