WMZ-PORTAL.RU - удаленная работа на дому в сети интернет, заработок в интернете

Работа в интернете, работа на дому. Интернет обучение.

       

Шаг 6. Работа с текстом

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

Абзацы

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

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

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

Замечание

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

На рис. 6.1 показано, как создать новый абзац в программе Nvu. После добавления первого абзаца, остальные будут формироваться автоматически при нажатии на кнопку <Enter>.

Рис. 6.1. Создание нового абзаца в редакторе Nvu

Рис. 6.1. Создание нового абзаца в редакторе Nvu

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

Пример 6.1. Использование абзацев

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
<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>

Переносы строк

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

Lorem ipsum<br> dolor sit amet...

Замечание

Строка «Lorem ipsum dolor sit amet...» является канонической «рыбой», иными словами это текст, вставляемый на веб-страницу, при отсутствии конечной информации. На этом сайте вы будете частенько встречать указанный текст, впрочем, как и на многих других сайтах.

Для создания переноса строки в Nvu, используйте сочетание клавиш <Shift>+<Enter>. Также можно выбрать из списка «Обычный текст» (рис. 6.1) и установить перенос уже клавишей <Enter>.

Заголовки

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

Синтаксис создания заголовков следующий.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

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

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

Рис. 6.2. Выбор заголовка для текста

Рис. 6.2. Выбор заголовка для текста

В примере 6.2 показано одновременное применение различных заголовков.

Пример 6.2. Использование заголовков

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
content="text/html; charset=Windows-1251" http-equiv="content-type">
<title>Применение заголовков</title>
</head>
<body>
<h1>Ускорение работы сайта</h1>
<h2>Часть 1</h2>
<p>Ускорение загрузки и сокращение кода веб-страниц.</p>
<h2>Часть 2</h2>
<p>Сжатие графических файлов при сохранении их качества.</p>
<h2>Часть 3</h2>
<p>Ускорение запуска и выполнения скриптов на языке JavaScript.</p>
</body>
</html>

Полужирное начертание

Насыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и полужирное начертание. Из-за этого термины «полужирный» и «жирный» слились воедино, поэтому правильно применять то или иное слово для обозначения одного и того же начертания. Синтаксис следующий.

<b>Жирное начертание шрифта</b>

Для создания полужирного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<B>.

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

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

<i>Курсивное начертание шрифта</i>

Для создания курсивного начертания в Nvu, необходимо предварительно выделить текст и нажать на кнопку на панели инструментов. Аналогично можно воспользоваться сочетанием клавиш <Ctrl>+<I>.

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

Воспроизводит текст как верхний индекс. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера. Синтаксис следующий.

<sup>Верхний индекс</sup>

Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Верхний индекс, как показано на рис. 6.3.

Рис. 6.3. Выбор стиля текста через меню Nvu

Рис. 6.3. Выбор стиля текста через меню Nvu

Через это же меню можно установить и другие виды начертания текста.

Нижний индекс

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

<sub>Нижний индекс</sub>

Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Нижний индекс.

Copyright © Влад Мержевич
www.htmlbook.ru



HTML по шагам

Любой может сделать сайт.
Шаг 1. Основные понятия
Шаг 2. Создание HTML-документа
Шаг 3. Особенности HTML
Шаг 4. Структура HTML-кода
Шаг 5. Теги HTML
Шаг 6. Работа с текстом
Шаг 7. Ссылки
Шаг 8. Якоря
Шаг 9. Изображения
Шаг 10. Списки
Шаг 11. Таблицы

CSS по шагам

Шаг 1. Что такое CSS
Шаг 2. Подключение CSS
Шаг 3. Типы носителей
Шаг 4. Базовый синтаксис
Шаг 5. Селекторы тегов
Шаг 6. Классы
Шаг 7. Идентификаторы
Шаг 8. Комментарии
Шаг 9. Контекстные селекторы
Шаг 10. Соседние селекторы
Шаг 11. Дочерние селекторы
Шаг 12. Селекторы атрибутов
Шаг 13. Универсальный селектор
Шаг 14. Группирование
Шаг 15. Наследование
Шаг 16. Псевдоклассы
Шаг 17. Псевдоэлементы
Шаг 18. Правила создания стиля