рисунки
6. Дата получения задания: "5" сентября 2016 г.
Содержание
Введение
. Задание
. Обзор сайтов компаний по выбранному профилю
. Концептуальное проектирование сайта
. Логическое проектирование сайта
.1 Макет страниц сайта
.1.1 Главная страница -"Главная"
.1.2 Раздел "История кофе"
.1.3 Раздел "Сорта кофе"
.1.4 Раздел "Цены"
.1.5 Раздел "Заказать"
.2 Логическая структура сайта
. Физическое проектирование
.1 Описание языка программирования сайта HTML
.2 Инструменты программирования сайта
.3 Листинг программы, спроектированного сайта
Заключение
Список использованных источников
Введение
Сайт - совокупность электронных документов (файлов) частного лица или организации
в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом).
Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое - базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.
Главное предназначение сайта - это предоставление информации. И, несмотря на то, что в мире существует масса других способов передачи информации, огромное количество людей сегодня выбирает именно этот как наиболее эффективный.
Зачем нужен сайт крупной компании, небольшой фирме или индивидуальному предпринимателю.
Сайт компании или корпоративный сайт поможет найти новых клиентов, организовать представительство вашей фирмы на самой активно развивающейся рекламной площадке будущего - сети интернет. Он поможет создать дополнительные, а возможно и основные места продаж товаров или услуг. Это средство заявить о собственном присутствии на весь мир. Ведь именно на вашем сайте будут размещены все контактные данные, стоимость товаров и услуг, карта проезда к ближайшему офису или магазину, доступная любому пользователю в любое время дня и ночи. Таким образом, вы обретете больше новых клиентов, а постоянные никогда вас не потеряют.
Для продвижения сайта можно использоваться несколько способов:
различные виды традиционной рекламы;
электронные рассылки;
показы баннеров;
размещение информации на других сайтах;
обмен ссылками, кнопками, баннерами;
мини-сайты и коллажи; Классификация веб-сайтов. По доступности сервисов:
Открытые - все сервисы полностью доступны для любых посетителей и пользователей.
Полуоткрытые - для доступа необходимо зарегистрироваться (обычно бесплатно).
Закрытые - полностью закрытые служебные сайты организаций (в том числе корпоративные сайты), личные сайты частных лиц. Такие сайты доступны для узкого круга людей. Доступ новым людям обычно даётся через т. н. инвайты (приглашения).
По природе содержимого:
Статические - все содержимое заранее подготавливается. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.
Динамические - содержимое генерируется специальными скриптами
(программами) на основе других данных из любого источника. По физическому расположению:
Внешние сайты сети Интернет.
Локальные сайты - доступны только в пределах локальной сети. Это могут быть как корпоративные сайты организаций, так и сайты частных лиц в локальной сети провайдера.
По схеме представления информации, еe объёму и категории решаемых задач можно выделить следующие типы веб-ресурсов:
Интернет-портал - многокомпонентная разветвлённая структура, скомпонованная из функционально самодостаточных сайтов самостоятельных организаций или подразделений корпоративной структуры.
Информационные ресурсы:
Тематический портал - это очень большой веб-ресурс, который предоставляет исчерпывающую информацию по определённой тематике. Порталы похожи на тематические сайты, но дополнительно содержат средства взаимодействия с пользователями и позволяют пользователям общаться в рамках портала (форумы, чаты) - это среда существования пользователя. Интернет-представительства владельцев бизнеса (торговля и услуги, не всегда связанные напрямую с Интернетом):
Сайт-визитка - содержит самые общие данные о владельце сайта (организация или индивидуальный предприниматель). Вид деятельности, история, прайс-лист, контактные данные, реквизиты, схема проезда. Специалисты размещают своде резюме. То есть подробная визитная карточка.
Корпоративный сайт - содержит полную информацию о компании-владельце, услугах/продукции, событиях в жизни компании. Отличается от сайта-визитки и представительского сайта полнотой представленной информации, зачастую содержит различные функциональные инструменты для работы с контентом (поиск и фильтры, календари событий, фотогалереи, корпоративные блоги, форумы). Может быть интегрирован с внутренними информационными системами компании-владельца (КИС, CRM, бухгалтерскими системами). Может содержать закрытые разделы для тех или иных групп пользователей - сотрудников, дилеров, контрагентов и пр.
Каталог продукции - в каталоге присутствует подробное описание товаров/услуг, сертификаты, технические и потребительские данные, отзывы
экспертов и т. д. На таких сайтах размещается информация о товарах/услугах, которую невозможно поместить в прайс-лист.
Интернет-магазин - сайт с каталогом продукции, с помощью которого клиент может заказать нужные ему товары. Используются различные системы расчётов: от пересылки товаров наложенным платежом или автоматической пересылки счета по факсу до расчётов с помощью пластиковых карт.
Промо-сайт - сайт о конкретной торговой марке или продукте, на таких сайтах размещается исчерпывающая информация о бренде, различных рекламных акциях (конкурсы, викторины, игры и т. п.).
Сайт-квест - Интернет-ресурс, на котором организовано соревнование по разгадыванию последовательности взаимосвязанных логических загадок. Веб-сервис - сайт, созданный для выполнения каких-либо задач или предоставления услуг в рамках сети WWW:
Доска объявлений представляет собой ресурс, на котором есть
возможность размещения публичного объявления о продаже или покупке товаров и услуг, также возможно оставить какую-либо информацию краткого содержания.
Каталог сайтов - это ресурс, на котором размещаются сайты и блоги, например, Open Directory Project. Каталоги бывают платные и бесплатные. Также каталоги могут способствовать продвижению ресурса, который размещается в каталоге сайтов.
Поисковые сервисы - например, Yahoo!, Google.
Почтовый сервис.
Веб-форумы.
Блоговый сервис.
Файлообменный пиринговый сервис - например, Bittorrent.
Облачное хранилище данных - например, Skydrive. Сервис редактирования данных - например, Google Docs.
Фотохостинг - например, Picnik, ImageShack, Panoramio, Photobucket.
Видеохостинг - например, YouTube, Dailymotion.
1. Задание
Формулируется задание на проект в размере от одной страницы, связанное с темой курсовой.
. Создать сайт компании по любому профилю (указывается конкретный профиль и название своей компании), состоящий не менее чем из двенадцати страниц, где одна из страниц является главной, а другие подчиненные.
. Предусмотреть структуру иерархии страниц не менее трех уровней.
. Количество разделов на странице в пределах трех-шести.
. Предусмотреть возможность перехода, с любого уровня на предыдущий, а также на главную страницу сайта.
. Каждая страница должна содержать заголовок, текстовую информацию, а также графические объекты. Количество графических объектов должно быть не менее двенадцати на весь сайт.
. На главной странице заголовок названия фирмы должен быть представлен в динамическом режиме, т.е. осуществлять движение влево - вправо.
. На сайте должна быть предусмотрена связь с одной таблицей из базы данных MS Access, содержащей не менее пяти полей и не менее десяти записей
. На одной из страниц сайта должна быть предусмотрена возможность заполнения стандартной формы, состоящей из не менее семи полей, где одно из полей имеет возможность подставлять имеющиеся значения. Форма должна иметь элементы управления: очистки формы и отправления формы по сети (кнопки).
2. Обзор сайтов компаний по выбранному профилю
Рассмотрим 3 сайта, которые занимаются продажей кофе
Первый сайт - #"justify">Рис. 1. Главная страница.
Рис. 2. Раздел "Кофе в зернах"
Второй сайт - #"justify">Рис. 3. Главная страница
Рис. 4. Раздел "Зерновой кофе"
Третий сайт - https://1coffee.ru/
Рис. 5. Главная страница
Рис. 6. Раздел "Зерновой кофе"
3. Концептуальное проектирование сайта
Всемирная паутина охватила абсолютно все сферы жизни человека. Обладание собственным ресурсом - это возможность рассказать о себе людям практически в любой точке земного шара. Вы можете спросить - а зачем о нашем компании знать в другом городе. Да и прорекламировать себя можно и через газету, и через местное радио и телевидение. Все дело в том, что искать информацию гораздо проще в Интернете. Человек уже прекрасно обходится и без телевизора, и без радио, и без газет, ведь, заглянув в сеть, можно получить всю нужную информацию. Даже для того, чтобы узнать погоду, не обязательно вставать и подходить к окошку. Прогноз погоды можно получить быстрее, чем сделать эти пару шагов.
Прежде всего, надо отметить, что сайт компания - это второе "я" заведения. Будучи безмолвным помощником, он, в то же время, красноречиво предоставит всю интересующую вашего гостя информацию. Сайт может выполнять как роль визитной карточки заведения, так и полноценного "виртуального компания".
Сайт компания должен быть изящно и солидно оформлен. Предлагая своим клиентам различные услуги, необходимо сопровождать каждое из них фотографией. Достаточно часто при помощи сети Интернет потребители ищут компания.
Цели создания сайта:
Создание сайта "Темной Кофейни" должно:
привести дополнительных покупателей,
рассказать об истории кофе в целом,
рассказать об истории некоторых сортов кофе.
Дизайн сайта:
Простой, ничего не "мозолит" глаза, светлая основная часть сайта.
На сайте есть удобное меню.
За 1 клик посетитель может перейти на любую нужную информацию.
4. Логическое проектирование сайта
.1 Макет страниц сайта
Данный сайт состоит из 14 страниц. На всех 14 страницах будут присутствовать панель меню и текстовая информация с изображениями (рис.7). В панели меню находится 5 разделов.
Рис. 7. Шаблон для всех страниц сайта.
.1.1 Главная страница -"Главная"
При входе на сайт мы попадаем на главную страницу (рис.8). На главной странице содержится небольшая информация для любителей кофе о самом напитке.
Рис. 8. Главная страница.
4.1.2 Раздел "История кофе"
На данной странице представлен краткий экскурс в историю кофе. (рис 9).
Рис. 9. Раздел "История кофе"
.1.3 Раздел "Сорта кофе"
Это самый большой раздел сайта, он содержит информацию о продукции, которую продает наша компания. Страница, на которой выбирается сорт по странам представлена на рис. 10
Рис. 10 Страница выбора сорта по стране
Нажав на флаг любой из предложенных стран, или гиперссылку под флагом, клиент попадет на предложенные сорта кофе из этой страны. Перейдем по ссылке в раздел колумбийских сортов (рис. 11)
Рис. 11. Сорта колумбийского кофе
Из рисунка видно, что наша компания предлагает 2 сорта кофе из Колумбии. Выбрав любой из них, мы попадем на страницу с описанием сорта. (рис. 12)
Рис. 12 Описание сорта Colombia Excelso
Слева имеется меню навигации, с помощью которого можно вернуться на раздел назад, на 2 раздела назад или на главную страницу.
.1.4 Раздел "Цены"
В разделе "Цены" представлена таблица, в которой покупатель может ознакомиться с ценами на продукцию нашего магазина. (рис. 13)
Рис. 13. Прайс лист
.1.5 Раздел "Заказать"
В разделе "Заказать" наши покупатели могут непосредственно оформить заказ, заполнив ряд полей, представленных на рис. 14
Рис. 14 Форма заказа
4.2 Логическая структура сайта
Логическая структура сайта - это система ссылочного взаимодействия между страницами виртуального ресурса. Она должна продумываться на самых ранних этапах разработки сайта и являться основой функциональности дизайна.
Основные модели логической структуры:
. Строгая линейная структура ресурса. Используется достаточно редко, поскольку не обеспечивает предоставление необходимого удобства - пользователи могут переходить только от фактической страницы к следующей. Очевидная простота в данном случае противопоставлена свободе выбора, что не каждому человеку может понравиться.
Если линейная структура и применяется, то с определенными изменениями: возможность пропуска определенных страниц, наличие боковых ответвлений и т.д.
Основные сферы использования линейной структуры:
Создание презентаций в режиме реального времени;
Пошаговое описание процессов.
Среди основных преимуществ рассматриваемой модели следует выделить предсказуемость поведения пользователей и упрощение процедур разработки сайта. Линейную структуру не имеет смысла использовать при реализации крупных проектов, поскольку она не приспособлена для представления информации в больших объемах.
. Логическая структура ресурса, так называемая "решетка". Наиболее часто встречается при создании интернет-магазинов и представляет собой линейную структуру, функционирующую в двух направлениях, подразумевающих присутствие вертикальной и горизонтальной связи между страницами.
. Логическая структура сайта, так называемое "дерево". Наиболее распространенная модель, выстраиваемая в определенной иерархической последовательности. Посетители получают полную свободу управления глубиной анализа ресурса и могут заходить на страницы любого уровня.
Данная структура может иметь негативное влияние, если пользователям придется осуществлять большое количество действий для достижения необходимых результатов, а вариативность выбора способна потребовать большого количества времени на изучение предоставленных возможностей.
. Логическая структура, так называемая "паутина". Ее может быть связано с желанием обеспечить выразительность предоставления информации или обычным стечением обстоятельств. Определенная страница может ссылаться на другой источник информации, что и обеспечивает максимальную полноту получения данных.
Верный выбор логической структуры позволит оптимально отразить потребности посетителей, станет гарантией высокого качества юзабилити и максимальной эффективности ресурс, поэтому важность структурной разработке нельзя недооценивать.
В нашем сайте мы использовали древовидная логическая структура сайта (рис.22).
Рис.22. Логическая структура сайта.
5. Физическое проектирование
.1 Описание языка программирования сайта HTML
Изучение языка HTML нужно начать с того, что необходимо понять, что это за язык. HTML - это Hyper Text Markup Language - язык гипертекстовой разметки. HTML - компьютерный язык, а следовательно он имеет свои собственные правила (синтаксис), которые необходимо соблюдать.- это язык разметки, значит он берет определенные части документа и придает им особый.- это язык гипертекстовой разметки. Гипертекстом можно назвать текст в любом формате, некоторые части текста которого, могут ссылаться на другие части этого текста, что позволяет быстро переходить от одной части текста к другой. На сегодняшний день язык HTML существенно усовершенствован. Его прекрасно дополняют технологии JavaScript, DHTML, CSS, PHP и др., что позволяет использовать новые возможности, но основой всего этого остаются все те же стандартные теги, которые и задают внешний вид web-страницы. Сейчас уже никого не удивишь таким за мудрёным словом, как браузер, и каждый первоклашка скорей всего знает, что это такое и для чего он предназначен. Так вот браузер, считывая информацию со страниц размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Все существующие теги заключены в угловые скобки (< тег >), это и указывает браузеру на то, что перед ним тег, который ориентирует на определенное отображение страницы, причем сами теги на экране не отображаются. Многие теги имеют свои атрибуты (свойства, параметры), которые прописываются в теге и придают обозначенному этим тегом объекту(изображению, тексту, ссылке, слову и т.д.), определенное значение. Регистр букв в наименовании тега значения не имеет. Почти все теги являются парными, то есть существует открывающий "зону действия" тег (< тег >), и соответственно закрывающий (< /тег >). Покажу это на примере:
Гипертекстовый документ хранится в файлах с расширением HTML или HTM. Существуют различные редакторы языка HTML, но рекомендуется использовать стандартное средство WINDOWS - блокнот. Большинство тегов HTML являются контейнерами и имеют открывающую и закрывающую форму (по аналогии с открывающей и закрывающей скобкой), то есть их действие распространяется на то, что заключено между открывающей и закрывающей формой тега. Открывающая форма тега отличается от закрывающей формы тега тем, что в закрывающей форме тега перед названием тега ставится наклонная вправо черта (флеш). Название тега и все его атрибуты, если они указываются, заключается в угловые скобки, например:
<HTML>
содержание документа
</HTML>
Структура файла HTML, которой следует придерживаться при написании WEB-страниц:
Заголовок оформляется тегом HEAD;
основная часть документа, может быть телом документа или кадром и оформляется соответственно тегом BODY или FRAMESET.
Заголовок и тело (кадр) заключаются в контейнер тега HTML, который определяет границы документа HTML:
<HTML>
<HEAD>
содержимое заголовка
</HEAD>
<BODY>
содержимое документа (тело)
</BODY>
</HTML>
Тег HTML не является обязательным, так как браузер подставит этот тег, если он отсутствует в файле, но не надейтесь на браузер (их много!), так как неизвестно каким из них будет пользоваться потенциальный читатель документа, и как его браузер будет интерпретировать документ при отсутствии в нём тега HTML.
Теги, размещаемые в заголовке, представлены в таблице 1
Таблица 1
ТегАтрибут и значение атрибутаПояснение<TITLE> </TITLE >Внешний заголовок документа (титул), будет отображаться в заголовке окна браузера. <META> Представление дополнительной информации о документеName="author" | "keywords"Определяет тип данных, например: автор или ключевые слова (для поисковых программ) Content="имя автора" | "слово 1, слово 2…." Содержание, например: имя автора или перечень ключевых слов. <BASE> Используется для разрешения относительных ссылок. Особенно полезна например, при переносе страницы в другой каталог.HREF="#"justify">Таблицы дают возможность представлять данные в компактном виде, а также разбивать страницу на колонки, строки и ячейки, не отображая разделительных линий, и помещать на эти участки страницы тексты, изображения с различными стилями форматирования. Это одно из средств языка разметки HTML, которое даёт неограниченные возможности для создания оригинального дизайна страниц. Таблица строится по строкам. В строках содержатся ячейки, количество которых определяется количеством столбцов таблицы. В таблице 2 представлены тэги.
Таблица 2. Тэги для построения таблиц
ТэгПояснение<TABLE> </TABLE >Тэг-контейнер, в котором размещается содержимое таблицы.<TR> </TR>Тэг-контейнер, в который помещаются ячейки с их содержимым. Количество ячеек равно, в общем случае, количеству столбцов.<TH> </TH>Тэг-контейнер, который используется для описания ячеек с заголовком столбцов (строк) таблицы. Заголовок столбцов таблицы будет располагаться в первой строке, а заголовок строк - в левом столбце. Текст отображается полужирным шрифтом по центру ячейки.<TD> </TD>Тэг-контейнер, который используется для описания содержимого ячеек таблицы.<CAPTION> </CAPTION>Тэг-контейнер, в котором размещается заголовок (название) таблицы.
5.2 Инструменты программирования сайта
сайт гипертекстовый браузер заказ
Для создания нашего сайта был использован Notepad. Notepad прекрасно подходит для создания кода, поскольку никак не влияет на то, что мы пишем. Это даёт полный контроль над текстом. При использовании Notepad или иного простого текстового редактора только вы отвечаете за то, что написано.
Преимущества текстового редактора Notepad:
Этот текстовой редактор предоставляется абсолютно бесплатно;
Есть возможность отмены действия. Допустим: Вы исправили код, а он выдает ошибку. Вы не помните, что было до этого. Чтобы вернуть в обратное положение, Вам достаточно нажать "Правка"-"Отмена" или CTRL+Z до тех пор, пока Вас не устроит состояние заданного;
Можете одновременно работать с другими файлами, что очень удобно;
Присутствует подсветка синтаксиса (каждый вид элемента окрашен в свой цвет, так же можно кликнуть по открывающему тегу, в результате программа предоставит Вам закрывающий тег);
Поддержка плагинов;
Это основные достоинства. Прочие возможности и удобства узнаете в процессе работы.
Ниже приведен пример кодировки с помощью Notepad (рис. 23).
Рис. 23. Кодировка раздела
5.3 Листинг программы, спроектированного сайта
Код главной страницы
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Темная Кофейня</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<!-- content begins -->
<div id="main">
<div id="right">
<div id="logo">
<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>
</div>
<div id="menu">
<ul>
<li id="button1"><a href="главная.html" title="">Главная</a></li>
<li id="button2"><a href="история.html" title="">История кофе</a></li>
<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>
<li id="button4"><a href="цены.html" title="">Цены</a></li>
<li id="button5"><a href="заказать.html" title="">Заказать</a></li>
</ul>
</div>
<div id="righttop"></div>
<h4>Кофе...</h4>
<div>
<img src="images/img01.jpg" title="" alt="" style="padding-left: 20px; padding-right: 10px; float:left;"/>
<p>На севере и на юге, на западе и на востоке, по всему миру кофе является одним из самых любимых напитков.</p>
<p>Но что же такого особенного в кофе? Это же не более чем вода с привкусом зерен небольшого деревца, обладающего приятным стимулирующим эффектом. Помимо того, какой важностью обладает кофе для мировой экономики (выращивание кофе, подготовка зерен и дистрибуция кофе по всему миру обеспечивают рабочими местами около 60 миллионов человек), история кофе покрыта тайной, но в то же время именно этот напиток открывает перед нами мир новых возможностей.</p>
<p>О прошлом кофе ходит много легенд, начиная от духовных посвящений и заканчивая историями о козах, увлекшихся кофейными зернами. Этот напиток запрещали, затем разрешали пить только мужчинам, а с его приготовлением даже связаны особые ритуалы.</p>
</div>
</div>
</div>
<div id="left">
<div id="header"></div>
<div id="lefttop"></div>
<h3>Навигация</h3>
<div>
<ul>
<li><a href="главная.html"> На главную </a></li>
<li><li><a href="javascript:history.back();">Назад</a></li></li>
</ul>
</div>
</div>
<div id="mainbot"></div>
<!--content ends -->
</body>
</html>
Код страницы "История кофе"
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Темная Кофейня - История кофе</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<!-- content begins -->
<div id="main">
<div id="right">
<div id="logo">
<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>
</div>
<div id="menu">
<ul>
<li id="button1"><a href="главная.html" title="">Главная</a></li>
<li id="button2"><a href="история.html" title="">История кофе</a></li>
<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>
<li id="button4"><a href="цены.html" title="">Цены</a></li>
<li id="button5"><a href="заказать.html" title="">Заказать</a></li>
</ul>
</div>
<div id="righttop"></div>
<h4>История кофе</h4>
<div>
<img src="images/history.jpg" title="" alt="" style="padding-left: 20px; padding-right: 10px; float:right;"/>
<p>Где именно впервые был обнаружен кофе, и как он распространился по всей планете, точно никто сказать не может. По этому поводу существует множество неподтвержденных легенд. Например, одна из них гласит, что впервые кофе и его свойства были обнаружены эфиопским пастухом вблизи города Каффа. Считается что он обнаружил действие кофе, после того как заметил, что его козы, объевшись кофейных зерен становились необычайно бодрыми и подвижными.</p>
<p>Достоверным считается тот факт, что рабы из стран вблизи красного моря, а именно Судана и Йемена добавляли в еду отдельные элементы кофейных зерен. Таким образом, кофе позаимствовали у эфиопов арабы. Однако они его употребляли в незнакомом для нас виде. Они измельчали свежие зерна, мешали их с молоком и или жиром и скатывали в шарики. Их они употребляли для общего укрепления организма.
<p>Готовить напиток из кофейных зерен люди стали только в XII веке. Арабы пили его с молоком и различными пряностями. К XV веку напиток стал настолько популярным в Йемене, что европейцы обратили на него внимание и захотели его вывезти в Европу. Однако арабы этому всячески препятствовали. В конечном счете, кофе попал в Европу только в XVII веке, после того, как зерна попросту выкрали с территории Аравийского полуострова.</p>
<p>Первые заведения, в которых готовили и подавали кофе, появились в Мекке, Саудовская Аравия. Эти места стали очень популярными, и посетители проводили в них много времени, общаясь между собой за чашечкой кофе. В целом же кофе достаточно плотно проник в культуру арабов. Об этом свидетельствует интересный факт: женщина в Турции могла на законных основаниях требовать развод, если муж не мог организовать ей чашку кофе в день.
В Россию кофе попал в XVII веке из государств ближнего или среднего востока, с которыми велась активная торговля. Точным годом появления считается 1665. Особой популярности напиток сразу не набрал. Его распространению мешали религиозные предрассудки.
Кофе стал популяризироваться при правлении Петра I. Будучи в Европе он сильно полюбил этот напиток. После возвращения он активно его распространял, вводил обычаи пить кофе во время публичных мероприятий и различных приемов.
Окончательно же популярность кофе закрепили русские военные офицеры, побывавшие в Европе после войны 1812 года. Вернувшись, они настолько популяризировали этот напиток, что его стали пить на званых светских вечерах. Вскоре стали появляться первые кофейни, которые первое время, были доступны только знати.</p></p>
</div>
</div>
</div>
<div id="left">
<div id="header"></div>
<div id="lefttop"></div>
<h3>Навигация</h3>
<div>
<ul>
<li><a href="главная.html"> На главную </a></li>
<li><a href="javascript:history.back();">Назад</a></li>
</ul>
</div>
</div>
<div id="mainbot"></div>
<!--content ends -->
</body>
</html>
Код страницы "Сорта кофе"
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Темная Кофейня - Сорта кофе</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<!-- content begins -->
<div id="main">
<div id="right">
<div id="logo">
<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>
</div>
<div id="menu">
<ul>
<li id="button1"><a href="главная.html" title="">Главная</a></li>
<li id="button2"><a href="история.html" title="">История кофе</a></li>
<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>
<li id="button4"><a href="цены.html" title="">Цены</a></li>
<li id="button5"><a href="заказать.html" title="">Заказать</a></li>
</ul>
</div>
<div id="righttop"></div>
<h4>Сорта кофе</h4>
<div>
<a href="колумбийскийкофе.html"> <img src="images/columbia.gif" width="200" height="110" alt="" style="padding-left: 250px; padding-right: 100px;"/> </a>
<br>
<p><a href="колумбийскийкофе.html">Колумбийский кофе </a> в больших количествах продают на рынках всего мира. Можно даже сказать, что "колумбийский кофе" стал синонимом "хорошему кофе". Но это верно лишь отчасти. Вкус колумбийского кофе сбалансирован, кофе обладает хорошей крепостью, кислинкой и ароматом. </p>
<br>
<a href="мексиканскийкофе.html"> <img src="images/mexica.gif" width="200" height="110" alt="" style="padding-left: 250px; padding-right: 100px;"/> </a>
<p><a href="мексиканскийкофе.html"> Мексиканский кофе </a> Центрально-американский сорт. Легкий кофе. Аромат не ярок. Этот сорт для тех, кто отдает преимущество черному, но не крепкому кофе, который напоминает по вкусу сухое белое вино.</p>
<br>
<a href="костариканскийкофе.html"> <img src="images/costarica.gif" width="200" height="110" alt="" style="padding-left: 250px; padding-right: 100px;"/> </a>
<p><a href="костариканскийкофе.html"> Костариканский кофе </a> Центрально-американский сорт арабики. Отличный кофе. Аромат ярко выражен. Вкус горьковатый, насыщенный. Латиноамериканцы говорят - "Хороший мексиканский кофе - это ободрительный кофе, а хороший костариканский кофе - это жгучий кофе". </p>
</div>
</div>
</div>
<div id="left">
<div id="header"></div>
<div id="lefttop"></div>
<h3>Навигация</h3>
<div>
<ul>
<li><a href="главная.html"> На главную </a></li>
<li><a href="javascript:history.back();">Назад</a></li>
</ul>
</div>
</div>
<div id="mainbot"></div>
<!--content ends -->
</body>
</html>
Код страницы "Цены"
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Темная Кофейня - Прайс лист</title>
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<!-- content begins -->
<div id="main">
<div id="right">
<div id="logo">
<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>
</div>
<div id="menu">
<ul>
<li id="button1"><a href="главная.html" title="">Главная</a></li>
<li id="button2"><a href="история.html" title="">История кофе</a></li>
<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>
<li id="button4"><a href="цены.html" title="">Цены</a></li>
<li id="button5"><a href="заказать.html" title="">Заказать</a></li>
</ul>
</div>
<div id="righttop"></div>
<h4>Прайс лист</h4>
<div>
<table border="1" style="background-color:FFFFCC;border-collapse:collapse;border:1px solid #000000;color:000000;width:100%" cellpadding="10" cellspacing="10">
<tr>
<td><b>Сорт кофе</b></td>
<td><b>Вес</b></td>
<td><b>Цена</b></td>
</tr>
<tr>
<td>Colombia Excelso</td>
<td>800г</td>
<td>1350р</td>
</tr>
<tr>
<td>Huila Excelso</td>
<td>800г</td>
<td>1400р</td>
</tr>
<tr>
<td>Tarrazzu</td>
<td>750г</td>
<td>1300р</td>
</tr>
<tr>
<td>Turrialba</td>
<td>850г</td>
<td>1600р<td>
</tr>
<tr>
<td>Mexico Altura</td>
<td>800г</td>
<td>1550р</td>
</tr>
<tr>
<td>Oaxaca Pluma</td>
<td>700г</td>
<td>1200р</td>
</tr>
</table>
</div>
</div>
</div>
<div id="left">
<div id="header"></div>
<div id="lefttop"></div>
<h3>Навигация</h3>
<div>
<ul>
<li><a href="главная.html"> На главную </a></li>
<li><li><a href="javascript:history.back();">Назад</a></li></li>
</ul>
</div>
</div>
<div id="mainbot"></div>
<!--content ends -->
</body>
</html>
Код страницы "Заказать"
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Темная Кофейня - Сделать заказ</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<!-- content begins -->
<div id="main">
<div id="right">
<div id="logo">
<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>
</div>
<div id="menu">
<ul>
<li id="button1"><a href="главная.html" title="">Главная</a></li>
<li id="button2"><a href="история.html" title="">История кофе</a></li>
<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>
<li id="button4"><a href="цены.html" title="">Цены</a></li>
<li id="button5"><a href="заказать.html" title="">Заказать</a></li>
</ul>
</div>
<div id="righttop"></div>
<h4>Оформить заказ</h4>
<div>
<form metod=get>
<p>
<b> Ваше имя </b>
</p>
<img src="images/prozr.png" height = "5" width ="10"><img src="images/prozr.png" height = "5" width ="10"><input type="text" name="answer" size="50" value=" ">
</form>
<form><p><b>Город</b></p>
<img src="images/prozr.png" height = "5" width ="10"><img src="images/prozr.png" height = "5" width ="10"><input type="text" name="answer">
</form>
<form><p><b>Телефон для связи </b></p>
<img src="images/prozr.png" height = "5" width ="10"><img src="images/prozr.png" height = "5" width ="10"><input type="text" name="answer">
</form>
<form><p><b>Какой кофе хотите приобрести?</b></p>
<p><select name="city">
<option>Colombia Excelso (Колумбия)</option>
<option>Huila Excelso (Колумбия) </option>
<option>Mexico Altura (Мексика)</option>
<option>Oaxaca Pluma (Мексика)</option>
<option>Tarrazzu (Коста-Рика)</option>
<option>Turrialba (Коста-Рика)</option>
</select>
</p>
</form>
<form><p><b>Сколько упаковок Вы хотите приобрести?</b></p>
<p><select name="city">
<option>1</option>
<option>2 </option>
<option>3</option>
<option>4</option>
<option>оптом</option>
</select>
</p>
</form>
<form><p><b>Способ оплаты</b></p>
<p><select name="city">
<option>Наличные</option>
<option>Карта </option>
</select>
</p>
</form>
<form><p><b>Адрес доставки</b></p>
<img src="images/prozr.png" height = "5" width ="10"><img src="images/prozr.png" height = "5" width ="10"><input type="text" name="answer">
</form>
<form><p><b>Дополнительная информация</p></b>
<p>
<textarea rows=5 cols=50></textarea>
</p>
</form>
<form>
<p><input type="submit" value="Очистить">
<input type="reset" value="Отправить">
</p>
</form>
</div>
</div>
</div>
<div id="left">
<div id="header"></div>
<div id="lefttop"></div>
<h3>Навигация</h3>
<div>
<ul>
<li><a href="главная.html"> На главную </a></li>
<li><li><a href="javascript:history.back();">Назад</a></li></li>
</ul>
</div>
</div>
<div id="mainbot"></div>
<!--content ends -->
</body>
</html>
Заключение
HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Веб-страницы.
Т.е. Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (т.е. придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением.htm или.html.
Тэги HTML сообщают браузеру информацию о структуре и особенностях форматирования Веб-страницы. Каждый тэг содержит определенную инструкцию и заключается в угловые скобки <>. Большинство тэгов состоят из открывающей и закрывающей частей и воздействуют на текст, заключенный внутри.
Для более быстрого знакомства с HTML-кодом советую просматривать понравившуюся вам страницу в режиме "В виде HTML". Для этого в браузере надо выбрать пункт меню
"Вид" - "В виде HTML".
После этого откроется новое окно с исходным текстом HTML-кода. Просматривая готовый код HTML, вы узнаете, как тэги языка применяются более опытными программистами. Кроме того, это один из способов преодоления различных проблем, возникающих время от времени.
Что такое Веб-страница? По сути дела - это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в скобки). Т.е., исходя из вышеизложенного, Веб-страницы можно набрать в любом текстовом редакторе (Блокнот, WordPad, Word и т.д.). В этом случае абсолютно все надо набирать своими ручками. Основной плюс такого метода - код получается абсолютно минимизированным, т.е. "вес" такой html-страницы будет минимальным. К недостаткам следует отнести тот факт, что пользователь должен очень хорошо знать язык html-разметки, да и результаты своего труда нельзя будет сразу посмотреть. Поэтому таким методом создания Вэб-страниц практически никто не пользуется. Порекомендовать его можно разве что для создания простеньких Вэб-страничек если нет возможности использования специализированных программ.
Список использованных источников
1.Методические указания по языку HTML
.Б.Лоусон, Р.Шарп. Изучаем HTML5. 2011г.
3.Брайан Хоган. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2012г.
.Мэтью Мак-Дональд. HTML5. Недостающее руководство 2010г.
.Бен Фрейн. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2014г.
6.http://htmlbook.ru/samhtml/vvedenie-v-html
7.http://zvirec.com/html_book.php
.https://www.draw.io/
.http://www.spb.prodaga-kofe.ru/
.http://www.coffeelb.ru/
.https://1coffee.ru/