Данная практическая работа является четвертой практической работой из общего цикла «Мой первый сайт».
В этих работах рассматривались технологии по созданию структуры сайта, вывода на web-страницах текстовой информации с заданием различных параметров шрифта и разработка списков с различными параметрами.
В данной работе рассматриваются основные теги по созданию и редактированию табличных форм.
Поскольку предыдущая работа завершилась на 33 шаге, данная работа, являясь продолжением начинается с 34 шага.
Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Просмотр содержимого документа
«Разработка табличных форм средствами HTML »
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ КРАСНОДАРСКОГО КРАЯ
ГБПОУ КК «КОЛЛЕДЖ ЕЙСКИЙ»
Практическая работа
Разработка табличных форм на сайте
Разработал
преподаватель информатики
Караваев Игорь Григорьевич
г. Ейск
2014 г.
Практическая работа №4
Разработка табличных форм средствами HTML
Цели работы:
Обучающая: способствовать формированию знаний учащихся по созданию и редактированию табличных форм на сайте.
Воспитательная: формирование системного мышления, восприятия компьютера как инструмента информационной деятельности человека.
Развивающая: развитие познавательного интереса, творческой активности учащихся.
Задачи работы:
Рассмотреть основные технологические приемы по созданию и табличных форм на странице сайта при помощи тегов языка HTML.
Оборудование: ПК, текстовый редактор «Блокнот» либо «Wordpad», любой действующий браузер.
Теоретическая часть практической работы
Данная практическая работа является четвертой практической работой из общего цикла «Мой первый сайт». Первые две практические работы можно найти и открыть по адресам:
http://kopilkaurokov.ru/informatika/uroki/131520 - «Мой первый сайт»
http://kopilkaurokov.ru/informatika/uroki/132776 - «Работа со шрифтами в HTML
В этих работах рассматривались технологии по созданию структуры сайта, вывода на web-страницах текстовой информации с заданием различных параметров шрифта и разработка списков с различными параметрами.
В данной работе рассматриваются основные теги по созданию и редактированию табличных форм.
Поскольку предыдущая работа завершилась на 33 шаге, данная работа, являясь продолжением начинается с 34 шага.
Для построения табличных форм применяются следующие теги и параметры:
Теги:
– объявляют о создании HTML таблицы.
- определяют заголовок HTML таблицы.
– определяют табличный ряд.
– определяют ячейку HTML таблицы.
Параметры: border="1" – устанавливает границу HTML таблицы и ее ячеек в 1 пиксель.
- пустая ячейка
если атрибут border отсутствует или его значение равно 0 – границ не
будет.
colspan="2" - объединение заданного количества ячеек (колонок) в строке
rowspan="2" - объединение заданного количества ячеек (рядов) в колонке
cellspacing="0" – определяет расстояние между ячейками таблиц,
а также между границами ячеек и границей таблицы.
cellpadding="8" – пространство между границей ячейки и ее содержимым.
Как и в предыдущих работах подготовьте два окна:
- слева окно текстового редактора WordPad, в котором наберите основные теги, задающие структуру сайта, и сохраните с расширением .html
Таким образом, в левом окне текстового редактора, внутри тега body необходимо вводить предлагаемые теги, и, после сохранения кода сайта, обновлять страницу в браузере. Это позволит разрабатывать таблицы по шагами видеть действие каждого тега.
Ход работы
Перед тем как рассмотреть теги для построения табличных форм, отметим, что при создании кода сайта, иногда удобно вставить комментарии. Обычно комментарии применяют, когда код сайта сложный и длинный и самому разработчику требуется озаглавить какие-то блоки, что бы в дальнейшем не забыть назначение этих блоков. Тег комментария выглядит следующим образом:
Текст комментария браузеры на странице сайта не выводят. Для примера в теле body наберите следующий фрагмент кода:
Создание табличных форм
fonth1
Теперь рассмотрим, как создаются табличные формы. Наберите следующий фрагмент (вместе с комментариями):
ячейка 1, первый ряд
ячейка 2, первый ряд
Сохраните выше набранный код и обновите страницу браузера. Таблица из двух ячеек будет создана, но без расчерчивающих линий. Чтобы в таблице появились линии расчерчивания, необходимо вставить дополнительный параметр в тег tabl. Наберите следующий код: br
border="1"
ячейка 1, первый ряд
ячейка 2, первый ряд
Теперь создадим таблицу из двух строк и в каждой строке по две ячейки:
br
ячейка 1, первый ряд
ячейка 2, первый ряд
ячейка 1, второй ряд
ячейка 2, второй ряд
Создаем таблицу по три ячейки в каждой строке:
br
ячейка 1, первый ряд
ячейка 2, первый ряд
ячейка 3, первый ряд
ячейка 1, второй ряд
ячейка 2, второй ряд
ячейка 3, второй ряд
Теги
определяют строку с заголовками HTML таблицы:
br
tr
thЗаголовок 1 ththЗаголовок 2 ththЗаголовок 3 th
ячейка 1, первый ряд
ячейка 2, первый ряд
ячейка 3, первый ряд
ячейка 1, второй ряд
ячейка 2, второй ряд
ячейка 3, второй ряд
При помощи параметра colspanможно объединять соседние ячейки в одной строке. Скопируйте предыдущий код (пункта 39) и после тега table вставьте строку с общим заголовком:
1"
colspan="3" Общий заголовок на всю таблицу
Заголовок 1
Заголовок 2
Заголовок 3
ячейка 1, первый ряд
ячейка 2, первый ряд
ячейка 3, первый ряд
ячейка 1, второй ряд
ячейка 2, второй ряд
ячейка 3, второй ряд
Разработаем таблицу более сложной структуры:
В теле страницы сайта наберите следующий код:
Создаем пустую таблицу: строк = 1; ячеек = 5
Ячейки оформляем для заголовков тегом
table border="1"
Копируем предыдущий код, и в полученном коде опять копированием создаем 10 ячеек:
table border="1"
Копированием создаем новый код с двумя строками по 10 ячеек для заголовков:
table border="1"
Теперь создадим новый код в который необходимо копированием добавить еще одну – третью строку, но каждую ячейку в ней оформить тегами td… - для данных. Добавленная строка должна выглядеть так:
tr
tdtd td td td td td td td td
td td td td td td td td td td tr
Копированием создаем новый код и вставляем туда пять строк для данных:
P.S. Пока строки данных пустые, они никак не отличаются от строк заголовков.
Начнем вводить данные в таблицу. Опять копируем весь код. Первую строку преобразуем под общий заголовок, путем объединения всех 10-и ячеек. Для этого применим параметрcolspan. Первый тег строки заголовка заменить на тег:
tr
thcolspan ="10"Ведомость успеваемости th
Введем фамилии в первую колонку. Обратите внимание, третью строку надо оставить пустой:
В строку "ФИО" введем название дисциплин, при этом под каждую дисциплину объединяем по две колонки:
tr
ФИО
colspan="2" Информатика
colspan="2" Математика
colspan="2" Физика
colspan="2" Химия
Сумма баллов
Заполним третью строку типом экзамена. Внимание! Первую и последнюю ячейки не заполняем!:
table border="1"
опированием создаем новый код и вставляем туда пять строк для данных:
ведем фамилии в первую колонку. Обратите внимание, третью строку надо оставить пустой:
