Как оформить текст блога в админ-панели сайта

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

Краткий обзор HTML редактора TinyMCE

Для упрощения ввода текста и разметки на сайте в админ-панели имеется HTML редактор. Например, в MODx встроен редактор TinyMCE. Его сновными особенностями являются интуитивно понятный интерфейс, поддержка широкого спектра форматов и элементов HTML, встроенные инструменты редактирования изображений и таблиц. Редактор поддерживает как базовые операции (форматирование шрифтов, выравнивание текста), так и продвинутые возможности вроде вставки ссылок, списков, блоков цитат и мультимедийных файлов. Его использование позволяет значительно повысить удобство и скорость наполнения контентом сайта пользователями любого уровня подготовки.

На схеме ниже – значения некоторых кнопок текстового редактора TinyMCE:

Использование HTML редактора: инструкция для администраторов сайта Обзорная статья для новичков о возможностях HTML редактора TinyMCE. Материал подойдёт для любого текстового редактора любой админки, так как принципы работы в них схожи во всём.
☑ Вставка текста из Ворд и очистка формата
☑ Демонстрация работы в визуальном режиме и режиме HTML кода

Создание страницы в админ-панели

Мета-теги страницы: TITLE и DESCRIPTION

Вставьте их в поля Расширенный заголовок и Описание.

Структура текста (заголовки, абзацы, списки, цитаты)

На схеме представлена базовая структура страницы статьи:

Заголовки

Используйте заголовки разных уровней (H1, H2, H3), чтобы разбивать материал на разделы и подразделы. Это улучшает навигацию по статье и помогает читателям быстро находить нужную информацию. На странице сайта должен быть только один заголовок Н1. Движок автоматически его вставит на страницу из поля Заголовок. В поле Содержимое структурируйте текст с помощью заголовков 2-го уровня Н2. Пример структуры:

Редактор в режиме кода - кнопка: Редактировать HTML код 

<h2>Подзаголовок раздела</h2>

<h3>Меньший подзаголовок</h3>
<p>Основной текст абзаца.</p>
<p>Основной текст абзаца.</p>

<h3>Меньший подзаголовок</h3>
<p>Основной текст абзаца.</p>
<p>Основной текст абзаца.</p>

<h2>Подзаголовок раздела</h2>
<p>Основной текст абзаца.</p>
<p>Основной текст абзаца.</p>

Абзацы

Разбивайте текст на небольшие абзацы, состоящие примерно из 3–7 предложений. Большие блоки текста труднее читать онлайн.

Списки

Применяйте маркированные и нумерованные списки для перечисления пунктов или шагов:

Редактор в режиме кода - кнопка: Редактировать HTML код 

<ul>
   <li>Элемент списка 1</li>
   <li>Элемент списка 2</li>
</ul>

<ol>
   <li>Шаг 1</li>
   <li>Шаг 2</li>
</ol>

В качестве буллетов вы можете использовать текстовые символы, html символы, эмоджи. Например:
—   +   *  ⚹  →   •  ○  ► ✏
✓ ✔ ✅ ☑
❌ ❎  ✖
0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓

Ссылки на ресурсы:
Специальные символы HTML	https://htmlweb.ru/html/symbols.php
Эмоджи по темам	https://snipp.ru/handbk/emoji

Результат работы ниже, в разделе ✅ Пример оформления текста статьи в админ-панели сайта на движке MODx

 

Цитаты

Если разработчик сайта стилизовал блок с цитатой, то просто выделите абзац и нажмите на кнопку Цитата:

„Я не люблю машины. Я ненавижу Интернет, ненавижу компьютеры. Они мешают нам жить, они отбирают наше время. Люди слишком много работают за компьютерами, они слишком много болтают, вместо того чтобы слушать и слышать друг друга.“

Рэй Брэдбери (1920–2012) американский писатель

Также вы можете сами оформить блок с цитатой. Пользуйтесь кнопками: Стиль (с пользовательскими классами) и Редактировать CSS стиль . Например:

Например, в 1-м варианте текст высказывания я сделал крупнее и курсивом, выделил жирным, фамилию автора сделал мелким шрифтом, а также использовал такие стили:

Ссылки на ресурсы:
49 примеров оформления блока с цитатой (со ссылками на codepen)	https://freefrontend.com/css-blockquotes/

Оформление элементов (ссылки, таблицы, медиа)

Выделение ключевых моментов

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

Редактор в режиме кода - кнопка: Редактировать HTML код 

<strong>Жирный текст</strong>
<br />
<i>Курсивный текст</i>
<br />
<u>Подчеркнутый текст</u>

Ссылки

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

Базовая форма ссылки:

Тег <a> (anchor — "якорь") имеет несколько атрибутов, каждый из которых влияет на поведение ссылки.

Редактор в режиме кода - кнопка: Редактировать HTML код 

<a href="https://example.com">Перейти сюда</a>

Закрытая от индексации ссылка:
<a rel="nofollow" href="https://htmlweb.ru/html/symbols.php" target="_blank" title="Текстовые символы, цифры, маркеры, галочки">Специальные символы HTML</a>

Основные атрибуты ссылки

Атрибут	Назначение	Пример
href	Адрес, по которому ведёт ссылка	href="https://example.com"
target	Где открыть ссылку	target="_blank" — в новой вкладке
rel	Отношения между текущей страницей и целевой	rel="nofollow" или rel="noopener"
title	Подсказка при наведении	title="Подробнее"
download	Скачивание файла при клике	download="file.pdf"

Пример использования всех вместе:

Редактор в режиме кода - кнопка: Редактировать HTML код 

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer nofollow"
   title="Перейти на сайт"
> 
  Ссылка на внешний ресурс
</a>

Как закрыть ссылку от индексации

Чтобы поисковые системы не передавали вес ссылке и не индексировали её, используется атрибут: rel="nofollow"

Это говорит поисковым ботам: "не следовать по этой ссылке и не учитывать её в ранжировании сайта".

Если ссылка ведёт на сторонний ресурс, особенно рекламный или партнёрский, обязательно добавляйте rel="nofollow".

Можно комбинировать с другими значениями:

Редактор в режиме кода - кнопка: Редактировать HTML код 

<a href="https://example.com" rel="nofollow noopener noreferrer">Партнёр</a>

Что означают другие значения rel:

Значение	Назначение
nofollow	Не передавать SEO-вес
noopener	Безопасность: не позволяет странице-цели получить доступ к window.opener
noreferrer	Не передавать информацию о переходе (HTTP referer)
ugc	Помечает ссылку как созданную пользователем (например, в комментариях)
sponsored	Обозначает рекламные или платные ссылки

⚠️ Не забудьте: закрывать ссылку от индексации нужно только в определённых случаях:

• Партнёрские, рекламные ссылки
• Ссылки на сомнительные или нерелевантные сайты
• Ссылки в комментариях/форумах (если они от пользователей)

 

Таблицы

Редактор в режиме кода - кнопка: Редактировать HTML код 

<table border="1" cellpadding="10" cellspacing="0" style="width:100%;">
  <thead>
    <tr>
      <th> </th>
      <th>Widget</th>
      <th>Wingding</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>CompanyA</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>CompanyB</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>CompanyC</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td><b>Grand Total</b></td>
      <td>9</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

	Widget	Wingding
CompanyA	1	2
CompanyB	3	4
CompanyC	5	6
Grand Total	9	12

Атрибут cellpadding определяет расстояние между границей ячейки и её содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым её размеры. Без cellpadding текст в таблице «налипает» на рамку.

Атрибут cellspacing задаёт расстояние в пикселях между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчёт.

Генератор html таблиц: https://www.htmltables.io/

Изображения и медиафайлы

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

Изображения

Убедитесь, что изображения соответствуют тематике блога и оптимизированы для веб. То есть ширина картинки в пикселях соответствует ширине контента веб страницы, разрешение 72 пиксели/дюйм, вес файла максимально уменьшен. Используйте тег <img> для вставки изображений. Обязательно добавляйте атрибут alt. По этому параметру поисковики индексируют изображения.

Редактор в режиме кода - кнопка: Редактировать HTML код 

<img src="image.jpg" alt="Описание изображения">

Также не забывайте про авторские права на изображения! Используйте либо свои изображения, либо файлы, найденные в интернете, со свободной лицензией.

Ссылки на ресурсы:
Сжать изображения (уменьшить вес файла)	https://compresspng.com/ https://compressjpeg.com/ https://squoosh.app/
Иллюстрации и иконки (выбирайте картинки с бесплатной лицензией)	https://www.freepik.com/ https://www.vecteezy.com/

Результат работы ниже, в разделе ✅ Пример оформления текста статьи в админ-панели сайта на движке MODx

 

Видео

Результат работы ниже, в разделе ✅ Пример оформления текста статьи в админ-панели сайта на движке MODx

 

Как создать содержание страницы со ссылками на определенную секцию поста в редакторе админ-панели

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

Результат работы из видео смотрите ниже, в разделе ✅ Пример оформления текста статьи в админ-панели сайта на движке MODx

Создание содержания страницы со ссылками на определённые секции поста в редакторе TinyMCE позволяет облегчить навигацию по большому объёму контента. Такие внутренние ссылки называются якорями, и с их помощью читатели смогут мгновенно перемещаться к нужному разделу документа. Ниже представлено пошаговое руководство по созданию оглавления (содержания) со ссылками на конкретные участки текста в текстовом редакторе админ-панели.

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

1. Определите пункты содержания

Определитесь с основными пунктами вашего содержания. Они станут будущими заголовками ссылок. Пусть каждый пункт относится к конкретной секции вашего поста.

2. Добавьте уникальные идентификаторы к каждой секции

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

• Переходите в режим кода редактора – кнопка Редактировать HTML код .

• Найдите нужные заголовки или разделы, к которым хотите привязать ссылки.

• Присвойте каждому такому заголовку уникальный ID с помощью атрибута id.

Пример:

Редактор в режиме кода - кнопка: Редактировать HTML код 

<h2 id="section1">Первый раздел</h2>
...

<h2 id="section2">Второй раздел</h2>
...

<h2 id="section3">Третий раздел</h2>

ID должен начинаться с буквы и содержать только латинские буквы, цифры, дефисы (-) и подчёркивания (_).

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

Теперь добавьте сам блок содержания в начало поста. Каждая ссылка в содержании будет указывать на соответствующую секцию с уникальным идентификатором.

Пример структуры оглавления:

Редактор в режиме кода - кнопка: Редактировать HTML код 

<h2>Содержание</h2>

<ul>
  <li><a href="#section1">Первый раздел</a></li>
  <li><a href="#section2">Второй раздел</a></li>
  <li><a href="#section3">Третий раздел</a></li>
</ul>

Заметьте, что каждая ссылка начинается с хэша (#), за которым идёт имя соответствующего идентификатора (например, "#section1").

4. Вернитесь в визуальный режим

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

Дизайн страницы

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

Шрифты Для основного текста используйте основной шрифт сайта, для заголовков – шрифт для заголовков. Для выделенных фраз можно выбрать более декоративные шрифты, но убедитесь, что они остаются удобочитаемыми. Для оформления текста воспользуйтесь этими кнопками:

Отступы и интервалы Регулируйте отступы между элементами, чтобы создать пространство вокруг текста и сделать его менее плотным. Чтобы добавить интервал, можно просто вставить пустой абзац с одним пробелом внутри.

Редактор в режиме кода - кнопка: Редактировать HTML код 

<p> &nbsp; </p>

Оптимизация текста для SEO

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

Использование ключевых слов

Ключевые слова — это слова и фразы, которые наиболее вероятно используют пользователи при поиске информации. Важно правильно интегрировать ключевые слова в текст, не перебарщивая с их количеством. Оптимальной является плотность ключевых слов на уровне 1-2% от общего объема текста.

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

Метатеги и описания

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

Ссылки

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

Дополнительные советы

⚠ Не злоупотребляйте цветами и выделениями, иначе текст станет перегруженным и неудобным для чтения.

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

⚠ Регулярно проверяйте статью на наличие ошибок перед публикацией.

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

 

Редактируете страницы в HTML редакторе, но не всё понятно? Нет времени разбираться с этим? Я — веб разработчик, помогу разобраться, настроить редактор и сопровождать ваш сайт.
Пишите на почту или в телеграм:
make.website.info@gmail.com
Геннадий Вебстер

Если есть ещё вопросы по использованию текстового редактора, задайте их в форме ниже Буду рад ответить и помочь разобраться в вашей задаче!

✅ Пример оформления текста статьи в админ-панели сайта на движке MODx

Содержание

• Заголовок 2-го уровня о затененных лунных кратерах
• Заголовок 2-го уровня об исследованиях в системе Сатурна
• Вопросы и ответы по космологии – Заголовок 2-го уровня

 

2009 год был объявлен ЮНЕСКО Международным годом астрономии. Поводом послужило то, что 400 лет назад Галилео Галилей сделал первые астрономические открытия с помощью телескопа. Прошедший год ожидания вполне оправдал – было получено немало интересных результатов. Это случилось во многом благодаря работе новых наблюдательных инструментов и спутников.

Источник:
www.freepik.com

Подробнее стоит рассказать об LCROSS (Lunar Crater Observation and Sensing Satellite). Вместе с LRO (Lunar Reconnaissance Orbiter) он составил первую за 10 лет американскую экспедицию к Луне, которая стартовала 19 июня 2009 г. Разгонный блок «Центавр» (Centaur), сброшенный 9 октября в районе кратера Кабеус (Cabeus), поднял облако пыли, сквозь которое пролетел LCROSS, проанализировавший состав этого вещества. Чуть позже LCROSS упал в тот же кратер, успев перед этим передать данные на Землю. Высота облака оказалась существенно ниже рассчитанной, что не позволило полюбоваться зрелищем с Земли. Однако выброшенного вещества вполне хватило для анализа, и 14 ноября 2009 г. NASA уже опубликовало предварительные результаты, согласно которым облако выброшенных частиц содержало до сотни литров воды.