Тема : Использование различных приемов форматирования. Таблицы в HTML

« Создание и использование таблиц на Web- страницах » Цели урока : Обучающая : усвоить новые знания и сформировать умения по созданию и использованию таблиц на Web - страницах ; научить учащихся красиво и рационально размещать информацию на странице, используя тэги HTML. Развивающая : Формирование умения работать фронтально и индивидуально ; расширение кругозора ; развитие навыков применения компьютерных технологий при создании web- сайтов. Воспитательная : воспитывать положительное отношение к знаниям, добросовестное отношение к труду, дисциплинированность.

Для проверки домашнего задания : - Какие две программы необходимо иметь для создания Web – страницы ? - Какой тег используется для создания нумерованного списка ? - Какой тег используется для создания маркированного списка ? - Какой тег используется для создания нового элемента списка ? Блокнот и браузер

Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.

Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD и CAPTION.

ALIGN = left/ center/ right - определяет способ горизонтального выравнивания таблицы. Значение по умолчанию - left. VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания для содержимого таблицы.

BORDER - определяет ширину внешней рамки таблицы ( в пикселах ). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет. BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB- значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

CELLPADDING - определяет расстояние между границей ячейки и ее содержимым ( в пикселах ). CELLSPACING - определяет расстояние ( в пикселах ) между границами соседних ячеек. BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Может размещаться только внутри контейнера. ALIGN = top/ bottom - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения : top - помещает заголовок над таблицей ( значение по умолчанию ); bottom - помещает заголовок под таблицей.

Создает новый ряд ( строку ) ячеек таблицы. Атрибуты : ALIGN = left/ center/ right - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. BGCOLOR - определяет цвет фона для всех ячеек данного ряда.

Элемент TD создает ячейку с данными в текущей строке. Атрибуты : ALIGN = left/ center/ right - определяет способ горизонтального выравнивания содержимого ячейки. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю. VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания содержимого ячейки.

Атрибуты : WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы. HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы. COLSPAN - определяет количество столбцов, которые будет занимать ячейка. По умолчанию имеет значение 1. ROWSPAN - определяет количество строк, которые будет занимать ячейка. По умолчанию имеет значение 1.

Пример 1: Заголовок A1 B1 C1 A2 B2 C2

Пример 2: Заголовок A1 B1 C1 A2 B2 А1А1 B1C1 A2B2

Пример 3: Заголовок A1 B1 C1 A2 C2 А1А1 B1C1 A2C2

Создать таблицу следующей структуры : Математика РусскийМузыка Химия Физкультура Физика Обществознание Информатика История Биология

Итог урока : Итог урока. Итог урока. Итог урока : Можете ли вы прокомментировать все тэги и их параметры которые мы прошли ? Рассмотреть результаты деятельности учащихся на уроке. Подвести итоги работы каждого. На следующем занятии будет проведен промежуточный контроль по темам : « Алгоритмизация и программирование » и « Коммуникационные технологии ».