Тема. Работа с графикой, звуком и видеоклипами

Цель. Приобрести навыки вставки на страницу рисунков, звуковых файлов и видеофайлов.

Задания

1. Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы. Задайте файлу имя 5.htm

2. Используя тег <IMG> отобразите на странице рисунок. Задайте размер выводимого рисунка 200´300 пикселей.

3. Поместите текст рядом с рисунком, используя таблицу.

4. Используя таблицу, поместите рядом с первым рисунком еще один рисунок.

5. Создайте бегущую строку: задов цвет фона – голубой; цвет текста – темно синий; размер букв – 10 пикселей; направление движения – с лева на право; число проходов по экрану – 5.

6. Создайте картинку, которая сопровождалась звуком. Для озвучивания картинки используйте структуру:

7. Создайте рисунок на месте, которого демонстрировался клип. Используйте следующую структуру для вывода на экран картинки, а после загрузки всей страницы на месте картинки будет воспроизведен видеофайл:

8. Используя тег <EMBED> загрузим на страницу видеоклип, указав размеры экрана отведенного под воспроизведения клипа:

9. Задайте атрибут AVTOSTART=YES тега <EMBED>. Обновите страницу. Что изменилось?

10. Используя тег <EMBED> воспроизведите звуковой файл. Используйте структуру:

11. Используя тег <BGSOUND> воспроизведите звуковой файл. Используйте структуру:

Контрольные вопросы

1. Как задать размеры отображаемого рисунка?

2. Какой графический формат поддерживает большинство браузеров?

3. На что влияет размер выводимых на странице рисунков?

4. Почему рекомендуется задавать размер рисунков на странице?

5. Для каких целей используется атрибут ALT в теге <IMG>?

6. В чем отличие использования различных тегов при воспроизведении звуковых файлов?

7. Как запретить (разрешить) пользователю управлять воспроизведением клипа или звука?

8. Какое программное и аппаратное обеспечение должно быть установлено на компьютере для возможности просматривать и прослушивать вашу мультимедийную страницу?

Лабораторная работа №6

Тема. Ссылки

Цель. Создание гиперссылок. Создание ссылок в виде кнопок, рисунков.

Задания

1. Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы. Задайте файлу имя 6.htm

2. Введите тег <A href=”2.htm”> текст ссылки </a>. Посмотрите, как Ваша страница с ссылкой выглядит в Explorer. Страница 2.thm должна лежать в той же папке что и страница 6.htm.

3. Измените цвет ссылки, используя тег <BODY>.

4. Измените цвет, размер шрифта текста ссылки используя стили.

5. Создайте еще одну ссылку. Используя в качестве ссылки рисунок (тег <img>), а в качестве загружаемой страницы – страницу 3.thm. Рисунок предварительно поместите в свою рабочую папку.

6. Внесите изменения в ссылку созданную в пункте 4, переложите рисунок в другую папку и пропишите к ней путь.

7. Создайте еще одну ссылку. Используя в качестве ссылки рисунок (тег <img>), а в качестве загружаемой страницы – тот же рисунок, но больших размеров.

8. Создайте ссылку, в начале страницы, отсылающую вас к тексту расположенному в конце текущей страницы.

9. Создайте ссылку, отсылающую вас к рисунку расположенному в конце текущей страницы.

10. Создайте рисунок-ссылку, отсылающий вас к тексту комментария этого рисунка, который расположен на этой же странице.

11. Создайте ссылку при обращении, к которой будет вызвана программа для отправки сообщения по электронной почте.

12. Создадим ссылку, при вызове которой воспроизводиться звуковой файл:

<A href=”адрес и имя звукового файла”>текст ссылки </A>.

13. Создадим ссылку, при вызове которой воспроизводиться видеоклип:

<A href=”адрес и имя файла с видеоклипом”>текст ссылки </A>.

Контрольные вопросы

1. Что Вы понимаете под понятием «гиперссылка»?

2. Как задать путь к вызываемому или загружаемому объекту, если он лежит не в рабочей папке?

3. В каком теге и каким атрибутом задается цвет гиперссылки?

4. Как задать видеоклип в виде гипертекстовой ссылки?

5. Что происходит при активизации ссылки для отправки сообщения по электронной почте?

6. Почему рекомендуется наличие ссылок-путеводителей по вашему сайту (или наличие меню) и недостаточно для навигации, только средств браузера?

7. Как изменить цвет гипперссылки?

8. Как отменить режим подчеркивания гиперссылки?

Лабораторная работа №7

Тема. Фреймы

Цель.

Задания

1. Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы.

2. Создайте четыре страниц, на каждой из них написав

Контрольные вопросы

Лабораторная работа №8

Тема. Изображения-карты

Цель.

Задания

Контрольные вопросы

Лабораторная работа №9

Тема. Формы

Цель.

Задания

Контрольные вопросы

Лабораторная работа №10

Тема. Подключение сайта

Цель.

Задания

Контрольные вопросы

Атрибут	Описание	Пример задания значения
ALIGN	Способ выравнивания объекта. Может принимать одно из значений: LEFT – по левому краю, RIGHT – по правому краю, CENTER – по центру.	ALIGN=”CENTER”
VALIGN	Вертикальное выравнивание. Может принимать одно из значений: MIDDLE - по центру, TOP - по верхней границе, BOTTOM - по нижней границе.	VALIGN=”BOTTOM”
ALT	Подпись к объекту	ALT=”текст надписи”
BGCOLOR	Цвет фона	BGCOLOR=#0000FF или BGCOLOR=”BLUE”
BORDER	Задает ширину границы в пикселях.	BORDER=0
CLEAR	Запрещает помещать другой объект с указанной стороны. Может принимать значения: LEFT(запрещено с лева), RIGTH (запрещено с права), ALL (объект помещается ниже).	CLEAR=”ALL”
COLOR	Цвет объектов	COLOR=#0000FF или COLOR=”BLUE”
HEIGHT	Высота объекта по вертикали. Задается в пикселях или в процентах от ширины окна броузера.	HEIGHT=150
HSPACE	Определяет расстояние по вертикали, между границей окна и полем бегущей строки.	HSPACE=7
SCROLLDELAY	Определяет количество миллисекунд задержки перед началом повторения текста	SCROLLDELAY=50
SIZE	Размер объекта	SIZE=7
VSPACE	Определяет расстояние по горизонтали, между границей окна и полем бегущей строки.	VSPACE=5
WIDTH	Высота объекта по горизонтали. Задается в пикселях или в процентах от ширины окна броузера.	WIDTH=240 или WIDTH=75%
NOSHADE	Объект без тени	NOSHADE
COLSPAN	Растягивание клетки на несколько столбцов. Объединение столбцов. Цифра указывает количество столбцов для объединения.	COLSPAN=4
ROWSPAN	Растягивание клетки на несколько строк. Объединение строк. Цифра указывает количество строк для объединения.	ROWSPAN=2
BACKGROUND	Задание рисунка для фона	BACKGROUND=”URL”
TEXT	Цвет текста	TEXT=#0000FF или TEXT=”BLUE”
LINK	Цвет ссылки	LINK=#0000FF или LINK =”BLUE”
VLINK	Цвет уже посещенной ссылки	VLINK=#0000FF или VLINK =”BLUE”
ALINK	Цвет активной ссылки	ALINK=#0000FF или ALINK =”BLUE”

Список литературы

1. Якубайлик О.Э. Базовые средства программирования для Internet. Учебное пособие. Часть1,2. Красноярск: СОРАН, 2000. 160 с.

2. Гончаров А. HTML: самоучитель. СПб.: Питер, 2000. 240 с.

3. Шафран Э. Создание Web страниц: самоучитель. СПб.: Питер, 2000. 320 с.

4. Симанович С.В. и др. Информатика: базовый курс. СПб.: Питер, 2001. 640 с.

Содержание

Приложение 1

Любой цвет в модели RGB представляется как комбинация красного (Red), зеленого (Green) и синего (Blue) цветов, взятых в определенных пропорциях. Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двухразрядным шестнадцатеричным числом стоящим на определенном месте.

Синий

Зеленый

Красный

# 00 00 FF