Преподаватель который помогает студентам и школьникам в учёбе.

Разработка web-страницы туристического предприятия

Содержание:

Введение

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

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

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

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

Цель работы: разработать веб-страницу туристического предприятия.

Задачи работы:

- изучить современные технологии создания сайтов;

- разработать веб-страницу туристического предприятия.

1 Современные технологии создания сайтов

1.1 Статически и динамические сайты

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

Для создания статических сайтов не требуется глубоких знаний в области программирования, достаточно иметь дизайнерские навыки и подходящую визуальную среду разработки (Microsoft FrontPage, Macromedia Dreamweaver). С другой стороны, такие сайты трудоемки и дороги в сопровождении.

Все статические сайты созданы с помощью языка гипертекстовой разметки HTML. Язык гипертекстовой разметки HTML (HyperText Markup Language) служит для наглядного и хорошо структурированного представления информации в сети Интернет, который приобрел широкую популярность в середине 90-х годов. Программы, интерпретирующие данную разметку и выводящие информацию на экран, стали называться браузерами. На сегодняшний день известно много их разновидностей: Firefox, Chrome, Opera, Internet Explorer и др [29].

Современные браузеры имеют довольно широкие возможности для представления информации и взаимодействию пользователей в сети Интернет. Кроме форматированного вывода текста они позволяют отображать изображения, видео, проигрывать музыку. Встроенный в HTML-документ язык JavaScript позволяет анализировать и обрабатывать содержимое страницы, взаимодействовать с сервером (откуда загружен документ), динамически менять свойства и содержание документа в окне браузера. По сути, на сегодняшний момент, браузер стал еще одной платформой взаимодействия пользователя с информацией и другими пользователями, а для ряда мобильных устройств составной частью операционной системы.

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

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

- уменьшение роли вмешательства администратора путем автоматизации создания контента сайта и предоставления структурированной информации по запросу;

- вся информация легко каталогизируется с использованием специализированных баз данных или простых хранилищ;

- возможны такие функции, как принятие данных от пользователя, обработка и сохранение их на сервере;

- выполнение различных пользовательских действий: размещение заказов, вычисление сложных арифметических действий и работа с информацией из базы данных;

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

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

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

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

Рисунок 1 - Структура динамического веб-сайта

База данных — структурированный упорядоченный набор данных. Система управления базами данных (СУБД) - программа, предназначенная для организации и ведения базы данных.

MySQL - бесплатная свободно-распространяемая СУБД. Данные в базе MySQL хранятся в форме таблиц. При создании таблицы задаются ее столбцы, дальнейшие манипуляции (добавление, изменение, удаление) производятся со строками. Для управления базой данных используется язык SQL [16].

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

База данных содержит в себе таблицы. Таблицы базы данных состоят, как и обычные таблицы, из строк и столбцов. Столбцы имеют заранее определенное название и тип данных, а строки хранят непосредственно сами данные.

Язык PHP имеет встроенные функции для работы с MySQL и многими другими базами данных. Это позволяет хранить в базе данных пользователей, сообщения, содержание страниц, статистику сайта и т.п. При запросе страницы PHP обращается к базе данных, получает необходимые данные и на основе их формирует ответ пользователю (чаще всего это HTML страница) [8].

Рисунок 2 – Схема работы сервера СУБД

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

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

Для веб-сервера, как правило, используется специально выделенный компьютер, работающий круглосуточно и имеющий постоянное подключение к Интернет. Так как к серверу могут одновременно обращаться множество клиентов, сервер должен быть быстродействующим и надежным [31].

Часто требуется не просто выдавать пользователю готовые ресурсы, а производить вычисления «на лету» и выдавать их результат. Например, когда один пользователь оставляет другому сообщение на сайте, сервер должен проверить его и сохранить у себя, чтобы потом показать адресату. В таких случаях возможностей HTML недостаточно и необходимо создавать специальные программы с помощью языков программирования. Одним из таких языков является PHP [12].

PHP (PHP Hypertext Preprocessor) - серверный язык создания приложений, ориентированный на веб-разработку. PHP код может быть внедрен в HTML- страницу и будет выполняться при каждом ее посещении. Код PHP интерпретируется веб-сервером и генерирует HTML-код или другой вывод (например, графику), который отсылается браузеру пользователя. Так как PHP интерпретируемый язык, он не требует компиляции (преобразования в машинный код в файле .exe) - программы хранятся на веб-сервере как обычные текстовые файлы.

Рисунок 3 - Трехкомпонентная архитектура веб-приложений, реализуемых на языке PHP

PHP-программа запускается при вводе ее адреса в строке браузера или отправке ей данных формы.

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

1. Пользователь вводит логин и пароль в HTML-форму и жмет кнопку отправки.

2. Данные через Интернет отправляются на веб-сервер. Браузер начинает ждать ответа от сервера.

3. Веб-сервер запускает PHP-программу и передает ей введенный логии и пароль.

4. PHP-программа:

- Подключается к базе данных;

- Делает запрос к базе данных «существует ли пользователь с таким логином и паролем?»;

- Если ответ положительный, программа выводит страницу приветствия. Если отрицательный — сообщение об ошибке.

5. Веб-сервер отправляет ответ PHP-программы назад в браузер в виде HTML -кода.

6. Браузер обрабатывает HTML-код и выводит страницу на экран компьютера пользователя.

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

PHP используется для разработки самых разных веб-сайтов (приложений). В качестве примера можно привести:

- форумы (движки IPB, PHPBB, vBulletin);

- блоги (движок Wordpress);

- системы управления сайтом (e107, Joomla, PHP-Nuke, 1С-Битрикс);

- социальные сети (ВКонтакте);

- браузерные игры;

- фотогалереи (Coppermi ne, Gall ery);

- и многое другое.

Как уже было сказано выше, PHP-программа представляет собой текстовый файл, обычно с расширением –«.php». В файле хранится последовательность команд (инструкций), которые выполняет веб-сервер. PHP читает файл построчно сверху вниз и выполняет записанные команды [6].

Популярность в области построения веб-сайтов определяется наличием большого набора встроенных средств для разработки веб-приложений. Назовем основные из них:

- автоматическое извлечение POST- и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

- файловые функции, успешно обрабатывающие как локальные, так и удалённые файлы;

- автоматическая отправка HTTP-заголовков, информирующих обозреватель о начале передачи HTML- документа;

- работа с cookies (текстовые данные, хранящиеся у клиента; позволяют серверу точно идентифицировать пользователя и его настройки при формировании HTML- документов) и сессиями;

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

Рекомендуется всем HTML-документам, содержащим PHP-скрипты, давать расширение php, чтобы упростить задачу серверному программному обеспечению в идентификации содержания файла [30].

Синтаксис PHP подобен синтаксису языка JavaScript.

PHP исполняет код, находящийся внутри таких ограничителей, как <?php и ?>. Всё, что находится вне ограничителей, выводится без изменений. В основном это используется для вставки PHP-кода в HTML-документ.

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

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

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

PHP поддерживает три типа комментариев: в стиле языка JavaScript: ограниченные /* */, начинающиеся с // и идущие до конца строки и оболочки UNIX, начинающиеся с # до конца строки.

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

include("имя_файла") - текст внешнего файла помещается в место вызова функции, после чего сразу исполняется. В случае помещения в условный оператор выполняется только при требуемом условии.
гequire("имя_файла") - текст внешнего файла подключается заранее и определенные в нем функции доступны в любом месте основного сценария. Не используется для вставки текстовых данных.

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

Внутри PHP-скрипта существует несколько способов получения доступа к данным, переданным клиентом по протоколу http (из формы методами post и get).

Для обращения к переменным, переданным с помощью HTTP-запросов, используется специальный массив - $_REQUEST. Этот массив содержит данные, переданные методами POST и GET, а также с помощью HTTP cookies. Это суперглобальный ассоциативный массив, т.е. его значения можно получить в любом месте программы, используя в качестве ключа имя соответствующей переменной (элемента формы) [31].

После отправки формы в вызываемом скрипте можно будет использовать переданное значение в HTML-коде следующим образом: echo $_REQUEST["name"].

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

В случае отправки формы элементу массива $_REQUEST["stage"] присваивается значение results (см. значение hidden-элемента формы под именем stage, это тот самый случай, когда необходимо, чтобы элемент обязательно был, но не отображался) и происходит вызов функции-обработчика формы. Если же данные в скрипт не передавались (первая загрузка), то выполняется функция вывода формы.

Функция в зависимости от произведенного пользователем выбора формирует и выводит строку-сообщение.

Если все перечисленные выше функции будут помещены в один файл, то в итоге будет подготовлен работоспособный скрипт [30].

Помимо суперглобального массива $_REQUEST в php доступны также еще несколько суперглобальных ассоциативных массивов, позволяющих обрабатывать передаваемые клиентом данные:

$_GET[] - содержит все значения, передаваемые в сценарий с помощью метода формы GET.
$_POST[] - содержит все значения, передаваемые в сценарий с помощью метода формы POST.
$_SERVER[] - содержит все значения, получаемые от сервера.

Необходимо отметить, что наиболее часто употребимым в скриптах элементом является куда помещается имя скрипта, начиная от корневой директории виртуального хоста, т.е. если строка запроса представляет собой адрес http://www.mysite.ru/test/index.php?id=1&test=wet&id_theme=512 то элемент $_SERVER['PHP_SELF'] будет содержать фрагмент "/test/index.php". Как правило, этот же фрагмент помещается в элемент $_SERVER[’SCRIPT_NAME’].

При необходимости можно передавать параметры прямо в php-скрипт, минуя форму. Для этого следует сформировать следующую ссылку, которая будет передана в скрипт по методу get.

1.2 Системы управления контентом

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

Рисунок 4 - Система управления контентом

По существу, можно перечислить основные составляющие всех Систем Управления Контентом (они также являются важными отличительными характеристиками одной системы от другой):

- способ представления информационного наполнения сайта;

- способы описания и механизмы управления дизайном;

- механизмы авторизации и поддержки сообществ пользователей;

- механизмы управления контентом (редактирование материалов, выложенных на веб-сайте, и управление структурой сайта);

- механизмы поддержки бизнес-процессов.

Система управления контентом (Content management system, CMS)[34] – это программный продукт, а точнее автоматизированная система обработки и управления информацией, позволяющая разрабатывать как статические, так и динамические web-сайты/web-порталы и управлять ими за счет разделения процессов создания содержимого web-сайтов/web-порталов и механизмов публикации и форматизации содержимого в Интернете.

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

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

Основными задачами, которые решают современные CMS, являются следующие [1]:

Автоматизация всего цикла разработки и публикации web-приложений в Интернете;
Автоматическое изменение представлений содержимого страниц web-портала в сети, обеспечивая возможность реализации различных дизайнов преставления страниц за счет использования разных шаблонов отображения информации, плюс возможность широкого использования шаблонов, созданных другими разработчиками;
Разграничение пользовательских полномочий, что позволяет осуществлять независимую настройку web-портала под представления разных категорий пользователей, включая возможность ведения персональных странниц;
Возможность создания web-портала внутри web-портала, что позволяет создавать сложные web-порталы;
Простота редактирования и создание информации для web-портала;
Возможность автоматически модернизировать web-портал к новым стандартам Интернета;
Возможность разрешения или запрета публикации информации без удаления ее из системы;
Возможность интеграции и использования средств управления проектами по разработке web-приложений;
Масштабируемость, что позволяет развивать системы путем подключения программных расширений от разных разработчиков;
Многоязычность, возможность автоматического перевода и поддержки web-портала для разной национальной целевой аудитории;
Поддержка разных версий сайта;
Обеспечение возможности продвижения web-портала в Интернете путем подстройки к механизмам поисковых систем типа Yandex, Rambler, Google, и др.

Реализация вышеприведенных задач приводит к:

- повышению качества разработки;

- уменьшению стоимости и сроков разработки;

- снижению эксплуатационных расходов;

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

Главной задачей системы управления контентом — CMS (Content Management System) — является создание платформы для управления структурой и наполнением веб-сайта.

Обычно CMS состоит из двух приложений: CMA — приложения, управляющего контентом, и CDA — приложения, доставляющего контент. CMA позволяет автору, не знающему HTML, управлять созданием, изменением (включая удаление) контента веб-сайта, не обращаясь к помощи веб-мастера. Для создания новой страницы пользователю не нужно обладать специальными знаниями: текстовый редактор, использующийся в CMS, позволяет организовать обновление сайта на уровне работы с офисными приложениями. Модуль CDA компилирует созданный контент для обновления веб-сайта.

Средства CMA сохраняют полученный документ, CDA обеспечивают автоматическую верстку Web-страниц на основе заранее определенных шаблонов оформления сайта. Редизайн (автоматическое переоформление всех страниц) может быть осуществлен простой заменой шаблонов.

Гибкость CMS и интуитивность интерфейса позволяют легко изменить структуру сайта и систему навигации [2].

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

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

CMS снижает зависимость стоимости разработки сайта от объема информации, размещенной на нем.

CMS не требует дополнительного программного обеспечения, устанавливаемого на клиентской машине, что позволяет увеличить надежность Интернет-ресурса за счет делегирования доступа только авторизованным пользователям.

Таким образом, создание и внедрение CMS на хостинг-площадке привлечет клиентов и позволит более полно удовлетворять их потребности. Простота и доступность предлагаемой технологии будет стимулировать создание новых сайтов [2].

При анализе CMS выделяют 9 основных характеристик:

1. Системные особенности:

- язык разработки CMS;

- тип баз данных (MySQL, MSSQL, Oracle и др.);

- совместимость с веб-серверами (Webservers: Apache, IIS).

2. Безопасность:

- поддержка SSL (может ли данная система использоваться с сертификатом SSL);

- подтверждение e-mail (посылаются ли подтверждающие ключи);

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

3. Поддержка:

- программа сертификации;

- наличие руководств пользователя и администратора;

- коммьюнити;

- онлайн-помощь;

- сторонние разработчики.

4. Простота в использовании:

- drag-n-drop-содержание (может ли пользователь размещать контент на странице в стиле drag-n-drop);

- дружественные ссылки (формирование легко читаемых и доступных поисковым системам ссылок);

- возможность изменения размеров изображений;

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

- массовая закачка файлов;

- сохранение состояния, предшествующего изменениям.

5. Управление:

- управление рекламой;

- управление содержанием (возможность размещения или удаления) по расписанию;

- мусорная корзина (возможно ли восстановить информацию после удаления);

- темы/скины.

6. Совместимость с технологиями создания и обмена контентом:

- RSS/XML;

- FTP;

- UTF-8;

- XHTML.

7. Гибкость:

- поддержка cgi-режима;

- расширяемые профили пользователей;

- локализация интерфейса;

- метаданные;

- многоязыковая поддержка.

8. Реализация:

- продвинутое кэширование (навигация, шаблоны);

- кэширование страниц.

9. Встроенные приложения:

- блог;

- чат;

- форум;

- управление документами;

- календарь;

- гостевая книга;

- рассылка;

- фотогалерея;

- голосование;

- RSS (Really Simple Syndication) [1].

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

Вывод по главе 1

Глобальная сеть - это объединение транснациональных компьютерных сетей, работающих по самым разнообразным протоколам. Подавляющее большинство компьютеров в Internet работает по протоколу TCP/IP. Основой семейства протокола TCP/IP является сетевой уровень, представленный протоколом IP, а также различными протоколами маршрутизации. TCP организует двунаправленный обмен информацией, что обеспечивает более высокую скорость её трансляции.

Все методы разработки веб-сайтов можно условно поделить на две группы. К первой группе относятся методы создания сайтов ручного написания с использованием языка разметки HTML и различных языков программирования. Для написания статического сайта достаточно сочетания HTML и CSS. Но если необходим более сложный, динамический сайт, то тут подключают языки программирования. Основными языками программирования, которые наиболее часто используются для разработки сайтов, являются PHP, Javascript, APS.NET. В динамических веб-сайтах, структура данных хранится отдельно от информационных данных, причем информация заполняется в соответствии со структурой при каждом запросе пользователя. Вследствие этого при изменении одной структуры, эти изменения повлияют на все веб-страницы сайта.

2 Разработка веб-страницы туристического предприятия

2.1 Программное обеспечения для разработки веб-страницы

Основным программным средство, которое использовалось при создании веб-страницы, была среда разработки PHPStorm.

PhpStorm 10 – это интегрированная среда разработки на PHP с интеллектуальным редактором, которая глубоко понимает код, поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3 для современных и классических проектов, обеспечивает лучшее в индустрии автодополнение кода, рефакторинги, предотвращение ошибок на лету и поддерживает смешивание языков.

Сотни инспекций заботятся о верификации кода, анализируя проект целиком во время разработки. Поддержка PHPDoc, code (re)arranger, форматтера кода с конфигурацией стиля кода и другие возможности помогают разработчикам писать опрятный и легко поддерживаемый код.

Поддерживаются передовые технологии веб-разработки, включая HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, шаблоны Jade, Zen Coding, Emmet, и, конечно же, JavaScript.

PhpStorm включает в себя всю функциональность WebStorm (HTML/CSS редактор, JavaScript редактор) и добавляет полнофункциональную поддержку PHP и баз данных / SQL.

Основные функции PhpStorm 10:

- интеллектуальный редактор PHP кода с подсветкой синтаксиса, автодополнением кода, расширенными настройками форматирования кода, предотвращением ошибок на лету;

- поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3, генераторы, сопрограммы и все синтаксические улучшения;

- PHP рефакторинги, code (re)arranger, детектор дублируемого кода;

- поддержка Vagrant, Composer, встроенный REST клиент, Command Line Tools, SSH консоль;

- поддержка фреймворков (MVC view для Symfony2, Yii) и специализированные плагины для ведущих PHP фреймворков (Symfony, Magento, Drupal, Yii, CakePHP и многие другие);

- визуальный отладчик для PHP приложений, валидация конфигурации отладчика, PHPUnit с покрытием кода (поддержка PHPUnit 5), а также интеграция с профилировщиком;

- HTML, CSS, JavaScript редактор; отладка и модульное тестирование для JS; поддержка HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, Emmet и других передовых технологий веб-разработки;

- полный набор инструментов для фронтенд-разработки;

- поддержка стилей кода, встроенные стили PSR1/PSR2, Symfony2, Zend, Drupal и другие;

- интеграция с системами управления версиями, включая унифицированный интерфейс;

- удалённое развёртывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS и др.;

- Live Edit: изменения в коде можно мгновенно просмотреть в браузере без перезагрузки страницы;

- PHP UML;

- интеграция с баг-трекерами;

- инструменты работы с базами данных, SQL редактор;

- кроссплатформенность (Windows, Mac OS X, Linux).

Нововведения, улучшения PhpStorm 10:

PhpStorm 10 обеспечивает расширенную поддержку PHP 7, включая инспекции совместимости.

Возможность работы с:

- безымянными классами;

- декларациями типов возвращаемого значения;

- операторами объединения со значением «ноль»;

- декларациями группового использования;

- лексическими анализаторами, учитывающими контекст.

А также много других возможностей, раскрывающих все возможности PHP 7.

Автоматическое завершение кода было значительно переработано:

- рекомендации по наименованию: имя значения по имени массива в конструкции foreach;

- завершение имени и сигнатуры метода для родительского переопределения и внедрения интерфейса;

- завершение свойств и констант для родительского переопределения;

- завершение языков при постоянных добавлениях после @lang;

- улучшенное завершение конструкций языка (exit, isset и т.д.), приведения типов данных и т.д.

При реорганизации кода в PhpStorm 10 можно локально переименовать переменные, параметры, классы, методы, константы или метки команд перехода прямо в редакторе.

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

Другие улучшения PHP:

- дублирование поиска по выделению метода;

- интеллектуальное копирование/добавление в последовательности;

- возможность конфигурации значений date() или time() в шаблонах Live Templates в качестве временных отметок Unix.

Интерактивная консоль отладки для PHP (REPL) - эта новейшая возможность PhpStorm 10 позволяет преобразовывать переменные, вызывать функции PHP и определять дополнительные функции – всё в процессе работы.

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

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

Отслеживание потока данных особенно полезно при работе со сторонним кодом или работе с общим кодом в больших группах разработчиков.

PhpStorm 10 поддерживает все новые функции и улучшения, выпущенные недавно в PHPUnit 5, широко используемой тестовой платформе для PHP. Среди возможностей также есть:

- новый принцип действия аннотации @depends;

- тесты, помеченные @small, могут быть также помечены в качестве рискованных, если они осуществляют ввод-вывод;

- добавленные подтверждения assertFinite(), assertInfinite() и assertNan().

С помощью нового плагина Docker для PhpStorm можно добавить в имеющиеся проекты поддержку Docker, просматривать логи и управлять хранилищами Docker прямо в PhpStorm.

Также есть возможность отладки веб-приложений в Xdebug или Zend Debugger.

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

С помощью PhpStorm 10 можно использовать сигнатуры типов, которые Flow добавляет в JavaScript. При использовании аннотированных функций или методов можно получить информацию по типизированным параметрам в автоматическом завершении кода.

Поддержка Angular 2 в PhpStorm включает в себя автоматическое завершение кода и навигацию по директивам и связкам и распознает новые атрибуты событий для TypeScript или ECMAScript 2015.

PhpStorm обеспечивает интеграцию с TSLint, анализатором для кода TypeScript. Позволяет увидеть предупреждения и ошибки прямо в редакторе по мере ввода кода.

Все функции и улучшения WebStorm доступны в PhpStorm, встроенные по умолчанию или доступные в качестве бесплатных плагинов в репозитории. Другие заслуживающие упоминания функции включают в себя улучшенную поддержку ECMAScript 2015, TypeScript 1.5 и 1.6, обновлённую поддержку React, форматирование связанных вызовов метода, новые инспекции Node.js, графики в CPU-профайлере Node.js, возможность запуска отдельных тестирований Mocha и т.д.

PhpStorm 10 помогает кодировать специальные символы в HTML-коде, заменяя их HTML-элементами, начинающимися с &. Также можно выбрать символы или блок кода и применить кодировку специальных символов XML/HTML.

Чтобы сделать команду Find in Path более эффективной, разработчики добавили вкладку предпросмотра, которая отображает первые 100 результатов в режиме реального времени. Теперь для того, чтобы найти всё необходимое, не нужно выходить из диалога.

Конфигурация стиля кода стала ещё проще. Нужно выбрать фрагмент кода, нажать Alt+Enter и выбрать действие настройки стиля. Можно просмотреть и настроить стиль кода, который может быть применён к данной части кода, в доступном режиме предварительного просмотра.

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

Обновлённые инструменты базы данных:

- исходная самодиагностика для MySQL, PostgreSQL, MS SQL;

- настраиваемая форма поведения действия Execute;

- новое окно преобразования таблиц.

Другие улучшения:

- обновлённые регулярные выражения в действии поиска с заменой;

- настройки для пользователей с нарушением цветового зрения;

- совместимость с SVN 1.9.

Поддерживаемые операционные системы:

- Windows 10;

- Windows 8;

- Windows 7;

- Windows Vista;

- Windows 2003;

- Windows XP (вкл. 64-бит);

- Mac OS X 10.5 и выше;

- Linux.

Требования к компьютеру:

- объём оперативной памяти: 1 Гб (минимум);

- объём оперативной памяти: 2 Гб (рекомендуется);

- минимальное разрешение экрана: 1024х768.

Сайт программы - http://www.jetbrains.com/phpstorm (рис. 5).

Рисунок 5 - Рабочее окно программы PhpStorm

2.2 Язык гипертекстовой разметки HTML

Веб-страница создавалась с помощью языка гипертекстовой разметки HTML. Язык разметки гипертекста (HyperText Markup Language - HTML) можно использовать для представления:

- гипертекстовых новостей, почты, сопровождающей информации и сопутствующей гиперсреды;

- меню с опциями;

- результатов запросов к базам данных;

- простых структурированных документов со встроенной графикой;

- гипертекстовых обзоров имеющейся информации.

Данные в формате HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру [16].

Сам по себе HTML-документ представляет собой текстовый файл, содержащий набор инструкций для представления информации в требуемом виде в окне браузера. Инструкции записываются в виде тегов (читается тэг, от англ. tag) и имеют следующий синтаксис:

<имя_тега [возможные параметры]>

Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

<html>

HTML-документ

</html>

Следует отметить, что не каждый открывающий тег должен иметь соответствующий закрывающий. Имеется набор тегов, действие которых начинается и заканчивается одним открывающим тегом:

<img src="image.gif"> - тег для вывода изображения image.gif в окно браузера;

<input type="text" value=""> - тег для ввода значений в окне браузера.

Из приведенных выше примеров записи тегов можно заметить, что существуют теги, содержащие в себе информацию (а также другие теги), например, html и body, которые в дальнейшем будем называть тегами- контейнерами. Соответственно информацию, содержащуюся в них - содержимым тега-контейнера [7].

Как и в любом языке программирования, язык HTML имеет теги для создания комментариев внутри документа, т.е. текст, который имеется в документе, но не выводится браузером на экран. Для создания комментариев используется следующая пара тегов:

Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p>.

Существуют общие правила интерпретации тегов браузерами. В отличие от языков программирования, в которых ошибочные операторы приводят к соответствующим ошибкам, в HTML не принято реагировать на неверную запись тегов. Неверно записанный тег или его параметр должен просто игнорироваться браузером. Это общее правило для всех браузеров, под действие которых попадают не только ошибочные теги, но и теги, не распознанные данной версией браузера [6].

При создании HTML-документов рекомендуется соблюдать следующую структуру:

html>

<head>

</head>

<body>

</body>

</html>

Здесь <html> - это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает:

Заголовок страницы

<title>Государственный центр оказания услуг</title>

Кодировку, в которой представлен HTML-документ

Краткое описание содержания документа

Список ключевых слов документа

5. Подключаемые внешние javascript файлы (скрипты)

6. Внешние таблицы стилей (css) для форматирования документа

Раздел тега <head> может содержать и другие конструкции языка HTML. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид [13] (рис. 6):

<head>

<title>Заголовок страницы</title>

</head>

В тегах <body>...</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) и т.д [13].

HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях [25].

Текст HTML-документа, как правило, представляет собой непосредственно текст и ссылки, ведущие либо на отдельные фрагменты того же документа, либо на другие документы.

Рисунок 6 – Структура документа HTML

Пример: простейший HTML-документ (рис. 7).

Рисунок 7 – Пример простого HTML-документа

Для создания заголовков в HTML используются теги:

<h1></h1> - заголовок 1 уровня;

<h2></h2> - заголовок 2 уровня;

<h3></h3> - заголовок 3 уровня;

<h4></h4> - заголовок 1 уровня;

<h5></h5> - заголовок 1 уровня;

<h6></h6> - заголовок 1 уровня.

На рис. 8 показано отображение заголовков разного уровня в браузере.

Рисунок 8 – Отображение заголовков в браузере

HTML есть возможность создавать нумерованные и маркированные списки [42].

Тег <ol>...</ol> - создает нумерованный список элементов/

Атрибуты:

start="N" - начать нумерацию с числа N;

type="..." -определяет формат нумерации:

1 - арабские цифры (по умолчанию);

A - прописные буквы (A, B, C);

а - строчные буквы (a, b, c);

I - прописные римские цифры (I, II, III);

i - строчные римские цифры (i, ii, iii).

Тег <ul>...</ul> - создает маркированный список элементов.

Атрибут:

type="..." - определяет формат маркера:

disk - диск (по умолчанию);

circle – окружность;

square – квадрат.

<li>...</li> - задает элемент списка в нумерованном или маркированном списке

Атрибуты:

type="..." - формат номера или маркера (см. описание <ol> и <ul>);

value="N" - задает номер элемента списка.

Примеры создания отображения списка показаны на рис. 9-10.

Рисунок 9 – Создание списка в HTML

Рисунок 10 – Отображение списка в браузере

Для создания ссылок используется тег <a>...</a>.

Обязательный атрибут href указывает абсолютный или относительный адрес, на который ведет ссылка. Ссылка может указывать на HTML- документ, изображение, файл для сохранения на диск и пр. Текст ссылки записывается между открывающим и закрывающим тегом [17].

Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, например: http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.

Пример для абсолютного адреса:

HTML-код: <А href="http://www.yandex.ru">Яндекс</A>

В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href.

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

Рисунок 11 - Пример файловой структуры

Например, чтобы поставить ссылку из файла file1.html на файл file2.html (рис. 10), необходим следующий HTML-код:

А чтобы ссылка в файле file2.html указывала на file1.html:

<А href="../file1.html">file1.html</A>

Две точки (..) означают переход к родительскому каталогу.

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

Для открытия ссылки в новом окне используется атрибут target со значением _blank.

Пример: <a href="http://ya.ru/" target="_blank">Яндекс</a>.

2.3 Каскадные таблицы стилей CSS

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

CSS используется применительно к языкам разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.

Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:

h1 {font-family:sans-serif}
h2 {font-family:sans-serif}
h3 {font-family:sans-serif}

Селекторы групп:

h1, h2, h3 {font-family: sans-serif}

Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов [16].

Селекторы класса:

*.firstclass{ color: green } - все элементы, имеющие class=firstclass

или

.firstclass{ color: green } - все элементы, имеющие class=firstclass

а также

Hl.firstclass{ color: green } - только элементы H1, имеющие class=firstclass

Селекторы идентификатора ID:

h1#chapter1 { font-family: sans-serif } - для <h1 id="chapter1">...</h1>
#chapter1 { font-family: sans-serif } - для любого элемента с id="chapter1"

Селекторы атрибутов:

h1[class] { font-family: sans-serif } - элемент имеет class

- h1[class="fancy"] { font-family: sans-serif } - элемент имеет class="fancy"

- *[title] { font-family: sans-serif } - любой элемент, имеющий заголовок

Селектор потомков (устанавливает иерархию применения):

tr h1 { font-family: sans-serif } - <tr><td><h1>...</h1></td></tr>

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

a:link - ссылки, которые не были посещены
a:visited - посещенные ссылки
a:hover - выделенная в данный момент ссылка
a:active - активные ссылки.

При оформлении страницы доступны следующие семейства (family) шрифтов:

- Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;

- Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;

- Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;

- Fantasy, Cursive — декоративные и курсивные шрифты. Не рекомендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.

Выбор шрифта осуществляется свойством font-family. Пример использования семейств стилей:

<p style=”font-family: serif”>Serif: Образец текста</р>
<р style=”font-family: sans-serif”>Sans-serif: Образец текста</p>
<p style=”font-family: cursive”>Cursive: Образец текста</p>
<p style=”font-family: fantasy”>Fantasy: Образец текста</p>
<p style=”font-family: monospace”>Monospace: Образец текста</p>

Свойство font-family может содержать перечисление шрифтов:

p{font-family:”Times New Roman”, Times, serif;}

В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере "Times New Roman”, Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию [5].

Можно указать начертание шрифта с использованием свойства font-style. Допустимые значения этого свойства:

font-style: normal | italic | oblique | inherit

где normal — обычное начертание; italic — курсив (имитация рукописного шрифта); oblique — наклонный шрифт (образован наклоном обычного).

Размер шрифта задается с помощью свойства font-size. Его возможные значения:

- larger и smaller — константы, определяющие относительный размер;

- xx-small, x-small, small, medium, large, x-large, xx-large — константы, определяющие абсолютный размер;

- ЧИСЛО % — число, определяющее размер в процентах от шрифта родительского элемента;

- ЧИСЛО px — число, определяющее размер в пикселах. Кроме того, размер шрифта указывается в специальных единицах: em (высота элемента, равная размеру текущего шрифта), ex (высота символа х), пункты (pt).

Толщина шрифта регулируется с помощью свойства font-weight (рис. 12, 13):

font-weight: normal | bold | bolder | lighter | 100, 200.. 900

Здесь normal — обычная толщина; bold — жирный шрифт; bolder — предельно жирный шрифт; lighter — тонкий шрифт; 100 — тонкий шрифт; 400 — соответствует нормальному; 700 — жирному.

Свойство color задает цвет шрифта (рис. 6, 7). Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности. Полный перечень допустимых значений свойства color приведен в спецификации (см. http://www.w3.org/TR/css3-color/).

Рисунок 12 – Определение стилей для текста в блоке body

Рисунок 13 – Определение стилей для заголовков сайта

Выбор цветовой схемы является очень важным этапом создания дизайна сайта. Фон элементов может быть задан однородным цветом, одиночным или мозаично расположенным.

Используются следующие свойства фона:

- background-color — однородный цвет константой или кодом в одной из допустимых систем цветности. Пример (рис. 14):

header .navbar-default { background-color: #fff;}

Рисунок 14 – Определение фонового цвета для навигационного меню верхней части сайта

- background-image — фоновое изображение. Пример:

body {background-image:url('paper.gif');}

- background-repeat — флаг мозаичного размножения изображения. Пример:

body {

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

- background-attachment — указание на то, будет ли изображение смещаться при скроллировании или будет оставаться на месте. Пример:

background-attachment:fixed;

- background-position — свойство, определяющее позицию размещения изображения на устройстве отображения. Пример:

body

{

background-image:url('img tree.png'); background-repeat:no-repeat; background-position:right top;

}

В соответствии со спецификацией (см. http://www.w3.org/TR/ css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:

- изменение регистра букв (capitalize | uppercase | lowercase);

- изменение пробелов (collapse | preserve | preserve-breaks);

- ограничение длины строки;

- формирование переносов слов;

- форматирование текста;

- выравнивание и разреживание;

- отступы;

- декорирование.

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

В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами [17].

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

Размер отступа задается свойствами 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.

Пример:

.container {

padding:0 20px 0 20px;

}

Рисунок 15 – Определение отступов для блока container

Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: 'border-top', 'border-right', 'border-bottom', 'border-left'. Указываются толщина, тип начертания границы и цвет [25].

Пример: header .nav .caret {

border-bottom-color: #f5f5f5;

border-top-color: #f5f5f5;}

При расчете размеров блока необходимо помнить про толщину границы. Внешнее прозрачное поле может быть задано либо единственным свойством 'margin' с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' для каждой из сторон в отдельности. Пример:

- body { margin: 2em }

- body { margin: 1em 2em }

- body { margin:1em 2em 3em }

- body {margin-top: 1em; margin-right: 2em;}

CSS поддерживает 4 вида позиционирования:

- статическое (static);

- абсолютное (absolute);

- относительное (relative);

- фиксированное (fixed).

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

Статическое позиционирование устанавливается для всех элементов по умолчанию и означает нормальное следование элементов. В явном виде спецификатор static применяется для перекрытия унаследованных стилей [22].

Абсолютное позиционирование подразумевает указание расположения элемента относительно его блока-контейнера или корневого элемента html. При этом как только появляется абсолютное позиционирование, элемент выпадает из нормального потока и всегда будет позиционироваться относительно контейнера, в независимости от других элементов страницы. Смещение элемента в относительном позиционировании вычисляется не относительно соседних элементов, а относительно нормального потока. Часто применяется комбинирование абсолютного и относительного позиционирования.

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

Плавающее размещение не является схемой позиционирования. Оно было введено как средство, позволяющее получить обтекание элементов, но не для создания макета страницы [32].

Например, следующие свойства стиля обеспечат отображение элементов-изображений img в правой части страницы, а все остальные элементы будут размещены в свободном пространстве слева:

img {float: right; padding: 15px;}

Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.

После создания разметки и применения стилей, внешний вид вебстраницы прибрел вид, показанный на рис. 16 - 18.

Рисунок 16 – Внешний вид веб-страницы

Рисунок 17 – Внешний вид веб-страницы

Вывод по 2 главе

Одним из лучших программных средств для разработки веб-страниц является среда разработки PHPStorm. Указанная программа позволяет создавать как статические, так и при необходимости динамические, что очень удобно в случае, если есть необходимость расширить функционал сайта (формы, базы данных).

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

Заключение

В результате работы была создана статическая веб-страница для туристического предприятия.

Список используемой литературы

Вальчевский А. С. Технология системы управления контентом [Электронный ресурс] / А. С. Вальчевский, Е. Б. Никитин // http://belisa.org.by/pdf/PTS2005/219-220.pdf (дата обращения 19.09.2016)
Горнаков С. Г. Осваиваем популярные системы управления сайтом (CMS) / С. Г. Горнаков. – М.: ДМК Пресс, 2009. – С. 20 – 31.
Грачев А. Создаем свой сайт на WordPress: быстро, легко и бесплатно. Работа с CMS WordPress 3 / А. Грачев — СПб.: Питер, 2011. — 288 с.
Дунаев В. HTML, скрипты и стили / В. Дунаев. - СПб: БХВ-Петербург, 2011- 816 с.
Заболеева-Зотова А.В. Лингвистические системы: модели, методы, Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова - СПб: НИУ ИТМО, 2012. – 70 с.
Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова - СПб: НИУ ИТМО, 2012. – 70 с.
Кисленко Н. П. HTML. Самое необходимое / Н. П. Кисленко. - СПб: БХВ-Петербург, 2012 – 352 с.
Комолова Н. HTML, XHTML и CSS / Н. Комолова, Е. Яковлева. - СПб: Питер, 2012 – 304 с.
Котляров И. Д. Комплекс интернет-маркетинга / И. Д. Котляров // Интернет маркетинг. - 2012. - № 5. - С. 288–294.
Круг С. Как сделать сайт удобным. Юзабилити по методу Стива Круга / С. Круг – СПб.: Питер, 2010. – 208 с.
Купер А. Алан Купер об интерфейсе. Основы проектирования взаимодействия / Алан Купер. – Пер.с англ. – СПб.: Символ-Плюс, 2010. – 688 с.
Курзыбова Я. В. Средства создания динамических web-сайтов: учеб. пособие / Я. В. Курзыбова. – Иркутск: Изд-во ИГУ, 2011. – 121 с.
Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. - М.: Вильямс, 2011 – 272 с.
Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.
Методы верстки сайтов [Электронный ресурс] / Режим доступа: http://webformyself.com/metody-verstki-sajtov/ (Дата обращения: 18.11.2016).
Муравьев А. Технические аспекты веб-разработки [Электронный ресурс] / А. Муравьев, А. Григорьев. – Режим доступа: http://netology.ru/files/2930/Технические аспекты веб-разработки.pdf (дата обращения 16.10.2016)
Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. - Ульяновск: УлГТУ, 2014. – 91 c.
Паршенцев А. А. Проблема и перспективы развития электронных магазинов / А. А. Паршенцев // Маркетинг в Украине и за рубежом. - 2000. - № 3. - С. 84-89.
Примеры красивого оформления списков [Электронный ресурс] / Режим доступа: http://html5book.ru/krasivoe-oformlenie-spiskov/ (Дата обращения: 18.11.2016).
Принципы анимации для веба [Электронный ресурс] / Режим доступа: https://habrahabr.ru/company/htmlacademy/blog/255583/ (Дата обращения: 18.11.2016).
Приступа В. В. Подход к выбору технологии создания динамического сайта [Электронный ресурс] / В. В. Приступа. - Режим доступа: http://www.repository.hneu.edu.ua/jspui/bitstream/123456789/6097/29/sect3_Prystupa.pdf (дата обращения 19.10.2016)
Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. - 2011 – 68 с.
Румянцев Д. Интернет-маркетинг от А до Я / Д. Румянцев. – М: АСТ, 2014. – 350 с.
Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
Современные формы на HTML5 и CSS3 [Электронный ресурс] / Режим доступа: http://webformyself.com/sdelajte-sovremennye-formy-s-pomoshhyu-css3-i-validacii-html5/ (Дата обращения: 18.11.2016).
Станке У. Р. Microsoft Windows Server® 2012. Справочник администратора: Пер. с англ. У. Р. Станке— М.: Издательство «Русская редакция»; СПб.: «БХВ-Петербург», 2014. — 688 с.
Стилизация списков с помощью псевдо-элементов [Электронный ресурс] / Режим доступа: http://ruseller.com/lessons.php?id=1479&rub=2 (Дата обращения: 18.11.2016).
Топ 10 Конструкторов сайтов [Электронный ресурс] / Режим доступа: http://sitebuilders.club (Дата обращения: 18.11.2016).
Филлипов С. А. Основы современного веб-программирования: Учебное пособие / С. А. Филлипов. – М.: НИЯУ МИФИ, 2011. – 160 с.
Фролов А. Практика применения PHP, Apache и MySQL для активных web–сайтов/ Г. Фролов. – М.: Издательско–торговый дом “Русская Редакция”, 2002. – 576 с.
Шапошников И. Профессиональное PHP программирование/ И. Шапошников. - СПб.: Питер, 2007. – 192 c.
Эндрю Р. CSS: 100 и 1 совет, 3-е издание / Р. Эндрю. – Пер. с англ. – СПб: Символ- Плюс, 2010. – 336 с.
CSS3 анимация для сайта [Электронный ресурс] / Режим доступа: http://beloweb.ru/javascript-jquery/css3-animatsiya-dlya-sayta.html (Дата обращения: 18.11.2016).

Приложения

Исходный код веб-страницы

<!DOCTYPE html>

<head>

<title>TourHouse - Туристические услуги</title>

</head>

<body>

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Навигация</span>

</button>

<a class="navbar-brand" href="#">TourHouse</a>

</div>

</div>

</nav>

<h2>Добро пожаловать на сайт TourHouse!</h2>

<p>Экскурсионные туры в Европу, отдых за границей, цены. Выбрав экскурсионные туры, Вы получите интересный,

насыщенный и комфортный отдых за границей.</p>

<p><a class="btn btn-primary btn-large">Выбрать тур!</a>

</p>

</header>

<hr>

</div>

<img src="images/europe.jpg

" alt="">

<h3>Европа</h3>

<p>Интересные туры по странам Европы</p>

<p>

<a href="#europe" class="btn btn-primary">Заказать!</a> <a href="#europe"

class="btn btn-default">Читать</a>

</p>

</div>

<h3>Америка</h3>

<p>Занимательные туры по странам Африки</p>

<p>

<a href="#america" class="btn btn-primary">Заказать!</a> <a href="#america"

class="btn btn-default">Читать</a>

</p>

</div>

<p>Страны Азии, прекрасное место для отдыха</p>

<p>

<a href="#asia" class="btn btn-primary">Заказать!</a> <a href="#asia" class="btn btn-default">Читать</a>

</p>

</div>

<h3>Африка</h3>

<p>Очень интересные и прекрасные места</p>

<p>

<a href="#africa" class="btn btn-primary">Заказать!</a> <a href="#africa"

class="btn btn-default">Читать</a>

</p>

</div>

<h4><a name="europe">Туры по Европе</a></h4>

</div>

<h5 class="text-center">Экскурсионные туры по Европе и отдых за границей</h5>

<p class="text-info text-justify">Выбрав экскурсионные туры, Вы получите интересный, насыщенный и

комфортный отдых за границей. Ночью в

наших турах вас ждут самые уютные европейские отели с прекрасным сервисом и аппетитными блюдами. Из

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

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

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

этого города романтиков. Впрочем, туры во Францию – это не только Эйфелева башня, Елисейские поля,

изумительная кухня и Мулен Руж. Это еще и экскурсионные туры на солнечный Лазурный Берег, ароматные

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

забронировавшими туры в Испанию. Очарование этой провинции и вкус марсельского буйабес навсегда

остаются самыми вкусными воспоминаниями о турах в Европу.</p>

<h5 class="text-center"> Отдых за границей, о котором вы мечтали</h5>

<p class="text-info text-justify">Пройтись по узким улочкам латинского квартала в Париже, проехаться на

велосипеде по Монмартру, а

завтра - наблюдать как утреннее солнце отражается в фонтанах Бельведера, вздыхая ароматный запах

Венского кофе… Попробовать шоколадные трюфели в Бельгии и увидеть яркие карнавалы Испании, посетить

величайшие музеи Лондона, увидеть творения известных художников и послушать настоящую классическую

музыку в Гранд Опера, а может быть, просто отдохнуть в шумном берлинском клубе или перехватить бокал

хорошего пива в компании старого и мудрого баварца – такой отдых может стать не мечтой, а

реальностью, если вы выберете туры от компании «Туртранс-Вояж». Туры в Европу – это не просто

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

окунуться в настоящую сказку, почерпнуть вдохновение, которого всегда так недостает. Ведь туры по

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

самыми позитивными эмоциями и обрести дорогие сердцу воспоминания.</p>

</div>

<h4><a name="america">Туры по Америке</a></h4>

</div>

<h5 class="text-center">Путешествовать по США можно круглый год</h5>

<p class="text-info text-justify"> В этой стране все создано и

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

различного достатка. В среднем турпоток в Штаты ежегодно растет на 20-30 %. Туристическую визу в США

на год получить сейчас достаточно просто, и туры в США не такие дорогие, как до сих пор думают

многие. Всегда можно подобрать подходящий для любого кошелька вариант отдыха в этой стране с

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

заранее, так как чем ближе к дате вылета, тем дороже будет авиабилет. Впрочем, это правило действует

на всех направлениях.</p>

Территория США располагается в 6 часовых поясах (с UTC−10 по UTC−5). Часовой пояс UTC-10 —

Гавайско-алеутское стандартное время. Здесь расположены, как легко догадаться из названия, Гавайи и

Алеутские острова. UTC-9 — это Аляска (Аляскинское стандартное время). В Североамериканском

тихоокеанском часовом поясе (UTC-8) располагаются такие штаты, как Вашингтон и Калифорния. По

Горному времени (UTC-7) живут Колорадо, Аризона и Монтана. Центральноамериканское время (UTC-6)

представлено штатами Луизиана и Оклахома. А в поясе UTC-5 (Североамериканское восточное время)

расположены Нью-Йорк, Нью-Джерси и, конечно же, столица США.</p>

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

частности, это пояса UTC-12 (острова Бейкер и Хауленд), UTC-11 (Американское Самоа), UTC-4

(Пуэрто-Рико и Виргинские острова) и UTC+12 (остров Уэйк).

</p>

</div>

</div>

<h5 class="text-center">Отдых в Азии привлекает туристов своей уникальной природой</h5>

<p class="text-info text-justify">Азия занимает третье место в мире по уровню развития туризма после

Европы и Америки. Отдых в Азии начал набирать популярность в восьмидесятые годы прошлого века. В

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

индустриальным странам таким как Малайзия, Сингапур, Южная Корея, Таиланд, Индонезия, Индия и

Тайвань. До 20% финансовых поступлений этих азиатских стран приходится на туризм.</p>

<p class="text-info text-justify"> Развлекательный туризм развит в Японии, Южной Корее и на Тайване.

Японская индустрия занимает второе место в мире после США, Сингапур предлагает туристам выгодный

шоппинг, Таиланд открывает новые пляжи на южном побережье страны, организовывает познавательные

поездки в северную часть. Хорошо развит туризм в Турции, Израиле, Вьетнаме, Мальдивах, Шри-Ланке.

Отдых на островах Тихого океана выигрывает от относительной близости австралийского рынка и имеет

хороший имидж у туристов.</p>

<p class="text-info text-justify">Восточная Азия – крупнейшая часть азиатского континента, включающая в

себя Дальний Восток нашей страны, обширные территории Китая, Японию, Южную и Северную Корею (КНДР),

Тайвань и Монголию. С точки зрения географии, природных и климатических зон Восточная Азия

чрезвычайно разнообразна. Здесь расположены высокие горы, в Восточной Азии нередки землетрясения и

извержения вулканов, большую территорию занимают равнины. Страны Восточной Азии омываются водами

Желтого, Восточно-Китайского и Японского морей. Сочетание муссонного, умеренного и субтропического

климата определяет уникальный состав флоры и фауны Восточной Азии.</p>

<p class="text-info text-justify"> Отдых в странах Восточной Азии может быть таким, каким вы пожелаете –

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

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

Шанхая и Гонконга; те, кто мечтают о пляжном отдыхе, отправляются на тропический остров-курорт

Хайнань. Путешествие в Тайвань – лучший способ познакомиться с традиционной китайской культурой,

здесь сохранилось множество храмов, памятников архитектуры и истории, ритм жизни на Тайване

разительно отличается от того, что установился на материке. На Тайвань стремятся любители

экстремальных путешествий – в отдаленных районах на востоке сохранились дикие труднопроходимые леса,

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

островах и в самых красивых уголках побережья расположены курорты – как категории «люкс», так и

вполне демократичные. Поездка в Японию для многих туристов – экзотика, настолько не похожа эта

страна на любую другую. Пребывание в столице страны – Киото – оставляет ощущение путешествия в

фантастическое будущее.</p>

</div>

<h4><a name="africa">Туры по Африке</a></h4>

</div>

<h5 class="text-center">Красота и привлекательность Африки</h5>

<p class="text-info text-justify">Природа Африки поистине многогранна, однако знают об этом немногие.

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

части. Мы же сегодня расскажем о природных достопримечательностях Африки за пределами топовых

туристических зон. Вы удивитесь, но помимо африканских саванн и пустынь, природа континента богата

на национальные парки, горы, реки, вулканы, а один из самых знаменитых водопадов мира – водопад

Виктория – находится именно здесь, в Африке. О том, что из себя представляет природа Африки, каковы

её главные достопримечательности и как до них добраться, читайте в нашей статье.</p>

</div>

</div>

</footer>

</div>

</body>

</html>