Главная / Дисциплины / Сетевые технологии обмена информацией / Лабораторная работа №3

Лабораторная работа №3
Создание html-страницы

Цель работы - создание html-страницы с информацией об одном из городов России (название города уточнить в разделе "Спискок групп").

1. Сбор информационных материалов

Создание на `Рабочем столе` каталога `lab3`

Расположить указатель "мыши" над свободной частью Рабочего стола
Нажать правую кнопку "мыши"
В появившемся меню выбрать пукнт Создать->Папку
Указать имя каталога lab3 и нажать на клавишу Enter

Получение герба города

Перейти на сайт Яндекс.Картинки
В поисковой строке указать, например, "герб города Томск" (для поиска герба города Томск)
Скопировать изображение герба города в каталог lab3, при копировании файлу дать имя gerb.gif,
для этого щелкнуть правой кнопкой по изображению герба в верхней правой части окна, в появившемся меню выбрать пункт Сохранить изображение как..., указать каталог lab3 и имя файла gerb.gif и нажать на кнопку OK

Получение карты города

Перейти на сайт Яндекс.Карты. Найти город, разместить его в центре карты. Посмотреть координаты центра города щелкнув по кнопке "Получить информацию" (кнопка со стрелкой и знаком вопроса). В левой панели указаны: широта и долгота места.

Получение справочной информации о городе

Перейти на сайт одной из поисковых систем Яндекс, Google
В строке поиска ввести ключевые слова, например, для города Томска слова могут быть: Томск город информация
На основе данных результата поиска составить справочную информацию о городе (10-15 предложений)

В результате перечисленных выше действий на Рабочем столе должен быть каталог lab3 в котором содержится файл gerb.gif.

2. Создание html-страницы

Создать в каталоге lab3 текстовый файл index.html, для этого

Запустить текстовый редактор, например, программу Блокнот (меню Пуск->Программы>Стандартные->Блокнот)
В меню Файл выбрать пункт Сохранить как...
Указать каталог lab3
Указать имя файла index.hmtl в двойных кавычках
Выбрать кодировку UTF-8
Нажать на кнопку Сохранить

В файле index.html вручную разместите html-код страницы.
На странице должна быть отображена следующая информация:

Герб города
Название города
Кратрая информация о городе
Карта города
Подпись web-мастера, например, Copyright © 2015, Петров И. С., либо Учебный проект Петрова И. С., или же web-студия БОТАНИК (Петров И. С.)

Например, сначало можно написать основную структуру html-страницы:

Затем, между тегами <body></body> расположить отображаемую информацию.
К примеру, тег изображения имеет вид:

Текстовую информацию о городе лучше поместить между тегами <div></div>, выделяющими блок текста

При большом количестве текста, его лучше разбить на абзацы тегом <p></p>

Для добавления карты размером 600x400 пикселей в нужное место на странице необходимо добавить тег

При этом в заголовок html-файла, между тегами <head></head>, необходимо поместить следующий код на JavaScript, при этом следует вместо [59.921502, 30.408511] указать значения широты и долготы места, соответствующих центру карты, то есть городу о котором данный сайт.

Сохранить файл на диск, для чего в выбрать пункт меню Файл -> Сохранить или нажать комбинацию клавиш Ctrl+S. При длительном редактировании файла рекомендуется сохранять его с периодичностью около 10 минут.

3. Просмотр html-страницы

Посмотреть на созданную страницу, для чего:

Два раза щелкнуть левой кнопкой "мыши" на названии файла index.html
В результате запуститься браузер (web-клиент) в окне которого отображается результат обработки html-кода

4. Отладка html-кода

При необходимости внесения изменений в html-код необходимо:

С помощью текстового редактора внести изменения в html-код
Сохранить файл на диск
В браузере нажать на кнопку Обновить

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

5. Размещение сайта на сервере

Скопировать содержимое каталога lab3 в корневой каталог на сервере. Для этого:

Запустить программу ftp-клиент (CuteFTP, FAR или другую)
Подключиться к ftp-серверу:
- Host Address: stud.rshu.ru
- User Name: логин (совпадает с именем сайта)
- Password: пароль
- Connection port: 21
- Label for site: название соединения (тут любое название).
Скопировать файлы index.html, gerb.gif из каталога lab3 локального компьютера в корневой каталог на сервере
Выйти из панели управления

6. Тестирование работы созданного сайта

Для тестирования работоспособности сайта необходимо:

Запустить браузер
В адресной строке указать URL к серверу (например, http://name.esy.es)
Нажать на клавишу Enter
В окне должна появиться созданная html-страница

7. Оформление отчета по лабораторной работе

Отправить электронное письмо на адрес @. В теме письма обязательно указать номер лабораторной работы, например, lab3. В тексте письма указать адрес сайта, а также Фамилию Имя Отчество (прикрепленные файлы не отправлять).
Информация о зачете лабораторной работы будет сообщена в ответном письме в течение 2-3 дней.

Лабораторная работа №3Создание html-страницы