§2. Ввод и форматирование текста.

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

Главными задачами изучения этой темы является ознакомление учащихся с форматированием текста с помощью стилей. Стили форматирования текста делятся на физические и логические.

Дескрипторы физических стилей.

Дескриптор	Стиль
<B>	Полужирный шрифт (Bold)
<I>	Курсив (Italic)
<TT>	Моноширинный шрифт, как у пишущей машинки
<U>	Подчеркивание (UnderLine)
<SUB>	Подстрочный текст (нижний индекс)
<SUP>	Надстрочный текст (верхний индекс)
<STRIKE>	Перечеркивание

После рассмотрения физических стилей учащимся можно предложить создание Web- страницы с форматированными текстами. Создайте Web –страницу со следующим текстом.

Молитва матери. На краю деревни старая избушка, Там перед иконой молится старушка. Молитва старушки сына поминает, Сын в краю далеком родину спасает. (Сергей Есенин)

HTML>

<HEAD>

<TITLE>Молитва матери</TITLE>

</HEAD>

<BODY>

<B><FONT FACE="Times New Roman" SIZE=4><P>Молитва матери.</P>

</B><P>На краю деревни старая избушка,</P>

<P>Там перед иконой молится старушка.</P>

<P>Молитва старушки сына поминает,</P>

<P>Сын в краю далеком родину спасает.</P></FONT>

<P><I> <FONT SIZE=2>(Сергей Есенин)</P></I>

</BODY>

</HTML>

Bопросы и задания для учащихся.

1. Для чего служит дескриптор <FONT FACE="Times New Roman"?

2. Как устанавливается размеры букв?

3. Какой дескриптор использован для вывода текста с новой строки? Каким другим дескриптором можно заменить это действие?

4. Создайте Web-страницу со сведениями о вашем летнем отдыхе, сочините рассказ о природе, о вашем населенном пункте (городе).

Хотя пользователь не увидит стили форматирования текстов, очень удобно в некоторых случаях использование логических стилей форматирования.

Дескрипторы логических стилей.

Дескриптор	Описание
<EM>	Выделенный текст( обычно курсивом)
<STRONG>	Сильно выделенный текст
<CITE>	Текст в виде цитаты
<CODE>	Текст, представляющий собой фрагмент HTML-кода
<DFN>	Текст, представляющий собой определение
<SAMP>	Текст, представляющий собой фрагмент кода
<KBD>	Текст, представляющий собой название клавиши
<VAR>	Текст, определяющий переменную или значение

Для демонстрации назначения этих дескрипторов учащимся можно демонстрировать Web –страницы следующей структуры.

<HTML>

<TITLE> Дескрипторы логических стилей</TITLE>

<BODY>

<EM> ВЫДЕЛЕННЫЙ ТЕКСТ. ДЕЙСТВИЕ АНАЛОГИЧНО<BR>

ДЕЙСТВИЮ ДЕСКРИПТОРА <CODE>” I ”</CODE> </EM><BR>

<STRONG> Можно использовать дескриптор сильного выделения текста</STRONG>

<BR><CITE> Без труда не вынешь рыбу из пруда</CITE>

<H1>Заголовок 1 уровня</H1>

<H2>Заголовок 2 уровня</H2>

<H3>Заголовок 3 уровня</H3>

<H4>Заголовок 4 уровня</H4>

<SAMP> Для выравнивания текстов по центру применяется дескриптор выравнивания ALIGN="CENTER"</SAMP>

</BODY>

</HTML>

	В структуру страницы включены также заголовки различного уровня. Внимание учащихся должно быть уделено на использование дескриптора <SAMP>. В случае представление примеров в формате НТМL необходимо использовать этот дескриптор. Так же сравните дескрипторы <EM> и <CITE>. Они выделяют текст курсивом. В результате имеем следующую страницу.
	Здесь использован дескриптор <BR> для вывода текста с новой строки. С помощью элемента FONT можно определить размер и цвет шрифта. <FONT SIZE=значение>. Например, буквицу можно описать следующим образом: < FONT SIZE=7> Д<FONT SIZE=3>обро спасет < FONT SIZE=7>м <FONT SIZE=3>ир! <BR>
	Текст абзаца или заголовка можно выровнять по левому краю(по умолчанию), по правому краю или по центру броузера. <P ALIGN=”LEFT” –выравнивание влево, <P ALIGN=”RIGHT”-вправо и <P ALIGN= ”СENTER” – по центру. Пример выравнивания текстов. <P ALIGN=”LEFT”> Выравнивание влево. <P ALIGN=”CENTER”> Выравнивание по центру. <P ALIGN=”RIGHT”> Выравнивание вправо.

Очень часто для сохранения формата текстов набранных в других программах используется элемент <PRE>. Этот элемент удобно использовать для помещения на WEB – страницу стихов, так как для этого нужно особое расстояние между строками и по горизонтали и по вертикали.

Учащимся можно предложить поместить на WEB -страницу стихотворения С.Есенина “ C ДОБРЫМ УТРОМ!” в следующем формате.

С ДОБРЫМ УТРОМ!

Задремали звезды золотые,

Задрожало зеркало затона,

Брезжит свет на заводи речные

И румянит сетку небосклона.

Улыбнулись сонные березки,

Растрепали шелковые косы.

Шелестят зеленые сережки,

И горят серебряные росы.

У плетня заросшая крапива

Обрядилась ярким перламутром

И, качаясь, шепчет шаловливо:

“ C добрым утром!”

В теле WEB – страницы стихотворение наберем в нужном формате между <PRE> </ PRE>.

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

Очень часто при форматировании текстов в документы добавляются горизонтальные линии, котрые называются также линейками (rules). C помощью дескриптора <HR> можно создать линию с тенью, протянувшуюся вдоль окна броузера. Если пользователь изменит размер окна, то соответсвенно изменится и длина данной линии.

Приведем некоторые атрибуты дескриптора <HR>.

Aтрибут	Описание
SIZE	Определяет толщину горизонтальной линии
WIDTH	Определяет длину горизонтальной линии
ALIGN	Определяет способ выравнивания линий
NOSHADE	Определяет черную линию без эффекта гравировки

Приведем пример Web-страницы.

<HTML>

<BODY>

<P><FONT SIZE=2> Рисоване горизонтальных линий.

<P> Постая линия с теню

<HR>

<P> Толщина в 6%

<HR SIZE="6%">

<P>Черная линия без тени

<HR NOSHADE>

</HTML>

Для закрепления знаний учащихся по форматированию текстов им предлагается создание Web-cтраниц со стихами любимых поэтов, списком книг личной библиотеки, странички объявлений, причем объявления разделяются горизонтальными линиями с различными атрибутами.