Создание текстовых заголовков — КиберПедия 

Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...

Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...

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

2017-06-13 368
Создание текстовых заголовков 0.00 из 5.00 0 оценок
Заказать работу

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

<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. Добавляется специальный символ как обычный текст. Например, если необходимо в абзаце текста сформировать предложение:

Охраняемый торговый знак — ®,

то следует записать

<Р> Охраняемый торговый знак &#151 &#174 </Р>.

Таблица 3.2

Коды специальных символов

Символ Числовой код Именной код Описание
  &#160 &nbsp Неразрывный пробел
" &#34 &quot Прямые двойные кавычки
& &#38 &amp Амперсанд
? &#8364 &euro Евро
£ &#163 &pound Фунт стерлингов
¢ &#162 &cent Цент
§ &#167 &sect Параграф
© &#169 &copy Авторское право
® &#174 &reg Охраняемый торговый знак
&#8482 &trade Знак торговой марки
º &#176 &deg Градус
| &#124   Вертикальная черта
&#151   Длинное тире

 

ГРАФИЧЕСКИЕ ОБЪЕКТЫ


Поделиться с друзьями:

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

Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьше­ния длины пробега и улучшения маневрирования ВС при...

Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...

Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначен­ные для поддерживания проводов на необходимой высоте над землей, водой...



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.038 с.