руслан белый

Я вебмастер с ИП. Опыт работы — 10 лет.

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

В свободное время ищу ошибки на сайтах и учу делать контентники

Рассылка
Популярное

Как решить любую техническую проблему

Сколько денег надо
вложить в сайт

Как самому сделать сайт

Как выбрать нишу сайта

Бесплатный аудит сайта

Мероприятия

Пока мероприятий нет.

Основные HTML теги
редактора Вордпресс

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

Основные html теги такие:

  • strong, em, del
  • ul, ol, li
  • blockquote, a, hr
  • h1, h2, h3, h4, h5, h6
  • img
  • table, tr, th, td
  • специальные символы HTML

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

Разметка текста

Теги h1, h2, h3, h4, h5, h6 размечают заголовки разных уровней (размеров)

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

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

Теги заголовков h1 — h6 в редакторе Вордпресс

Теги strong, em, del размечают семантическое выделение

  • strong — обратить внимание,
  • em — мнение или мысль,
  • del — не верный текст.

<strong>тег strong</strong>

<em>тег em</em>

<del>тег del</del>

теги strong em del

Теги strong, em, del в редакторе Вордпресс

Теги ul, ol, li размечают списки (перечни)

  • ul — ненумерованный список,
  • ol — нумерованный список,
  • li — элемент списка.

<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>

Теги списков ul, ol и li в редакторе Вордпресс

Теги списков ul, ol и li в редакторе Вордпресс

Тег blockquote размечает цитаты

<blockquote>Вступив в бой с шипящими змеями — эфой и гадюкой, — маленький, цепкий, храбрый ёжик чуть не съел их.</blockquote>

Тег blockquote в редакторе Вордпресс

Тег blockquote в редакторе Вордпресс

Тег hr размечает горизонтальную черту

<hr />

Тег hr в редакторе Вордпресс

Тег hr в редакторе Вордпресс

Разметка ссылок

Тег а размечает ссылки. У тега a есть 2 атрибута href и target:

  • href — урл перехода
  • target — тип открытия (_blank — новая вкладка браузера)

Вступив в бой с <a href="https://yandex.ru/search/?text=шипящие%20змеи" target="_blank">шипящими змеями</a> — эфой и гадюкой, — маленький, цепкий, храбрый ёжик чуть не съел их.

Тег а в визуальном редакторе Вордпресс

Тег а в редакторе Вордпресс

Разметка картинок

Тег img размечает картинки. У тега img есть 2 атрибута src и alt:

  • src — адрес картинки,
  • alt — подсказка к картинке.

<img src="//webreligion.ru/wp-content/uploads/2016/03/vektornyii---risunok-devushki.jpg" alt="векторный рисунок девушки" />

Тег img в визуальном редакторе Вордпресс

Тег img в редакторе Вордпресс

Когда вставляешь картинку инструментами Вордпресс, в тег img добавляются дополнительные атрибуты:

<img class="alignnone size-full wp-image-1425" src="//webreligion.ru/wp-content/uploads/2016/03/vektornyii---risunok-devushki.jpg" alt="векторный рисунок девушки" width="640" height="360" />

  • class — набор CSS классов для стилизации картинки,
  • width — ширина картинки,
  • height — высота картинки.

Эти атрибуты можно оставлять по умолчанию.

Разметка таблиц

По умолчанию редактор Вордпресс не умеет вставлять таблицы. Чтобы добавить кнопки таблиц, установите плагин https://wordpress.org/plugins/mce-table-buttons/

Кнопка для создания таблицы в плагине MCE Table Buttons

Кнопка для создания таблицы в плагине MCE Table Buttons

Теги table, tr, th, td размечают таблицы:

  • table — начало таблица,
  • tr — строка таблицы,
  • th — заголовок таблицы,
  • td — ячейка таблицы.

<table>
<tbody>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>

Теги table, tr, th и td в визуальном редакторе Вордпресс

Теги table, tr, th и td в редакторе Вордпресс

Специальные символы HTML

Бывает, что в HTML надо вставить символы, которых нет на клавиатуре. Простой пример — левая и правая угловые скобки, в которые мы обрамляем теги. Чтобы это сделать, надо ввести особый код: экранированный символ. Формат введения кода такой:

&код;

Ниже привожу таблицу кодов наиболее интересных символов, которые я использую в работе. Чтобы использовать их в HTML странице удалите нижнее подчеркивание:

символ код символ код символ код символ код
< &_lt; > &_gt; & &_amp; « &_laquo;
» &_raquo; © &_copy; &_trade; &_rarr;

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

Кнопка специальных символов в редакторе Вордпресс

Кнопка специальных символов в редакторе Вордпресс

Далее появится таблица:

Таблица специальных символов в редакторе Вордпресс

Таблица специальных символов в редакторе Вордпресс

Вставляете нужный символ и не надо думать ни о каких кодах.

На этом о тегах все, в следующий раз поговорим о CSS стилях.

как самому сделать сайт