WEB-ТЕХНОЛОГИИ
.pdfМинистерство образования и науки Российской Федерации
Государственное образовательное учреждение высшего профессионального образования
«Санкт-Петербургский государственный технологический институт
(технический университет)»
Кафедра систем автоматизированного проектирования и управления
А. Ю. Рогов, О.В. Проститенко
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