Содержимое раздела:

Web дизайн\Учебник по HTML

Глава 5. Форматирование текста

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

В этой главе вы узнаете:

  • как добавлять заголовки и горизонтальные линии для организации более четкой структуры страницы;
  • как придавать черты определенного стиля своему тексту;
  • как использовать различные контейнерные элементы для форматирования абзацев;
  • как создавать маркированные и нумерованные списки.

Организация страницы

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

Заголовки

Заголовки являются контейнерами и, в отличие от многих других элементов XHTML, дублируются, как и <р>. Заголовки ранжируются с 1-го по 6-й уровень и позволяют отражать структуру документа. Вот пример:

<h1>3аголовки первого уровня - это самые главные заголовки в мире</h1>
<h2>Заголовки второго уровня поменьше, но тоже ничего. Используются
для главных подзаголовков</h2>
<h3>3aголовки третьего уровня еще меньше и используются для
второстепенных подзаголовков</hЗ> <р>Это обычный текст</р> <h4>3аголовки четвертого уровня - это почти то же самое,
что и обычный текст, но все же он немного выделяется</h4> <h5>Заголовки пятого уровня: тоже выделяются, но по размеру меньше
обычного текста</h5> <h6>3аголовки шестого уровня: низший уровень заголовков</h6>

Рис. 5.1. Уровни заголовков, которые вы можете использовать

На рисунке 5.1 изображен результат аналогичной англоязычной странички.

В идеале, пропускать уровни нельзя. То есть <h3> не может следовать после <hl>, если между ними нет <h2>. На практике иногда применяют заголовки разных уровней просто для того, чтобы задавать размеры шрифтов. Это неправильно, потому что разные браузеры по-разному будут отображать эти размеры. Гораздо лучше для изменения размера шрифта использовать таблицы стилей (глава 10). Нельзя в одной и той же строке использовать и заголовок, и обычный текст, даже если вы закрываете тег заголовка. Элемент заголовка работает так же, как <р>, то есть он вставляет новую строку после своего «выключающего» тега. Например,

<h1>Boт это заголовок</h1> А это - обычный текст

будет выглядеть в браузере примерно так же, как

<h1>Вот еще заголовок</h1>
<p>А вот еще текст абзаца</р>

В обоих случаях браузер поместит текст заголовка в одной строке, а обычный текст- в другой. Обратите при этом внимание на то, что первый пример не является «хорошо оформленным кодом». Вторая его часть должна быть заключена в теги <р>.

Горизонтальные линии

Хотите использовать различные разделители? Элемент <hr /> — это то, что вам нужно. Он помещает между абзацами горизонтальную линию, которую можно растянуть на всю ширину окна браузера. Если читатель изменяет размер окна, то размер линии соответственно масштабируется. <hr /> является пустым элементом, поэтому закрывающий тег не требуется. («Нг» расшифровывается как «horizontal rule», то есть просто «горизонтальная линия»).

Этот элемент вставляет разрыв абзаца до и после линии. <hr /> можно поместить в любом место на странице.

<hr />
<h2>Иван Топорыжкин</h2
<р>Иван Топорыжкин пошел на охоту. С ним пудель пошел, перепрыгнув забор.</р>

У элемента <hr /> могут быть определенные атрибуты, изменяющие вид и размер линии, однако их можно применять, только если DTD относится к XHTML Transitional. Они не удовлетворяют требованиям XHTML Strict. Если вы хотите придерживаться строгих стандартов, используйте команды таблиц стилей вместо этих атрибутов. Мы обсудим это в главе 10. Они дают возможность управлять шириной, длиной и расположением горизонтальной линии в окне браузера. В таблице 5.1 показаны возможные атрибуты и назначение <hr />.

Таблица 5.1. Атрибуты <hr />

Атрибут Описание
size Устанавливает толщину горизонтальной линии
width Устанавливает ширину
align Задает расположение: выравнивание по левому краю, середине или правому краю в окне браузера
noshade Изменяет внешний вид линии, а именно - убирает тень

Примечание

Термин "пиксел" означает "элемент изображения" на экране, а в сетевых терминах можно сказать, что это одна точка. По умолчанию ширина элемента <hr/> равна 1 пикселу.

Любые из этих атрибуов могут быть введены путем их добавления перед закрывающей угловой скобкой. Например:

<hr size="4" width=50%" align="center " noshade= "noshade" />

Стилизация текста

Может показаться, что логические элементы избыточны. На самом деле это не так, более того, именно им и оказывают предпочтение. Почему? Потому что не все браузеры могут отображать физические стили, например выделение жирным шрифтом. Если, например, браузер, встроенный в сотовый телефон, не умеет этого, то он просто проигнорирует ваше <b> .Если же вы используете логические элементы, то телефон постарается выделить это место в тексте как-нибудь по-своему. Например, <strong> в обычных графических браузерах делает текст полужирным. Текстовые браузеры, не имеющие возможности изменить толщину букв, прибегают к выделению с помощью подчеркивания или изменения яркости. Но элементы типа <b> теми же самыми программами будут, скорее всего, проигнорированы.

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

Элементы физических стилей

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

В таблице 5.2 собраны некоторые описания физических стилей.

Таблица 5.2. Физические стили

Элемент Назначение
<b>, </b> Жирный
<i>, </i> Курсив
<tt>, </tt> Моноширинный
<big>, </big> Подчеркнутый
<big>, </big> Увеличенный размер
<small>, </small> Уменьшенный размер
<sub>, </sub» Нижний индекс
<sup>, </sup> Верхний индекс

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

  1. Введите текст.
  2. Поместите курсор в начало выделяемого текста.
  3. Введите открывающий тег того элемента стиля, который вы хотите применить. Переместите курсор в конец отрывка.
  4. Введите закрывающий тег.

Рассмотрим пример, в котором используется физический стиль.

<р><tt>Новости сайта:</tt>
Мы изменили расписание выпусков <j>последних новостей</j>
Теперь они будут выходить по <b>средам</b>
(по просьбам наших читателей), таким образом
в <u>четверг и пятницу</u> вы будете иметь возможность
воспользоваться полученной информацией <sup>*</sup></p>
<p><sup>*</sup>Mы не гарантируем, что до конца недели
расписание вступит в силу!</р>

На рисунке 5.2 показано, как выглядят в браузере примененные здесь стили.

Рис. 5.2. Обычно браузеры не отличаются разнообразием способов отображения физических стилей

ПРИМЕЧАНИЕ

Важно размещать теги маркировки в непосредственной близости от выделяемого текста. Это гарантирует, что пробелы будут нужной ширины. Например, сравните: Четверг и <b>пятница</b> и Четверг и <b>пятница</b>. Некоторые (не все) браузеры могут отреагировать на второй пример таким образом: «Четверг и пятница».

Элементы логических стилей

В главе 4 мы говорили, что элемент, задающий абзац, не только вставляет пропуск между двумя отрывками текста, он на самом деле определяет отрывок, заключен ный в <р> и </р> как элемент под названием «абзац». Это действительно важный момент, на который стоит обратить внимание, потому что это означает, что <р> за дает логический элемент HTML! Он не задает ничего конкретного, не определяет размер шрифта или отступы. Точное определение всех параметров абзаца отдает ся на откуп браузеру.

Логические стили в HTML используют ту же идею. Логическим является стиль, конкретные параметры которого задаются браузером. Хотя, скорее всего, разные браузеры будут привычным образом воспринимать элемент абзаца, можно встретить варианты, когда весь текст написан зеленым цветом, а отступ сделан не слева, асправа (если так решил сделать производитель браузера или пользователь). Примерно то же самое можно сказать не только об абзаце, но и о логических стилях. Браузер делает текст жирнее, выделяет его курсивом, раскрашивает в зеленый цвет или произносит громче (голосовые браузеры) в зависимости от возможностей конкретной программы.

Любой элемент логического стиля имеет открывающий и закрывающий тег, формирующий контейнер для выделяемого текста. В таблице 5.3 описаны логические стили.

Таблица 5.3. Логические стили

Элемент Назначение
<em>, </em> Выделение
<strong>, </strong> Усиленное выделение
<cite>, </cite> Цитата или ссылка на внешний источник
<dfn>,</dfn> Исходный код программы
<samp>,</samp> Пример работы программы, часто отображается так же,
как предыдущий
<kbd>,</kbd> Текст, вводимый с клавиатуры
<var>,</var> Переменная или значение
<q>,</q> Цитируемый текст
<abbr>,</abbr> Аббревиатура
ocronym > , </acronym > Акроним

Что касается графических браузеров, то обычно <епт> соответствует курсиву, а <strong> — жирному шрифту. Но это не всегда так. Иногда <еm> может означать подчеркивание, a <strong> — выделение яркостью. В голосовых браузерах текст, помеченный <еm>, произносится громче, чем обычный, a <strong> - еще громче. Основная идея заключается просто в том, что <еm> делает текст выделенным, а <strong> - усиленно выделенным.

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

СОВЕТ

Internet Explorer под Macintosh позволяет использовать персональные таблицы стилей, с помощью которых можно настроить вид страниц. Выберите в диалоговом окне Preferences пункт Web Content и активизируйте команду Use My Stylesheet (для этого потребуется указать размещение документа, содержащего таблицу стилей, как описано в главе 10). Netscape и IE под Windows позволяют выбрать настройки цветов и шрифтов. Opera (http:/ /www.opera.com), существующая в ряде вариантов под различные операционные системы, позволяет настраивать вид элементов.

В листинге 5.1 приводится пример, аналогичный тому, что был представлен на рис 5.2, но в нем используются элементы логических стилей, а не физических. Результат можно увидеть на рис 5.3.

Рис. 5.3. Обычным браузером логические стили воспринимаются так же, как физические

Листинг 5.1. Логические стили

<р><еm>Все пользователи</еm> должны помнить о том,
что нужно корректно завершать каждый сеанс работы на терминале
<strong>nepeд тем как уходить</strong>. Чтобы <dfn>завершить
ceaнс</dfn> необходимо набрать в командной строке <kbd>logout</kbd>
или <kbd>exit</kbd>. Когда вы увидите на экране результат
выполнения этой команды <samp>Thank you. Goodbye.</samp>,
можете смело выключать компьютер. Теперь это безопасно.
Для этого воспользуйтесь кнопкой на лицевой панели.</р>

Элемент <q> используется в том случае, когда нужно вставить в текст знаки цитирования, которые в разных языках различаются.

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

 <p><q lаng="ru">Я не понимаю, что ты имеешь в видy</q>
- сказал Джек</р>

Атрибут lang не является обязательным и содержит двухбуквенное обозначение национального языка, например "fr" (французский), "es" (испанский).

Последние два логических элемента, <abbr> и <acronym>, немного отличаются от других. Обычно они используются для ввода дополнительной информации о сокращениях. Браузер может каким-то образом интерпретировать ее, а может и проигнорировать, но в любом случае хуже от этого не будет. У обоих элементов могут быть атрибуты lang и title. Последний содержит расшифровку данного сокращения или акронима. Вот несколько примеров:

<abbr lang="ru" titlе="Российская Федерация">РФ</аbbг><br />
<acronym title="To есть">т. e.</a><br /> <acronym lang="fr" title="Association Canadienne pour
la Recherche en Economie de la Sante">ACRES</acronym>

В идеале, если браузер распознает акронимы и аббревиатуры, он по требованию может расшифровывать их. Например, Internet Explorer выводит расшифровки в маленьком окошке, которое появляется при наведении курсора на соответствующий элемент, как показано на рис 5.4.

Рис. 5.4. В Internet Explorer для Windows текст, содержащийся в атрибуте title, выводится при наведении мыши на слово, заключенное в контейнере <abbr> или <acronym>

СОВЕТ

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

Элементы стилей абзацев

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

Элемент <рге>

Элемент под названием «преформатированный текст» представлен тегами <рге> и </рге>. Его отличие от элемента «абзац» состоит в том, что он распознает все вводимые пробелы и переводы строк. То есть вы получаете в окне браузера при мерно то же и с тем же оформлением, что отображается в окне текстового редактора. При этом не требуются дополнительные усилия для добавления пробелов, не нужны <br /> для перевода строки. Следующий пример проиллюстрирован на рис 5.5.

<рrе>
Я обнял эти плечи и взглянул
       На то что оказалось за спиною
И увидал, что выдвинутый"стул  
Сливался с освещенною стеною </рrе>

Рис. 5.5. Теги <рrе> и </рrе> заставляют браузер обращать внимание на пробелы и переводы строк в исходном коде

Преформатированный текст идеально подходит для оформления листингов npo грамм, потому что обычно в этом случае вы стремитесь передать не только синтаксис, но и правильное форматирование. Элемент <рге> позволяет также довольно просто создавать таблицы, используя пробелы в качестве разделителей. Тем не менее, поскольку эти таблицы печатаются моноширинным шрифтом, скорее всего вы согласитесь потратить время, но оформить таблицу специальными средствами HTML; они обсуждаются в главе 8.

ПРИМЕЧАНИЕ

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

Использование <рrе> для создания таблиц

Одной из возможностей <рге> является создание примитивных таблиц. Чтобы создать таблицу, важно прежде всего разобраться с расположением текста в ней. Иначе говоря, вы просто вводите текст внутри контейнера <рге>, представляя себе таблицу. Выравнивайте колонки с помощью пробелов, и результат будет действительно напоминать таблицу.

Например:

<рге>
Год Событие       
1965 Я родился 1976 Написан первый рассказ </рге>


При этом имейте в виду, что при использовании элементов XHTML вам придется компенсировать пробелами место, занимаемое их тегами. Например:

<рге>


Год Событие
1965 Я родился
<b>1976</b> <ij>Написан первый рассказ</ij>
</рге>

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

СОВЕТ

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

Как создать простейшую таблицу?

1. Откройте файл шаблона и введите нечто подобное расположенному между тегами <body> Возможно, придется повозиться немного с интервалами между колонками, чтобы в браузере таблица приняла ровный вид.

<h1>Средний часовой доход в регионах</h1>
<рге>
Регион Ручной труд Умственный труд Бизнес Реклама
Северо-Запад $40 $50 $75 $100
Северо-Восток $35 $45 $70 $95
Юго-Запад $30 $40 $65 $90
Юго-Восток $25 $35 $55 $75
</рге>

2. Сохраните HTML-документ, затем примените команду Open File в браузере, чтобы просмотреть то, что вы создали

.

ПРИМЕЧАНИЕ

Даже в составе контейнера <рге> символы табуляции браузером не распознаются. Если Bы пользуетесь текстовым редактором или процессором, старайтесь не использовать клавишу Tab для выравнивания колонок. Для этого существует клавиша Пробел. Некоторые HTML редакторы учитывают этот момент и заменяют табуляцию серией пробелов.

Элемент <blockquote>

Исторически сложилось так, что контейнерный элемент <blockquote> использует ся благодаря своим физическим, а не логическим атрибутам. Вообще-то, он предназначен для идентификации отступов абзацев, чтобы абзацы визуально выделялись из текста. Хотя это и легитимное применение даже с точки зрения XHTML, оно не должно быть основной причиной для использования <blockquote>. В следующем примере показано, как этот элемент справляется с задачей визуального выделения абзаца.

<h1>Новости сайта!</h1>
<blockquote>Haш сайт существует для тех ,кто заботится
о своем <string>желудке</string>.
Здесь вы найдете рецепты блюд, которые можно приготовить
<i>дома</i>, также информацию о том, где можно вкусно
и недорого поесть в вашем городе. См. раздел <tt>Где перекусить</tt>. Не забудьте посетить
наш <еm>Форум</еm>, там вы сможете обменяться мнениями
с местными гурманами. Обязательно подпишитесь на
<strong>paccылкy</strong>. Воспользовавшись этой
возможностью, вы сможете получать электронные письма
с самыми свежими новостями, ресторанами и интересными
рецептами. </blockquote>

На рисунке 5.6 показано, как этот текст выглядит в браузере.

Рис. 5.6. Элемент <blockquote> в действии

И все же, хотя это не является нарушением стандартов, я бы не стал использовал <blockquote> для организации отступов и доверил бы это таблицам стилей. Согласно W3C элемент <blockquote> должен использоваться для ввода цитируемого текста. Например:

<р>Из историй Геттисбурга:</р>
<blockquote>Четыре века и семь лет тому назад наши праотцы привели
сюда народ и создали ноеус нацию, выращенную в свободе
и решившую посвятить свое существование пропаганде
равенства всех людей на Земле </blockquote>

Здесь показано более грамотное применение элемента <blockquote>. Результирующая страница показана на рис 5.7. Еще раз повторюсь: нет ничего страшного в том, чтобы использовать этот элемент для определения отступов абзаца, однако в этом случае следует иметь в виду, что все браузеры интерпретируют понятие абзаца по-разному.

Рис. 5.7. Элемент <blockquote> используется по прямому назначению

Следует запомнить, что <blockquote> в браузере отображается обычным шрифтом абзаца, оформляется тем же стилем. Он не воспринимает лишние пробелы и переводы строк, в этом он похож на <р>.

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

<blockquote cite="http://eserverorg/history/gettysburg-addresstxt">
Четыре века и семь лет тону назад наши праотцы привели сюда
народ и создали новую нацию, выращенную в свободе и решившую
посвятить свое существование пропаганде равенства всех людей на
Земле. </blockquote>

Элемент <address>

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

Вот пример использования элемента <address>:

<address>Cтpaница создана и поддерживается 
почтальоном Печкиным</аddrеss>

Традиционно этот элемент размещается в конце веб-документа и сообщает следующую информацию:

  • когда страница была обновлена в последний раз;
  • с кем можно обсудить вопросы, связанные с этой страницей (обычно e-mail вебмастера);
  • URL данной страницы;
  • телефонные номера или физические адреса компании или организации

Большинство этих данных не являются жизненно важными для вашей страницы, но являются прекрасным дополнением информации, представленной на странице. Пример более полного использования элемента <address>:

<address>Этa страница была последний раз обновлена
6/12 в 9:08 pm.<br /> В случае проблем пишите веб-мастеру
по адресу: pechkin@mailprostokvashino.ru.<br /> Адрес: 12345 Ростовская обл., село Простоквашино<br />
ул. Почтовая, д. 1.</address>

Обратите внимание: по-прежнему для обозначения перевода строки используете тег <bг />. На рисунке 5.8 показано, как браузер отображает приведенный выше код.

Рис. 5.8. Обычно текст, заключенный в контейнер <address>, отображается курсивом.
Обозначение исправлений: <ins> и <del>

Обозначение исправлений: <ins> и <del>

<ins> и <del> — это элементы, представляющие особый интерес для создателей официальных проектов, посвященных бизнесу или образованию. Вообще-то, они должны использоваться исключительно в процессе работы над страницей.

Используйте элемент <del>, чтобы обозначить фрагмент текста, который, скорее всего, будет удален, a <ins> - чтобы обозначить фрагмент, вставляемый на место удаляемого. Они могут использоваться и независимо, если вы просто хотите вставить или удалить текст. Это полезно, когда над страницей работают несколько человек и вы хотите отслеживать изменения. Подобная функция имеется в текстовом процессоре Microsoft Word, - если вы ей когда-нибудь пользовались, вы легко обнаружите сходство.

У обоих элементов могут быть необязательные атрибуты cite, datetime или title. Они используются для того, чтобы пояснить свои действия. При этом с помощью datetime можно указать время, когда соответствующий элемент был вставлен. Тут тоже есть свои тонкости. Вот пример:

 2001-12-05109:00:00-05:00

Это означает: 9:00 am EST, 12/05/2001. Что касается -05:00, то это часовой пояс. Атрибут cite позволяет задавать ссылку на URL, на котором содержится объяснение данного добавления или удаления. А атрибут title позволяет делать то же самое с помощью тегов. Рассмотрим пример:

<р>Это важная информация для <ins datetime=
"2001-12-05T09:00:00-05:00" titlе="Изменить по результатам
голосования">Совета директоров,</ins><dеl>
президента и его помощников.</del> Именно им
необходимо иметь на руках более
50% акций предприятия.</р>

Пример проиллюстрирован на рис. 5.9.

ПРИМЕЧАНИЕ

<ins> и <del> можно применить и к целому абзацу или другому блоку текста.

Рис. 5.9. Элементы <ins> и <del> помогают в процессе работы над документом

Списки

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

 <тип списка>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</тип списка>

Каждый элемент <li> - это пункт списка, который всегда пишется с новой строки. С чего начинается эта строка, зависит от того, упорядочен список или нет, маркированный он или нумерованный.

Упорядоченные и неупорядоченные списки

Проще всего понять, что это такое, если говорить в терминах «нумерованный список» и «маркированный список» (соответственно). Нумерованный/упорядочен ный список задается элементом <оl>, а маркированный/неупорядоченный — элементом <ul>. Но пункты любого из них обозначаются с помощью <li>. При этом если список упорядоченный (<оl>), то в начало каждой строки вставляется ее порядковый номер в списке; если он неупорядоченный (<ul>), то вставляется знача маркировки. Вот как выглядит упорядоченный список:

<ol>
<li> Первый пункт.</li>
<li> Второй пункт.</li>
<li> Третий пункт.</li>
</оl>

А вот пример неупорядоченного списка:

<ul>
<li> Первый пункт.</li>
<li> Второй пункт.</li>
<li> Третий пункт.</li>
</ul>

В браузере это выглядит так, как показано на рис. 5.10.

Кроме маркировки XHTML можно включать в списки другие списки, и они будут
вложены один в другой. Например:

<ol>
<li> Первый пункт.</li>
<li> Второй пункт.</li>
<li><ul>
<li> Пункт 3.1 </li>
<li> Пункт 3.2 </li>
</ul></li>
<li> Четвертый пункт</li>
</ol>

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

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

Атрибуты упорядоченного списка

У вас есть возможность изменять поведение и вид списков с помощью определенных атрибутов. Тем не менее надо отметить, что эти атрибуты никак не согласуют ся стребованиями новых стандартов XHTML. Поэтому если вы хотите их использовать, то DTD должен быть для Transitional XHTML. И все же лучше использовать таблицы стилей (глава 10).

Большинство графических браузеров поддерживают дополнительные атрибуты упорядоченных списков, включая start, value и type. Собственно, атрибут type есть и у маркированных списков. С его помощью можно изменить вид значка маркировки. В таблице 5.4 приведен список атрибутов нумерованных списков.

Таблица 5.4. Атрибуты элементов нумерованных списков

Тег Тип нумерации
<ol type="A"> Заглавные буквы
<ol type="a"> Строчные буквы
<ol type="I"> Римские цифры (большие)
<ol type="i"> Римские цифры (маленькие)
<ol type="1"> Арабские цифры

С помощью атрибута start можно изменять начальное значение нумерованного списка. Например, чтобы вести счет с 10, напишите: <ol start="10">.

Атрибут value используется для изменения значения конкретного элемента списка Например, можно изменить нумерацию прямо внутри списка:

<ol>
<Li>Пункт 1</Li>
<Li>Пункт 2</Li>
<li value="l"> Пункт 1</Li>
<Li>Пункт 2</Li>
</ol>

Атрибуты маркированного списка

Этот пример тоже подходит только для переходного варианта стандарта ХНТМL. Если вы хотите применять DTD для XHTML Strict, не забудьте, что для изменения внешнего вида любых элементов следует применять таблицы стилей. Тем не менее существуют атрибуты маркированного списка, изменяющие его вид (вид маркеров):

  • заполненный кружок — <ul type="disc">
  • квадратик — <ul type="square">
  • пустой кружок — <ul type="circle">

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

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

Последним типом списков является список определений. Он включает в себя два уровня элементов: термины и их определения. Синтаксически такой список coсто ит из следующих элементов: главного контейнера списка <dl> (definition list), тер мина <dt> (definition term) и определения <dd> (definition) <dt>, по идее, должен помещаться на одной строке, хотя в случае необходимости браузер переносите на следующую строку <dd> - это целый текстовый абзац. Большинство графиче ских браузеров размещают определение под термином с небольшим отступом.

Например:

<dl>
<dt><b>indent</b> <i>n</i></dt>
<dd>3азубрина, зубец, выемка, вырез</dd>
<dt><b>indentation</b> <i>n</i></dt>
<dd>Вырезывание в виде зубцов</dd>
<dt><b>indenture</b> <i>n</i></dt>
<dd>Coглашение,контракт в двух экземплярах; договор
между учеником и хозяином</dd>
</dl>

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

СОВЕТ

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

Рис. 5.11. Типичный список определений

Вы вовсе не обязаны использовать оба типа элементов списка только по той причине, что это возможно. Например, если использовать только <dt>, то он будет чем-то напоминать маркированный список, за исключением того, что почти все браузеры будут отображать его без маркеров.

Например:

<dl>
<dt>Bepxний город - над 60-й улицей</dt>
<dt>Средний город - между 14-й и 60-й улицами</dt>
<dt>Нижний город - под 14-й улицей</dl>

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

Резюме

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

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

Главные новости:

®Abifost, 2006. Копирование информации сайта разрешается только с указанием ссылки на этот сайт. Гостевая книга Контакты, резюме, об авторе
Hosted by uCoz