Сайт
Чукина
Владимира
Владимировича

22 июля 2024 г.

Лабораторная работа №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 дней.

Православное радио "Воскресенье"   Валаамский монастырь   Медиа-сервер "Россия Православная"   Интернет-магазин "ЛинуксЦентр"   Яндекс цитирования   Valid CSS!   Valid XHTML 1.0 Strict!   Unicode Encoded Badge