2.3 Списки
Особые элементы служат для организации списков. Возможно создание нумерованных, маркированных списков и списков определений.
Нумерованные списки помещаются в контейнер <ol>...</ol>, маркированные - в <ul>...</ul>. Каждый следующий элемент списка вкладывается в отдельный контейнер <li>. Закрывающий тег подразумевается, но может быть опущен, поскольку однозначно восстанавливается по наличию следующего элемента или по концу списка.
Списки разных типов могут вкладываться друг в друга (рис. 2.3), что демонстрирует следующий пример.
|
Пример 2.3. Организация списков |
|
<!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>
|
Отдельный вид списков составляют списки-определения, которые организуют текст подобно толковому словарю. В них задается слово-определение и формируется его описание. Само слово выравнивается по левому краю. Описание выводится с отступом вправо. Весь список вкладывается в контейнер <dl>...</dl>, который определяет структуру списка и может содержать только элементы <dt> (определение) и <dd> (описание). Формально элементы <dt> и <dd> являются контейнерами, но соответствующие закрывающие теги часто не указываются.
2.4 Разметка текста
На практике все еще часто можно встретить элементы физического форматирования текста, задающие гарнитуру шрифта и его начертание. Например, контейнер <i> …</i> выведет заключенный в него текст курсивом. Большинство подобных тегов не рекомендовано к использованию, а для физического форматирования текста рекомендуется использовать таблицы стилей.
В примере 2.4 представлены примеры использования физического форматирования текста, а на рис. 2.4 показано, как данная Web-страница выглядит на экране браузера.
|
Пример 2.4. Физическое форматирование |
|
<!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>
|
Вместо того, чтобы явным образом указывать шрифт для отображения данных, многие авторы задают тип текста и предоставляют браузеру свободу выбора конкретного представления этого текста. Для определения типа текста используется логическое форматирование. Например, используя контейнер <еm> … </еm>, мы указываем, что заключенный в него текст должен быть выделен (по умолчанию курсивом). Однако если каскадные таблицы стилей не используются, автор в некоторой степени теряет контроль над внешним видом документа.
В примере 2.5 представлены примеры логического форматирования. Результаты отображения приведенных выражений в окне браузера показаны на рис. 2.5.
|
Пример 2.5. Логическое форматирование |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <ТITLE>Логическое форматирование текста</TITLE> </HEAD> <BODY ВGCDLOR="WНITE"> <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>
|
