«Создание и использование таблиц на Web-страницах»
Submitted by Гульнара Якубовна Хафизова on Fri, 11/12/2009 - 18:19
I.Организационный момент.
II. Актуализация знаний. Повторение изученного материала.
Учитель. Мы продолжаем воплощать нашу с вами мечту: создание сайта о нашем районе, его истории и о людях, в нём живущих.
Для этого нам предстоит научиться строить таблицы в Web - страницах средствами языка разметки гипертекстовых документов HTML. Тема сегодняшнего урока "Создание и использование таблиц на Web страницах".
2) А теперь выполняем необычный тест. Вопросы задаю я, а компьютер определит правильность вашего ответа. ( учащиеся отвечают у интерактивной доски)
- С помощью какого контейнера производится разделение текста на абзацы? (<p> Текст абзаца </p>)
- Какие параметры можно добавить в тэг <p> для выравнивания текста абзаца? (<p align=…> Текст абзаца </p>, где значением атрибута align могут быть center - выравнивание по центру,
left - выравнивание по левому краю, (задается по умолчанию),
right- выравнивание по правому краю, justify - выравнивание по ширине)
- Какой тэг используется для размещения на Web-странице заголовков и подзаголовков? (<h…> Загаловок</h…>)
- Какой тэг используется для задания параметров текста? (<font size=… color=…> Текст </font>)
- Какие параметры атрибутов face, size, color вы знаете? (например, <font Текст </font>, <font size=7> Текст </font>, <font color =”red”> Текст </font>)
Учитель.. Вспомним, что представляют собой таблицы и для чего они нужны.
Ученики. Основными элементами таблицы является столбец, строка, ячейка. Ячейки таблицы могут содержать разную информацию: числа, текст, рисунок, графики.
I. Формирование новых знаний и умений.
Учитель. Размещать информацию удобнее в таблице, а не на пустой странице. Поэтому таблицы используются в Web-дизайне чрезвычайно широко — не только для традиционных колонок цифр и прочей информации, которую удобно представлять в таком виде, но и как элемент дизайна.
Посещая Всемирную паутину и внимательно изучая структуру WEB-документов, мы можем обнаружить невидимый “скелет” – сложную сетку из крупных и мелких ячеек
(слайд WEB-документа).
Следовательно, мы можем увидеть глядя на WEB-страницу, что она представлена таблицей. Некоторые ячейки таблицы могут объединяться в одну, а внутрь ячеек можно поместить текст, графики, рисунки или другую таблицу. А сегодня мы узнаем как это сделать с помощью языка HTML.
На экране представлены тэги для построения таблицы. (Слайд )
Пример кода простейшей таблицы.
<table border=l>
<tr>
<td> Первая строка, первый столбец </td>
<td> Первая строка, второй столбец </td>
</tr>
<tr>
<td> Вторая строка, первый столбец </td>
<td> Втора строка, второй столбец </td>
</tr>
<table/>
Учащиеся пишут в конспект теги для построения таблицы и их атрибуты.
Учитель. Таблицу формируют несколько различных тэгов. Таблица задаётся контейнером <table > <table/>, внутри которого содержится описание структуры таблицы и ее содержания.
Любая таблица состоит из строк, которые задаются контейнером <tr></tr> (table row), в который помещается описание ячеек.
Формат ячеек и их содержание помещается в контейнер <td> </td> (table data), а заголовки ячеек в контейнер <th> </th> (table header).
Толщина разделительных линий в таблице задается с помощью атрибутов border=n (при n=0 граница невидима), а для выравнивания информации внутри ячейки по горизонтали применяют атрибут align.
II.Практическая часть.
Обсуждение и выполнение практической работы. Учащимся раздаётся распечатка c ходом практической работы. Во время практической работы учитель консультирует учащихся.
Ход практической работы
1. Используя уже созданную страницу-шаблон необходимо создать Web-страницу с названием «Тема: Таблицы в html».
¨ В папке WWW откройте файл shablon. Html, вызовите контекстное меню и выберите пункт Просмотр HTML-кода.
¨ Внесите изменения:
<html>
<head> <title>Тема:"Таблицы в html" </title> </head>
<body>
<table border=1>
<tr> <td>Первая строка, первый столбец </td>
<td>Первая строка, второй столбец </td>
</tr>
<tr> <td>Вторая строка, первый столбец </td>
<td>Втора строка, второй столбец </td>
</tr>
<table/>
</body>
</html>
¨ Сохраните под именем tab.html в папке WWW. Для этого выполните Файл – Сохранить как… В окне Сохранение документа в списке Тип файла выберите Все файлы (*.*). В поле Имя файла введите tab.html и нажмите кнопку Сохранить.
¨ Закройте текстовый редактор Блокнот.
¨ Откройте папку WWW, файл tab.html.(двойным щелчком) для просмотра в браузере. Проанализируйте полученный результат.
2. Задаем таблицу шириной 700 пикселей (точек) и располагаем её посередине страницы. Для этого откроем HTML-код нашей страницы:
¨ Вызовите контекстное меню и выберите пункт Просмотр HTML-кода.
¨ Внесите изменения в файл tab.html:
<table border=1align="center"width="700" > <!--задаем таблицу шириной 700 пикселей (точек) и располагаем её посередине страницы-->
¨ Сохраните файл (Файл - Сохранить)
Замечание. Обратите внимание на панель задач. На ней располагаются папка WWW, Блокнот с файлом tab.html (HTML-код страницы) и браузер с нашей страничкой “Тема:"Таблицы в html ”.
¨ воспользуйтесь Панелью задач и перейдите к просмотру страницы в браузере. (“Тема:"Таблицы в html ”).
¨ Нажмите кнопку Обновить или клавишу F5. Проанализируйте полученный результат.
3.Подкрасим фон таблицы в зелёный цвет.
¨ Пользуясь Панелью задач перейти в HTML-код страницы
<tr bgcolor="blue"> <!-- красим строку в синий цвет-->
5. Последнюю ячейку подкрасим в красный цвет:
<tr bgcolor="red"> <!-- красим строку в красный цвет-->
5. Выравниваем текст в ячейках:
<tr align="center"><!—расположит содержимое всех ячеек в строке по центру --> <tr align="right"><!--выровняет содержимое всех ячеек в строке по правому краю -->
Тоже самое можно сделать для отдельно взятой ячейки: <td align="center"> или <td align="right">
<td valign="top"> <!-- выровнять содержимое по верхнему краю ячейки -->
<td valign="bottom"> <!-- выровнять содержимое по нижнему краю ячейки-->
<td valign="middle"> <!--выровнять содержимое по середине ячейки-->
7. Устанавливаем размер ячеек.
<td width="120" height="125"> Вторая строка, второй столбец</td>
Замечание:
Не забываем каждый раз сохранять HTML код таблицы, просмотреть страницу в браузере нажимая кнопку Обновить.
Как только мы зададим высоту ячейки, то и вся строка подрастет в высоту до её уровня, т.е. остальным ячейкам указывать этот параметр не обязательно. А вот ширину желательно будет подсчитать и внести в каждую ячейку.
8. Подведем итоги.
а) Просмотрите результат. Похож ли он на тот, который вы видите на экране. (Слайд)
Посмотрите, как изменилась таблица, вернитесь обратно и пробегитесь взглядом по коду, задавая себе вопрос – а что это мы сделали в этом тэге, а что в следующем и т.д. Задача - убедиться, что Вы всё поняли.
III. Этап закрепления знаний и умений
Применение знаний в стандартных ситуациях. Посмотрите внимательно на экран, для каждой команды предлагается свой вариант таблицы. Вам необходимо записать HTML-код, который позволит построить эту таблицу. После написания кода команды выполнят его на ПК.
Один из вариантов:
Вариант 1
Записать код таблицы со следующими параметрами
A1
A2
B1
B2
1. Ширина внешней рамки 100 пикселей
2.Ширина левого столбца 40пикселей
3.Цвет таблицы - красный
IV. Итог урока.
Можете ли вы прокомментировать все тэги и их параметры которые мы прошли? (ответы учащихся)
Давайте рассмотрим результаты деятельности групп на уроке. Подвести итоги работы каждой группы.
На следующем занятии мы ещё немного поговорим о таблицах, научимся вставлять изображения, делать из изображений фон и ссылки.
VII. Домашнее задание
Разрабатывать тестовые задания для проверки знаний по материалу сегодняшнего урока на следующем уроке.
