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

<html><body>Если необходимо чтобы к тексту было применено какое-либо форматирование, например, выделение полужирнымили курсивом, необходимо использовать соответствующие теги форматирования. При этом форматируемый текст помещается между тегами.

</body></html>

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

<html><body>Данный параграф отформатирован тегом strong

А этот тегом b, внешне они не отличаются.Данный параграф отформатирован тегом emА этот тегом i, внешне они не отличаются.</body></html>

Еще одной парой тегов форматирования являются теги <big> и . Первый выводит текст увеличенным по сравнению со стандартным, а второй уменьшенным. Вместо тега <big> рекомендуется использовать теги или теги заголовков, так как они несут и структурную нагрузку. Тег является тегом по смыслу противоположным и , он деакцентирует внимание на тексте. По поводу применения этого тега следует сделать одно замечание: на разных компьютерах установлено различное разрешение экрана и в браузере может быть установлен различный размер основного шрифта и сильное уменьшение текста может сделать текст не читаемым. Следующий пример демонстрирует вид текста, отформатированного с помощью этих тегов.

<html><body><big>Данный параграф отформатирован тегом big </big>Данный параграф отформатирован тегом small А в данном параграфе теги не применяются</body></html>

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

<html><body>Формула воды H2O. В данном параграфе формула набрана без использования тега sub Формула воды H2O. В данном параграфе формула набрана с использованием тега sub Формула выглядит более привычно.2^4=16. В данном параграфе формула набрана без использования тега sup24=16. В данном параграфе формула набрана с использованием тега sup. Формула выглядит более привычно.</body></html>

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

Этот пример показывает, как можно управлять переносами строк и пробелами с помощью тега <pre>.

<html><body><pre>Это предварительно форматированный текст.Он сохраняет как пробелы, так и переносы строк.</pre></body></html>

Сравните написание кода программы с применением тега <pre> и без его использования.

<html><body> <pre>// Данный фрагмент набран с использованием тега prefor (int i = 1; i < 10; i++) { printf ("i=%i\n", i); }</pre> // Здесь тег pre не применялсяfor (int i = 1; i < 10; i++) { printf ("i=%i\n", i); } </body></html>

Тег <code> маркирует код компьютерной программы. Браузеры обычно отображают его моноширинным шрифтом. Этот элемент является структурным, поэтому его использование предпочтительней использования тега <tt>, который маркирует моноширинный текст. Также следует отметить, что тег <code> лучше использовать внутри тега <pre>, так как в противном случае, все множественные пробелы будут заменены одним. Тег <kbd> маркирует текст, введенный с клавиатуры. Отображается он также, как и текст внутри тега <code>

<html><body>Данные примеры демонстрируют то, как будет представлен текст при использовании разных тегов<pre><code>// отформатировано с помощью pre и codeclass helloworld { public static void main(string[] args) { system.out.println("hello world!"); }}</code></pre> <pre><tt>// отформатировано с помощью pre и ttclass helloworld { public static void main(string[] args) { system.out.println("hello world!"); }}</tt></pre> <code>// отформатировано с помощью codeclass helloworld { public static void main(string[] args) { system.out.println("hello world!"); }}</code><h3>Использование тега kbd</h3>Сохранить результат <kbd>Да/Нет</kbd></body></html>

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

Для маркировки примера вывода программы или скрипта используется тег <samp>.

<html><body>Если в HTML коде встретится ошибка, то будет выдано следующее:<samp>c:\sp\bin\nsgmlsu.exe:test.html:4:7:e: element

"foobar" undefined</samp></body></html>

Для маркировки переменных используется тег <var>, который обычно отображается курсивом.

<html><body>Версии стандарта HTML обычно маркируются следующим образом<var>x</var>.<var>у</var>.</body></html>

Тег <address> маркирует контактную информацию для всего документа или его части. Он может включать имена людей осуществляющих поддержку документа, ссылки на страницы, адреса электронной почты, телефоны и прочее. Использование данного тега для маркировки почтовых адресов организаций является не совсем корректным. Его следует использовать только для пометки адресов для связи по поводу документа. Также допустимо использование тега <address> для выделения контактной информации по поводу части документа, обычно формы.

<html><body><form method=post action="/cgi-bin/order.cgi"> <fieldset> <legend accesskey=c>Информация о кредитной карте </legend> <label accesskey=v> <input type="radio" name="card" value="visa"> Visa </label> <label accesskey=m> <input type="radio" name="card" value="mc"> Mastercard

</label> <label accesskey=n> Номер: <input type="text" name="number"> </label> <label accesskey=e> Срок действия: <input type="text" name="expiry"> </label> </fieldset> <input type="submit" value="Отправить заказ" accesskey=s> <address> Если у вас имеются вопросы по поводу заказа, свяжитесь с нами по адресу <a href="mailto:orders@intuit.ru">orders@intuit.ru</a>, Или телефону в офисе (+7 499) 253-9312. </address> </form></body></html>

Этот пример показывает, как работать с сокращениями или акронимами.

<html><body> <abbr title="Содружество Независимых Государств">СНГ</abbr> <acronym title="World Wide Web">WWW</acronym> При наведении указателя мыши на акроним или сокращение показывается атрибут title. Это работает по-разному в разных браузерах. </body></html>

Пример выполнения данного HTML-кода

Этот пример показывает, как изменять направление вывода текста.

<html><body> Если используемый браузер поддерживает двунаправленное представление (bdo), то следующая строка будет записана справа налево (rtl): <bdo dir="rtl">Здесь какой-то арабский текст </bdo> </body></html>

Пример выполнения данного HTML-кода

Этот пример показывает, как использовать длинные и короткие цитаты.

<html><body> Здесь представлена длинная цитата:<blockquote>Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. </blockquote> Здесь представлена короткая цитата:<q>Это короткая цитата</q> Для элемента blockquote браузер вставляет дополнительные переносы строки, пустые строки и поля, но элемент q не изображается каким-то специальным образом. </body></html>

Пример выполнения данного HTML-кода

Этот пример показывает, как пометить текст, который удален или вставлен в документ.

<html><body>дюжина означает <del>двадцать</del> <ins>двенадцать</ins> частейБольшинство браузеров будет зачеркивать удаленный текст и подчеркивать вставленный текст.Некоторые старые браузеры будут выводить удаленный или вставленный текст как обычный текст.</body></html>

Пример выполнения данного HTML-кода