1033115
столько раз учителя, ученики и родители
посетили официальный сайт ООО «Инфоурок»
за прошедшие 24 часа
Добавить материал и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015

Скидка 0%

112 курсов профессиональной переподготовки от 3540 руб.

268 курсов повышения квалификации от 840 руб.

МОСКОВСКИЕ ДОКУМЕНТЫ ДЛЯ АТТЕСТАЦИИ

Лицензия на осуществление образовательной деятельности №038767 выдана 26 сентября 2017 г. Департаменотом образования города Москвы

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

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

библиотека
материалов

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


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


Задачи:

  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. Всем спасибо. Досвиданья.



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



Курс профессиональной переподготовки
Учитель информатики
Курс профессиональной переподготовки
Учитель математики и информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Краткое описание документа:

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

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

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

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

Общая информация
ВНИМАНИЮ УЧИТЕЛЕЙ: хотите организовать и вести кружок по ментальной арифметике в своей школе? Спрос на данную методику постоянно растёт, а Вам для её освоения достаточно будет пройти один курс повышения квалификации (72 часа) прямо в Вашем личном кабинете на сайте "Инфоурок".

Пройдя курс Вы получите:
- Удостоверение о повышении квалификации;
- Подробный план уроков (150 стр.);
- Задачник для обучающихся (83 стр.);
- Вводную тетрадь «Знакомство со счетами и правилами»;
- БЕСПЛАТНЫЙ доступ к CRM-системе, Личному кабинету для проведения занятий;
- Возможность дополнительного источника дохода (до 60.000 руб. в месяц)!

Пройдите дистанционный курс «Ментальная арифметика» на проекте "Инфоурок"!

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