Отправляет 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 - 8


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

Добрый день.

Вначале, как обычно, ответы на вопросы предыдущего выпуска.

1. 150
Вначале вычисляется ширина таблицы А, она равна 60% от 500 пикселов и составляет 300 пикселов. Ширина таблицы Б равна 50% от этого значения, т. е. половина — 150 пикселов.

2. #ffb300
Рассуждаем следующим образом. Оранжевый цвет на цветовом круге располагается между красным (#ff0000) и желтым цветом (#ffff00). И в том и другом случае синяя компонента равна нулю, а этому условию удовлетворяет только один цвет.

3. 34.5%
4. #00ff99
5. ../../uranus/

7. Текст

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

Особенности текста в HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.

Любое количество пробелов идущих подряд, в браузере отображается как один

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

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором. </p>
<p>Измеряй микрометром.    Отмечай мелом.    Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>

Исключением из этого правила является тег <PRE>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.

Нет расстановки переносов в тексте

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

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

Текст занимает ширину окна браузера

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

Абзацы

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

<p>Абзац 1</p>
<p>Абзац 2</p>

Каждый абзац начинается с тега <P> и должен иметь необязательный закрывающий тег </P>.

Замечание

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

В листинге 7.1 показано применение абзацев для создания отступов между строк.

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

<!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>В одних садах цветёт миндаль, в других метёт метель. </p>
 <p>В одних краях ещё февраль, в других - уже апрель.</p>
 <p>Проходит время, вечный счёт: год за год, век за век...</p>
 <p>Во всём - его неспешный ход, его кромешный бег.</p>
 <p>В году на радость и печаль по двадцать пять недель.</p>
 <p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p>
 <p>По двадцать пять недель в туман уходит счёт векам.</p>
 <p>Летит мой звонкий балаган куда-то к облакам.</p>
 <p><i>М. Щербаков</i></p>
</body>
</html>

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

Рис. 7.1

Рис. 7.1. Отступы на веб-странице при использовании абзацев

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

Так, текст листинга 7.1 с учетом переноса строк будет преобразован следующим образом (листинг 7.2).

Листинг 7.2. Тег BR

<!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>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других - уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век...<br>
Во всём - его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять - апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p><i>М. Щербаков</i></p>
</body>
</html>

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

Рис. 7.2

Рис. 7.2. Вид текста с учетом переносов

Заголовки

Заголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его <вес>, тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: <вот это надо читать обязательно>. Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<H1>), а самым нижним - уровень 6 (<H6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

Синтаксис создания заголовков показан в листинге 7.3.

Листинг 7.3. Добавление заголовков

<!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>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>

Результат данного примера показан на рис. 7.3. Содержимое тега <H1> отображается самым крупным шрифтом жирного начертания, а <H6> - самым мелким.

Рис. 7.3

Рис. 7.3. Вид заголовков на веб-странице

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

Статьи по теме

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

Рецепты CSS

Как добавить цвет фона к заголовку текста?

Для изменения цвета фона под текстом используется универсальный стилевой атрибут background, который следует добавить к селектору H1,..., H6.

Пример

<!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 {
 background: #D9FFAD /* Цвет фона под заголовком */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

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

Цвет фона под заголовком текста

Цвет фона под заголовком текста

Учтите, что на размер цветного прямоугольника влияет не только размер текста, но и отступы вокруг него. Поэтому регулируйте размер фона за счет параметров margin и padding, добавляя их опять же к селектору 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 {
 background: #D9FFAD; /* Цвет фона под заголовком */
 color: green; /* Цвет текста */
 padding: 2px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

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