2015-08-21
5182
Широкое распространение мультимедиа пришлось на период, когда служба World Wide Web уже существовала, так что язык HTML не сразу приспособился к появлению на Web-страницах мультимедийных объектов. Файлы аудио и видео до сих пор рассматриваются как «внешние» объекты, воспроизводимые через встроенные и вспомогательные приложения.
Мультимедийные файлы видео и звука могут использовать различные форматы. Обычные форматы требуют полной загрузки файла, прежде чем станет возможным его воспроизведение. Современные потоковые форматы позволяют воспроизводить звук и видеоизображение в реальном времени по ходу загрузки данных.
В потоковом формате в Интернате передаются радиотрансляции. Например, в России в таком формате вещает радиостанция «Серебряный дождь» (www.silver.ru).
Самый простой способ вставить мультимедийный объект на Web-страницу — это использовать тег гиперссылки <А>. Создать такую ссылку проще всего, и в этом случае мультимедийный файл не отвлекает читателя от остального содержимого документа HTML.
|
|
|
В некоторых случаях требуется внедрить звуковой или мультимедийный файл непосредственно в Web-страницу, например для того, чтобы иметь возможность воспроизводить этот файл автоматически. В настоящее время для этой цели удобнее всего применять тег <EMBED>, хотя он, строго говоря, не входит в стандарт HTML. Этот тег распознается двумя наиболее распространенными броузерами — Internet Explorer и Netscape Navigator, хотя возможность воспроизведения мультимедийного файла определяется исключительно наличием соответствующего встроенного приложения.
Тег <EMBED> является одиночным, так что закрывающий тег не требуется. Его обязательным атрибутом является SRC=, значение которого представляет абсолютный или относительный путь поиска соответствующего файла. Возможно также использование атрибутов WIDTH= и HEIGHT=, задающих размеры (ширину и высоту) прямоугольной области на экране, «отведенной» под воспроизведение мультимедийного объекта.
<HTML>
<HEAD>
<ТIТLЕ> Мультимедиа в документе </ТIТLЕ>
</HEAD>
<BODY>
<Р><А HREF='music.wav'> Щёлкните здесь, чтобы послушать музыку </А>
<Р> Видеоролик, воспроизводимый в рамках страницы
<EMBED SRC=Tile.avi" WIDTH="200" HEIGHT="200">
</BODY>
</HTML>
Создание таблиц
Таблица — это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.
1. Таблица в языке HTML начинается с тега <TABLE> и заканчивается закрывающим тегом </TABLE>. Текст внутри таблицы должен быть заключен в специальные теги, определяющие элементы таблицы (заголовки, строки и ячейки).
|
|
|
2. Между тегами <TABLE> и </TABLE> может один раз встретиться пара тегов <CAPTION> и </CAPTION>, определяющая заголовок таблицы. Заголовок таблицы размещается непосредственно над таблицей (по умолчанию) или непосредственно под таблицей.
3. Далее следуют теги <TR> и </TR>, определяющие строки таблицы. Закрывающий тег можно опускать, так как строка таблицы заканчивается перед началом следующей строки или вместе с таблицей.
4. Каждая строка таблицы состоит из ячеек. Ячейки помечаются либо тегами <ТН>, содержащими заголовки столбцов и строк, либо тегами <TD>, содержащими обычные данные. Эти теги также являются парными, но закрывающие теги и здесь могут опускаться, так как это не вызывает разночтений.
5. Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в разделе тела документа. Например, ячейка таблицы может содержать вложенную таблицу. Броузеры автоматически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов.
6. Из специфических атрибутов таблиц можно, например, указать атрибут BORDER=, который позволяет создавать рамку вокруг таблицы и вокруг отдельных ячеек. Значением этого атрибута является толщина внешней рамки в пикселах.
7. В примере, приведенном на соседней странице, использованы и другие атрибуты, с помощью которых увеличены промежутки между ячейками и созданы ячейки увеличенной высоты.
<HTML>
<HEAD>
<ТIТLЕ> Таблица <TIТLЕ>
</HEAD>
<BODY>
<TABLE WIDTH=”90%” BORDER=10 CELLPADDING=2 CELLSPACING=10> <CAPTION> Основные теги таблицы </САРТION>
<ТR><ТD><В> Открывающий тег </В><ТD><В> Закрывающий тег </В> <ТD><В> Описание </В>
<TR><TD> TABLE <TD ROWSPAN=2> Oбязaтeлeн <ТD> Начало и конец таблицы
<TR><TD> CAPTION <ТD> Начало и конец заголовка таблицы
<TR><TD> TR <TD ROWSPANАМ=2> Необязателен <ТD> Начало строки таблицы
<TR><TD> TD <ТD> Начало ячейки таблицы <TАВLЕ>
</BODY>
</HTML>
Мы уже говорили об ограниченных возможностях языка HTML по точному размещению текста на странице. Эти ограничения объяснимы и понятны, но профессиональные Web-дизайнеры мириться с ними не хотят. Таблицы — это именно то средство, с помощью которого они преодолевают естественные ограничения языка и достигают эффектных результатов.
Размещение нескольких документов на одной Web-странице
Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.
1. Для создания фреймов используют особый документ HTML, структура которого отличается от обычной. Такой документ не содержит раздела «тела» документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами <FRAMESET> и </FRAMESET>. В этом описании указывают размеры и порядок размещения областей в окне броузера, а также задают документы, которые должны загружаться в каждую из этих областей.
2. Тег <FRAMESET> должен содержать обязательный атрибут COLS= или ROWS=, определяющий способ разбиения окна. При использовании атрибута COLS= окно делится на области вертикальными линиями, а при использовании атрибута ROWS= — горизонтальными. Если заданы оба эти атрибута, в окне создается сетка из подобластей.
Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселях или в процентах (символ «%»). В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все остающееся свободное пространство.
3. Между тегами <FRAMESET> и </FRAMESET> располагают дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги <FRAMESET>, задающие дополнительное разбиение окна, или одиночные теги <FRAME>, определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <FRAMESET> и </FRAMESET>, должно соответствовать числу созданных областей.
|
|
|
4. Тег <FRAME> должен содержать обязательный атрибут SRC=, определяющий документ, который будет загружен в данную область. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими свойствами.
<HTML>
<HEAD>
<ТIТLЕ> Страница с навигационной панелью </ТIТLЕ>
</HEAD>
<FRAMESET
COLS="25%,*">
<FRAME
SRC=panel.htm>
<FRAME
SRC=home1.htm>
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<ТIТLЕ> Сложная структура документа </ТIТLЕ>
</HEAD>
<FRAMESET ROWS="45%,30%,25%->
<FRAMESET COLS="40%,30%,30%">
<FRAMESET ROWS="50%,50%">
<FRAMESRC=”doc1.htm”>
<FRAMESRC="doc2.htm">
</FRAMESET>
<FRAMESRC="doc3.htm">
<FRAMESRC="doc4.htm">
</FRAMESET>
<FRAMESET COLS="60%,40%">
<FRAMESRC="doc5.htm">
<FRAME SRC="doc6.htm">
</FRAMESET>
<FRAMESET COLS="30%,40%,30%">
<FRAME SRC="doc7.htm">
<FRAME SRC="doc8.htm">
<FRAME SRC="doc9.htm"> </FRAMESET>
</FRAMESET>
</HTML>
Качество документов HTML
Творческий характер создания документов HTML сродни программированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разнообразие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.
Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти особенности. Чтобы создать хороший документ HTML, следует придерживаться ряда достаточно простых правил.
1. Содержание документа более важно, чем его внешний вид. Страница с интересным содержанием, просто разбитая на абзацы, представленные в логической последовательности, может привлечь читателей, а богато украшенная страница, не несущая полезной информации, навсегда останется курьезом.
|
|
|
2. Содержание Web-страницы или группы Web-страниц должно быть связанным логически. Хорошо продуманная система ссылок должна позволять переходить от страницы к странице и возвращаться назад практически без использования кнопок навигации Вперед и Назад на панели инструментов броузера.
3. Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних достижений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в броузерах, а новым версиям требуется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.
4. Ошибка, которую часто делают новички, состоит в злоупотреблении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схемой или при отсутствии необходимых шрифтов.
5. Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.
6. Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программировании как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнаружить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.
7. Если собственной фантазии недостаточно, чтобы придумать способ оформления Web-страницы, можно воспользоваться службой World Wide Web как справочником. Интернет содержит миллионы Web-страниц, способных предложить идеи оформления, которыми можно пользоваться. Достоинство этого подхода состоит еще и в том, что таким способом можно увидеть, не только что сделано, но и как сделано, если обратиться к исходному тексту Web-страницы.
8. Фреймы — очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораздо больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов — удобство пользователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.
9. Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка документа. Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большого количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.
Закрепление пройденного
Web-документы создают с помощью специального языка разметки гипертекста ~ HTML.
Коды языка HTML называются тегами.
Теги HTML — это специальные последовательности символов, заключенные в угловые скобки (<>).
Web-документ представляет из себя исходный текст с имплантированными в него тегами. Таким образом, Web-документ представляет собой обычный текст и, тем самым, может создаваться и редактироваться средствами обычных текстовых редакторов.
Основная особенность создания Web-документов состоит в том, что автору документа неизвестно, на какой модели компьютера, в какой операционной системе и какими программами этот документ будет отображаться на экране пользователя. Этот «уровень незнания» не позволяет жестко задавать параметры форматирования Web-документа.
Форматирование Web-документов отличается от форматирования документов в обычных текстовых процессорах тем, что является функциональным. Так, например, коды HTML не должны точно задавать параметры шрифта, строки и абзаца (хотя в некоторой степени они позволяют это делать). Вместо этого они определяют назначение заголовка или абзаца, а программа пользователя, выполняющая просмотр Web-документа (броузер) сама «принимает решение» о том, как отобразить данный текстовый элемент на экране.
Используя коды HTML, можно выполнять следующие действия:
• выделять заголовки разных уровней и управлять их выравниванием на экране;
• разбивать текст на абзацы, использовать простейшие элементы оформления для разделе-ния абзацев и других частей документа;
• встраивать в текст гипертекстовые ссылки на другие Web-документы или на другие разделы данного документа;
• встраивать в текст рисунки; управлять параметрами обтекания рисунков текстом, управ-лять размерами рисунков, вводить альтернативный текст, который отображается броузером при невозможности отобразить рисунок;
• управлять цветом, размером и гарнитурой шрифта;
• оформлять смысловые выделения в исходном тексте;
• создавать несколько различных видов списков;
• создавать таблицы;
• размещать несколько документов на одной Web-странице;
• встраивать в текстовый документ мультимедийные объекты;
• и многое другое.
Процесс создания Web-документов - это творческая работа, успех которой зависит как от личных талантов и способностей автора, так и от его уровня опыта.
HTML-код всех Web-страниц Интернета открыт для просмотра с помощью обычных броузеров. Исследование кода готовых Web-страниц обычно является хорошей школой при изучении тегов HTML и при разработке новых приемов оформления Web-страниц.
