Лабораторная работа №2

 Web-сервер Денвер. Введение в HTML.

Цель: Научиться устанавливать Денвер, создавать собственные домены и поддомены в программе Денвер-3. Освоить основные принципы работы с программой “NVU”. Научиться применять теги HTML для структурирования страницы и форматирования текста.

1.1 Теоретические сведения

1.1.1 Денвер-3. Установка программного продукта.

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

Для установки программного продукта Денвер-3 необходимо скачать дистрибутив с сайта http://denwer.ru и запустить установочный файл. Во время установки необходимо выбрать
следующие опции:

  • установку осуществить в папку C:\WebServer, а не в привычную папку C:\Program Files;
  • выбрать вариант запуска вручную, а не как службу.

После установки Денвера его следует запустить вручную и проверить работоспособность. Для этого в браузере необходимо набрать адрес тестовой страницы http://localhost/denwer/.
В случае успешной установки на экране появится страничка «Ура заработало!».

1.1.2 Создание собственного домена на локальном компьютере

После установки программы все необходимые для ее работоспособности файлы располагаются в папке C:\WebServers. Благодаря этому папку можно переносить с компьютера на компьютер, не нарушая работоспособности сервера.

Для создания собственного домена в рамках локального компьютера достаточно добавить новую папку с именем домена в каталог C:\WebServers\home. Например myserver.ru (см. рисунок 1.1).

Файлы, которые должны находиться на этом сервере необходимо поместить в папку C:\WebServers\home\myserver.ru\www. При создании собственного домена следует учитывать нежелательность использования в имени домена букв кириллицы и специальных символов.

weblab1image002Рисунок 1.1
– Расположение доменов на Денвере

Для проверки работоспособности нового домена следует:

  • перегрузить Денвер-3 (сделать это можно с помощью
    ярлыка weblab1image004 Restart servers в меню Пуск или с помощью запускного файла C:\WebServers\Denwer\Restart.exe);
  • открыть в браузере страницу с адресом нового домена (например myserver.ru). При этом в случае успешного запуска сервера на экране отобразится список файлов или содержимое файла с именем index. На большинстве сайтов при указании пути к домену или к папке отображается файл index.html или index.php или содержимое каталога, в
    случае если индексный файл отсутствует.

Вариант когда новый поддомен не отображается в браузере:

  1. выполнить команду ping на новый домен (ping myserver.ru). Если ответ получен значит Денвер с новыми настройками успешно запущен. Если ответа нет, то возможно а) Денвер не был перезапущен с момента добавления нового домена; б) имя папки отличается
    от имени пингуемого домена; в) внутри домена не создана папка www.
  2. если команда ping проходит, то возможно в браузере вы пользуетесь прокси-сервером для доступа в интернет (см. рисунок 1.2).
    Например в браузере Internet Explorer необходимо добавить ваш домен в список исключений. Для этого необходимо зайти в Сервис — Свойства обозревателя — Подключения — Настройка сети — Дополнительно… в поле Исключения указать адрес вашего нового домена.
  3. еще раз проверьте что имя домена содержит только латинские буквы и цифры, а так же не содержит пробелов.

weblab1image002 weblab1image006

Рисунок 1.2 – Добавление исключений для прокси-сервера

1.1.3 Интерфейс программы NVU

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

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

На рисунке 1.3 отображены основные элементы интерфейса окна программы “NVU”.  C первого взгляда NVU напоминает какой-то текстовый редактор. Это и есть его главная заслуга — визуальный графический интерфейс. Но, посмотрев внизу, Вы увидите, что помимо обычного есть еще несколько режимов отображения введенной информации: HTML-теги, код и предварительный просмотр.

NVU

Рисунок 1.3 – Интерфейс программы “ NVU”

Возможности NVU

  • поддержка нескольких режимов
    отображения
    редактируемой страницы;
  • расширенные возможности для редактирования текста;
  • вставка картинок (в том
    числе и фоновых);
  • редактирование отдельных
    страниц и целых сайтов;
  • создание форм и таблиц;
  • проверка орфографии;
  • возможность публикации сайта прямо из программы;
  • встроенный редактор CSS и консоль Java Script.

 

1.1.4 Структура HTML-документа

Составление страниц для сайта базируется на языке HTML (от англ. Hypertext Markup Language – язык разметки гипертекста). Все страницы сайта имеют расширение .htm или .html.

Основной структурной единицей языка является тег с его атрибутами. Тег представляет собой заключенные в треугольные скобки инструкции языка, которые сообщают, какими свойствами должен обладать тот или иной фрагмент текста на странице. Большинство тегов являются парными: содержат как открывающийся, так и закрывающийся тег (см. рисунок 1.4):

weblab1image014

Рисунок 1.4 – Структура тега

Следует отметить что написание значений атрибутов следует писать в двойных кавычках.

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

weblab1image015

Рисунок 1.5 – Структура html-документа

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

1.1.5 Теги уровня документа

<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 — Пример использования атрибутов тега

weblab1image018

1.1.6 Основные теги форматирования текста

Таблица 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.7 Специальные символы и комментарии

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

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

Имя

Код

Вид

Описание

&quot;

&#34;

«

двойная кавычка

&amp;

&#38;

&

амперсанд

&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. Запустите веб-сервер: Пуск — Денвер — Start (или C:\WebServers\denwer\run.exe). Когда он запустится в системном трее у вас появится значок в виде малинового пера.
    2. Проверьте работу Денвера выполнив в командной строке ping test1.ru. Если ответ происходит от адреса 127.0.0.1 значит Денвер запущен и успешно работает на локальном компьютере.
    3. Откройте в браузере адрес test1.ru. Если происходит запрос пароля, то отключите в настройках прокси сервер для адреса test1.ru. Для Internet Explorer необходимо выполнить следующие действия: Сервис — Свойства обозревателя Þ Подключения —
      Настройка сети — Дополнительно. В поле Не использовать прокси сервер для адресов начинающихся с: добавить к имеющимся записям (через точку с запятой) адрес test1.ru.
    4. Обновите страницу с адресом test1.ru.
    5. Для создания собственных доменов, на локальном компьютере создайте в каталоге c:\WebServers\home папку с именем домена help1.ru (для 1 подгруппы) и help2.ru (для 2 подгруппы), на котором вы будите проводить тестирование сайта. Сам сайт находится в архиве lab_2 прилагаемом к лабораторной работе.
    6. В папке help1.ru (или help2.ru) создайте папку www в которую скопируйте содержимое папки htmlbook (взятой из дополнительных материалов к лабораторной работе).
    7. Проверьте что бы файл index.html содержался в папке www, а не во вложенных папках.
    8. Используя меню Пуск перезапустите Денвер (для того что бы вновь созданный домен “поднялся”). Проверьте работоспособность сайта через команду ping, а затем посмотрите в браузере. Обратите внимание, что на экране отображаются файлы из папки c:\WebServers\home\help1.ru\www , но путь к файлам указан как для сервера с указанием доменного имени, а не как для файлов с диска С.
    9. Создайте свой домен, в имени которого будет присутствовать ваша фамилия и группа. В папке www вашего домена (каталога) создайте файл index.html (именно с этого файла всегда начинается загрузка содержимого домена, если конечно, не указано что-то
      другое явно).
    10. Откройте файл index.html с помощью программы NVU.
    11. Запишите в него следующие строки:weblab1image001
    12. Сохраните файл. Перезапустите Денвер(= веб-сервер).
      Проверьте в браузере результат, набрав в адресной строке имя вашего сервера из задания 8. В случае возникновения проблем с загрузкой сервера обратитесь к теоретическим сведениям.
    13. Все файлы и изображения, которые будут появляться на вашей веб-страничке,  должны располагаться внутри папки <имя домена>/www и иметь адреса начиная с корня сайта, а
      не с корня диска С: или D:  Поэтому выберите фоновое изображение, скопируйте его в папку www и измените фон страницы (Меню «Формат» — «Цвет и фон страницы»). Сохраните и просмотрите результаты работы в браузере.
    14. Используя информацию текстового файла из архива к лабораторной работе отформатируйте содержимое страницы таким образом, что бы она была похожа на рисунок 1.6 . При форматировании используйте теги из теоретических сведений и из приложения А;

weblab1image023

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

Добавить комментарий

Яндекс.Метрика