HTML для начинающих, простейшие теги форматирования

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

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

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

Итак, начнем.

Что такое теги HTML?

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

Теги шрифтов

жирный<b>жирный</b>
курсив<i>курсив</i>
подчеркнутый<u>подчеркнутый</u>

Как видно из примера для того, чтобы отметить текст жирным шрифтом, перед первым словом нужно открыть тег <b>, а после последнего слова закрыть его - </b>. Вот и все тонкости.

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

Тег абзаца

Для того, чтобы выделить абзац внутри текста не нужно специально его выделять переводами каретки (вставлять "enter" или переводы строк). Более того, при отображении текста HTML все ваши переводы строк не будут отображены! Для оформления текста в виде абзаца следует вводить текст одной длииииннной строкой, которую следует выделить тегом <p> как показано на примере:

<p>Начало абзаца ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... конец абзаца </p>

<p>Начало абзаца ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... ..... текст абзаца ..... конец абзаца </p>

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

Если же так получилось, что все-таки нужно перенести текст на новую строку, то используйте тег </br>. Его не нужно открывать, просто записывайте в то место, где нужно перенести строку.

Тег списка

Для перечисления чего-либо используется тег списка - <UL>, например:

  • Первый пункт;
  • Второй пункт;
  • Третий пункт;
  • Четвертый пункт;

Исходный текст будет выглядеть так:

<UL>
<LI>Первый пункт;
<LI>Второй пункт;
<LI>Третий пункт;
<LI>Четвертый пункт;
</UL>

Таким образом список открывается тегом <UL>, далее каждый элемент списка выделяется тегом <LI>, который можно не закрывать. В конце весь список закрывается. Вместо точек списка можно задать авто нумерацию элементов, для этого вместо тега <UL> используйте <OL>:

  1. Первый пункт;
  2. Второй пункт;
  3. Третий пункт;
  4. Четвертый пункт;

Тег таблицы

Самый сложный из простых тегов форматирования - это таблицы. Простейшее понятие таблицы мы видим почти каждый день в программе Microsoft Excel. Если вы хотите оформить некоторый текст в виде колонок и столбцов, то следует использовать тег <TABLE>. Часто теги таблиц используются для описания параметров товаров в каталоге продукции, либо для обозначения списка услуг и пр.

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

ПараметрОписание
Высота120 мм
Длина180 мм
Ширина34 мм
Радиус действия30 метров
Дополнительная информацияДля работы необходим переменный ток напряжением ~220V.

Для отображения подобной таблицы следует написать следующий код HTML:

<TABLE border=1>
 <TR><TH>Параметр</TH>                 <TH>Описание</TH></TR>
 <TR><TD>Высота</TD>                   <TD>120 мм</TD></TR>
 <TR><TD>Длина</TD>                    <TD>180 мм</TD></TR>
 <TR><TD>Ширина</TD>                   <TD>34 мм</TD></TR>
 <TR><TD>Радиус действия</TD>          <TD>30 метров</TD></TR>
 <TR><TD>Дополнительная информация</TD><TD>Для работы необходим переменный ток напряжением ~220V.</TD></TR>
</TABLE>

В самом начале открывается тег <TABLE>, который говорит о том, что это начало таблицы. Далее открывается тег <TR> (Table Row), который соответствует строке таблицы, которая в свою очередь содержит столбцы, обозначенные тегом <TD> (Table Data) (или <TH> (Table Header) для заголовков). Каждый тег при этом обязательно закрывается.

Пробелы в исходном тексте таблицы (между тегами </TD> <TD>) использованы только для более удобного чтения кода, на самом деле их лучше не писать.

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

ПараметрОписание
Высота120 мм
Длина180 мм
Ширина34 мм
Радиус действия30 метров
Дополнительная информацияДля работы необходим переменный ток напряжением ~220V.

Теги заголовков

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

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

Заголовок 1

<H1>Заголовок 1</H1>

Заголовок 2

<H2>Заголовок 2</H2>

Заголовок 3

<H3>Заголовок 3</H3>

Заголовок 4

<H4>Заголовок 4</H4>
Заголовок 5
<H5>Заголовок 5</H5>
Заголовок 6
<H6>Заголовок 6</H6>
Заголовок 7<H7>Заголовок 7</H7>
Заголовок 8<H8>Заголовок 8</H8>

Заголовок самого верхнего уровня (первого) будет обозначаться тегом <H1>, второго <H2> и так далее. Заметьте, что оформление этих тегов будет соответствовать дизайну вашего сайта. Обычно используются три, четыре уровня заголовка, т.е. не стоит все материалы сайта разбивать 8-ми уровневыми заголовками. Для больших материалов (например, ГОСТ-ов) можно использовать все 8-мь уровней и ввести еще, если потребуется.

Кроме всего прочего использование тегов заголовков очень положительно сказывается на качестве индексации сайта поисковыми системами. Пожалуйста, не используйте для обозначения заголовков тег <b> - это не правильно.

Мы рекомендуем самый верхний уровень начинать с тега <H2>, а не с <H1>.

Что нужно помнить при оформлении текста в HTML

  • Обязательно закрывайте все теги, которые нужно закрывать. Если вы не закроете тег, то его действие может сказаться на общем оформлении сайта. Например, если не закрыть тег <TABLE>, то весь сайт может отображаться не правильно, либо совсем не будет отображаться;
  • Используйте переводы строк только для оформления исходного текста - они не будут отображаться посетителям сайта;
 
Введите номер
вашего телефона:

Заказ услугПо всем вопросам заказа услуг вы можете обратиться к нам по телефону +7 (495) 506-97-92 или задать вопрос с помощью формы обратной связи.

Будем рады видеть вас в числе наших клиентов!