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

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

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

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

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

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

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

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

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

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

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

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

 (или ) — тег, для выделения текста жирным
 (или ) — тег, для получения курсивного текста
 — тег, для подчеркнивания текста (кстати, перечекрнутые слова часто путают с ссылками)
<STRIKE></STRIKE> — тег, для ~~зачеркивания~~ текста
 — тег, для выделения подстрочного текста, или попросту говоря — нижний индекс. Очень помогает, например, для форматирования химических элементов
 — тег, для выделения надстрочного текста, или попросту говоря — верхний индекс (10 м²)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

width — ширина полосы;
align — выравнивание;
size — толщина полосы;
color — цвет полосы;
noshade — атрибут без значений для создания черной полосы без тени.

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>. У данные тегов заголовков есть атрибуты:

align — выравнивание заголовка;
title — всплывающая подсказка заголовка (когда наведешь курсор на него).

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

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

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

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

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

color — цвет шрифта;
face — гарнитура шрифта;
size — размер шрифта. Может иметь значения от 1 до 6, а также от +1 до +6 и от -1 до -6. По умолчанию размер шрифта установлен 3. Если указать , то текст, находящийся между данным тегом, будет выводится увеличенным на 1, относительно другого текста. Ну и наоборот - при -1 уменьшенным на 1.

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

1 — нумерация арабскими цифрами (по умолчанию);
A — большими латинскими буквами по алфавиту;
a — маленькими латинскими буквами;
I — большими римскими цифрами;
i — маленькими римскими цифрами.

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

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

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

Элемент 1.

Элемент 2.

Элемент 3.

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

disc — закрашенный кружок (по умолчанию);
circle — незакрашенный кружок;
square — закрашенный квадратик.

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

Макс:
хороший, спасибо за помощь

Раньше я говорил: «Я надеюсь, что все изменится». Затем я понял, что существует единственный способ, чтобы все изменилось — измениться мне самому.
© Джим Рон

Супер-предложение!

Купить виртуальный хостинг для сайта и домен с бесплатным тестовым периодов 1 месяц!

Подробнее

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

Автор сайта

Яндекс.Метрика за 9 июля:
0 визитов, 0 просмотров, 0% отказов
Реклама

Решил помогать новичкам с мая 2010 года
— «При копировании статей прошу
ставить ссылку на мой сайт»