Мультимедиа и встраивание
Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио, а также других страниц целиком.
Перед стартом
Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во Введении в HTML. Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!
Примечание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в JSBin или Thimble.
Руководство
Этот модуль содержит следующие статьи, которые проведут вас через все основы внедрения мультимедиа на веб-страницах.
В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы (en-US), и (en-US). используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.
Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат SVG в веб-страницы.
В этой статье мы познакомимся с концепцией адаптивных изображений — изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения — это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.
Аттестация
Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.
В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!
Смотрите также
Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на неё.) Эта технология иногда может быть полезной.
Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле Мультимедиа и встраивание. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.
Found a content problem with this page?
This page was last modified on 12 мар. 2023 г. by MDN contributors.
HTML 5 Элементы мультимедиа
В HTML 5 имеются два элемента для работы с мультимедиа:
Первый элемент, как следует из названия, служит для добавления аудио-файлов. Простейший пример использования элемента audio в HTML 5 приведён ниже:
Как можно видеть, у тега имеются три атрибута:
1) Атрибут src — указывает путь к файлу для проигрывания.
2) Атрибут autoplay — сообщает браузеру о том, что файл необходимо воспроизвести сразу после загрузки страницы.
3) Атрибут loop — указывает, сколько раз необходимо проиграть файл (разумеется, если пользователь не закроет страницу).
Обратите внимание, что внутри тега имеется текст, который служит для информации о мелодии, что является полезным, например, для людей с ограниченными возможностями.
Элемент video используется для добавления на страницу видео-файлов.
Здесь также всё прозрачно и, думаю, не стоит пояснять, зачем нужен атрибут src.
Напоследок, скажу немного о допустимых форматах. На данный момент понятно, что любой браузер будет поддерживать формат wav для музыки, а такие форматы как mp3 или wma будут поддерживать далеко не все.
Что касается видео-формата, то здесь ещё всё более непонятно, впрочем, это не столь важно. Для нас главное, что теперь будет очень простой способ добавления элементов мультимедиа, которые при этом будут с лёгкостью индексироваться поисковыми роботами.
Таким образом, у нас появились новые возможности и, конкретно, в HTML, и в создании сайта в целом.
Создано 21.05.2010 11:33:43
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 14 ):
А чтобы писать в txt HTML 5 скрипты нужны? Если да, можете привести показ, как пишется этот скрипт?
HTML5 пишется абсолютно так же как и HTML4. Никаких скриптов не нужно. Однако, HTML5 полностью ещё не поддерживается ни одним из браузеров, поэтому создавать сайт на нём ещё рано.
Еще один вопрос. А создавать сайт можно только одним из них? Или можно и двумя?
Вы можете использовать HTML4+HTML5, но DOCTYPE должен быть указан HTML5.
Спасибо теперь уж разобрался =).
А вместо music.wav название видео писать? И как писать? «music» и видео? Или вообще без «music»? Можете помочь?
Это вставка аудио. Значение src — путь к аудио-файлу. Это вставка видео. Значение src — путь к видео-файлу.
Ничего себе, технология программирования как шагнула далеко вперед, скоро наверное за нас компьютер программировать будет. А как насчет плеера в HTML 5? Или он тоже будет встроен?