Самоучитель по HTML

Справочник HTML

Часто бывает так, что нам нужно уменьшить шрифт, или увеличить, сделать его жирным, или наклонным. Для этих функций существуют специальные теги. Давайте рассмотрим их:

... - текст, заключённый в этот контейнер получается жирным;
... - текст этого контейнера получится наклонным;
... - этот текст получится подчёркнутым;
... - шрифт получится меньшего размера;
<TT>...</TT> - данный вид текста называется моноширинным шрифтом;
<STRIKE>...</STRIKE> - текст получится перечёркнутым;
... - получается уменьшеный сдвинутый кверху шрифт;
... - этот шрифт тоже будет уменьшенным, но уже сдвинутый книзу;

Например (см. рис. 8):


      <html>
         <head>
            <title>Форматирование шрифта</title>
         </head>
         <body>
            <B>Этот текст будет жирным, так как заключён в контейнер 
                          тегов &lt;B&gt;...&lt;/B&gt;.</B>
            <p>
            <I>А этот текст будет курсивом. Использованы
                          теги &lt;I&gt;...&lt;/I&gt;.</I>
            <p>
            <U>C помощью тегов &lt;U&gt;...&lt;/U&gt; текст будет подчёркнутым.</U>
            <p>
            <SMALL>Сейчас мы уменьшили текст с помощью
                          контейнера &lt;SMALL&gt;...&lt;/SMALL&gt;.</SMALL>
            <p>
            <TT>Используя контейнер тегов &lt;TT&gt;...&lt;/TT&gt; наш шрифт
                          получается моноширинным.</TT>
            <p>
            <STRIKE>Теперь мы перечёркиваем текст используя
                          контейнер &lt;STRIKE&gt;...&lt;/STRIKE&gt;.</STRIKE>
            <p>
            Используя тег &lt;SUP&gt;<SUP> мы сдвинем наш текст кверху,</SUP>
                          а используя тег &lt;SUB&gt;<SUB> наоборот книзу.</SUB>
         </body>
      </html>

B, I, U, small, TT, STRIKE, SUP, SUB
рис. 8. Пример форматирования текста.

Помимо обычного форматирования текста, может встретиться логическое форматирование текста. Его смысл в том, чтобы показать в HTML-коде документа намерение автора. Например, возьмём контейнер <CITE>...</CITE>. Текст, заключённый в него, будет курсивом, как и при использовании тега . Спрашивается, зачем два одинаковых по значению тега?? Честно говоря, сам не понимаю. На мой взгляд, чем проще, тем лучше, но создатели языка решили, что неплохо было бы создать теги, которые будут нести какой-то логический смысл. Логический смысл контейнера <CITE>...</CITE> заключается в том, чтобы заключать в него текст, являющийся цитатой. Давайте рассмотрим также другие теги:

<CODE>...</CODE> - в этот контейнер тегов надо заключать программный код.
<DFN>...</DFN> - если надо уточнить определение какого-либо термина, то используют этот контейнер. Текст выделяется курсивом.
... - данный контейнер выполняет функцию акцентирования внимания на каком-либо фрагменте текста. Текст, опять же, выделяется курсивом.
<KBD>...</KBD> - в данном контейнере заключается текст, который пользователь должен вводить с клавиатуры.
<SAMP>...</SAMP> - сюда заключается текст, который является примером чего-либо.
... - данным контейнером выделяются очень важные фрагменты текста.
<VAR>...</VAR> - выделяют имя переменной, например X или Y.

Давайте посмотрим как это будет всё выглядеть в броузере (рис. 9):


      <html>
         <head>
            <title>Логическое форматирование</title>
         </head>
         <body>
            &lt;CITE&gt;...&lt;/CITE&gt;
            <br><CITE>Не рой яму другому - сам в неё попадёшь!</CITE>
            <p>
            &lt;CODE&gt;...&lt;/CODE&gt;
            <br>Следующая строка программы: <CODE>var bgc = document.bgColor;</CODE>
            <p>
            &lt;DFN&gt;...&lt;/DFN&gt;
            <br>Нейтрон - элементарная нейтральная частица. <DFN>Уточнение:
                           нейтроны - это частицы атомов.</DFN>
            <p>
            &lt;EM&gt;...&lt;/EM&gt;
            <br>Вася занял первое место <EM>лишь с третьей</EM> попытки.
            <p>
            &lt;KBD&gt;...&lt;/KBD&gt;
            <br>Для правильной работы программы введите код: <KBD>GH17RT8Z</KBD>
            <p>
            &lt;SAMP&gt;...&lt;/SAMP&gt;
            <br>Укажите пароль длинной не менее восьми символов, включающий в себя
                    не только буквы, но и цифры, например: <SAMP>PUSHKIN1799</SAMP>
            <p>
            &lt;STRONG&gt;...&lt;/STRONG&gt;
            <br>Поздравляем с регистрацией! <STRONG>Пожалуйста, запишите где-нибудь
                           ваш пароль, что б случайно не забыть!</STRONG>
            <p>
            &lt;VAR&gt;...&lt;/VAR&gt;
            <br>Если значение переменной <VAR>X</VAR> равно значению <VAR>Y</VAR>,
                           то задача решена верно!
         </body>
      </html>

CITE, CODE, DFN, EM, KBD, SAMP, STRONG
рис. 9. Логическое форматирование текста.

Предыдущая страница Следующая страница

Вы можете свободно использовать фрагменты сайта, с условием размещения ссылки на наш сайт:
<a href="http://tri222.narod.ru">Самоучитель по созданию Web-страниц.</a>

Хостинг от uCoz

Самоучитель по HTML

Справочник HTML

Оглавление:

CSS

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