Как за 8 уроков научить детей создавать сайт

Смирнова Татьяна Михайловна
Опубликовано 10.11.2011 - 23:11 - Смирнова Татьяна Михайловна

В учебно-методическом пособии «Создание Web-сайта на языке HTML» представлена разработка 8 уроков: теоретический материал и практические задания. Пособие предназначено для проведения уроков  информатики и ИКТ в 8 классах общеобразовательных учебных заведений по теме «Коммуникационные технологии». 

Скачать:

Предварительный просмотр:

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

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

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

Приложение 1

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

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

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

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

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

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

<HTML>

<HEAD>

</HEAD>

<BODY>

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

</BODY>

</HTML>

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

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

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

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

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

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

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

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

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

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

<BODY>

<B>Драматические  театры</B> <BR>

<I>Санкт-Петербурга</I>

</BODY>

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

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

<BODY>

<FONT SIZE=5 COLOR=red>

<B>Драматические театры</B> <BR>

</FONT>

<I>Санкт-Петербурга</I>

</BODY>

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

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

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

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

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

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

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

<BODY BGCOLOR=BLUE TEXT=YELLOW>

<P ALIGN=CENTER>

<FONT SIZE=5 COLOR=RED>

<B>Драматические театры</B> <BR>

<I>Санкт-Петербурга</I>

</FONT>

</P>

</BODY>

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

<BODY BGCOLOR=BLUE TEXT=YELLOW >

<P ALIGN=CENTER>

<FONT SIZE=5 COLOR=RED>

<B>Драматические театры</B> <BR>

<I>Санкт-Петербурга</I>

</FONT>

</P>

<P ALIGN=LEFT>

<H1>Драматический театр им.Комиссаржевской</H1>

<H2>Малый драматический театр «Европа»</H2>

<H3>Драматический театр на Литейном</H3>

<H4>Большой драматический им.Товстоногова</H4>

</P>

</BODY>

3. Оформите названия театров как ненумерованный список <UL>, заменив <H> на <LI>:

<P ALIGN=LEFT>

<UL>

<LI> Драматический театр им.Комиссаржевской

<LI> Малый драматический театр «Европа»

<LI> Драматический театр на Литейном

<LI> Большой драматический им.Товстоногова

</UL>

</P>

4. Создайте  нумерованный список: <UL> замените на <OL>. Посмотрите разные виды нумераций, написав <OL type="square">, попробуйте все виды нумераций списка: "Circle", "Disk", "A", "I"

<OL type="square">,

<LI> Драматический театр им.Комиссаржевской

<LI> Малый драматический театр «Европа»</>

<LI> Драматический театр на Литейном

<LI> Большой драматический им.Товстоногова

</OL>

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

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

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

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

Чтобы рисунок был по центру, его надо заключить в тег <CENTER> <img src = .....</CENTER>

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

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

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

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

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

<CENTER>

<IMG SRC=’имя графического файла’ alt= ‘драматический театр’ width=50%  height=50% vspace=20 hspace=20 border=5>

</CENTER>

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

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 оформите как гиперссылки:

<OL type="square">,

<LI><A HREF=”a1.htm”> Драматический театр им.Комиссаржевской </A>

<LI><A HREF=”a2.htm”> Малый драматический театр «Европа»</></A>

<LI><A HREF=”a3.htm”> Драматический театр на Литейном </A>

<LI><A HREF=”a4.htm”> Большой драматический театр им.Товстоногова </A></OL>

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

<A HREF=”glavn.htm”> На главную </A>

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

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

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

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

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

<TABLE ALIGN=CENTER BGCOLOR= green BORDER=3 WIDTH=100%)

<TR ALIGN=CENTER >

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

</TR>

</TABLE>

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

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

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

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

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

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

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

<HEAD>

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

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> 

<meta name="author" CONTENT="фамилия, класс, гимназия №441">

<meta name="Keywords" content="драматические, театры, Товстоногов, Комиссаржевская, Европа, ул.Рубинштейна»>

</HEAD>

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

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

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

Зачет

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

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


Комментарии

Как за 8 уроков научить детей создавать сайт

Опубликовано 25.11.2011 - 15:11 - Толмачева Нина Михайловна

Спасибо, Татьяна Михайловна!
Коротко и четко!