Тема урока: изучение основных тэгов языка HTML.
Цель: сформировать знания об основных элементах языка.
Задачи урока:
- Дать представление об основных средствах языка HTML.
- Научить пользоваться языком HTML.
Тип урока: Урок изучения нового материала.
Форма урока: Лекция, комбинированный.
Структура урока:
- Организационный момент – проверка присутствующих на уроке ( до 2 мин)
- Мотивация – Объяснение темы урока, целей урока, план проведения урока (до 5 мин)
- Актуализация опорных знаний и способов действий (20 минут)
- История языка HTML
- Структура простейшего HTML документа
- Практическая работа – создание домашней странички “Басни Крылова” (20 минут)
- Подведение итогов урока, задание на дом (до 2 минут)
ХОД УРОКА
Здравствуйте, ребята. Тема нашего сегодняшнего урока: “Язык программирования HTML”.
Цели занятия
- Получить представление об основных тегах языка HTML
- Научится пользоваться языком HTML
Активизация - повторение
Структурой и форматированием HTML документа управляют теги. Теги всегда располагаются в угловых скобках. Практически все теги являются парными, т.е. открывающему тегу соответствует закрывающийся, который пишется с чертой “/” после скобки: “</”.
В случае нашего простейшего примера документ начинается с открывающего тега <html>и заканчивается закрывающим тегом </html>. Они очерчивают границы документа.
Затем следует “голова документа” ограниченная тегами <head> и </head>.
1. Изложение нового материала
Физическое и логическое форматирование текста
- Физическая разметка документа – это явное указание браузеру, как должен выглядеть тот или иной фрагмент текста – размер шрифта, курсив и т.п.
- Логическая разметка учитывает смысл выделенного фрагмента – цитата, сведения об авторе и т.п.
Современные стандарты языка HTML советуют использовать по-возможности логическую разметку, хотя физическое форматирование еще никто не отменял.
Дополнительные теги заголовка:
<meta> - содержит дополнительные данные о документе, используемые поисковыми серверами;
<base> и <link> - определяют базовый адрес документа и некоторые другие
Все, что находится между<body> и </body>, называется содержимым тела документа.
Тег <body> может содержать 3 группы параметров:
- Управление внешним видом документа.
- Атрибуты программирования – по событию, таблицы стилей и пр.
- Атрибуты ссылок и идентификации.
Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB
<body bgcolor = “red”>
<body bgcolor = “#FF0000”>
Text – задает цвет текста.
<body bgcolor = “red” text=“blue”>
Background – помещает в качестве фона изображение из файла с картинкой.
<body background = “dog.gif”>
Оформление текста Заголовки
Существует 6 уровней заголовков:
<h1> . . . </h1>, …,
<h6> . . . </h6>
Атрибут – align – выравнивание
Значения: Left (по умолчанию)
Right
Center
Тег <p> указывает на начало нового абзаца и вставляет пустую строку перед абзацем. Атрибут align.
Тег <br> - разрыв строки. Используется для записи текстов стихов и песен.
Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all - продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.
<hr> - горизонтальная линия отделяет заголовок от остального текста
2 часть урока – практическая
Давайте разберем структуру будущей страницы.(ученики разбирают структуру простейшей веб-страницы)
Сегодня на уроке вы должны выполнить следующую работу –
- 1 этап - оформить главную страничку – заголовком и отделить его горизонтальной линией от всего остального текста.
- 2 этап – создать еще одну страничку с заголовком и сохранить ее под именем с соответствующим расширением. В тело этой странички внести соответствующую информацию.
Сохранить в правильном формате. В каком?
3. Домашнее задание: прочитать параграф 5.7.2 и 5.7.3 на стр 209-212 (учебник Угринович Н. 9 класс. )
Итог урока: подведение итогов, оценки с комментариями за выполненную работу.