Способы создания сайтов. Основы HTML
методическая разработка по информатике и икт (10 класс) по теме
ЦЕЛИ И ЗАДАЧИ УРОКА:
- Освоить основные этапы построения web - страниц
- Освоить основные методы создания web - страниц
- Иметь представление об особенностях оформления информационных блоков страницы
- Освоить требования к созданию web - страниц
- Познакомиться с инструментальными средствами создания сайтов
- Научиться создавать HTML – файлы
- Оформлять заголовки
- Размещать гиперссылки и графику на web - страниц
Скачать:
Вложение | Размер |
---|---|
![]() | 738.38 КБ |
Предварительный просмотр:
Урок практикум по теме : «Способы создания сайтов. Основы HTML»
ЦЕЛИ И ЗАДАЧИ УРОКА:
- Освоить основные этапы построения web - страниц
- Освоить основные методы создания web - страниц
- Иметь представление об особенностях оформления информационных блоков страницы
- Освоить требования к созданию web - страниц
- Познакомиться с инструментальными средствами создания сайтов
- Научиться создавать HTML – файлы
- Оформлять заголовки
- Размещать гиперссылки и графику на web - страниц
ХОД УРОКА
Этап урока (выбрать нужное) | Примерное время из часов, отведенных на урок . | Работа учителя | Работа учащихся | ЦОР к уроку (ссылка) | ||
I. Вводная часть | ||||||
I. Организационный момент | 1мин | Приветствует учащихся с целью создания благоприятной атмосферы урока. Объявляет тему урока. | Слушают, наблюдают, настраиваются на восприятие материала урока | |||
II. Постановка цели урока | ||||||
Актуализация знаний. Повторение теоретического материала. | 7мин | Повторение материала:
Фронтальный опрос:
| Отвечают на вопросы. | |||
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-код:
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>             <A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА </A>             <A HREF="index3.htm"> СЛОВАРЬ </A> </BODY> </HTML> 13. Откройте текстовый редактор Блокнот . 14. Наберите следующий 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>             <A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА </A>             <A HREF="index3.htm"> СЛОВАРЬ </A> </BODY> </HTML> |
| |||
Оценка результатов | 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
Раздаточный материал
Практическая работа
Цель работы: Научиться
- создавать, просматривать и редактировать HTML-документы;
- оформлять заголовки;
- управлять размером шрифта;
- выделять и выравнивать абзацы;
- размещать графику на web-странице.
- Оформлять гиперссылки
ХОД РАБОТЫ
1. Создайте папку site (Файл-Создать-Папку).
2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).
3. Наберите следующий HTML-код:
<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>            
<A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА
</A>            
<A HREF="index3.htm"> СЛОВАРЬ </A>
</BODY>
</HTML>
13. Откройте текстовый редактор Блокнот .
14. Наберите следующий HTML-код:
СЛОВАРЬ
<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>            
<A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА </A>            
<A HREF="index3.htm"> СЛОВАРЬ </A>
</BODY>
</HTML>
По теме: методические разработки, презентации и конспекты
Интерактивная презентация для цикла уроков в 10 классе "Создание Веб-сайта. Язык HTML."
Интерактивная презентация для цикла уроков в 10 классе "Создание Веб-сайта. Язык HTML.". Данная презентация содержит теоретический материал по языку HTML и практические задания по кажлму раз...
![](/sites/default/files/pictures/2014/03/06/picture-411187-1394125336.jpg)
Создание сайта с помощью языка гипертекстовой разметки HTML
обучающая презентация по созданию сайта при помощи языка гипертекстовой разметки HTML...
![](/sites/default/files/pictures/2019/10/02/picture-502322-1570034812.jpg)
Методическая разработка: Создание сайтов в html
Материал предназначен для учителей и учащихся. Предмет: информатика...
![](/sites/default/files/pictures/2016/04/16/picture-769644-1460800588.jpg)
Практикум по созданию веб-сайта средствами HTML.
В данной работе представлен практикум посозданию простейшейвеб-страницы с помощью языка HTML. практикум состоит из лабораторной работы. Занятие сопровождается технологической картой, которая позволяет...
Материалы к уроку "Создание сайта. Знакомство с языком HTML"
Представлены материалы к уроку в 9 классе: презентация для знакомства с языком разметки гипертекста, памятка с основными тегами и инструкция для практической работы, а также необходимые графические из...
Методическая разработка для учителей "Использование языка HTML при создании сайтов"
laquo;Использование языка HTML при создании сайтов» - методическая разработка для учителей, занимающихся созданием сайтов. Достаточно часто, при попытке выполнить форматиро...
![](/sites/default/files/pictures/2020/12/19/picture-1297883-1608331127.jpg)
6 Внеурочные занятия 8 класс. Создание сайта. Добавление ссылок на страницу HTML
Современные веб-сайты – это гораздо больше, чем совокупность текста, разметки, стилей, скриптов и мультимедийных ресурсов. Все эти упомянутые элементы позволяют в полной мере воспользоваться пре...