Лабораторная работа №1. Open Server. Введение в HTML.

Цель: Научиться пользоваться локальным 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. Например, для установки жирного начертания текста следует:

1. выделить фрагмент текста, который следует сделать жирным;
2. нажать на панели инструментов HTML Formatting кнопку с указанием жирного начертания;
3. в результате необходимые теги будут добавлены в документ;
4. если есть необходимость задать атрибуты тега, то сделать это можно с помощью палитры Inspector. Выделить тег, которому следует изменить атрибуты и установить их значение.

1.1.6 Специальные символы и комментарии

Ряд символов в языке используется в служебных целях (знаки больше и меньше), а ряд символов невозможно набрать на клавиатуре (неразрывный пробел, копирайт). Для отображения таких символов используют специальные коды, которые пишут во время верстки html-страниц (см. Таблицу 1.3):

Таблица 1.3 — Спецсимволы языка HTML

Имя	Код	Вид	Описание
"	"	«	двойная кавычка
&	&	&	амперсанд
&lt;	&#60;	<	знак ‘меньше’
&gt;	&#62;	>	знак ‘больше’
&nbsp;	&#160;		неразрывный пробел
&sect;	&#167;	§	параграф
&copy;	&#169;	©	знак copyright
&reg;	&#174;	®	знак зарегистрированной торговой марки
&deg;	&#176;	°	градус
&plusmn;	&#177;	±	плюс-минус
&trade;	&#8482;	™	торговая марка
&deg;	&#176;	°	градус

Такие символы можно добавлять как в виде имени, так и в виде кода. В программе HTMLPad для этого можно использовать команду Insert — Character — Special Character…

Для комментариев или временного исключения текста из html-страницы используют пары символов: <!— Текст комментария ->.

1.2 Практическая часть

1. Запустите веб-сервер Open Server.
2. Откройте в браузере адрес localhost. Если вы видите надпись: Добро пожаловать в Open Server!, то значит веб-сервер работает.
3. Создайте свой домен, в имени которого будет присутствовать ваша фамилия. В папке www вашего домена (каталога) создайте файл index.html (именно с этого файла всегда начинается загрузка содержимого домена, если конечно, не указано что-то другое явно).
4. Откройте файл index.html с помощью программы NVU.
5. Запишите в него следующие строки:

6. Сохраните файл.
   Проверьте в браузере результат, набрав в адресной строке имя вашего сервера из задания 3 В случае возникновения проблем с загрузкой сервера обратитесь к теоретическим сведениям.
7. Все файлы и изображения, которые будут появляться на вашей веб-страничке,  должны располагаться внутри папки <имя домена>/domains и иметь адреса начиная с корня сайта, а не с корня диска С: или D:
8. Создайте папку htmlbook внутри папки вашего домена. Скопируйте туда содержимое папки html/htmlbook из архива к лабораторной работе. Посмотрите на результат с помощью браузера используя путь html://ваш_домен/htmlbook/
9. Используя информацию текстового файла из архива к лабораторной работе отформатируйте содержимое страницы таким образом, что бы она была похожа на рисунок 1.6 . При форматировании используйте теги из теоретических сведений и из приложения А;

Рисунок 1.6 – Образец для выполнения лабораторной работы

1. Создайте новый документ с именем lab1.htm и сохраните его в корне своего домена.
2. Между открывающимся и закрывающимся тегом <body> добавьте текст из файла. Сохраните его и посмотрите в браузере что получилось.
3. Измените фон страницы и цвет текста согласно рисунку.
4. Разбейте текст на абзацы используя тег <p>.
5. Обратите внимание на то, что бы у вас не было красных (не закрытых) тегов.
6. Установите абзацам выравнивание. Для этого установите перейдите во вкладку программы «HTML-теги» два раза щелкните мышью в тег открывающегося тега абзаца (в тег <p>). И в атрибуте aling выберите нужное значение. Если значение выравнивания по ширине не выбирается из списка, то установите его вручную: align=“justify”.
7. Установите словам жирное, подчеркнутое и курсивное начертание.
8. Во втором абзаце используйте верхний индекс.
9. Использую специализированные теги выделите цитату и программный код. Используйте дополнительный тег <pre> для сохранения числа пробелов между словами в программном коде.
10. Используя тег <font> выделите названия поисковых систем.
11. Измените цвет яндекса на желтый.
12. Добавьте в документ два линии, первую длиной в 400 пикселей, а высотой в 5 пикселей. А вторую и третью шириной 50%.
13. Используя теги <h1>..<h6> выделите заголовки.
14. Используя коды специальных символов отобразите на странице знак меньше. И подпишите выполненное задание как указано на рисунке 1.6.
15. Создайте новый файл lab2.html и скопируйте в нее вопросы к лабораторной работе, данные ниже. И после каждого вопроса запишите ответ.
16. Проверьте что все файлы у вас доступны через сервер с использование доменного имени.
17. Покажите выполненную работу.

1.3 Контрольные вопросы

1. Как добавить в Open Server свой домен?
2. Как проверить работоспособность нового домена?
3. Какую программу можно использовать для создания html-страниц?
4. Что такое тег?
5. Какие существуют теги уровня документа?
6. Какими тегами можно выделить текст жирным, курсивом, подчеркиванием?
7. Какие атрибуты используются тегом <body>?
8. Какими тегами можно отметить верхний и нижний индексы?
9. Какой тег позволяет изменить одновременно шрифт, цвет текста и размер текста?
10. В чем отличие тегов <br> и <p>?
11. С помощью чего можно управлять выравниванием абзаца?
12. Как добавить в документ горизонтальную линию?
13. Что такое специальные символы и как их можно добавить в документ?
14. Между какими символами заключаются комментарии?