Учебное пособие 2140

Элементы списка, как и в случае с маркированным списком, выделяются с помощью тега <LI>.

В новый стандарт языка HTML (HTML 4.0) включены некоторые полезные параметры, которые используются при организации нумерованных списков. Это атри-

бут TYPE, который позволяет назначить тип нумерации. Вы можете установить нумерацию арабскими или римскими цифрами (причем выбрать размер цифр) или обозначение элементов не цифрами, а буквами (также можно выбрать размер букв).

Пример записи этого параметра:

<OL TYPE="A"> Параметры атрибута TYPE приведены в табл. 6.5. Таблица 6.5. Допустимые значения параметра TYPE тега <OL> Значение Примечания А Для отметки элементов списка используются заглавные латинские буквы.

Нумерация элементов производится по алфавиту. После достижения последней буквы алфавита для продолжения нумерации добавляется вторая буква и так далее:

Элементы отмечаются маленькими латинскими буквами

Элементы списка отмечаются большими римскими цифрами (они составляются из заглавных букв)

Для нумерации используются маленькие римские цифры (они составляются

из маленьких букв)

Элементы списка нумеруются при помощи арабских цифр (это значение используется по умолчанию при отсутствии явного указания типа нумерации)

Рис 6.18. Пример использования списков с различными видами нумерации

На рис. 6.18 приведен пример использования нумерованных списков с различными типами нумерации.

6.6.4. Создание списков определений

Словарные списки, в отличие от маркированных и нумерованных списков, не позволяют автоматически устанавливать маркеры. Они используются для составления пар вида «термин - определение». Термин и определение выводятся на экран с разными отступами. Кроме того, при помощи более совершенных средств HTML возможна более тонкая настройка отображения объектов, выводимых при помощи разных тегов (более подробно об этом можно прочесть в литературе, посвященной технологии

CSS).

Рис 6.19. Пример использования списка определений

<Н1> Использование списков определений </Н1>

<DL>

<DT>Kor</DT>

<00>Маленькое домашнее животное. Обычно ласковое.</DD> <ОТ>Собака</ОТ>

<00>Домашнее животное побольше кота. Обычно кусачее.</DD> <ОТ>Слон</ОТ>

<DD>B Индии - большое домашнее животное.</DD> <ОТ>Кит</ОТ>

<00>0чень большое дикое животное.</DD> <ОТ>Медведь</ОТ>

<00>Дикое животное средних размеров.</DD> <ОТ>Тигр</ОТ> <00>Дикое животное, похожее на кота, но гораздо больших размеров.</DD>

</DL>

а рис. 6.19 показано, как данный код отображается в браузере.

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

ри создании списков вы можете поместить один список внутри другого. Такая руктура называется вложенным списком. Тип «вкладываемого» списка может

Рис 6.20. Пример использования вложенных списков

отличаться от типа списка верхнего уровня. Например, следующий фрагмент HTML-кода иллюстрирует создание двухуровневого маркированного списка:

<UL>

<1Л>Первый элемент списка верхнего уровня. </1Л> <1Л>Второй элемент списка верхнего уровня</1Л> <UL>

<1_1>Первый элемент вложенного списка. </!_!> <11>Второй элемент вложенного списка. </!_!> </UL>

Некоторые браузеры автоматически назначают элементам маркированных списков разного уровня вложенности разные маркеры. Это относится и к маркированным спискам, вложенным в списки нумерованные.

На рис. 6.20 приведен пример отображения вложенных списков браузером.

6.7. Использование таблиц

6.7.1. Зачем нужны таблицы

Чаще всего таблицы используются по своему традиционному назначению - для структурированного представления различных данных. В языке HTML ячейки таблицы могут содержать любую информацию (в том числе и другие таблицы). Это позволяет использовать их для упорядоченного размещения на странице текста и изображений (фиксации их положения относительно друг друга).

6.7.2. Некоторые сведения об HTML-таблицах

HTML-таблицы по сути не отличаются от других электронных таблиц, например из пакетов Lotus 1-2-3 или Excel. Информация в таблице содержится как в горизонтально расположенных строках, так и в вертикальных - столбцах; размеры и расположение строк и столбцов можно задавать по своему усмотрению. Пересечения строк и столбцов образуют ячейки. HTML-таблицы не способны производить математические расчеты, как таблицы пакета Microsoft Excel или Lotus 1-2-3, но если вам известны принципы построения таблиц, то и здесь вы не будете испытывать трудностей. Специальные теги разметки позволяют структурировать различную информацию - столбики цифр, колонки текста и т. д. Однако их можно использовать для форматирования документа и многих других целей.

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

Для включения таблицы в HTML-документ используется тег <TABLE> (для него обязателен закрывающий тег </TABLE>). Элементы таблицы задаются с помощью трех тегов:

*<ТН> - для заголовков столбцов;

*<TR> - для задания строк;

*<TD> - для задания ячеек таблицы.

Эти теги, по стандарту HTML, должны сопровождаться соответствующими закрывающими тегами, но в большинстве случаев их можно не ставить. Для форматирования ячеек используется несколько параметров. Ниже приведен фрагмент кода, содержащий очень простую таблицу:

<ТАВ1_Е>

<ТН>Столбец 1</ТН> <ТН>Столбец 2</ТН> <TR> <ТО>Строка 1, столбец 1</TD>

<ТО>Строка 1, Столбец 2</TD> </TR> <TR>

Рис 6.21. Простая таблица в окне браузера

<ТО>Строка 2, столбец 1</TD> <ТО>Строка 2, столбец 2 </TD> </TR>

</TABLE>

В результате получится простая таблица, содержащая две строки и два столбца. Столбцы будут снабжены заголовками (шрифт заголовков отличается от шрифта остальных ячеек таблицы). На рис. 6.21 изображена эта таблица, отображаемая браузером.

6.7.4. Управление отображением границ ячеек таблицы

Таблица, изображенная на рис. 6.21, не имеет границ. Это вызвано тем, что в описании таблицы (теге <TABLE>) отсутствует явное указание на их параметры. Браузер Internet Explorer, в котором отображается таблица на этом рисунке, в подобных случаях границу не отображает. В некоторых случаях отсутствие границы необходимо (для «сборки» фрагментов рисунка, размещенного в ячейках таблицы). Однако для отображения текстовых и численных данных удобнее использовать таблицу с границами.

Рис. 6.22. Пример видоизменения таблицы при помощи параметров тега

<TABLE>

Управление отображением и шириной границ ячеек осуществляется при помощи параметра BORDER тега <TABLE>. В качестве значения этого параметра указывается ширина границы в пикселях. Пример записи:

<TABLE BORDER="1">

Использование такого тега для объявления таблицы приведет к отображению рамок ячеек шириной в 1 пиксель. Установка значения BORDER=0 приведет к отсутствию рамок ячеек.

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

<TABLE CELLSPACING="5">

Отступ от границы до содержимого ячейки задается параметром CELLP ADDING. Пример записи:

<TABLE CELLPADDING="4">

Рис 6.23. Отображение таблиц браузером Netscape 6

На рис. 6.22 приведен пример использования этих параметров для видоизменения таблицы.

На этом рисунке файл примера открыт в браузере Internet Explorer. Ниже (на рис. 6.23) изображен тот же файл, но открытый браузером Netscape 6. Обратите внимание на отображение границ ячеек.

6.7.5. Выравнивание содержимого ячеек таблицы Вы можете управлять выравниванием содержимого ячеек таблицы. Для

этого используются параметры ALIGN и VALIGN тега <TD>.

Параметр ALIGN позволяет задать режим горизонтального выравнивания. Допустимые значение этого параметра: left, center, right (выравнивание по левому краю, центру и правому краю ячейки соответственно). Пример записи:

<TD ALIGN="right">

Параметр VALIGN дает возможность управлять выравниванием содержимого ячейки по вертикали. Допустимые значения: top, center и bottom (выравнивание по верхнему краю, центру и нижнему краю ячейки соответственно). Пример записи:

<TD VALIGN="top">

Расположение таблицы на странице может контролироваться при помощи параметра ALIGN. Например, чтобы расположить таблицу по центру окна браузера, используйте этот атрибут следующим образом:

<TABLE ALIGN="center">

Допустимые значения этого параметра: left, center и right (выравнивание по левому краю, центру и правому краю страницы соответственно). Для выравнивания

таблицы по центру можно также использовать тег <CENTER> (с соответствующим закрывающим тегом).

6.7.7. Способы применения HTML-таблиц

В большинстве случаев таблицы используются вовсе не для размещения цифр или иных подобных данных. Так как таблицы могут содержать практически любые теги HTML (в том числе и определения других таблиц), их можно использовать для форматирования и верстки HTMLдокументов. В качестве примера приведем web-страницу, расположенную по адресу www.igr.narod.ru. Эта страница сверстана при помощи таблиц. На рис. 6.25 изображена страница, отображаемая браузером Internet Explorer (браузеры компании Netscape эту страницу правильно отобразить не могут). Ширина границ для таблицы, задающей структуру документа, установлена равной 0, поэтому она не видна.

На рис. 6.26 изображена эта же страница, но ширина границ таблицы, задающей ее структуру, установлена равной 1 (таблица «проявлена»).

6.8. Ручное форматирование текста

6.8.1. Зачем это нужно?

Ручное форматирование текста может применяться в двух случаях.

1.В тексте страницы должна присутствовать таблица, но вы не уверены в том, что браузер пользователя сможет ее отобразить. Большинство современных браузеров поддерживают отображение таблиц. Поэтому использовать ручное форматирование для имитации таблиц не стоит - этот метод куда менее гибок, чем обычные таблицы.

2.Отображение исходных кодов программ (листингов). Как правило, для удобства чтения тексты программ записываются с различными отступами, формируемыми при помощи пробелов. Браузеры в большинстве случаев используют пропорциональные шрифты,

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

6.8.2. Форматирование текста с помощью тега <PRE>

Для задания режима сохранения ручного форматирования используется тег <PRE>. Этот тег требует наличия закрывающего тега (</PRE>). Ниже приведен пример использования этого тега.

<HTML>

<НЕАО><Т1Т1Е>Пример 15</TITLE>

Рис. 6.27. Отображение браузером документа, содержащего фрагмент с ручным форматированием

</HEAD>

<BODY>

<Н2>Использование тега &lt PRE &gt : </H2>

<В>Отображение текста в режиме ручного форматирования:</В>

<PRE>

1234567 ----- 1234567

1234567 ----- 1234567

1234567 ----- 1234567

1234567 ----- 1234567 </PRE>

<В>Отображение текста в обычном режиме:</B><BR>

1234567 ----- 1234567<BR>

1234567 ..... 1234567<BR>

1234567 ..... 1234567<BR>

1234567 ..... 1234567<BR> </BODY> </HTML>

Как видно, пример содержит два практически одинаковых фрагмента текста (во второй части для большей схожести фрагментов в окне браузера добавлены теги <BR>). На рис. 6.27 изображено окно браузера, отображающего этот документ.

6.9. Включение изображений в HTML-документы

6.9.1. Встроенные изображения

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

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

При выборе изображений для сайта следует учитывать следующие критерии.

* Размер изображения. Этот критерий является основным. Следует учитывать как размер собственно изображения, так и размер содержащего его файла. Если изображение слишком большое, для его просмотра может потребоваться прокрутка окна браузера, что неудобно. Слишком большой файл изображения может значительно увеличить время загрузки сайта.

Ф Число цветов, составляющих изображение, и сами эти цвета. Дело в том, что некоторые браузеры способны отображать ограниченное число цветов (обычно 256). Если изображение содержит большее число цветов, они будут приведены к тем, которые может отобразить браузер. Также следует учитывать и то, что цвета изображения могут по-разному отображаться на компьютерах, работающих под управлением различных операционных систем.

*Формат, в котором записано изображение. Для размещения изображений на web-страницах приняты два основных формата: GIF и JPEG, обеспечивающие сжатие данных. Эти форматы поддерживаются всеми современными браузерами. Остальные форматы могут и не поддерживаться.

*Характер изображения. Для передачи изображений разного содержания следует использовать разные форматы файлов. Подробнее этот вопрос рассматривается ниже.

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

<IMG SRC="HMfl файла">

Параметр SRC является обязательным, поскольку именно он задает имя графического файла. Справа от знака «равно» записывается название файла. Если вы хотите включить изображение, хранящееся на удаленном сервере, вместо названия файла следует указать доменное имя сервера и путь к данному графическому файлу (например, http://www.adesignlab.narod.ru/k41/images/logo.jpg).

Тег <IMG> может иметь и другие, необязательные параметры. Ниже приведен список самых распространенных параметров:

Рис. 6.28. Отображение браузером альтернативного текста изображения

Содержание

5. Создание web-страниц …………………………………...

5.1. Процесс разработки web-сайта ………………………..

Лабораторная работа 5.1 «Создание web-страницы средствами приложения Microsoft Word ………………….

Лабораторная работа 5.2 « Создание простой web-страницы с помощью FrontPage Express

……………..

5.2. Microsoft FrontPage: запуск и элементы интерфейса …

Лабораторная работа 5.3 «Использование Microsoft FrontPage для создания web-узла с использованием шаблона. Редактирование структуры web-узла. ………….

Лабораторная работа 5.4 «Использование Microsoft FrontPage для редактирования созданного ранее web-узла. Редактирование web-страниц с вставкой рисунков, таблиц, гиперссылок ……………………………

Лабораторная работа 5.5 «Использование дополнительных возможностей FrontPage в оформлении web-страниц ……

Лабораторная работа 5.6 «Создание простой web-

страницы с помощью редактора Сибкон Web-мастер ……

Лабораторная работа 5.7 «Использование FrontPage 2002 для создания карт ссылок»

……………………………

Лабораторная работа 5.8 «Использование форм

в web-страницах» ……………………………………………

Лабораторная работа 5.9 « Использование фреймов»

……

5.3. WEB-дизайн: рекомендации …………………………..

Контрольные вопросы ……………………………………..

6. Создание web-страниц …………………………………..

6.1.Обзор средств HTML ………………………………….

6.1.1.Что такое HTML? …………………………………….

6.1.2.Ограничения языка HTML …………………………..

6.2.Создание простого HTML-документа ………………..

6.2.1.Инструменты для создания и редактирования

HTML-документов ………………………………………...

6.2.2.На что похож HTML-документ? …………………..

6.2.3. Использование специальных символов …………..

3

4

10

91

9215

9322

93

98

24

99

99

100

10333

106

42

108

1508

109

11055

114

11459

11566

11675

11880

123

12383

12483

12683

12886

13191

131

131

132

133

136

137

6.2.4.Теги, определяющие структуру документа ……….

6.2.5.Комментарии в HTML-документе ………………...

6.3.Включение заголовков и форматирование текста документа

………………………………………………….

6.3.1.Создание заголовков ……………………………….

6.3.2.Теги форматирования текста ………………………

6.3.3.Организация абзацев ……………………………….

6.3.4.Цвет элементов страницы ………………………….

6.4.Использование URL-адресов при создании HTML-документов

………………………………………………...

6.4.1.Что такое URL? …………………………………….

6.4.2.Запись URL-адресов ………………………………..

6.4.3.Примеры адресов различных служб Интернета ….

6.5.Использование указателей и ссылок ……………….