Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Конспект на тему "Вставка таблиц"

Конспект на тему "Вставка таблиц"


До 7 декабря продлён приём заявок на
Международный конкурс "Мириады открытий"
(конкурс сразу по 24 предметам за один оргвзнос)

  • Информатика

Поделитесь материалом с коллегами:

Тема: Вставка таблиц.


Цель: Познакомить учащихся со структурой вставки таблиц.


Задачи:

  1. формировать умение создавать простейший HTML-документ,

  2. развивать внимание, творческие способности учащихся;

  3. воспитывать умение работать самостоятельно.


План:

  • Орг. Момент, вступительное слово;

  • Основной этап: раскрытие темы;

  • Подведение итогов, заключение.

Этапы, время.

Деятельность учителя

Деятельность учеников

Орг-ый:

Здравствуйте ребята! Сегодня мы продолжим изучать основы HTML. И более подробно разберем структуру вставки таблиц.

Внимательно слушают


Основной

- Таблица описывается после <body>.

- Записывайте за мной:

начало таблицы


отсутствие рамок


заголовок

<TR> начало строки

<TD> ячейка 1 </TD>

<TD> ячейка 2 </TD>

</TR>


<TR> начало 2 строки

<TD> ячейка 1 TD>

<TD> ячейка 2 </TD>

</TR>


- Дополнительны параметры для строк и ячеек:

< TR BGCOLOR=”red”> цвет строки

цвет ячейки


-Изменение ширины и высоты таблицы:

длина

HEIGHT=180> высота



- Выравнивание текста в таблице:

Дополнительно введен специальный параметр для вертикального выравнивания — VALIGN, принимающий значения ТОР или BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет следующий вид:

Заголовок, располагаемый внизу с выравниванием влево


поверху

BOTTOM> по низу

-Объединение ячеек:

COLSPAN по горизонтали

ROWSPAN по вертикали



- Вставка картинки в таблицу:

”.JPG”

- После всего нужно закрыть таблицу:

TABLE>

BODY>

HTML>


- Управление прорисовкой линий и рамок вокруг таблицы:


-RULES= - прорисовка внутренних линий сетки таблицы.

Имеет значения:

-ALT- рисует все внутренние линии.

-GROUPS- рисует только линии, разделяющие группы.

- ROWS- рисует линии, разделяющие строки.

-COLS-рисует линии, разделяющие столбцы.

-NONE- внутренние линии не рисуются.


-FRAME= - прорисовка рамок вокруг таблицы.

Имеет значения:

-BOX или BORDER – рисует рамку со всех четырех сторон.

-ABOVE- рисует рамку только с верхней стороны.

-BELOW- рисует рамку только с нижней стороны.

-HSIDES- рисует нижнюю и верхнюю стороны.

-VSIDES- рисует левую и правую стороны.

-LHS- рисует только с левой стороны.

-RNS- рисует только с правой стороны.

-VOID- таблица без внешних рамок.




- Отступы:



- А сейчас я вам покажу несколько примеров таблиц, чтоб вам стало понятно какие таблицы можно создавать.

(показываю на интерактивной доске)


2 УРОК

- Садитесь за компьютеры и составьте таблицу. (в папке web есть документ «дорожные знаки»)

- ИЛИ создайте расписание уроков: 1 страница – содержание (расписание уроков и расписание звонков) в котором гиперссылки и переход на каждый день недели.


Практическая работа - "Таблицы"

1. Создать HTML – документ.

2. Создать таблицу 3 на 4.

3. Задать толщину линии сетки - 5 пикселей, расстояние между ячейками -10, отступ между границей ячейки и данными –5.

4. Задать ширину и высоту таблицы - 25% от всего размера окна.

5. Поместить справа от таблицы любой текст.

6.Создать любую таблицу (3 на 3), объединить в ней любые 2 строки и 3 любых столбца.

7.Выровнять данные по правому краю.

8. Закрасить ячейки, цвет произвольный.

9. Прорисовать рамки вокруг таблицы и внутри нее.

10. Создать вложенную таблицу.

11.Создать пять таблиц в новом файле. Каждая таблица должна полностью размещаться на экране.

12. Связать все таблицы между собой внутренними ссылками.




записывают




















































































смотрят







Выполняют самостоятельно

Завершающий

Дома почитайте параграф 31. Всем спасибо. Досвиданья.



Подпись учителя______________




57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)

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

HTML определяет три типа значений длины для атрибутов:

·        Пиксели  – это целое, представляющее число пикселей (на экране, на бумаге). Таким образом, значение "50" означает пятьдесят пикселей.

·        Длина – доля вертикального или горизонтального расстояния в процентах. Таким образом, значение "50%" означает половину доступного пространства.

·        Кратный размер – это либо целое число, задающее количество пикселей, либо доля в процентах от размера по горизонтали или вертикали, либо относительный размер вида , где  – целое число. При распределении пространства обозреватель сначала выделяет место для размеров, заданных в числах и процентах, а затем разделяет оставшееся пространство между элементами с относительными размерами. Элементу размером 3 будет выделено пространство в три раза большее, чем элементу размером 1. Значение * эквивалентно 1* и часто означает "заполнить оставшееся пространство".

Автор
Дата добавления 26.04.2015
Раздел Информатика
Подраздел Конспекты
Просмотров150
Номер материала 497631
Получить свидетельство о публикации
Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх