Цель: Научиться пользоваться локальным web-сервером Open Server, создавать собственные домены и поддомены в программе Open Server. Освоить основные принципы работы с программой “NVU”. Научиться применять теги HTML для структурирования страницы и форматирования текста.
1.1 Теоретические сведения
1.1.1. Предназначение Open Server
Идея проекта Open Server заключается в независимости от рабочего
места. Обычный разработчик часто зависит от конкретного компьютера, от
операционной системы и программ установленных на этом компьютере, и даже
от дома или офиса где находится этот компьютер. Open Server призван
освободить вас и ваши программы от подобных неудобств, он сделает вас по
настоящему свободным и независисым разработчиком.
Вы получите набор портативных (не требующих установки) программ на
все случаи жизни. И конечно же вы получите мощную серверную платформу,
где вы сможете комфортно заниматься разработкой веб-проектов. Вам больше
не нужно думать за каким компьютером вы работаете, за своим, на работе
или используете ноутбук коллеги. Вам больше не нужно тратить время на
поиск и установку программ если пришлось переустановить Windows — нужно
только подключить внешний диск или флэшку с Open Server и все ваши
программы тут как тут!
Open Server — это портативная серверная платформа и
программная среда, созданная специально для веб-разработчиков с учётом
их рекомендаций и пожеланий.
Программный комплекс имеет богатый набор серверного программного
обеспечения, удобный, многофункциональный продуманный интерфейс,
обладает мощными возможностями по администрированию и настройке
компонентов. Платформа широко используется с целью разработки, отладки и
тестирования веб-проектов, а так же для предоставления веб-сервисов в
локальных сетях.
Хотя изначально программные продукты, входящие в состав комплекса, не
разрабатывались специально для работы друг с другом, такая связка стала
весьма популярной среди пользователей Windows, в первую очередь из-за
того, что они получали бесплатный комплекс программ с надежностью на
уровне Linux серверов.
Удобство и простота управления безусловно не оставят вас равнодушными,
за время своего существования Open Server зарекомендовал себя как
первоклассный и надёжный инструмент необходимый каждому веб-мастеру.
Возможности управляющей программы
- Незаметная работа в трее Windows;
- Быстрые старт и остановка;
- Автостарт сервера при запуске программы;
- Несколько режимов управления доменами;
- Монтирование виртуального диска;
- Поддержка управления через командную строку;
- Поддержка профилей настроек;
- Удобный просмотр логов всех компонентов;
- Переключение HTTP, MySQL и PHP модулей;
- Подробная и понятная документация;
- Доступ к доменам в один клик;
- Быстрый доступ к шаблонам конфигурации;
- Мультиязычный интерфейс;
- Автозапуск программ при старте Open Server.
Особенности комплекса
- Не требует установки (портативность);
- Возможность работы с USB накопителя;
- Одновременная работа с Denwer, Xampp и т.д.;
- Работа на локальном/сетевом/внешнем IP адресе;
- Поддержка SSL без всякой дополн. настройки;
- Создание домена путем создания обычной папки;
- Поддержка кириллических доменов;
- Поддержка алиасов (доменных указателей);
- Защита сервера от внешнего доступа;
- Punycode конвертер доменных имён;
- Пакет из более 40 портативных программ;
- Планировщик заданий (cron);
- Создание локального поддомена без потери видимости основного домена в сети интернет
Создание домена в автоматическом режиме
Чтобы создать домен или поддомен откройте [Меню → Папка с сайтами] и создайте папку с именем будущего домена. После создания домена перезапустите сервер.
Создание домена в ручном режиме
Чтобы создать домен или поддомен перейдите в раздел [Меню → Настройки → Домены] и создайте запись вида: домен => папка. В качестве папки домена можно выбрать уже существующую папку на диске или создать её непосредственно в окне выбора каталога. После создания домена сохраните настройки.
1.1.2 Интерфейс программы NVU
После установки сервера и создания собственного домена можно
приступать к созданию сайта. Сайты можно условно разделить на
статические (будут доступны пользователю в том виде и с той информацией
которой они были созданы) и динамические (наполнение и внешний вид
страниц может зависеть от ряда условий: учетной записи пользователя,
времени и т.д.).
Статические сайты представляют собой набор html-старинц, а
динамические набор php-страниц. Статический сайт должен содержать
html-странички и картинки расположенные в одной папке. Создавать такие
странички можно либо в блокноте, либо в специализированных программах.
Одной из которых является NVU. По сравнению с блокнотом в программе
имеется подсветка синтаксиса, автоматическое дополнение когда, панель
свойств, предварительный просмотр и т.д.
На рисунке 1.3 отображены основные элементы интерфейса окна программы “NVU”. C первого взгляда NVU напоминает какой-то текстовый редактор. Это и есть его главная заслуга — визуальный графический интерфейс. Но, посмотрев внизу, Вы увидите, что помимо обычного есть еще несколько режимов отображения введенной информации: HTML-теги, код и предварительный просмотр.

Рисунок 1.3 – Интерфейс программы “ NVU”
Возможности NVU
- поддержка нескольких режимов
отображения редактируемой страницы; - расширенные возможности для редактирования текста;
- вставка картинок (в том
числе и фоновых); - редактирование отдельных
страниц и целых сайтов; - создание форм и таблиц;
- проверка орфографии;
- возможность публикации сайта прямо из программы;
- встроенный редактор CSS и консоль Java Script.
1.1.3 Структура HTML-документа
Составление страниц для сайта базируется на языке HTML (от англ. Hypertext Markup Language – язык разметки гипертекста). Все страницы сайта имеют расширение .htm или .html.
Основной структурной единицей языка является тег с его атрибутами. Тег представляет собой заключенные в треугольные скобки инструкции языка, которые сообщают, какими свойствами должен обладать тот или иной фрагмент текста на странице. Большинство тегов являются парными: содержат как открывающийся, так и закрывающийся тег (см. рисунок 1.4):

Рисунок 1.4 – Структура тега
Следует отметить что написание значений атрибутов следует писать в двойных кавычках.
Описание документа строится на основании тегов. Весь документ должен быть заключен в главный тег (см. рисунок 1.5).

Рисунок 1.5 – Структура html-документа
Все теги можно условно разделить на группы по их функциональному назначению: теги уровня документа, теги форматирирования, теги структурных элементов и т.д.
1.1.4 Теги уровня документа
<html>…</html>
парный тег-контейнер, который заключает в себе все содержимое
веб-страницы. Открывающий и закрывающий теги в документе обязательны,
для того что бы указать границы документа.
<head>…</head>
тег предназначен для хранения элементов, которые используются для
хранения служебной информации предназначенной для браузеров и поисковых
систем. Содержимое тега не отображается на странице, за исключением тега
.
<title>…</title>
содержит текст заголовка, который отображается в строке заголовка окна браузера.
<body>…</body>
предназначен для хранения содержимого веб-страницы (контента),
отображаемого в окне браузера (форматированный текст, изображения,
таблицы и т.д.). Тег может содержать множество атрибутов, которые
влияют на отображения всего документа вцелом.
Таблица 1.1 Основные атрибуты тега
Название атрибута | Назначение атрибута |
alink | цвет активной ссылки (цвет задается шестнадцатеричным числом или константой, например красные: red или #ff0000) |
background | фоновый рисунок на веб-странице |
bgcolor | цвет фона веб-страницы |
topmargin (leftmargin, bottommargin) | отступ от верхнего (левого, нижнего) края окна браузера до контента |
link | цвет ссылок на веб-странице |
text | цвет текста в документе |
vlink | цвет посещенных ссылок |
Например следующий фрагмент html-кода задает для всего
документа цвет текста зеленый, цвет ссылок черный, цвет фона
желтый. Листинг 1.1.
Листинг 1.1 — Пример использования атрибутов тега

1.1.5 Основные теги форматирования текста
Таблица 1.2 — Теги форматирования текста
Название тега | Назначение тега, атрибуты |
<b>..</b>или<strong>…<strong> | устанавливает жирное начертание шрифта |
<i>…</i> | устанавливает курсивное начертание шрифта |
<u>…</u> | устанавливает подчеркнутое начертание шрифта |
<strike>…</strike> | устанавливает зачеркнутое начертание шрифта |
<cite>…</cite> | помечает текст как цитату, обычно отображается курсивом |
<code>…</code> | предназначен для отображения текста, который представляет собой программный код, обычно отображается моноширинным шрифтом |
<del>…</del> | используется для выделения текста, который был удален в новой версии документа |
< ins>…</ins> | используется для выделения текста, который был добавлен в новую версию документа |
<dfn>…</dfn> | применяется для выделения терминов при их первом появлении в тексте |
<sup>…</sup> | отображает шрифт в виде верхнего индекса |
<sub>…</sub> | отображает шрифт в виде нижнего индекса |
<pre>…</pre> | определяет блок текста, в котором сохраняется количество пробелов между словами, заданное на этапе создания документа |
< nobr>…</nobr> | уведомляет браузер отображать текст в одну строку без переноса |
<h1>…</h1>…<h6></h6> | устанавливает заголовки различного уровня значимости от самого крупного h1 до самого мелкого h6 |
<font>…</font> | предназначен для установки характеристик шрифта, которые задаются в атрибуте тега. Тег имеет следующие атрибуты:color=… задает цвет шрифта (в шестнадцатеричной форме, например, #ff0000)face=… задает гарнитуру шрифта (Arial, Tahoma)size=… задает размер шрифта в условных единицах (целое число от 1 до 7 или изменения числа +1 или -2) самый крупный шрифт 7 |
<p>…</p> | определяет границы абзаца. Тег имеет атрибут align, который отвечает за выравнивание текста и может принимать значения: left, right, center и justify |
<br> | устанавливает принудительный перенос строк |
< hr> | рисует горизонтальную линию. Параметры горизонтальной линии можно задать с использованием атрибутов тега:align=… определяет выравнивание линииcolor=… цвет линииnoshade=… рисует линию без трехмерных эффектовsize=… толщина линии в пикселяхwidth=… ширина линии в пикселях |
При установке разметки текста теги можно писать вручную, или пользоваться панелями инструментов HTML, HTML Formatting, HTML Tables и HTML Forms. Например, для установки жирного начертания текста следует:
- выделить фрагмент текста, который следует сделать жирным;
- нажать на панели инструментов HTML Formatting кнопку с указанием жирного начертания;
- в результате необходимые теги будут добавлены в документ;
- если есть необходимость задать атрибуты тега, то сделать это можно с помощью палитры Inspector. Выделить тег, которому следует изменить атрибуты и установить их значение.
1.1.6 Специальные символы и комментарии
Ряд символов в языке используется в служебных целях (знаки больше и меньше), а ряд символов невозможно набрать на клавиатуре (неразрывный пробел, копирайт). Для отображения таких символов используют специальные коды, которые пишут во время верстки html-страниц (см. Таблицу 1.3):
Таблица 1.3 — Спецсимволы языка HTML
Имя | Код | Вид | Описание |
" | " | « | двойная кавычка |
& | & | & | амперсанд |
< | < | < | знак ‘меньше’ |
> | > | > | знак ‘больше’ |
|   | неразрывный пробел | |
§ | § | § | параграф |
© | © | © | знак copyright |
® | ® | ® |
знак зарегистрированной торговой марки |
° | ° | ° | градус |
± | ± | ± | плюс-минус |
™ | ™ | ™ | торговая марка |
° | ° | ° | градус |
Такие символы можно добавлять как в виде имени, так и в виде кода. В программе HTMLPad для этого можно использовать команду Insert — Character — Special Character…
Для комментариев или временного исключения текста из html-страницы используют пары символов: <!— Текст комментария ->.
1.2 Практическая часть
- Запустите веб-сервер Open Server.
- Откройте в браузере адрес localhost. Если вы видите надпись: Добро пожаловать в Open Server!, то значит веб-сервер работает.
- Создайте свой домен, в имени которого будет присутствовать ваша фамилия. В папке www вашего домена (каталога) создайте файл index.html (именно с этого файла всегда начинается загрузка содержимого домена, если конечно, не указано что-то другое явно).
- Откройте файл index.html с помощью программы NVU.
- Запишите в него следующие строки:

- Сохраните файл.
Проверьте в браузере результат, набрав в адресной строке имя вашего сервера из задания 3 В случае возникновения проблем с загрузкой сервера обратитесь к теоретическим сведениям. - Все файлы и изображения, которые будут появляться на вашей веб-страничке, должны располагаться внутри папки <имя домена>/domains и иметь адреса начиная с корня сайта, а не с корня диска С: или D:
- Создайте папку htmlbook внутри папки вашего домена. Скопируйте туда содержимое папки html/htmlbook из архива к лабораторной работе. Посмотрите на результат с помощью браузера используя путь html://ваш_домен/htmlbook/
- Используя информацию текстового файла из архива к лабораторной работе отформатируйте содержимое страницы таким образом, что бы она была похожа на рисунок 1.6 . При форматировании используйте теги из теоретических сведений и из приложения А;
Рисунок 1.6 – Образец для выполнения лабораторной работы
- Создайте новый документ с именем lab1.htm и сохраните его в корне своего домена.
- Между открывающимся и закрывающимся тегом <body> добавьте текст из файла. Сохраните его и посмотрите в браузере что получилось.
- Измените фон страницы и цвет текста согласно рисунку.
- Разбейте текст на абзацы используя тег <p>.
- Обратите внимание на то, что бы у вас не было красных (не закрытых) тегов.
- Установите абзацам выравнивание. Для этого установите перейдите во вкладку программы «HTML-теги» два раза щелкните мышью в тег открывающегося тега абзаца (в тег <p>). И в атрибуте aling выберите нужное значение. Если значение выравнивания по ширине не выбирается из списка, то установите его вручную: align=“justify”.
- Установите словам жирное, подчеркнутое и курсивное начертание.
- Во втором абзаце используйте верхний индекс.
- Использую специализированные теги выделите цитату и программный код. Используйте дополнительный тег <pre> для сохранения числа пробелов между словами в программном коде.
- Используя тег <font> выделите названия поисковых систем.
- Измените цвет яндекса на желтый.
- Добавьте в документ два линии, первую длиной в 400 пикселей, а высотой в 5 пикселей. А вторую и третью шириной 50%.
- Используя теги <h1>..<h6> выделите заголовки.
- Используя коды специальных символов отобразите на странице знак меньше. И подпишите выполненное задание как указано на рисунке 1.6.
- Создайте новый файл lab2.html и скопируйте в нее вопросы к лабораторной работе, данные ниже. И после каждого вопроса запишите ответ.
- Проверьте что все файлы у вас доступны через сервер с использование доменного имени.
- Покажите выполненную работу.
1.3 Контрольные вопросы
- Как добавить в Open Server свой домен?
- Как проверить работоспособность нового домена?
- Какую программу можно использовать для создания html-страниц?
- Что такое тег?
- Какие существуют теги уровня документа?
- Какими тегами можно выделить текст жирным, курсивом, подчеркиванием?
- Какие атрибуты используются тегом <body>?
- Какими тегами можно отметить верхний и нижний индексы?
- Какой тег позволяет изменить одновременно шрифт, цвет текста и размер текста?
- В чем отличие тегов <br> и <p>?
- С помощью чего можно управлять выравниванием абзаца?
- Как добавить в документ горизонтальную линию?
- Что такое специальные символы и как их можно добавить в документ?
- Между какими символами заключаются комментарии?