Указую господам сенаторам, чтобы речь держать не по-писаному,
а своими словами, дабы дурь была видна каждого!
Пётр Первый.

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

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

В окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и , только «заточенные» под использование в текстовых редакторах.

Н о, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим.

§ 2. Сами теги для форматирования

П редварительно отформатированный текст можно вставить в html-страницу с помощью тегов и . Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу.

С амыми популярными тегами для форматирования текста являются:

• - используется для выделения текста полужирным .


• - используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег .


• - позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.


• - делает текст перечёркнутым.


• - предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен, например, для записи химических формул. Вот этот код

  H2 O

  Даст нам вот такую формулу



• - нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень: пишем

  (a+b)2 ,

  Получаем

  (a+b) 2 .

В се эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:

H2O - это формула воды.

при просмотре

H 2 O - это формула воды.

§ 3. Абзацы

В HTML абзацы создаются с помощью тега . Использование этого тега приводит к вставке одной пустой строки и размещению находящегося за ним видимого элемента html-страницы в следующей строке. Например, если мы напишем:

Т о выглядеть это будет так:

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

§ 4. Выравнивание текста

Д ля того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify . Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:

align="center">Текст по центру

выровняет текст по центру:

Текст по центру

А этот код:

right">

выровняет текст по правому краю

Выравнивание текста по правому краю

Е сли атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:

выровнит текст по левому краю

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

§ 5. Перенос строки и горизонтальная черта

Е сли нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег
. Например, html-код

1. Первая строка.
2. Вторая строка.

в браузере будет выглядеть так:

1. Первая строка.
2. Вторая строка.

У
нет закрывающего тега. Ты уже наверное догадался, что для вставки нескольких пустых строк, нужно записать тег
несколько раз подряд.

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

• size - толщина полосы;


• width - ширина полосы;


• align - выравнивание;


• color - цвет полосы;


• noshade - атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.

Н апример, html-код:

align="center" size="5" width="50%" color="#3399ff">

в браузере примет вид

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

§ 6. Заголовки

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

• - заголовок первого уровня


• - заголовок второго уровня


• - заголовок третьего уровня


• - заголовок четвёртого уровня


• - заголовок пятого уровня


• - заголовок шестого уровня

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

• align - выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);


• title - всплывающая подсказка, которая появляется при наведении мыши на заголовок.

Н апример, код HTML:

align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня

в браузере будет выглядеть так:

Заголовок 4 уровня

§ 7. Работа со шрифтами

Д ля форматирования непосредственно шрифтов, в HTML есть тег . У этого тега существуют следующие атрибуты:

• color - цвет текста шрифта;


• face - гарнитура шрифта;


• size - размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По-умолчанию, размер текста 3. Если указать size="+1"

§ 8. Создание списков в HTML

В HTML списки создаются с помощью тегов и . В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом . Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type .

В нумерованном списке маркеры (значения атрибута type) такие:

• 1 - нумерация арабскими цифрами (по умолчанию);


• A - большими латинскими буквами по алфавиту;


• a - маленькими латинскими буквами;


• I - большими римскими цифрами;


• i - маленькими римскими цифрами.

Н апример, HTML-код

Первый элемент.
Второй элемент.
Третий элемент.

браузер покажет так.

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

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

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

Пример

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

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

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

Курсив - наклонный текст или шрифт

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

Пример

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

С помощью тега em делаем текст курсивом.

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

Подчеркнутый текст

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

Пример

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

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

Зачеркнутый текст

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

Пример

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

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

Моноширинный шрифт

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

Пример

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

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

Верхний индекс

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

Пример

С помощью тега sup делаем верхний^индекс или степень числа, например, 2³.

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

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

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

Пример

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

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

Вставленный текст

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

Пример

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

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

Удаленный текст

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

Пример

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

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

Большой текст

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

Пример

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

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

Маленький текст

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

Пример

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

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

Группировка элементов и содержимого страницы в HTML

Элементы

и позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.

Например, Вы можете поместить все ссылки на странице в тег

, чтобы указать, что все элементы в этом теге

относятся к меню. Затем Вы можете задать стиль тегу

, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом

ГЛАВНАЯ / О НАС / КОНТАКТЫ

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

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

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

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

Пример с тегом

Группировки элементов с помощью тега span.

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

Эти теги обычно используются с CSS , чтобы Вы могли задать стиль к секции страницы.

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

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

Правила и порядок написания тегов

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

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().

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

Выделенный фрагмент

или вот так:

Выделенный фрагмент

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги , , и

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

Рассмотрим для начала выделение текста жирным . Для этого действия используется два тега — и . Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах и в уже обработанном браузером виде:

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом и . Попытайтесь найти отличия между двумя примерами:

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

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

Теги выделения текста чертой — , и

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

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

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

Тег и атрибуты — параметры шрифта текста

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

• face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
• size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
• color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

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

Этот текст имеет размер 6px

Этот текст красного цвета

Этот текст имеет шрифт Arial

Этот текст красного цвета и размера 5px

А вот что вы увидите, после обработки написанного кода:

Блочные элементы оформления текста — заголовки

-

, абзац

Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов

,

,...,

. Вот как выглядят все заголовки в обработанном виде:

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

А теперь поговорим про тег выделения абзаца

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

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

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

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

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

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

Тег HTML	Эффект	Пример
Текст	Написание текста жирным шрифтом	Текст
Текст	Жирное начертание текста	Текст
Текст	Написание текста курсивом	Текст
Текст	Выделение важных фрагментов текста (текст отображается курсивом)	Текст
Текст	Подчёркивание текста	Текст
Текст	Перечёркивание текста	Текст
Текст	Верхний индекс	100 м 2
Текст	Нижний индекс	H 2 SO 4

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

• FACE="значение" - гарнитура шрифта. Если указанной гарнитуры на компьютере пользователя нет, то текст будет оформлен с использованием гарнитуры по умолчанию. В атрибуте FACE иногда записывают через запятую несколько гарнитур, тогда браузер выбирает гарнитуры по списку: при отсутствии первого использует вторую и т. д. Значение атрибута следует подавать в кавычках.
  Пример:
  

  Tahoma , Arial Black

  
  Результат:
  Tahoma , Arial Black
• SIZE="значение" - размер шрифта (целое число от 1 до 7). Атрибут SIZE со знаком "минус" (или "плюс") означает, что размер шрифта будет уменьшен (или увеличен) на соответствующую величину относительно заданного по умолчанию. Значение без знака задает абсолютный размер шрифта.
  Пример:
  

  1 ... 7

  
  Результат:
  1 , 2 , 3 , 4 , 5 , 6 , 7
• COLOR="значение" - цвет шрифта. Как значение цвета можно использовать названия цветов английском языке, такие как red , green , blue и т. п., или шестнадцатеричные значения (записанные в шестнадцатеричной системе счисления), начинающиеся с символа # и последовательно задают красный, зеленый и синий цвета, которые должны быть смешаны для получения нужного оттенка. Последнее более предпочтительно, т. к. в первом случае выбор оттенка зависит от настроек конкретного браузера клиента! Пример:
  

  Текст , Текст

  
  Результат:
  Текст , Текст

Для оформления сайта обычно используют набор цветов, который называют . Он состоит из 216 элементов. Особенностью "безопасных" цветов является то, что они не меняются в случае отображения различными браузерами или на разных мониторах, т. е. эта палитра обеспечивает точную передачу на разных мониторах того, что задумал веб-дизайнер. Если любая из трех составляющих шестнадцатеричного значения отличается от 00 , 33 , 66 , 99 , СС или FF , то цвет не является безопасным. Значения атрибутов SIZE и COLOR можно записывать без кавычек, но лучше всё делать по правилам.

Есть и другие теги, которые можно применять для изменения параметров текста:

• Teкст - увеличение размера шрифта. Размер символов текста увеличивается на единицу относительно текущего уровня.
• Teкст - уменьшение размера шрифта. Размер символов уменьшается на единицу относительно текущего уровня.
• Teкст - создание перечеркнутого текста. Текст будут перечеркнуты горизонтальной линией.
• текст - отображает текст или изображение в виде «бегущей строки» с текста, расположенного между ними.
  
  
  Есть вопросы?

  Имя

  Email *

  Сообщение *

  Отправить
  Сообщить об опечатке

  Текст, который будет отправлен нашим редакторам:

  Ваш комментарий (необязательно):

  Отправить Отмена