Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
УМП по КИТСоздание Web-документов с помощью HTM....doc
Скачиваний:
30
Добавлен:
10.11.2018
Размер:
2.37 Mб
Скачать

Обновить

Рис. 2.3. Редактирование Web-страницы

3. Работа с текстом

3.1. Создание текстовых заголовков

Текстовые заголовки задаются с помощью шести парных тегов:

<H1> …</H1>,

<H2> …</H2>,

…………………

<H6> …</H6>.

С помощью этих тегов создаются заголовки шести уровней, разли-чающиеся размером символов. Самые крупные символы задаются тегом <H1>, а самые малые – тегом <H6>. Между открывающим и закрывающим тегами записывается текст заголовка.

HTML-код для отображения заголовков трех уровней имеет вид:

<HTML>

<HEAD>

<TITLE> Заголовки трёх уровней </TITLE>

</HEAD>

<BODY>

<CENTER>

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

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

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

</BODY>

</HTML>.

Соответствующий приведенному коду вид Web-страницы показан на рис. 3.1.

Рис. 3.1. Заголовки трех уровней

Для выравнивания текста заголовка на странице используется атрибут ALIGN. Различные значения атрибута ALIGN приведены в табл. П 3.

Запись тега

<H2 ALIGN = "CENTER" > ИНСТИТУТ </H2>

означает, что слово ИНСТИТУТ выровнено по центру.

Отображение всплывающей подсказки реализуется с помощью атрибута TITLE:

<H2 TITLE = "Текст подсказки" > Заголовок с подсказкой </H2>.

Пример заголовка с подсказкой показан на рис. 3.2. Текст подсказки появляется при наведении указателя мыши на заголовок.

Рис. 3.2. Заголовок с подсказкой

3.2. Абзацы текста

Для создания абзаца текста используется парный тег <Р> ... </P>. Между открывающим <Р> и закрывающим </P> тегами записывается текст. Выравнивание абзаца задается с помощью атрибута ALIGN. Раз-личные способы выравнивания приведены на рис. 3.3.

Рис. 3.3. Различные способы выравнивания

HTML-код, соответствующий рис. 3.3, имеет вид:

<HTML>

<HEAD>

<TITLE>Способы выравнивания</TITLE>

</HEAD>

<BODY>

<P ALIGN = "LEFT"> Абзац выровнен по левому краю </P>

<P ALIGN = "RIGHT"> Абзац выровнен по правому краю </P>

<P ALIGN = "CENTER"> Абзац выровнен по центру </P>

</BODY>

</HTML>

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

Тег <BR> часто используется для добавления рисунка в текст с новой строки.

3.3. Форматирование текста

Форматирование текста – это процедура оформления его внешнего вида, которая предполагает изменение всех характеристик шрифта.

Парный тег <FONT> … </FONT> используется для изменения рисунка, размера и цвета шрифта.

Рисунок (гарнитура) и цвет шрифта изменяются с помощью соответственно атрибутов FACE и COLOR. Запись тега

<FONT FACE = "Arial" COLOR = "RED"> ФОРМАТИРОВАНИЕ </FONT>

означает, что слово ФОРМАТИРОВАНИЕ будет отображаться красным цветом (RED) и гарнитурой Arial.

Размер шрифта устанавливается с помощью атрибута SIZE. В зна-чении атрибута указывается номер от 1 (самый маленький шрифт) до 7 (самый большой шрифт). Соответствие номера размеру шрифта в пунктах приведено в табл. 3.1.

Таблица 3.1

Номер и размер шрифта

Номер шрифта

Размер в пунктах

1

8

2

10

3

12

4

14

5

18

6

24

7

36

Запись тега

<FONT FACE="Tahoma" COLOR="GREEN" SIZE="5"> ПРИМЕР </FONT>

означает, что слово ПРИМЕР будет отображаться зеленым цветом (GREEN), гарнитурой Tahoma и размером 18 пунктов.

Для изменения начертания символов используются следующие парные теги:

  • <B> ... </B> – полужирный шрифт;

  • <I> ... </I> – курсив;

  • <U> ... </U> – подчеркивание;

  • <STRIKE> ... </ STRIKE> – перечеркивание;

  • <STRONG> ... </ STRONG> – усиленное выделение.

Запишем несколько примеров, демонстрирующих применение при-веденных тегов. Тег вида:

<B> <I> ФАКУЛЬТЕТ МЕНЕДЖМЕНТА </I> </B>

означает, что предложение ФАКУЛЬТЕТ МЕНЕДЖМЕНТА будет отображаться полужирным курсивом.

Если мы хотим, чтобы предложение УЧЕТНО-ЭКОНОМИЧЕСКИЙ ФАКУЛЬТЕТ отображалось полужирным курсивом с подчеркиванием, то необходимо записать следующую совокупность тегов:

<B> <I> <U> УЧЕТНО-ЭКОНОМИЧЕСКИЙ ФАКУЛЬТЕТ </U> </I> </B>

На рис. 3.4 показана Web-страница, где демонстрируются различные способы начертания текста.

Рис. 3.4. Различные способы начертания текста

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

<HTML>

<HEAD>

<TITLE> Способы начертания текста</TITLE>

</HEAD>

<BODY>

<CENTER>

<P>

обычный текст

<BR>

<B>полужирное начертание</B>

<BR>

<I>начертание курсивом</I>

<BR>

<U>подчёркнутый текст</U>

<BR>

<STRIKE>перечёркнутый текст</STRIKE>

<BR>

<STRONG>текст с усиленным выделением</STRONG>

</P>

</CENTER>

</BODY>

</HTML>

Здесь создан один абзац, а для перевода текста на новую строку используется одинарный тег <BR>. Выравнивание всех элементов Web-страницы по центру осуществляется с помощью парного тега <CENTER> … </CENTER>.