Способы создания сайтов. Основы HTML
методическая разработка по информатике и икт (10 класс) по теме

Погнаева Людмила Станиславовна
Опубликовано 11.03.2013 - 17:34 - Погнаева Людмила Станиславовна

ЦЕЛИ И ЗАДАЧИ  УРОКА:

  • Освоить основные этапы построения web - страниц
  • Освоить основные методы создания web - страниц
  • Иметь представление об особенностях оформления информационных блоков страницы
  • Освоить требования к созданию web - страниц
  • Познакомиться с инструментальными средствами создания сайтов
  • Научиться создавать HTML – файлы
  • Оформлять заголовки
  • Размещать  гиперссылки и графику на web - страниц

Скачать:

ВложениеРазмер
Файл sposoby_sozdaniya_saytov._osnovy_html.rar738.38 КБ

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

Урок практикум по теме : «Способы создания сайтов. Основы HTML»

ЦЕЛИ И ЗАДАЧИ  УРОКА:

  1. Освоить основные этапы построения web - страниц
  2. Освоить основные методы создания web - страниц
  3. Иметь представление об особенностях оформления информационных блоков страницы
  4. Освоить требования к созданию web - страниц
  5. Познакомиться с инструментальными средствами создания сайтов
  6. Научиться создавать HTML – файлы
  7. Оформлять заголовки
  8. Размещать  гиперссылки и графику на web - страниц

ХОД УРОКА

Этап урока (выбрать нужное)

Примерное время из часов, отведенных на урок .

Работа учителя

Работа учащихся

 ЦОР к уроку (ссылка)

I. Вводная часть

I.  Организационный момент

1мин

Приветствует учащихся с целью создания благоприятной атмосферы урока. Объявляет тему урока.

 Слушают, наблюдают, настраиваются на восприятие материала урока

II. Постановка цели урока

Актуализация знаний. Повторение теоретического материала.

7мин

Повторение  материала:

  1. На доске записать основные тэги HTML – стандарта
  2. Рассказать , что представляют собой веб-страница и веб-сайт.

Фронтальный опрос:

  1. Что такое веб-дизайн?
  2. Что мы понимает под понятием «юзабилити»?
  3. Перечислите «золотые правила» оформления сайта.
  4. С помощью каких приемов автор сайта старается повысить юзабилити? ( на примере представленного сайта)
  5. По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице. Почему?

 Отвечают на вопросы.

III. Основная часть

Объяснение порядка работы, цели и задачи работы.

8мин

1. Разработка сайта « Внутренние устройства компьютера».

Наш сайт будет посвящен компьютеру, Каждая страница должна содержать заголовок, поясняющий текст, иллюстрацию и панель навигации. Сайт будет состоять из 4 страниц.  Две страницы мы сделаем сегодня на уроке, а две другие вы самостоятельно сделаете дома и внесете  в них свое оформление.

Главная страница содержит: (Показ слайдов)

Заголовок – Давайте знакомиться –устройства компьютера.

Поясняющий текст : Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами. Иллюстрацию : рисунок компьютера

Навигационную панель : Гиперссылки на 3 другие страницы <ВНУТРЕННИЕ УСТРОЙСТВА

ВНЕШНИЕ УСТРОЙСТВА

СЛОВАРЬ >

Вторая страница: (Показ слайдов)

Заголовок – ВНУТРЕННИЕ УСТРОЙСТВА

Поясняющий текст :  Информацию об внутрнних устройствах в форме вложенного списка

Иллюстрацию : рисунок

Навигационную панель : Гиперссылки на 3 другие страницы <ВНУТРЕННИЕ УСТРОЙСТВА

ВНЕШНИЕ УСТРОЙСТВА

СЛОВАРЬ >

        2.Инструментальные средства создания сайтов

Для создания  сайта используются специальные инструментальные средства позволяющие создавать страницы имея минимальные  знания по основам программирования. В качестве самого удобного и распространенного  инструментального средства следует отметить  Microsoft Front Page , который входит в состав Microsoft office. (Показать на слайде). Также для создания сайта используют привычный и удобный текстовый редактор БЛОКНОТ.

        3.Практическая работа

Слушают учителя, делают записи  в  тетради.



Презентация 3 к уроку http://eduklgd.ru/org/mou01/mou0143/news43.php/3.pps

IV. Освоение учащимися нового материала: формирование конкретных представлений об изучаемых фактах, явлениях, их сущности и взаимосвязях у учащихся.

Проведение работы, объяснения учителя.

 20 мин

ХОД РАБОТЫ

1. Создайте папку site (Файл-Создать-Папку).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

<HTML>
<HEAD>
<TITLE> Устройства компьютера</TITLE>
</HEAD>
<BODY >
Давайте знакомиться – компьютер
</BODY>
</HTML>

4. Сохраните под именем index.htm в папке site.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат.

8. Оформим фразу “Давайте знакомиться – Устройства компьютера ” как заголовок. Для этого откроем HTML-код нашей страницы:

9. Зададим выравнивание заголовка “по центру”:

10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.»

11. Добавим на нашу страницу картинку.

12.Вставим гиперссылки и посмотрим на полученную страницу

1 СТРАНИЦА САЙТА

<HTML>

<HEAD>

<TITLE> Устройства компьютера</TITLE>

</HEAD>

<BODY >

<h1 align="center"> Давайте знакомиться – Устройства компьютера </h1>

<hr>

<IMG src="comp.wmf" align="right">

<P align="left">

Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.</P>

<p align="center">

<A HREF="index1.htm"> ВНУТРЕННИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА

</A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index3.htm"> СЛОВАРЬ </A>

</BODY>

</HTML>

13. Откройте текстовый редактор Блокнот .

14. Наберите следующий HTML-код:

СЛОВАРЬ

<HTML>
<HEAD>
<TITLE> Устройства компьютера</TITLE>
</HEAD>
<BODY >
Внутренние устройства
</BODY>
</HTML>

15. Сохраните под именем index1.htm в папке site.

16. Закройте текстовый редактор Блокнот.

17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.

19. Оформим фразу “ Внутренние устройства ” как заголовок. Для этого откроем HTML-код нашей страницы:

20. Зададим выравнивание заголовка “по центру”:

21. Создадим главный нумерованный список основных категорий ПО

22. Добавим вложенный список.

23. Добавим на нашу страницу картинку.

24.Вставим гиперссылки и посмотрим на полученную страницу


2 СТРАНИЦА  САЙТА

<HTML>

<HEAD>

<TITLE> Устройства компьютера </TITLE>

</HEAD>

<BODY >

<h1 align="center"> Внутренние устройства </h1>

<hr>

<IMG src="komp.wmf" align="right">

<ol>

<li> МАТЕРИНСКАЯ ПЛАТА

<li> ПРОЦЕССОР

<li> ОПРАТИВНАЯ ПАМЯТЬ

<li> ГРАФИЧЕСКИЙ РЕДАКТОР

<li> ЖЕСТКИЙ ДИСК

<li> ВИДЕОАДАПТЕР

<li> ЗВУКОВОЙ  АДАПТЕР

<li> СЕТВАЯ КАРТА

<li> ДИСКОВОД И СD- ROM

<li> КОММУНИКАЦИОННЫЕ ПОРТЫ

<li> СИСТЕМЫ ПРОГРАММИРОВАНИЯ

</OL>

<p align="center">

<A HREF="index.htm"> ГЛАВНАЯ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index3.htm"> СЛОВАРЬ </A>

</BODY>

</HTML>

  1. Создают файл index.htm в программе Блокнот.
  2. Просматривают его в браузере, анализируют полученный результат.
  3. Вставляют текст, картинку, гиперссылки
  4. Затем  создают вторую страницу сайта.
  5. Задают  вопросы.
  6. Отсылают по сети учителю выполненные работы.





Оценка результатов

7 мин

Просмотр полученных от учеников работ.

Участвуют  в обсуждении  полученных  результатов

V. Информация о домашнем задании и рекомендации по его выполнению

Выдача задания на дом по результатам проведенного урока

1 мин

Самостоятельно разработать 2 страницы сайта.

Полезные  ссылки дополнительно для учеников:

Cайт видеоуроки  в сети Интернет.  videouroki..net http://videouroki.net/videouriki/html/saitostroenie/saitostroenie.html


http://videouroki.net/filecom.php?fileid=98659371


Электронный учебник http://www.univer.omsk.su/omsk/Edu/htmlbook/index.htm

VII Завершение урока

Подведение итогов.

1 мин

Подводит итог урока, комментирует и выставляет оценки за  работу на уроке.

Формулируют вывод урока. Выставляют оценки в дневник

Приложение 1

Раздаточный материал

Практическая работа

Цель работы:  Научиться

  1. создавать, просматривать и редактировать HTML-документы;
  2. оформлять заголовки;
  3. управлять размером  шрифта;
  4. выделять и выравнивать абзацы;
  5. размещать графику на web-странице.
  6. Оформлять гиперссылки

ХОД РАБОТЫ

1. Создайте папку site (Файл-Создать-Папку).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

<HTML>
<HEAD>
<TITLE> Устройства компьютера</TITLE>
</HEAD>
<BODY >
Давайте знакомиться – компьютер
</BODY>
</HTML>

4. Сохраните под именем index.htm в папке site.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат.

8. Оформим фразу “Давайте знакомиться – Устройства компьютера ” как заголовок. Для этого откроем HTML-код нашей страницы:

9. Зададим выравнивание заголовка “по центру”:

10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.»

11. Добавим на нашу страницу картинку.

12.Вставим гиперссылки и посмотрим на полученную страницу

1 СТРАНИЦА САЙТА

<HTML>

<HEAD>

<TITLE> Устройства компьютера</TITLE>

</HEAD>

<BODY >

<h1 align="center"> Давайте знакомиться – Устройства компьютера </h1>

<hr>

<IMG src="comp.wmf" align="right">

<P align="left">

Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.</P>

<p align="center">

<A HREF="index1.htm"> ВНУТРЕННИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА

</A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index3.htm"> СЛОВАРЬ </A>

</BODY>

</HTML>

13. Откройте текстовый редактор Блокнот .

14. Наберите следующий HTML-код:

СЛОВАРЬ

<HTML>
<HEAD>
<TITLE> Устройства компьютера</TITLE>
</HEAD>
<BODY >
Внутренние устройства
</BODY>
</HTML>

15. Сохраните под именем index1.htm в папке site.

16. Закройте текстовый редактор Блокнот.

17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.

19. Оформим фразу “ Внутренние устройства ” как заголовок. Для этого откроем HTML-код нашей страницы:

20. Зададим выравнивание заголовка “по центру”:

21. Создадим главный нумерованный список основных категорий ПО

22. Добавим вложенный список.

23. Добавим на нашу страницу картинку.

24.Вставим гиперссылки и посмотрим на полученную страницу

2 СТРАНИЦА  САЙТА

<HTML>

<HEAD>

<TITLE> Устройства компьютера </TITLE>

</HEAD>

<BODY >

<h1 align="center"> Внутренние устройства </h1>

<hr>

<IMG src="disk.wmf" align="right">

<ol>

<li> МАТЕРИНСКАЯ ПЛАТА

<li> ПРОЦЕССОР

<li> ОПРАТИВНАЯ ПАМЯТЬ

<li> ГРАФИЧЕСКИЙ РЕДАКТОР

<li> ЖЕСТКИЙ ДИСК

<li> ВИДЕОАДАПТЕР

<li> ЗВУКОВОЙ  АДАПТЕР

<li> СЕТВАЯ КАРТА

<li> ДИСКОВОД И СD- ROM

<li> КОММУНИКАЦИОННЫЕ ПОРТЫ

<li> СИСТЕМЫ ПРОГРАММИРОВАНИЯ

</OL>

<p align="center">

<A HREF="index.htm"> ГЛАВНАЯ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index3.htm"> СЛОВАРЬ </A>

</BODY>

</HTML>


По теме: методические разработки, презентации и конспекты

Интерактивная презентация для цикла уроков в 10 классе "Создание Веб-сайта. Язык HTML."

Интерактивная презентация для цикла уроков в 10 классе "Создание Веб-сайта. Язык HTML.". Данная презентация содержит теоретический материал по языку HTML и практические задания по кажлму раз...

Создание сайта с помощью языка гипертекстовой разметки HTML

обучающая презентация по созданию сайта при помощи языка гипертекстовой разметки HTML...

Методическая разработка: Создание сайтов в html

Материал предназначен для учителей и учащихся. Предмет: информатика...

Практикум по созданию веб-сайта средствами HTML.

В данной работе представлен практикум посозданию простейшейвеб-страницы с помощью языка HTML. практикум состоит из лабораторной работы. Занятие сопровождается технологической картой, которая позволяет...

Материалы к уроку "Создание сайта. Знакомство с языком HTML"

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

Методическая разработка для учителей "Использование языка HTML при создании сайтов"

laquo;Использование языка HTML при создании сайтов» - методическая разработка для учителей, занимающихся созданием сайтов.  Достаточно часто, при попытке выполнить форматиро...

6 Внеурочные занятия 8 класс. Создание сайта. Добавление ссылок на страницу HTML

Современные веб-сайты – это гораздо больше, чем совокупность текста, разметки, стилей, скриптов и мультимедийных ресурсов. Все эти упомянутые элементы позволяют в полной мере воспользоваться пре...