HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя элемента.
Все HTML-элементы делятся на пять типов:
пустые элементы — , , , , ,
, , , , , , , , , ;
элементы с неформатированным текстом — , ;
элементы, выводящие неформатированный текст — , ;
элементы из другого пространства имён — MathML и SVG;
обычные элементы — все остальные элементы.
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие элементы исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.
Полный список HTML-элементов
Таблица 1. HTML-элементы
Элемент
Описание
Используется для добавления комментариев.
Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
Создаёт гипертекстовые ссылки.
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .
Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь элемента .
Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
Загружает звуковой контент на веб-страницу.
Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.
Выделяет текст как цитату, применяется для описания больших цитат.
Представляет тело документа (содержимое, не относящееся к метаданным документа).
Перенос текста на новую строку.
Создает интерактивную кнопку. Элемент может содержать текст или изображение.
Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
Добавляет подпись к таблице. Вставляется сразу после открывающего тега
.
Используется для указания источника цитирования. Отображается курсивом.
Представляет фрагмент программного кода, отображается шрифтом семейства monospace .
Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым элемента.
Элемент-контейнер для выпадающего списка элемента . Варианты значений помещаются в элементы .
Используется для описания термина из элемента .
Помечает текст как удаленный, перечёркивая его.
Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в элемент .
Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
Элемент-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
Элемент-контейнер, внутри которого находятся термин и его описание.
Используется для задания термина.
Выделяет важные фрагменты текста, отображая их курсивом.
Элемент-контейнер для встраивания внешнего интерактивного контента или плагина.
Группирует связанные элементы в форме, рисуя рамку вокруг них.
Заголовок/подпись для элемента .
Самодостаточный элемент-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
Определяет завершающую область (нижний колонтитул) документа или раздела.
Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .
Создают заголовки шести уровней для связанных с ними разделов.
Элемент-контейнер для метаданных HTML-документа, таких как , , , , .
Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
Горизонтальная линия для тематического разделения параграфов.
Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
Встраивает изображения в HTML-документ с помощью атрибута src , значением которого является адрес встраиваемого изображения.
Создает многофункциональные поля формы, в которые пользователь может вводить данные.
Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
Таблица-шпаргалка с элементами
Для удобства пользования я сгруппировала HTML-элементы по тематическим разделам, добавив значения свойства display . Чтобы перейти к таблице, кликните по рисунку.
HTML — Урок 14. Встраивание произвольных объектов (object)
Раньше в HTML имелась только одна возможность добавлять мультимедийную информацию на web-страницы — элемент IMG. Он позволял добавлять только изображения, а остальные форматы были закрыты для web. Тогда разработчики браузеров стали добавлять поддержку новых элементов. Так появились теги от фирмы Netscape и от фирмы Sun.
Но появление этих элементов не решило всех проблем и тогда в спецификацию HTML был добавлен новый элемент , позволяющий работать с любыми форматами. При этом на компьютере пользователя должно быть установлено приложение или дополнительный модуль к браузеру (плагин), позволяющий просматривать объект соответствующего формата.
Теперь вы можете управлять звуком, правда для этого вам придется загрузить дополнительный плагин.
Применение атрибутов тега OBJECT и EMBED в Adobe Flash Professional
В этом документе перечислены атрибуты тегов OBJECT и EMBED, используемые для публикации содержимого SWF (с поддержкой возможностей Flash) на HTML-страницах для просмотра в веб-браузерах. Атрибуты позволяют задавать определенные параметры, которые определяют, как и где во Flash Player отображается файл SWF в браузере.
Информация о добавлении содержимого Flash (SWF-файла) на веб-страницы также доступна в технической заметке Синтаксис тега OBJECT | Flash (tn_4150).
Требуемые атрибуты
Следующие атрибуты внутри тегов OBJECT и EMBED требуются при добавлении файла SWF на HTML-страницу. При использовании команды «Опубликовать» в проигрывателе Flash Professional создаются файлы HTML с указанными требуемыми атрибутами.
Примечание. Значения в скобках и курсивом указывают на то, что значение выбирается разработчиком.
Требуется и для OBJECT, и для EMBED:
width — определяет ширину содержимого SWF в пикселях или в виде процентного значения для окна браузера.
height — определяет высоту содержимого SWF в пикселях или в виде процентного значения для окна браузера.
Требуется только для тега OBJECT:
classid — определяет элемент управления ActiveX для браузера. Пример правильного значения кода приведен в разделе Синтаксис тега OBJECT | Flash (tn_4150).
codebase — указывает местоположение элемента управления ActiveX проигрывателя Flash Player, благодаря чему браузер может автоматически загрузить его, если этот элемент управления не установлен на компьютере. Пример правильного значения кода приведен в разделе Синтаксис тега OBJECT | Flash (tn_4150).
movie (param) — определяет исходное местоположение (URL) загружаемого файла SWF.
Требуется только для тега EMBED
src — определяет исходное местоположение (URL) загружаемого файла SWF.
pluginspage — указывает на местоположение внешнего модуля Flash Player, что позволяет пользователю автоматически загрузить его, если модуль не установлен.
Дополнительные атрибуты
При определении тегов OBJECT и EMBED следующие атрибуты являются необязательными. Для тега OBJECT все атрибуты определяются тегами param , если не указано иное:
id (атрибут для тега OBJECT) и name (атрибут для тега EMBED) — идентификатор файла SWF. Определяет файл SWF для веб-браузера, благодаря чему в браузере создается сценарий языка (например, JavaScript) для ссылки на содержимое SWF. Чтобы обеспечить совместимость с несколькими браузерами, убедитесь в том, что для параметров id и name установлено одно и то же значение.
play — возможные значения: true, false. Указывает на то, будет ли SWF-файл, находящийся на панели «Временная шкала», воспроизводиться немедленно при загрузке содержимого в браузере. Если этот атрибут не указан, то значение по умолчанию — true.
loop — возможные значения: true, false. Указывает на то, будет ли SWF-файл, находящийся на панели «Временная шкала», воспроизводиться непрерывно или воспроизведение остановится по достижении последнего кадра. Если этот атрибут не указан, то значение по умолчанию — true.
menu — возможные значения: true, false. Определяет, доступны ли элементы управления воспроизведением в контекстном меню Flash Player.
true — отображается полное меню с элементами расширенного управления воспроизведением (например, «Масштаб», «Качество», «Воспроизведение», «Цикл», «Перемотка», «Вперед», «Назад»).
false — отображается меню, в котором элементы управления воспроизведением (например, «Масштаб», «Качество», «Воспроизведение», «Цикл», «Перемотка», «Вперед», «Назад») скрыты. Данный атрибут можно использовать для SWF-содержимого, не зависящего от панели «Временная шкала», например содержимого, полностью контролируемого языком ActionScript. В коротком меню отображаются элементы «Настройки» и «О программе Flash Player».
low — поддерживает скорость воспроизведения за счет внешнего вида и не использует сглаживание.
autolow — поддерживает скорость, но по возможности улучшает внешний вид. Воспроизведение начинается с отключенным сглаживанием. Если Flash Player обнаружил, что процессор способен выполнять сглаживание, то оно будет включено автоматически.
autohigh — поддерживает в равной степени скорость и внешний вид, но при необходимости предпочтение отдается скорости воспроизведения. Воспроизведение начинается с включенным сглаживанием. Если действительная частота кадров падает ниже заданной, сглаживание отключается, чтобы повысить скорость воспроизведения. Используйте этот параметр, чтобы сымитировать настройку «Просмотр» > «Сглаживание» во Flash Professional.
medium — применяет некоторое сглаживание, но смягчает растровые изображения. Этот параметр дает качество выше, чем в режиме «Низкое», но ниже, чем в режиме «Высокое».
high — поддерживает внешний вид за счет скорости воспроизведения и всегда использует сглаживание. Если фильм не содержит анимации, то растровые изображения смягчаются. В противном случае растровые изображения не смягчаются.
best — обеспечивает самое высокое качество отображения, даже за счет скорости. Сглаживается весь вывод, и все растровые изображения смягчаются.
default — («Показать все») отображает все содержимое SWF-файла в заданной области без искажений, сохраняя исходное соотношение сторон фильма. С двух сторон от фильма могут появиться поля.
noborder масштабирует SWF-файл, чтобы заполнить заданную область, сохраняя исходное соотношение сторон фильма. Flash Player позволяет обрезать содержимое, не применяя искажения.
exactfit — отображает все содержимое SWF-файла в заданной области без искажений, не сохраняя исходного соотношения сторон. Может возникнуть искажение изображения.
noscale предотвращает масштабирование SWF-файла, чтобы вписать область тега OBJECT или EMBED. Может быть выполнена обрезка.
По умолчанию центрирует содержимое в окне браузера и обрезает края, если оно меньше окна с фильмом.
l (left — по левому краю), r (right — по правому краю) и t (top — по верхнему краю): выравнивает фильм по соответствующему краю окна браузера и при необходимости обрезает оставшиеся три стороны.
l , r и t : выравнивает фильм по левому, правому или верхнему краю окна браузера и по необходимости обрезает оставшиеся три стороны.
tl и tr : выравнивает фильм по верхнему левому и верхнему правому углам окна браузера, обрезает низ и, по необходимости, оставшиеся стороны.
window — содержимое SWF воспроизводится на веб-странице в пределах собственного прямоугольника (окна). Браузер определяет слои содержимого SWF по отношению к другим элементам HTML. С таким значением невозможно ясно указать, где находится содержимое SWF на странице — над или под другими элементами HTML.
direct — это значение используется для рендеринга пути. Этот атрибут позволяет обойти композицию в буфере экрана и вывести содержимое SWF напрямую на экран. Значение wmode рекомендуется использовать, чтобы оптимизировать воспроизведение содержимого. Оно обеспечивает отображение SWF-содержимого с аппаратным ускорением, для которого используется Stage Video или Stage 3D.
opaque — SWF-содержимое выстраивается по слоям вместе с другими элементами HTML на странице. Файл SWF непрозрачный, он скрывает все многослойное содержимое, находящееся под ним на странице. Этот параметр уменьшает производительность воспроизведения по сравнению с параметрами wmode=window или wmode=direct .
transparent — SWF-содержимое выстраивается по слоям вместе с другими элементами HTML на странице. Цвет фона SWF-файла (цвет рабочей области) становится прозрачным. Элементы HTML, расположенные под SWF-файлом, видно через любые прозрачные области файла SWF с наложением альфа-канала. Этот параметр уменьшает производительность воспроизведения по сравнению с параметрами wmode=window или wmode=direct .
gpu — можно использовать дополнительное аппаратное ускорение на некоторых мобильных устройствах и телевизорах, подключенных к Интернету. В отличие от других значений wmode не гарантируется четкое отображение пикселов в отображаемом списке графики. В противном случае это значение аналогично wmode=direct .
bgcolor — [шестнадцатеричное значение RGB] в формате #RRGGBB. Определяет цвет фона для содержимого SWF-файла. Этот атрибут используется, чтобы переопределить параметр цвета фона (цвета рабочей области), определенный в файле SWF. (Не влияет на цвет фона HTML-страницы.)
base — [базовый каталог] или [URL]. Задает базовый каталог или URL-адрес для разрешения относительных путей в SWF-файле. Этот атрибут может оказаться полезным в тех случаях, когда SWF-файл хранится в другом каталоге, отдельно от остальных файлов.
allowFullScreen — возможные значения: true и false. Выбрав значение true для этого параметра, можно просматривать SWF-файл в режиме полного экрана посредством ActionScript. Дополнительная информация об этом приведена в разделе Знакомство с режимом полного экрана в проигрывателе Flash Player. Если этот атрибут не указан, то значение по умолчанию — false .
fullScreenAspectRatio — возможные значения: portrait и landscape. Используется для управления полноэкранным отображением SWF-содержимого на мобильных устройствах, поддерживающих автоматический поворот экрана, таких как телефоны и планшеты. Если этот атрибут определен, при просмотре SWF-файла в полноэкранном режиме в проигрывателе Flash Player используется указанная ориентация экрана (книжная или альбомная). Ориентация устройства не имеет значения. Если этот атрибут не определен, то ориентация содержимого полностью соответствует ориентации экрана в браузере.
flashvars — переменные, определенные в виде строки пар key=value, которые передаются в файл SWF.
С помощью flashvars можно определить в SWF-файле переменные корневого уровня. Формат строки представляет собой набор комбинаций key=value, которые разделены символом «&».
Браузеры поддерживают строки длиной до 64 кб (65 535 байт).
Дополнительная информация об использовании flashvars приведена в разделе Использование FlashVars для передачи переменных в файл SWF (tn_16417).
scale : включение коэффициента масштабирования в браузере
noscale : отключение коэффициента масштабирования в браузере
Использование значений «Режим окна» (wmode)
Разработчики могут установить свойство wmode («Режим окна») для содержимого SWF, чтобы контролировать слои и прозрачность содержимого в браузере. Вне зависимости от значения атрибута wmode во Flash Player отображается содержимое, просматриваемое в полноэкранном режиме при использовании прямого рендеринга пути. С помощью прямого рендеринга пути можно задействовать возможности представления с аппаратным ускорением, например Stage Video и Stage3D.
Чтобы обеспечить самое высокое качество воспроизведения содержимого Flash в браузере, используйте атрибут wmode=direct . С помощью этого атрибута можно задействовать возможности представления с аппаратным ускорением, в том числе Stage Video и Stage3D. Избегайте перекрывания областей SWF с элементами HTML (например, всплывающими меню на основе HTML), которые должны отображаться над SWF-файлом. Точный контроль слоев поддерживается только в некоторых современных браузерах (см. таблицу ниже). В других браузерах содержимое SWF всегда отображается над другими элементами HTML.
Если требуется более точное управление расположением слоев, прозрачностью или элементами HTML, отображаемыми над содержимым SWF, используйте атрибут wmode=opaque или wmode=transparent . Затем с помощью HTML можно управлять расположением слоев по отношению к другим элементам на странице. Однако при использовании этих режимов «без окон» уменьшается качество воспроизведения по сравнению с использованием атрибутов wmode=window (по умолчанию) и wmode=direct .
Случай использования
Способы вставки Flash в HTML и XHTML
Это должно быть простой вопрос, но вероятно вызывает множество споров, так как каждый из доступных способов встраивания объектов имеет свои преимущества и недостатки. В этой статье мы исследуем трудности и тонкости встраивания Flash-содержимого и рассмотрим наиболее популярные способы вставки объектов.
Основные компоненты метода встраивания Flash-объектов
Прежде чем перейти к практике, давайте сначала охарактеризуем идеальный метод. По моему мнению, следующие критерии имеют первостепенное значение.
Соответствие стандартам
Web-стандарты предлагают универсальный язык для создателей браузеров, проектировщиков оборудования и веб-дизайнеров для того, чтобы они могли избежать проблем совместимости, зависимости от производителей, а также нарушения патентных прав. Кроме того веб-стандарты позволяют создавать правильную HTML-разметку, которая к тому же часто является требованием в веб-проектах.
Межбраузерная поддержка
Поддержка всеми основными браузерами и популярными операционными системами — это необходимое условие. Проверить разметку можно с помощью инструментария Flash embed test suite, который позволяет оценить, поддерживают ли браузеры тот или иной метод разметки, с помощью которой можно вставить Flash-объекты. Этот набор тестов может показать информацию о параметрах, в том числе различных настройках Flash, потоках и сценариях, поддерживаемых браузерами и ОС. Вы также можете изучить сводную таблицу, отображающую эти параметры.
Поддержка альтернативного содержимого
Во всех случаях, когда вы создаете содержимое, воспринимаемое поисковыми машинами или доступное людям, которые используют Веб без установки каких-либо плагинов, использование альтернативного содержимого — это наилучшее решение.
Избежание несоответствия между Flash-контентом и версией Flash-плеера
К сожалению для многих из нас, Flash-контент будет воспроизводиться вне зависимости от версии Flash-плеера, для которого он был создан. В этом нет ничего страшного до того момента, пока устаревший плагин не обнаружит функции, которые работают только в его более поздних версиях. Если так произойдет, ваши посетители увидят «нарушенное» содержимое или вовсе ничего не увидят.
Автоактивация интерактивного контента
Браузеры компании Microsoft работают так, что посетители не могут напрямую взаимодействовать с элементами управления Microsoft ActiveX, который позволяет загружать объекты и элементы embed , также называемые «интерактивным контентом».
Короче говоря, браузеры Microsoft не позволят взаимодействовать с интерактивным контентом, пока пользователь самостоятельно его не активирует. Opera также внедрила похожий механизм «click-to-activate». Этот механизм работает как «лежачий полицейский» на дороге: вы должны приостановить движение, медленно переехать через него, и только потом нажать педаль газа. Это может запутать обычного интернет-серфера и разозлить даже самого опытного.
Простота реализации
Конечно же простота имеет значение. Зачем прыгать выше головы, если можно сделать проще?
Основы встраивания Flash-объектов: embed и object
Существуют два элемента HTML, которые позволяют вставить объекты Flash на веб-страницу. В одной руке, у нас есть запатентованный элемент embed , который поддерживается большинством браузеров:
Alternative content
В другой руке у нас элемент object , который является рекомендацией W3C. Так как спецификации W3C предоставляют больше возможностей для отображения подключаемого контента, со временем появились два различных способа реализации объектов.
Большинство современных браузеров выбрали стандартом альтернативу тегу embed , используя при этом MIME-тип объекта, чтобы подключить соответствующий плагин для воспроизведения содержимого:
Этот метод не привязан к какому-либо определенному браузеру и поэтому это предпочтительная реализация.
Второй способ реализации создан специально для Internet Explorer на Windows. При этом требуется, чтобы вы определили атрибут classid у объекта, чтобы браузер смог загрузить необходимый элемент управления ActiveX Flash-плеера. Такой способ допустим, но зависим от типа браузера:
Замечание: В двух последних примерах кода специально не указан параметр codebase — он часто используется, чтобы уточнить URL инсталлятора Flash на серверах Adobe (браузер может автоматически загрузить его, если он еще не установлен). Однако это запрещено согласно спецификациям, которые ограничивают его доступ только в пределах домена текущего документа, и поэтому этот параметр не поддерживается всеми современными браузерами.
Почему embed все еще используется
С появлением веб-стандартов можно было бы совершенно обоснованно удалить элемент embed . Он просто никогда не был рекомендацией W3C и никогда не будет, потому что он уже запатентован. Однако в действительности этот способ лучше поддерживается браузерами, чем отдельная реализация элемента object . В результате такой способ реализации выбран на большинстве веб-сайтов, таких как Google Video и Brightcove.
Хотя веб-стандарты созданы, чтобы избежать проблем совместимости, элемент embed более ясен и недвусмыслен, чем элемент object , одобренный W3C. Жесткие правила реализации элемента embed и хорошая поддержка превратила его в фактический стандарт, который будет использоваться до тех пор, пока не будет универсальной поддержки элемента object , достаточной для того, чтобы игнорировать версии браузеров, которые его не поддерживают.
Где нарушена поддержка веб-стандартов
Двойственная реализация элемента object формально не нарушает веб-стандарты, но создает множество проблем. Следовательно, нам нужно найти способ объединить два метода реализации объектов в один. Еще хуже то, что мы также должны разобраться с браузерами, которые имеют (или раньше имели) неправильную реализацию объектов. Давайте рассмотрим эти проблемы:
Общая реализация объектов не работает в Internet Explorer на Windows. IE загружает плагин и SWF-файл, но не показывает его содержимое.
Когда мы частично объединяем два способа реализации добавлением параметра movie к общей реализации, Internet Explorer отображает Flash-контент, но не проигрывает его.
Если мы полностью соединим две реализации, все заработает в Internet Explorer, но браузеры на базе Gecko проигнорируют Flash-контент и покажут альтернативное содержимое.
Одной из особенностей элемента object является то, что вы можете вставлять этот тег друг в друга:
К сожалению, из-за ошибки в старых версиях Internet Explorer встроенные друг в друга элементы object рассматриваются так, как будто они следуют один за другим, поэтому отображаются оба элемента.
Еще хуже то, что браузеры Safari, начиная с версии 1.2.2 для Mac OS 10.3, игнорируют элемент param , встроенный в object , хотя поддерживают такие же атрибуты для элемента embed .
Замечание: Вы также можете спросить, насколько разумно определять контент, атрибуты и параметры дважды, как в вышеизложенном способе. Этот комбинированный метод также делает более проблематичным использование JavaScript для взаимодействия с Flash-контентом. В таком случае вы должны проверять, с каким объектом вы взаимодействуете.
Некоторые из ошибок уже исправлены, но необщепринятая и ошибочная в Internet Explorer реализация object все еще сдерживает абсолютное принятие этого элемента. Мы можем только надеяться, что это будет исправлено в ближайшем будущем.
Почему object лучше, чем embed
Несмотря на отсутствие поддержки всеми браузерами элемент object все же более предпочтителен, чем элемент embed , потому что кроме соответствия стандартам, он также обладает превосходной поддержкой альтернативного содержимого.
Элемент object позволяет встраивать альтернативное содержимое, и это содержимое отображается, если реализация не поддерживается или не установлен плагин. Также альтернативное содержимое доступно поисковым машинам, а это неоспоримый плюс при оптимизации под поисковые запросы.
Элемент embed поддерживает альтернативное содержимое посредством элемента noembed , но такая реализация работает только в тех браузерах, которые не поддерживают сам элемент embed , например Internet Explorer на платформах Windows Mobile. В отличие от элемента object , embed не поддерживает альтернативное содержимое, когда поддерживается сам элемент embed , но не установлен Flash-плагин. В такой ситуации, можно довольствоваться только атрибутами pluginurl и pluginspage , с помощью которых отображается картинка, кликнув по которой можно установить плагин.
Я думаю, это лучшее решение для отображения альтернативного контента, чтобы описать необходимый плагин и дать намек на то, что пользователь может загрузить и установить плагин Flash. (Тем не менее, нет других причин, по которым мы должны злоупотреблять атрибутом codebase .)
Таким образом, элемент object обладает значительными преимуществами перед элементом embed в том случае, если вы предпочитаете создавать соответствующий стандартам код или доступное, хорошо индексируемое поисковиками содержимое.
Недостаточность методов разметки
Принимая во внимание критерии, определенные нами ранее, — соответствие стандартам, межбраузерную поддержку, поддержку альтернативного содержимого, избежание несоответствий плейер/контент, автоконтроль интерактивного содержимого и простоту реализации — легко понять, что в действительности используются лишь те способы реализации, которые могут быть осуществлены только изменением разметки.
Хотя разметка предоставляет средства показа Flash-контента или альтернативного содержимого, она не способна решить проблемы несоответствия контента и плагина Flash или ошибки при активизации интерактивного контента, и это не всегда самый простой способ решить и ту, и другую проблему.
Однако, давайте сделаем краткий обзор наиболее популярных «комбинированных» методов встранивания Flash, осуществляемых с помощью (X)HTML-разметки.
Двусоставный метод
В Flash IDE, вы можете создавать HTML-страницы с помощью так называемого двусоставного метода, объединяющего реализацию объектов с помощью элемента object и embed , встроенного внутри него как альтернативный контент:
Как видите, этот метод основан исключительно на запатентованной разметке. Он несомненно фокусируется на межбраузерной поддержке, но не соответствует стандартам.
Двусоставный метод использует избыточный код, делает ваши веб-страницы логически непоследовательными и не позволяет вставить альтернативное содержимое. А единственная преимущество — это простота в использовании, так как его генерирует Flash IDE: так что не пытайтесь просить воспроизвести этот метод по памяти.
Метод вложенных объектов
Вложение двух реализаций объектов — хорошая альтернатива двусоставному методу, потому что этот метод соответствует стандартам и поддерживает альтернативный контент:
Alternative content
К сожалению, в этом методе отсутствует межбраузерная поддержка вследствие ошибки вложения элементов object в IE и отсутствия поддержки вложенных элементов param в Safari. Но можно использовать прием с условными комментариями IE, чтобы избежать ошибок браузера:
Alternative content
При использовании приведенного выше «раздутого» кода, этот метод становится даже более сложным для создателя, чем двусоставный. Он использует безобразные уловки, которые могут усложнить процесс создания кода при использовании серверных языков.
Flash Satay
Другая альтернатива — это метод Flash Satay, который основан на общем способе реализации объектов и включает дополнительный параметр movie . Этот параметр необходим, чтобы избежать ошибок отображения контента в IE. Он также включает movie-контейнер Flash (c.swf с переменной path), чтобы исправить ошибку с потоковым воспроизведением в IE:
Alternative content
Хотя он приближает нас к «идеальному», универсальному способу реализации объектов, Flash Satay содержит приемы, применение которых не подойдет каждому? и при использовании этого метода встроенные элементы param не поддерживаются старыми версиями Safari.
Аргументы в пользу DOM
Когда вы думаете о недостаточности методов разметки, вы можете поинтересоваться, почему нельзя использовать скрипты DOM. С помощью них, мы можем динамически управлять разметкой, как того требует каждый браузер, используя:
специальную реализацию для IE;
запатентованный элемент embed для старых версий Safari;
общую реализацию для всех остальных браузеров.
Скрипт DOM к тому же гибкий инструмент, достаточный для решения остальных проблем: прежде всего, мы можем использовать его для решения проблемы несовместимости Flash-плейера и Flash-контента, определяя версию плагина и проверяя то, что нужно показывать — Flash-контент или альтернативное содержимое. Когда необходимая версия плагина недоступна, мы можем инициировать экспресс-установку Adobe, — механизм встроенный в Flash-плейер. Тем самым мы упрощаем загрузку нужной версии.
Решение с применением DOM также позволяет нам избежать механизма «click-to-activate» с помощью динамического создания элементов object .
Будьте осторожны, используя JavaScript
Так как не каждый является опытным специалистом по JavaScript — да и даже тот, кто им является, не должен заново изобретать велосипед — неплохо использовать уже существующие библиотеки JavaScript для встраивания Flash. Давайте рассмотрим критерии выбора надежной библиотеки.
Разметка по стандартам редко поддерживается создателями библиотек, так как эти библиотеки определяют Flash-контент либо в JavaScript, либо другими средствами разработки. Большинство библиотек создают неправильный HTML и, так как разметка написана динамически, W3C-валидатор не способен её проверить.
С другой стороны нужно рассмотреть, как работает такой метод, если JavaScript не доступен, не поддерживается или поддерживается только отчасти. Что делать, если используя JavaScript, вы ограничиваете доступность контента для пользователей?
Приняв во внимание вышесказанное, давайте посмотрим, как работают некоторые популярные библиотеки.
Комплект по определению плейера Adobe Flash
Кроме создания разметки в Flash IDE, Adobe также предоставляет комплект по определению плейера Flash. Существует три способа использовать этот комплект:
Проверив установлен или нет флажок Detect Flash Version (в меню File > Publish Settings > HTML) в Flash 8 IDE.
Вставив его вручную, загрузив дистрибутив этой библиотеки.
Работать в Flex Builder 2, где он включен по умолчанию.
Хотя пакет дает нам все желаемые возможности, такие как определение версии, экспресс-установка и автоактивация интерактивного контента, он нуждается в усовершенствовании. Когда мы полностью перейдем к стандартам, его ждет безнадежный провал: пока что он основан на двусоставной разметке, так как имеет либо реализацию объектов от Microsoft, либо поддержку запатентованного элемента embed , не соответствующего стандартам.
Он также поддерживает альтернативный контент, хотя странным и противоречивым образом. Вы должны определить альтернативный контент дважды: в JavaScript и в элементе noscript .
В конечном счете, комплект по определению плейера нуждается в лучшей реализации.
UFO и SWF Object
Популярные альтернативы с открытым исходным кодом, как UFO Боба ван дер Слуиса и SWF Object Джеффа Стирнса наверное самые полные и простые в использовании библиотеки, доступные в настоящее время.
Хотя на первый взгляд они кажутся похожими, они полностью отличаются внутренним содержанием. Например, SWF Object использует двусоставный метод Adobe, в то время как UFO генерирует главным образом соответствующую стандартам разметку. С другой стороны они используют общие архитектурные принципы: обе библиотеки построены на идее создания разметки, поддерживающей альтернативное содержимое (таким образом доступное и оптимизированное под поисковики), которое замещается DOM-скриптом, когда доступна необходимая поддержка Flash и JavaScript.
Несмотря на их явную поддержку альтернативного содержимого, обе библиотеки имеют один существенный недостаток: они зависят от JavaScript при вставке Flash-контента. В результате небольшая группа посетителей, установившая Flash плагин, но с отключенным JavaScript или с отсутствием достаточной поддержки JavaScript, будут видеть только альтернативное содержимое.
Аргументы в пользу «умеренного» программирования DOM
Чтобы решить все проблемы, вполне логично использовать следующий метод вставки: смешанную разметку, совместимую со стандартами, как та, которая используется методом Flash Satay, чтобы включить и Flash-контент, и альтернативное содержимое, наряду с применением небольшого DOM-скрипта, который необходим для устранения проблем в некоторых браузерах.
ObjectSwap основан на этих принципах и на мой взгляд является образцом для будущих библиотек встраивания Flash-объектов. К сожалению, ObjectSwap концентрируется в основном на автоактивации интерактивного контента, поэтому он не пригоден для определения версии и не решает проблем с разметкой, таких как поддержка потокового воспроизведения в IE или поддержка параметров в старых версиях Safari.
С другой стороны он может быть усовершенствован. При использовании события onload , поведение, основанное на DOM, реализуется только после загрузки всей страницы. Лучшим выбором могло бы быть событие DOMContentLoaded , которое позволяет вам применить свое собственное поведение, как только DOM станет доступен на странице. Так как событие DOMContentLoaded еще не полностью поддерживается браузерами, взамен этого вы можете использовать это решение.
Будущее встраивания Flash
Хотя совершенное решение пока еще не найдено, мы уже довольно далеко продвинулись в правильном направлении. Когда мы соединяем лучшие возможности различных библиотек, нам следует учитывать все критерии, определенные в начале этой статьи.
Статья основана на оригинальной статье online-журнала A List Arart «Flash Embedding Cage Match».