Цель: изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.
Задачи урока:
- Образовательная: Закрепить основные навыки работы. Выявить качество и уровень овладения знаниями и способами действий, обеспечить их коррекцию. Получить достоверную информацию о достижении всеми учащимися планируемых результатов обучения.
- Развивающая: Развивать у школьников логическое мышление; формировать умение школьников применять программное обеспечение в решении задач, развивать познавательный интерес.
- Воспитательная: воспитывать информационную культуру школьников; способствовать воспитанию целеустремленности, настойчивости. Прививать навыки самостоятельной работы.
Формы работы учащихся индивидуальная, фронтальная.
Ход занятия
1.Организационный момент
2.Актуализация знаний.
Учитель: Предлагаю вспомнить некоторые понятия (беседа с обучающимися).
Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).
Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).
Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия).
3. Изучение нового материала.
Учитель: Что такое HTML? (рассказ учителя с элементами беседы)
Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.
Web-страницы можно создать с помощью языка HTML.
3.1. Понятие тега.
В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.
Теги заключаются в угловые скобки <> и могут быть одиночными или парными.
Парные теги содержат открывающий и закрывающий теги (контейнер).
Например, код Web-страницы помещается внутрь контейнера
<HTML>… </HTML>
Теги могут записываться как прописными, так и строчными буквами.
3.2. Понятие атрибута.
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.
Например,
<FONT COLOR=“blue”>
<H1 ALIGN=“center”> Моё имя – Марина </H1>
</FONT>
3.3. Структура Web-страницы.
<HTML>
<HEAD>
<TITLE>
Название Web-страницы
</TITLE>
</HEAD>
<BODY атрибуты>
На этой странице можно разместить любую интересную информацию в Интернете.
</BODY>
</HTML>
3.4. Создание Web-страницы.
- Создать личную папку.
- Создать в шаблон HTML-документа, набрав HTML-код страницы в редакторе Blue Fish.
- Сохранить файл под именем Шаблон.txt в личной папке.
- Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
- Сохранить файл под именем index.htm в личной папке.
- Для редактирования файла index.htm необходимо открыть его в редакторе Blue Fish.
3.5. Атрибуты фона Web-страницы.
- Атрибут цвета Web-страницы
<BODY bgcolor=#FFF8DC>
- Атрибут вставки фонового рисунка Web-страницы
<BODY background="Nature_02.jpg”>
Оформление конспекта обучающимися.
3.6. Теги и атрибуты форматирования текста на Web-странице.
<H1>…</H1> до <H6>…</Y6> тег размера шрифта заголовков
<FONT>…</FONT> тег форматирования шрифта
FACE=“Arial” атрибут задания гарнитуры шрифта
SIZE=4 атрибут задания размера шрифта
COLOR=“Red” атрибут задания цвета шрифта
ALIGN=“left” атрибут задания выравнивания текста
<HR> тег для создания горизонтальной линии
<P>…</P> контейнер для разделения текста на абзацы
Оформление конспекта обучающимися.
3.7. Тег и атрибут вставки изображений на Web-странице.
<IMG SRC=“computer.gif”>
<IMG SRC=“C:\COMPUTER\computer.gif”>
<IMG SRC=“http://www.server.ru/computer.gif”>
Оформление конспекта обучающимися.
3.8. Теги и атрибуты гиперссылки на Web-странице.
<A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки
<ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты
Пояснение:
- Для связывания Web- страниц используют гиперссылки.
- Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
- Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
Оформление конспекта обучающимися.
3.9. Теги и атрибуты для создания списков на Web-странице.
<OL>…</OL> контейнер для создания нумерованных списков
<LI> тег элемента списка
<UL>…</UL> контейнер для создания маркированного списка
<LI> тег элемента списка
<DL>…</Dl> контейнер для создания списка терминов
<DT> тег для создания термина
<DD> тег для создания определения
(Демонстрация презентации, 12 слайд).
3.10. Теги и атрибуты для создания интерактивных форм на Web-странице.
<FORM>…</FORM> контейнер для создания формы
Тег <INPUT> со значением атрибута TYPE=“text” создают текстовое поле
Тег <INPUT> со значением атрибута TYPE=“radio” создают группу переключателей
Тег <INPUT> со значением атрибута TYPE=“checkbox” создают флажки
<SELECT> …</SELECT> контейнер для реализации раскрывающего списка
<OPTION> тег элемента списка
Просмотр интерактивных форм на Web-странице.
4. Итоги урока.
5. Домашнее задание
Просмотр содержимого документа
«Интерактивные формы на Web-страницах. Структура HTML – кода Web-страницы»
32 урок, 8 класс
Учитель: Брух Т.В.
Дата: _________
Тема урока: «Интерактивные формы на Web-страницах. Структура HTML – кода Web-страницы»
Цель: изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.
Задачи урока:
Образовательная: Закрепить основные навыки работы. Выявить качество и уровень овладения знаниями и способами действий, обеспечить их коррекцию. Получить достоверную информацию о достижении всеми учащимися планируемых результатов обучения.
Развивающая: Развивать у школьников логическое мышление; формировать умение школьников применять программное обеспечение в решении задач, развивать познавательный интерес.
Воспитательная: воспитывать информационную культуру школьников; способствовать воспитанию целеустремленности, настойчивости. Прививать навыки самостоятельной работы.
Формы работы учащихся индивидуальная, фронтальная.
Ход занятия
1.Организационный момент
2.Актуализация знаний.
Учитель: Предлагаю вспомнить некоторые понятия (беседа с обучающимися).
Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).
Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).
Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия).
3. Изучение нового материала.
Учитель: Что такое HTML? (рассказ учителя с элементами беседы)
Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.
Web-страницы можно создать с помощью языка HTML.
3.1. Понятие тега.
В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.
Теги заключаются в угловые скобки и могут быть одиночными или парными.
Парные теги содержат открывающий и закрывающий теги (контейнер).
Например, код Web-страницы помещается внутрь контейнера
HTML… HTML
Теги могут записываться как прописными, так и строчными буквами.
3.2. Понятие атрибута.
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.
Например,
Моё имя – Марина
FONT
3.3. Структура Web-страницы.
Название Web-страницы
На этой странице можно разместить любую интересную информацию в Интернете.
31 053
592 
