Основы html для начинающих: Учебник HTML для начинающих
Содержание
— HTML | MDN
HTML-элемент <img>
встраивает изображение в документ. Это замещаемый элемент.
Приведённый выше пример показывает очень простое использование элемента <img>
. Атрибут src
обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt
содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.
Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:
- управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты
crossorigin
иreferrerpolicy
; - настройка внутреннего размера (en-US) с использованием
width
иheight
, которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой; - адаптивные изображения рекомендуется использовать с атрибутами
sizes
иsrcset
(смотрите также элемент<picture>
и наше руководство «Адаптивные изображения»).
Категории контента | Потоковый контент, фразовый контент, встроенный контент, явный контент. Если элемент имеет атрибут usemap , он так же принадлежит к категории интерактивного контента. |
---|---|
Допустимое содержимое | Никакое, так как это пустой элемент. |
Пропуск тегов | Должен иметь открывающий тег и не должен иметь закрывающий. |
Допустимые родители | Любой элемент, который разрешает встроенный контент в качестве содержимого. |
Допустимые ARIA-роли | Любые |
DOM-интерфейс | HTMLImageElement |
Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные пользовательские агенты поддерживают разные наборы форматов.
Firefox
Форматы изображений, поддерживаемые Firefox:
- JPEG;
- GIF, включая анимированные GIF;
- PNG;
- APNG;
- SVG;
- BMP;
- BMP ICO;
- PNG ICO.
Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события onerror
был настроен на обработку события error (en-US)
, тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:
- атрибут
src
пустой или null; - указанный URL в атрибуте
src
совпадает с URL страницы, на которой в данный момент находится пользователь; - указанное изображение каким-то образом повреждено, что препятствует его загрузке;
- метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента
<img>
не было указано никаких размеров; - указанное изображение имеет формат, который не поддерживается пользовательским агентом.
К этому элементу применимы глобальные атрибуты.
alt
Этим атрибутом задаётся альтернативное текстовое описание изображения.
Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте
alt
элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибутеalt
.
Примечание: Пропуск этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки (alt=""
) указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).crossorigin
Этот атрибут указывает, следует ли использовать CORS при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе
<canvas>
не будучи «испорченными». Допустимые значения:anonymous
: Запрос cross-origin (т.е. с HTTP-заголовкомOrigin
) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовокAccess-Control-Allow-Origin
), изображение будет «испорчено» и его использование будет ограничено;use-credentials
: Запрос cross-origin (т.е. с HTTP-заголовкомOrigin
) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовкаAccess-Control-Allow-Origin
), изображение будет «испорчено» и его использование будет ограничено.Если этот атрибут не задан, то CORS при загрузке изображения не используется (т.е. без отправки HTTP-заголовкаOrigin
), ограничивая его использование в элементе<canvas>
. Если задан неправильно, то он обрабатывается так, как если бы использовалось значениеanonymous
. Для получения дополнительной информации смотрите «Настройки атрибутов CORS».
decoding
Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:
sync
: Декодировать изображение синхронно для одновременного отображения с другим контентом;async
: Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;auto
: Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.
height
Внутренняя высота (см. Внутренний размер (en-US)) изображения в пикселях.
importance
Экспериментальная возможность
Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:
auto
: Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;high
: Указывает браузеру, что изображение имеет высокий приоритет;low
: Указывает браузеру, что изображение имеет низкий приоритет.
intrinsicsize
Экспериментальная возможность
Этот атрибут говорит браузеру игнорировать действительный внутренний размер (en-US) изображения и делать вид, что это размер, указанный в атрибуте. В частности, изображение будет растровым в этих измерениях, а
narutalWidth
/naturalHeight
изображения будут возвращать значения, указанные в этом атрибуте. Объяснение, примеры.ismap
Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.
Примечание: Этот атрибут разрешён, только если элемент
<img>
является потомком элемента<a>
с валидным (соответствующий требованиям) атрибутомhref
.loading
Экспериментальная возможность
Указывает на то, как браузер должен загрузить изображение:
eager
: Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).lazy
: Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.
referrerpolicy
Экспериментальная возможность
Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:
no-referrer
: ЗаголовокReferer
не будет отправлен;no-referrer-when-downgrade
: ЗаголовокReferer
не отправляется, когда происходит переход к источнику без TLS (HTTPS). Это поведение по умолчанию для пользовательских агентов, если не указано иное;origin
: ЗаголовокReferer
будет содержать схему адресации ресурса (HTTP, HTTPS, FTP и т.д), хост и порт;origin-when-cross-origin
: Переход на другие источники ограничит включённые реферальные данные схемой адресации ресурса, хостом и портом, в то время как переход из того же источника будет включать полный путь реферала;unsafe-url
: ЗаголовокReferer
будет включать источник и путь, но не фрагмент URL, пароль или имя пользователя. Этот метод небезопасен, потому что будет утечка источников и путей от ресурсов, защищённых TLS, к незащищённым источникам.
sizes
Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:1. Условия медиа-запроса. Должно быть пропущено для последнего элемента. 2. Значения размера источника.Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом
srcset
, если эти источники описываются с помощью дескриптора ширины ‘w
‘ (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибутsrcset
отсутствует или не содержит значений с дескриптором ‘w
‘, то атрибутsizes
не будет иметь никакого эффекта.src
URL изображения. Этот атрибут является обязательным для элемента
<img>
. В браузерах, поддерживающихsrcset
,src
обрабатывается как изображение-кандидат с дескриптором плотности пикселей1x
, если только изображение с этим дескриптором уже не определено вsrcset
или еслиsrcset
не содержит дескрипторы ‘w
‘.srcset
Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования пользовательскими агентами. Каждая строка состоит из:1. URL изображения. 2. Необязательного, пробела, сопровождаемого:
- дескриптором ширины или положительным целым числом, за которым сразу же следует ‘
w
‘. Дескриптор ширины делится на размер источника, полученный из атрибутаsizes
, для расчёта эффективной плотности пикселей; - дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует ‘
x
‘.Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию:1x
.Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибутеsrcset
. Повторение дескрипторов (например, два источника в одномsrcset
с одинаковым дескриптором ‘2x
‘) так же является недопустимым. Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство «Адаптивные изображения» для примера.
- дескриптором ширины или положительным целым числом, за которым сразу же следует ‘
width
Внутренняя ширина (см. Внутренний размер (en-US)) изображения в пикселях.
usemap
Неполный URL (начиная с ‘
#
‘) карты-изображения, связанной с элементом.Примечание: вы не можете использовать этот атрибут, если элемент
<img>
является потомком элемента<a>
или<button>
.
Устаревшие атрибуты
align
Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован — вместо этого используйте CSS-свойства
float
и/илиvertical-align
. Вы можете так же использовать CSS-свойствоobject-position
для позиционирования изображения внутри границ элемента<img>
. Допустимые значения:top
: Аналогvertical-align: top
илиvertical-align: text-top
;middle
: Аналогvertical-align: -moz-middle-with-baseline
;bottom
: Отсутствует значение по умолчанию, аналогvertical-align: unset
илиvertical-align: initial
;left
: Аналогfloat: left
;right
: Аналогfloat: right
.
border
Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство
border
вместо этого атрибута.hspace
Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство
margin
вместо этого атрибута.longdesc
Ссылка на более подробное описание изображения. Возможными значениями являются URL или
id
элемента.Примечание: Этот атрибут упомянут в последней версии от W3C, HTML 5.2, но был удалён из живого стандарта HTML от WHATWG. У него неопределённое будущее; авторы должны использовать альтернативы WAI-ARIA, такие как aria-describedby или aria-details.
name
Имя для элемента. Вы должны использовать атрибут
id
вместо этого атрибута.vspace
Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство
margin
вместо этого атрибута.
<img>
является замещаемым элементом; по умолчанию он имеет значение свойства display
равное inline
, но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как border
/border-radius
, padding
/margin
, width
/height
и так далее.
Однако, часто бывает полезно установить для изображений свойство display
в значение block
, так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto
не работает на изображениях с display: inline
, легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).
У <img>
нет базовой линии, когда изображения используются в ситуации со строчным форматированием (display: inline
) вместе с vertical-align
: baseline
, нижняя граница изображения будет размещена на базовой линии контейнера.
Вы можете использовать свойство object-position
для позиционирования изображения внутри границ элемента <img>
и свойством object-fit
регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).
В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента <svg>
не заданы width
и height
.
Альтернативный текст
Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" alt="Логотип MDN - изображение динозавра с текстом MDN web docs">
Изображение-ссылка
Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег <img>
внутрь элемента <a>
. Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.
<a href="https://developer. mozilla.org"> <img src="https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg" alt="Посетить сайт MDN"> </a>
Использование атрибута srcset
В этом примере мы добавляем атрибут srcset
, содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src
на устройствах с высоким разрешением. Изображение указанное в атрибуте src
, считается 1x
кандидатом в пользовательских агентах, которые поддерживают srcset
.
<img src="mdn-logo-sm.png" alt="MDN" srcset="mdn-logo-HD.png 2x">
Использование атрибутов srcset и sizes
Атрибут src
игнорируется в пользовательских агентах, которые поддерживают srcset
, когда добавлены дескрипторы ‘w
‘. Когда условие медиавыражения (max-width: 600px)
совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.
<img src="clock-demo-thumb-200.png" alt="Часы" srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" >
Хотя у элементов <img>
есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите «Заголовок Referer: проблемы приватности и безопасности (en-US)» для получения дополнительной информации.
Создание значимых альтернативных описаний
Значение атрибута alt
должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt
намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.
Плохо
<img alt="image" src="penguin.jpg">
Хорошо
<img alt="Пингвин на пляже. " src="penguin.jpg">
Когда у изображения отсутствует атрибут alt
, некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.
- Дерево решений атрибута alt • Изображения • Веб-руководство WAI по доступности.
- Альтернативные тексты: максимальное руководство — Axess Lab.
- Как создать отличный альтернативный текст: введение | Deque.
- MDN Понимание WCAG, Руководство 1.1. объяснения.
- Понимание критерия успешного исхода 1.1.1 | W3C Понимание WCAG 2.0.
Атрибут title
Атрибут title
не является приемлемой заменой атрибута alt
. Кроме того, избегайте повторения значения атрибута alt
в атрибуте title
, объявленном на том же изображении.
Атрибут title
также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент <figure>
вместе с элементом <figcaption>
.
- Использование HTML-атрибута title — обновлено | The Paciello Group.
Specification |
---|
HTML Standard # the-img-element |
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
- Изображения в HTML.
- Адаптивные изображения.
- Элементы
<picture>
,<object>
(en-US) и<embed>
. - Связанные с изображениями CSS-свойства:
object-fit
,object-position
,image-orientation
(en-US),image-rendering
(en-US), иimage-resolution
(en-US).
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
Основы HTML (для начинающих) | IT-INCUBATOR
HTML (Hypertext Markup Language) — это язык гипертекстовой разметки. Он передаёт браузеру информацию о том, как необходимо отобразить тот или иной элемент на веб-странице.
Знание HTML является обязательным не только для веб-разработчиков и дизайнеров, но также всегда может пригодиться для смежных областей — например, в интернет-маркетинге и даже в no-code разработке.
Основы HTML
HTML представляет собой текстовый документ с расширением .html. Его можно создать как в специализированных редакторах (WebStorm, Visual Studio Code, Notepad++ и т.д.), так и в самом простом текстовом редакторе ”Блокнот”.
В HTML нет переменных, функций, операторов и т. д., поэтому его нельзя отнести к полноценным языкам программирования.
HTML состоит из 2х компонентов:
- дерева элементов;
- содержания.
Каждый HTML-элемент обозначается с помощью тегов — это специальные знаки, состоящие из угловых скобок (<>). Бывают открывающие <> и закрывающие </> теги.
По сути, теги — это команды, передаваемые браузеру, которые затем обрабатываются и преобразуются им в визуальные объекты веб-страницы.
Между <> и </> находится содержание элемента страницы. Это может быть картинка, текст, заголовок и т.д.
Например:
<p>Какое-то содержание</p>
В данном примере теги <p> и </p> отвечают за разметку абзацев (от англ. “paragraph”). Таким образом, браузер распознает, что здесь должен быть параграф с нашим текстом, указанным между открывающим и закрывающим тегами.
Теги также могут быть одиночными. В них содержание не хранится напрямую, а устанавливается в виде значения атрибута. К примеру, такой код:
<input type="button" value="Узнать больше"/>
создаст кнопку с текстом “Узнать больше” внутри.
Как говорилось выше, теги могут быть вписаны один в другой. Например:
<p><em>Какой-то текст</em></p>
Здесь тег <p> даёт команду расположить текст отдельным абзацем, а тег <em> — отобразить текст в данном абзаце курсивным начертанием.
При вложении тегов друг в друга следует придерживаться правил их корректного закрытия. Например, вот такая запись работать не будет:
<p><em>Ваш текст</p></em>.
Виды HTML-элементов
HTML-элементы бывают двух видов:
- блочные;
- строчные.
Блочные элементы
Блочные элементы занимают всю доступную ширину, а высота элемента зависит от его содержимого. Такие элементы всегда начинается с новой строки и могут быть использованы в другом блочном элементе. Например:
<h2> — используется для главных заголовков страниц;
<h3> по <h6> — подзаголовки;
<p> — текстовый абзац;
<ul> — маркированный список;
<ol> — нумерованный список;
<blockquote> — выделяет цитаты внутри документа;
<div> — элемент разделения содержимого (используется для его группировки).
Строчные элементы
Строчные элементы занимают пространство, ограниченное тегами. То есть они входят в состав других элементов страницы. Например, это может быть абзац или заголовок.
В основном строчные элементы используются для изменения визуального отображения текста или его выделения. Пример таких тегов:
<a> — создаёт ссылки;
<i> — делает шрифт курсивным;
<input> — создаёт различные элементы интерфейса;
<span> — аналогично тегу <div>, используется для группировки элементов;
<strong> — выделяет текст жирным начертанием;
<em> — создаёт акцентированный текст (как правило, отображается в виде курсива).
В отличие от блочных, в строчных элементах их ширина определяется объемом контента. Также эти элементы не начинаются с новой строки.
Строчные элементы допускается размещать внутри как блочных, так и других строчных элементов. А вот блочные элементы внутри строчных размещать запрещено.
HTML-атрибуты
HTML-теги могут содержать атрибуты — они состоят из имени и значения, и находятся в открывающем теге в таком формате:
name="value" -
Специальные значения, которые управляют элементами и их поведением, и называются атрибутами.
Атрибуты задают свойства и устанавливают поведение соответствующего тега. Они бывают глобальными — в этом случае они используются любым из элементов, например: id (определяет уникальное имя элемента), class (стилизация элементов посредством CSS).
Каждому тегу может соответствовать несколько значений class, но лишь один уникальный id. Например:
<div class=”content”> Какое-то содержимое </div>
<p id=”paragraph”> Какое-то содержимое абзаца </p>
В значениях id и class разрешено использовать только буквы, цифры, нижние подчёркивания и дефисы. Однако, начинаться они могут только с букв или цифр. Если одновременно используется несколько значений class, то они разделяются пробелом.
Документ HTML состоит из двух разделов:
Оба раздела “обёрнуты” в корневой тег <html>. Корневой элемент <html> образует дерево документа, или по-другому — DOM (document object model, с англ. — объектная модель документа). DOM связывает страницу с языками описания сценариев или программирования.
Правила, которым придерживается HTML, находятся в файле описания типа документа (Document Type Definition, или DTD). За правильное отображение веб-страницы отвечает элемент <!DOCTYPE>. Он определяет версию HTML (например, для привязки к HTML5 нужно указать: <!DOCTYPE html>) и ассоциирует страницу с нужным DTD-файлом.
Чтобы ассоциативно представить правильное расположение тегов, можно представить тело человека:
HTML — оболочка, в которой находятся все элементы.
<html>
*
*
*
</html>
Head — голова . В теге <head> содержатся данные о странице: описание, ключевые слова для поиска, заголовок, подключаемые внешние файлы. Эта информация не видна посетителю страницы. Но эти данные передают браузеру информацию о том, как нужно обрабатывать страницу.
Body — тело. В <body> располагается весь отображаемый контент документа.
Теперь более подробно. Как видим из рисунка выше, в теге <head> мы можем указывать различные элементы, содержащие данные о нашей HTML-странице, например <title>, <link>, <meta>, <style> и др.
Пример:
<title> Заголовок документа </title>
Тег <title> содержит в себе текст заголовка. Он может состоять только из текста и игнорирует любые иные элементы. Рекомендуется, чтобы заголовок был длиной не более 60 символов, иначе часть текста может потеряться в сниппете поисковой выдачи.
<style> Стили CSS </style> — тег <style> определяет стили веб-страницы. В HTML-документе они задаются с использованием CSS. Тегов <style> может быть несколько на странице.
Пример:
<style>
h2.h3{
font-family:sans-serif;
color:gray;}
</style>
Этот вариант хоть и рабочий, но использовать его нежелательно, т.к. он уже устарел.
Наиболее оптимальным спобобом установки стилей является их запись в файл с расширением .css (например, style.css). И затем этот файл можно подключить к HTML-странице с помощью элемента <link/>:
<link rel="stylesheet" href="/style.CSS">
Данный способ подключения стилей является актуальным на сегодняшний день.
<meta> — этот тег содержит метаданные (дополнительные данные) о веб-странице. Пользователь не видит их на странице, но они выполняют множество важных функций: сообщают поисковым системам информацию о странице, устанавливают срок действия веб-страницы, предотвращают кэширование браузером страницы и т. д. Информация в теге <meta> передаётся с использованием атрибутов.
Резюмируя вышесказанное, можем написать несложную веб-страницу:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html">
<title>Заголовок нашей страницы</title>
<link rel="stylesheet" href="/style.CSS">
</head>
<body>
<div class=container>
<p>Возможно, это ваша первая HTML-страница</p>
</div>
</body>
</html>
Теперь вы можете попробовать написать этот код сами или скопировать его в любой редактор кода, сохранить в формате HTML (например, создав файл index.html) и затем открыть в браузере. Вот что у вас должно получиться:
Как видите, в данном примере стили у нас не подключились. Как мы уже говорили, для них нужно создать файл с расширением .css (style.css или с любым другим именем) и задать в нём стили для разных элементов.
В завершение можно сказать, что язык HTML является очень важным и неотъемлемым инструментом веб-дизайна и разработки. Вместе с CSS и JavaScript эти три технологии являются основой в создании полностью функциональных сайтов и приложений.
Введение в HTML — обучение веб-разработке
По своей сути HTML — это язык, состоящий из элементов, которые можно применять к частям текста, чтобы придать им различное значение в документе (это абзац? маркированный список? Является ли он частью таблицы?), структурировать документ на логические разделы (есть ли у него заголовок? три столбца содержимого? меню навигации?), а также встраивать содержимое, такое как изображения и видео, на страницу. В этом модуле будут представлены первые два из них, а также представлены основные концепции и синтаксис, которые вам необходимо знать для понимания HTML.
Хотите стать веб-разработчиком?
Мы подготовили курс, который включает в себя всю необходимую информацию, необходимую для
работайте над своей целью.
Начало работы
Перед тем, как приступить к этому модулю, вам не нужны какие-либо предварительные знания HTML, но вы должны иметь хотя бы базовые навыки использования компьютеров и пассивного использования Интернета (т. е. просто смотреть на него и потреблять контент). У вас должна быть настроена базовая рабочая среда (как подробно описано в разделе «Установка базового программного обеспечения»), и вы должны понимать, как создавать файлы и управлять ими (как подробно описано в разделе «Работа с файлами»). Оба являются частями нашего модуля «Начало работы с Интернетом для начинающих».
Примечание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать собственные файлы, вы можете попробовать (большинство) примеров кода в онлайн-программах кодирования, таких как JSBin или Glitch.
Этот модуль содержит следующие статьи, которые познакомят вас со всей базовой теорией HTML и предоставят вам широкие возможности для проверки некоторых навыков.
- Начало работы с HTML
Охватывает абсолютные основы HTML, чтобы вы могли начать работу — мы определяем элементы, атрибуты и другие важные термины и показываем, где они подходят к языку. Мы также покажем, как устроена типичная HTML-страница и как устроен HTML-элемент, а также объясним другие важные базовые функции языка. Попутно мы поиграем с HTML, чтобы вас заинтересовать!
- Что в голове? Метаданные в HTML
Заголовок документа HTML — это часть, которая не отображается в веб-браузере при загрузке страницы. Он содержит такую информацию, как страница
, ссылки на CSS (если вы хотите стилизовать свой HTML-контент с помощью CSS), ссылки на пользовательские значки избранного и метаданные (данные о HTML, например, кто его написал, и важные ключевые слова, описывающие документ).- Основы HTML-текста
Одной из основных задач HTML является придание тексту смысла (также известного как семантика), чтобы браузер знал, как его правильно отобразить. В этой статье рассматривается, как использовать HTML для разбиения блока текста на структуру заголовков и абзацев, добавления акцента/важности словам, создания списков и многого другого.
- Создание гиперссылок
Гиперссылки действительно важны — именно они делают сеть сетью. В этой статье показан синтаксис, необходимый для создания ссылки, и обсуждаются рекомендации по созданию ссылок.
- Расширенное форматирование текста
В HTML есть множество других элементов для форматирования текста, которые мы не рассмотрели в статье по основам работы с HTML-текстом. Элементы здесь менее известны, но о них все равно полезно знать. В этой статье вы узнаете о разметке цитат, списков описаний, компьютерного кода и другого соответствующего текста, подстрочного и надстрочного индексов, контактной информации и т. д.
- Структура документа и веб-сайта
Помимо определения отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также используется для определения областей вашего веб-сайта (таких как «заголовок», «меню навигации» или «столбец основного контента»). В этой статье рассматривается, как спланировать базовую структуру веб-сайта и как написать HTML для представления этой структуры.
- Отладка HTML
Написание HTML — это хорошо, но что, если что-то пойдет не так, и вы не сможете понять, где ошибка в коде? Эта статья познакомит вас с некоторыми инструментами, которые могут помочь.
Следующие тесты проверят ваше понимание основ HTML, описанных в руководствах выше.
- Разметка письма
Все мы рано или поздно учимся писать письма; это также полезный пример для проверки навыков форматирования текста. В этой оценке вам будет дано письмо для разметки.
- Структурирование страницы контента
Этот тест проверяет вашу способность использовать HTML для структурирования простой страницы с контентом, содержащей верхний и нижний колонтитулы, меню навигации, основное содержимое и боковую панель.
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Изучение основ HTML для начинающих
Навыки, которые вы приобретете
- HTML-классы и идентификаторы
- Раскрывающийся список в HTML
- Блоки содержимого в HTML
- HTML слайдер изображений
- Панель навигации HTML
- Регистрационная форма HTML
- Веб-дизайн и специальные возможности
Подробнее
Кто должен учиться
- Начинающие разработчики программного обеспечения
- Аналитики данных
- Специалисты по данным
- Инженеры по искусственному интеллекту
- Кодеры
- Программисты-энтузиасты
Просмотреть больше
Что вы узнаете
Введение в HTML
Введение
01:12
Введение
01:12
Урок 01.
Введение в HTML
17:25
Урок 02. Выпадающие списки и блоки содержимого в HTML
29:16
Урок 03. Слайдер HTML-изображений 9 0005 28:31
Слайдер изображений HTML
28:31
Урок 04: Панель навигации
35:51
Панель навигации
35:51
Урок 05: HTML-викторина
47:10
HTML-викторина
47:10
Урок 06: Учебное пособие по веб-дизайну
01:17:04
Учебное пособие по веб-дизайну
01:17:04
Урок 07: HTML-вопросы на собеседовании
13:53
Урок 08: Как стать фронтенд-разработчиком в 2021 году?
37:54
Подробнее
Зачем учить
Второй по популярности язык
В мировом сообществе разработчиков.
$65 436
Средняя годовая зарплата HTML-разработчика
Часто задаваемые вопросы
Как новички изучают HTML онлайн?
Новички, которые хотят изучать HTML, могут начать с основ. После того, как вы освоите основы HTML, вы можете перейти к более сложным темам.
Сколько времени нужно, чтобы выучить HTML?
Этот бесплатный курс HTML состоит из 5 часов видеоконтента, который поможет вам досконально понять концепции.
Что я должен изучить в первую очередь на бесплатном курсе HTML?
Рекомендуется всегда начинать сначала с основ HTML. Для лучшего понимания смотрите обучающие видео последовательно, не пропуская ни одного.
Легко ли освоить основы HTML?
Видео, которые вы найдете в рамках этого бесплатного онлайн-курса HTML, созданы наставниками, лидерами отрасли с большим опытом работы в этой области. Они знают о потребностях разных учащихся и разработали курс таким образом, чтобы его было легко освоить.
Могу ли я пройти этот бесплатный курс HTML за 90 дней?
Да, вы можете пройти это бесплатное обучение HTML в течение 90 дней.
Получу ли я сертификат после прохождения курса HTML для начинающих?
Да, после прохождения бесплатного обучения HTML вы получите сертификат об окончании курса.