PC АД PC АД
PC АД

Почта Домой

Семь уроков по HTML:

Урок2, Работа с текстом.
Тэги управления стилем текста:
  • Жирный шрифт (bold):

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

    Пример:
    Действие тэга <strong>
    Действие тэга <b>

  • Курсив (italic):

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

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

    Примечание: тэг <em> обычно используется для выделения слова из текста, и в различных браузерах может работать по разному.

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

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

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

  • Перечеркнутый шрифт (strike):

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

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

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

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

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

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

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

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

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

    Пример:
    Teletype

  • Шрифт для вывода цитат (citation):

    • <cite>текст</cite>

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

  • Шрифт для вывода исходного текста программ (code):

    • Выводится с помощью тэга:
    <code>текст</code>
    или
    <samp>текст</samp>
    Отображается моноширинным шрифтом Courier.

    Пример:
    Обычный шрифт
    Шрифт для текстов программ

  • Шрифт для выделения переменной в программе:

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

    Пример:
    текст программы переменная

  • Шрифт для имитации ввода с клавиатуры:

    • Выводится с помощью тэга:
    <kbd>текст</kbd>
    Отображается моноширинным шрифтом Courier.

    Пример:
    Обычный шрифт
    Шрифт для имитации ввода с клавиатуры

  • Заголовки

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

    Пример:

    H1

    H2

    H3

    H4

    H5

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

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

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

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

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

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

  • Увеличение размера шрифта:

    • Выполняется с помощью тэга:
    <big>текст</big>
    Пример:
    основной текст
    Увеличенный текст

  • Уменьшение размера шрифта:

    • Выполняется с помощью тэга:
    <small>текст</small>
    Пример:
    основной текст
    Уменьшенный текст

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

    • Размер шрифта меняется с помощью атрибута SIZE тэга <FONT>
    Пример:

    Текст программы:
    <font size="1">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

    Пример:

    Текст программы:
    <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"

    Таблица соответствия названий цветов и значений RGB.
    Black #000000 Green #008000
    Silver #C0C0C0 Lime #00FF00
    Gray #808080 Olive #808000
    White FFFFFF Yellow #FFFF00
    Maroon #800000 Navy #000080
    Red #FF0000 Blue #0000FF
    Purple #800080 Teal #008080
    Fuchsia #FF00FF Aqua #00FFFF

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

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

    Пример:

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

    Тэги для форматирования текста:
  • Вывод отформатированного текста:

    • Выполняется с помощью тэга <pre>текст</pre>
    Текст, находящийся между этими тэгами будет выведен в том же виде, в котором вы его напечатали в документе, т.е. со всеми пробелами и переносами.
    Пример:

    Текст программы:
    <PRE>

    Отформатированный
		текст
    </PRE>

    Результат выполнения:

    Отформатированный
		текст

  • Комментарии в программе:

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

    <!--
многострочный
 комментарий
-->

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

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

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

  • Запрет переноса:

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

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

    • Выравнивание блока текста осуществляется с помощью атрибута ALIGN тэга <DIV>текст</DIV>
    Атрибут ALIGN может принимать значения:
    ALIGN="LEFT" - выравнивание по левому краю
    ALIGN="RIGHT" - выравнивание по правому краю
    ALIGN="CENTER" - выравнивание по центру
    ALIGN="JUSTIFY" - выравнивание по обеим краям

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

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

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

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

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

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

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

    Урок1, Создание шаблона HTML-документа. | Урок3, Списки и таблицы.

    Malder © 2004

    Используются технологии uCoz