Написание текста: работа со шрифтами.

Теги абзаца и перевода строки.

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

<P> - новый абзац.
<BR> - переход на новую строку.
Тег перевода строки отделяет строку от последующего текста или графики.
Тег абзаца тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац.
Оба тега являются одноэлементными.
 

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED>
<P>Рад приветствовать Вас на своей домашней страничке
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени Микки.
</BODY>
</HTML>
Можно посмотреть, что получилось
Задание: расставьте в уже написанном тексте своей страницы теги <P> и <BR>.
 

Теги выделения фрагментов текста.

Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов.

I пишет текст курсивом
B - полужирный шрифт
U - подчеркнутый шрифт
SUP - верхний индекс
SUB - нижний индекс

Возможно использование комбинированных выделений:

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED>
<P><B><I>Рад приветствовать Вас на своей домашней страничке</I></B>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени Микки.
</BODY>
</HTML>
 
 Можно посмотреть, что получилось

Запомните правило записи комбинированных тегов:

<Тег1><Тег2>...</Тег2></Тег1> - правильно <Тег1><Тег2>...</Тег1></Тег2> - неправильно
Задание: выделите приветствие с помощью рассмотренных тегов.

Размер текста.

Существует два способа управления размером текстом:
1) использование стилей заголовка,
2) задание размера шрифта основного документа или размера текущего щрифта.

1) Уровни заголовков <Hx>.

Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Обычно браузер выделяет заголовки жирным шрифтом. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

<Hx> Заголовок x-го уровня </Hx>
где x - цифра от 1 до 6, определяющая уровень заголовка, чем больше цифра тем меньше размер:

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED>
<P><H2><I>Рад приветствовать Вас на своей домашней страничке</I></H2>
<P><H4>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени Микки. </H4>
</BODY>
</HTML>
 
 Можно посмотреть, что получилось
Задание: выделите приветствие с помощью стилей заголовка.

Заголовки предназначены для выделения небольшой части текста (строки, фразы), но как быть, если вы хотите выделить большой фрагмент текста ?

2) Атрибут SIZE в теге BASEFONT задает базовый (основной) размер шрифта Web-документа. Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED>
<BASEFONT SIZE = 4>
<P><I>Рад приветствовать Вас на своей домашней страничке</I>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени Микки.
</BODY>
</HTML>
Можно посмотреть, что получилось

Тег FONT позволяет задавать размер текущего шрифта в отдельных места текста в диапазоне от 1 до 7, для этого также используется атрибут SIZE. Шрифты могут быть заданы относительно базового: size=+число size=-число.

Замечание: сумма базового размера шрифта и размера текущего шрифта должна быть не меньше1и не более7. Например для основного шрифта, равного 3, размер текущего шрифта может находиться в пределах от -2 до +4.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED>
<BASEFONT SIZE = 4>
<P><Font size=+2><I>Рад приветствовать Вас на своей домашней страничке</I></Font>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени Микки.
</BODY>
</HTML>
Можно посмотреть, что получилось

Тег BIG выводит текст шрифтом на один размер больше текущего. Тег SMALL выводит текст шрифтом на один размер меньше текущего.

Пример: Выделим "Микки" шрифтом на размер больше:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" BGPROPERTIES=FIXED>
<BASEFONT SIZE = 4>
<P><Font size=+2><I>Рад приветствовать Вас на своей домашней страничке</I></Font>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>
Можно посмотреть, что получилось
Задание: выделите приветствие и некоторые слова, используя теги BASEFONT и FONT.

 

Цвет и стиль написания шрифта.

За цвет всего текста отвечает атрибут TEXT в теге BODY.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED>
<BASEFONT SIZE = 4>
<P><Font size=+2><I>Рад приветствовать Вас на своей домашней страничке</I></Font>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>
Можно посмотреть, что получилось

Изменить цвет текста только в конкретной части документа можно атрибутом COLOR в уже знакомом вам теге FONT.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED>
<BASEFONT SIZE = 4>
<P><Font size=+2 COLOR=#FF0000><I>Рад приветствовать Вас на своей домашней страничке</I></Font>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>
Можно посмотреть, что получилось
Задание: задайте цвет всего текста и выделите приветствие с помощью цвета, отличного от основного.
 
 
С помощью атрибута FACE тега FONT можно менять стиль написания (гарнитуру) шрифта,
например: <FONT FACE="Times New Roman">

Замечание: Если на компьютере посетителя Вашей Web-страницы не установлен шрифт с указанным Вами названием, то браузер использует свой стандартный шрифт. Вы можете задать несколько возможных цветов, тогда в случае отсутствия первого шрифта браузер будет использовать второй, если нет второго, то третий и т.д. Пример: <FONT FACE="Comic Sans MS, Courier New, Courier">

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED>
<BASEFONT SIZE = 4>
<P><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>
Можно посмотреть, что получилось
 

Выравнивание текста по горизонтали.

Команда ALIGN располагает текст справа (RIGHT), слева (LEFT) и по центру (CENTER).

По умолчанию текст выравнивается по левому краю и имеет неровное правое поле.

Пример:

<HTML>
<HEAD>
<TITLE>Страничка Микки</TITLE>
</HEAD>
<BODY BACKGROUND="приложение1\15.jpg" TEXT = blue BGPROPERTIES=FIXED>
<BASEFONT SIZE = 4>
<P ALIGN=CENTER><Font size=+1 COLOR=#FF0000 FACE="Arial"><I>Рад приветствовать Вас на своей домашней страничке</I></Font>
<P>Прежде всего, позвольте представиться.<BR>
Я – веселый мышонок по имени <BIG>Микки.</BIG>
</BODY>
</HTML>
Можно посмотреть, что получилось
Задание: отцентруйте приветствие на своей страничке.
 
Контрольные вопросы:
  1. Чем отличается действие на текст тегов BR и P?
  2. Какие способы управления размером текста существуют?
  3. Как задается цвет текста?

На этом уроке Вы должны были:

  1. разбить текст на абзацы;
  2. задать цвет основного текста;
  3. выделить заголовок:
    • расположив его по центру страницы
    • задав цвет и размер отличные от основных