Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 9


Самоучитель по HTML и CSS

7. Текст (продолжение)

Выравнивание текста

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

Для установки выравнивания текста обычно используется тег параграфа <P> с параметром align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <DIV> с аналогичным параметром align. Он может принимать следующие значения:

left - выравнивание по левому краю, задается по умолчанию;
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине (одновременно по правому и левому краю). Этот аргумент работает только для текста, длина которого более, чем одна строка.

Также аргумент align можно применять как для текста, так и для заголовков (листинг 7.4).

Листинг 7.4. Способы выравнивания текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание текста</title>
</head>
<body>
<h1 align="center">Как поймать льва?</h1>
<h2 align="right">Метод перебора</h2>
<p align="justify">Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p>
<h2 align="right">Метод дихотомии</h2>
<p align="justify">Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p>
</body>
</html>

Результат данного примера показан на рис. 7.4.

Рис. 7.4

Рис. 7.4. Вид текста при его выравнивании

Жирное начертание

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

<b>Жирное начертание шрифта</b>
<strong>Сильное выделение текста</strong>

Курсивное начертание

Курсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Курсив для текста определяют два тега: <I> и <EM>.

<i>Курсивное начертание шрифта</i>
<em>Выделение текста</em>

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

В листинге 7.5 показано использование тегов <EM> и <STRONG> для оформления текстов.

Листинг 7.5. Теги EM и STRONG

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Оформление текста</title>
</head>
<body>
<p><strong>А где же печенье и самогоноваренье?!</strong> - <em>воскликнул Мальчиш-плохиш</em>.</p>
</body>
</html>

Результат данного примера показан на рис. 7.5.

Рис. 7.5

Рис. 7.5. Курсивное и жирное начертание текста

Верхний и нижний индекс

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

В листинге 7.6 показано, где применяется подобный текст

Листинг 7.6. Использование нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нижний индекс</title>
</head>
<body>
<b>Формула серной кислоты:</b> <i>H<sub>2</sub>SO<sub>4</sub></i>
</body>
</html>

Результат данного примера показан на рис. 7.6.

Рис. 7.6

Рис. 7.6. Отображение текста в виде нижнего регистра

Спецсимволы

Для отображения символов, которых нет на клавиатуре применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.

 

Имя Код Вид Описание
&nbsp; &#160;   неразрывный пробел
&pound; &#163; £ фунт стерлингов
&euro; &#8364; € знак евро
&para; &#182; символ параграфа
&sect; &#167; § параграф
&copy; &#169; © знак copyright
&reg; &#174; ® знак зарегистрированной торговой марки
&trade; &#8482; ™ знак торговой марки
&deg; &#176; ° градус
&plusmn; &#177; ± плюс-минус
&frac14; &#188; ¼ дробь - одна четверть
&frac12; &#189; ½ дробь - одна вторая
&frac34; &#190; ¾ дробь - три четверти
&times; &#215; × знак умножения
&divide; &#247; ÷ знак деления
&fnof; &#402; ƒ знак функции
Греческие буквы
&Alpha; &#913; Α греческая заглавная буква альфа
&Beta; &#914; Β греческая заглавная буква бета
&Gamma; &#915; Γ греческая заглавная буква гамма
&Delta; &#916; Δ греческая заглавная буква дельта
&Epsilon; &#917; Ε греческая заглавная буква эпсилон
&Zeta; &#918; Ζ греческая заглавная буква дзета
&Eta; &#919; Η греческая заглавная буква эта
&Theta; &#920; Θ греческая заглавная буква тета
&Iota; &#921; Ι греческая заглавная буква иота
&Kappa; &#922; Κ греческая заглавная буква каппа
&Lambda; &#923; Λ греческая заглавная буква лямбда
&Mu; &#924; Μ греческая заглавная буква мю
&Nu; &#925; Ν греческая заглавная буква ню
&Xi; &#926; Ξ греческая заглавная буква кси
&Omicron; &#927; Ο греческая заглавная буква омикрон
&Pi; &#928; Π греческая заглавная буква пи
&Rho; &#929; Ρ греческая заглавная буква ро
&Sigma; &#931; Σ греческая заглавная буква сигма
&Tau; &#932; Τ греческая заглавная буква тау
&Upsilon; &#933; Υ греческая заглавная буква ипсилон
&Phi; &#934; Φ греческая заглавная буква фи
&Chi; &#935; Χ греческая заглавная буква хи
&Psi; &#936; Ψ греческая заглавная буква пси
&Omega; &#937; Ω греческая заглавная буква омега
&alpha; &#945; α греческая строчная буква альфа
&beta; &#946; β греческая строчная буква бета
&gamma; &#947; γ греческая строчная буква гамма
&delta; &#948; δ греческая строчная буква дельта
&epsilon; &#949; ε греческая строчная буква эпсилон
&zeta; &#950; ζ греческая строчная буква дзета
&eta; &#951; η греческая строчная буква эта
&theta; &#952; θ греческая строчная буква тета
&iota; &#953; ι греческая строчная буква иота
&kappa; &#954; κ греческая строчная буква каппа
&lambda; &#955; λ греческая строчная буква лямбда
&mu; &#956; μ греческая строчная буква мю
&nu; &#957; ν греческая строчная буква ню
&xi; &#958; ξ греческая строчная буква кси
&omicron; &#959; ο греческая строчная буква омикрон
&pi; &#960; π греческая строчная буква пи
&rho; &#961; ρ греческая строчная буква ро
&sigmaf; &#962; ς греческая строчная буква сигма (final)
&sigma; &#963; σ греческая строчная буква сигма
&tau; &#964; τ греческая строчная буква тау
&upsilon; &#965; υ греческая строчная буква ипсилон
&phi; &#966; φ греческая строчная буква фи
&chi; &#967; χ греческая строчная буква хи
&psi; &#968; ψ греческая строчная буква пси
&omega; &#969; ω греческая строчная буква омега
Стрелки
&larr; &#8592; ← стрелка влево
&uarr; &#8593; ↑ стрелка вверх
&rarr; &#8594; → стрелка вправо
&darr; &#8595; ↓ стрелка вниз
&harr; &#8596; ↔ стрелка влево-вправо
Прочие символы
&spades; &#9824; ♠ знак масти "пики"
&clubs; &#9827; ♣ знак масти "трефы"
&hearts; &#9829; ♥ знак масти "червы"
&diams; &#9830; ♦ знак масти "бубны"
&quot; &#34; " двойная кавычка
&amp; &#38; & амперсанд
&lt; &#60; < знак "меньше"
&gt; &#62; > знак "больше"
Знаки пунктуации
&hellip; &#8230; … многоточие ...
&prime; &#8242; ′ одиночный штрих - минуты и футы
&Prime; &#8243; ″ двойной штрих - секунды и дюймы
Общая пунктуация
&ndash; &#8211; – тире
&mdash; &#8212; — длинное тире
&lsquo; &#8216; ‘ левая одиночная кавычка
&rsquo; &#8217; ’ правая одиночная кавычка
&sbquo; &#8218; ‚ нижняя одиночная кавычка
&ldquo; &#8220; “ левая двойная кавычка
&rdquo; &#8221; ” правая двойная кавычка
&bdquo; &#8222; „ нижняя двойная кавычка
&laquo; &#171; « левая двойная угловая скобка
&raquo; &#187; » правая двойная угловая скобка

Вопросы для проверки

1. Что определяет параметр align="justify" тега <DIV>?

  1. Выравнивание текста по центру
  2. Выравнивание текста по правому краю
  3. Выравнивание текста по ширине
  4. Выравнивание текста по левому краю
  5. Выравнивание всех строк

2. Что делает тег <STRONG>?

  1. Устанавливает курсивный текст
  2. Изменяет цвет текста
  3. Помечает текст как важный
  4. Отображает шрифт в виде верхнего индекса
  5. Делает текст неразрывным

3. Какой тег смещает текст вверх относительно базовой линии?

  1. <SUB>
  2. <SUP>
  3. <DIV>
  4. <P>
  5. <EM>

4. Вы поместили текст внутрь контейнера <I>. Какая характеристика текста изменится?

  1. Цвет
  2. Насыщенность
  3. Контраст
  4. Наклон
  5. Подчеркивание

Задание

1. Напишите код HTML, чтобы получить результат, приведенный на рис. 7.7. Для добавления греческой буквы лямбда используйте специальный символ &lambda;

Рис. 7.7

Рис. 7.7

2. Исправьте ошибки в приведенном коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<body>
<h11 align="justify">Галион</h1>
<p align="justify">
<strong>Галион</b> - большое трехмачтовое судно особо прочной постройки, снабженное тяжелой артиллерией.</br>
Эти суда служили для перевозки товаров и драгоценных металлов из испанских и португальских колоний в Европу.</p>
<hr>
<blockquote>Флагманский корабль был мощным <i>галионом</i>, вооруженным сорока восьмью
большими пушками и восьмью малыми.</blockquote>
</hr>
</p>
</body>
</html>

Рецепты CSS

Между заголовком и основным текстом слишком большой отступ, как его уменьшить?

К абзацу (тег <P>) и заголовку (тег <H1>) автоматически добавляется верхний и нижний отступы, которые в сумме и дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо явно добавить параметр margin-bottom к селектору H1. Причем можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Расстояние между строками</title>
<style type="text/css">
H1 {
 margin-bottom: -15px; /* Отрицательный отступ между заголовком и текстом */
}
</style>
</head>
<body>
<h1>Апплет</h1>
<p>Программа, которая выполняется с составе браузера или под управлением специальной программы для ее просмотра. Апплет, как правило, пишется на языке Java, поэтому часто можно встретить сочетание &laquo;Java апплет&raquo;.</p>
</body>
</html>

Результат примера показан ниже.

Рис. 1

Рис. 1. Уменьшенное расстояние между заголовком и текстом под ним

В данном примере для селектора H1 устанавливается отрицательное значение нижнего отступа, за счет этого на 15 пикселов уменьшается расстояние между заголовком и нижележащим абзацем.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное