Презентация по информатике на тему "Создание таблиц в HTML"

• 1 слайд

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

• 2 слайд

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

• 3 слайд

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

• 4 слайд

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

• 5 слайд

  Тег TABLE
   Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов 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 слайд

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

• 11 слайд

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

• 12 слайд

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

• 13 слайд

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

• 14 слайд

  Пример 1:
  
  <TABLE BORDER=1>
  <CAPTION> Заголовок </CAPTION>
  
      <TR>
          <TD>A1</TD>
  <TD>B1</TD>
  <TD>C1</TD>
      </TR>
  
      <TR>
          <TD>A2</TD>
  <TD>B2</TD>
  <TD>C2</TD>
      </TR>
  
  </TABLE>
  

• 15 слайд

  Пример 2:
  
  <TABLE BORDER=1>
  <CAPTION> Заголовок </CAPTION>
  
      <TR>
          <TD>A1</TD>
  <TD>B1</TD>
  <TD>C1</TD>
      </TR>
  
      <TR>
          <TD> A2 </TD>
  <TD COLSPAN=2 > B2 </TD>
      </TR>
  
  </TABLE>
  

• 16 слайд

  Пример 3:
  
  <TABLE BORDER=1>
  <CAPTION> Заголовок </CAPTION>
  
      <TR>
          <TD>A1</TD>
  <TD ROWSPAN=2>B1</TD>
  <TD>C1</TD>
      </TR>
  
      <TR>
          <TD> A2 </TD>
  <TD > C2 </TD>
      </TR>
  
  </TABLE>
  

• 17 слайд

  Создать таблицу следующей структуры:
  Задание
  

• 18 слайд

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

Краткое описание документа:

Презентация может использоваться на открытых уроках в девятых классах.

Пункты презентации:

1. сформированы цели урока (обучающая, развивающая, воспитательная);

2. проверка домашнего задания;

3. рассмотрены теги TABLE, CAPTION, TR,TD;

4. разобраны три примера создания таблиц;

5. домашние задание;

6. подведены итоги урока.