Гиперссылки на Web-страницах
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.
Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, создать заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет содержать следующий НТМL-код:
<HTML>
<НЕАD>
<ТIТLЕ>Заголовок страницы</ТITLЕ>
</НЕАD>
<ВODY>
</ВОDУ>
</НТМL>
6. Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранитьих в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htmт в каталоге сайта.
Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки — это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.
Адресная часть гиперссылки представляет собой URL-адрес документа, на который указывает ссылка. URL-адрес может быть абсолютным и относительным. Абсолютный URL-адрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ.
Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь к файлу и имя файла, например:
С: /Web-сайт/filename.htm
Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например:
http: //www.host. гu/Web-сайт/filename.htm
Относительный URL-адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками. Это позволит не изменять адресную часть ссылок при перемещении Web-сайта в другой каталог локального компьютера или при его публикации в Интернете.
Прежде всего необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, поэтому разместим их под введенным текстом в новом абзаце в одну строку разделенными несколькими пробелами. Такое размещение гиперссылок часто называют панелью навигации.
Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ):
<Р АLIGH= "сеnter">
[Программы]   [Словарь]  
[Комплектующие]   [Анкета]
</Р>
Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки <А></А> с атрибутом НREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки:
<А НREF="URL">Указатель гиперссылки</А>
7. Вставить в титульную страницу код, создающий панель навигации:
<Р АLIGN="сепter">
[<А НREF="software.htm">Программы</А>]  
[<А НREF="glossary.htm">Словарь</А>]  
[<А НREF="hardware.htm">Комплектующие</А>]  
[<А НREF="anketa.htm">Анкета</А>]  
</Р>
Панель навигации на титульной странице создана, теперь активизация указателей гиперссылок будет приводить к переходу на другие страницы сайта.
Полезно на титульной странице сайта создать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки НREF присвоить URL-адрес электронной почты и вставить ее в контейнер <АDDRESS></АDDRESS>, который задает стиль абзаца, принятый для указания адреса.
8. Вставить в титульную страницу код, создающий ссылку на адрес электронной почты:
<АDDRESS>
<А НREF="mailto:mailbox@ргоvaider. гu">Е-mail:
mailbox@ ргоvaider. гu </А>
</АDDRESS>
По щелчку мыши по ссылке на адрес электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке «Кому» будет указан заданный в ссылке адрес.
9. Созданная титульная страница Web-сайта «Компьютер»тер» содержит заголовок, изображение компьютера, текст, панель навигации и ссылку на адрес электронной почты.
Практическое задание
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
• нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
• маркированные списки (в НТМL их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров);
• списки определений позволяют составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
На странице «Программы» разместим' информациюобосновных типах программного обеспечения компьютера в форме вложенного списка.
Сначала создадим главный нумерованный список основных категорий программного обеспечения. Список располагается внутри контейнера <ОL></ОL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута ТУРЕ тэга <ОL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и др.
9. Открыть в Блокноте файлsoftware.htm,ввести заголовок «Программное обеспечение»и добавить следующий НТМL-код, задающий список:
<OL>
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования
</ОL>
Создадим теперь вложенный ненумерованный список для одного из элементов основного списка. Список располагается внутри контейнера <UL>/<UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута ТУРЕ тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "с1гс1е" (окружность).
10. Добавить НТМL-код, задающий вложенный список для элемента
<LI> Прикладные программы:
<UL>
<LI ТУРЕ=" square ">
текстовые редакторы;
<LI> графические
редакторы;
<LI> электронные таблицы;
<LI> системы управления
базами данных.
</UL>
Страницу «Словарь» мы представим в виде словаря компьютерных терминов.
Для этого используем контейнер списка определений </DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DТ>, и определения, которое следует за тэгом <DD>.
11. Открыть в Блокноте файл glossary.HTM, ввести заголовок «Компьютерные термины» и добавить следующий НТМL-код, задающий список определений:
<DL>
<DT>Процессор
<DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DT>Оперативная память
<DD>Устройство, в котором хранятся программы и
данные.
</DL>
Практическое задание
Разместить на Web-странице вложенный список, содержащий разные типы списков.
Формы на Web-страницах
Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам сайта, на его страницах размещают формы. Формы включают в себя управляющие элементы различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и так далее.
Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер <FORM>/<FORM>. В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.
Текстовые поля. Для получения этих данных разместим на форме два однострочных текстовых поля для ввода информации. Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута ТУРЕ="text". Атрибут NАМЕ является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <ВR>.
12. Открыть в Блокноте файл аnketa.htm и добавить НТМL-код, создающий текстовые поля для ввода данных. Просмотреть страницу в браузере:
<FORM>
Пожалуйста, введите ваше
имя: <ВR>
<INPUT TYPE="text"
NAME="name" SIZE=30> <ВR>
Е-mail: <ВR>
<INPUT TYPE="text"
NAME="е-mail" SIZE=30>
<BR>
</FORM>
Переключатели. Далее, мы хотим выяснить, к какой группе пользователей относит себя посетитель. Предложим выбрать ему один из нескольких вариантов: учащийся, студент, учитель.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга <INPUT> со значением атрибута ТУРЕ="гаdio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NАМЕ="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "schoolboy", "student" и "teacher". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу.
Атрибут снескеD, который задает выбор кнопки по умолчанию, в данном случае не используется.
13. Добавить НТМL-код, создающий группу переключателей для выбора одного варианта. Просмотреть страницу в браузере:
Укажите, к какой группе пользователей вы себя
относите: <ВR>
<INPUT TYPE=" гаdio"
NАМЕ=" group" VALUE=
" schoolboy ">учащийся<ВR>
<INPUT TYPE=" гаdio"
NАМЕ=" group" VALUE=
" student" >студент<ВR>
<INPUT TYPE=" гаdio"
NАМЕ=" group" VALUE=
" teacher">учитель<ВR>
Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге <INPUT> со значением атрибута ТУРЕ="сheckbox".
Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NАМЕ. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "www", "е-mail" и "ftp". Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно они передаются серверу.
Атрибут СНЕСКЕD, который задает выбор кнопки по умолчанию, в данном случае не используется.
14. Добавить НТМL-код, создающий флажки для выбора нескольких вариантов. Просмотреть страницу в браузере:
Какие из сервисов Интернета вы
используете наиболее часто:
<ВR>
<INPUT TYPE="сheckbox"
NАМЕ=" group" VALUE="www">
WWW<ВR>
<INPUT TYPE="сheckbox"
NАМЕ=" group" VALUE="e-mail">
e-mail <ВR>
<INPUT TYPE="сheckbox"
NАМЕ=" group" VALUE="ftp">
FTP<ВR>
Поля списков. Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Для реализации такого списка используется контейнер <SELECT></SELЕСТ>, в котором каждый элемент списка определяется тэгом <ОРТION>. Выбираемый по умолчанию элемент задается с помощью атрибута SELECTED.
15. Добавить НТМL-код, создающий раскрывающийся список для выбора одного варианта. Просмотреть страницу в браузере:
<SELECT NAME="browsers">
<ОРТIОN SELECTED> Internet
Ехр1огег
Internet Ехр1огег
<ОРТIОN> Netscape Navigator
<ОРТIОN> Орега
<ОРТIОN> Neo Planet
</SELECT>
Текстовая область. В заключение поинтересуемся, что хотел бы видеть посетитель на наших страницах, какую информацию следовало бы в них добавить. Так как мы не можем знать заранее, насколько обширным будет ответ читателя, отведем для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно подробный текст.
Создается такая область с помощью тэга <ТЕХТАRЕА> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и СОLS — число столбцов области.
16. Добавить НТМL-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере:
Какую еще информацию вы хотели
бы видеть на нашемсайте?
<BR>
<ТЕХТАRЕА NАМЕ="геsume"
ROWS=4 СОLS=30>
</ТЕХТАRЕА
<BR>
Отправка данных из формы. Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок. Кнопки создаются с помощью тэга <INPUT> . Для создания кнопки, которая отправляет информацию, атрибуту ТУРЕ необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, — значение "Отправить".
Для создания кнопки, которая производиточистку формы, атрибуту ТУРЕ необходимо присвоитьзначение "геset", а атрибуту VALUE— значение "Очистить".
17. Добавить НТМL-код, создающий кнопки, просмотреть страницу в браузере:
<INPUT ТУРЕ="submit"
VALUE="Отправить">
<INPUT ТУРЕ="геset"
VALUE="Очистить">
Заполненная форма отправляется на сервер, где обрабатывается специальной программой СGI-скриптом, или по электронной почте автору сайта, где он уже самостоятельно обрабатывает полученные данные.
Для того чтобы при щелчке по кнопке «Отправить» данные из формы передавались на сервер и там обрабатывались, необходимо указать, куда их отправить и какая программа будет их обрабатывать. Эти параметры задаются с помощью атрибута астION контейнера <FORM>.
<FORM ACTION="URL"></FORM>
Атрибут АСТION определяет URL-адрес программы, расположенной на Web-сервере, которая обрабатывает полученные данные из формы. Пусть программой, которая заносит данные из формы в базу данных, будет программа Ьd.ехе. Обычно такие программы хранятся в каталоге cgi-bin. Тогда атрибут АСТION будет выглядеть следующим образом:
АСТION="http: /www.mycompany.гu/сgi-bin/Ьd.ехе"
Практическое задание
Разместите на своем сайте анкету для посетителей, использующую все известные вам элементы форм.