Смирнова Татьяна Михайловна

учитель информатики и ИКТ

гимназия №441 г.Санкт-Петербург

Приложение 1

Практические задания

Учебно-методического пособия

Создание Web-сайта на языке HTML

Практическое задание №1

Создание первого HTML-документа «Драматические театры Санкт-Петербурга», работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы

1. Загрузите Блокнот и создайте HTML-документ вида:

2. Сохраните на диске в папке своего класса с именем glavn.htm (установите типфайла – все файлы).

3. Сверните окно программы Блокнот.

4. Загрузите Internet Explorer и откройте файл  glavn.htm из папки своего класса.

На экране появится текст: «Драматические театры Санкт-Петербурга»

5. С панели задач откройте файл glavn.htm.

6. В тексте вставьте несколько символов  

Драматические         театры Санкт-Петербурга

Каждый раз как только вносите изменения в HTML-документ, обязательно делайте сохранение со старым именем и сворачивайте окно программы Блокнот, а в окне браузера Internet Explorer делайте Обновить (клавиша F5).

Посмотрите, как изменится ваш текст (должны добавитья дополнительные пробелы).

7. Сделайте часть текста жирно, курсивом и с новой строки, например:

Не забывайте делать сохранение и смотреть, как меняется Web-страница в окне браузера.

Измените размет и цвет фразы «Драматические театры», например:

8. Самостоятельно измените размет и цвет фразы «Санкт-Петербурга», посмотрите, как отображаются разные цвета и размеры текста, создайте надписи:

СанктПетербурга  , СанктПетербурга.

Практическое задание №2

Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки

1. Откройте в окне браузера из своей папки файл glavn.htm.

Нажмите правою кнопку мыши и выберите просмотр html-кода.

Выровняйте весь заголовок по центру и сделайте его красным цветом, размер шрифта - 5, создайте голубой фон и желтый цвет текста

2. Поработайте с заголовками разных уровней, обратите внимание, что цвет добавленного текста – желтый, т.к. в задан желтый цвет. Названия театров выровняйте по левому краю.

3. Оформите названия театров как ненумерованный список

, заменив на
• :

  Драматический театр им.Комиссаржевской  Малый драматический театр «Европа»  Драматический театр на Литейном  Большой драматический им.Товстоногова

  4. Создайте  нумерованный список:

   замените на
  . Посмотрите разные виды нумераций, написав
  , попробуйте все виды нумераций списка: "Circle", "Disk", "A", "I"

  ,  Драматический театр им.Комиссаржевской  Малый драматический театр «Европа»  Драматический театр на Литейном  Большой драматический им.Товстоногова

  5. Не забывайте сохранять свою страницу в одном и том же файле glavn.htm.

  Практическое задание №3

  Вставка и форматирование графических изображений. Самостоятельное создание Web-страниц драматических театров

  1. Найдите в Интернете фотографию любого драматического театра и сохрание в своей папке. Вставьте фотографию на Web-страницу в файл glavn.htm.

  Чтобы рисунок был по центру, его надо заключить в тег

   

  Уменьшите размеры рисунка в 2 раза по ширине и высоте, написав width=50% и height=50%.

  Увеличьте  пространство вокруг рисунка сверху и снизу, написав vspace=20 и hspace=20.

  Создайте альтернативный текст, который появится под указателем мыши при наведении на картинку, написав alt= “драматический театр”.

  Создайте вокруг рисунка обрамляющую рамку: border=5.

  В итоге у вас может появиться, например, такой тег, напишите его после тегов форматирования заголовка (перед списком театров):

  ‘драматический театр’ width=50%  height=50% vspace=20 hspace=20 border=5>

  Если рисунок окажется слишком маленьким, поэкспериментируйте с соответствую щими атрибутами.

  2. Самостоятельно создайте HTML-документы для всех театров, называя их a1.htm, a2.htm, a3.htm, a4.htm, взяв за основу файл glavn.htm. Измените заголовок, фотографию театра, вместо списка театров вставьте небольшой текст про театр и выровняйте его по ширине. Фотографии театров и текст берите из Интернета. Фотографии театров сохраняйте в своей папке. Копирование фрагментов текста из Интернета осуществляйте через опции «Копировать» и «Вставить».

  3. Сохраняйте, созданные Вами файлы a1.htm, a2.htm, a3.htm, a4.htm в папке своего класса.

  Практическое задание №4

  Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров

  1. Списки с названиями театров в файле glavn.htm оформите как гиперссылки:

  ,  Драматический театр им.Комиссаржевской   Малый драматический театр «Европа»  Драматический театр на Литейном   Большой драматический театр им.Товстоногова

  2. Самостоятельно на всех HTML-страницах, посвященных театрам, создайте гиперссылку для возврата на гланую страницу, написав в конце текста:

  На главную

  3. Оставшееся время посвяшаем дооформлению Web-страниц про театры.

  У вас должен получиться простенький сайт про драматические театры С-Петербурга, проверьте, как он работает.

  Практичекое задание №5

  Создание навигации по сайту в виде таблицы из одной строки

  1. Создайте таблицу из одной строки на всю ширину экрана с названиями театров (для дальнейшего оформления навигации по сайту) в файле glavn.htm. Теги по созданию таблицы напишите сразу после :

  Главная т-р им.Комиссаржевской МДТ «Европа» т-р на Литейном БДТ им.Товстоногова

  2. Самостоятельно текст в таблице оформите как гиперссылки на соответствующиек файлы a1.htm, a2.htm, a3.htm, a4.htm. (Смотри урок №4).

  3. Созданную таблицу с гиперссылками скопируйте на все с Web-страницы: a1.htm, a2.htm, a3.htm, a4.htm Проверьте, как работаю гиперссылки. Сайт о драматических театрах С-Петербуга с навигацией в виде списков и в таблицах – готов.

  3. Домашнее задание: определитесь с темой, по которой будете создавать собственный сайт, по возможности, подберите материал.

  Примерные темы проекта: «Мосты через Неву», «Реки и каналы Санкт-Петербурга», «Мосты через каналы Санкт-Петербурга», «Необычные музеи Санкт-Петербурга», «Музыкальные театры», «Филармонии и капелла», «Технические ВУЗ-ы Санкт-Петербурга», «Детские театры Санкт-Петербурга», «Гуманитарные ВУЗ-ы Санкт-Петербурга», «Пригороды Санкт-Петербурга», «Музеи Санкт-Петербурга», «Военные учебные заведения в Санкт-Петербурге» т.п.

  Практические задания №6 и №7

  Секция заголовка , работа над проектом

  1. Напишите в секцию заголовка в файл glavn.htm:

  HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">   name="author" CONTENT="фамилия, класс, гимназия №441">  name="Keywords" content="драматические, театры, Товстоногов, Комиссаржевская, Европа, ул.Рубинштейна»>

  2. Скопируйте теги в файлы a1.htm, a2.htm, a3.htm, a4.htm.

  3. Самостоятельная работа над своим проектом по выбранной теме.

  Практическое задание №8

  Зачет

  1. Контрольный тест на знание тегов языка HTML - 15 минут.

  2. Представление проекта и оценивание его учениками класса и учителем – 30 минут.