Мультимедиа и встраивание

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио и также других страниц целиком.

Перед стартом

Перед изучением этого модуля, вам необходимо иметь изучить азы HTML, изложенные во Введении HTML. Если вы не прошли этот модуль (или что-нибудь подобное), сначала пройдите его, затем возвращайтесь!

Внимание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из) в онлайн сервисах, например в JSBin или Thimble.

Руководство

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

Изображения в HTML

Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента <img>, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать ее используя <figure> и как он взаимодействует с фоновым изображением CSS.

Видео и аудио контент
Далее мы увидим, как использовать HTML5-элементы <video> и <audio> для встраивания видео и аудио в наши страницы, включая основы, обеспечение доступа к файлам разного формата для различных браузеров, добавление надписей и субтитров, и как добавлять откаты для старых браузеров.
От <object> до <iframe> — другие технологии встраивания
В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы <iframe>, <embed> и<object>. <iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все еще часто встречаемая.
Добавление векторной графики в Веб
Векторная графика может быть очень полезной в определенных ситуациях. В отличие от обычных форматов типа PNG/JPG, они не деформируются/пикселизируются при растяжении – они могут остаться гладкими при растягивании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат SVG в веб-страницы.
Отзывчивые изображения

С таким большим количеством типов устройств, способных просматривать Веб: от мобильных телефонов до персональных компьютеров, главная концепция создания современного веб-мира — это гибкий дизайн. Это приводит к созданию веб-страниц, которые могут автоматически изменять свои свойства, чтобы помещаться в различные размеры экранов, соответствовать разрешению и т.д. Об этом более подробно поговорим позже в модуле CSS, но сейчас мы ознакомимся с инструментами, доступными в HTML, позволяющими создавать отзывчивые изображения, включая элемент <picture>.

Аттестация

Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях..

Страница приветствия Mozilla
В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвященную Mozilla!

Смотри также

Как добавить карту кликов поверх изображения
Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на нее.) Эта технология иногда может быть полезной.
Основы Веб-грамотности 2

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

Метки документа и участники

 Внесли вклад в эту страницу: alexfromvl, Khulagen
 Обновлялась последний раз: alexfromvl,