Язык HTML
Работа с текстом
Для изменения вида текста существует достаточно большое количество различных тегов. Это и немудрено, ведь текст самый популярный вид информации. left - на странице слева; right - на странице справа; center - по центру страницы; justify - по ширине страницы.
Для начала повторим материал предыдущего занятия.
Теги <h1> - <h6> выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).
Эти теги могут использоваться с параметром горизонтального выравнивания align.
Возможные значения этого параметра:
Практическое задание:
страницу-считалку отформатировать следующим образом:
Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой.
Синтаксис создания абзацев следующий:
<p> Абзац 1 </p>
<p> Абзац 2 </p>
В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.
У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа. left - выровнять текст по левому краю страницы; right - выровнять текст по правому краю страницы; center - выровнять текст по центру страницы; justify - выровнять текст по ширине страницы.
Возможные значения этого параметра:
<h3>Используется тэг параграфа P</h3>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p> Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>
Практическое задание:
создать HTML-документ с текстом в <body> (подобрать цвет текста и фона страницы):
Браузер автоматически добавляет пустую строку до и после параграфа.
Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align.
Практическое задание:
скопировать тексты с параграфами <p> и заменить тэги параграфов на <div>. Выяснить разницу в работе тэгов <p> и <div>.
Вывод. Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста параграфа. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. Приведенные в практическом задании строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.
Исключением из этого правила является тег <pre>, внутри которого любое число пробелов отображается именно так, как оно указано в коде.
Практическое задание:
скопировать тексты еще раз, используя <pre>. Сравнить разные типы параграфов.
Часто внутри абзаца или блока текста необходим перенос строки. Его можно задать с помощью непарного тэга <br>.
А теперь добавим немного красоты на наши страницы.
В редакторе Paint создадим рисунок размером 100х100 пикселов, линиями и кистью, голубым цветом нарисуем снежинки, сохраним в формате .png.
В тэге <body> зададим параметр background=”имя файла.png”. Получаем фоновую графику.
Практическое задание:
создать HTML-документ с текстом песни «В лесу родилась елочка». Фон – снег. Куплеты – параграфы с выравниванием «ступенькой» (слева, центр, справа).
| ← Язык HTML. Заголовки. Атрибуты цвета тэга body. | Язык HTML. Типы начертания шрифта. Расшифровка сокращений. Линии. → |