Файл: Основы программирования на языке HTML.pdf

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

Пример 3. Блочная структура Web-страницы

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transit! onal//EN">

<html>

<head>

<TITLE>Заголовки,блоки,абзацы</TITLE>

</hЕАd>

<ВОdy leftmargin="100" bgcolor="#ffffff">

<Н1 align="center">

<Р>Часть первая

<Р>Старгородский лев

</h1>

<Н2>

<р>Глава 1<Р>Безенчук и &quotНимфы&#34

</Н2>

<Р>В уездном городе N было так много парикмахерских заведений и бюро похоронных процессий, что казалось, жители города рождаются лишь затем, чтобы побриться, остричься, освежить голову вежеталем и сразу же умереть. А на самом деле в уездном городе N люди рождались, брились и умирали довольно редко. Жизнь города N была тишайшей.</р>

</div>

<р>Вопросы любви и смерти не волновали Ипполита Матвеевича Воробьянинова, хотя этими вопросами по роду своей службы он ведал с девяти утра до пяти вечера ежедневно с получасовым перерывом для завтрака.</р>

</ВОdy>

</hТml>

Делая обзор данной Web-страницы, есть возможность заметить следующее.

Строки 7-10: заголовок первого уровня.

Строки 11-13: заголовок второго уровня, выполненный по умолчанию более мелким шрифтом.

Строки 14-16: блок <div>. Для наглядности он выделяется другим цветом текста и фоном, а кроме того смещен на сорок пикселей влево от линии других элементов.

Строка 17. Обычный абзац, который создан с помощью элемента <р>.

Все указанные элементы включены в элемент <body>. В терминологии программистов упоминается, что данный элемент является родительским, для вложенных элементов-потомков <h1>, <h2>, <div>, <р>. Элементы-потомки наследуют некоторые свойства элемента-родителя. К примеру, <h1>, <h2>, <p> наследуют от <body> значение левой границы. Элемент <div> выпадает из данного списка, так как для него явно указано левое поле.

Рисунок 1 – Блочная структура страницы

А вот элемент <р>, каковой включен в <div>, наследует от него смещенную левую границу (рисунок 1).

2.3 Списки

Для организации списков используются специальные элементы. Можно создавать нумерованные, маркированные списки и списки определений [16, 19].

Нумерованные списки могут размещаться в контейнере <ol>...</ol>, маркированные - в <ul>...</ul>. Всякий дальнейший элемент списка вкладывается в отдельный контейнер <li>. Закрывающий тег предполагается, однако может быть опущен, так как однозначно восстанавливается по присутствию следующего элемента или по концу списка [7].

Списки различных видов могут вкладываться друг в друга (рисунок 2), что может продемонстрировать такой пример 4.

Пример 4. Организация списков

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<ТITLE>Списки</TITLE>

</head>

<ВОdy>

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

<UL>

<LI>Следовательно, НКПС построит железнодорожную магистраль. Это-раз.

<LI>Два - это гостиницы и небоскребы для размещения гостей.

<LI>Три - поднятие сельского хозяйства в радиусе на тысяч километров..

<ОL>

<LI value="4">Дворец, в котором будет происходить турнир, четыре.

<LI>Пять - постройка гаражей для гостевого автотранспорта.

</ОL>

<LI>Для передачи всему миру сенсационных результатов турнира придется построить сверхмощную радиостанцию. Это – в шестых.

</UL>

</ВОdy>

</НТml>

Рисунок 2 – Пример реализации списков

Отдельный тип списков составляют непосредственно списки-определения, каковые организуют текст наподобие толкового словаря. В них задается слово-определение и создается его описание. Собственно, слово выравнивается по левому краю. Описание выводится с отступом вправо. Весь список может быть вложен в контейнер <dl>...</dl>, который определяет структуру списка и может включать в содержание лишь элементы <dt> (определение) и <dd> (описание) [8]. Формально элементы <dt> и <dd> являются контейнерами, однако соответствующие закрывающие теги зачастую не отмечаются.

2.4 Разметка текста

В практической деятельности все еще часто встречаются элементы физического форматирования текста, определяющие гарнитуру шрифта и его начертание. К примеру, контейнер <i> …</i> выведет заключенный в него текст курсивом.

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

Пример 5. Физическое форматирование

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HЕАD>

<TITLE>Физическое форматирование текста</TITLE>

</HEAD>

<bОdy bgcolor="white">

<Н1>Физическое форматирование текста</H1>

<В>Bold</B><BR>

<I>Italic</I><BR>

<ТТ>Teletype (Monospaced) </TТ><BR>

<U>Underlined</U><BR>

Subscripts: f<SUВ>0</SUB> + f <SUB>1</SUВ><ВR>

Superscripts: x<SUР>2</SUP> + y<SUP>2</SUР><BR>

<SMALL>Smaller</SМАLL><BR>

<BIG>Bigger</BIG><ВR>

<STRIKE>Strike Through</STRIKE><BR>

<B><I>Bold Italic</I></B><BR>

<ВIG><TT>Big Monospaced</TT></BIG><BR>

<SMАLL><I>Small Italic</I></SMALL><BR>

<FОNT COLOR="GRAY">Gray</FONT><BR>

<DЕL>Delete</DEL><BR>

<INS>Insert</INS><ВR>

</ВОDY>

</HTML>

Рисунок 3 – Отображение браузером элементов физического форматирования

В примере 6 показаны примеры логического форматирования. Итоги отображения указанных выражений в окне браузера продемонстрировано на рисунке 4.

Пример 6. Логическое форматирование

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<ТITLE>Логическое форматирование текста</TITLE>

</HEAD>

<H1>Логическое форматирование текста</H1>

<ЕМ>Emphasized</EM><BR>

<STRОNG>Strongly Emphasized</STRONG><BR>

<СОDE>Code</CODE><BR>

<SАMP>Sample Output</SAMP><BR>

<KВD>Keyboard Text</KBD><BR>

<DFN>Definition</DFN><BR>

<VАR>Variable</VAR><BR>

<CITE>Citation</CITE><ВR>

<EMXCODE>Emphasized Code</CОDE></EM><BR>

<FONT COLOR="GRAY"><СITE>Gray Citation</CITE></FONT><BR>

<ACRONYМ TITLE="Java Development Kit">JDK Acronym</ACRONYM>

</BODY>

</HTML>

Рисунок 4 – Отображение браузером элементов логического форматирования

Вместо явного указания шрифта для отображения данных, большинство авторов задает тип текста и предоставляют браузеру свободу выбора определенного представления данного текста. Для установления вида текста применяется логическое форматирование. К примеру, применяя контейнер <еm> … </еm>, можно указывать, что заключенный там текст должен быть выделен (по умолчанию курсивом) [17]. Но, если каскадные таблицы стилей не применяются, автор в определенной степени утрачивает контроль над внешним видом документа.

2.5 Таблицы

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

Таблица является довольно сложной структурой, формируемой совокупностью элементов. Основных элементов, из каковых может быть организована минимальная таблица – 3. Это <TABLE> - который ограничивает всю таблицу (может включать необязательный элемент CAPTION, который задает имя таблицы), <TR> - который выделяет строку (вкладывается в <TABLE>), <TD> - который выделяет отдельные ячейки в строке (вкладывается в <TR>). Данные (текст, остальные таблицы, картинки, гиперссылки, формы и другое) находятся в контейнерах <TD>…</TD>. В содержание всякой строки таблицы могут входить элементы <TH>, содержащие заголовок таблицы. В составе элемента <TH> информация по умолчанию показывается полужирным шрифтом и может выравниваться по центру. Данные в элементе <TD> показываются обычным шрифтом и выравниваются по левому краю. Пример простой таблицы показан в примере 7. На рисунке 5 продемонстрирован внешний вид данной таблицы на экране браузера. Закрывающие теги </TR>, < /ТН> и </TD> необязательны, но способствуют прослеживанию структуры таблицы.

Пример 7. Простая таблица

<TАВLE BORDER=1>

<CАРTION>Название таблицы</CAPTION>

<ТR><TН>Заголовок1</TH> <TH>Заголовок2</ТН></TR>

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

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

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

</TABLE>

Рисунок 5 – Простая HTML-таблица

Если в открывающем теге <TABLE> не отмечены атрибуты, по умолчанию формируется таблица без рамок, выровненная по левому краю. Добавочные возможности по управлению внешней структурой таблицы предоставляют особые атрибуты [6]. Простой пример применения атрибута FRAME показан в примере 8. На рисунке 6 продемонстрировано, как этот пример может выглядеть на экране браузера.

Пример 8. Таблица с отключенным внешним обрамлением

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TIТLE>2000 World Championship</TITLE>

</HEAD>

<BODY>

<Н2 АLIGN="CENTER">2000 World Championship</Н2> Final result in the 2000 world tic-tac-toe championship. Deep Green is "X", Garry Kasparov is "0".

<TR><TH>X<ТН>0<TH>X

<TR><TH>X<TH>0<TH>X

<ТR><ТН>0<TH>X<ТH>0

</TАВLE>

</BОDY>

</HTML>

Рисунок 6 – Таблица с отключенным внешним обрамлением

В примере 9 показана таблица, для каковой в заголовках столбцов текст показывается белым цветом на черном фоне, а в других ячейках выводится черный текст на светло-сером фоне. Внешний вид таблицы продемонстрирован на рисунке 7.

Пример 9. Задание цвета фона и текста таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TIТLE>WWW Standards</TITLE>

</HEAD>

<ВОDY BGCOLOR="WHITE">

<Н1 ALIGN="CENTER">WWW Standards</Hl>

<TАВLE BОRDER=1 BGСОLOR="#EEEEEE">

<ТН><FОNT СОLOR="WHITE">Standard</FONT>

<TH><FONT COLOR="WHITE">Obsolete Version</FONТ>

<TH><FONT COLOR="WНIТE">Most Widely Supported Version</FONT>

<TH><FONT COLOR="WНITE">Upcoming Version</FОNT>

<ТR> <ТD>НТML

<TD>3.2

<TD>4.0

<ТD>XHTML

<TR> <TD>HTTP

<ТD>1.0

<TD>1.1

<TD>1.2

</TАВLE>

</BODY>

</HTML>

Рисунок 7 – Таблица с ячейками и текстом разных цветов

Если будет потребность ячейки могут расширяться на несколько столбцов или строк. Примеры кода показаны в примерах 10 и 11, а внешний вид таблицы продемонстрирован на рисунке 8.

Пример 10. Ячейка заголовка, расширяющаяся на два столбца

<TАВLE ВОRDER=1>

<TR> <TH COLSPAN=2>Заголовок столбцов 1 и 2

<TН>Заголовок столбца 3

<TR> <TD>Столбец 1

<ТD>Столбец 2

<TD>Столбец 3

</TАВLE>

Пример 11. Ячейка данных, расширяющаяся на две строки

<ТАВLE BОRDER=1>

<ТR> <TН>Заголовок 1<TH>Заголовок 2

<TR><ТD ROWSPAN=2>Данные строк 1 и 2

<TD>Строка 1 Столбец 2

<ТR><TD>Строка 2 Столбец 2

</TАВLE>

(а)

Рисунок 8 – Расширение ячейки на несколько столбцов (а),

расширение ячейки на несколько строк (б)

(б)

2.6 Гипертекстовые ссылки

Многие создатели Web-страниц не ставят перед собой задачу последовательно представлять материал в одном документе. Вместо этого они предоставляют на собственных страницах ссылки на иные документы и разделы того же документа, представляя посетителям возможность переходить по ссылкам и показывать информацию, которая их больше всего интересует. Элемент <A> дает возможность автору расположить фрагменты текста либо изображения так, чтобы при активизации их пользователем браузер отображал в своем окне нужный раздел иного документа [6]. Элемент <A> также дает возможность назвать позицию и документе, чтобы на нее могли указывать гипертекстовые ссылки.