4 Требование к отчету
Отчет о проделанной работе должен содержать:
-
название и цель работы;
-
номер варианта для выполнения поиска и тему своего варианта;
-
экранную копию файла Tabl.htm в экране браузера;
-
продемонстрировать работу ссылок;
-
описание тэгов таблиц, использованных в работе.
5. Теоретические положения
Использование таблиц
На практике таблицы часто используются, чтобы расположить текст в несколько колонок на Web-странице. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который нужно обратить внимание читателя.
Программирование таблиц
Таблица задается тегом <TABLE> и заканчивается тегом... </TABLE>.
Внутри этих тэгов задаются строки тегами <TR> ... </TR>.
Внутри строк задаются клетки (ячейки) тегами
<TD> >описание содержимого ячейки</TD>
или
<TH>описание содержимого ячейки</TH>.
Тег <TD> применяется в тех случаях, когда в ячейке расположен обычный текст. Тег <TH> применяется в тех случаях, когда в ячейке расположен заголовок, т.е. текст должен быть выделен утолщенным шрифтом. Любая ячейка таблицы может содержать в себе другую таблицу.
Таким образом, по строкам, описывается вся структура таблицы.
Пример программы типовой таблицы приведен ниже. Атрибут BORDER определяет толщину линий таблицы.
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION> <!--Это заголовок таблицы--> У таблицы может быть заголовок </CAPTION>
<TR> <!--Это начало первой строки-->
<TD> <!--Это начало первой ячейки--> Первая строка, первая колонка </TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки--> Первая строка, вторая колонка </TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец первой строки-->
<TR> <!--Это начало второй строки-->
<TD> <!--Это начало первой ячейки--> Вторая строка, первая колонка </TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки--> Вторая строка, вторая колонка </TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец второй строки-->
</TABLE> <!--Это конец таблицы-->
Язык программирования HTML позволяет строить очень сложные по структуре таблицы. Чтобы научиться строить таблицы любой сложности, надо научиться строить базовые таблицы, которые условно названы Тип1, Тип 2, Тип 3.
Таблицы типа 1 самые простые таблицы, т.к. содержат в каждой строке одинаковое количество ячеек.
Таблицы типа 2 имеют ячейки, объединенные по вертикали (по столбцу).
Таблицы типа 3 имеют ячейки, объединенные по горизонтали (по строке).
Программирование таблицы типа 1.
Схема программирования таблицы типа 1 приведена на рис. 5.1. Таблица программируется построчно, по две ячейке в каждой строке.
Рис. 5.1. Схема программирования таблицы типа 1
Программа таблицы типа 1 приведена ниже.
<TABLE border=1>
<TR> <!-- Первая строка -->
<TD width=100>(1,1)</TD> <!-- Первая ячейка -->
<TD>(1,2)</TD> <!-- Вторая ячейка -->
</TR>
<TR> <!-- Вторая строка -->
<TD>(2,1)</TD> <!-- Первая ячейка -->
<TD>(2,2)</TD> <!-- Вторая ячейка -->
</TR>
<TR> <!-- Третья строка -->
<TD>(3,1)</TD> <!-- Первая ячейка -->
<TD>(3,2)</TD> <!-- Вторая ячейка -->
</TR>
</TABLE>
Программирование таблицы типа 2.
Схема программирования таблицы типа 2 приведена на рис. 5.2.
Поскольку в таблице типа 2 в первом столбце объединены две ячейки в одну, то применен атрибут rowspan = n, который определяет, сколько табличных строк (n) займет ячейка в пределах столбца.
Рис. 5.2. Схема программирования таблицы типа 2
Программа таблицы типа 2 приведена ниже.
<TABLE border=1>
<TR> <!-- Первая строка -->
<TD rowspan=2>(1,1)</TD> <!-- Первая двухрядная ячейка -->
<TD>(1,2)</TD> <!-- Вторая ячейка -->
</TR>
<TR> <!-- Вторая строка -->
<TD>(2,2)</TD> <!-- Вторая ячейка -->
</TR>
<TR> <!-- Третья строка -->
<TD>(3,1)</TD> <!-- Первая ячейка -->
<TD>(3,2)</TD> <!-- Вторая ячейка -->
</TR>
</TABLE>
Программирование таблицы типа 3.
Схема программирования таблицы типа 3 приведена на рис. 5.3.
Поскольку в таблице типа 3 в первой строке объединены две ячейки в одну, то применен атрибут colspan = n, который определяет, сколько табличных столбцов (n) займет ячейка в пределах строки.
Рис. 5.3. Схема программирования таблицы типа 3
Программа таблицы типа 3 приведена ниже.
<TABLE border=1>
<TR> <!-- Первая строка -->
<TD colspan=2>(1,1)</TD> <!-- Первая ячейка -->
</TR>
<TR> <!-- Вторая строка -->
<TD>(2,1)</TD> <!-- Первая ячейка -->
<TD>(2,2)</TD> <!-- Вторая ячейка -->
</TR>
<TR> <!-- Третья строка -->
<TD>(3,1)</TD> <!-- Первая ячейка -->
<TD>(3,2)</TD> <!-- Вторая ячейка -->
</TR>
</TABLE>
Атрибуты таблиц
В табличных тегах применяется множество атрибутов, которые разделяются по следующим уровням:
1) Атрибуты тега TABLE.
2) Атрибуты тега TR.
3) Атрибуты тега TD (TH).
Атрибуты тега TABLE
Атрибуты тега TABLE приведены в табл. 5.1.
Таблица 5.1.
Атрибуты тега TABLE
|
Атрибут |
Назначение |
|
align= (left, right) |
Выравнивание по горизонтали |
|
width= (число или процент) |
Ширина таблицы |
|
cellpadding= (число) |
Расстояние между содержимым ячейки и рамкой |
|
cellspacing= (число) |
Расстояние между ячейками таблицы |
|
bgcolor= (цвет) |
Цвет фона таблицы |
|
background= (файл) |
Фоновая картинка |
|
border= (число) |
Ширина линий рамки |
|
bordercolor= (цвет) |
Цвет линий рамки |
|
bordercolordark= (цвет) |
Цвет рамки (снизу и справа) |
|
bordercolorlight= (цвет) |
Светлый цвет рамки (сверху и слева) |
ALIGN
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH
Ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).
BORDER
Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING
Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
CELLPADDING
Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Тег <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Атрибуты тега TR
Атрибуты тега TR приведены в табл. 5.2.
Таблица 5.2.
Атрибуты тега TR
|
Атрибут |
Назначение |
|
align= (left, center, right) |
Выравнивание по горизонтали |
|
valign=(top, center,bottom, baseline) |
Выравнивание по вертикали |
|
bgcolor= (цвет) |
Цвет фона |
|
bordercolor= (цвет) |
Цвет линий рамки |
|
bordercolordark= (цвет) |
Цвет рамки (снизу и справа) |
|
bordercolorlight= (цвет) |
Светлый цвет рамки (сверху и слева) |
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:
ALIGN
Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
Атрибуты тега TD (TH)
Атрибуты тега TD (TH)приведены в табл. 5.3.
Таблица 5.3.
Атрибуты тега TD (TH)
|
Атрибут |
Назначение |
|
align= (left, center, right) |
Выравнивание по горизонтали |
|
Valign=(top, center,bottom, baseline) |
Выравнивание по вертикали |
|
Width= (число или процент) |
Ширина ячейки |
|
bgcolor= (цвет) |
Цвет фона |
|
background= (файл) |
Фоновая картинка |
|
bordercolor= (цвет) |
Цвет линий рамки |
|
bordercolordark= (цвет) |
Цвет рамки (снизу и справа) |
|
bordercolorlight= (цвет) |
Светлый цвет рамки (сверху и слева) |
|
nowrap |
Выключение автоматического разрыва строк |
|
colspan= (число) |
Ширина большой ячейки (в столбцах) |
|
rowspan= (число) |
Высота большой ячейки (в строках) |
Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
NOWRAP
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN
Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH
Устанавливает ширину ячейки в пикселах (например, WIDTH=200).
HEIGHT
Устанавливает высоту ячейки в пикселах (например, HEIGHT=40).
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.
6 Контрольные вопросы
6.1 Какой тэг задает строку в таблице?
6.2. Какой тэг задает ячейку в таблице?
6.3. Как объединить ячейки в строке таблицы?
6.4 Как объединить ячейки в колонке таблицы?
6.5. Как задается заголовок таблицы?
6.6. Как задается название таблицы?
6.7. Какой тэг задает начало и конец таблицы?
6.8. Какими тэгами форматируется текст, цвет, рамки таблицы?
Практическое занятие №25 "Создание личного сайта"
Тема " Создание сайта"
1 Цель работы
Ознакомиться с основами программирования сайтов
2 Задачи работы
Научиться создавать простейшие сайты.
3 Порядок выполнения работы
3.1. На диске d:\Мои документы создать/открыть свою папку с номером группы и фамилией, в которой будет создаваться отчет по практической работе.
3.2. Загрузите Блокнот.
3.3. Создайте в блокноте следующие файлы, содержащие структуру HTML-документа:
-
index.htm – главная (стартовая или домашняя) страница сайта.
-
biogr.htm – файл, содержащий описание Вашей биографии.
-
albom.htm – файл, содержащий фотографии друзей.
-
frend1.htm – файл, содержащий фотографию и рассказ об одном из друзей.
Взаимосвязь между файлами производится через гиперссылки, согласно нижеприведенной схеме на рис. 3.1.
Внимание! Для сдачи зачета необходимо иметь личную электронную фотографию, которая будет размещена в файле index.htm.
3.4. В каждом файле создать таблицы и гиперссылки, в соответствии со схемой.
3.5. В файле index.htm обязательно поместить личную фотографию. В альбоме поместить фотографии студентов группы или друзей.
3.6. Заполнить контентом все созданные файлы.
3.7. Запустить в браузере файл index.htm и проверьте правильность работы всех гиперссылок и размещение контента.
3.8. Отформатировать все файлы, сделав страницы разноцветными и красивыми.
3.9. В текстовом процессоре Word оформить отчет по практической работе.
3.10. Сдать зачет по практической работе. Для этого необходимо продемонстрировать работу сайта и предоставить отчет по работе.