1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Верстка редко заканчивается расположением блоков и разметкой текста. Для большей привлекательности дизайнеры используют различные медиаэлементы: изображения, аудио и видео элементы. Все это, вместе с хорошей версткой текста, создает законченный облик макета.</p>
1
<p>Верстка редко заканчивается расположением блоков и разметкой текста. Для большей привлекательности дизайнеры используют различные медиаэлементы: изображения, аудио и видео элементы. Все это, вместе с хорошей версткой текста, создает законченный облик макета.</p>
2
-
<p>Важно знать нюансы вставки различных элементов. От этого зависит как скорость загрузки элементов, так и их корректное отображение на различных устройствах. К примеру, нет нужды подгружать картинку с шириной в 1980px, если разрешение экрана всего 768px по ширине. Обработка лишнего веса картинки ляжет на плечи пользователя, а точнее его интернета.</p>
2
+
<p>Важно знать нюансы вставки различных элементов. От этого зависит как скорость заг��узки элементов, так и их корректное отображение на различных устройствах. К примеру, нет нужды подгружать картинку с шириной в 1980px, если разрешение экрана всего 768px по ширине. Обработка лишнего веса картинки ляжет на плечи пользователя, а точнее его интернета.</p>
3
<p>В этом уроке мы рассмотрим вставку медиаэлементов и то, как HTML помогает нам оптимизировать их загрузку.</p>
3
<p>В этом уроке мы рассмотрим вставку медиаэлементов и то, как HTML помогает нам оптимизировать их загрузку.</p>
4
<h2>Изображения</h2>
4
<h2>Изображения</h2>
5
<p>Изображения - несомненно самый частый медиаэлемент, с которым приходится сталкиваться. Контекстное изображение, фон - все это является изображением, которое необходимо подгрузить. В зависимости от назначения изображения, оно может быть вставлено с помощью HTML или CSS.</p>
5
<p>Изображения - несомненно самый частый медиаэлемент, с которым приходится сталкиваться. Контекстное изображение, фон - все это является изображением, которое необходимо подгрузить. В зависимости от назначения изображения, оно может быть вставлено с помощью HTML или CSS.</p>
6
<p>Для вставки изображения с помощью HTML используется специальный тег <img>. Это непарный тег, основными атрибутами которого являются:</p>
6
<p>Для вставки изображения с помощью HTML используется специальный тег <img>. Это непарный тег, основными атрибутами которого являются:</p>
7
<ul><li>src - путь до изображения.</li>
7
<ul><li>src - путь до изображения.</li>
8
<li>alt - альтернативный текст изображения.</li>
8
<li>alt - альтернативный текст изображения.</li>
9
</ul><p>Описание в атрибуте alt - несправедливо многими забытый момент. Визуально он выдает себя только при сбое загрузки изображения, поэтому, зачастую, его заполняют "как попало". Это плохой тон! Именно этот атрибут считывают скринридеры (устройства для чтения с экрана) для передачи сути изображения. Если описание имеет вид "Картинка 1", то слепые люди никогда не поймут, что же там было.</p>
9
</ul><p>Описание в атрибуте alt - несправедливо многими забытый момент. Визуально он выдает себя только при сбое загрузки изображения, поэтому, зачастую, его заполняют "как попало". Это плохой тон! Именно этот атрибут считывают скринридеры (устройства для чтения с экрана) для передачи сути изображения. Если описание имеет вид "Картинка 1", то слепые люди никогда не поймут, что же там было.</p>
10
<p>Важно понимать, что должно быть в атрибуте alt. Представьте, что не загрузилось изображение, показывающее результаты соц. опроса. Какие варианты описания могут быть?</p>
10
<p>Важно понимать, что должно быть в атрибуте alt. Представьте, что не загрузилось изображение, показывающее результаты соц. опроса. Какие варианты описания могут быть?</p>
11
<ul><li><em>Результаты социального опроса</em>- было описано изображение, но не его суть. Так какие в итоге результаты соц. опроса?</li>
11
<ul><li><em>Результаты социального опроса</em>- было описано изображение, но не его суть. Так какие в итоге результаты соц. опроса?</li>
12
<li><em>Инфографика</em>- тут уже теряется смысл, а что за инфографика? Если в тексте не было заголовка до нее, то все совсем печально.</li>
12
<li><em>Инфографика</em>- тут уже теряется смысл, а что за инфографика? Если в тексте не было заголовка до нее, то все совсем печально.</li>
13
<li><em>Результаты социального опроса. Windows используют 30% опрошенных. Linux используют 50% опрошенных. 20% используют DOS</em>. Длинное название, но оно полностью раскрывает суть.</li>
13
<li><em>Результаты социального опроса. Windows используют 30% опрошенных. Linux используют 50% опрошенных. 20% используют DOS</em>. Длинное название, но оно полностью раскрывает суть.</li>
14
</ul><p>Работа с такими описаниями - это сложный момент. Не всегда есть возможность так описывать изображения. Ведь данные могут поступать с сервера и уже нет возможности полностью влиять на альтернативный текст. Хорошим тоном является продублировать информацию в виде текста, рядом с изображением. Не стоит полагаться только на визуальное представление, иногда пара строк текста поможет сильнее, чем красивое и детальное изображение.</p>
14
</ul><p>Работа с такими описаниями - это сложный момент. Не всегда есть возможность так описывать изображения. Ведь данные могут поступать с сервера и уже нет возможности полностью влиять на альтернативный текст. Хорошим тоном является продублировать информацию в виде текста, рядом с изображением. Не стоит полагаться только на визуальное представление, иногда пара строк текста поможет сильнее, чем красивое и детальное изображение.</p>
15
<p>У изображений, вставленных с помощью тега <img> есть неприятная особенность - они не сжимаются в зависимости от устройства. Если ваше изображение имеет размер 1280 пикселей, то оно будет таким на любом разрешении экрана и в любом контейнере. Здесь не играет роли даже ограничение контейнера по ширине или высоте.</p>
15
<p>У изображений, вставленных с помощью тега <img> есть неприятная особенность - они не сжимаются в зависимости от устройства. Если ваше изображение имеет размер 1280 пикселей, то оно будет таким на любом разрешении экрана и в любом контейнере. Здесь не играет роли даже ограничение контейнера по ширине или высоте.</p>
16
<p><a>Codepen</a></p>
16
<p><a>Codepen</a></p>
17
<p>Размер контейнера в примере выше ограничен 500 пикселями. Чтобы его лучше было видно, мы добавили толстые границы. Как видите, само изображение спокойно ушло за пределы контейнера. Это не то, что хочется. Особенно учитывая большое количество устройств, с которыми приходится сталкиваться.</p>
17
<p>Размер контейнера в примере выше ограничен 500 пикселями. Чтобы его лучше было видно, мы добавили толстые границы. Как видите, само изображение спокойно ушло за пределы контейнера. Это не то, что хочется. Особенно учитывая большое количество устройств, с которыми приходится сталкиваться.</p>
18
<p>Решить эту проблему позволяют два свойства:</p>
18
<p>Решить эту проблему позволяют два свойства:</p>
19
<ul><li>max-width - максимальная ширина элемента. Указав значение в 100%, вы запретите элементу занимать ширину больше своего родителя.</li>
19
<ul><li>max-width - максимальная ширина элемента. Указав значение в 100%, вы запретите элементу занимать ширину больше своего родителя.</li>
20
<li>height - высота. Часто выставляют значение auto. Это позволит сохранить правильные пропорции.</li>
20
<li>height - высота. Часто выставляют значение auto. Это позволит сохранить правильные пропорции.</li>
21
</ul><p>Итого получится следующий CSS код, который вы будете очень часто встречать в проектах:</p>
21
</ul><p>Итого получится следующий CSS код, который вы будете очень часто встречать в проектах:</p>
22
<p><a>Codepen</a></p>
22
<p><a>Codepen</a></p>
23
<p>Если внимательно приглядеться к примеру, то можно заметить небольшой отступ между картинкой и нижней границей блока. В начале вашей карьеры можно наломать кучу дров в борьбе с этой проблемой. Но она решается очень быстро.</p>
23
<p>Если внимательно приглядеться к примеру, то можно заметить небольшой отступ между картинкой и нижней границей блока. В начале вашей карьеры можно наломать кучу дров в борьбе с этой проблемой. Но она решается очень быстро.</p>
24
<p>Такой эффект получается из-за свойства vertical-align, которое отвечает за вертикальное выравнивание элемента. По умолчанию оно имеет значение baseline. В будущих курсах вы больше узнаете о том, как конкретно происходит такое выравнивание. Сейчас нам важна практическая часть и решение проблемы. Для этого достаточно указать значение middle для свойства vertical-align у изображения.</p>
24
<p>Такой эффект получается из-за свойства vertical-align, которое отвечает за вертикальное выравнивание элемента. По умолчанию оно имеет значение baseline. В будущих курсах вы больше узнаете о том, как конкретно происходит такое выравнивание. Сейчас нам важна практическая часть и решение проблемы. Для этого достаточно указать значение middle для свойства vertical-align у изображения.</p>
25
<p><a>Codepen</a></p>
25
<p><a>Codepen</a></p>
26
<h3>Использование нескольких версий изображения</h3>
26
<h3>Использование нескольких версий изображения</h3>
27
<p>В HTML существует специальная конструкция, которая позволяет использовать разные версии изображений. Это отличная возможность адаптировать изображения для различных устройств. Основное преимущество заключается в том, что в зависимости от разрешения устройства браузер будет загружать определенное изображение. Для этого используются медиазапросы. Подробнее с ними вы познакомитесь в курсе<a>CSS: Адаптивность</a>.</p>
27
<p>В HTML существует специальная конструкция, которая позволяет использовать разные версии изображений. Это отличная возможность адаптировать изображения для различных устройств. Основное преимущество заключается в том, что в зависимости от разрешения устройства браузер будет загружать определенное изображение. Для этого используются медиазапросы. Подробнее с ними вы познакомитесь в курсе<a>CSS: Адаптивность</a>.</p>
28
<p>Для указания нескольких вариантов изображения используется тег <picture>, который имеет следующую структуру:</p>
28
<p>Для указания нескольких вариантов изображения используется тег <picture>, который имеет следующую структуру:</p>
29
<ul><li>Внутри тега <picture> обязательно должен находиться тег <img>. Это основное изображение, которое будет загружено, если другие варианты не подходят.</li>
29
<ul><li>Внутри тега <picture> обязательно должен находиться тег <img>. Это основное изображение, которое будет загружено, если другие варианты не подходят.</li>
30
<li>В специальном теге <source> лежат другие варианты изображений. Они будут подключаться в зависимости от медиазапроса, который указывается в атрибуте media.</li>
30
<li>В специальном теге <source> лежат другие варианты изображений. Они будут подключаться в зависимости от медиазапроса, который указывается в атрибуте media.</li>
31
</ul><p><a>Codepen</a></p>
31
</ul><p><a>Codepen</a></p>
32
<p>Перейдите на сайт CodePen и попробуйте изменять размер окна браузера. Вы увидите, что изображение будет меняться на некоторых разрешениях.</p>
32
<p>Перейдите на сайт CodePen и попробуйте изменять размер окна браузера. Вы увидите, что изображение будет меняться на некоторых разрешениях.</p>
33
<h2>Видео и аудио</h2>
33
<h2>Видео и аудио</h2>
34
<p>Вставка видео и аудио файлов с помощью HTML очень похожа на добавление изображений через тег <picture>. Необходим общий контейнер и несколько элементов <source> внутри него. Главное отличие - большое количество дополнительных атрибутов, которые позволяют добавлять или удалять интерактивные элементы, а также влиять на предзагрузку.</p>
34
<p>Вставка видео и аудио файлов с помощью HTML очень похожа на добавление изображений через тег <picture>. Необходим общий контейнер и несколько элементов <source> внутри него. Главное отличие - большое количество дополнительных атрибутов, которые позволяют добавлять или удалять интерактивные элементы, а также влиять на предзагрузку.</p>
35
<h3>Видеофайлы</h3>
35
<h3>Видеофайлы</h3>
36
<p>Добавление видео происходит с помощью тега <video>. Все видеофайлы добавляются внутри этого тега с помощью тегов <source>. Исключением является ситуация, при которой видеофайл всего один. Тогда его можно добавить в виде атрибута для тега <video>.</p>
36
<p>Добавление видео происходит с помощью тега <video>. Все видеофайлы добавляются внутри этого тега с помощью тегов <source>. Исключением является ситуация, при которой видеофайл всего один. Тогда его можно добавить в виде атрибута для тега <video>.</p>
37
<p>Если видео представлено в нескольких форматах, то все они должны быть указаны через теги <source>, по аналогии с добавлением изображений.</p>
37
<p>Если видео представлено в нескольких форматах, то все они должны быть указаны через теги <source>, по аналогии с добавлением изображений.</p>
38
<p>Можно заметить, что в <source> находятся одни и те же видео, только в разных форматах. Почему это важно? Дело в том, что не каждый браузер поддерживает все возможные форматы видео. С каждым годом браузеры все улучшают поддержку форматов, но проблема старых браузеров остается актуальной. Наиболее "всеядный" формат для браузеров -<em>mp4</em>. Используя его можно не волноваться за то, что браузер не прочтет видеофайл. При этом разные форматы дают разную степень сжатия и качества. Именно поэтому стоит указывать несколько форматов. Браузер сам выберет необходимый.</p>
38
<p>Можно заметить, что в <source> находятся одни и те же видео, только в разных форматах. Почему это важно? Дело в том, что не каждый браузер поддерживает все возможные форматы видео. С каждым годом браузеры все улучшают поддержку форматов, но проблема старых браузеров остается актуальной. Наиболее "всеядный" формат для браузеров -<em>mp4</em>. Используя его можно не волноваться за то, что браузер не прочтет видеофайл. При этом разные форматы дают разную степень сжатия и качества. Именно поэтому стоит указывать несколько форматов. Браузер сам выберет необходимый.</p>
39
<p>Тег <video> имеет множество интересных атрибутов. Не все из них стоит знать в начале своего пути, но основные из них мы изучим:</p>
39
<p>Тег <video> имеет множество интересных атрибутов. Не все из них стоит знать в начале своего пути, но основные из них мы изучим:</p>
40
<ul><li>autoplay - Автоматическое воспроизведение видео. Не добавляйте его без крайней необходимости. Всегда хочется показать все лучшее со страницы, но внезапное воспроизведение файла скорее разозлит пользователя</li>
40
<ul><li>autoplay - Автоматическое воспроизведение видео. Не добавляйте его без крайней необходимости. Всегда хочется показать все лучшее со страницы, но внезапное воспроизведение файла скорее разозлит пользователя</li>
41
<li>controls - добавление интерактивных элементов управления, таких как запуск, остановка, регулировка звука</li>
41
<li>controls - добавление интерактивных элементов управления, таких как запуск, остановка, регулировка звука</li>
42
<li>muted - Выключение воспроизведения аудиодорожки. Если в видео важен только визуальный ряд, а фоновая музыка второстепенна, то стоит установить этот атрибут. При необходимости пользователь сам включит звук</li>
42
<li>muted - Выключение воспроизведения аудиодорожки. Если в видео важен только визуальный ряд, а фоновая музыка второстепенна, то стоит установить этот атрибут. При необходимости пользователь сам включит звук</li>
43
<li>preload - Указание на предзагрузку видео до взаимодействия с ним. Может принимать одно из нескольких значений:<ol><li>metadata - подгрузка метаданных. К ним относится название видео, его длина</li>
43
<li>preload - Указание на предзагрузку видео до взаимодействия с ним. Может принимать одно из нескольких значений:<ol><li>metadata - подгрузка метаданных. К ним относится название видео, его длина</li>
44
<li>auto - подгружать видео с самого начала. Если видео является обязательным элементом для просмотра (например, после окончания статьи), то вы можете включить подзагрузку. Пока пользователь прочитает статью, видео для него уже будет загружено. Будьте аккуратны, думайте о пользователях с мобильным интернетом</li>
44
<li>auto - подгружать видео с самого начала. Если видео является обязательным элементом для просмотра (например, после окончания статьи), то вы можете включить подзагрузку. Пока пользователь прочитает статью, видео для него уже будет загружено. Будьте аккуратны, думайте о пользователях с мобильным интернетом</li>
45
<li>none - не загружать видео до момента взаимодействия с пользователем</li>
45
<li>none - не загружать видео до момента взаимодействия с пользователем</li>
46
</ol></li>
46
</ol></li>
47
<li>poster - Ссылка на изображение, которое будет использовано в виде превью видео</li>
47
<li>poster - Ссылка на изображение, которое будет использовано в виде превью видео</li>
48
</ul><p>Добавим некоторые атрибуты к видео и посмотрим, как они сработают:</p>
48
</ul><p>Добавим некоторые атрибуты к видео и посмотрим, как они сработают:</p>
49
<p><a>Codepen</a></p>
49
<p><a>Codepen</a></p>
50
<h3>Аудиофайлы</h3>
50
<h3>Аудиофайлы</h3>
51
<p>Процесс вставки аудиофайлов почти не отличается от вставки видеофайла. Используя тег <audio> можно задать как один файл, так и несколько, с помощью вложенных тегов <source>.</p>
51
<p>Процесс вставки аудиофайлов почти не отличается от вставки видеофайла. Используя тег <audio> можно задать как один файл, так и несколько, с помощью вложенных тегов <source>.</p>
52
52