Графика и мультимедиа на страницах WEB
К графическим и мультимедиа объектам, которые можно помещать на WEB страницах, относятся рисунки, фотографии и видео клипы. На WEB страницах допустимо, также, располагать и звуковое сопровождение.
К стандартным форматам графических файлов, которые распознаются всеми интернет браузерами, относятся: JPEG (JPG), GIF и PNG. Формат GIF позволяет создавать анимированные изображения, а формат PNG имеет малый объем графического файла при достаточно высоком качестве изображения.
Формат растровой графики BMP поддерживается не всеми браузерами, поэтому его лучше конвертировать в форматы JPG или GIF при помощи файловых конверторов – IrfanView или ACDSee.
Внедрение графического файла в состав WEB страницы осуществляется с помощью тэга <IMG> с различными параметрами.
Тэги загрузки на WEB страницу файлов мультимедиа:
<IMG DYNSRC=”filename.avi” LOOP=INFINITE LOOPDELAY=4000 ALIGN="RIGHT">
Тэг загрузки и воспроизведения видео файла.
Параметр - LOOP=INFINITE – указывает на то, что воспроизведение видео клипа будет постоянно, без фиксированного числа повторений. Если нужно, чтобы клип повторялся заданное число раз, то вместо значения INFINITE следует указать число повторений.
Параметр LOOPDELAY=4000, говорит о том, что задержка между показами видео роликов будет равна 4 секундам (значение параметра должно задаваться в миллисекундах).
<IMG src="filename.gif" ALT="Этикетка" ALIGN=RIGHT>
Тэг загрузки растровой графики – SRC. Параметр ALT задает надпись (этикетку), которая появляется на картинке, при установке курсора на эту картинку.
<BGSOUND SRC=SOUND.WAW LOOP=2>
Тэг загрузки аудио файлов. Аудио файлы должны иметь формат MIDI или WAV. Параметр LOOP указывает на количество повторений проигрывания музыкального ролика.
lesson 3
<HTML>
<TITLE>Lesson3. Мультимедиа объекты </TITLE>
<BODY BACKGROUND="/images/FON.jpg" TEXT=BLUE SIZE=+2>
<FONT COLOR=RED>
<MARQUEE>
<H2>Загружаем фон (fon.jpg) и внедряем картинки </H2>
</MARQUEE>
</FONT>
<HR>
<IMG src="/images/image.gif" alt="А это я, картинка Image.gif" ALIGN=RIGHT>
Подведите указатель мыши на картинку ---><BR>
и получите подсказку (hint) о картинке.<BR>
<BR><BR><BR>
<FONT COLOR=GREEN>
<IMG src="/images/contact.gif" WIDTH="100" HEIGHT="80" ALIGN="LEFT">
<I><B><-- Эту картинку мы поместили в левой части листа,а сам текст располагается справа от картинки
</I></B>
<BR>
</FONT>
<P>
<IMG DYNsrc="/images/speed.avi" ALIGN=RIGHT CONTROLS>
Посмотрим клип "Speed.avi", взятый автором из стандартной поставки языка программирования Delphi 6 (Фирмы Borland)<BR>
</P>
</BODY>
</HTML>
Создание списков
Для наглядного представления информации на Web-страницах часто используются списки. Списки могут быть нумерованными и ненумерованными. Создадим новую страницу нашего сайта, на которой вставим ненумерованный список.
Создайте структуру Web-документа, напечатав основные тэги:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
В качестве заголовка документа в тэге <title></title> введите: Чем мы занимаемся?:
<title>Чем мы занимаемся?</title>
Такой же заголовок для списка введите в теле документа между тэгами <body> и </body>, использовав для его отображения тэги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:
<h2 align=center>Чем мы занимаемся?</h2>
Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся тэге <body>, например, так:
<body bgcolor=aqua text=navy>
Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет отображаться черным цветом на белом фоне.
Теперь вставим на страницу ненумерованный список с информацией о сфере деятельности нашего лицея. Ненумерованные списки создаются с помощью пары тэгов <ul></ul>, которые ограничивают список.
Между ними располагается столько элементов, начинающихся с тэга <li>, сколько элементов в списке.
Вставьте пустую строку под строкой с кодом <h2 align=center>Чем мы занимаемся?</h2> и введите в теле документа следующий код:
<ul>
<li>Изучением фундаментальных курсов физико-математических дисциплин.
<li>Изучением курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.
<li>Изучением цикла гуманитарных дисциплин.
<li>Изучением сценического искусства.
</ul>
Обратите внимание: тэг <li> может использоваться как одиночный, т.е. без парного, закрывающего тэга </li>.
Полный HTML-код документа должен иметь следующий вид:
<html>
<head>
<title>Чем мы занимаемся?</title>
</head>
<body bgcolor=aqua text=navy>
<h2 align=center>Чем мы занимаемся?</h2>
<ul>
<li>Изучением фундаментальных курсов физико-математических дисциплин.
<li>Изучение курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.
<li>Изучением цикла гуманитарных дисциплин.
<li>Изучением сценического искусства.
</ul>
</body>
</html>
После сохранения Вы увидите, что каждый элемент ненумерованного списка выделяется специальным маркером.
В нумерованном списке каждый элемент будет отмечаться его порядковым номером. Для создания нумерованных списков используются тэги <оl></оl>, между которыми помещаются элементы <li>.
Создание таблиц
Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
Введите основные тэги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны:
<html>
<head>
<title>Meню</title>
</head>
<body bgcolor=silver>
</body>
</html>
Каждая таблица начинается тэгом <table> и заканчивается тэгом </table>. Строки таблицы образуются парой тэгов <tr></tr>,между которыми располагаются пары тэгов <td></td>. Каждая пара этих тэгов образует один столбец. Между открывающим <td> и закрывающим </td> тэгами помещается текст или любое другое содержимое ячейки.
Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного столбца и содержащую пункты меню с названиями страниц сайта, должен иметь следующий вид:
<table>
<tr><td>Главная страница</td></tr>
<tr><td>Чем мы занимаемся?</td></tr>
<tr><td>О нашем лицее</td></tr>
<tr><td>Новости</td></tr>
<tr><td>Учебный процесс</td></tr>
<tr><td>Связь с лицеем</td></tr>
</table>
Вставьте пустую строку между открывающим <body> и закрывающим </body> тэгами и, начиная с нее, введите указанный код.
Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем тэге <table> атрибут align=center для выравнивания таблицы по центру или атрибут align=right - для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в тэге <table> атрибут border, указав в качестве его значения толщину рамки в пикселах.
Добавьте в тэг <table> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел:
<table border=1>
Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако вы можете установить фиксированную ширину таблицы в пикселах с помощью атрибута width.
Установите для таблицы ширину 140 пикселов, добавив атрибут width=140 в открывающий тэг <table> так, чтобы он принял вид:
<table border=1 width=140>
В окне браузера ширина таблицы уменьшится так, что в большинстве ячеек текст будет отображаться в двух строках.
При использовании для формирования столбцов таблицы тэгов <td></td> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо тэгов <td></td> удобно использовать тэги <th></th>. Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.
Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.
В тэгах <td> и <th> вы можете использовать следующие атрибуты:
align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;
width - для указания ширины ячейки в пикселах;
height - для определения высоты ячейки;
valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.
Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тэг <th>, <tr> или <table>