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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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