ХайТекСити
Категории каталога
Игры [48]
Устройства [9]
Софт [23]
Гаджеты [10]
Технологии [19]
Моддинг [4]
Защита [6]
Наука и техника [10]
Мобильные устройства [26]
Система [17]
Связь [13]
HTML [16]
Интернет [30]
SSI [4]
XHTML [3]
Компьютерная периферия [6]
Хранение данных [3]
Корпуса [1]
Система охлаждения [1]
Разное [24]
Компьютерная жизнь [2]
Железо [65]
WEB-программирование [20]
Программирование [2]
2D графика [37]
3D графика [10]
Операционные системы [6]
Форма входа
Поиск
Статистика
Rambler's Top100

page counter
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Пятница, 2024-05-17, 21:11:04
Приветствую Гость Гость | RSS
Главная | Регистрация | Вход
ХайТекСити
Главная » ХайТекСити » HTML

Шаг 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>

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



Источник: http://www.htmlbook.ru
Категория: HTML | Добавил: KroX (2007-03-06) | Автор: Влад Мержевич
Просмотров: 591 | Комментарии: 4 | Рейтинг: 0.0/0 |

Всего комментариев: 2
2 RomhhhhhhGK  
0
Предлагаю партнерку конверт просто супер ру с хорошего трафа 100 к 3
Юзал наверно более 40 платников по подпискам такого конверта не было
Для тех кто на социалках траф добывает, доры под ru
партнерка по подпискам с хорошим конвертом: http://hide.su//1kim
У платника по подпискам много партнерок разных тематик только выбери нужную. Я в ручном режиме по средством майл.ру за полчаса 300 р поднял кто заинтересовался рефам напишу подробнее стукните в асю 91шесть671 почту rassssilkсобакаmail.ru

1 Romhhhhhh  
0
Раскручу вашу услугу в интернет
Только качественное размещение вашего объявления на топовые доски объявлений в интернет, а так же продиижение статьями в каталогах статей
Дополнительно публикация на тематическия доски обявлений http://rassilkaservis.ru

Имя *:
Email *:
Код *:
Copyright OURWORLD © 2024
Сайт управляется системой uCoz