Текст

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

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста

Код HTML Описание Пример Текст Жирное начертание текста Текст Текст Курсивное начертание текста Текст Текст Верхний индекс e=mc 2 Текст Нижний индекс H2O
Текст
Текст пишется как есть, включая все пробелы

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

      

Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.

Результат данного примера показан на рис. 1.

Вид курсивного жирного начертания текста

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

      

Формула изумруда: Be3Al2(SiO3)6

Результат данного примера показан на рис. 2.

Нижний индекс в тексте

Рис. 2. Нижний индекс в тексте

Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.

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

Источник

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

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

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

  • right – позиционирование заголовка по правой границе документа;
  • left – позиционирование заголовка по левой границе документа;
  • center – позиционирование заголовка по центру документа.

По умолчанию заголовки выравниваются по левому краю страницы.

Горизонтальные линии.

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы.

Тег


позволяет провести горизонтальную линию в окне браузера. Этот тег не является контейнером, поэтому не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Тег


может иметь следующие атрибуты:

  • align – выравнивание линии, может принимать значения left, center, right;
  • color – указывает цвет линии;
  • noshade – рисует линию без трехмерных эффектов;
  • size – устанавливает толщину линии в пикселях;
  • width – устанавливает длину линии, указывается в пикселях или процентах от ширины окна браузера.
Использование предварительно отформатированного текста.

В HTML-документах для разбивки текста по абзацам и обеспечения при-нудительного перевода строки следует пользоваться специальными тегами. Однако бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тег-контейнер , определяющий предварительно форматированный (преформатированный) текст.

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

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

Источник

6. HTML – Форматирование текста с помощью html-тегов

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов . и . . Все, что находится в тегах . и . отображается в HTML жирным текстом (полужирным), как показано ниже:

Пример

     

С помощью тега b делаем жирный шрифт.

С помощью тега strong делаем текст жирным.

Получим следующий результат:

Пример выделения жирным текста и шрифта в HTML, жирный шрифт, жирный текст, <b data-lazy-src=

Подчеркнуть текст в HTML можно с помощь тега . . Все, что находится внутри тега . отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

     

С помощью тега u делаем подчеркнутый текст или слово.

Получим следующий результат:

Пример подчеркивания текста в HTML, подчеркнутый шрифт, подчеркнутый текст, <u data-lazy-src=

Содержимое элемента . записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

     

С помощью тега tt делаем моноширинный шрифт.

Получим следующий результат:

Пример моноширинного шрифта в HTML, моноширинный шрифт, <tt data-lazy-src=

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

Пример

     

С помощью тега sub делаем нижнийиндекс.

Получим следующий результат:

Пример нижнего индекса в HTML, нижний индекс, <sub data-lazy-src=

Содержимое внутри тега . отображается в HTML как удаленный текст.

Пример

     

Хочу зарабатывать много очень много денег.

Получим следующий результат:

Пример удаленного текста в HTML, удаленный текст, <del data-lazy-src=

Содержимое внутри тега . отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

     

С помощью тега small делаем текст меньше.

Получим следующий результат:

Пример маленького текста в HTML, маленький текст, <small data-lazy-src=

Название статьи

Содержимое страницы.

Получим следующий результат:

тега span.

Получим следующий результат:

Пример группировки элементов и текста в HTML, тег span, <span data-lazy-src=

Читайте также:  Php заменить расширение файла
Оцените статью