Создание веб-страниц, содержащих списки

Лабораторная работа № 3

Создание веб-страниц, содержащих списки

И таблицы

Цель работы

Цель лабораторной работы – приобретение навыков создания разнообразных списков и таблиц.

В результате выполнения лабораторной работы студент должен знать:

· способы создания разнообразных списков, в частности нумерованных списков (с арабскими и римскими цифрами), маркированных списков (с маркерами в виде кругов и квадратов), списков определений и вложенных списков;

· методы работы с таблицами.

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

Используемое в процессе работы оборудование: персональное ЭВМ класса IBM PC стандартной конфигурации.

Теоретическое введение

Списки

Существует три основных вида списков в HTML-документе:

· нумерованный список;

· маркированный список;

· список определений.

Можно создавать вложенные списки, используя, различные теги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тегов (открывающий и закрывающий) внутри другой.

Нумерованные списки

В нумерованный список браузер автоматически вставляет номера элементов по порядку. Это означает, что если удалить один или несколько элементов нумерованного списка, остальные номера автоматически будут пересчитаны.

Нумерованные списки создаются с помощью парного тега <OL>. Каждый элемент списка начинается с тега <LI>. Пример нумерованного списка, в котором нумерация осуществляется по умолчанию, показан на рис. 1.

Рис. 1. Список с нумерацией, заданной по умолчанию

Ter <ОL> может иметь атрибуты TYPE и START. Синтаксис:

<ОL TYPE=А|а|I|i|1 START=n>

Здесь:

· TYPE - символы списка:

§ A - прописные латинские буквы (А, В, С...);

§ а - строчные латинские буквы (а, b, с...);

§ I - большие римские цифры (I, II, III...);

§ i - маленькие римские цифры (i, ii, iii...);

§ 1 - арабские цифры (1, 2, 3...).

· START=n - начальное значение списка.

Пример нумерованного списка с большими римскими цифрами показан на рис. 2.

Рис. 2. Список с нумерацией из больших римских цифр

Маркированные списки

Маркированные списки создаются с помощью парного тега <UL> (от англ. Unordered List - ненумерованный список). Каждый элемент списка начинается с тега <LI>. Тег <UL> может иметь атрибут TYPE:

<UL TYPE=disc|circle|square>

Атрибут TYPE определяет внешний вид маркера. Доступные значения:

· disc - закрашенные круглые маркеры (вариант, заданный по умолчанию);

· circle - незакрашенные круглые маркеры;

· square - квадратные маркеры.

Рис.3. Маркированный список с параметрами,

заданными по умолчанию

Пример маркированного списка с параметрами, заданными по умолчанию, показан на рис. 3.

Вложенные списки

Примеры вложенных списков показаны на рис. 4.

Списки определений

Список определений состоит из специальным образом расположенных терминов и их описаний (определений). Для создания списков определений на веб-страницах используются теги <DL>, <DT> и <DD>.

· Парный тег <DL> начинает список определений. Он включает в себя теги <DT> (помечает термин) и <DD> (помечает описание термина). Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии. Тег <DL> имеет атрибуты COMPACT (современными браузерами не поддерживается), CLASS, ID, LANG и STYLE.

Рис.4. Вложенные списки

Если определяемые термины короткие, используется атрибут COMPACT, который предназначен для вывода элементов списка в компактной форме (с уменьшенным кеглем и расстоянием между строками):

<DL COMPACT>...</DL>

Атрибут COMPACT не имеет значений, синтаксис остальных атрибутов:

CLASS="Стилевой класс"

ID="Имя"

LANG=''Код языка"

STYLE=''Определение встроенного стиля"

· Тег <DT> представляет собой блочный непарный тег, который помечает текст термина в списке определений. Атрибуты тега <DT>:

CLASS="Стилевой класс"

ID="Имя"

LANG="Код языка"

Рис. 5. Список определений

· Тег <DD> представляет собой блочный непарный тег, который помечает текст определения в списке определений. Атрибуты тега <DD>:

CLASS="Стилевой класс"

ID="Имя"

LANG="Код языка"

STYLE="Определение встроенного стиля"

Пример списка определений показан на рис. 5.

Помимо описанных тегов, для создания логически связанных списков можно использовать теги <MENU> и <DIR>.

Таблицы

Таблицы в HTML-документах можно использовать не только сами по себе, но и с целью точного позиционирования фрагментов текста и изображений друг относительно друга.

Ячейки таблиц в языке HTML могут содержать любые HTML-элементы, в том числе заголовки, списки, текстовые абзацы, графику, а также элементы форм.

Основные теги таблиц

Создание таблиц

Основным тегом, описывающим таблицу, является парный тег <TABLE>. Все элементы таблицы должны находиться внутри тегов <TABLE> и </TABLE>. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER. Размер рамки может быть фиксированным или автоматически согласовываться с размерами окна просмотра браузера и размерами текста и рисунков в ячейках. Помимо своего естественного назначения (упорядочения текстовой информации), таблицы позволяют решать чисто дизайнерские задачи: выравнивать части фрагментов страниц друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на столбцы и т. д.

Тег <TABLE> имеет атрибуты ALIGN, BORDER, BACKGROUND, BGCOLOR, BORDERCOLOR, CELLPADDING, CELLSPACING, HSPACE, SPACE, COLSPEC, WIDTH.

· Атрибут ALIGN. Если атрибут ALIGN располагается внутри тегов <CAPTION> и </CAPTION>, он определяет положение подписи таблицы и может принимать значения ТОР (сверху, вариант заданный по умолчанию) и BOTTOM (снизу). Если атрибут ALIGN встречается внутри тегов <TR>...</TR>, <TH>...</TH> или <TD>...</TD>, он управляет выравниванием данных в ячейках по горизонтали и может принимать значения LEFT (слева), RIGHT (справа) или CENTER (по центру).

· Атрибут BORDER определяет вид границ таблицы. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. Атрибут BORDER может принимать числовые значения, определяющие толщину границы, например:

BORDER=3

· Атрибут BACKGROUND позволяет создать фоновое изображение для всей таблицы:

BACKGROUND = URL

· Атрибут BGCOLOR задает фоновый цвет.

· Атрибут BORDERCOLOR задает цвет рамки. Используется только с атрибутом BORDER, например:

<TABLE BORDER=''число" BORDERCOLOR="цвет">

· Атрибут CELLPADDING определяет расстояние от границ ячейки до ее содержимого в пикселах.

· Атрибут CELLSPACING определяет расстояние между ячейками в пикселах.

· Атрибут HSPACE задает свободное пространство слева и справа от таблицы в пикселах.

· Атрибут VSPACE задает свободное пространство сверху и снизу от таблицы в пикселах.

· Атрибут COLSPEC позволяет создать столбцы фиксированной ширины. Значение ширины задается либо в символах, либо в процентах, например:

COLSPEC="20 %"

· Атрибут WIDTH определяет ширину таблицы. Значение ширины задается либо в пикселах, либо в процентах от текущей ширины окна браузера, например:

WIDTH=256

WIDTH=100 %

Если вводимый текст не помещается в ячейку, то в нее с помощью символов &nbsp вводят неразрывный пробел. Это необходимо для прорисовки сетки таблицы.

Создание ячеек таблицы

Для создания ячейки таблицы служит парный тег <TD>. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером столбца, к которому она относится.

Рис. 6. Таблица из дух строк и семи столбцов,

в которой надписи центрированы

Если в строке для некоторых столбцов отсутствует одна или несколько ячеек, браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=LEFT и VALIGN=MIDDLE. Данное расположение может быть изменено как на уровне описания строки, так и на уровне описания ячейки.

Программа создающая таблицу из двух строк и семи столбцов, представлена в листинге 1, а результат этой программы показан рис. 6. В этом примере надписи выполнены с использованием тегов <TH> и </TH>, поэтому они центрированы по умолчанию.

Листинг 1. Пример создания таблицы из двух строк и семи столбцов, в которой надписи центрированы

<HTML>

<HEAD>

<TITLE>Таблица из двух строк и семи столбцов</TITLE>

</HEAD>

<BODY>

<H3>Таблица из двух строк и семи столбцов</H3>

<TABLE CELLSPACING=0 CELLPADDING=0 WIDTH=”80%” BORDER=4>

<TR ALIGN=CENTER>

<TH BGCOLOR=BLACK></TH>

<TH BGCOLOR=WHITE>a12</TH>

<TH BGCOLOR=BLACK></TH>

<TH BGCOLOR=WHITE>a14</TH>

<TH BGCOLOR=BLACK></TH>

<TH BGCOLOR=WHITE>a16</TH>

<TH BGCOLOR=BLACK></TH>

</TR>

<TR ALIGN=CENTER></TH>

<TH BGCOLOR=WHITE>a21</TH>

<TH BGCOLOR=BLACK></TH>

<TH BGCOLOR=WHITE>a23</TH>

<TH BGCOLOR=BLACK></TH>

<TH BGCOLOR=WHITE>a25</TH>

<TH BGCOLOR=BLACK></TH>

<TH BGCOLOR=WHITE>a27</TH>

</TR>

</TABLE>

</BODY>

</HTML>

Группирование строк таблицы

Для создания логически связанных групп строк в теле таблицы используется тег <TBODY>, например:

<TBODY><TR><TD>...<TD>...</TBODY>

У тега <TBODY> есть атрибуты BGCOLOR, ALIGN, VALIGN, которые имеют тот же смысл, что и одноименные атрибуты тега <COLGROUP>.

Для логического группирования строк в верхней части таблицы (то есть для создания верхней шапки таблицы) используется тег <THEAD>, например:

<THEAD><TR><TD>...<TD>...</ТНЕАD>

У тега <THEAD> есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же смысл, что и одноименные атрибуты тега <COLGROUP>.

Для логического группирования строк в нижней части таблицы (то есть для создания нижней шапки таблицы) используется тег <TFOOT>, например:

<TFOOT><TR><TD>...<TD>...</THEAD>

У тега <TFOOT> есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же смысл, что и одноименные атрибуты тега <COLGROUP>.

Задание к лабораторной работе

1. Создать веб-страницу.

2. Создать списки в соответствии с вариантом, приведенном ниже в таблице.

Таблица

3. Создать список определений.

4. Создать таблицу (предварительно получить у преподавателя индивидуальное задание).

5. СОДЕРЖАНИЕ ОТЧЕТА ПО ЛАБОРАТОРНОЙ РАБОТЕ

1. Результаты выполнения подготовительного задания: титульный лист, цель и задачи работы, краткие теоретические сведения.

2. Результаты выполнения лабораторных заданий, оформленные в виде листинга программы с указанием результата ее выполнения.

3. Выводы по результатам выполнения заданий и заключение по работе в целом.

КОНТРОЛЬНЫЕ ВОПРОСЫ

1. Назовите основные виды списков используемые в HTML-документах?

2. С помощью какого тега создаются нумерованные списки?

3. С какого тега начинается каждый элемент списка?

4. С помощью какого тега создаются маркированные списки?

5. Для каких целей используются теги<DL> и <DD>?

6. Какие атрибуты у тега <TABLE>?

7. Что позволяет создавать атрибут BACKGROUND?

8. Какие теги служат для создания строк и столбцов таблицы?

9. Какой тег используется для создания ячейки таблицы?

10. Как можно создать заголовок и подпись таблицы?

11. Какие теги служат для группирования элементов таблиц?

12. С какой цель используется тег <COLGROUP>?

13. Какие атрибуты может иметь тег <COLGROUP>?

14. С какой цель используется тег <TBODY>?

15. Назовите основные атрибуты элементов таблиц?

16. Что определяет атрибут VALIGN? Внутри каких тегов встречается?

17. Что определяет атрибут RULES?

18. Назовите доступные значения атрибута RULES?

19. Какой атрибут говорит о том, что данные в ячейке не могут логически разбиваться на строки и должны быть представлены одной строкой?

20. Что определяет атрибут VALIGN?

21. Какой атрибут задает свободное пространство сверху и снизу от таблицы в пикселах?

Библиографический список

1. Комолова, Н.В. HTML: учебный курс / Н.В. Комова. – СПб.: Питер, 2007. – 268 с.

2. Якубайтис, Э.А. Информационные сети и системы / Э.А. Якубайтис. – М.: Финансы и статистика, 2006. – 368 с.

Содержание

Лабораторная работа № 3

Создание веб-страниц, содержащих списки

И таблицы

Цель работы

Цель лабораторной работы – приобретение навыков создания разнообразных списков и таблиц.

В результате выполнения лабораторной работы студент должен знать:

· способы создания разнообразных списков, в частности нумерованных списков (с арабскими и римскими цифрами), маркированных списков (с маркерами в виде кругов и квадратов), списков определений и вложенных списков;

· методы работы с таблицами.

Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...

Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...

ЧТО ТАКОЕ УВЕРЕННОЕ ПОВЕДЕНИЕ В МЕЖЛИЧНОСТНЫХ ОТНОШЕНИЯХ? Исторически существует три основных модели различий, существующих между...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: