Создание текстовых заголовков
Текстовые заголовки задаются с помощью шести парных тегов:
<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. Заголовок с подсказкой
Абзацы текста
Для создания абзаца текста используется парный тег <Р> ... </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> часто используется для добавления рисунка в текст с новой строки.
Форматирование текста
Форматирование текста– это процедура оформления его внешнего вида, которая предполагает изменение всех характеристик шрифта.
Парный тег <FONT> … </FONT> используется для изменения рисунка, размера и цвета шрифта.
Рисунок (гарнитура) и цвет шрифта изменяются с помощью соответственно атрибутов FACE и COLOR. Запись тега
<FONT FACE = "Arial" COLOR = "RED"> ФОРМАТИРОВАНИЕ </FONT>
означает, что слово ФОРМАТИРОВАНИЕ будет отображаться красным цветом (RED) и гарнитурой Arial.
Размер шрифтаустанавливается с помощью атрибута SIZE. В зна-чении атрибута указывается номер от 1 (самый маленький шрифт) до 7 (самый большой шрифт). Соответствие номера размеру шрифта в пунктах приведено в табл. 3.1.
Таблица 3.1
Номер и размер шрифта
| Номер шрифта | Размер в пунктах |
Запись тега
<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>.
Списки
Для выделения логических элементов текста и усиления зрительного эффекта используются списки. В Web-страницах применяются нуме-
рованные и маркированные списки, отличаются они лишь способом оформления. Перед каждым пунктом маркированных списков ставятся графические элементы (точки, ромбики и другие маркеры). Пунктам нумерованных списков предшествуют цифры или буквы.
Нумерованные списки
Для создания нумерованного списка используется комбинация двух парных тегов. Тег <OL> … </OL> определяет начало и конец нуме-рованного списка, а отдельные пункты списка задаются с помощью тега <LI> … </LI>.
Пункты нумерованного списка могут быть обозначены арабскими цифрами, большими или маленькими римскими цифрами, прописными или строчными буквами латинского алфавита.
По умолчанию все элементы нумерованного списка задаются араб-скими цифрами (1, 2, 3 и т.д.). Для изменения типа нумерации служит атрибут TYPE тега <OL>. Атрибут TYPE может принимать следующие значения:
- TYPE="1" – арабские цифры;
- TYPE="I" – римские большие цифры;
- TYPE="i" – римские маленькие цифры;
- TYPE="A" – прописные буквы латинского алфавита;
- TYPE="a" – строчные буквы латинского алфавита.
Список, нумерованный прописными латинскими буквами, показан на рис. 3.5.
Рис. 3.5. Нумерованный список
HTML-код, соответствующий приведенной на рис. 3.5 странице, должен выглядеть следующим образом:
<HTML>
<HEAD>
<TITLE> Нумерованный список</TITLE>
</HEAD>
<BODY>
<P> <B> Филиалы ЧИУП: </B> </P>
<OL TYPE="A">
<LI> Борисов </LI>
<LI> Молодечно </LI>
<LI> Бобруйск </LI>
<LI> Светлогорск </LI>
</OL>
</BODY>
</HTML>
Маркированные списки
Маркированные списки формируются с помощью комбинации двух парных тегов. Отдельные пункты списка задаются с помощью тега <LI> … </LI>, а начало и конец маркированного списка определяются с помощью тега <UL> … </UL>.
Пункты маркированного списка могут быть обозначены с помощью трёх различных маркеров: закрашенного кружка, незакрашенного кружка, закрашенного квадрата.
По умолчанию все элементы маркированного списка обозначаются
с помощью закрашенного кружка. Для изменения типа маркеров служит атрибут TYPE тега <UL>. Атрибут TYPE может принимать следующие значения:
- TYPE="disc" – закрашенный кружок;
- TYPE="circle" – незакрашенный кружок;
- TYPE="square" – закрашенный квадрат.
Список, маркированный закрашенными квадратами, показан на
рис. 3.6.
Рис. 3.6. Маркированный список
HTML-код, соответствующий приведенной на рис. 3.6 странице, дол-жен выглядеть следующим образом:
<HTML>
<HEAD>
<TITLE> Маркированный список</TITLE>
</HEAD>
<BODY>
<P> <B> Факультеты ЧИУП: </B> </P>
<UL TYPE="square">
<LI> Факультет менеджмента </LI>
<LI> Учетно-экономический факультет </LI>
<LI> Юридический факультет </LI>
<LI>Отделение заочного обучения </LI>
</UL>
</BODY>
</HTML>
Бегущая строка
Бегущая строка – это анимационный эффект, при котором строка текста перемещается по странице. Текст может перемещаться как влево, так и вправо. Для создания бегущей строки используется парный тег:
<MARQUEE> … </MARQUEE>.
Между открывающим и закрывающим тегами записывается текст бегущей строки. Атрибуты тега, приведенные в табл. П 1, задают пара-метры перемещения текста. Запись тега в виде:
<MARQUEE DIRECTION = "RIGHT" LOOP ="INFINITE"
HEIGHT = "6O" BGCOLOR = "YELLOW">
ПОСТУПАЙТЕ В ЧИУП
</MARQUEE>
означает, что предложение ПОСТУПАЙТЕ В ЧИУП является бегущей строкой высотой (HEIGHT) 60 пикселей, перемещаемой вправо (RIGHT) бесконечное число раз (INFINITE) на желтом фоне (YELLOW).
Специальные символы
Для добавления в текст специальных символов используется числовой или именной код. В обоих случаях код символа начинается с символа амперсанда (&), за которым следует числовой или именной код (сокра-щенное имя).
Коды некоторых специальных символов приведены в табл. 3.2. Добавляется специальный символ как обычный текст. Например, если необходимо в абзаце текста сформировать предложение:
Охраняемый торговый знак — ®,
то следует записать
<Р> Охраняемый торговый знак — ® </Р>.
Таблица 3.2
Коды специальных символов
| Символ | Числовой код | Именной код | Описание |
|   |   | Неразрывный пробел | |
| " | " | " | Прямые двойные кавычки |
| & | & | & | Амперсанд |
| ? | € | &euro | Евро |
| £ | £ | £ | Фунт стерлингов |
| ¢ | ¢ | ¢ | Цент |
| § | § | § | Параграф |
| © | © | © | Авторское право |
| ® | ® | ® | Охраняемый торговый знак |
| ™ | ™ | &trade | Знак торговой марки |
| º | ° | ° | Градус |
| | | | | Вертикальная черта | |
| — | — | Длинное тире |
ГРАФИЧЕСКИЕ ОБЪЕКТЫ