Урок по теме «Основы создания 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 строк. Для каждого столбца установите свое выравнивание текста.
Нравится материал? Поддержи автора!
Ещё документы из категории информатика:
Чтобы скачать документ, порекомендуйте, пожалуйста, его своим друзьям в любой соц. сети.
После чего кнопка «СКАЧАТЬ» станет доступной!
Кнопочки находятся чуть ниже. Спасибо!
Кнопки:
Скачать документ