Шаг 6. Работа с текстомДля изменения вида текста существует достаточно большое количество различных тегов. Это и немудрено, ведь текст самый популярный вид информации. Абзацы Как правило, блоки текста разделяют между собой абзацами (параграфами). По
умолчанию между параграфами существует небольшой вертикальный отступ, называемый
отбивкой. <p>Абзац 1</p> Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>. Замечание В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка. На рис. 6.1 показано, как создать новый абзац в программе Nvu. После добавления первого абзаца, остальные будут формироваться автоматически при нажатии на кнопку <Enter>.
Рис. 6.1. Создание нового абзаца в редакторе Nvu В примере 6.1 показано применение абзацев для создания отступов между строк. Пример 6.1. Использование абзацев <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Переносы строкВ отличие от абзаца, тег переноса строки <BR> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте. Синтаксис следующий. Lorem ipsum<br> dolor sit amet... Замечание Строка «Lorem ipsum dolor sit amet...» является канонической «рыбой», иными словами это текст, вставляемый на веб-страницу, при отсутствии конечной информации. На этом сайте вы будете частенько встречать указанный текст, впрочем, как и на многих других сайтах. Для создания переноса строки в Nvu, используйте сочетание клавиш <Shift>+<Enter>. Также можно выбрать из списка «Обычный текст» (рис. 6.1) и установить перенос уже клавишей <Enter>. ЗаголовкиЗаголовки выполняют важную функцию на веб-странице. Во-первых, они показывают важность раздела, к которому относятся. Чем больше заголовок и его «вес», тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно». Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<H1>), а самым нижним — уровень 6 (<H6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам. Синтаксис создания заголовков следующий. <h1>Заголовок первого уровня</h1> Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня. На рис. 6.2 показано, как установить требуемый заголовок для текста в редакторе Nvu.
Рис. 6.2. Выбор заголовка для текста В примере 6.2 показано одновременное применение различных заголовков. Пример 6.2. Использование заголовков <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Полужирное начертаниеНасыщенностью называют увеличение толщины линий шрифта и соответственно контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и полужирное начертание. Из-за этого термины «полужирный» и «жирный» слились воедино, поэтому правильно применять то или иное слово для обозначения одного и того же начертания. Синтаксис следующий. <b>Жирное начертание шрифта</b> Для создания полужирного начертания в Nvu, необходимо предварительно выделить
текст и нажать на кнопку Курсивное начертаниеКурсивный шрифт представляет собой не просто наклон отдельных символов, для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Синтаксис следующий. <i>Курсивное начертание шрифта</i> Для создания курсивного начертания в Nvu, необходимо предварительно выделить
текст и нажать на кнопку Верхний индексВоспроизводит текст как верхний индекс. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера. Синтаксис следующий. <sup>Верхний индекс</sup> Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Верхний индекс, как показано на рис. 6.3.
Рис. 6.3. Выбор стиля текста через меню Nvu Через это же меню можно установить и другие виды начертания текста. Нижний индексОтображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера. Синтаксис следующий. <sub>Нижний индекс</sub> Для изменения вида текста, выберите пункт меню Формат > Стиль текста > Нижний индекс. Copyright © Влад Мержевич |