WEB-ТЕХНОЛОГИИ

Министерство образования и науки Российской Федерации

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

«Санкт-Петербургский государственный технологический институт

(технический университет)»

Кафедра систем автоматизированного проектирования и управления

А. Ю. Рогов, О.В. Проститенко

WEB ТЕХНОЛОГИИ

Методические указания к выполнению контрольных работ для студентов заочной формы обучения

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

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

2012

УДК 681.3.06

Рогов А. Ю., Проститенко О.В., Web технологии: методические указания к выполнению контрольных работ / СПб. : СПбГТИ(ТУ), 2012. – 32 с.

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

Материал указаний разделен на три раздела соответственно каждой контрольной работе. Каждый из разделов содержит цель, задание, требова-

ния к выполнению, комментарии, список пунктов оформления, и пример выполнения с комментариями.

Методические указания предназначены для студентов заочной формы обучения направления подготовки 230100 «Информатика и вычислительная техника» в рамках рабочей программы дисциплины «Web технологии».

Рис. 1, табл. 1, библиогр. 12 назв.

Рецензент:

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

Информатики и Управления .05.2012 протокол № .

Рекомендованы к изданию РИСо СПбГТИ(ТУ)

2

СОДЕРЖАНИЕ

Введение...................................................................................................................	4
Указания к выполнению и оформлению контрольных работ ............................	5
Контрольная работа 1 ...........................................................................................	10
Контрольная работа 2 ...........................................................................................	16
Контрольная работа 3 ...........................................................................................	22
Контрольные вопросы ..........................................................................................	30
Литература .............................................................................................................	31

3

Вв е д е н и е

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

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

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

«Web-технологии», целью которой является изучение различных приёмов,

методов и технологий разработки информационных систем, функциониру-

ющих в Интернет. Одним из основных средств разработки является язык

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

Методические указания к дисциплине «Web-технологии» предназна-

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

разработки структуры сайта, написания web-страниц в html-коде, связывания web-страниц в единую информационную подсистему, тестирования сайта, и

подготовки документации.

4

Указания к выполнению и оформлению контрольных

работ

Общие требования к работам:

−Работы выполняются индивидуально.

−При выполнении работы помимо задания должны быть учтены требования и комментарии к работе.

−Выполненная работа демонстрируется преподавателю. В процессе демонстрации студент должен понимать и уметь объяснить все этапы работы, а также использовать «правильную» терминологию.

−Все работы подшиваются в одну общую папку с общим титульным листом. Папка сдаётся в конце семестра, и является основанием для допуска к зачёту.

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

−Отчёт оформляется на листах формата А4 шрифтом Times 14 (13) одиноч-

ным интервалом.

−Каждая задача начинается с нового листа.

−Допускается двусторонняя печать.

−Рукописные тексты и рисунки в отчётах не допускаются.

Требования к оформлению листингов html-кодов:

−Листинги html-кодов оформляются шрифтом Courier 11 (10) одиночным интервалом.

−В начале листинга должна быть информация о том, кто и зачем написал код: ФИО, номер группы, назначение.

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

Номер варианта соответствует последней цифре в номере зачётной книжки студента (возможен индивидуальный вариант).

5

Варианты заданий

0.Разработка информационной Web-подсистемы по описанию процесса ректификации с использованием языка HTML.

1.Разработка информационной Web-подсистемы по описанию процесса абсорбции с использованием языка HTML.

2.Разработка информационной Web-подсистемы по описанию процесса экстракции с использованием языка HTML.

3.Разработка информационной Web-подсистемы по описанию процесса адсорбции с использованием языка HTML.

4.Разработка информационной Web-подсистемы по описанию процесса сушки с использованием языка HTML.

5.Разработка информационной Web-подсистемы по описанию процесса смешения с использованием языка HTML.

6.Разработка информационной Web-подсистемы по описанию процесса дробления с использованием языка HTML.

7.Разработка информационной Web-подсистемы по описанию процесса отстаивания с использованием языка HTML.

8.Разработка информационной Web-подсистемы по описанию процесса фильтрации с использованием языка HTML.

9.Разработка информационной Web-подсистемы по описанию процесса выпаривания с использованием языка HTML.

Контрольные работ рассчитаны на освоение и практическое применение следующих тегов языка HTML:

Таблица 1 –	Перечень тегов
Тег		Описание
<!– – … – –>		Определяет комментарий, который игнорируется браузером.
<COMMENT>

Общая структура web-страницы, оформление и параметры умолчания

<HTML>

Является контейнером, который заключает в себе все содержимое webстраницы.

<BODY>

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

6

		Является контейнером, который заключает в себе невидимые теги,
	<HEAD>	используемые для хранения информации, предназначенной для браузеров
		и поисковых систем.
		Является контейнером, который заключает в себе таблицу стилей.
		Разрешается использовать тег один раз в контейнере <HEAD>. Таблица
	<STYLE>	стилей состоит из записей, каждая из которых ставит в соответствие тегу
		некоторый набор атрибутов, описывающих как этот тег должен
		отображаться в браузере. Запись имеет структуру:
		Тег { атрибут : значение ; ...... ; атрибут : значение ; }
		Является контейнером, который заключает в себе теги определяющие
	<ADDRESS>	авторское право на web-страницу. Он может содержать текст, картинки,
		ссылки, выделения.
		Определяет информацию, используемую в поисковых системах и
	<META>	браузерах. Разрешается использовать несколько таких тегов, размещенных
		в контейнере <HEAD>.
		Инструктирует браузер относительно полного базового адреса текущей
		web-страницы. Тег предназначен для использования относительных
	<BASE>	адресов в web-страницах, которые должны переноситься в другую папку
		или на другой компьютер без потери взаимной связи. Разрешается
		использовать тег один раз в контейнере <HEAD>.
		Определяет шрифт, размер и цвет текста по умолчанию, используемые во
	<BASEFONT>	всем документе за исключением тега <FONT>. Допускается использование
		тега в контейнере <HEAD> или <BODY>. Многократное применение тега
		позволяет изменять шрифт для отдельных частей web-страницы.
		Определяет заголовок документа. Тег не является частью документа.
	<TITLE>	Обычно текст заголовка отображается в левом верхнем углу окна браузера.
		Разрешается использовать тег один раз в контейнере <HEAD>.
		Логическая структура содержания web-страницы
	<P>	Определяет параграф текста и ассоциирует с ним некоторое оформление.
		Позволяет задавать выравнивание текста внутри параграфа.
	<BR>	Определяет возврат каретки или новую строку внутри параграфа.
	<H1>	Определяет заголовок первого уровня.
	<H2>	Определяет заголовок второго уровня.	Каждый заголовок является
	<H3>	Определяет заголовок третьего уровня.	самостоятельным параграфом
	<H4>	Определяет заголовок четвертого уровня.	и имеет индивидуальное
	<H5>	Определяет заголовок пятого уровня.	оформление.
	<H6>	Определяет заголовок шестого уровня.
	<HR>	Определяет горизонтальный разделитель между параграфами. Позволяет
		задать толщину, ширину, выравнивание и цвет линии разделителя.
		Форматирование текста web-страницы
	<B>	Определяет жирный текст.
	<I>	Определяет курсивный текст.
	<U>	Определяет подчёркнутый текст.
	<S>	Определяет зачёркнутый текст.
	<SUB>	Определяет текст в виде нижнего индекса.
	<SUP>	Определяет текст в виде верхнего индекса.
	<BIG>	Определяет текст, размер которого увеличен на единицу относительно
		размера, используемого по умолчанию.
	<SMALL>	Определяет текст, размер которого уменьшен на единицу относительно
		размера, используемого по умолчанию.
			7

	<TT>	Определяет текст в моноширинном шрифте.
	<FONT>	Определяет шрифт, размер и цвет текста.
		Определяет нестандартные атрибуты текста или специфическое
	<SPAN>	оформление текста в контексте описания. Обычно используется совместно
		с таблицей стилей.
		Фрагменты web-страницы специального назначения
	<CENTER>	Определяет выравнивание по центру всего содержимого, заключенного в
		него, относительно родительского элемента.
		Определяет особую значимость всего содержимого, заключенного в него.
	<STRONG>	Браузеры обычно отображают текст этого тега жирным шрифтом. Тег
		часто используется для выделения понятий и терминов по тексту.
		Определяет акцентирование всего содержимого, заключенного в него.
	<EM>	Браузеры обычно отображают текст этого тега курсивным шрифтом. Тег
		часто используется для выделения важных формулировок по тексту.
		Определяет листинг чего-либо. Это может быть программный код, скрипт,
	<LISTING>	протокол работы, консольный интерфейс, содержание лога, и т.д.
		Браузеры обычно отображают его содержимое моноширинным шрифтом
		уменьшен-ного размера.
	<CODE>	Определяет программный код (только код). Браузеры обычно отображают
		его содержимое моноширинным шрифтом уменьшенного размера.
	<SAMP>	Определяет пример чего-либо. Браузеры обычно отображают его
		содержимое моноширинным шрифтом.
		Определяет блок предварительно форматированного текста. Такой текст
		отображается обычно моноширинным шрифтом со всеми пробелами,
		табуляциями и переносами строк. Для любого другого тега, любое
	<PRE>	количество пробелов, табуляций, переносов строк идущих подряд в html-
		коде web-страницы, браузеры отображают как один пробел. Тег <PRE>
		отключает этот стандартный режим и позволяет отображать текст так, как
		он введен разработчиком.
		Определяет блок текста без переносов строк. По умолчанию, браузеры
		игнорируют переводы строк в тексте и отображают текст выровненным по
		левому краю окна. При этом браузеры автоматически расставляют
	<NOBR>	переводы строк так, чтобы текст полностью поместился по ширине окна.
		Тег <NOBR> заставляет браузер отображать заключенный в него текст без
		переносов, одной строкой, отключая автоматический перенос. Если текст
		длинный, то это приводит к появлению горизонтальной полосы прокрутки.
		Списковые структуры web-страницы
		Определяет маркированный список, состоящий из элементов. Каждый
	<UL>	элемент списка должен начинаться с тега <LI>. Позволяет задавать символ
		маркировки.
		Определяет нумерованный список, состоящий из элементов. Каждый
	<OL>	элемент списка должен начинаться с тега <LI>. Позволяет задавать способ
		нумерации 1 | A | a | I | i и стартовое значение индекса.
		Определяет элемент маркированного или нумерованного списка. Браузер
		автоматически маркирует или нумерует элемент в зависимости от того, в
	<LI>	каком теге он заключен <UL> или <OL>. Если в список нужно вставить
		немаркированный и ненумерованный элемент (например, пояснение к
		пункту списка), то необходимо использовать тег <P> внутри списка.
		Браузер автоматически выравнивает такой параграф по граница списка.
	<DL>	Определяет список терминов (понятий, определений). Каждый термин
		задаётся в нём парой тегов <DT> и <DD>.

8

<DT>

Определяет термин в списке тега <DL>. Сразу за объявлением термина должно следовать его описание с помощью тега <DD>.

<DD>

Определяет разъяснение или описание термина, объявленного перед ним тегом <DT> в списке тега <DL>.

Табличные структуры web-страницы

Является контейнером для элементов, определяющих содержимое <TABLE> таблицы, и определяет атрибуты таблицы. Таблица состоит из строк,

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

<TR>

Определяет одну строку таблицы и должен размещаться внутри тега <TABLE>. Тег позволяется задавать индивидуальное оформление строки.

<TD>

Определяет одну ячейку таблицы и должен размещаться внутри тега <TR>. Тег позволяется задавать индивидуальное оформление ячейки.

<TH>

Определяет одну ячейку как заголовочную ячейку и должен размещаться внутри тега <TR>. По формату ничем не отличается от <TD>.

Определяет одну или несколько строк, которые представляют собой <THEAD> заголовок вверху таблицы. Допустимо использование не более одного

такого тега внутри тега <TABLE>.

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

<TBODY> ние такого тега внутри тега <TABLE>. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять ими через скрипты.

Определяет одну или несколько строк, которые представляют собой <TFOOT> подвал внизу таблицы. Допустимо использование не более одного такого

тега внутри тега <TABLE>.

Графика внутри web-страницы

Вставляет в web-страницу изображение из графического файла в формате GIF, JPEG, PNG. Этот тег имеет единственный обязательный атрибут SRC,

<IMG>

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

	Ссылки внутри и вне web-страницы
	Определяет ссылку на якорь внутри страницы, ссылку на другую
<A>	страницу, ссылку на сайт, ссылку на внешний файл, ссылку на
	почту. Тег имеет обязательный атрибут HREF или NAME.
<A name="anchor">	Определяет закладку (якорь) внутри страницы.
<A href="#anchor">	Определяет ссылку на закладку (якорь) внутри страницы.
<A href="page.html">	Определяет гиперссылку на другую web-страницу.
<A href="url">	Определяет гиперссылку на произвольный URL адрес.
<A href="filename">	Определяет ссылку на внешний файл.
<A href="mailto:x@y">	Определяет ссылку на почтовый адрес X@Y.

9

Контрольная работа 1

Цель:

Ознакомление с теговой структурой языка HTML, назначением основных тегов, форматных тегов, списковых тегов, написание web-страниц, использо-

вание специальных кодов.

Задание:

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

Выбрать дизайн и оформление страниц.

Требования:

Информационная подсистема должна содержать страницы: 1– сведения о процессе, 2– сведения о модели процесса, 3– список литературы, 4– термины и понятия по процессу.

Оформление:

1.Текст задания

2.Краткое описание процесса

3.Скриншоты web-страниц

4.Распечатка содержания страниц в html-коде

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

Задание:

Разработка информационной Web-подсистемы по описанию процесса теплообмена с использованием языка HTML.

Краткое описание процесса:

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

10