Хостинг документов » Урок по теме «Основы создания HTML — страниц»

Урок по теме «Основы создания HTML — страниц»

Рогозина Светлана Яковлевна МБОУ СОШ № 12 МО город-курорт Анапа

Краснодарский край, учитель информатики

Урок по теме «Основы создания HTML — страниц»

Урок № 3 «Создание и форматирование таблиц».

Тема урока: Создание и форматирование таблиц в НTML-документе.

Тип урока: урок-практикум.

Время проведения: третий урок, отведенный на изучение темы «Основы создания HTML — страниц » (базовый курс 8 класс).

Формы организации учебной деятельности: индивидуальная.

Цели урока:

повторить знания о способах создания WEB-страниц;
изучить способы создания и форматирования таблиц с помощью НTML – кода;
развитие познавательного интереса, творческой активности учащихся;
развитие у школьников умения излагать мысли, моделировать ситуацию;

Задачи урока:

Воспитательная — развитие познавательного интереса, логического мышления.
Учебная — повторение знаний по теме, изучение нового материала.
Развивающая — развитие алгоритмического стиля мышления, памяти, внимательности.

Этапы урока:

постановка цели урока и мотивация учебной деятельности;
актуализация знаний по изучаемой теме;
объяснение нового материала;
практическое закрепление изученной темы;
подведение итогов урока.

Ход урока.

1. Организационная часть:

приветствие;
проверка отсутствующих.

2. Актуализация деятельности учащихся:

объявление плана урока;
повторение основных вопросов изученной темы (фронтальный опрос с дублированием основных моментов повторения на сладах презентации):

вопрос. Что такое HTML – документ?

Слайд презентации 1. HTML – документ — это файл, содержащий текст и команды форматирования, предназначенный для размещения на web-серверах в сети Интернет. HTML – документ создается с помощью языка гипертекстовой разметки или HTML – кода. Основным элементом разметки HTML – кода является ТЭГ. Тэги выделяются угловыми скобками и могут быть одиночными или парными. Тэги могут содержать внутри себя атрибуты, которые задают определенные параметры форматирования.

Вопрос. Какую структуру должен иметь HTML – документ?

Слайд презентации 2. Весь HTML – код страницы помещается в парный тег <HTML> </HTML>, который состоит из двух частей: заголовка и отображаемого в браузере содержания.

Заголовок страницы помещается в парный тег <Head></Head>, который в свою очередь содержит название страницы – парный тег <title> </title>, а так же одиночные служебные теги и <BASE>. Отображаемое в браузере содержание страницы помещается внутри парного тэга <body> </body>.

Вопрос. С помощью, какой программы создается и просматривается HTML – документ?

HTML – код страницы может быть создан с помощью текстового редактора Блокнот в фале с расширеним .HTM или .HTML и затем просмотрен с помощью любого браузера. При внесении изменений в HTML – код страницы необходимо сохранить эти изменения в файле, а содержание браузера – обновить.

3. Объяснение нового материала: Создание и форматирование таблиц. (По презентации):

Слайд презентации 3. При работе с таблицами в офисных приложениях они у нас задаются количеством строк и столбцов. При создании таблицы с помощью HTML – кода порядок действий иной:

описание таблицы;
описание строки;
описание ячейки;
ввод текста ячейки

Слайд презентации 4. Вставка таблицы — парный тэг

По умолчанию текст выравнивается по левому краю, ширина столбца — по наиболее длинному элементу.

Слайд презентации 5. Атрибуты к тэгу

BORDER– толщина границы таблицы в пикселях;

WIDTH – ширина таблицы в пикселях или процентах, относительно окна браузера

Пример:

Слайд презентации 6. Вставка строки таблицы — парный тэг <tr> </tr>

Атрибуты:

Align = (left, center, richt) – горизонтальное выравнивание

Valign = bottom, middle, top) – вертикальное выравнивание

Пример:

</tr>

Слайд презентации 7. Вставка ячейки таблицы — парный тэг

Атрибуты:

Align = (left, center, richt) – горизонтальное выравнивание

Valign = (bottom, middle, top) – вертикальное выравнивание

Пример:

Тема доклада

Слайд презентации 8. Пример кода таблицы:

№ пп

ФИО

Тема доклада

Демонстрация отображения полученной таблицы в браузере (гиперссылка на слайде № 8).

4. Практическое закрепление изученной темы: выполнение практической работы «Создание Web-страницы, содержащей таблицу». (Практическое задание и справочный материал по теме выдаются каждому ученику.) Время работы на компьютере 20минут.

2-я страница docl.html

Докладчики

Заголовок браузера

Список докладчиков | заголовок 2 уровня

№ пп

ФИО	Тема доклада
1	Иванова Е.И.	«Этапы проектирования курса обучения»
2	Петрова Н.С.	«Гуманизация образовательного процесса»
3	Семенова Е.И.	«Методика преподавания программирования.

5. Подведение итогов урока. Итак, сегодня на уроке мы познакомились с приемами вставки в HTML-документ таблиц. Давайте повторим основные моменты новой темы.

Назовите алгоритм вставки и форматирования таблиц.
Назовите теги, которые мы использовали для создания таблицы.
Назовите атрибуты, которые можно использовать при создании таблиц.

Выполненные вами работы будут проверены, оценки я объявлю на следующем уроке.

Какие будут вопросы по проведенному уроку.

Домашнее задание: Записать HTML— код страницы, содержащей таблицу из 5 столбцов и 3 строк. Для каждого столбца установите свое выравнивание текста.