Мультимедийные объекты

Опубликовал: admin Saturday, June 30, 2024 в категории PHP | Пока нет комментариев

Мультимедийные теги призваны решить вопрос включения в состав HTML-документа аудиовизуальных композиций: изображе- ний, аудиофайлов, видеоклипов и их производных, управляющих элементов.

Тег <img> позволяет вставить изображение одного из стандарт- ных Интернет-форматов (jpg, gif и png, все указанные форматы – растровые) в HTML-документ. Тег <img> непарный:

Вид: <img> (блочный элемент)

Индивидуальные атрибуты: src, alt, width, height

Стандартное отображение: изображение

Атрибут src определяет путь, по которому располагается изо-

бражение.

Атрибут alt позволяет задать подпись к изображению. Данная подпись отображается в том случае, если пользователь отключил отображение графики в обозревателе. Также подпись используется поисковыми системами для учета изображения в своей базе и вос- произведения при организации поиска изображений.

Атрибуты width и height, задающие размеры образа на экране по горизонтали и вертикали соответственно, позволяют обозрева- телю Интернет зарезервировать пространство для образа при за- грузке документа и тем самым несколько ускорить отображение последнего. Также эти параметры позволяют провести масштаби- рование изображения, но этим лучше не пользоваться, так как в случае уменьшения реальных размеров изображения пользователь загружать больший объем данных, чем ему нужен, а в случае уве- личения само изображение начинает выглядеть неприглядно.

Тег <object> позволяет вставить в HTML-документ любой объ- ект, в том числе и изображения. Для отображения большинства объектов требуется установка дополнительных расширений для обозревателя Интернет:

Вид: <object>…</object> (блочный элемент) Индивидуальные атрибуты: type, data, width, height, classid Стандартное отображение: в соответствии с заложенными в объ- ект свойствами

Атрибут type определяет тип данных объекта. Например, для объектов Adobe Flash это application/x-shockwave-flash

Атрибут data определяет путь, по которому располагается объ-

ект.

Атрибуты width и height задают размеры образа на экране по горизонтали и вертикали соответственно.

Атрибут classid точно задает, какое расширение обозревателя Интернет будет воспроизводить объект. Например, для объектов Adobe Flash это «clsid:D27CDB6E-AE6D-11cf-96B8-444553540000» Непарный тег <param> применяется только в составе тега

<object>. Указанный тег позволяет передавать объекту при его инициализации входные данные, которые могут быть командами, числовыми значениями и т.п., позволяющими влиять на визуализа- цию объекта. Поступающие данные объект обрабатывает самостоя- тельно без помощи обозревателя Интернет.

Вид: <param>

Индивидуальные атрибуты: name, value

Стандартное отображение: нет

Атрибут name задает название параметра, а атрибут value зна-

чение параметра.

Рассмотрим пример вставки Flash-объекта в HTML-документ:

</object>

В новом стандарте HTML5 ожидается поддержка тегов <video>

и <audio>, названия которых говорят сами за себя.

2.5. Списки

HTML поддерживает три способа хранения и отображения спи- сков. Любой список состоит из одного или нескольких элементов списков. Списки подразделяются на:

• маркированные (неупорядоченные) списки;

• нумерованные (упорядоченные) списки;

• списки определений.

Приведенный выше список называется маркированным и вы-

глядит на языке HTML так:

<ul>

</ul>

<li>маркированные (неупорядоченные) списки;</li>

<li>нумерованные (упорядоченные) списки;</li>

<li>списки определений.</li>

Нумерованный список выглядит аналогично, но его элементы нумеруются:

1. Первый элемент списка.

2. Второй элемент списка.

На языке HTML это выглядит так:

<ol>

</ol>

<li>Первый элемент списка.</li>

<li>Второй элемент списка.</li>

Тег <ol> имеет атрибут start, который позволяет определить, с какого числа производится нумерация:

Наконец, списки определений состоят из пар тер- мин/определение, хотя их применение гораздо шире. Пример ис- пользования списка определений для составления театрального ре- пертуара:

1 июля

А. К. Толстой. Царь Федор Иоаннович

9 июля

А. Островский. Волки и овцы

На языке HTML это записывается так:

<dl>

<dd>А. К. Толстой. <em>Царь Федор

Иоаннович</em></dd>

<dd>А. Островский. <em>Волки и овцы</em></dd>

</dl>

Списки могут вкладываться друг в друга, причем допускается вложение списков одного типа в списки другого типа. Рассмотрим пример, когда одно из определений имеет поясняющие материалы:

Определение структуры, содержания и методики преподавания объектно-ориентированного программирования базируется, прежде всего, на следующих аспектах:

1. Социальная потребность в наличии учебного курса, предназначенного для реализации предпрофильного обучения школьников.

2. Процесс обучения, построенный на формировании компетенции:

o информационной,

o коммуникативной.

На языке HTML приведенный фрагмент записывается так:

<dl>

<dt>Определение структуры, содержания и методики пре-

подавания объектно-ориентированного программирования базиру-

ется, прежде всего, на следующих аспектах:</dt>

<dd>

<ol><li>Социальная потребность в наличии учебного курса,

предназначенного для реализации предпрофильного обучения школьников.</li>

<li>Процесс обучения, построенный на формировании компетенции: <ul>

</dl>

</ul>

</li></ol>

</dd>

<li>информационной,</li>

<li>коммуникативной.</li>

2.8. Таблицы

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

Любая таблица может иметь заголовок (элемент caption), со- держащий ее краткое описание. Далее следует содержимое табли- цы, которое может состоять из трех секций: необязательного эле- мента thead, необязательного элемента tfoot и одного или несколь- ких элементов tbody. Элементы thead и tfoot задают соответствен- но строки надзаголовка и подзаголовка таблицы, а элемент(ы) tbody – группы строк «тела» таблицы. Каждая группа состоит из строк, задаваемых элементами tr. В свою очередь каждый элемент tr – из элементов th или td, которые определяют содержимое ячеек заголовка и ячеек данных соответственно.

Парный тег <table> определяет начало и конец таблицы.

Вид: <table>…</table> (блочный элемент)

Индивидуальные атрибуты: cellspacing, cellpadding

Стандартное отображение: таблица без рамки, но с расстояниями между ячейками

Атрибут cellspacing задает расстояние между ячейками табли- цы, а атрибут cellpadding – расстояние внутри ячеек (т. е. между содержимым ячейки и рамкой). Значения этих атрибутов всегда

применяются ко всем четырем сторонам ячейки. Чтобы не возни- кало проблем при применении каскадных таблиц стилей, оба этих атрибута устанавливают в 0.

Парный тег <caption> задает заголовок таблицы:

Вид: <caption>…</caption> (блочный элемент)

Индивидуальные атрибуты: align

Стандартное отображение: по центру и над таблицей

Атрибут align определяет способ вертикального выравнивания названия: top - помещает заголовок над таблицей (значение по умолчанию), bottom - помещает заголовок под таблицей.

Парный тег <tr> задает новую строку в таблице:

Вид: <tr>…</tr> (блочный элемент) Индивидуальные атрибуты: нет Стандартное отображение: нет

Парные теги <th> и <td> задают следующий столбец в таблице. Текст, размещенный между ними, ограничен строкой и столбцом, и в результате получается ячейка, куда и можно вводить необходи- мые данные. Тег <th> при этом еще информирует, что содержимое ячейки – это заголовок столбца или подстолбца:

Вид: <th>…</th> и <td>…</td> (блочный элемент)

Индивидуальные атрибуты: rowspan, colspan

Стандартное отображение: форматирование по левому краю, для th также добавляется выделение полужирным и форматирование от центра

Атрибуты rowspan и colspan задают соответственно количество строк и столбцов, занятых ячейкой. По умолчанию они равны 1. Специальное значение 0 указывает, что ячейка занимает все строки или столбцы до конца таблицы; однако это значение часто игнори- руется обозревателями Интернет, и им лучше не пользоваться.

Пример таблицы (вместе с заголовком) приведен на рис. 2.2.

Табл.№. Информация по специальности 061800

Шифр	Специальность	Квалификация	Срок обучения
061800	Математические методы в эко- номике	Экономист- математик	Полный цикл обуче- ния на дневном от- делении составляет 5 лет
			Для выпускников специализированных средних учебных заведений – 3 года.
Наименование специальности действительно с сентября 2000 г.

Рис. 2.2. Пример таблицы

Приведенная таблица в HTML-формате:

<caption>Табл. №. Информация по специальности

061800</caption>

<thead>

<tr>

<th>Специальность</th>

<th>Квалификация</th>

<th>Cрок обучения</th>

</tr>

</thead>

<tbody>

<tr>

<td rowspan="2">Математические методы в экономи-

ке</td>

<td rowspan="2">Экономист-математик</td>

<td>Полный цикл обучения на дневном отделении со-

ставляет 5 лет</td>

</tr>

<tr>

<td>Для выпускников специализированных средних учебных заведений – 3 года.</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="4"><em>Наименование специальности действительно с сентября 2000 г. </em></td>

</tr>

</tfoot>

</table>

Так как в приведенной таблице только одно «тело», то теги

<thead>, <tbody> и <tfoot> могут быть опущен.

Источник: Филиппов С.А. Основы современного веб-программирования: Учебное пособие. М.: НИЯУ МИФИ, 2011. – 160 с.

Популярное

Категории

Мультимедийные объекты

Стандартное отображение: нет

2.5. Списки

1 июля

9 июля

2.8. Таблицы

Индивидуальные атрибуты: align

Похожие посты:

Комментировать Cancel reply