Презентация к уроку: «Создание и использование таблиц на Web-страницах»
презентация к уроку на тему

Слайд 1

Таблицы на Web- страницах © ГБОУ НПО ПУ№80 МО Разработка мастера производственного обучения Лапенковой Е.А.

Слайд 2

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

Слайд 3

Для проверки домашнего задания: - Для того, чтобы создать Web – страницу нужно написать программу. А на каком языке мы пишем программу для создания Web – страницы? - Какие две программы необходимо иметь для создания Web – страницы? - Какова технология создания Web – страницы? - Какова структура HTML документа? © ГБОУ НПО ПУ№80 МО

Слайд 4

Элементы для создания таблиц: © ГБОУ НПО ПУ№80 МО

Слайд 5

Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки. © ГБОУ НПО ПУ№80 МО

Слайд 6

Пример: < TABLE BORDER> A1 B1 C1 A2 B2 C2 Результат: © ГБОУ НПО ПУ№80 МО

Слайд 7

TABLE Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR , TD , TH и CAPTION . © ГБОУ НПО ПУ№80 МО

Слайд 8

Параметры: ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left , center , right . Значение по умолчанию - left . VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top , bottom , middle . © ГБОУ НПО ПУ№80 МО

Слайд 9

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

Слайд 10

Параметры: WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах , либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах , либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала. © ГБОУ НПО ПУ№80 МО

Слайд 11

Параметры: CELLPADDING - определяет расстояние (в пикселах ) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. CELLSPACING - определяет расстояние (в пикселах ) между границами соседних ячеек. BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. © ГБОУ НПО ПУ№80 МО

Слайд 12

CAPTION Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо. ALIGN - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения: top - помещает заголовок над таблицей (значение по умолчанию); bottom - помещает заголовок под таблицей. © ГБОУ НПО ПУ№80 МО

Слайд 13

TR Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH © ГБОУ НПО ПУ№80 МО

Слайд 14

TR Параметры: ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left , center , right . VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top , bottom , middle . BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. © ГБОУ НПО ПУ№80 МО

Слайд 15

TD и TH Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы. © ГБОУ НПО ПУ№80 МО

Слайд 16

TD и TH Параметры: ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left , center , right . По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование. VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top , bottom , middle . По умолчанию происходит выравнивание по центру ( VALIGN=" middle " ), если значение этого параметра не было задано ранее в элементе TR. © ГБОУ НПО ПУ№80 МО

Слайд 17

TD и TH Параметры: WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы. HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы. COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1. © ГБОУ НПО ПУ№80 МО

Слайд 18

TD и TH Параметры: NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки. BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный параметр не работает в старых версиях браузера Netscape (до 3.X включительно). © ГБОУ НПО ПУ№80 МО

Слайд 19

Создайте Web -страницу с таблицей. Залейте цветом шапку с заголовками. Задание: Наименование продукта Белки, на 100 г Жиры, на100 г Углеводы, на 100 г Ккал, на100 г Завтрак Хлеб ржаной 5 1 42,5 204 Хлеб пшеничный 6,7 0,7 50,3 240 Капуста тушеная 2,1 5,2 10,4 100 Каша гречневая 4,75 4,7 28,6 183 Каша овсяная 3,85 5,65 19,7 149 Сосиска 10,3 17,9 0,4 200 Макароны с сыром 4,3 5,4 25 170 Омлет 7,7 10,1 2,5 135 Масло сливочное 0,4 78,5 0,5 734 Сдоба 6,4 7,2 45,8 273 Сахар 0 0 95,5 390 Конфеты "Ассорти" 3,6 35,6 53,1 563

Слайд 20

Создайте в HTML сложную таблицу: Задание: © ГБОУ НПО ПУ№80 МО

Слайд 21

Итог урока. Итог урока. Итог урока: Можете ли вы прокомментировать все тэги и их параметры которые мы прошли? Давайте рассмотрим результаты деятельности учащихся на уроке. Подвести итоги работы каждого. На следующем занятии мы ещё немного поговорим о таблицах, научимся вставлять изображения, делать из изображений фон и ссылки. © ГБОУ НПО ПУ№80 МО

Слайд 22

Домашнее задание: Как построить структуру веб-страницы с помощью только одной таблицы, используя следующие атрибуты таблиц: rowspan - объединяет соседние ячейки строки в одну. colspan - объединяет соседние ячейки колонки в одну ячейку. © ГБОУ НПО ПУ№80 МО