Практическая работа «Разработка табличных форм на сайте»

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ КРАСНОДАРСКОГО КРАЯ

ГБПОУ КК «КОЛЛЕДЖ ЕЙСКИЙ»

Практическая работа

Разработка табличных форм на сайте

Разработал

преподаватель информатики

Караваев Игорь Григорьевич

$г. Ейск

2014 г.

Практическая работа №4

Разработка табличных форм средствами HTML

Цели работы:

Обучающая: способствовать формированию знаний учащихся по созданию и редактированию табличных форм на сайте.

Воспитательная: формирование системного мышления, восприятия компьютера как инструмента информационной деятельности человека.

Развивающая: развитие познавательного интереса, творческой активности учащихся.

Задачи работы:

  • Рассмотреть основные технологические приемы по созданию и табличных форм на странице сайта при помощи тегов языка HTML.

Оборудование: ПК, текстовый редактор «Блокнот» либо «Wordpad», любой действующий браузер.

Теоретическая часть практической работы

Данная практическая работа является четвертой практической работой из общего цикла «Мой первый сайт». Первые две практические работы можно найти и открыть по адресам: $

Таким образом, в левом окне текстового редактора, внутри тега body> необходимо вводить предлагаемые теги, и, после сохранения кода сайта, обновлять страницу в браузере. Это позволит разрабатывать таблицы по шагами видеть действие каждого тега.

Ход работы

  1. $ Перед тем как рассмотреть теги для построения табличных форм, отметим, что при создании кода сайта, иногда удобно вставить комментарии. Обычно комментарии применяют, когда код сайта сложный и длинный и самому разработчику требуется озаглавить какие-то блоки, что бы в дальнейшем не забыть назначение этих блоков. Тег комментария выглядит следующим образом:

Текст комментария браузеры на странице сайта не выводят. Для примера в теле body> наберите следующий фрагмент кода:

Создание табличных форм

font>h1>

<!— Этот тег открыва&#$1077;т комментарий, т. е. весь текст в этом теге, браузер пропускает и на web — странице не выводит —>


  1. Теперь рассмотрим, как создаются табличные формы. Наберите следующий фрагмент (вместе с комментариями):

ячейка 1, первый ряд ячейка 2, первый ряд

  1. Сохраните выше набранный код и обновите страницу браузера. Таблица из двух ячеек будет создана, но без расчерчивающих линий. Чтобы в таблице появились линии расчерчивания, необходимо вставить дополнительный параметр в тег ta$bl>. Наберите следующий код:
    br>

border=»1″>

ячейка 1, первый ряд ячейка 2, первый ряд

  1. Теперь создадим таблицу из двух строк и в каждой строке по две ячейки:

br>

$

ячейка 1, первый ряд ячейка 2, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд

  1. Создаем таблицу по три ячейки в каждой строке:

br>

$

ячейка 1, первый ряд ячейка 2, первый ряд ячейка 3, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд ячейка 3, второй ряд

  1. Теги

    определяют строку с заголовками HTML таблицы:

br>

tr>

th>Заголовок 1 th$> th>Заголовок 2 th> th>Заголовок 3 th>

$

ячейка 1, первый ряд ячейка 2, первый ряд ячейка 3, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд ячейка 3, второй ряд

  1. При помощи параметра colspan можно объединять соседние ячейки в одной строке. Скопируйте предыдущий код (пункта 39) и после тега table> вставьте строку с общим заголовком:


1«>

$

colspan=»3″> Общий заголовок на всю таблицу
Заголовок 1 Заголовок 2 Заголовок 3
ячейка 1, первый ряд ячейка 2, первый ряд ячейка 3, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд ячейка 3, второй ряд

Разработаем таблицу более сложной структуры:

  1. В теле страницы сайта наберите следующий код:

$


Создаем пустую таблицу: строк = 1; ячеек = 5

Ячейки оформляем для заголовков тегом


table border=»1″>

&nbsp &nbsp &nbsp &nbsp &nbsp


$

  1. Копируем предыдущий код, и в полученном коде опять копированием создаем 10 ячеек:


table border=»1″>

&nbsp &nbsp &nbsp &nbsp &nbsp

&nbsp &nbsp &nbsp &nbsp &nbsp


  1. Копированием создаем новый код с двумя строками по 10 ячеек для заголовков:

table border=»1″>$

&nbsp &nbsp &nbsp &nbsp &nbsp

&nbsp &nbsp &nbsp &nbsp &nbsp


&nbsp &nbsp &nbsp &nbsp &nbsp

&nbsp &nbsp &nbsp &nbsp &nbsp


  1. Теперь создадим новый код в который необходимо копированием добавить еще одну – третью строку, но каждую ячейку в ней оформить тегами $td>… — для данных. Добавленная строка должна выглядеть так:

tr>

td> &nbsp td> td> &nbsptd> td> &nbsptd> td> &nb$sptd> td> &nbsptd>

td> &nbsp td> td> &nbsptd> td> &nbsptd> td> &nbsptd> td> &nbsptd> tr>

  1. Копированием создаем новый код и вставляем туда пять строк для данных:

P.S. Пока строки данных пустые, они никак не отличаются от строк заголовков.

  1. Начнем вводить данные в таблицу. Опять копируем весь код. Первую строку преобразуем под общий заголовок, путем объединения всех 10-и ячеек. Для этого применим параметр $colspan. Первый тег строки заголовка заменить на тег:

tr>

th colspan =»10″ > Ведомость успеваемости th>

  1. Введем фамилии в первую колонку. Обратите внимание, третью строку надо оставить пустой:

  1. В строку «ФИО» введем название дисциплин, при этом под каждую дисциплину объединяем по две колонки:


tr>

ФИО colspan=»2″> Информатика colspan=»2″> Математика

$

colspan=»2″> Физика colspan=»2″> Химия Сумма
баллов

  1. Заполним третью строку типом экзамена. Внимание! Первую и последнюю ячейки не заполняем!:

tr$> td> &nbsp td> td> Устноtd> td> Письменно td> td> Устноtd> td> Письменноtd>

td> Устноtd> td>Письменноtd> td>Устноtd> td> Письменноtd> td> &nbsptd> tr>

  1. Отформатируем высоту первой строки и ширину таблицы. Потребуются два параметра:

Зададим ширину таблицы width=»900« — 900 пикселей: height=»50″ – зададим высоту первой строки 50 пиксе$лей;

Введите два эти параметра в начале кода таблицы:

table border=»1″ width=»900″ >


height=»50″ > Ведомость успеваемости

Объединим ячейку «ФИО» с нижней пустой ячейкой — параметр rowspan = «2»:

tr> $

rowspan=»2″> ФИО colspan=»2″> Информатика colspan=»2″> Математика

colspan=»2″> Физика colspan=»2″> Химия Сумма
баллов

Контрольное задание

Создайте таблицу следующего вида:

Зарплата по цеху №5

ФИО

Цена изделия

Кол-во изделий

Зарплата

Крылов Ф. И.

125

520

$65000

Громов П. П.

110

640

70400

Post Comment