Тема: Использование различных приемов форматирования. Таблицы в HTML «Создание и использование таблиц на Web-страницах» Цели урока: Обучающая: усвоить новые знания и сформировать умения по созданию и использованию таблиц на Web - страницах; научить учащихся красиво и рационально размещать информацию на странице, используя тэги HTML. Развивающая: Формирование умения работать фронтально и индивидуально; расширение кругозора; развитие навыков применения компьютерных технологий при создании web-сайтов. Воспитательная: воспитывать положительное отношение к знаниям, добросовестное отношение к труду, дисциплинированность. Для проверки домашнего задания: - Какие две программы необходимо иметь для создания Web – страницы? - Какой тег используется для создания нумерованного списка? - Какой тег используется для создания маркированного списка? - Какой тег используется для создания нового элемента списка?
Блокнот и браузер
- Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.
Тег TABLE - Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD и CAPTION.
Атрибуты: - ALIGN = left/ center/ right - определяет способ горизонтального выравнивания таблицы. Значение по умолчанию - left.
- VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания для содержимого таблицы.
Атрибуты: - BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
- BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Атрибуты: - WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
- HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
Атрибуты: - CELLPADDING - определяет расстояние между границей ячейки и ее содержимым (в пикселах).
- CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.
- BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Тег CAPTION - Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Может размещаться только внутри контейнера
. - ALIGN = top/ bottom - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:
- top - помещает заголовок над таблицей (значение по умолчанию);
- bottom - помещает заголовок под таблицей.
Тег TR - Создает новый ряд (строку) ячеек таблицы.
Атрибуты:
- ALIGN = left/ center/ right - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда.
- VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда.
- BGCOLOR - определяет цвет фона для всех ячеек данного ряда.
Тег TD Элемент TD создает ячейку с данными в текущей строке.
Атрибуты:
- ALIGN = left/ center/ right - определяет способ горизонтального выравнивания содержимого ячейки. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю.
- VALIGN = top/ bottom/ middle - определяет способ вертикального выравнивания содержимого ячейки.
TD Атрибуты: - WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
- HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
- COLSPAN - определяет количество столбцов, которые будет занимать ячейка. По умолчанию имеет значение 1.
- ROWSPAN - определяет количество строк, которые будет занимать ячейка. По умолчанию имеет значение 1.
Пример 1: - Создать таблицу следующей структуры:
Математика
|
Русский
|
Музыка
|
Химия
|
Физкультура
| |
Физика
|
Обществознание
|
Информатика
|
История
| |
Биология
|
Задание
Итог урока. Итог урока. Итог урока: - Можете ли вы прокомментировать все тэги и их параметры которые мы прошли?
- Рассмотреть результаты деятельности учащихся на уроке. Подвести итоги работы каждого.
- На следующем занятии будет проведен промежуточный контроль по темам: «Алгоритмизация и программирование» и «Коммуникационные технологии».
|
Скачать 370.81 Kb.