Задание 16. Ссылки на другой HTML -документ

Информация. Ссылки на другой HTML-документ позволяют щелчком по выделенному слову или фразе перейти к другому файлу.

Формат Ссылки:

<А HREF ="2. HTM ">2 курс</А>

После имени файла 2.НТМ указывается между символами > и < текст (2курс), на котором производится щелчок для перехода на этот файл.

1. Загрузите в браузер файл RASP.HTM.

2. Внесите изменения в файл:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

<HEAD>

<FONT COLOR="#008080" SIZE="7"><B> Расписание

</B></FONT><BR>

<FONT SIZE="6"> <I>занятий на вторник</I></FONT><BR><BR>

</P>

<CENTER>

<TABLE WIDTH=60%>

<TR>

<TD> 1 курс </TD>

<TD> <A HREF="2.HTM">2 курс </ А > </TD>

</TR>

<TR>

<TD>3 курс </TD><TD>4 курс </TD>

</TR>

<TR><TD>5 курс </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

3. Сохраните файл.

4. Просмотрите полученную Web-страницу.

5. Подведите курсор к ссылке “2 курс” и по щелчку мыши вы перейдете на другую Web-страницу (файл 2.НТМ).

Задание 17. Графическая ссылка на другой HTML -документ

1. Внесите изменения в файл 2.НТМ так, чтобы в конце страницы была ссылка на головную страницу “Расписание занятий” (файл RASP.HTM) В качестве ссылки используется графический файл:

…

</TR>

</TABLE>

<BR><CENTER>

< А HREF="RASP.HTM"><IMG SRC="HOME.GIF" BORDER="0"></A>

</ CENTER >

</BODY>

</HTML>

В качестве ссылки выступает рисунок (“Дискетка со стрелкой”), находящийся в файле HOME.GIF.

Задание 18. Таблицы с ячейками разного размера

1. В текстовом редакторе создайте HTML-документ нижеследующего содержания и сохраните его в виде файла под именем Tabl1.htm:

<HTML>

<HEAD>

<ТIТLЕ>Таблица</ТIТLЕ>

</HEAD>

<BODY>

<Н2 ALIGN=Center>Taблица</H2>

<TR>

<TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Большая ячейка A</TD>

<ТD>Маленькая ячейка 1</TD>

<ТD>Маленькая ячейка 2</TD>

</TR>

<TR>

<ТD>Маленькая ячейка 3</TD>

<ТD>Маленькая ячейка 4</TD>

</TR>

<TR>

<TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Большая ячейка C</TD>

<TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Большая ячейка D</TD>

</TR>

</TABLE>

</BODY>

</HTML>

2. В текстовом редакторе создайте HTML-документ нижеследующего содержания и сохраните его в виде файла под именем Tabl2.htm:

<HTML>

<HEAD>

<Т1ТLЕ>Таблица</TITLE>

</HEAD>

<BODY>

<H2 ALIGN =cеntег>Таблица</Н2>

<TR>

<TD ширина которой 50% ширины экрана.

Столбец, ширина которого 80% ширины таблицы</TD>

<ТD>ячейка 2</TD>

</TR>

<TR>

<ТD>ячейка 3</TD>

<ТD>ячейка 4</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Таблица 7 – Теги для формирования и форматирования таблицы

тег TABLE

№

Атрибут

Функция

align=позиция

Задается способ выравнивания таблицы относительно текстового потока, в котором она находится: left (по левому краю) или right (по правому краю)

background=url

Указывается фоновое изображение для таблицы

bgсо1ог=цвет

Задается цвет фона всей таблицы (N3, IE 2 и выше)

border=n

Создает обрамление с толщиной линий в n пиксель

bordercolor=цвет

Задается цвет обрамления всей таблицы ( IE 2 и выше)

bordercolordark=цвет

Задается темный цвет для создания эффекта тени рамки ( IE 2 и выше)

bordercolorlight= цвет

Задается светлый цвет для создания эффекта тени рамки ( IE 2 и выше)

cellpadding=n

Задается расстояние между границами ячейки и ее содержимым в n пиксель

cellspacing=n

Задается интервал между ячейками таблицы в n пиксель

10.

Указывается способ отображения рамки таблицы (только IE 3 и выше): void – подавление отображения всей рамки таблицы; box и border – отображение всей рамки; hsides – отображение горизонтальных составляющих рамки, vsides –вертикальных; lhs – отображение левой боковой стороны рамки, rhs – правой

11.

hspases=n

Задается размещение слева и справа от таблицы областей свободного пространства заданной ширины (в пикселях)

12.

rules=[alMel|cols|groups| none|rows]

Выключение (none) или включение режима отображения разграничительных линий между ячейками таблицы (только IE 3 и выше): по столбцам (cols), строкам (rows), группам (groups) или всем элементам (all)

13.

vspace=n

Задается размещение над таблицей и под ней областей свободного пространства заданной высоты в пикселях

14.

width=n

Установка ширины таблицы в пикселях или в процентах от ширины окна

тег CAPTION – задается заголовок таблицы

align

В Netscape Navigator – установка размещения заголовка по вертикали (top или bottom). По умолчанию – размещение сверху (top), по центру страницы. В IE – выравнивание заголовка по горизонтали (left, center или right) либо установка размещения заголовка по вертикали (top или bottom). По умолчанию – размещение сверху (top) и по центру. С помощью данного атрибута задать размещение и по вертикали, и по горизонтали нельзя

valign

Установка способа размещения заголовка по вертикали (top или bottom) (только IE 2 и выше). По умолчанию размещение сверху

тег COL – установка параметров столбца (или столбцов) в <colgroup> таблицы ( IE 2 и выше)

аlign=значение

Задается способ выравнивания текста в ячейках столбца. Возможные значения: center, left, right

span=n

Указывается число столбцов, на которые должно распространяться действие установок <col>

тег COLGROUP – установка свойств обозначенного столбца (или столбцов) в таблице. Кроме того, задается местоположение вертикальных разграничительных линий таблицы, если в теге <table> задан атрибут rules=groups

аlign=значение

Указывается способ выравнивания текста в ячейках столбцов в <colgroup>. Возможные значения: center, left, right

span=n

Указывается число столбцов в <colgroup>

тег TBODY - начальный тег для строк таблицы, образующих основное тело таблицы. Наличия конечного тега не требуется. Используется для указания места расположения разграничительных линий, если в теге <table> задан атрибут rules= groups ( IE 2 и выше)

тег TD – начальный и конечный теги ячейки данных таблицы

тег TFOOT – начальный тег для строк таблицы, образующих нижний колонтитул таблицы. Наличия конечного тега не требуется. Используется для указания места расположения разграничительных линий, если в теге <table> задан атрибут rules= groups ( IE 2 и выше)

тег ТН – начальный и конечный теги ячейки заголовка таблицы

align=mun

Задается способ выравнивания содержимого ячейки: по левому (left), по центру (center), no правому краю (right) или по ширине (justify)

background=url

Задается фоновое изображение для ячейки

bgcolor=цвет

Задается цвет фона для ячейки (N3, IE 2 и выше)

bordercolor= цвет

Задается цвет обрамления ячейки ( IE 2 и выше)

bordercolordark= цвет

Задается темный цвет для создания эффекта тени обрамления ячейки ( IE 2 и выше)

bordercolorlight= цвет

Задается светлый цвет для создания эффекта тени обрамления ячейки ( IE 2 и выше)

colspan=n

Данная ячейка охватывает n соседних столбцов

nowrap

При указании этого атрибута отключается режим автоматического распределения текста по всей ячейке. Будет отображаться лишь та часть текста, которая умещается в ячейке по всей длине

rowspan=n

Данная ячейка охватывает n соседних строк

10.

Задается способ размещения содержимого данной ячейки по вертикали: сверху (top), по центру (center), внизу (bottom) или по базовой линии (baseline) ячейки

11.

width=n

Задается ширина данной ячейки в пикселях или в процентах от ширины таблицы

тег THEAD – начальный тег для строк таблицы, образующих заголовок таблицы. Наличия конечного тега не требуется. Используется для указания места расположения разграничительных линий, если в теге <table> задан атрибут rules=groups ( IE 2 и выше)

тег TR – начальный и конечный теги строки ячеек в таблице

align=mun

Задается способ выравнивания содержимого ячейки: по левому (left), по центру (center) или по правому краю (right)

backgroundMe=url

Задается фоновое изображение ячейки

bdсо1ог=цвет

Задается цвет фона данной строки (N3, IE 2 и выше)

border=n

Создается обрамление, образованное линиями толщиной n пиксель

bordercolor=цвет

Задается цвет обрамления строки ( IE 2 и выше)

bordercolordark=цвет

Задается темный цвет для создания эффекта тени обрамления строки ( IE 2 и выше)

bordercolorlight=цвет

Задается светлый цвет для создания эффекта тени обрамления строки ( IE 2 и выше)

Задается способ размещения содержимого ячеек в данной строке по вертикали: сверху (top), по центру (center), внизу (bottom) или по базовой линии (baseline) ячейки

Упражнение 3. Создайте HTML-документ, который будет содержать таблицу следующей структуры:

*Таблица*
Длина ячейки 4 см		Длина ячейки 5 см	Длина ячейки 4 см	Длина ячейки 4 см
Длина ячейки 1 см	Длина ячейки 3 см			Длина ячейки 2 см	Длина ячейки 2 см

Задание 19. Создание фреймов ( кадров )

1. Используя описание основных тегов для создания фреймов и их атрибутов (табл. 8), создайте HTML-документ, состоящий из двух кадров и сохраните его под именем fr1.htm.

Для страницы, содержащей кадры, вам понадобится заготовить как минимум два HTML-документа. Например, два документа следующего вида с именами k1.htm и k2.htm.

Файл k1.htm:

<HTML>

<HEAD>

<TITLE>Кадр. Страница 1</TITLE>

</HEAD>

<BODY>

Страница 1

</BODY>

</HTML>

Файл k2.htm:

<HTML>

<HEAD>

<TITLE>Кадр. Страница 2</TITLE>

</HEAD>

<BODY>

Страница 2

</BODY>

</HTML>

Базовый файл fr1.htm:

<HTML>

<HEAD>

<TITLE>Кадры на странице</TITLE>

</HEAD>

</FRAMESET>

</HTML>

2. Создайте HTML-документ, содержащий 4 кадра, используя для этого документы k1-1.htm, k2-1.htm, k3.htm, k4.htm(см. ниже). Кроме того, измените цвет фона каждой страницы, используя атрибут BGCOLOR тега BODY: на странице 1 укажите цвет FF00FF, на странице 2 – 00FF00, на странице 3 – FFFF00, на странице 4 – FFFFFF. Сохраните базовый HTML-документ под именем fr2.htm.

Файл k1-1.htm:

<HTML>

<HEAD>

<Т1ТLЕ>Кадр. Страница 1</TITLE>

</HEAD>

Кадр 1 розового цвета

</BODY>

</HTML>

Файл k2-1.htm:

<HTML>

<HEAD>

<TITLE>Кадр. Страница 2</TITLE>

</HEAD>

Кадр 2 зеленого цвета

</BODY>

</HTML>

Файл k3.htm:

<HTML>

<HEAD>

<TITLE>Кадр. Страница 3</TITLE>

</HEAD>

Кадр З желтого цвета

</BODY>

</HTML>

Файл k4.htm:

<HTML>

<HEAD>

<ТIТLЕ>Кадр. Страница 4</TITLE>

</HEAD>

Кадр 4 белого цвета

</BODY>

</HTML>

Базовый файл fr2.htm:

<HTML>

<HEAD>

<ТIТLЕ>Демонстрация фреймов 1</ТIТLЕ>

</HEAD>

</FRAMESET>

</HTML>

3. Отредактируйте файл fr2.htm,задав кадры разного размера, и сохраните его как fr3.htm:

<HTML>

<HEAD>

<Т1ТLЕ>Демонстрация фреймов 2</TITLE>

</HEAD>

<FRAMESETCOLS="10%, 10%, 10%, *">

</FRAMESET>

</HTML>

Примечание. Не забудьте, что размеры кадров можно задавать в пикселях. Размер кадра, заданный в пикселях – это стандартное значение, что позволит вам избежать нежелательных эффектов, которые могут возникнуть при просмотре вашей страницы на экране монитора с другим разрешением.

Таблица 8 – Теги для создания кадров

Тег FRAME – начальный и конечный теги для создания кадров

№	Атрибут	Функция
1.	bordercolor=цвет	Установка цвета обрамления кадра, если обрамление включено атрибутом frameborder=yes
2.	frameborder=[1\|0] или [yes\|no]	Включение или выключение отображения трехмерного обрамления кадра. По умолчанию 1 (yes), т.е. вставляется обрамление. Значение 0 (nо) выключает обрамление или заменяет его обычной рамкой в зависимости от типа браузера
3.	marginheight=n	Задается размещение над содержимым кадра и под ним областей свободного пространства высотой по n пиксель
4.	marginwidth=n	Задается размещение слева и справа от содержимого кадра областей свободного пространства шириной по n пиксель
5.	name=строка	Задается имя кадра
6.	noresize	Пользователю запрещается изменять размеры кадра
7.	scrolling=mun	Линейки прокрутки будут добавляться всегда (yes), не будут добавляться (nо), будут добавляться, если необходимо (auto)
8.	srс=url	Задается URL исходного документа для данного кадра
тег NOFRAMES –начальный и конечный теги, с помощью которых определяется содержимое, которое будет отображаться браузерами, не поддерживающими кадры тег FRAMSET - начальный и конечный теги набора кадров
1.	boider=n	Установка размера (в пикселях) обрамления кадров в наборе кадров. По умолчанию толщина линий обрамления равна 5 пикселям
2.	bordercolor=цвет	Установка цвета обрамления для набора кадров
3.	соls=список	Указание количества и ширины кадров в наборе
4.	frameborder=[1\|0] или [yes\|no]	Включение или выключение отображения трехмерного обрамления кадров. По умолчанию 1 (yes)(трехмерное обрамление)
5.	framespacing=n	Указывается, что между смежными кадрами должен быть промежуток и задается его размер в пикселях
6.	rows= cnuc ок	Указывается количество и высота кадров в наборе

тег IFRAME - начальный и конечный теги, с помощью которых определяется “плавающий кадр”, который аналогичным образом будет размещен в <img> (поддерживается только IE )

№	Атрибут	Функция

1.	align=mun	Задается способ выравнивания текста в ячейках столбца. Возможные значения center, left, right
2.	frameborder=[1\|0] или [yes\|no]	Включение или выключение отображения трехмерного обрамления кадра. По умолчанию 1 (yes)(трехмерное обрамление)
3.	height=n	Указание высоты кадра в пикселях или в процентах от высоты окна
4.	hspace=n	Задается размещение слева и справа от изображения областей свободного пространства шириной по n пиксель
5.	marginheight=n	Задается размещение над содержимым кадра и под ним областей свободного пространства высотой по n пиксель
6.	marginwidth=n	Задается размещение слева и справа от содержимого кадра областей свободного пространства шириной по n пиксель
7.	name=строка	Задается имя кадра
8.	noresize	Пользователю запрещается изменять размеры кадра
9.	scrolling=mun	Линейки прокрутки будут добавляться всегда (yes), не будут добавляться (nо) будут добавляться, если необходимо (auto)
10.	src=url	Задается URL исходного документа для данного кадра
11.	vspace=n	Задается размещение над изображением и под ним областей свободного пространства высотой по n пиксель
12.	width=n	Указание ширины кадра в пикселях или процентах от размера окна

4. Отредактируйте файл fr2.htm,расположив кадры в виде горизонтальных рядов, и сохраните под именем fr4.htm.

5. Откройте файл fr3.htm и отредактируйте его, задав для левого кадра размер в 100 пикселей, второй кадр должен занимать в два раза больше первого, а третий – всю оставшуюся часть главной страницы (рис. 4). Сохраните файл под именем fr5.htm.

Рис. 4 – Накладывающиеся кадры

6. Отредактируйте файл fr5.htmтаким образом, чтобы третий кадр был разделен на два по горизонтали (рис. 5). Сохраните отредактированный файл под именем fr6.htm.

Рис. 5 – Вертикальные и горизонтальные кадры

7. Создайте HTML-документ, в котором в качестве одного из кадров (фреймов) будет использоваться рисунок, например kot.jpg, задав размеры кадра так, чтобы они были меньше ширины рисунка (рис. 6). Сохраните документ в виде файла под именем fr7.htm.

Рис. 6 – Графическое изображение в качестве одного из фреймов

8. Так как ширина рисунка больше, чем заданная ширина кадра, то появилась дополнительная горизонтальная линейка скроллинга (прокрутки). Появлением полос прокрутки можно управлять. Создайте следующий документ и сохраните его под именем fr8.html:

<HTML>

<HEAD>

<TITLE>Демонстрация фреймов</TITLE>

</HEAD>

</FRAMESET>

</HTML>

9. Создайте документ с “плавающим” кадром, указав, что он занимает 50% экрана имеет высоту в 300 пикселей. С помощью атрибута ALIGN задайте выравнивание справа от текста. Созданный файл сохраните под именем fr9.htm. Пример файла fly.htmприведен ниже.

Файл fr9.htm:

<HTML>

<HEAD>

<TITLE>Демонстрация кадров (фреймов)</TITLE>

</HEAD>

<H1><CENTER> Пример "плавающего" кадра</CENTER></H1>

<IFRAME ALIGN=RIGHT HEIGHT=300

SRC="fly.htm"></IFRAME>

<HЗ>Кадр справа от данного текста является "плавающим" - он

размещен на данной станице с помощью специального тега

<I>IFRAME</I></H3>

</BODY>

</HTML>

Файл fly.htm:

<HTML>

<HEAD>

<TITLE>Демонстрация кадров (фреймов) Внутренняя страница</TITLE>

</HEAD>

<H2><CENTER>"Плавающий" кадр</CENTER></H2>

<H4>Данный текст отображается в "плавающем" кадре (фрейме),

который расположен справа от основною текста страницы. Этот

"плавающий" фрейм размещен на данной странице с помощью

специального тега <B>IFRAME</B>. При создании данного фрейма

было указано, что он занимает 50% экрана и имеет высоту в 300

пикселей. Также с помощью атрибута <I>align</I> было задано

выравнивание справа от текста. </Н4>

</BODY>

</HTML>

Упражнение 4. Создайте HTML-документ, при просмотре которого в браузере вы получите аналогичный результат как на рис. 7. Сохраните этот документ под именем index.htm.

Рис. 7 – Пример страницы с кадрами

Задание 20. Формы

Информация. Если вас интересует мнение посетителей вашего web-сайта, вам помогут формы. Основные теги для форм представлены в таблице 9.

Рассмотрим их подготовку на примере нижеследующего документа.

Таблица 9 – Теги для написания форм

Тег FORM – начальный и конечный теги формы

№	Атрибут	Функция
1.	action=urt	Указывается URL приложения, предназначенного для обработки формы. По умолчанию используется текущий URL
2.	anctype=кодирование	Задается способ кодирования значений элементов формы
3.	method=стиль	Указывается метод передачи параметров ( get или post ) По умолчанию используется get
4.	target=имя	Задается целевое окно для загрузки результатов заполнения формы. Можно использовать специальные атрибуты: bottom, top, parent, self
< INPUT TYPE = CHECKBOX > – в <form> создается элемент ввода"опция"
1.	checked	Элемент отображается как выбранный по умолчанию
2.	name=строка	Указывается имя параметра, который будет передан в приложение обработки форм при выборе данного элемента ввода. Этот атрибут является необходимым
3.	value=строка	Указывается значение параметра, посылаемого в приложение обработки форм при выборе данного элемента формы. Этот атрибут является необходимым
< INPUT TYPE = FILE > – в <form> создается элемент ввода "выбор файла"
1.	maxlength=n	Для данного элемента указывается максимальное количество вводимых символов
2.	name=строка	Указывается имя параметра, который будет передан в приложение обработки форм при выборе данного элемента ввода. Этот атрибут является необходимым
3.	Size=n	Для данного элемента указывается количество отображаемых символов
< INPUT TYPE = HIDDEN > – в <form> создается скрытый элемент
1.	maxlength=n	Для данного элемента указывается максимальное количество вводимых символов
2.	name=строка	Указывается имя параметра, который передается в приложение обработки форм для данного элемента ввода. Этот атрибут является необходимым
3.	size=n	Для данного элемента указывается количество отображаемых символов
4.	value=строка	Указывается значение параметра, посылаемого в приложение обработки форм
< INPUT TYPE = IMAGE > – в <form> создается элемент ввода "изображение"
1.	align=тип	Задается размещение изображения по вертикали относительно текста данного элемента формы: вверху (top), посередине (middle) или внизу (bottom)
2.	name=строка	Указывается имя параметра, который будет передан в приложение обработки форм при выборе данного элемента ввода. Этот атрибут является необходимым
3.	src=url	Указывается исходный URL адрес изображения. Этот атрибут является необходимым
< INPUT TYPE = PASSWORD > – в <form> создается элемент ввода текста с обеспечением защиты содержимого
1.	maxlength=n	Для данного элемента указывается максимальное количество вводимых символов
2.	name=строка	Указывается имя параметра, который передается в приложение обработки форм для данного элемента ввода. Этот атрибут является необходимым
3.	size=n	Для данного элемента указывается количество отображаемых символов
4.	value=строка	Задается исходное значение данного элемента
< INPUT TYPE = RADIO > – в <form> создается элемент ввода "селекторная кнопка"
1.	checked	Элемент отображается как выбранный по умолчанию
2.	name=строка	Указывается имя параметра, который будет передан в приложение обработки форм при выборе данного элемента ввода. Этот атрибут является необходимым
3.	value=строка	Указывается значение параметра, посылаемого в приложение обработки форм при выборе данного элемента. Этот атрибут является необходимым
< INPUT TYPE = RESET > – в <form> создается кнопка сброса
1.	value=строка	Указывается надпись для кнопки сброса

№	Атрибут	Функция
< INPUT TYPE = SUBMIT > – в <form> создается кнопка передачи
1.	name=строка	Указывается имя параметра, который будет передан в приложение обработки форм при выборе данного элемента ввода. Этот атрибут является необходимым
2.	value=строка	Указывается надпись для кнопки передачи, а также значение параметра, посылаемого в приложение обработки форм для данного параметра при щелчке по этой кнопке
< INPUT TYPE = TEXT > – в <form> создается элемент ввода текста (этот тип ввода используется по умолчанию)
1.	maxlength=n	Для данного элемента указывается максимальное количество вводимых символов
2.	name=строка	Указывается имя параметра, который передается в приложение обработки форм для данного элемента ввода. Этот атрибут является необходимым
3.	size=n	Для данного элемента указывается количество отображаемых символов
4.	value=строка	Задается исходное значение данного элемента
тег OPTION – начальный и конечный теги, с помощью которых определяется меню внутри элемента <select> в <form>
1.	selected	Элемент отображается как выбранный по умолчанию
2.	value=строка	Возвратить указанное значение в приложение обработки форм вместо содержимого <option>
тег SELECT – начальный и конечный теги, которые позволяют в <form> определить меню с несколькими вариантами выбора или список прокрутки с включением одного или более тегов <option>
1.	multiple	Пользователю разрешается выбирать в <select> более одного <option>
2.	name=строка	Определить текст, который будет передаваться в приложение обработки форм при выборе соответствующего значения <option>. Этот атрибут является необходимым
3.	size=n	Отображение элементов меню будет организовано в виде ниспадающего меню, если size=1 (без указания атрибута multiple). В противном случае будет использоваться список прокрутки, включающий n элементов

№	Атрибут	Функция
тег TEXTAREA – начальный и конечный теги многострочной области ввода текста в форме. Содержимое тега <textarea> принимается как исходное значение по умолчанию
1.	cols=n	Задается отображение в текстовой области n столбцов текста
2.	name=строка	Задается имя для значения текстовой области, которое передается в приложение обработки форм. Этот атрибут является необходимым
3.	rows=n	Задается отображение в текстовой области n строк текста
4.	wrap=стиль	Установить режим автоматического распределения текста в ячейке. Возможные значения: off (выключен), virtual (распределять текст по всей ячейке, но на сервер передавать как одну строку), physical (распределять текст по всей ячейке и передавать на сервер так, как он отображается)

1. Подготовьте электронную версию документа в текстовом редакторе, сохраните его под именем form1.htm:

<НТМL>

<HEAD>

<TITLE>Пример заполняемой формы</TITLE>

</HEAD>

<BODY>

<НЗ>Заполняемая форма</НЗ>

<BR>

<Н4>Текст</Н4>

<INPUT TYPE="text" NAME="name" SIZE="25"> Пожалуйста,

напишите свое имя:

<BR>

<Н4>Кнопки (выбор ответов)</Н4>

<H3><IMG SRС="Image2.gif" АLT="-">Почему вам нравится

работать в сети Интернет?</Н3>

<INPUT TYPE="radio" NAME="choice 1"

VALUE="information">Много интересной информации

<BR>

<INPUT TYPE="radio" NAME="choice 1" VALUE="pictures">Mнoro

картинок, аудио и видео информации

<BR>

<INPUT TYPE="radio" NAME="choice 1"

VALUE="communication">Общение с людьми

<BR>

<INPUT TYPE="radio" NAME="choice 1" VALUE="free time">Cnoco6

проведения досуга

<BR>

<INPUT TYPE="radio" NAME="choice 1" VALUE="others">Другое

<BR>

<H3><IMG SRC="Image2.gif" АLT="-">вы используете в своей

работе продукты Microsoft?</H3>

<INPUT TYPE="checkbox" NAME="choice 2" VALUE="Win95">Да

<INPUT TYPE="checkbox" NAME="choice 2" VALUE="Win95">Нет

<BR>

<Н2>Выбор ответов?</Н2>

<H4><IMG SRC="Image2.gif" ALT="-">Kaк вы оцениваете

содержание информации, предоставляемой в Интернет?</Н4>

<OPTION VALUE="1" SELECTED>Отлично

<OPTION VALUE="2">Хорошо

<OPTION VALUE="3">Средне

<OPTION VALUE ="4">Ниже среднего

<OPTION VALUE="5">Плохо

</SELECT>

<BR>

<Н2>Текст</Н2>

<H4><IMG SRC="Image2.gif" ALT="-">Ваши комментарии,

пожалуйста.</Н4>

<TEXTAREA NAME="Comment" Rows=6

COLS=60></TEXTAREA><BR>

<BR>

<Н2>Послать информацию или отказаться</Н2>

</FORM>

</BODY>

</HTML>

Задание 21. Бегущие строки

1. Используя примеры, приведенные в табл. 11, и данные из табл. 10 вставьте в свой HTML-документ бегущую строку. Сделайте так, чтобы ее тон сочетался с тоном вашего документа или был контрастным. Надпись должна “пробежать” от левого края документа к правому пять раз. Затем задайте различные варианты цикличности движения строки, выберите наиболее оптимальное для вашей страницы. Вариант HTML-документа с бегущей строкой сохраните в виде файла с именем str.htm.

Таблица 10 – Теги для создания бегущей строки

тег MARQUEE – начальный и конечный теги для создания бегущей строки ( IE 2 и выше)

№	Атрибут	Функция
1.	align=позиция	Задается размещение бегущей строки по вертикали относительно текста, в котором она расположена: вверху (top), посередине ( middle ) или внизу ( bottom )
2.	behavior=стиль	Стиль бегущей строки определяется как scroll , slide или alternate
3.	bgcolor=цвет	Установка цвета фона бегущей строки
4.	direction=направление	Задается направление прокрутки текста: влево ( left ) или вправо ( right )
5.	height=значение	Задается высота (в пикселях) зоны бегущей строки
6.	hspace= значение	Задается размещение слева и справа от бегущей строки областей свободного пространства заданной ширины (в пикселях)
7.	loop=значение	Установка числа повторов анимации бегущей строки; значение может быть целым или infinite
8.	scrollamount=значение	Задается размер (в пикселях) области смещения текста при каждой операции прокрутки
9.	scrolldelay= значение	Указывается задержка (в миллисекундах) между последовательными смещениями текста бегущей строки
10.	vspase= значение	Задается размещение над бегущей строкой и под ней областей свободного пространства заданной высоты (в пикселях)
11.	width=значение	Задается ширина зоны бегущей строки (в пикселях)

Таблица 11 – Примеры организации бегущей строки

№	Пример	Описание результата
1.	<MARQUEE>TEKCT </MARQUEE>	Вставленная между флагами фраза появится из-за правого края программы просмотра и, пройдя через всю страницу, скроется за левым краем
2.	<MARQUEE DIRECTION=left> ТЕКСТ</MARQUEE> <MARQUEE DIRECTION=right> ТЕКСТ</MARQUEE>	Задание движения бегущей строки справа налево и наоборот
3.	<MARQUEE LOOP=n BEHAVIOR=scroll> ТЕКСТ</MARQUEE>	Scroll задает бесконечный цикл, ограничить число циклов до n возможно с помощью loop
4.	<MARQUEE </MARQUEE>	Определяется ширина участка, занимаемого бегущей строкой
5.	<MARQUEE scrollamount=n>ТЕКСТ </MARQUEE>	Определяет количество пикселей, которое должен пройти текст, чтобы снова прорисоваться на экране
6.	<FONTSIZE=n> <MARQUEE>ТЕКСТ </MARQUEE></FONT>	Определение величины шрифта бегущей строки
7.	<MARQUEE bgcolor=n> ТЕКСТ</MARQUEE>	Определение фона бегущей строки

Упражнение 5. Итоговое задание

1. Разработайте Web-страницы, рассказывающие о вашей группе. На головной странице поместите рассказ о группе, кураторе. Рассказы о каждом студенте вашей группы разместите на отдельных Web-страницах. Укажите ссылки на страницы одногрупников с головной страницы. Не забудьте установить ссылки возврата с Web-страниц одногрупников на головную страницу.

Дата добавления: 2021-03-18; просмотров: 199; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 2 3 4 5 678 Следующая ⇒

Мы поможем в написании ваших работ!