Приглашаем посетить
Ларри (larri.lit-info.ru)

Работа с текстом / основные тэги управления стилем текста

Работа с текстом / основные тэги управления стилем текста

 

Мы будем учиться работать с текстом.

<теория>

У нас HTML код следующего содержания:         

Рассмотрим несколько наиболее популярных видов шрифтов.

Жирный шрифт (bold)

Для управления плотностью шрифта применяются теги:
<b>текст</b>
<strong>текст</strong>
Отличие тэга <b> от тэга <strong> в том, что тэг <b> указывает браузеру выводить текст жирным шрифтом, а тэг <strong> указывает, что текст надо выделить. Как браузер будет выделять текст, жирным шрифтом, курсивом или жирным курсивом - зависит от конкретного браузера.

Курсив (italic)

Курсивный шрифт выводится с помощью тэгов:
<i>текст</i>
<em>текст</em>

Пример: Курсив

Подчеркнутый шрифт (underline)

Выводится с помощью тэга:
<u>текст</u>

Пример: Подчеркнутый шрифт

Надстрочный индекс (Superscript)

Выводится с помощью тэга:
<sup>текст</sup>
Пример: основной текст надстрочный индекс
23=8

Подстрочный индекс (Subscript)

Выводится с помощью тэга:
<sub>текст</sub>

Пример: основной текст подстрочный индекс
C2H5OH

Имитация стиля печатной машинки (Teletype)

<tt>текст</tt>

Пример: Teletype

Заголовки

Выводятся с помощью тэгов:
<h1>Самый большой заголовок</h1>
...
<h6>Самый маленький заголовок</h6>

Пример:

H1

H2

H3

H4

H5
H6

Блок с отступом

Выводится с помощью тэга:
<BLOCKQUOTE>текст</BLOCKQUOTE>

Пример:
основной текст

блок текста с отступом

Тэги управления цветом и размером шрифта:

Задание базового шрифта:

Размер, цвет и стиль шрифта по умолчанию задается с помощью тэга <BASEFONT> и не применяется к заголовкам. Если базовый шрифт не задан по умолчанию используется шрифт размером 3.
атрибуты элемента <BASEFONT>


color =(цвет).Цвет шрифта.
size =(целое число от 1 до 7). Размер шрифта
face =(список разделенных запятыми названий шрифтов).
Пример:
<BASEFONT SIZE="2"> Устанавливаем размер базового шрифта равным двум.

 
Управление размером шрифта с помощью тэга <FONT>

Размер шрифта меняется с помощью атрибута SIZE тэга <FONT>
Пример: HTML код:
<font size= "1">< /FONT> size=1 </font>
<font size="2"> size=2 </font>
<font size="3"> size=3 </font>
<font size="4"> size=4 </font>
<font size="5"> size=5 </font>
<font size="6"> size=6 </font>
<font size="7"> size=7 </font>

Результат выполнения:
size=1 size=2 size=3 size=4
size=5 size=6 size=7

В атрибуте SIZE можно указывать размер шрифта относительно текущего размера SIZE

Пример: HTML код:
<font size="+1">size +1</font>
<font size="+2">size +2</font>
<font size="-3">size -3</font>

Результат выполнения:
size +1
size +2
size -3

Управление цветом шрифта с помощью тэга <FONT>

Цвет шрифта меняется с помощью атрибута COLOR тэга <FONT>
<FONT COLOR="#FF0000">FONT COLOR="#FF0000"</FONT>
<FONT COLOR="red">FONT COLOR="red"</FONT>

Результат выполнения:
FONT COLOR="#FF0000"
FONT COLOR="red"

Задание шрифтов с помощью тэга <FONT>

Имя шрифта задается с помощью атрибута FACE тэга <FONT>
<font face="имя шрифта"></font>< /FONT>
Задает имя шрифта. Можно задавать несколько шрифтов через запятую, в этом случае используется первый найденный шрифт.

Пример: HTML код:

<font face="Impact", "Arial Cyr", "Arial", "MS Sans Serif">
текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере.
</font>
Результат выполнения:
текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере.

 
Комментарии в HTML коде:

Комментарии вставляются в программу с помощью тэгов:  <!--комментарии-->
Эти тэги предназначены для вставки в документ HTML строк комментария, которые не отображаются браузером.
Пример:            <!--многострочный комментарий -->

Переход на следующую строку

Принудительный перенос строки выполняется с помощью тэга <br>
Пример: HTML код:

Выполняем<br>переход на<BR>следующую строку
Результат выполнения:
Выполняем
переход на
следующую строку

[Запрет переноса:]

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

 

Управление выравниванием текста

Выравнивание блока текста осуществляется с помощью атрибута ALIGN тэга <DIV>текст</DIV>
Атрибут ALIGN могут иметь значения:


ALIGN="LE< /FONT>FT" - выравнивание по левому краю
ALIGN="RIGHT"< /FONT> - выравнивание по правому краю
ALIGN="CENTER"< /FONT> - выравнивание поцентру< /FONT>
ALIGN="JUSTIFY" - выравнивание по обоим краям

Пример:HTML код:

<DIV ALIGN="CENTER">Текст, выравненный по центру</DIV>
Результат выполнения:

Текст, выравненный по центру

Вообще, атрибут ALIGN можно применять во многих тэгах, например:
<P ALIGN="JUSTIFY">текст</P> - выравнивание абзаца
<TD ALIGN="CENTER">текст</TD> - выравнивание текста в ячейке таблицы
<H1 ALIGN="CENTER">текст</H1> - выравнивание заголовка
и т.д.
Отцентрировать блок текста можно также и с помощью тэга <CENTER>текст</CENTER>

 

Горизонтальная разделительная линия

Вывод горизонтальной линии осуществляется с помощью тэга <hr>
В этом тэге можно применять атрибуты:
ALIGN=LEF< /FONT>T, CENTER, RIGHT - выравнивание линии.
NOSHADE - линия без тени.
SIZE - толщина линии в пикселях.
WIDTH - ширина линии.

Пример:HTML код:
<HR>
<HR ALIGN="CENTER" SIZE="10" WIDTH="50%" NOSHADE>
Результат выполнения:
обычная линия:

линия шириной 5 пикселей, выравненная по центру, шириной 50 процентов от ширины страницы, без тени:

 

<практика>

[шаг 1. откройте обычный блокнот]

[ шаг 2. выделите нижеприведённый код и вставте его в свой блокнот]

[ шаг 3. сохраните скопированный код в файле с произвольным именем но с расширением HTML, например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, разными шрифтами будет отражаться контент страницы. Поэксперементируйте сначала с заменой текста, размерами, вставке линий, изменению заголовков:]

[Назад] [Содержание] [Вперед]