Главная

Федеральное агентство по образованию

Государственное образовательное учреждение
высшего профессионального образования
«Санкт-Петербургский государственный

инженерно-экономический университет»

Кафедра вычислительных систем и программирования

УТВЕРЖДАЮ

Проректор

по учебной работе

д.э.н., профессор

____________О.В. Гончарук

«21» мая 2008 г.

Рег. № М 161

ЗАОЧНОЕ ОБУЧЕНИЕ

ПРОГРАММНЫЕ СРЕДСТВА

РАЗРАБОТКИ WEB-СТРАНИЦ

Методические указания к изучению дисциплины

и выполнению контрольной работы

для студентов заочной формы обучения

Специальность 080105 - Финансы и кредит

Санкт-Петербург

2008

Допущено

редакционно-издательским советом СПбГИЭУ

в качестве методического издания

Составитель

канд. физ.-мат. наук, доц. И.Н.Васильева

Рецензент

д-р техн. наук, проф. И.А. Брусакова

Подготовлено на кафедре

вычислительных систем и программирования

Одобрено научно-методическим советом

факультета предпринимательства и финансов

Отпечатано в авторской редакции с оригинал-макета,

представленного составителем

© СПбГИЭУ, 2008

СОДЕРЖАНИЕ

ОБЩИЕ ПОЛОЖЕНИЯ

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

Студент в ходе изучения дисциплины и выполнения контрольных заданий должен овладеть базовыми теоретическими знаниями в области создания web-страниц и практическими навыками использования специализированных инструментальных средств (редакторов HTML-кода или визуальных редакторов) для разработки многостраничного web-узла.

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

МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ИЗУЧЕНИЮ

ДИСЦИПЛИНЫ

При изучении дисциплины «Программные средства разработки web-страниц» студентам предлагается выполнить контрольную работу, которая позволит закрепить и проконтролировать знания и навыки компетентной ориентации в учебном материале. Учебной программой предусмотрено выполнения одной контрольной работы, состоящей из одного задания.

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

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

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

Задания контрольной работы выполняются средствами любого специализированного редактора создания web-страниц, например:

· редакторами HTML-кода: Macromedia HomeSite, Adobe Dreamweaver или др.,

· визуальными редакторами: MS FrontPage, MS Expression Web Designer или др.

В случае отсутствия специализированного редактора web-страниц допускается выполнение заданий контрольной работы с помощью стандартного редактора Windows Блокнот (для непосредственного редактирования тегов HTML), либо текстового редактора MS Word (для визуального редактирования web-страниц).

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

МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ВЫПОЛНЕНИЮ КОНТРОЛЬНОЙ РАБОТЫ

Задание контрольной работы предполагает самостоятельное освоение студентом теоретических тем согласно программе по дисциплине «Программные средства разработки web-страниц» (см. Приложение 4) с использованием рекомендуемого списка литературы.

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

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

Количество и содержание страниц узла определяется вариантом. Выбор варианта контрольной работы осуществляется по таблице (Приложение 6), ключом выбора являются две последние цифры номера зачетной книжки студента.

Студент должен уметь вносить необходимые корректировки в оформление и содержание страниц, редактируя HTML-код страниц. Студент должен обладать навыками просмотра web-страниц с помощью браузера MS Internet Explorer; настройки почтовой программы MS Outlook Express для работы с существующими адресами электронной почты; создания, отправки и просмотра сообщений электронной почты с помощью почтового клиента (MS Outlook Express).

Требования к содержанию web-узла

2. Если страницы узла создаются с помощью текстового редактора MS Word, они должны быть сохранены в формате «Web-страница с фильтром».

3. Главная страница узла должна содержать следующую информацию:

· название дисциплины,

· ФИО, номер группы, номер зачетной книжки студента,

· № варианта задания,

· список всех созданных в ходе выполнения задания файлов и папок с необходимыми пояснениями.

Фамилия студента должна быть выделена жирным курсивом, а номер варианта – жирным шрифтом.

Пример содержания главной страницы:

4. Конкретный вид формы и тема мини-а определяются вариантом задания.

В варианты задания включены формы трех видов: «Заявка», «Регистрация» и «Опрос». Данные форм должны отсылаться на существующий адрес электронной почты.

Примеры форм

Форма «Заявка» (рис.1) содержит следующие элементы: выключатель (флажок) для указания требования подписаться (по умолчанию включен) и выключатель для исключения из списка рассылки (по умолчанию выключен); текстовые поля для ввода ФИО, адреса электронной почты, регистрационного номера рассылки; выпадающий список для выбора темы рассылки; кнопки для очистки содержимого формы и отправки данных формы на электронный адрес. Форма также содержит поясняющий текст и горизонтальную линию – разграничитель двух логических разделов формы (подписка, отказ от подписки).

Рис.1. Внешний вид формы «Заявка»

Форма «Опрос» (рис.2) содержит: текстовое поле для ввода ФИО, переключатель для указания пола (м/ж), выпадающий список для указания возрастной категории, набор выключателей для указания интересов пользователя, поясняющий текст и кнопки для очистки и отправки данных формы на электронный адрес.

Форма «Регистрация» (рис.3) содержит следующие элементы управления: текстовые поля для ввода ФИО, адреса электронной почты, страны и города проживания пользователя (по умолчанию установлена страна Россия); переключатель для указания пола (м/ж); выпадающий список для указания возрастной категории (аналогично форме «Опрос») и кнопки для очистки содержимого формы и отправки данных формы на электронный адрес. Кроме того, форма содержит поясняющий текст и разделитель в виде горизонтальной линии.

Рис.2. Внешний вид формы «Опрос»

Рис.3. Внешний вид формы «Регистрация»

5. Мини- должен иметь объем 2-3 машинописные страницы и разбит на разделы, снабженные заголовками. Заголовки должны быть выделены жирным шрифтом большего по сравнению с остальным текстом размера.

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

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

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

Структура страниц узла может быть реализована с помощью таблиц или фреймовых структур (Рамки в MS FrontPage, MS Word).

Рис.4. Основные типы структур страниц

7. В конце содержимого каждой страницы должна быть помещена ссылка на ее начало (для быстрого возврата в начало просмотренной страницы).

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

Требования к оформлению контрольной

работы

Контрольная работа выполняется на отдельной дискете формата 3,5” и емкостью 1.44 Мб. Этикетка дискеты должна содержать название дисциплины, фамилию студента и номер группы.

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

· файлы, содержащие остальные web-страницы;

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

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

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

· название web-страницы, ее заголовок (TITLE) и имя файла страницы;

· внешний вид страницы;

· полный HTML-код страницы.

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

КоНТРОЛЬНЫЕ ЗАДАНИЯ

Вариант 1.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-а на тему «Организация гиперссылок средствами HTML». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 2.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-а на тему «Спецификации HTML. Браузеры Netscape Navigator и Internet Explorer». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 3.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-а на тему «Электронная почта и web-страницы (вызов почтового клиента с web-страницы, отправка данных формы на электронный адрес)». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 4.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-а на тему «Создание таблиц средствами HTML и их использование на web-страницах». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 5.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-а на тему «Использование форм на web-страницах». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 6.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-а на тему «Использование фреймовых структур». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 7.

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

Вариант 8.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-а на тему «Использование списков HTML» и страницу с ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3-х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 9.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-а на тему «Логическое и физическое форматирование текста HTML-документа» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 10.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-а на тему «Тэги физического форматирования текста» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3-х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 11.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-а на тему «Тэги логического форматирования текста» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 12.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-а на тему «Тэги уровня блока и последовательные тэги» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3-х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 13.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-а на тему «Использование сценариев в HTML-документах». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 14.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-а на тему «Использование каскадных таблиц стилей CSS». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 15.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-а на тему «Объектная модель HTML-документа». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 16.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-а на тему «События, свойства и методы объектов HTML-документа». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 17.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-а на тему «Встраиваемые в web-страницу компоненты: элементы управления ActiveX, скрипты и Java-апплеты». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 18.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-а на тему «Использование графических изображений для оформления web-страниц». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 19.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-а на тему «Форматирование абзацев средствами HTML» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 20.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-а на тему «Использование графических карт-изображений» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 21.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-а на тему «Основные понятия языка HTML, особенности отображения HTML-документа браузерами» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 22.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-а на тему «Размещение в WWW данных, подготовленных в приложениях MS Office» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 23.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-а на тему «Основы безопасной работы с web-страницами и электронной почтой» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 24.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-а на тему «Браузер MS Internet Explorer 6.0: основные возможности и настройка» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 25.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-а на тему «Структура глобальной компьютерной сети Интернет, технология «клиент-сервер». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 26.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-а на тему «IP-адреса, доменные имена, URL». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 27.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-а на тему «Структура, основные протоколы и сервисы глобальной компьютерной сети Интернет». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 28.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-а на тему «Назначение основных компонент MS FrontPage 98. Структура FrontPage Редактора». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 29.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-а на тему «Управление web-узлами с помощью FrontPage Проводника». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 30.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-а на тему «Почтовый клиент MS Outlook Express 5: основные возможности и настройка». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Пример выполнения контрольной работы

Задание: Создать трехстраничный web-узел, включающий главную страницу, страницу с формой и страницу мини-а на тему «Оформление фона web-страниц». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, содержимое разбито на три колонки. Фон страниц должен быть оформлен в желто-коричневых тонах, цвет текста – темно-коричневый, цвет ссылок – бордовый, цвет активных ссылок – малиновый.

HTML-код страницы «Главная»:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>

<title> Главная </title>

</head>

<body topmargin=”0” leftmargin=”0” rightmargin=”0” marginheight=”0” marginwidth=”0” bgcolor=”#FFFFD5” link=”#cc0066” vlink=”#cc0066” alink=”#993366” text=”#800000”>

<a name=”verh”></a>

<div align=”center”>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”100%”>

<tr>

<td width=”100%” bgcolor=”#E7BF58”

colspan=”3”> <div align=”center”><font size=”6” color=”#800000”><b> Пример создания учебного узла </b></font></div>

<img src=”images/SPACER.GIF” width=”770” height=”1” border=”0”>

</td>

</tr>

<tr>

<td width=”12%” bgcolor=”#E7BF58” rowspan=”3” valign=”top”>&nbsp;<p>

<p><a href=”form.htm”><b> Формы </b></a></p>

<p><a href=”referat.htm”><b> </b></a></td>

<td width=”61%” valign=”top”><p align=”justify”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Узел создан для иллюстрации и помощи в

выполнении заданий контрольной работы по

дисциплине &quot;Инструментальные средства

создания web-страниц и презентаций&quot;.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Страницы узла имеют единое оформление и структуру, включая заголовок, панель навигации (ссылки на страницы узла) и контактную информацию, расположенную внизу.

Содержимое страниц разбито на три колонки.<br>

страница мини-а, использованные для

оформления страницы рисунки хранятся в папке images: bs00554_.gif - рисунок "книги", bd00028_.gif - рисунок "вопрос", spacer.gif –

прозрачный квадрат. </p>

<p align=”center”><b>Успехов в выполнении

контрольной работы!</b></p>

<div align=”center”>

<table border=”0” cellpadding=”5”

cellspacing=”0” width=”101%”>

<tr><td width=”58%” valign=”top”><a href=”referat.htm”><img src=”images/bs00554_.gif” width=”64” height=”56” alt=” ” align=”left” border=”0”></a><font size=”2”> Мини - на тему &quot; Оформление фона web- страниц &quot;</font> </td><td width=”6%” valign=”top”></td><td width=”39%” valign=”top”><a href=”form.htm”><img src=”images/bd00028_.gif” width=”51” height=”50” alt=” Формы ” align=”right” border=”0”></a><font size=”2”> Задать вопрос , заполнив форму </font></td>

</tr></table>

</div>

</td>

<td width=”27%” valign=”top”><p><font size=”2”><b> Рекомендуемая литература :</b></font> </p><p><font size=”2”> Анисимова И . Н .

Инструментальные средства создания web-страниц. Методические указания. - СПб.: СПбГИЭУ, 2000. </font><br><i><font size=”2”>

Практическое руководство по созданию web-страниц с помощью непосредственного редактирования тэгов HTML. Управление узлами в FrontPage 98. Создание страниц с формами в редакторе FrontPage.</font> </i></p>

<p><font size=”2”> Вайскопф Дж . Microsoft FrontPage 2000: учебный курс . - СПб .: Питер , 2000.</font> <br><font size=”2”><i> Описание интерфейса и возможностей MS FrontPage 2000. Создание страниц с формами.</i></font></p></td>

</tr>

<tr><td><p align=”center”> <a href=”#verh”>

наверх </a> </p></td> <td></td></tr>

<tr> <td width=”88%” colspan=”2”> Посетите сайт

Инжэкона

<a href=”http://www.engec.ru”>www.engec.ru</a>. &nbsp;&nbsp;&nbsp;Напишите письмо на кафедру

Вычислительных систем и программирования

<a href=”mailto:csp@engec.ru?subject= дисциплина &quot; Создание web- страниц &quot;”>csp@engec.ru</a>

</td>

</tr>

</table>

</div>

</body>

</html

Рис.6. Внешний вид страницы с формой «Формы» – файл form.htm

HTML-код страницы «Формы»:

<html>

<head>

<meta http-equiv=”Content-Type”

content=”text/html; charset=windows-1251”>

<title> Формы </title>

</head>

<body topmargin=”0” leftmargin=”0” rightmargin=”0” marginheight=”0” marginwidth=”0” bgcolor=”#FFFFD5” link=”#cc0066” vlink=”#cc0066” alink=”#993366” text=”#800000”>

<a name=”verh”></a><div align=”center”>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”100%”>

<tr>

<td width=”100%” bgcolor=”#E7BF58”

colspan=”3”><div align=”center”><font size=”6” color=”#800000”><b> Пример создания учебного

узла </b></font></div>

<img src=”images/SPACER.GIF” width=”770” height=”1” border=”0”></td></tr>

<tr><td width=”12%” bgcolor=”#E7BF58” rowspan=”3” valign=”top”>&nbsp;

<p><a href=”form.htm”><b> Формы </b></a></p>

<p><a href=”referat.htm”><b> </b></a></td>

<td width=”61%” valign=”top”> Создаете свой узел ?<blockquote><p> Возникли вопросы ?</p> <blockquote><p> Вы можете получить краткий ответ , заполнив следующую форму .</p> </blockquote>

</blockquote>

<form method=”POST” enctype=”text/plain” a с tion=”mailto:csp@engec.ru?subject= вопрос по

созданию web- страниц ”>

<p>Ваши имя и фамилия

<input type=”text” name=”fio” size=”26”></p>

<p>Специальность&nbsp;

<input type=”text” name=”spec” size=”19”>&nbsp; &nbsp; з / о &nbsp;

<input type=”checkbox” name=”zo” checked value=”yes”></p>

<p> Курс &nbsp;<select name=”kurs” size=”1”>

<option value=”1”> первый </option>

<option value=”2”> второй </option>

<option value=”3”> третий </option>

<option value=”4”> четвертый </option>

<option value=”5”> пятый </option>

</select>&nbsp; &nbsp;

номер группы &nbsp;<input type=”text” name=”grup” size=”7”></p>

<center> Ваш вопрос :<br> <textarea rows=”3” name=”vopros” cols=”39”></textarea><br>&nbsp;<br> <input type=”reset” value=” Очистить ”>

&nbsp;&nbsp;&nbsp;<input type=”submit” value=” Задать вопрос ”>

</center>

</form>

</td>

<td width=”27%” valign=”top”><p><font size=”2”><b>Отправка данных формы по электронной почте</b></font></p>

<p><font size=”2”>Для того, чтобы данные&nbsp; формы можно было отправить по электронной почте, на компьютере, где просматривается web-страница, должна быть установлена и настроена программа-клиент для работы с электронной почтой через POP3 протокол. Отправка данных формы производится в

фоновом режиме. </font><br><font size=”2”> В

операционной системе Windows почтовыми клиентами являются MS Outlook Express и MS Outlook. В силу большей простоты рекомендуется пользоваться Outlook Express.</font></p>

</td></tr>

<tr>

<td><p align=”center”><a href=”#verh”> наверх </a></p></td>

<td></td></tr>

<tr><td width=”88%” colspan=”2”> Посетите сайт

Инжэкона

<a href=”http://www.engec.ru”>www.engec.ru</a> &nbsp;&nbsp;&nbsp;&nbsp;Напишите письмо на кафедру Вычислительных систем и программирования

<a href=”mailto:csp@engec.ru?subject= дисциплина &quot; Создание web- страниц &quot;”>csp@engec.ru</a> </td></tr>

</table>

</div>

</body>

</html>

Рис.7. Внешний вид страницы мини-а «» – файл referat.htm

Низ страницы мини-а оформлен так же, как и у всех страниц учебного web-узла.

HTML-код страницы «»:

<html>

<head>

<meta http-equiv=”Content-Type”

content=”text/html; charset=windows-1251”>

<title> </title>

</head>

<body topmargin=”0” leftmargin=”0” rightmargin=”0” marginheight=”0” marginwidth=”0” bgcolor=”#FFFFD5” link=”#cc0066” vlink=”#cc0066”

alink=”#993366” text=”#800000”>

<a name=”verh”></a><div align=”center”>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”100%”>

<tr>

<td width=”100%” bgcolor=”#E7BF58”

colspan=”3”><div align=”center”><font size=”6” color=”#800000”><b> Пример создания учебного

узла </b></font></div>

<img src=”images/SPACER.GIF” width=”770” height=”1” border=”0”> </td> </tr>

<tr>

<td width=”12%” bgcolor=”#E7BF58” rowspan=”3” valign=”top”>&nbsp;<p>

<p><a href=”form.htm”><b> Формы </b></a></p>

<p><a href=”referat.htm”><b> </b></a></td>

<td width=”61%” valign=”top”>

<p align=”center”><font size=”+2”> Оформление фона web- страниц </font></p>

<p><a href=”#r1”>Задание фонового цвета</a><br>

<a href=”#r2”>Использование фонового

изображения</a></p>

<p><a name=”r1”><font size=”+1”><b> Задание

фонового цвета</b></font></a></p>

<div align=”justify”>&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;В качестве фона web-страницы может быть указан как однотонный цвет, так и фоновый узор или рисунок. Для задания цвета фона

употребляется параметр BGCOLOR тэга BODY. В

качестве значения параметра BGCOLOR указывается название цвета или его шестнадцатеричный код.

Англоязычные названия цветов были введены фирмой Netscape и впервые реализованы в Netscape Navigator 3.0, сейчас поддерживается 140 таких

названий. Ранние версии браузеров распознавали всего 16 стандартных цветов.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Так, например для задания красного цвета фона следует записать: </div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<font face=”Arial”>&lt;BODY BGCOLOR=&quot;red&quot;&gt;</font></div>

<div align=”justify”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;При задании цвета по названию необходимо точно придерживаться его написания, в противном случае в качестве фонового будет использован цвет,

устанавливаемый по умолчанию (белый). <br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Цвета могут быть заданы и цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных

цветах - красном (red), зеленом (green) и синем (blue) - и обозначается RGB. Для каждого цвета

задается шестнадцатеричное значение в пределах от 00 до FF, что соответсвует диапазону от 0 до 255 в десятеричном исчислении. Эти значения объединяются в одно число, перед которым ставится символ #.

Например, число #FF0000 обозначает красный цвет.</div>

<p><a name=”r2”><font size=”+1”><b>Использование фонового изображения</b></font></a></p>

<div align=”justify”>&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;Фоновое изображение включается в

документ при помощи параметра BACKGROUND тэга BODY. Значением параметра BACKGROUND является URL-адрес изображения, которое используется в качестве фонового.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Фоновым

изображением должен быть графический файл формата GIF или JPEG. Фоновое изображение всегда заполняет все окно просмотра web-страницы. Если размер

изображения меньше размера окна, то оно

многократно дублируется по принципу мозаики.

Обычно в качестве фонового используется небольшое изображение, для загрузки по сети которого

требуется немного времени.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Если

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

чтобы при просмотре текст страницы &quot;скользил&quot; по нему. Этого можно достичь, если задать значение FIXED параметра BGPROPERTIES тэга BODY.<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Пример: </div>

<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<font face=”Arial”>&lt;BODY BACKGROUND=&quot;images/clouds.jpg&quot; BGPROPERTIES=&quot;fixed&quot;&gt;</font></div>

</td><td width=”27%” valign="top"><p><font size=”2”><b> Рекомендуемая литература :</b></font> </p><p><font size=”2”> Матросов А ., Сергеев А ., Чаунин М . HTML 4.0. - СПб .: БХВ - Петербург , 2000.</font><br><font size=”2”><i> Подробное

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

текстового редактора Word.</i></font></p>

<p><font size=”2”>Омельченко Л.Н., Федоров А.Ф.

Самоучитель Microsoft FrontPage 2000. - СПб.: БХВ-Санкт-Петербург, 1999.</font><br><font size=”2”><i>Общие сведения о сервисах Internet, подключение к Internet домашнего компьютера,

полное руководство по работе с браузером Internet Explorer 5.0, работа с электронной почтой (MS Outlook). Подробное описание возможностей

редактора FrontPage 2000 по созданию web-страниц. Использование сложных элементов для оформления web-страниц. Создание форм в FrontPage.</i></font> <br><font size=”2”><i>Размещение данных,

подготовленных в приложениях MS Office (Word, Excel, Access), на web-страницах.</i></font></p>

</td>

</tr>

<tr><td><p align=”center”>

<a href=”#verh”> наверх </a></p></td>

<td></td></tr>

<tr><td width=”88%” colspan=”2”> Посетите сайт

Инжэкона

<a href=”http://www.engec.ru”>www.engec.ru</a> &nbsp;&nbsp;&nbsp;&nbsp;Напишите письмо на кафедру Вычислительных систем и программирования

<a href=”mailto:csp@engec.ru?subject= дисциплина &quot; Создание web- страниц &quot;”>csp@engec.ru</a> </td></tr>

</table>

</div>

</body>

</html>

СПИСОК РЕКОМЕНДУЕМой ЛИТЕРАТУР ы

1. Анисимова И.Н. Основы разработки web-узлов и страниц. Учебное пособие. - СПб.: СПбГИЭУ, 2002. - 109 с.

2. Браун М., Хоникатт Д. Использование HTML 4: Специальное издание/Под ред. Петриковца Г.П. - М.-СПб.-Киев: Издат.дом «Вильямс», 1999. - 779 с.

3. Дунаев В.В. Основы WEB дизайна: самоучитель. - СПб.: БХВ-Петербург, 2006. - 504 с.

4. Использование приложений MS Office 2000 в Интер- и Интра-сетях. М/у для выполнения лаб. раб. по дисциплине «Учебная практика по информационным технологи­ям в экономике». Спец. 060800, 521500, 062200. / Рамин Е.Л., Анисимова И.Н. – СПб.: СПбГИЭУ, 2003. - 44 с.

5. Исси Коэн Л., Исси Коэн Дж . Полный справочник по HTML, CSS и JavaScript: справочник профессионала. - М.: ЭКОМ, 2007. - 1166 с.

6. Левин М.П., Алексеев Ю.М. 2 в 1: Самоучитель разработки Web-сайтов: HTML, CSS, графика, анимация, раскрутка + Видеокурс - М.: Триумф, 2007. - 397 с.

7. Матросов А., Сергеев А., Чаунин М. HTML 4.0. - СПб.: БХВ-Петербург, 2000. - 672 с.

8. Ноблес Р., Греди К.-Л. Эффективный Web-сайт: разработка, дизайн, маркетинг. Учебное пособие. - Москва: Триумф, 2005. - 559 с.

9. Программные средства разработки web-страниц. FrontРage 2003. М/у по выполнению лаб. раб. для студентов всех специальностей. / Васильева И.Н. – СПб.: СПбГИЭУ, 2006. - 53 с.

10. Создание Web-страниц и Web-сайтов: cамоучитель./под ред. Печникова В.Н. - М.: Триумф, 2006. - 459 с.

11. Спека М.В. Создание Web-сайтов: самоучитель. - М. [и др.]: Диалектика, 2007. - 277 с.

12. Хольцшлаг М. 250 секретов HTML и Web-дизайна. - М.: NT Press, 2006. - 490 с.

13. Хольцшлаг М.Э. Языки HTML и CSS: для создания Web-сайтов: офиц. учеб. курс. Учебное пособие. - М.: Изд-во Триумф, 2006. - 303 с.

Приложение 1

ОСНОВЫ ЯЗЫКА РАЗМЕТКИ HTML

Принципы построения HTML документа

Web-страницы являются гипертекстовыми и гипермедийными документами, которые могут содержать графику, аудио- и видео- информацию и ссылки на другие ресурсы сети Internet. Web-страницы создаются с помощью языка гипертекстовой разметки HTML (HyperText Markup Language). Просмотр Web-страниц осуществляется специальными программами – браузерами , содержащими интерпретатор языка HTML.

Под гипертекстом понимается совокупность информационных фрагментов, связанных между собой. При этом просмотр информационных фрагментов может осуществляться пользователем в произвольном порядке. В HTML все элементы связи между фрагментами текста находятся в теле самого документа и записываются в ASCII формате. Общие идеи построения и интерпретации HTML документов:

· HTML документ выглядит как совокупность текстовых фрагментов, каждый из которых окружен тэгами (tags).

Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько параметров (атрибутов). Название тэга вместе с его параметрами заключаются в скобки <>. В общем виде тэг выглядит следующим образом:

<тэг параметр1=значение1 параметр2=значение2 ...>Текст1</тэг>

Действие тэга распространяется на фрагмент текста «Текст1». Значения параметров рекомендуется заключать в двойные кавычки.

Первый тэг называется открывающим , а парный ему - закрывающим . Закрывающий тэг имеет тот же идентификатор, но начинается с символа /. Тэги, не предусматривающие наличие вложенного текста, называются пустыми или непарными , они не имеют закрывающей части. Непарные тэги имеют вид:

<тэг параметр1=значение1 параметр2=значение2 ...>

Пример:

<P ALIGN=”left”>Текст2</ P > – Выделить «Текст2» в отдельный абзац с выравниванием по левому краю.

<HR > – Вставить горизонтальную линию.

· Внутри одного тэга может находиться произвольное количество тэгов.

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

· Все символы управления текстом в HTML документе (несколько пробелов подряд, табуляция, перевод строки и т.п.) заменяются одиночным символом пробела.

· Строчные и прописные символы в именах (идентификаторах) тэгов и их атрибутов, как правило, не различаются.

Любой HTML документ начинается с открывающего тэга <HTML> и заканчивается парным закрывающим тэгом </HTML>. Любой HTML документ разделен на две части: головную (head) и основную (body). Головная часть содержит информацию о документе в целом, а основная – собственно текст документа. Для того чтобы отделить эти части друг от друга используются одноименные тэги разметки.

В головной части HTML документа обязательно должен располагаться тэг TITLE , содержащий название страницы. Название – это текст, который высвечивается в строке заголовка браузера при загрузке web-страницы.

Пример простейшего HTML документа:

< HTML >

<HEAD>

<META HTTP-EQUIV=”Content-Type”

CONTENT=”text/html; CHARSET=windows-1251”>

<TITLE> Простая страница </TITLE>

</HEAD>

<BODY>

< P >Текст, выводимый на экран.</ P >

</BODY>

</HTML>

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

Основные тэги Таблица 1.

Тэги физического форматирования текста

Форматирование текста документа производится в разделе BODY с помощью тэгов двух типов – тэгов уровня блока и последовательных тэгов или тэгов уровня текста . Тэги уровня блока могут содержать последовательные тэги и другие тэги уровня блока, в то время как последовательные тэги могут содержать только другие последовательные тэги. Парный тэг, содержащий другие тэги, называется тэгом-контейнером , а заключенные в него тэги – вложенными .

К тэгам уровня блока относятся тэги параграфа P и DIV , тэг горизонтального центрированного текста CENTER , тэг блока с отступом BLOCKQUOTE и др. Кроме того, для разделения документа на части используются непарные тэги: перевода строки BR и горизонтальной линии HR .

Для тэгов P и DIV определен параметр ALIGN , задающий горизонтальное выравнивание текста. Он может принимать значения LEFT (по левой границе), CENTER (по центру), RIGHT (по правой границе) и JUSTIFY (по ширине). По умолчанию используется выравнивание по левой границе. Параметр ALIGN определен также для тэга HR со значениями LEFT , CENTER и RIGHT .

Для форматирования символов текста используются последовательные тэги I (курсив), B (жирный), U (подчеркивание), S (зачеркнутый текст), SUB (нижний индекс), SUP (верхний индекс) и тэги управления шрифтами FONT (текущий шрифт), BASEFONT (шрифт по умолчанию) и др.

Тэги FONT и BASEFONT задают размер шрифта в условных единицах от 1 до 7 с помощью параметра SIZE , имя шрифта (параметр FACE ) и его цвет (параметр COLOR ).

Организация связей

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

Метка отмечает конкретное место на страницы, в которое будет осуществлен переход, это именованная строка в HTML документе. Ссылка на другую web-страницу всегда осуществляет переход на ее начало. Для организации перехода в другое место страницы следует указать саму страницу и установленную внутри нее метку. Ссылка последнего типа – это обычно ссылка на корневой каталог Web-узла, откуда есть доступ ко всем принадлежащим узлу страницам; имя конкретной страницы не указывается и переход осуществляется на стартовую страницу узла.

Любой ресурс WWW может быть указан с помощью универсального идентификатора – URL (Uniform Resource Locator). URL определяет:

- протокол доступа к документу,

- имя и адрес сервера в Internet, содержащего этот Web-документ,

- местоположение документа в общей структуре Web-сервера.

В общем виде URL выглядит следующим образом:

метод://сервер:порт/путь/файл#метка

Как для задания ссылок на другие документы, так и для создания метки в теле самого HTML документа используется тэг <A >. Тэг <A > не может содержать тэги уровня блока.

Метка задается тэгом <A > с атрибутом NAME , значение этого атрибута – условное имя метки, которое может быть использовано в URL. <A NAME =“имя метки”>Вложенный текст</A >. Например:

<A NAME=”метка_1”>Глава3.Гипертекстовые ссылки</A>

Ссылка задается тэгом <A > с атрибутом HREF . Спецификация: <A HREF =“URL-адрес”>Указатель гиперссылки</A >

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

Атрибут HREF задает адрес в формате URL, к которому следует перейти при активации ссылки. В случае отсутствия полного адреса (не указан метод адресации и полный путь к файлу) поиск происходит в том же месте, где расположен текущий документ. По умолчанию берется метод HTTP, обеспечивающий обработку HTML файлов. В URL-адресах имя метки указывается с префиксом #. Примеры:

< A HREF =” http :// www . microsoft . com ”> Microsoft </ A >

< A HREF =”#метка_1”>Перейти к третьей главе</ A >

В качестве URL можно указать адрес для отправки электронной почты (E-Mail), в этом случае URL имеет вид mailto:adress , где adress - адрес электронной почты. Например,

< A HREF =” mailto : csp @ engec . ru ”>Напишите нам!</ A >

Для тэга A можно указать атрибут TARGET , указывающий в новом (значение _ BLANK ) или в том же окне, что и исходная (родительская) страница (значение _ PARENT ), будет открыт следующий документ.

Вставка изображений

Для отображения графики и мультимедиа используется тэг IMG . Параметры тэга:

SRС задает источник изображения - локальный путь или URL-адрес графического файла (GIF или JPEG и видео AVI);

WIDTH и HEIGTH задают горизонтальный и вертикальный размеры изображения в точках (пикселях);

HSPACE и VSPACE задают горизонтальный и вертикальный отступы от границы изображения до текста в точках;

ALIGN выравнивает изображение и задает способ обтекания его текстом. Значения параметра: LEFT (изображение выравнивается по левому краю страницы, текст обтекает его справа), RIGHT (обтекание текстом слева), TOP , TEXTTOP , MIDDLE , ABSMIDDLE , BASELINE , BOTTOM , ABSBOTTOM – вертикальное выравнивание изображения;

BORDER задает толщину рамки вокруг рисунка. Рамка видна, если рисунок используется как гиперссылка.

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

<IMG SR С =”Images\Forlogo.gif” ALT=” Фирма Formaggi Fortini” WIDTH=”378” HEIGHT=”68”>

Таблицы

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

Для создания таблицы используется тэг TABLE , создающий пустую таблицу. Организация структуры таблицы производится по строкам, каждая из которых в свою очередь содержит ячейки. Ячейки автоматически выравниваются внутри строк. Строки задаются тэгами TR , которые должны содержаться внутри тэга TABLE . Ячейки создаются тэгами TD , которые должны помещаться в тело тэга строки TR .

Следующая структура задает таблицу, состоящую из двух строк и трех столбцов (трех ячеек в каждой строке):

<TABLE>

<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>

<TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR>

</ TABLE >

Форматирование задается для всей таблицы с помощью параметров тэга TABLE и для отдельных ячеек с помощью параметров тэга TD . Оба тэга имеют параметры BACK­ GROUND , BGCOLOR , ALIGN , HEIGHT и WIDTH . Параметр WIDTH допускает задание ширины таблицы/ячейки как в точках, так и в процентах.

Тэг TABLE имеет параметры:

BORDER - толщина границы таблицы в точках;

CELLPADDING – отступы от границ ячеек до их содержимого в точках;

CELLSPACING – расстояние между ячейками в точках.

Тэг TD имеет параметр VALIGN , задающий характер выравнивания содержимого ячейки по вертикали – TOP , MIDDLE , BOTTOM , BASELINE .

Специфическими параметрами тэга TD являются COL­ SPAN и ROWSPAN , позволяющие объединять ячейки таблицы. В качестве значений параметра выступают числа, указывающие, на сколько столбцов/строк распространяется ячейка.

Рис.8. Пример использования таблиц

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

<HTML>

<HEAD>

<TITLE> Таблица </TITLE>

</HEAD>

<BODY> <TABLE ALIGN=”right” BORDER=”1”

BGCOLOR=”lime” CELLPADDING=”10”>

<TR><TD ROWSPAN=”3”> Общее левое </TD>

<TD ALIGN=”center”>1</TD>

<TD ALIGN=”center”>2</TD></TR>

<TR><TD ALIGN=”center”>3</TD>

<TD ALIGN=”center”>4</TD></TR>

<TR><TD COLSPAN=”2”> Опять вместе </TD></TR>

</ TABLE >

</ BODY >

</ HTML >

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

Формы

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

Тэг формы является контейнером для тэгов элементов управления INPUT , TEXTAREA и SELECT . Элементы INPUT могут быть разных типов, которые определяются значениями параметра TYPE этого тэга.

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

Основные элементы управления, которые могут быть вставлены в форму: поле (строка) ввода текста, область ввода текста, флажки и переключатели, списки, кнопки.

Строка ввода текста . Представляет собой однострочную прямоугольную область на экране, в которую можно вводить текст с клавиатуры. Задается тэгом INPUT , параметр TYPE имеет значение TEXT.

Может быть определен размер строки на экране в символах – параметр SIZE , максимально допустимый размер вводимого текста в символах – MAXLENGTH . Если вводимый текст не укладывается в отведенное ему на экране место, будет осуществлена горизонтальная прокрутка. Пример:

< UNPUT TYPE =” text ” NAME =” fio ” SIZE =”15”>

Флажок . Представляет собой прямоугольную область на экране, которая может быть отмечена галочкой (флажок включен, элемент выбран) или оставаться пустой (флажок выключен, элемент не выбран). Задается тэгом INPUT , параметр TYPE имеет значение CHECKBOX. Имеет обязательный параметр VALUE , задающий значение, которое будет отослано на сервер, если элемент выбран. Если элемент не выбран, его имя и значение не пересылаются. Параметр CHECKED указывает, что элемент выбран по умолчанию. Пример:

< UNPUT TYPE =” checkbox ” NAME =” zao ” VALUE =” da ”

CHECKED >

Переключатель действует аналогично флажку, но выглядит как кружок, который может быть отмечен точкой. Задается тегом INPUT со значением RADIO параметра TYPE .

Флажки и переключатели могут использоваться как самостоятельные элементы формы, в этом случае их выбор осуществляется независимо друг от друга. Эти элементы могут служить и для выбора одной из нескольких альтернатив. Для организации альтернативного выбора следует вставить несколько элементов типа Флажок или Переключатель, а затем объединить их в группу, задав у каждого элемента одно и то же имя (значение параметра NAME ). В этом случае они действуют согласованно, то есть может быть выбран только один элемент из группы, а на сервер отправлено значение, определенное параметром VALUE выбранного варианта. Пример:

<DIV> Пол : М <INPUT TYPE=”radio” NAME=”pol”

VALUE=” муж ” CHECKED> Ж <INPUT TYPE=”radio”

NAME=”pol” VALUE=” жен ”></DIV>

В этом случае можно выбрать только один из вариантов значения пола. По умолчанию переключатель стоит в положении «М»; если выбор не будет изменен, на сервер будет отравлено значение «муж» элемента pol.

Область ввода текста . Представляет собой прямоугольную область с полосами прокрутки для ввода многострочного текста. Задается тэгом TEXTAREA . Параметры: ROWS – задает высоту области в строках, COLS – задает ширину области в символах.

Список . Осуществляет выбор из заданного списка. Список задается тэгом SELECT , который является контейнером для тэгов OPTION , задающих отдельные элементы списка.

Параметр SIZE тэга SELECT задает вертикальный размер списка в строках. Если его значение равно 1, то список имеет вид выпадающего; при размере в несколько строк он выглядит как список прокрутки. Параметр MULTIPLE задает возможность выбора сразу нескольких элементов списка.

Отдельные значения списка задаются непарным тэгом OPTION . В случае их отсутствия список будет пустым. Текст, который будет отображаться на экране в качестве элемента списка, указывается после тэга OPTION . Значения, передаваемые на сервер, определяются параметром VALUE . Значение по умолчанию указывается параметром CHECKED . Пример:

<SELECT NAME=”vozrast” SIZE=”1”>

<OPTION VALUE=”gr1” CHECKED>до 20

<OPTION VALUE=”gr2”> от 20 до 30

<OPTION VALUE=”gr3”> от 30 до 50

<OPTION VALUE=”gr4”> старше 50

</SELECT>

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

Кнопка сброса . Нажатие кнопки очищает все поля формы. Задается тэгом INPUT со значением RESET параметра TYPE . Надпись на кнопке задается значением параметра VALUE .

Кнопка отправки данных . Нажатие кнопки инициирует передачу данных формы серверу. Задается тэгом INPUT , параметр TYPE имеет значение SUBMIT.

Данные, извлеченные из формы, пересылаются на сервер в виде пар: имя_элемента=его_значение. Назначение данных (действие формы) определяется параметром ACTION тэга формы FORM . Существуют следующие возможности:

· Осуществляется переход на другую страницу. Значением параметра ACTION является URL этой страницы. Данные формы никуда не передаются, форма действует как гиперссылка.

· Данные формы отсылаются по электронной почте. Значением параметра ACTION является схема mailto с указанием адреса электронной почты. Происходит вызов почтового клиента и передача ему данных формы, отправка данных производится в фоновом режиме. Для функционирования этой схемы на клиентском компьютере (т.е. компьютере пользователя, заполняющего форму) должно быть установлено и настроено приложение для работы с электронной почтой (например, Outlook Express).

· Данные формы передаются серверной программе обработки. Это наиболее развитый способ, позволяющий серверу оперативно реагировать на запросы пользователя. Однако он требует выполнения действий на стороне сервера, а значит наличия на сервере специальных обрабатывающих программ. Значением параметра ACTION является URL такой программы.

Для формы может быть определен метод пересылки данных GET или POST – параметр METHOD и тип кодировки данных – параметр ENCTYPE .

Для отсылки данных на адрес электронной почты обязательно должны быть указаны: в качестве значения параметра ACTION – схема mailto, значение параметра METHOD – POST, значение параметра ENCTYPE – TEXT/PLAIN. В целом открывающий тэг формы может выглядеть следующим образом:

< FORM METHOD =” post ” ENCTYPE =” text / plain ”

ACTION=”mailto:csp@engec.ru?subject=вопрос по

дисциплине”>

Данные этой формы будут отсылаться на адрес электронной почты csp@engec.ru, а тема письма будет определена как «вопрос по дисциплине».

Приложение 2

ТЕХНОЛОГИЯ СОЗДАНИЯ WEB-УЗЛА В MS FRONTPAGE 2003

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

1. Запустить FrontPage 2003. Выполнить команду Файл/Создать , в области Создание , появившейся в правом части окна FrontPage щелкнуть на ссылке Другие шаблоны веб-узлов , выбрать шаблон Пустой веб-узел , в строке Укажите расположение нового веб-узла указать полный путь к локальной папке на диске, в которой будет создан web-узел (например, d :\ ivanov – папка может быть создана заранее или нет). Нажать ОК . В дальнейшем при необходимости открыть web-узел для редактирования в FrontPage следует использовать команду Файл/Открыть узел .

2. Создать три новые страницы, щелкнув по значку создания нового стандартного документа – страница будет создана и открыта для редактирования в режиме Конструктор .

· Проверить языковые настройки новой страницы – Формат/Фон , вкладка Язык , при необходимости сделать следующие установки:

Пометить текущий документ, указав: <нет конкретного значения>

Сохранить документ, используя: кириллица

Повторить загрузку текущего документа, используя: <автоматический выбор> или кириллица.

Если настройки другие – поменять их для текущей страницы и сохранить изменения. Чтобы настройки были правильными для вновь создаваемых страниц следует настроить узел – Сервис/Параметры узла , вкладка Язык , строка:

Применяемый по умолчанию набор знаков для страниц: кириллица

Проверить настройки языка в режиме Код : в разделе HEAD должна присутствовать строка

<meta http-equiv="Content-Type"

content="text/html; charset=windows-1251">

· Сохранить созданные страницы в корневой папке созданного узла в файлах с разными именами (например, k