Рабочие листы
к вашим урокам
Скачать
Цель: изучение основ языка разметки гипертекста 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” H1ALIGN=“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-странице. IMGSRC=“computer.gif” IMG SRC=“C:\COMPUTER\computer.gif” Оформление конспекта обучающимися. 3.8. Теги и атрибуты гиперссылки на Web-странице. AHREF=“Адрес” Указатель /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. Домашнее заданиеЦель: изучение основ языка разметки гипертекста 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” H1ALIGN=“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-странице. IMGSRC=“computer.gif” IMG SRC=“C:\COMPUTER\computer.gif” Оформление конспекта обучающимися. 3.8. Теги и атрибуты гиперссылки на Web-странице. AHREF=“Адрес” Указатель /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. Домашнее задание
6 669 364 материала в базе
«Информатика (изд. "БИНОМ. Лаборатория знаний")», Угринович Н.Д.
Больше материалов по этому УМК
Настоящий материал опубликован пользователем Брух Таисия Викторовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
600 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.