belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

2.2. Разбиение текста на абзацы. Применение заголовков.
Преформатированный текст. Теги <p>, <h1>-<h6>, <pre>

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

Для разбиения текста на абзацы в HTML используется элемент 'Абзац', который формируется парой тегов <p> и </p> (от англ. paragraph). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент 'Абзац'. Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами.

Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков HTML разного уровня, которые формируются парными тегами от <h1> до <h6> (от англ. header) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности.

А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент 'преформатированный текст', который формируется парным тегом <pre> (от англ. preformatted). Браузеры отображают его как блочный элемент.

Рассмотрим наглядный пример использования вышеперечисленных элементов (см. пример 2.3).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Абзац, заголовки, преформатированный текст</title>
</head>
<body>
	<h3>Я &ndash; заголовок третьего уровня.</h3>
	<p>
		Я &ndash; первый абзац.    Мои подряд идущие пробелы 	и переносы строк 
		преобразуются    браузером в     	один пробел.
	</p>
	
	<h3>Я &ndash; заголовок третьего уровня. У меня шрифт поменьше.</h3>
	
<pre>
А я &ndash; преформатированный      текст,     сколько        пробелов ,
символов табуляции 
	и переносов строк поставлено, столько и будет выведено.
Кстати, мой текст обычно выводится браузерами моноширинным шрифтом.
</pre>
	
	<h6>Я &ndash; заголовок шестого уровня. Поэтому и размер шрифта такой маленький.</h6>	
	
</body>
</html>

Пример 2.3. Код страницы, содержащей абзацы, заголовки и преформатированный текст

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

Контрольные вопросы и задания

  1. Какими тегами формируется элемент 'Абзац'?
  2. Для чего используются заголовки? Сколько видов заголовков используется в HTML?
    Каким тегами они формируются?
  3. Что такое преформатированный текст? Каким элементом он представлен в HTML?

Словарь новых английских слов

word [wə:d] – слово.
break [breɪk] – разрыв, прекратить.
opportunity [,ɔpə'tju:niti] – возможность,
удобный случай.
division [di'viʒən] – раздел, разделение.
bold [bəuld] – жирный.
italic [i'tælik] – курсив, наклонный.
underline [ˌʌndəˈlaɪn] – подчеркнуть.
strike out [strʌɪk ˈaut] – вычеркивать.
subscript [ˈsʌbskrɪpt] – нижний индекс.
superscript [ˈsuːpəskrɪpt] – верхний индекс.
emphasis [ˈɛmfəsɪs] – акцент, выделение.
strong [strɔɳ] – сильный, прочный.
variable ['vɛəriəbl] – переменная.
sample ['sa:mpl] – образец.
definition [defi'ni∫ən] – определение.
quote [kwəut] – цитата.
insert [ɪnˈsɜːt] – вставлять.
reversed [rɪˈvɜːst] – перевернутый, обратный.
ordered [ˈɔːdəd] – упорядоченный, нумерованный (список).
unordered [ʌnˈɔːdəd] – маркированный (список).
description [dis'krip∫ən] – описание.
row [rou] – строка, ряд.
column ['kɔləm] – столбец, колонка.
cell [cel] – ячейка, элемент, клетка.
table ['teibl] – таблица, стол.
row span – диапазон строк.
column span – диапазон столбцов.
self [self] – сам.
parent ['pɛərənt] – родитель.
blank [blæɳk] – чистый, пустой, бланк.
anchor ['æɳkə] – якорь, привязка.
link [link] – связь, ссылка.
foot [fut] – нижнее поле, ступня.
header ['hedə] – заголовок, верхний колонтитул.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх