Тогда страничка с рисунками будет выглядеть как на рис.3.3.

Согласитесь, что не очень-то приятно увидеть на месте рисунка непонятное белое пятно.



Чтобы избежать таких накладок, используют альтернативный текст, который выводится на том месте, где должен находиться «пропавший» рисунок. Цель альтернативного текста - объяснить, что изображено на рисунке.

Для добавления к рисунку альтернативного текста нужно использовать дополнительный параметр alt тега <img>. Например,

<IMG src=”bird.jpg” alt=”Цапля”>

Тогда страничка будет выглядеть как на рис. 3.4.

Упражнение 3.5.

Придумайте для своего рисунка альтернативный текст.

Совет будущему HTML-редактору. Альтернативный текст полезен также тем, что он используется поисковыми системами при поиске картинок в сети Internet. Поэтому, если Вы хотите, чтобы Вашу страничку нашли даже по картинке, используйте альтернативный текст.

Тэг <HR>

С помощью тэга <HR> можно изобразить горизонтальную линию.

Тэг <HR> имеет ряд параметров, с помощью которых можно задать внешний вид линии:

· width - задает длину линии (измеряется в процентах от ширины окна браузера или пикселях);

· size - задает толщину линии (измеряется в пикселях);

· align - задает горизонтальное положение линии относительно окна браузера. Может принимать значения:

- right - размещение относительного правого края окна браузера;

- left - размещение относительно правого края окна браузера;

- center - размещение по центру окна браузера.

· color - задает цвет линии.

Упражнение 3.6.

В конце HTML-документа picture.html разместите красную линию, толщиной 3 пикселя, длиной в 50% ширины окна браузера, размещенную по центру окна (рис.3.5).

Для этого:

· Откройте код HTML-документа picture.html.

· В конце тела страницы напишите тэг <HR> c нужными параметрами:

<HR color=red size=3 width=50% align=center>

· Загрузите страницу в окне браузера и посмотрите результат.

Задание 3.2.

Дополните оформление документа несколькими линиями различной толщины и длины (рис. 3.6)

Вопросы для повторения

1. Рисунки каких форматов способны отображать браузеры?

Какой обязательный параметр должен иметь тэг <IMG>? За что он отвечает?

Какие параметры относятся к необязательным?

Что следует учитывать при использовании рисунков на web-страничке?

Контрольные задания

1. Создайте HTML-документ согласно образцу:

Примечания по выполнению. Для создания буквицы используйте рисунок с соответствующим выравниванием. Не забудьте про альтернативный текст к каждому рисунку.

2. Создайте HTML-документ по образцу (рисунки выберите на Ваше усмотрение, измените их размеры, если это необходимо). У каждого рисунка задайте альтернативный текст.

Глава 4. Работа с таблицами

Существует два основных направления использования таблиц в HTML:

1. Отображение каких-либо данных в табличном виде.

В качестве данных таблицы может быть использовано все: параграфы, списки, заголовки, формы, рисунки и отформатированный текст.

2. Размещение всей информации на страничке внутри одной или нескольких таблиц.

Структуризация информации с помощью таблиц считается правилом хорошего тона в дизайне. Тексты, рисунки, ссылки размещаются в ячейках. Это значительно облегчает работу с позиционированием объектов относительно друг друга на странице.

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

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

Создание таблицы

Таблица описывается парными тэгами <table> и </table>:

<TABLE>

тэги описания структуры таблицы

</TABLE>

Тэг <table> имеет параметры, с помощью которых можно изменять внешний вид таблицы:

· border - задает ширину границы таблицы (если border=0, то таблица отображается без границы);

· bordercolor - задает цвет границы таблицы

· width - задает ширину всей таблицы (в пикселях или процентах от ширины окна просмотра);

· height - задает высоту всей таблицы (в пикселях или процентах от высоты окна просмотра)

· bgcolor - задает цвет фона таблицы;

· background - задает фоновый рисунок таблицы;

· align - расположение таблицы на странице (может принимать значения left, center, right)

· cellpadding - отступ текста от границ ячеек;

· cellspacing - отступ табличных объектов (ячейки, строки) друг от друга.

Структура таблицы

Кроме задания самой таблицы, нужно описать ее структуру.

При описании структуры таблицы используются 4 элемента, которые располагаются между тэгами <TABLE> и </TABLE>, - это название, строка, ячейки-заголовки и ячейки с данными.

Название является необязательным элементом и задается парными тэгами <CAPTION></CAPTION>

<CAPTION> Название таблицы </CAPTION>

У тега <caption> есть всего один параметр:

· align - задает положение названия таблицы относительно таблицы. Он может принимать значения:

- bottom - название таблицы будет расположено в центре под таблицей;

- left - название таблицы будет расположено над таблицей, слева;

- right - название таблицы будет расположено над таблицей, справа.

- top - название таблицы будет расположено над таблицей по центру (это значение задается по умолчанию).

Обязательный элемент Строка таблицы используется для формирования строк в таблице и задается парными тэгами <TR></TR>:

<TR>Cтрока таблицы</TR>

Тэг <TR> имеет 4 параметра:

· align - задает выравнивание внутри строки (возможные значения: left, right, center);

· valign - задает вертикальное выравнивание внутри строки (возможные значения: top, bottom, middle);

· bgcolor - задает цвет фона внутри строки;

· background - задает фоновый рисунок строки.

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

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

Ячейка-заголовок задается парными тэгами <TH></TH>:

<TH>Заголовок столбца таблицы</TH>

Обязательный элемент Ячейка таблицы служит для хранения данных таблицы и задается парными тэгами <TD></TD>:

<TD>Ячейка с данными </TD>

Тэги <TH> и <TD> имеют несколько параметров:

· align - задает выравнивание внутри ячейки (left, right, center);

· valign - задает вертикальное выравнивание внутри ячейки (top, bottom, middle);

· colspan - растягивание ячейки на несколько столбцов;

· rowspan - растягивание ячейки-заголовка на несколько строк;

· height - задает высоту ячейки (в пикселях либо в процентах от высоты таблицы);

· width - ширина ячейки (в пикселях либо в процентах от ширины таблицы),

· bgcolor - задает цвет фона ячейки;

· background - задает фоновый рисунок ячейки;

· nowrap - наличие или отсутствие этого параметра обозначает запрет или разрешение на перенос строк внутри ячейки.

Упражнение 4.1.

Создайте HTML-документ tables.html с названием странички «Работа с таблицами в HTML». Поместите в этот документ простейшую таблицу, имеющую название «Пример простой таблицы» и состоящую из 3-х столбцов с заголовками и 3-х строк (для наглядности можно использовать в коде отступы):

<TABLE border=1>

<CAPTION>Пример простой таблицы</CAPTION>

<TR>

<TH>Заголовок1</TH>

<TH>Заголовок 2</TH>

<TH>Заголовок 3</TH>

</TR>

<TR>

<TD>ячейка A</TD>

<TD>ячейка В</TD>

<TD>ячейка С</TD>

</TR>

<TR>

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

<TD>ячейка E</TD>

<TD>ячейка F</TD>

</TR>

<TR>

<TD>ячейка G</TD>

<TD>ячейка H</TD>

<TD>ячейка J</TD>

</TR>

</TABLE>

и посмотрите ее в браузере (рис. 4.1)

Задание 4.1

Измените внешний вид таблицы, созданной в упражнении 4.1:

· используя тэг <FONT> отформатируйте текст названия таблицы: курсивное начертание, красный цвет текста

· измените положение названия таблицы - над таблицей справа;

· используя параметр bgcolor задайте цвета ячеек, пусть все ячейки будут различного цвета;

· используя тэг <FONT>, задайте различные цвета шрифта в ячейках таблицы.

Параметры rowspan, colspan

Для объединения группы ячеек в таблице используются специальные параметры: rowspan («растягивает» ячейку таблицы на указанное количество строк) и colspan (растягивает ячейку таблицы на указанное количество столбцов)

Параметр rowspan строк. Параметр colspan растягивает ячейку

Упражнение 4.2.

Приведите таблицу, созданную в упражнении 4.1:

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка A	Ячейка B	Ячейка C
Ячейка D	Ячейка E	Ячейка F
Ячейка G	Ячейка H	Ячейка J

К виду:

Заголовок 1	Заголовок 2	Заголовок 3
Объединенные ячейки A, D, G	Ячейка B	Ячейка C
	Ячейка E	Ячейка F
	Ячейка H	Ячейка J

Для этого:

· Нам нужно «растянуть ячейку A на три строки.

· Откройте код таблицы.

· При описании таблицы у тэга, описывающего ячейку A, укажите параметр rowspan=3 (то есть «растянуть на 3 строки»):

<TD rowspan=3>Объединенные ячейки A, D, G</TD>.

· Растянув таким образом ячейку А, мы уже не нуждаемся в ячейках D и G - убираем описание этих ячеек.

· HTML-код будет выглядеть так (изменения выделены жирным шрифтом):

<TABLE border=1>

<CAPTION>Пример простой таблицы</CAPTION>

<TR>

<TH>Заголовок1</TH>

<TH>Заголовок 2</TH>

<TH>Заголовок 3</TH>

</TR>

<TR>

<TD rowspan=3>Объединенные ячейки A, D, G</TD>

<TD>ячейка В</TD>

<TD>ячейка С</TD>

</TR>

<TR>

<TD>ячейка E</TD>

<TD>ячейка F</TD>

</TR>

<TR>

<TD>ячейка H</TD>

<TD>ячейка J</TD>

</TR>

</TABLE>

· Посмотрите страничку в окне браузера.

Задание 4.2

Используя параметр colspan приведите таблицу в HTML-документе tables.html:

Заголовок 1	Заголовок 2	Заголовок 3
Объединенные ячейки A, D, G	Ячейка B	Ячейка C
	Ячейка E	Ячейка F
	Ячейка H	Ячейка J

К виду:

Объединенные ячейки A, D, G	Ячейка B	Ячейка C
	Объединенные ячейки E и F
	Ячейка H	Ячейка J

Границы (бордюры) таблицы.

Мы уже упомянули параметры border и bordercolor тэга <table>.

Параметр border устанавливает ширину бордюра (рамки) таблицы и может принимать любое значение от 0 до 10. Ширина бордюра=0 означает его отсутствие. Если значение параметра border опускается, то border=0.

Параметр bordercolor задает цвет границы таблицы.

Упражнение 4.3

Создайте HTML-документ pic.html и поместите в него рисунок, окруженный красной рамкой.

Для этого:

· Так как у тэга <IMG> нет параметра, задающего цвет границы, то поместим рисунок в таблицу с одной единственной ячейкой и зададим красный цвет границы таблицы.

Задание 4.3

У таблицы в HTML-документе tables.html задайте малиновый цвет границы толщиной 3 пикселя.

Параметр width, height

Когда Вы создаете таблицу, то ширина столбца оказывается равной самому широкому элементу этого столбца. При желании можно установить для столбца точную ширину. Вот здесь и пригодится параметр width. При работе с высотой используется оператор height.

Упражнение 4.4

Создайте HTML-документ table_sizes.html со следующей таблицей:

Таблица в 50% ширины от экрана. Первый столбец в 80% ширины таблицы	Ячейка 2
Ячейка 3	Ячейка 4

Для этого:

· У тэга <TABLE> укажите параметр width=50%:

<TABLE border=1 width=50%>

· У тэга <TD> первой ячейки нужного столбца укажите параметр width=80%:

<TD width=80%>

· Посмотрите страничку в окне браузера.

Задание 4.4

Измените таблицу, созданную в упражнении 4.4: задайте ширину первого столбца 30 %, высоту таблицы 50% от экрана. Внесите в ячейки соответствующий текст.

Вертикальное и горизонтальное выравнивание внутри ячейки

Для задания выравнивания элементов внутри ячейки у тэга <TH> или <TD> используются параметры align - для задания горизонтального выравнивания внутри ячейки (возможные значения left, right, center) и valign - для задания вертикального выравнивания внутри ячейки (возможные значения top, bottom, middle);

Упражнение 4.5

В HTML-документе tables_sizes.html, созданном в упражнении 4.4, в ячейках таблицы установите вертикальное выравнивание по середине и горизонтальное - по центру.

Для этого:

· У каждого тега ячейки <TD> укажите параметры valign=middle и align=center:

<TD valign=middle align=center>

hypertext документ гипертекстовый фрейм

Вопросы для повторения

1. Как можно использовать таблицы в HTML (два направления)?

Назовите основные элементы в структуре таблицы? Какие элементы являются обязательными и необязательными?

Перечислите параметры, которые применяются при объединении нескольких ячеек? Приведите примеры.

Контрольные задания

1. Создайте HTML-документ с таблицей по образцу:

Создайте HTML-документ по образцу:

Примечание по выполнению. Картинки и подписи к картинкам размещены в разных ячейках с различным выравниванием.

Глава 5. Гиперссылки

Часть текста, название, участок изображения и пр. могут иметь ссылки на другой текст внутри этого же документа или на другой документ в сети Интернет. Такие ссылки называются гипертекстовыми или гиперсвязью. Существуют ссылки текстовые и графические (когда ссылкой является рисунок). По умолчанию, текстовая ссылка выделяется синим цветом и подчеркиванием, а графическая - синей рамкой.

Но цвет ссылок на страничке можно устанавливать и самим через специальные параметры тега <body>:

· link - цвет ссылки, еще не посещенной;

· alink - цвет активной ссылки;

· vlink - цвет ссылки, уже посещенной;

Например,

<BODY link=”blue” alink=”green” vlink=”red”>

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

Создание гиперссылки

Для добавления гиперссылки в HTML-документ используют парные теги <a> и </a>:

<A href=”путь к документу”>текст ссылки (или рисунок)</A>

Обязательный параметр href тэга <A>определяет адрес документа, на который будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тегами. Адресом может быть либо локальный документ, либо страничка в сети Интернет.

Помимо href тэг <А> имеет ряд других, необязательных, параметров:

· title - текст подсказки, которая всплывает при наведении на ссылку;

· target - наличие или отсутствие этого параметра определяет, как открыть документ, на который ведет ссылка;

· name - используется при задании ссылки внутри текущего документа (метки Более подробно о метках речь пойдет далее.).

Упражнение 5.1

Создание текстовой ссылки.

Создайте HTML-документ links.html с заголовком странички «Ссылки в HTML_документе» с текстом «Я учусь в ВятГГУ». Название университета оформите ссылкой, ведущей на сайт www.vspu.kirov.ru.

Для этого:

· Название университета заключите между тэгами <A> и </A>. В параметре href тэга <A> укажите полный адрес сайта:

<A href=”http://www.vspu.kirov.ru/”>ВятГГУ</A>

· Проверьте работу ссылки: ссылка окрашена в синий цвет и подчеркнута. При наведении курсора мыши на ссылку, он меняется, а в строке состояния отображается адрес ссылки (рис.5.1).

Упражнение 5.2

У HTML-документа links.html, созданного в упражнении 5.1, задайте следующие настройки ссылок: текст непосещенных ссылок окрашивается синим цветом, текст активных ссылок - зеленым, посещенных - красным.

Для этого:

· Откройте код странички links.html.

· У тэга <BODY> задайте нужные значения соответствующих параметров:

<BODY link=”blue” alink=”green” vlink=”red”>

· Проверьте настройки ссылок:

· Кликнув по ссылке, Вы автоматически перейдете на документ, на который вела эта ссылка. Заметьте, что в момент активизации ссылки (то есть в момент клика) ссылка меняла цвет на зеленый.

· Вернитесь на исходный документ, нажав кнопку «Назад» на панели инструментов окна браузера (или просто нажмите клавишу «BackSpace»). Ссылка все еще остается активной - следовательно зеленой.

· Теперь щелкните по любому месту в Вашем HTML-документе: ссылке присваивается статус посещенной - ссылка станет красной.

Задание 5.1

Добавьте у ссылки, созданной в упражнении 5.1, подсказку «перейти на сайт ВятГГУ». Проверьте результат в окне браузера: при наведении на ссылку должна появляться подсказка.

Упражнение 5.3

Создание графической ссылки.

Добавьте в HTML-документ links.html графическую ссылку, ведущую на сайт www.afisha.kirov.ru (рис. 5.2).

Для этого:

· В любом графическом редакторе (например, «Paint») создайте рисунок

· Cоздайте ссылку на сайт www.afisha.kirov.ru, но вместо текста ссылки поместите созданный рисунок Подробнее о вставке рисунка читайте в главе 3 «Графика в HTML»:

<A href=”http://www.afisha.kirov.ru/”>

<IMG src=”afisha.jpg” alt=”перейти на сайт Афиша.Киров.RU”>

</A>

· Рядом с ссылкой разместите комментирующий текст.

· Загрузите страничку в окне браузера.

Задание 5.2

Уберите ссылочную рамку вокруг рисунка.

Примечание. Используйте параметр border у тэга <IMG>.

Упражнение 5.4

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

В HTML-документе links.html создайте ссылку, ведущую на страничку с картинкой.

Для этого

· Создайте html-документ picture.html с картинкой с текстом «Вы попали на страничку с картинкой!».

· В HTML-документ links.html добавьте ссылку на эту страничку:

Щелкнув <A href=”picture.html”>здесь</a> мышью, Вы можете попасть на файл с картинкой!

· Откройте этот документ в браузере и проверьте работу ссылки.

Задание 5.3

Усовершенствуйте переход между страничками, созданный в упражнении 5.4, - на страничке с картинкой добавьте ссылку «Назад», по которой можно вернуться на исходный HTML-документ.

Параметр target

Когда пользователь щелкает по ссылке, документ открывается в текущем окне. Иногда удобнее открывать ссылочный документ в отдельном окне. Это можно осуществить, щелкнув по ссылке правой кнопкой мыши и в контекстном меню выбрать команду Открыть в новом окне (рис.5.3).

Можно настроить открытие документа в новом окне средствами HTML. Для этого нужно параметру target присвоить значение «_blank». Например,

<A href="http://www.vspu.kirov.ru" target="_blank">ВятГГУ</A>

Параметр target может иметь еще следующие значения:

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

- _parent - используйтесь при работе с фреймамиО фреймах будет рассказано в следующей главе.: документ будет загружаться во фрейм-родитель, если фреймов нет, то этот параметр работает как _self;

- _top - используйтеся при работе с фреймами: документ загружается в полном окне без фреймов, если фреймов нет, то этот параметр работает как _self.

Метки.

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

Место, в которое пользователь будет перемещаться, щелкнув по ссылке, метиться тэгом <A> с параметром name:

<A name="имя метки">текст метки</A>

Имя метки может быть любое: числа и буквы.

Ссылка на метку оформляется следующим образом:

<A href="имя документа#имя метки">текст ссылки</A>

Примечание. Если ссылка ведет на место в этом же HTML-документе, то имя документа в параметре href можно не указывать.

Пользователь, кликнув на текст ссылки, попадает в то место странички, где расположен текст метки.

Упражнение 5.5

Создайте ссылку внутри HTML-документа links.html, щелкнув по которой пользователь перемещается в конец документа.

Для этого:

· Откройте код странички links.html.

· В конце тела странички создайте метку с именем finish:

<A name=”finish”>конец документа</A>

· В начале документа поместите ссылку с текстом «в конец документа», ведущей на метку с именем finish:

<A href=”links.html#finish”>в конец документа</A>

· Заметим, что имя документа links.html можно опустить, потому что метка находится в этом же документе.

· Проверьте работу ссылки, загрузив страничку в окне браузера.

Размещение адреса электронной почты

Так же, с web-странички можно отправлять письмо по электронной почте. Ссылка на электронный адрес оформляется с помощью тэга <A> с указанием в параметре href специального слова mailto:

Например:

Пишите письма на:

<А href=mailto:vasenina@mail.ru>vasenina@mail.ru</A>

Когда пользователь щелкнет по этой ссылке, на компьютере запускается почтовая программа и создается письмо с уже заполненным полем «Кому» (рис. 5.4).

Совет будущему HTML-редактору. Чтобы при создании письма автоматически заполнялась и тема письма, нужно в конец адреса ссылки добавить «?subject=» и указать тему письма. Например,

Все вопросы пишите на:

<A href=mailto:'inform@mail.ru?subject=”вопрос”'>inform@mail.ru</A>.

Упражнение 5.6

Поместите на свою страничку ссылку на свой адрес электронной почты. Если у Вас нет зарегистрированного адреса, то для выполнения упражнения придумайте его сами.

Формат адреса электронной почты:

имя_пользователя@адрес_почтового_сервера

Карта ссылок

В сети Интернет можно встретить рисунок, на котором в разных его частях размещены сразу несколько ссылок. Это осуществляется с помощью специального механизма Карта ссылок (map).

Этот механизм включает в себя сразу несколько тегов: <img> c атрибутом usemap, <map> с атрибутом name, <area> с атрибутами shape, coords, href и закрывающий тег </map>.

Перед вами пример меню на сайте www.shakers.kirov.ru, которое оформлено в виде карты:

<IMG border="0" src="menu.jpg" usemap="#menu" width="113" height="268">

<MAP name="menu">

<AREA shape="rect" alt="История" coords="15,18,98,48" href="history.html">

<AREA shape="rect" alt="Афиша" coords="6,44,90,74" href="afisha.html">

<AREA shape="rect" alt="Новости" coords="13,76,108,105" href="news.html">

<AREA shape="rect" alt="Фото" coords="10,105,94,135" href="photo.html">

<AREA shape="rect" alt="Гостевая" coords="12,173,102,200" href="guest.html">

<AREA shape="rect" alt="Контакты" coords="10,200,90,232" href="contacts.html">

</MAP>

Остановимся поподробнее на синтаксисе Карты.

Вначале нам нужно задать рисунок, который будет использоваться в качестве карты. (menu.jpg в нашем примере). Кроме того, рисунку нужно сообщить, карту с каким именем будут на него накладывать (usemap=”#menu”), имя указывается обязательно с символом #:

<IMG border="0" src="menu.jpg" usemap="#menu">

Затем начинаем описание самой карты ссылок:

1) задаем имя карте через атрибут name тега <MAP> (имя может быть любое):

<MAP name=”menu”>

2) используя тэг <AREA> (область) начинаем распределять места на рисунке под ссылки:

<AREA shape=”форма области” coоrds=”координаты области” href=”адрес ссылки” title=”подсказка”>

Тэг <AREA> имеет ряд параметров:

· shape - этот параметр задает форму активной области на карте, он может принимать значения:

- «rect» - прямоугольник,

- «circle» - круг,

- «poly» - многоугольник,

- «default» - задается область покрывающая незаданную часть рисунка (должна задаваться самой последней);

· coords - этот параметр задает координаты активной области на карте. Количество координат обусловлено параметром shape:

- shape="rect" coords=X1,Y1,X3,Y3 - задаются координаты верхнего левого и правого нижнего угла прямоугольника,

- shape="circle" coords=X,Y,R - где X,Y,R - координаты центра круга и его радиус,

- shape="poly" coords=X1,Y1,X2,Y2,X3,Y3... - задаются координаты вершин многоугольника,

- shape="default" - не требуется задания координат, определяет вообще все точки и должно располагаться последним в списке областей.

· href -этот параметр определяет адрес ссылки;

· alt - этот параметр задает альтернативный текст для каждой из активных областей изображения;

· title - этот параметр задает текст подсказки, которая всплывает при наведении курсора на данный элемент

Упражнение 5.7.

Создайте HTML-документ map.html. Создайте в этом документе меню из двух ссылок, ведущих на странички picture.html (страничка с картинкой) и table.html (страничка с таблицей). Если страничек нет, создайте их (не забудьте про названия и заголовки). Меню реализуйте с помощью карты.

Для создания карты:

· В любом графическом редакторе (например, «Paint») создайте рисунок, который будет служить меню на страничке. Например,

· Определите размер вашего рисунка. Например, высота=75 пикселей, ширина=80 пикселей;

· Определите области ссылок. Для нашего примера форма области - прямоугольник, для первой ссылки определяется верхняя половина рисунка, для второй - нижняя половина;

· Опишите карту в коде странички:

<IMG border="0" src="menu.jpg" usemap="#menu" width="80" height="75">

<MAP name="menu">

<AREA shape="rect" alt="Картинка" coords="0,0,80,37" href="picture.html">

<AREA shape="rect" alt="Таблица" coords="0,38,80,75" href="tables.html">

</MAP>

· Проверьте работу карты: перейдите по ссылкам на странички.

Вопросы для повторения

1. Что такое гиперссылка? Назовите два вида гиперссылок.

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

3. Что такое метка? Как ее задать?

4. Как задать ссылку на адрес электронной почты?

5. Какими способами можно открыть ссылку в новом окне?

6. Что такое карта ссылок?

Контрольные задания

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

Примечание. Яркий пример можно найти на личном сайте Ненашева М.И., профессора кафедры философии ВятГГУ (www.nenashev.kirov.ru), например, на странице www.nenashev.kirov.ru/monografies/02/index.shtml?pred

2. Создайте html-документ, содержащий ссылки на странички с картинкой, с таблицей, со списком. При наведении курсора мыши на ссылку должна всплывать подсказка. Отформатируйте странички: добавьте цвет фона, цвет текста, все странички оформите в едином стиле - одинаковый шрифт, одинаковый фон. Каждая страничка имеет свое название, заглавие и ссылку «назад», при нажатии на которую пользователь возвращается на главную страничку.

Глава 6. Фреймы

Фреймы (frame - структура, рамка) позволяют разбить окно браузера на несколько независимых окон, в каждом из которых будет отображаться один HTML-документ.

Использование фреймов позволяет размещать статическую информацию (например, главное меню сайта, графический логотип фирмы, copyright, набор управляющих кнопок) в одном фрейме, а изменяющуюся - в другом.

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

Фреймы имеют следующие возможности:

· Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов.

· Каждый фрейм может иметь собственное имя (параметр name), позволяющее обращаться к нему из другого фрейма.

· Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра).

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

Создание web-странички на основе фреймов

Создание web-странички на основе фреймов осуществляется в два этапа:

1. Создается html-файл (главный), в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.

2. Создаются отдельные html-документы, которые будут отображаться во фреймах.

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

Структура главного документа:

<HTML>

<HEAD>...</HEAD>

<FRAMESET>

<FRAME…>

<FRAME…>

…

</FRAMESET>

</HTML>

Между парными тэгами <FRAMESET> и </FRAMESET> создаётся фреймовая структура. Эти тэги используется вместо тэгов <BODY> и </BODY>.

Тег <frameset> имеет несколько параметров:

· rows - определяет количество фреймов в окне браузера по горизонтали и соотношение размеров этих фреймов;

· cols - определяет количество фреймов в окне браузера по вертикали и соотношение размеров этих фреймов;

Например,

<FRAMESET cols=”100,*”>

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

Предупреждение. Совместное использование параметров rows и cols может привести к непредсказуемым результатам. Например, код

<FRAMESET rows="50%,50%" cols="50%,50%">

может привести к ошибочной ситуации.

· frameborder - определяет наличие рамки, обрамляющей фреймы (принимает значения “yes” или “no”, по умолчанию frameborder=”yes”);

· border - задает толщину рамки, обрамляющей фреймы (этот параметр нужен в том случае, если параметр frameborder=”yes”, измеряется в пикселях);

· bordercolor - задает цвет рамки, обрамляющей фрейм.

С помощью тэга <FRAME> задаются атрибуты для каждого фрейма персонально.

Тэг <FRAME> имеет следующие параметры:

· src - обязательный параметр, задает путь к файлу, который отображается в данном фрейме;

· name - задает имя фрейма. Имя необходимо для того, чтобы в последствии можно было в этом же фрейме, отображать другие файлы (подробнее о нем написано ниже);

· scrolling - определяет наличие полосы прокрутки во фрейме (принимает значения «yes» или “no”, по умолчанию scrolling=”yes”)

· noresize - отсутствие или наличие этого параметра говорит о том, можно или нельзя изменять размеры фрейма;

· marginwidth, marginheight - задают отступ содержимого внутри фрейма по горизонтали и вертикали соответственно (измеряется в пикселях).

Файлы, которые отображаются во фреймах - это обыкновенные html_документы со стандартной структурой. Они могут содержать рисунки, таблицы, текст.

Упражнение 6.1

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

Для этого:

· Создайте файл главного документа - frames.html:

<HTML>

<HEAD><TITLE> Пример окна с фреймами </TITLE></HEAD>

<FRAMESET rows=“30%,40%,*”>

<FRAME name= “table” src= “table.html”>

<FRAME name=”picture” src= “picture.html”>

<FRAME name=“text” src= “text.html”>

</FRAMESET>

</HTML>

· Создайте файлы-фреймы table.html, pictures.html, text.html. Занесите в них соответствующую информацию.

Просмотрите файл главного документа в окне браузера (рис.6.1).

Задание 6.1

Измените расположение фреймов с горизонтального на вертикальный.

Упражнение 6.2

Удалите полосу прокрутки у первого фрейма (рис.6.2). Для этого у тэга <FRAME>, описывающего первый фрейм добавьте параметр scrolling=”no”.

Передвигая границы фреймов измените их размеры так, чтобы стала видна таблица полностью.

Задание 6.2

С помощью параметра noresize тэга <Frame> запретите возможность изменения размеров первого фрейма. Проверьте выполнение этого запрета - попробуйте передвинуть границу фрейма.

Задание 6.3

С помощью параметров bordercolor и border тэга <FrameSET> у границы между фреймами задайте синий цвет и толщину в 5 пикселей.

Задание 6.4

С помощью параметра frameborder тега <FRAMESET> удалите границы между фреймами (рис.6.3).

Задание 6.5

С помощью параметров marginwidth, marginheight тега <FRAME> в первом фрейме задайте горизонтальный отступ 30 пикселей, вертикальный - 50 пикселей.

Упражнение 6.3

Создайте страничку index.html, содержащую два фрейма, первый представляет собой меню и отображает содержимое файла menu.html, второй - отображает содержимое в зависимости от выбранной ссылки в меню (рис.6.4).

Для этого:

· Создайте главный документ index.html.

Проанализируем его структуру. Главный документ представляет собой два вертикальных фрейма: левый - для меню (пусть его ширина - 200 пикселей) и правый - для отображения выбранных в меню файлов.

· Следовательно, при описании тэга <FRAMESET> будем использовать параметр cols:

<FRAMESET cols=“200,*”>

· В левом фрейме будет отображаться содержимое файла menu.html:

<FRAME src=”menu.html”>

· Изначально, в правом фрейме будет отображаться страничка с приветствием:

<FRAME src= “greet.html”>

· Так как в правом фрейме содержимое будет изменяться в зависимости от выбранного пункта меню, присвоим ему имя (например, content) для дальнейшего обращения из фрейма-меню:

<FRAME name=”content” src= “greet.html”>

· В результате выполнения всех действий, структура главного HTML-документа будет выглядеть так:

<HTML>

<HEAD>

<TITLE> Использование фрейма в качестве меню</TITLE>

</HEAD>

<FRAMESET cols=“200,*”>

<FRAME src= “menu.html”>

<FRAME name=”content” src= “greet.html”>

</FRAMESET>

</HTML>

· Начинаем создавать файлы-фреймы.

· Пусть файл menu.html содержит три ссылки - «первый фрейм», «второй фрейм», «третий фрейм», которые ссылаются на соответствующие файлы - first.html, second.html, third.html. Но чтобы эти файлы отображались в нужном фрейме (а именно в правом), нужно в каждой ссылке указать имя этого фрейма (content) через параметр target:

<A href="first.html" target="content">первый фрейм</A>

· Тем самым, мы сообщаем браузеру, что файл first.html нужно отобразить во фрейме с именем «content» (это имя мы присвоили правому фрейму в главном документе). В тело меню добавьте заголовок «Меню».

· Создайте HTML-документ greet.html с заглавием «Приветствие», оформленным любым встроенным заголовком и текстом «Выберите пункт меню для перехода на соответствующую страничку».

· Создайте файлы first.html, second.html, third.html. В теле каждого файла вставьте заглавие «Первая (Вторая, Третья) страничка» и текст «Поздравляем! Вы попали на первую (вторую, третью) страничку!»

· Теперь откройте главный документ в браузере и проверьте работу меню. При выборе соответствующей ссылки в левом фрейме в правом должент отображается выбранный HTML-документ.

«Плавающий» фрейм (тег <IFRAME>)

На страничке можно использовать так называемые плавающие фреймы. Это фрейм, вставленный в тело HTML-документа в виде отдельного окна (рис. 6.5).

Этот тип фреймов хорош тем, что его можно вставить в любой HTML документ. Даже в тот, у которого тело представлено не в виде фреймовой структуры, а в виде обычного тела <BODY>.

«Плавающий» фрейм задается тэгом <IFRAME>. Например,

<IFRAME src=formating.html>

Тэг <IFRAME> имеет параметры, свойственные тэгу <FRAME> (src, frameborder, marginheight, marginwidth, name и scrolling) и параметры, свойственные тэгу <IMG> Подробнее о параметрах тэга <IMG> читайте в главе 3 «Графика в HTML» (align, width, height).

Упражнение 6.4

Создайте HTML-документ iframe.html с плавающим фреймом (см. рис. 6.5). Страничка плавающего фрейма должна содержать текст:

Пример.

В окне плавающего фрейма может находиться страница любого из миллионов сайтов мира. Нужно лишь в параметр src указать адрес этой странички.

Это может быть очень полезным, если Вы хотите показать посетителю какую-то страницу, не переходя на нее.

<NOFRAMES></NOFRAMES>

Данный тэг используется в случае, если браузер не поддерживает фреймы. Тэг <NOFRAMES></NOFRAMES> размещается после тэга <FRAMESET></FRAMSET>. Между тегами <NOFRAMES> и </NOFRAMES> можно коротко изложить содержание документа или перенаправить пользователя на альтернативный документ, не содержащий фреймов

Создание более сложной структуры фреймов

При создании более сложной структуры фреймов используется вложенность конструкций <FRAMESET></FRAMESET> одной в другую.

Вот несколько примеров создания фреймов более сложной структуры:

* 45% 55%	<FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="45%,55%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET> </FRAMESET>
* 15% 85%	<FRAMESET cols="*,55%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,*"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET> </FRAMESET>
50% 50% 50% 50%	<FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET> </FRAMESET>

Задание 6.6

Создайте файл с предложенной фреймовой структурой:

Первый Frame	Второй Frame	Третий Frame
	Четвёртый Frame

Фреймы должны содержать информацию разного характера (картинка, бегущая строка, списки и т.д.). У фреймов используйте рамки различных цветов и толщины, поля (отступы), полосы прокрутки.

Вопросы для повторения

1. Какая информация содержится в главном HTML-документе?

2. Какие тэги задают фрейм?

3. Что такое <IFRAME>?

4. Какие возможности дает использование фреймов?

5. Почему нежелательно использование фреймов в создании web-страничек?

Контрольное задание

Создайте страничку, рассказывающую, о том, чему вы уже научились на занятиях по HTML (см. рис. 6.6). Используйте горизонтальное расположение фреймов. Меню разместите в верхнем фрейме, к ссылкам используйте подсказки. В нижнем фрейме должен отображаться выбранный пункт меню: отформатированный текст, списки, бегущая строка, картинка, таблица, метки внутри документа.

Глава 7. Создание форм

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

После того как пользователь заполнит форму и нажмет кнопку, внесенные им данные посылаются на сервер и обрабатываются специальной программой CGI (Common Gateway Interface) или PHP (Personal Hypertext Processor). Таким образом, пользователь может интерактивно взаимодействовать с web-сервером через Интернет.

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

Создание формы.

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

Все формы создаются парными тэгами <FORM> и </FORM>, между которыми помещаются элементы формы:

<FORM method="get/post" action="URL программы">

Элементы формы

</FORM>

В параметре action указывается адрес (URL) программы, которая будет обрабатывать данные формы на сервере.

Параметр method определяет, каким путем данные будут посылаться на сервер:

· get: информация из формы добавляется в конец адреса, который был указан в параметре action. Опытные HTML-редакторы не рекомендуют использовать метод get.

· post: при использовании данного метода информация из формы пересылается не как часть адреса, а как содержимое запроса. Данный метод рекомендуется к использованию.

Примечание. Изучение программ обработки данных формы на сервере не входит в рамки данного курса. В примерах будут рассмотрены основы создания интерфейса для отправки данных - то есть структура и основные элементы форм. Поэтому параметры method и action тэга <FORM> при выполнении упражнений и заданий данной главы могут быть опущены.

Для задания элементов внутри формы используются тэги <INPUT>, <TEXTAREA> и <SELECT>.

Рассмотрим каждый из них подробнее.

Элемент <INPUT>

Тэг <INPUT> используется для ввода текстовой информации, пересылки файлов или управляющей информации.

Параметры тэга <INPUT>:

· name - имя поля. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, программа обработки сможет получить данные, помещенные пользователем в это поле;

· size - определяет визуальный размер поля ввода на экране в символах (по умолчанию size=20);

· maxlength - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер не позволяет ввести последующий символ. По умолчанию значение maxlength равно бесконечности;

· value - определяет начальное (по умолчанию) значение поля;

· type - определяет тип поля ввода. Может принимать значения:

- text - описывает однострочное поле ввода

.

Этот атрибут используется по умолчанию (см. пример в упражнении 7.1);

- password - отличается от атрибута text тем, что вводимое пользователем значение не отображается браузером на экране

;

- checkbox (флажок) - используется, когда необходимо ответить да или нет. В форме отображается в виде . Если в форме имеется несколько полей-флажков, то можно выбрать более одного поля. Каждое поле должно иметь свое имя (name) и значение (value). На сервере обрабатываются данные только у выбранных полей;

- radio - при использовании нескольких полей данного типа в одной форме пользователь может выбрать только одно поле. В форме отобраджается в виде . Поля должны иметь одинаковое имя (name), но разные значения (value). На сервер будет передано значение только выбранного поля;

- reset - данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. Атрибут value может содержать текст, который будет высвечен на кнопке;

- submit - данный тип обозначает кнопку, при нажатии которой на сервере будет вызвана управляющая программа, описанная в параметре формы action. Атрибут value может содержать текст, который будет высвечен на кнопке;

- image - данный тип обозначает кнопку submit в виде рисунка. Путь к картинке указывается через атрибут src, а синтаксис совпадает с тэгом <IMG>;

- file (файловое поле) - поле передачи файла на сервер.

Упражнение 7.1

Создайте html-документ simpleform.html. Разместите в нем простую форму, предлагающую пользователю ввести свои личные данные (рис. 7.1).

Для этого:

· С помощью тэгов <FORM>и </FORM> создадим саму форму.

· Для ввода информации будем использовать элементы <INPUT>, которые будут представлять собой текстовые поля (параметр type=text). В эти поля пользователь будет вносить свои данные, которые будут передаваться на сервер, как значения переменных с соответствующими именами (параметр name).

· В текстовом поле Индекс зададим ограничение на количество символов (параметр maxlength) и значение по умолчанию (параметр value):

<INPUT name="zip" size=6 maxlength=6 value=”999999”>

· В конце формы поместим кнопку, при нажатии на которую данные будут отсылаться на сервер (тэг <INPUT> с параметром type=submit).

<INPUT type=submit value=”Отправить данные”>

· В результате мы получим такую структуру формы:

<FORM>

<P>Пожалуйста, введите Ваши данные:</P>

<P>Имя <INPUT name="name" type=text size=35> <BR>

Фамилия <INPUT name="surname" type=text size=35> <BR>

Улица: <INPUT name="street" type= text size=35> <BR>

Город: <INPUT name="city" type= text name=20 maxlength=20> <BR>

Индекс: <INPUT name="zip" size=6 maxlength=6 value=”999999”> <BR>

<INPUT type=submit value=”Отправить данные”></P>

</FORM>

Задание 7.1

Выровняйте элементы формы, созданной в упражнении 7.1 путем размещения их в ячейках таблицы (рис. 7.2).

Упражнение 7.2

Создайте HTML-документ anketa1.html с формой-анкетой, предлагающей выбрать любимое блюдо (с возможностью выбора несколько пунктов):

Для этого:

· Для описания пунктов выбора используйте элемент <INPUT> с параметром type=checkbox (при просмотре в окне браузера рядом с пунктом появится квадратик):

…

<P>Выберите Ваше любимое блюдо:

<FORM>

<INPUT type="checkbox" name="food1" value="Салат Оливье">Салат Оливье<BR>

<INPUT type="checkbox" name="food2" value="Мясо по-испански"> Мясо по-испански<BR>

<INPUT type="checkbox" name="food3" value="Макароны по-флотски" checked>Макароны по-флотски<BR>

<INPUT type=submit value=”Отправить данные”>

</FORM>

…

· Посмотрите результат в окне браузера.

· Проанализируем работу формы: при нажатии на копку «Отправить данные» на сервер будут отосланы одна, две или три переменных (в зависимости от количества выбранных вариантов) с именами, хранящимися в параметре name (food1, food2, food3) и с соответствующими значениями, хранящимися в параметре value («Салат Оливье», «Мясо по-испански», «Макароны по-флотски»).

· Обратите внимание на то, что элемент "Макароны по-флотски" указан как заранее отмеченный.

Задание 7.2



Создайте html-документ anketa2.html с формой-анкетой, предлагающей выбрать самый любимый напиток с возможностью выбора только одного варианта (рис. 7.4).

Примечание. Проанализируйте тот факт, что на сервер нужно отправить только одно значение, следовательно, на сервер будет отсылаться одна и та же переменная (параметр name одинаковый у всех элементов), но с разными значениями (параметр value), в зависимости от выбранного пункта.

Упражнение 7.3

Создайте html-документ password.html, предлагающий ввести пароль (рис. 7.5).

Для этого:

· У элемента <INPUT> значение параметра задайте password.

· Загрузите форму в окне браузера. Введите в поле пароль - в поле отображаются не символы, а точки.

Упражнение 7.4

В HTML-документе simpleform.html, созданном в упражнении 7.1, в форму добавьте кнопку сброса значений полей формы.

Для этого:

· Добавьте новый элемент <INPUT> параметром type=reset:

<INPUT type=reset value=”Очистить поля”>

· Проверьте работы кнопки - при ее нажатии все поля очищаются или заполняются значением, заданным по молчанию.

Упражнение 7.5

...