Простейшее форматирование
Разметка текста. Цвет фона и цвет шрифта. Размер шрифта.
Цель: Научится простейшему форматированию HTML-документа.
Содержание:
Учебная задача 1
Учебная задача 2
Учебная задача 3
Учебная задача 4
Практика
Учебная задача 1: Изучить понятие разметки текста.
Текст на экране хорошо читается, если он структурирован, то есть, разбит на отдельные смысловые части и в нем применяется единый способ оформления отдельных блоков на всем протяжении документа.
Внешний вид web-документа лучше всего продумать заранее. Можно рекомендовать следующий порядок действий:
1. Запишите заголовок для всего документа. Он должен быть самым крупным
(тег <H1>) и выровнен по центру в строке.
2. Разделите документ на главные части (главы). Заголовки глав выравниваются по левому краю и делаются немного меньше заголовка документа (тег <H2>).
3. При необходимости главы разделите на параграфы (заголовки <H3>), параграфы на пункты (заголовки <H4>). Все заголовки документа, кроме его названия, выравниваются по левому краю.
4. Текстовый фрагмент, обозначенный заголовком, разбейте на абзацы (тег <P>). Абзацы должны быть небольшими и каждый содержать законченную мысль.
5. В каждом абзаце используйте одни и те же приемы оформления:
· нормальный размер шрифта;
· полужирный шрифт для выделений слов или коротких фраз;
· курсив для выделения текстовых (обычных) ссылок или цитирования (название книги, газеты, статьи...)
· смещение большой цитаты вправо от левой границы текста.
6. Решите вопрос о цветовой гамме своего документа. Выберите цвет фона и цвет основного текста. Подберите цвета для некоторых специальных выделений и используйте их на протяжении всего документа.
Пример 1:
<!-- *.htm -->
<HTML>
<HEAD>
<TITLE> Заголовок страницы </TITLE>
</HEAD>
<BODY>
<H1> Заголовок для всего документа </H1>
<H2> Заголовок для первой главы </H2>
<H3> Заголовок параграфа </H3>
<P> Абзац </P>
<P> Абзац </P>
<H2> Заголовок для второй главы </H2>
<H3> Заголовок параграфа </H3>
<P> Абзац </P>
<P> Абзац </P>
. . .
</BODY>
</HTML>
К содержанию
Учебная задача 2: Изучить цвет фона и цвет шрифта для всей страницы.
Когда в программе на HTML цвета явно не заданы, браузер использует свои встроенные установки. Если в Internet Explorer в разделе “Цвета” включена опция “Использовать стандартные цвета Windows”, то мы будем видеть чёрные буквы на белом фоне. Если вам хочется, чтобы документ смотрелся строго определенным образом, не полагайтесь на режимы умолчания, а задавайте нужные параметры явно.
Цвет для фона и цвет шрифта для всей страницы можно задать при помощи атрибутов bgcolor и text тега <BODY>, например:
<BODY bgcolor=silver text=black> |
Это означает, что в документе заданы чёрные символы (black) на серебристом фоне (silver). Атрибуты цветов, заданные в теге <BODY> действуют до конца документа. Ключевые слова для основных цветов приводится в Таблице цветов.
К содержанию
Учебная задача 3: Изучить размер и цвет шрифта.
В HTML размер шрифта, которым будет отображаться текст, можно задать в тегах <FONT> с помощью атрибута size. Размеры выражаются как в абсолютных, так и в условных единицах от 1 (8 pt) до 7 (36 pt). Базовый размер равен 3.
Пример 3:
<HTML> <HEAD> <TITLE>Размер шрифта</TITLE> </HEAD> <BODY> <FONT size=7>Размер шрифта равен 7</FONT> <FONT size=3>Размер шрифта равен 3</FONT> <FONT size=+4>Размер шрифта равен 3+4</FONT> </BODY> </HTML> |
При указании относительного размера шрифта атрибут size может принимать значения от -1 до -7 и от +1 до +7
Для описания исходных параметров шрифта предназначен тег <BASEFONT>. Его действие распространяется до следующего тега этого типа. Он имеет атрибуты:
size – задает размер от 1 до 7
color – задает цвет
face – задает имя шрифта или несколько возможных шрифтов, которые браузер использует для отображения текста.
Цвет фона может задаваться только один раз, а цвет шрифта можно менять внутри документа многократно при помощи атрибута color блока <FONT>...</FONT> так, как это сделано в следующем примере.
<BODY bgcolor=silver text=black> ... <FONT color=maroon> ... </FONT> ... </BODY> | Задан цвет шрифта для Всего документа (чёрный) Здесь задан новый цвет шрифта (коричневый) Восстановлен чёрный цвет |
К содержанию
Учебная задача 4: Изучить полужирный и курсивный шрифты.
Чтобы web-страница выглядела более привлекательно, применяется стилевое оформление шрифта. Например, для установки полужирного начертания используется блок <B>…</B>. Курсивное начертание устанавливается с помощью блока <I>…</I>. С помощью блока <U>…</U> можно получить подчеркнутый текст, а в блоке <TT>…</TT> отобразить текст телетайпным шрифтом.
Пример 4:
<HTML> <HEAD> <TITLE>Стили форматирования</TITLE> </HEAD> <BODY> <P><B>Полужирное начертание</B><HR> <P><I>Курсив</I><HR> <P><TT>Моноширинный шрифт или телетайп</TT> <HR> <P> Допускается использование <SUP>верхних индексов</SUP> <HR> <P> Допускается использование <SUB>нижних индексов</SUB> <HR> <P> Можно вывести текст шрифтом <BIG>большего размера</BIG> <HR> <P> Можно вывести текст шрифтом <SMALL>меньшего размера</SMALL> <HR> <P><U>Этот текст подчеркнут</U> <HR> </BODY> </HTML> |
Блок <BIG>...</BIG> увеличивает размер шрифта по отношению к текущему, а блок <SMALL>...</SMALL> – уменьшает его. Эти блоки могут быть вложенными, что позволяет увеличивать (или уменьшать) размер в несколько раз.
К содержанию
Практика
1. Выполни пример 1.
2. Выполни пример 2
3. Выполни пример 3
4. Выполни пример 4
