Настала пора освоить нехитрые приёмы, позволяющие оформлять и форматировать тексты. Сюда входит вывод текста на экран разными стилями, шрифтами, размерами и цветами, а также форматирование текста с помощью абзацев, блоков и списков.
Для удобства разобъём материалы этой главы на несколько частей.
Часть 1. Простые стили
Рис.1. Пример 1
Текст жирный
Текст курсивный
Текст подчёркнутый
Рис.2. HTML-код Примера 1
Текст <strong>жирный</strong>
<br>
<br>
Текст <em>курсивный</em>
<br>
<br>
Текст <u>подчёркнутый</u>
Часто вместо тегов <em> </em> используют <i> </i>, а вместо <strong> </strong> используют <b> </b>.
Для большинства браузеров никакой разницы нет, то есть можно писать и так, и так.
[наверх]
Часть 2. Шрифты, размеры и цвета
Рис.3. Пример 2
Эта строка написана шрифтом "Times New Roman"
Эта строка написана шрифтом "Verdana"
Эта строка написана шрифтом "Аrial"
Эта строка написана шрифтом "Courier New"
Рис.4. HTML-код Примера 2
<font color="darkblue" face="Times New Roman, Times, serif" size="3">Эта строка написана шрифтом "Times New Roman"</font>
<br>
<br>
<font color="darkgreen" face="Verdana, Arial, Helvetica, sans-serif" size="3">Эта строка написана шрифтом "Verdana"</font>
<br>
<br>
<font color="darkred" face="Arial, Helvetica, sans-serif" size="3">Эта строка написана шрифтом "Аrial"</font>
<br>
<br>
<font color="darkorange" face="Courier New, Courier, mono" size="3">Эта строка написана шрифтом "Courier New"</font>
Как видно из примера, чтобы определить для строки цвет, шрифт и размер, нужно заключить её между парой тегов <font> </font> с параметрами.
Основные параметры тега <FONT>
color - задаёт цвет текста. Например: color="darkblue" или color="#00008B"
face - задаёт имя шрифта или семейство шрифтов. Например: face="Times New Roman" или face="Times New Roman, Times, serif"
Семейство шрифтов - это родственные шрифты. Принято указывать не один шрифт, а перечислять через запятую именно семейство шрифтов. Если браузер не найдёт первый шрифт из указанного семейства, он обращается ко второму по списку и так далее. Вот самые популярные семейства шрифтов:
1) Times New Roman, Times, serif
2) Verdana, Arial, Helvetica, sans-serif
3) Arial, Helvetica, sans-serif
4) Courier New, Courier, mono
size - задаёт размер шрифта в условных единицах. Значения: (1..7) - абсолютный размер; (+1..+7) - увеличить в n раз от текущего; (-1..-7) - уменьшить в n раз от текущего. Например: size="3" или size="+1" или size="-1"
style - задаёт полный стиль оформления одной строкой.
Например: style="font-family:'Times New Roman', Times, serif; font-size:16pх; color:#000000;".
Таким образом, шрифт, размер и цвет текста можно задавать через параметр style. И тогда, разумеется, использовать параметры color, face, size уже не нужно.
Внутри параметра style можно перечислять через точку с запятой большое количество значений. Обрати внимание, что для указания семейства шрифтов здесь используется уже другое слово (font-family), а размер шрифта задан не в условных единицах, а в пикселях (16px). Вообще, параметр style заслуживает того, чтобы сказать о нём отдельно.
Основные значения параметра style
font-family - задаёт имя шрифта или семейство шрифтов. Например: font-family:'Times New Roman', Times, serif;
font-size - задаёт размер шрифта в пикселях, точках, условных единицах или процентах. Например: font-size:16px; или font-size:12pt; или font-size:+1; или font-size:120%;
font-style - задаёт стиль шрифта. Значения: normal - обычный (так по умолчанию); italic - курсивный. Например: font-style:italic;
font-weight - задаёт толщину шрифта. Значения: normal - обычный (так по умолчанию); bold - жирный. Например: font-weight:bold;
color - задаёт цвет текста. Например: color:darkblue; или color:#00008B;
background-color - задаёт цвет фона. Например: background-color:red; или background-color:#FF0000;
text-decoration - задаёт оформление текста. Значения: none - обычный (так по умолчанию); underline - подчёркнутый; line-through - перечёркнутый; box - текст в рамке. Например: text-decoration:underline;
text-align - задаёт выравнивание текста по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: text-align:justify;
vertical-align - задаёт выравнивание текста по вертикали. Значения: top - по верхнему краю; middle - по середине; bottom - по нижнему краю. Например: vertical-align:top;
text-indent - задаёт отступ текстового блока в пикселях (px), точках (pt), процентах (%) или в единицах высоты шрифта (em). Например: text-indent:5%; или text-indent:3em;
letter-spacing - задаёт расстояние между буквами в пикселях (px), точках (pt) или в единицах высоты шрифта (em). Например: letter-spacing:5px; или letter-spacing:0.5em;
word-spacing - задаёт расстояние между словами в строке в пикселях (px), точках (pt) или в единицах высоты шрифта (em). Например: word-spacing:10px; или word-spacing:5em;
Как видишь, параметр style даёт большие возможности для оформления текста. Более того, этот параметр по истине универсален, то есть его можно использовать не только внутри тега <FONT>, но и внутри многих тегов языка HTML, например, внутри тегов табличной разметки <TABLE>, <TR>, <TD> и таким образом оформлять текст внутри таблиц.
Например, <table style="font-family:Verdana; font-size:15pх; color:#000080; font-weight:bold;">
Параметр style используется и внутри тегов разметки текста с помощью абзацев и блоков, о которых мы поговорим ниже.
Но это еще не всё. Значения параметра style можно записать в виде отдельной Таблицы Стилей, которая может включать в себя абсолютно все стили оформления для вебсайта. Поэтому я настоятельно советую тебе взять в привычку оформлять текстовые строки с помощью параметра style. Тогда ты с лёгкостью научишься использовать таблицы стилей, о которых мы будем говорить в следующей главе нашего курса.
Приведу пример оформления текста с помощью параметра style:
Рис.5. Пример 3
Ликбез .Инфо
Даёшь всеобщий ликбез!
Рис.6. HTML-код Примера 3
<font style="font-family:'Times New Roman'; font-size:46px; color:#0088AA;">Ликбез</font>
<font style="font-family:'Times New Roman'; font-size:44px; color:#FFDDFF; font-weight:bold;">.Инфо</font>
<br>
<br>
<font style="font-family:Verdana, Helvetica, sans-serif; color:#FFFFFF; background-color:#FF0000; font-size:18px; font-weight:bold;"> Даёшь всеобщий ликбез! </font>
[наверх]
Часть 3. Абзацы и блоки
Если текст заключить между тегами <p> </p>, то он будет выглядеть, как абзац, то есть, как блок текста, окружённый сверху и снизу пустыми строками. Так разбивать текст на абзацы гораздо удобнее, чем всякий раз шлёпать дважды тег перевода строки <br>.
Рис.7. HTML-исполнение абзацев
<p>Текст первого абзаца.</p>
<p>Текст второго абзаца.</p>
<p>И так далее...</p>
Абзац может иметь свои параметры:
Основные параметры тега <P>
align - задаёт выравнивание текста по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: align="justify"
style - задаёт стиль оформления текста внутри абзаца.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".
class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"
Пара тегов <p> </p> фактически выделяепт чать текста в обособленный блок (абзац), которому можно задать собственный стиль оформления, то есть указать для текста внутри этого блока свой шрифт, цвет, размер и т.д.
Но существует ещё два способа разбивать текст страницы на блоки. Речь идёт о тегах <span> </span> и <div> </div>. Правда, в отличие от тегов абзаца, они не окружают блок пустыми строками. Для чего же они нужны?
Теги <span> </span> часто используются для оформления каких-либо небольших кусков текста внутри абзаца или даже внутри отдельной строки.
Например, эта страница учебного курса, которую ты сейчас читаешь, представляет собой бесконечное чередование слов и предложений, написанных разыми шрифтами и разными цветами. Мой основной текст чёрного цвета постоянно разбавляется словами и предложениями синего цвета, серого цвета или иногда красного цвета. Это возможно благодаря тегам <span> </span>, которые разбивают строки и абзацы на условные блоки, для каждого из которых задаётся своё оформление.
Рис.8. Использование тега <span>
<p>
Мой основной текст чёрного цвета постоянно разбавляется словами и предложениями <span style="color:blue;">синего</span> цвета, <span style="color:gray;">серого</span> цвета или иногда <span style="color:red;">красного</span> цвета.
</p>
Основные параметры тега <SPAN>
style - задаёт стиль оформления текста внутри блока.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".
class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"
Для разбиения страницы на большие и сложные куски (блоки) используют пару тегов <div> </div>.
Внутри этой пары может содержаться большое количество абзацев <p> </p>, маленьких блоков <span> </span>, а также множество других тегов языка HTML, отображающих различные объекты вебстраницы. Напрмер, на этой же самой странице моего учебного курса все рисунки и все иллюстрации представляют собой сегменты страницы, выделенные с помощью тегов <div> </div>.
Основные параметры тега <DIV>
align - задаёт выравнивание текста в блоке по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: align="justify"
style - задаёт стиль оформления текста внутри блока.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".
class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"
Рис.9. Использование тега <div>
<div style="font-family:'Times New Roman', Times, serif; font-size:16px;">
<p>
Мой основной текст чёрного цвета постоянно разбавляется словами и предложениями <span style="color:blue;">синего</span> цвета, <span style="color:gray;">серого</span> цвета или иногда <span style="color:red;">красного</span> цвета.
</p>
</div>
[наверх]
Часть 4. Списки
Теги списков превращают текст в последовательность строк. Эта последовательность может быть помечена точками (маркированный список), цифрами (нумерованный список) или словами-определениями (список определений).
Сразу скажу, что лично я не люблю использовать стандартные списки, а предпочитаю создавать последовательность строк вручную, используя обыкновенные теги перевода строк и теги абзацев. Так удобнее задавать каждой строке нужное оформление. Хотя так называемый "список определений" мне нравится, и именно его я использовал для того, чтобы нарисовать Содержание глав этого учебного курса.
Рис.10. Маркированный список <UL>
Содержание:
- Первая глава
- Вторая глава
- Третья глава
Рис.11. HTML-код маркированного списка <UL>
Содержание:
<ul>
<li>Первая глава</li>
<li>Вторая глава</li>
<li>Третья глава</li>
</ul>
Рис.12. Нумерованный список <OL>
Содержание:
- Первая глава
- Вторая глава
- Третья глава
Рис.13. HTML-код нумерованного списка <OL>
Содержание:
<ol>
<li>Первая глава</li>
<li>Вторая глава</li>
<li>Третья глава</li>
</ol>
Рис.14. Список определений <DL>
- I. ПРИДУМЫВАЕМ ПРОЕКТ
- 1. Своё дело в жизни
- 2. Образ будущего
- 3. Стратегия проекта
- II. СОЗДАЁМ ЭЛЕМЕНТАРНЫЙ САЙТ
- 1. Ликбез об интернете
- 2. Ликбез о вэбсайтах
- 3. Регистрируем домен
Рис.15. HTML-код списка определений <DL>
<dl>
<dt>I. ПРИДУМЫВАЕМ ПРОЕКТ</dt>
<dd>1. Своё дело в жизни</dd>
<dd>2. Образ будущего</dd>
<dd>3. Стратегия проекта</dd>
<br>
<br>
<dt>II. СОЗДАЁМ ЭЛЕМЕНТАРНЫЙ САЙТ</dt>
<dd>1. Ликбез об интернете</dd>
<dd>2. Ликбез о вэбсайтах</dd>
<dd>3. Регистрируем домен</dd>
</dl>
Списки можно вкладывать друг в друга, то есть делать вложенные списки. Здесь нет ничего сложного.
И конечно, внутри каждого тега любого списка может присутствовать уже известный нам вездесущий параметр style="", задающий оформление содержимого списка.
Основные параметры тегов <UL>, <OL>, <LI>, <DL>, <DT>, <DD>
style - задаёт стиль оформления текста.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".
class - подключает указанный стиль оформления из таблицы стилей css. Например: class="mytext1"
[наверх]
Часть 5. Всякое разное
С помощью специальных тегов <H1></H1>, <H2></H2>, ... , <H6></H6> можно создавать заголовки разной величины.
Рис.16. Примеры заголовков
Заголовок размера 1
Заголовок размера 2
Заголовок размера 3
Заголовок размера 4
Заголовок размера 5
Заголовок размера 6
Рис.17. HTML-код заголовков
<h1>Заголовок размера 1</h1>
<h2>Заголовок размера 2</h2>
<h3>Заголовок размера 3</h3>
<h4>Заголовок размера 4</h4>
<h5>Заголовок размера 5</h5>
<h6>Заголовок размера 6</h6>
Основные параметры тегов <H1> ... <H6>
align - задаёт выравнивание заголовка по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру; justify - по ширине. Например: align="justify"
style - задаёт стиль оформления текста.
Например: style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#0066AA;".
class - подключает указанный стиль оформления из таблицы стилей css. Например: class="myhead"
С помощью специального тега <HR> можно рисовать горизонтальные линии разной длины, толщины и разного цвета. Этот тег не требует себе закрывающей пары.
Рис.18. Рисунок линии
Рис.19. HTML-код линии
<hr align="center" color="darkorange" size="3" width="70%" noshade>
Основные параметры тега <HR>
align - задаёт выравнивание линии по горизонтали. Значения: left - по левому краю (так по умолчанию); right - по правому краю; center - по центру. Например: align="center"
color - задаёт цвет линии. Например: color="darkorange" или color="#FF8C00"
noshade - отменяет рельефность линии. Указывается просто noshade
size - задаёт толщину линии в пикселах. Например: size="3"
width - задаёт длину линии в пикселах или в процентах. Например: width="70%"
style - задаёт стиль оформления линии. Например: style="size:3px; color:#0066AA;".
class - подключает указанный стиль оформления из таблицы стилей css. Например: class="myline"
Мне осталось только перечислить некоторые, так называемые, специальные символы языка HTML. К ним относятся, например, знак "копирайта" (©) или вот такая закорючка (§), обозначающая "параграф".
А часто просто невозможно вывести некоторые знаки на экран "напрямую". Например, чтобы вывести значок "меньше" (<), нужно использовать спецсимвол, а иначе браузер примет этот значок за начало какого-либо служебного тега.
Некоторые специальные символы языка HTML
| Код спецсимвола: |
Его смысл и изображение: |
| © |
Копирайт © |
| < |
Меньше < |
| > |
Больше > |
| " |
Кавычка " |
| & |
Амперсанд & |
| § |
Параграф § |
| |
Пробел |
Уф! Это было всё самое существенное по работе с текстом. Подробности и детали ищи в толстых справочниках.
Если есть вопросы, то, как говорится: "Пиши письма мелким почерком!" :)
| 
