Компьютерный практикум по информатике 7-9 класс. Обложка_

Практическая работа 3 «Создание мини-сайта»

Задание 1.1.  «Создание шаблона веб-страниц»
  1. Создайте на рабочем столе личную папку, куда вы будете сохранять все файлы своего сайта.
  2. Запустите встроенный текстовый редактор Блокнот.
Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_1. Запуск блокнота
  1. Выберите в меню раздел «Формат» и убедитесь, что напротив пункта «Перенос по словам» стоит галочка.
Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_1. Перенос по словам
  1. Наберите или скопируйте шаблон HTML документа.
<html>
<head>
  <title> Заголовок документа </title>
</head>
<body>
  Здесь находится тело документа. 
</body>
</html>
  1. Сохраните документ с расширением .html, для этого:
    • перейдите в раздел меню «Файл» ⇒ выберите пункт «Сохранить как...»;
    • укажите путь в личную папку;
    • впишите index.html в поле «Имя файла»;
    • кодировка - UTF-8;
    • нажмите кнопку «Сохранить»;
    • закройте текстовый документ.
Практикум 7-9 класс. Создание Web-сайта. Информатика. ПР_1. Сохранение документа
  1. Если всё выполнено верно, то в вашей папке появится веб-документ «index». Закройте текстовый документ.
  2. Сделайте две копии файла «index» и переименуйте их в «editor» и «grafica». Итого в вашей папке должно находиться три веб документа.
Задание 1.2.  «Оформите главную страница сайта»
  1. Откройте документ «index». Посмотрите как отображается в браузере оформленный вами гипертекст.
  2. Временно сверните браузер.
  3. Теперь откройте веб-документ «index» для редактирования, выполнив следующее:
    • нажмите правой кнопкой мыши (далее ПКМ) по веб-документу «index»;
    • наведите на пункт «Открыть с помощью» ⇒ «Блокнот»;
    • если приложения «Блокнот» нет в списке, тогда делаем следующее:
      • выбираем пункт «Открыть с помощью» ⇒ «Выбрать другое приложение»;
      • появится окно «Каким образом вы хотите открыть файл?». Листаем в самый низ и нажимаем по ссылке «Ещё приложения»;
      • выбираем приложение «Блокнот».
    • нажимаем кнопку «ОК».
  4. Наберите текст и отформатируйте его по образцу представленному ниже.
Создание веб-сайта. 9 класс. ПР 3. index
  1. Вставьте ссылки на первый и второй элемент маркированного списка, для этого
    • замените Html-редактор на <a href="editor.html">Html-редактор</a>;
    • замените Графический редактор на <a href="grafica.html">Графический редактор</a>.
  2. Сохраните документ.
Задание 1.3.  «Оформите страницу «HTML-редактор»»
  1. Откройте документ «editor». Посмотрите как отображается в браузере оформленный вами гипертекст.
  2. Временно сверните браузер.
  3. Теперь откройте веб-документ «editor» для редактирования с помощью программы блокнот.
  4. Наберите текст и отформатируйте его по образцу представленному ниже.
Создание веб-сайта. 9 класс. ПР 3. editor
  1. Используйте тег <img src="имя картинки.расширение" width="350 px">, чтобы вставить картинку.
Создание веб-сайта. 9 класс. ПР 3. Notepad++
  1. Ссылка [ Домой ] содержит код <a href="index.html">Домой</a>.
  2. Сохраните документ.
Задание 1.3.  «Оформите страницу «Графический редактор»»
  1. Откройте документ «grafica». Посмотрите как отображается в браузере оформленный вами гипертекст.
  2. Временно сверните браузер.
  3. Теперь откройте веб-документ «grafica» для редактирования с помощью программы блокнот.
  4. Наберите текст и отформатируйте его по образцу представленному ниже.
Создание веб сайта. ПР 3. Grafica
  1. Используйте тег <img src="имя картинки.расширение" width="350 px">, чтобы вставить картинку.
Создание веб сайта. ПР 3. Adobe Photoshop
  1. Ссылка [ Домой ] содержит код <a href="index.html">Домой</a>.
  2. Сохраните документ.