Ученики на Учителя.com


Разработка урока "Основы языка HTML" 8 класс

Разработка урока по теме «Основы языка HTML»
(14-15 лет) УМК любой
Цели урока:
Образовательная: формировать навыки и умения создания простейших WEB -страниц.
Развивающая: развивать логику, умение анализировать, сравнивать, делать выводы,
высказывать свою мысль.
Воспитательная: воспитывать уважительное отношение к мнению других,
внимательность, вежливость и дисциплинированность, бережное отношение к своему
здоровью.
Задачи:
Сформулировать основные принципы создания WEB -страниц;
познакомить учеников с основными командами оформления текста;
продемонстрировать использование этих команд на конкретных примерах
оформления WEB -страниц;
Тип урока: усвоение новых знаний.
Оборудование: мультимедийная система, слайды, учебник.
Формы работы на уроке: фронтальный опрос, индивидуальная работа.
План урока.
1.
Актуализация опорных знаний.
5 мин
2.
Изложение нового материала.
18 мин
o Систематизация понятий: гипертекст, web-страница, web-сайт,
язык разметки гипертекста HTML.
o Структура web-документа.
o Команды (тэги) форматирования текста.
o Примеры использования тегов форматирования.
3.
Физкультминутка.
2 мин
4.
Практическая работа по закреплению нового материала.
15 мин
5.
Итоги урока
5 мин
Итого:
45 мин
Ход урока:
1. Актуализация опорных знаний.
o Как вы можете определить понятие «Интернет»;
o Что такое служба WWW;
o Что такое программа-браузер;
o Какие документы просматриваются в браузере.
2. Изложение нового материала.
На прошлом уроке мы познакомились со структурой сети Интернет. Цель нашего
урока научиться создавать простейшую web-страницу с помощью языка гипертекстовой
разметки HTML.
Информация в Интернете размещается на web-сайтах. Web-сайты состоят из web-
страниц, так же как обыкновенный журнал состоит из страниц. Web-страницы внутри
одного сайта связаны между собой с помощью гиперссылок.
Сайты могут быть интерактивными и мультимедийными. Мультимедийность
подразумевает, что кроме текста, информация на сайте может быть представлена в виде
графики (картинки, анимация). Если же на сайте есть различные формы для обратной
связи с посетителями сайта, то такой сайт является интерактивным.
Перед созданием сайта необходимо разработать его проект: определить тематику
сайта, сколько web-страниц будет входить в сайт.
Web-страницы реализуются с помощью языка разметки гипертекстовых
документов HTML и являются обычными текстовыми документами, в которые
вставляются специальные управляющие символы – тэги.
Для создания web-страниц используются как простейшие текстовые редакторы
(Блокнот), так и специальные программы, облегчающие работу с web-страницами.
Тэги HTML позволяют выполнять выравнивание строк документа, управлять
цветом фона экрана и цветом текста, изменять начертание символов, вставлять
графические изображения, анимацию, звук и т.д. Важно, что с помощью тегов в web-
страницу можно вставлять гиперссылки, в том числе и в графической форме. В результате
создаются не только содержательные, но и привлекательные Web-документы.
Создадим простейшую Web-страницу. Её структура задаётся парами тегов:
<HTML> и </HTML> - определяют начало и конец страницы;
<HEAD> и </HEAD> - содержат имя описание документа;
<TITLE> и </TITLE> - содержат название Web-страницы;
<BODY> и </BODY> - содержат саму страницу («тело»), здесь могут быть тексты,
таблицы, графические объекты и т.д.
<HTML>
<HEAD>
<TITLE> Первая Web-страница </TITLE>
</HEAD>
<BODY>
Моя первая Web-страница <br>
Здравствуйте! <br>
Сегодня замечательный день! <br>
Я сделал свою Web-страничку.
</BODY>
</HTML>
В «тело» Web-страницы добавим текст после горизонтального разделителя и
отформатируем его.
<HTML>
<HEAD>
<TITLE> Первая Web-страница </TITLE>
</HEAD>
<BODY>
<FONT COLOR=”blue”>
<H1 ALIGN=”CENTER”>
Моя первая Web-страница
</H1>
</FONT>
<HR><U>
<FONT SIZE=4>
<FONT COLOR=”red”>
<H1 ALIGN=”left”>
Здравствуйте!<br>
Сегодня замечательный день! <br>
Я сделал свою Web-страничку.</U>.</P>
<I>
<FONT SIZE=5>
<FONT COLOR=”green”>
<P ALIGN=”right”>
Позже я научусь вставлять фотографии, картинки, звук. </I>
</P>
</BODY>
</HTML>
Показываю примеры форматирования текста с помощью презентации.
3. Физкультминутка.
4. Практическая работа.
Для подготовки html-файла можно использовать текстовый редактор Блокнот.
Задание.
Создайте с помощью текстового редактора приведенный ниже html-файл,
отформатируйте его и сохраните его в своей папке с названием file_1.html.
Просмотрите файл с помощью браузера.
<HTML>
<HEAD>
<TITLE> Название окна Web-страницы </TITLE>
</HEAD>
<BODY>
Название Web-страницы
Текст примерно следующий:
Меня зовут Татьяна. Мне 15 лет.
Я хочу стать Web-дизайнером.
Это моя первая Web-страница. Тут я могу писать о себе, о своих интересах.
</BODY>
</HTML>
5. Итоги урока.
Учащиеся познакомились с такими понятиями как гипертекст; WEB-страница, WEB-
сайт; язык разметки гипертекста HTML; научились создавать простейшую Web-страницу,
использовать команды языка HTML для форматирования текста. Подводятся итоги изучения
новой темы. Выставляются оценки.
Скачать материал

Информатика - еще материалы к урокам: