Разработка Web-документов на языке HTML

КУРСОВАЯ РАБОТА

по дисциплине Web-технологии

на тему: «Разработка Web-сайта для сети аптек»

Выполнил:

Обучающийся

группы ИПО-15 В.И. Бигу

Проверил:

Профессор кафедры

Математики Т.В. Губарева

Зав. кафедры Математики О.Г. Ларионова

г. Братск, 2017

Задание

Вариант №24

Тема: «Разработка Web-сайта для сети аптек»

Дата выдачи задания: 05.02.2017 г.

Содержание

Задание 2

Введение 4

1 Теоретический раздел

1.1 Разработка Web-документов на языке HTML

1.2 Разработка Web-документов на языке CSS

1.3 Разработка Web-документов на языке Java Script.

2 Разработка Web-сайта для сети аптек

2.1

2.2

2.3

2.4

2.5

2.6

Заключение и выводы

Список использованных источников

Приложение 1 – Листинг HTML

Приложение 2 – Листинг CSS

Приложение 3 – Листинг Java Script

Приложение 4 – Презентация по курсовой работе

Введение

Краткая аннотация (2 страницы).

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

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

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

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

Исходя из этого здесь изложены базовые понятия по электронным документам, современным технологиям сети интернет, а также программным средствам разработки Web-страниц.

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

Особое внимание уделено программному обеспечению и работе с графическими электронными документами.

Рассматривается применение наиболее распространенных прикладных программ для работы с растровой, векторной и флэш графикой.

Цель курсовой работы: Разработать Web-сайт для сети аптек.

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

1. Изучить и научиться применять для разработки Web-документов язык HTML.

2. Изучить и использовать принципы создания логической и физической структуры Web-сайта.

3. Изучить и научиться применять для разработки Web-документов, поставленные каскадные таблицы-стили CSS.

4. Научиться применять разработки Web-документов Java Script.

5. Изучить основы Web-дизайна и использовать их для разработки сайта.

6. Изучить основные положения по размещению Web-документов в сети интернет.

Теоретический раздел

Разработка Web-документов на языке HTML

Способы создания Web-документов: Web-документы создаются с помощью специального языка гипертекстовой разметки HTML (Hyper Text Markup Language). Документы HTML кроме содержательной части включают специальные управляющие конструкции – теги. Они предназначены для описания логической структуры документа, управления форматированием документа и размещением в нем гиперссылок, графических изображений, элементов оформления и служебной информации.

Существуют всего два способа создания Web-документов:

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

2. Использование специальных визуальных средств разработки, автоматизирующих процесс создания Web-документов (Microsoft Word, Microsoft FrontPage Express, Netscape Composer и др.).

Общая структура HTML документа: HTML подразумевает стандартизированную структуру построения HTML-документа. Теги HTML заключаются в угловые скобки, синтаксис их записи выглядит как <тег>.Практически все теги языка (есть исключения) парные. Пара состоит из «открывающего» и «закрывающего» тега, которые отличаются наличием в последнем символа «/». В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так: <тег>Обрабатываемое значение</тег>. Пример вложения двух тегов друг в друга: <тег1> …<тег2> Обрабатываемое значение</тег2> …</тег1>.Базовой конструкцией внутреннего кода Web-страницы является «Документ HTML». Называется она « тег верхнего уровня»и записывается так: <НТМL> Содержимое </НТМL>.Следующий прямоугольник «Заголовок документа» - это заголовок Web-страницы. Синтаксис тега заголовка в общем виде выглядит следующим образом:<НЕАD> Содержимое </HEAD>.Следующий объект HTML-документа – это раздел «Внешний заголовок», который, является вложенной командой тега <HEAD>. Внешний заголовок записывается следующим образом: <ТITLЕ> Внешний заголовок </ТIТLЕ>.Последняя структурная составляющая кода Web-страницы – раздел «Тело документа». Тело документа, описываемое тегами <BODY> </BODY>, включает в себя весь основной код разметки страницы, который определяет отображение html-документа на мониторе.

Абстрактная графическая схема в виде кода HTML:

<HTML>

<HEAD>

<ТITLE>Моя первая Web-страница</TITLE>

</HEAD>

</HTML>

Для создания Web-страницы необходимо:

1. С помощью Проводника Windows создать новую директорию на жестком диске ПК с названием «My site».

2. Внутри этой папки создать каталог с названием «IMAGES» (для размещения изображений).

3. Открыть Блокнот (Пуск > Программы > Стандартные > Блокнот) и набрать в нем полученный выше код.

4. Сохранить текущий файл в папке «My site» под именем index.html, воспользовавшись функцией «Сохранить как».

5. Открыть файл index.html в браузере двойным щелчком назначке данного файла в Проводнике.

Теги и атрибуты: Ряд тегов HTML составляет базовую структуру любого Web-документа. Весь HTML-код документа заключается между парой тегов <HTML>...</HTML>. Он заключается в пределах парного тега <HEAD>...</HEAD>, расположенного непосредственно после открывающего тега <HTML>. Между открывающим <HEAD> и закрывающим </HEAD> тегами записывается парный тег <TITLE>...</TITLE>, который используется для указания названия документа. Тело документа содержит основной текст документа и заключается в пределах парного тега <BODY>...</BODY>. Параметр BACKGROUND этого тега задает URL (имя) графического файла, используемого в качестве фона для HTML-документа. Другие параметры определяют цвета различных элементов документа: фона (параметр BGCOLOR), текста (параметр TEXT), гиперссылки (параметр LINK), выделенной гиперссылки (параметр ALINK) и просмотренной гиперссылки (параметр VLINK). Теги HTML могут быть парными или непарными. Парные тегивоздействуют на определенные фрагменты текста.

Регистр записи команд: HTML является языком программирования не чувствительным к регистру, в котором записываются команды (теги и имена их атрибутов). Интерпретатор браузера одинаково обработает директивы <HEAD>, <head>, <Head> или <hEaD>. Записывать теги можно как в строчном, так и в заглавном варианте.

Цветовые спецификации: Некоторые элементы языка HTML могут иметь в качестве атрибутов переменные, обозначающие цвета. Определить цвет при создании Web-страницы можно двумя методами: посредством задания специальных цветовых меток, обозначающих названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки. Для вывода цветных изображений на экран монитора применяется палитра RGB.

Таблица 1 – Стандартные цвета

Цвет	Значение RGB	Символьная метка	Цифровой код
Белый	255 255 255	White	#FFFFFF
Черный	0 0 0	Black	#000000
Зеленый	0 128 0	Green	#008000
Светло-зеленый	0 255 0	Lime	#00FF00
Серый	128 128 128	Gray	#808080
Светло-серый	192 192 192	Silver	#C0C0C0
Желтый	255 255 0	Yellow	#FFFF00
Темно-бордовый	128 0 0	Maroon	#800000
Синий	0 0 255	Blue	#0000FF

Продолжение таблицы 1

Темно-синий	0 0 128	Navy	#000080
Голубой	0 255 255	Aqua	#00FFFF
Изумрудный	0 128 128	Teal	#008080
Красный	255 0 0	Red	#FF0000
Пурпурный	128 0 128	Purple	#800080
Розовый	255 0 255	Fuchsia	#FF00FF
Оливковый	128 128 0	Olive	#80800

Теги для оформления элементов HTML-документа:

Создание абзацев:Для создания абзацев в тексте документа используется парный тег <Р>...</Р>. Параметр ALIGN этого тега позволяет определить режим выравнивания текста абзаца: значение center задает режим выравнивания по центру.

Для выравнивания текста по центру может также использоваться парный тег <CENTER>...</CENTER>, однако указание режима выравнивания в теге<Р> предпочтительнее, left – по левому краю, right – по правому краю, justify – по ширине страницы.

Если параметр ALIGN опущен, текст абзаца выравнивается по левому краю. Тег <Р> может использоваться как непарный (без закрывающего тега </Р>). Для вставки разрыва строки используется непарный тег <BR>.

Заголовки:Для оформления заголовков отдельных частей документа используются специальные парные теги <Нn>....</Нn>, где n – число от 1 до 6, соответствующее уровню заголовка. Параметр ALIGN этих тегов используется для указания режима выравнивания заголовков (аналогично соответствующему параметру тега <Р>).

Параметры шрифта: Для задания параметров шрифта предусмотрен целый ряд парных тегов <FONT>...</FONT>, которые определяют дополнительные параметры шрифта.

Параметр SIZE этого тега определяет размер шрифта в условных единицах от 1 (самый мелкий) до 7 (самый крупный).

Таблица 2 – Теги, определяющие параметры шрифта

Тег	Описание
	<В>...</В>	Полужирный шрифт
	<1>...</I>	Курсив
	<U>...</U>	Подчеркнутый текст
	<S>...</S>	Зачеркнутый текст
	<ТТ>...</ТТ>	Моноширинный шрифт
	<SUP>...</SUP>	Верхний индекс
	<SUB>...</SUB>	Нижний индекс

Вставка горизонтальной линии: Для вставки горизонтальных линий применяется непарный тег <HR>. Он позволяет отделять различные части текста друг от друга. Параметр ALIGN этого тега используется для указания режима выравнивания. Параметр SIZE позволяет указать толщину линии в пикселах, параметр WIDTH — ширину линии. Параметр COLOR позволяет задать цвет линии.

Размещение графических изображений:Для размещения графических изображений в документе используется непарный тег <IMAGE>. Параметр ALT позволяет задать альтернативный текст. Параметр ALIGN тега <IMAGE> определяет режим выравнивания графического изображения: top – выравнивание по верхней границе текста, midlle – по центру текста, botton – по нижней границе текста, left – по левому краю страницы, right – по правому краю страницы. Параметры WIDTH и HEIGHT – задают размеры (ширину и высоту соответственно). Параметр BORDER – определяет ширину рамки вокруг изображения в пикселах, параметры HSPACE и VSPACE – расстояние от изображения до текста документа по горизонтали и вертикали соответственно.

Создание списков:Для создания списков используется несколько взаимосвязанных тегов, которые определяют тип списка, его отдельные элементы и заголовок. Парный тег <UL>...</UL> определяет маркированный список. Он определяет границы списка и общие параметры форматирования всех его элементов. Параметр ALIGN этого тега задает режим выравнивания элементов списка (аналогично одноименному параметру тега <Р>). Параметр TYPE определяет тип маркеров списка: disk – круглые закрашенные маркеры, circle – круглые незакрашенные маркеры, square – квадратные маркеры. Атрибут TYPE позволяет управлять « буллет – стилем», то есть внешним видом и формой обозначающих каждое вхождение меток. В документе HTML нумерованный список можно представить с использованием тега <OL>:

<LI> Вхождение 1</LI>

<LI>Вхождение 2</LI>

<LI>Вхождение 3</LI>

</ОL>

Кроме нумерованных и маркированных списков язык разметки гипертекста позволяет создавать списки определений, для чего используется парный тег <DL>...</DL>. Каждый из элементов такого списка состоит из двух компонентов – самого термина и его определения. Для задания термина предназначен парный тег <DT>...</DT>, для задания определения термина – парный тег <DD>...</DD>.

Создание таблиц: Для создания таблицы используется парный тег < TABLE>... </TABLE>.Параметр ALIGN этого тега определяет режим выравнивания таблицы по горизонтали (но не текста в ячейках таблицы). Таблица может быть выровнена по центру (center), по левому краю (left) или по правому краю (right) страницы. Параметр WIDTH тега <TABLE> позволяет указать ширину таблицы в пикселах или в процентах от ширины окна браузера. Параметр BORDER определяет толщину линий, обрамляющих таблицу, в пикселах. Если линии не нужны, этот параметр должен иметь значение 0. Параметр CELLSPACING позволяет указать интервал между ячейками таблицы в пикселах. Значение параметра CELLPADDING определяет размеры полей ячеек в пикселах. Каждая из строк таблицы определяется парным тегом <TR>...</TR>. Параметр ALIGN этого тега управляет режимом выравнивания текста в ячейках строки по горизонтали (режимы выравнивания текста в ячейках аналогичны режимам выравнивания текста абзаца). Параметр VALIGN позволяет установить режим выравнивания текста по вертикали. Каждой из ячеек таблицы соответствует парный тег <TD>...</TD>. Параметры ALIGN и VALIGN этого тега имеют те же значения, что и соответствующие параметры тега <TR>, однако их действие распространяется только на отдельную ячейку таблицы. Параметр WIDTH определяет ширину ячейки, параметр BGCOLOR – цвет фона ячейки. Для создания ячеек, занимающих несколько строк или столбцов таблицы, используются параметры ROWSPAN и COLSPAN. Закрывающий тег </TD> является необязательным. Парный тег < CAPTION>...</CAPTION>позволяет задать заголовок таблицы. Для определения заголовков столбцов (шапки таблицы) используется парный тег <TN>...</TN>. Этот тег должен находиться в пределах парного тега <TR>. Содержимое ячеек шапки таблицы выделяется полужирным шрифтом.

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

Ссылки на разделы: Первый этап заключается в подготовке так называемой «закладки» – специальной метки с уникальным в пределах документа именем, посредством атрибута NAME. Для этого в том участке текста, где необходимо разместить метку, применяется следующая команда: <А NAME «имя_закладки»> ключевое слово или заголовок раздела </А>. Второй этап – создание самой ссылки при помощи такой команды: <А NAME «#имя_закладки»> текст ссылки</А>.

Принципы создания логической и физической структуры Web-сайта:

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

Такое имя файла рекомендуется присваивать всем стартовым документам сайта. В противном случае при обращении к какому-либо разделу посредством сокращенного URL без указания названия стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) браузер отобразит не саму Web-страницу, а перечень хранящихся в данной папке файлов.

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

Физическая структураподразумевает алгоритм размещенияфизических файлов по поддиректориям папки, в которой опубликован сайт.

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

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

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

1. Имена директорий, имена и расширения документов HTML и графических файлов назначаются с использованием символовтолько латинского алфавита и только в строчном регистре, именасозданных файлов и директорий не должны превышать по длиневосемь символов.

2. Присвоенные имена файлов документам HTML должны быть «смысловыми».

Рисунок 1 – Сравнение логической и физической структуры Web-сайта