Главная / Основы HTML / Блог / Теги для форматирования текста в HTML

Форматирование текста в HTML, HTML теги для редактирования текста

Основным средством передачи информации в интернете является безусловно текст. В предыдущих статьях я про атрибуты тега BODY, а также показал как на практике изменять цвета фона, текста, ссылок и т.п., соответственно ты уже умеешь вставить текст на html-страницу (если забыл, то он вставляется между тегами <BODY> и </BODY>).

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

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

С чего начинать форматирование в HTML

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

И так, представим ты открыл текстовый редактор и набераешь в нем свой текст, сделал все необходимые форматирования (выделил что-то жирным или курсивом), или что-то другое, потом берешь и копируешь полученный результат в код html. После, ты открываешь html-документ в браузере, но не видишь всего того форматирования, что делал до копирования и сохранения. Куда же оно все исчезло? Ответ простой: текстовый редактор для форматирования текста использует собственные спецсимволы-теги, которые попросту скрыты от глаз.

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

Теги форматирования в HTML

Если отформатировал текст, то его можно быстро вставить в html-страницу при помощи тегов <pre> и </pre>. Твой браузер выведит на страницу текст в том виде, в каком он был в текстовом редакторе, если ты его поместишь в эти теги. Но данный тэг ялвяется малоиспользуемым, так как у него мало возможностей. Например, я, его не разу не использовал, но рассказать о нем я бы не посмел :)

Дальше я постараюсь рассказать и показать самые популярные теги HTML для форматирования текста:

Теги можно использовать не только один, а сколько угодно, где-то даже дополняя друг друга. Можно просто вкладывать один тег в другой. Приведу пример:

10 м<sup>2</sup> — это <strong><em>площадь</em> мой комнаты.</strong>

результат будет выглядеть следующим образом:

10 м2 — это площадь мой комнаты.

Для выделения обзаца, или располодить текст блоком, используют тег <P>. Данный тег отделяет обзац небольшим отступом снизу от другого обзаца или объекта. На примере это будет выглядеть так:

<p>Создаем свой абзац.</p> <p>Создаем второй абзац.</p>

Данный код на html-странице будет выглядеть следующим образом:

Создаем свой абзац.

Создаем второй абзац.

Кстати, закрывать абзац тегом </p> необязательно, если хотите начать следующий абзац, просто напишите снова <p>.

В данном теге есть важный атрибут align, у которого можно выставлять следующие значения: center, left, right и justify. Атрибут помогает выровнить наш текст в теге <p>. Из названий атрибутов, тебе уже наверное понятно, что выравнивание будет по центру, по левому краю, по правому и по всей ширине соответственно. Дальше я приведу простой пример:

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

расположит наш текст по центру, на выходе получится следующее:

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

Кстате, по умолчанию, текст расположен по левому краю, поэтому атрибут left можно не использовать для этих целей:

<p>Выравнивание текста по левому краю (по умолчанию)</p>

на html-странице это будет выглядеть вот так:выровнит текст по левому краю

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

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

Наша первая строка. <br> Наша вторая строка.

на странице будет следующий вид:

Наша первая строка.
Наша вторая строка.

У <br> отсутствует закрывающийся тег. Кстати, если ты хочешь больше одного отступа, можно написать <br> подряд.

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

html-код на примере будет следующим (попробуй сами на примере узнать что получится):

<hr align="center" size="3" width="300" color="red">

Ширина и толщина задается как в пикселях, так и в процентах, кому как удобнее и для какой цели нужно.

Далее очень важные теги для форматирования, а также и для продвижения сайтов — теги заголовки. Всего их 6:

<H1></H1>
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6>

Заголовки выделяются жирным шрифтом, а также отступом снизу. Самый большой и главный заголовок на странице это <H1></H1>, ну а самый маленький <H6></H6>. У данные тегов заголовков есть атрибуты:

Приведу просто пример HTML-кода заголовков:

<h4 align="center" title="Заголовок 4 размера">Заголовок 4 размера</h6>

на странице мы увидем следующее:

Заголовок 4 размера

Если вы хотите изменять шрифт текста и его размер, в HTML-коде применяется тег <FONT></FONT>. У данного тега имеются следующие атрибуты:

Создать список в HTML можно используя теги <OL></OL> (список с нумерацией) и <UL></UL> (список с маркировкой). Элементы в списке должны выделяться <LI></LI>. Как элемент списка начинается с новой строки. В тегах списках есть свой атрибут type. Для начала разберем значения этого атрибта в теге <OL></OL>:

Приведу HTML-код для примера:

<ol type="I">
 <li>Элемент 1.</li>
 <li>Элемент 2.</li>
 <li>Элемент 3.</li>
</ol>

на странице будет вот так:

  1. Элемент 1.
  2. Элемент 2.
  3. Элемент 3.

Тег <UL> имеет атрибут type вот с такими значениями:

HTML-код тега <UL> на примере:

<ul type="circle">
 <li>Элемент 1.</li>
 <li>Элемент 2.</li>
 <li>Элемент 3.</li>
</ul>

На странице мы увидим следующие:

  • Элемент 1.
  • Элемент 2.
  • Элемент 3.

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

Давай, для закрепления данного материала я приведу тебе пример html-кода, и ты сам разберись, что он означает:

<font color="green" size="-2"><U>&nbsp;B</U></font>

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

← Атрибуты тега BODY Теги HTML для вставки изображений →
Дата публикации: 15 мая, 2012


Даже если вы очень талантливы и прилагаете большие усилия, для некоторых результатов просто требуется время: вы не получите ребенка через месяц, даже если заставите забеременеть девять женщин.
© Уоррен Баффет

Скидки для новичков:

Купить качественный хостинг и домен теперь реально со скидкой 5% благодаря моему сотрудничеству с хостинг компанией!

Подробнее

Подпишитесь на интересные обновления моего блога, чтобы быть в тренде последних тенденций разработки и продвижения сайтов: