Методические и дидактические разработки к уроку "Использование таблиц в веб-документах"

Материал из ЗапоВики

Версия от 08:43, 21 июня 2013; Dominic28 (Обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск
Sertifikat4 ZapoWiki25Ovsannik.jpg


Методические и дидактические разработки к уроку "Использование таблиц в веб-документах"

Автор:

учитель информатики

Запорожский многопрофильный лицей № 99

Овсяник Светлана Георгиевна


ПРОГРАММА

СПЕЦКУРС: «Основи веб-дизайну» (І.О. Завадський, Н.С. Прокопенко), Інформатика. Збірник “Програми для профільного навчання та допрофільної підготовки”.

Рекомендовано МОН України Лист №1/11-4927 від 10.08.06 . (Київ, Видавнича група BHV, 2009)


Тема курсу: Основи мови HTML (6 год)

Тема уроку № 4: Разметка таблиц в веб-документах

Тип урока: усвоения новых знаний

Цели: познакомить с понятием таблицы в веб- документах, с тегами для описания таблицы, с атрибутами тегов таблицы; сформировать умение размечать таблицу в веб-документах; развивать умения экспериментально-исследовательской деятельности


ученик объясняет

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

описывает

  • Синтаксис тегов для таблицы на странице
  • Синтаксис тегов для заголовков таблицы на странице
  • Синтаксис тегов для строк и ячеек таблицы на странице
  • Порядок вложения тегов
  • Область действия атрибутов тегов для задания параметров таблицы в гипертекстовом документе;


план-конспект к уроку Разметка таблиц в веб-документах
презентация к уроку Разметка таблиц в веб-документах


Содержание

Организационный этап

Приветствие учащихся, перекличка  

Сообщение темы, целей, задач урока,

Повторение и активизация опорных знаний

Эвристическая беседа

1. Что такое таблица в текстовом документе?

2. Какие параметры задают таблицу? (строки и столбцы, положение на странице)

3. Как могут использоваться таблицы в текстовых документах?

4. Какой объект может быть записан в ячейку таблицы?

Мотивация к учебной деятельности:

Вы не раз заходили на тематические сайты в Интернете. Обращали ли вы внимание на разметку Веб-станицы? Удобно ли работать со страницей на которой объекты расположены в строках и столбцах? Какой вид разметки на ваш взгляд более "читабельный"? Просто текст, или структурированная страница?


Первичное ознакомление с материалом (мини-лекция) с примерами веб-страниц и презентацией

файлы: tabl.html


HTML таблицы Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.


Основные тэги таблицы

Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.  

Строка таблицы: <TR>...</TR>

Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.


Ячейка таблицы: <TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.


Заголовок ячейки: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.


Подпись <CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг должен присутствоватьвнутри, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.


Основные атрибуты таблицы

BORDER

Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN

Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и , то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP

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

COLSPAN

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании - 1.

ROWSPAN

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании - 1.

COLSPEC

Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

 

Пример таблицы : файл с примером таблицы

Html tabl Овсяник16122012.png



Первичное закрепление материала урока. Практическое задание «Времена года»

КРИТЕРИИ К ПРАКТИЧЕСКОМУ ЗАДАНИЮ:

Начальный:

1) Заголовок на странице - 1 балл

2) Таблица размечена в соответствии с заданием – 2 балла

Средний и достаточный:

3) Текст в ячейках – 1 балла

4) Заголовки столбцов – 1 балл

5) Границы таблицы - 1 балл

6) Фон страницы – 1 балл

7) Картинка в ячейке – 2 балла

Высокий:

5) Заголовок над таблицей – 1 балл

9) Картинка вписана в ячейку – 1 балл

10) Выполнено центрирование таблицы на странице – 1 балл


Практическое задание «Времена года»

практическое задание на уроке Разметка таблиц в веб-документах

Пример выполнения:

1. Открыть папку Задание

2. Используя рисунки из папки задать в документе таблицу. Выполнить центрирование на странице. Задать границы таблицы и фон ячеек

3. Задать заголовок таблицы "Времена года"

4. Задать заголовки столбцов «№», «сезон», «картинка»

5. Задать заголовки строк «1», «2», «3», «4»

6. Второй столбец заполнить названиями сезонов: зима, весна, лето, осень

7. Третий столбик заполнить картинками по сезону

Tabl zadanie Ovsianik16122012.png



 

Итоги урока

Посмотрите на работу соседа справа, что вам больше всего понравилось в его работе? Обсудите удачные моменты его работы



Ответить на вопросы:

Как выполняется разметка ячеек таблицы?

Перечислите порядок вложения тегов для строк, ячеек?

Какой тег используют для задания заголовка над таблицей?

Как задать таблицу по-центру страницы?

Как описать границы в таблице? Приведите примеры атрибутов

Рефлексия

Прием "Умный мышонок":

Учитель предлагает ученикам передавать мягкую игрушку "мышонка", каждый кому игрушка попадает в руки должен рассказать что нового они узнали на сегодняшнем уроке

Домашнее задание:

составить алгоритм поряДка разметки таблицы с заголовком в веб-документе. (тетрадь, письменно)

стр.61-69 читать

"Основи веб-дизайну" Пасечник О.Г, Пасечник О.В, Стеценко И.В., изд.BHV, 2009


Ресурсы:

картинки


Ресурсы в помощь учащемуся:

GF Studio.su

Учебник HTML

Личные инструменты
правила на Заповики
Сайт кафедры ИИТО
переход на сайт центра
 
Наша награда.