Зачем это необходимо?

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

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

Основные элементы текстовой страницы

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

Если опубликовать материал без текстовой страницы, он будет сплошным, монолитным, неформатированным, не будет списков, отступов, заголовков и т.д.

Когда фронт-энд разработчик производит вёрстку страниц, он пользуется reset.css (ресурс, сбрасывающий дефолтные настройки).

Стандартная текстовая страница состоит из следующих элементов:

  • заголовки (шесть уровней);
  • текстовые абзацы;
  • цитаты (особым образом оформленные текстовые абзацы);
  • списки (маркированные и нумерованные);
  • таблицы;
  • изображения.

Заголовки и абзац

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

Заголовки

Вообще существует шесть уровней заголовков: <h1> — верхний, <h6> — нижний, но на практике, обычно используют только первые четыре.

Чтобы, например, создать заголовок третьего уровня, нужно ввести в редакторе:<h3>Заголовок третьего уровня</h3>

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

Абзац

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

Таблицы и списки

Таблицы

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

  • <table> — тег таблицы,
  • <thead> — верхняя часть таблицы,
  • <tbody> — основная,
  • <tfoot> — нижняя,
  • <tr> — строка,
  • <td> — ячейка.

Также с помощью HTML-тегов можно объединить ячейки.

Списки

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

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

Индексы и ссылки

Индексы

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

Для добавления подстрочных и надстрочных знаков используют теги:

  • <sup> — верхний индекс,
  • <sub> — нижний индекс.

Ссылки

Ссылкой называют фрагмент HTML-документа и один из его базовых элементов. Ссылка создаётся при помощи тега <а>, например:

  • <a href=»http://nimax.ru»>Сайт агентства Nimax</a>

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

  • rel — используется для установления дополнительных отношений между текущим документом и тем, на который ссылаются;
  • target — указывает, где открывать ссылку;
  • title — задаёт текст-подсказку, который при наведении на ссылку всплывает.

Пример 1

Для ссылки https://site.com/write.html в атрибут href вводимhttps://tite.com/write.html.

Пример 2

Для ссылки http://blog.site.com/work/ в HTML в атрибут href записываем /work/. Ссылки же на внешние ресурсы выводим в первоначальном виде.

Ссылки на номера телефонов и Skype

Для телефонных номеров:

  • href=»tel:+79061759949″

Для адресов электронной почты:

  • href=»mailto:info@burjua.me»

Запишите атрибут в href:

  • href=»skype:burjua-skype»

Звонок:

  • href=»skype:burjua-skype?call»

Открытие чата:

  • href=»skype:burjua-skype?chat»

Для ссылок, ведущих на хостинг YouTube, Vimeo, Slideshare, необходимо разместить контент на странице: нужно нажать на «Поделиться/Share/Embed» и скопировать код HTML.

Работа с изображениями

Подготовка картинок

  1. Прежде всего, нужно указать размер и формат.

Эти критерии очень важны, т.к. для веб-страниц можно использовать только те изображения, размер которых не превышает 800px. Если речь идёт о векторном изображении, то растрировать его не нужно. Также обратите внимание на то, какой формат имеют ваши изображения: JPG или PNG.

  1. Следующим шагом станет изменение размера через Adobe Photoshop

File → Save for Web или Ctrl+Alt+Shift+S (Cmd+Alt+Shift+S) →выбрать подходящий формат→настроить параметры.

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

Вставка картинок

Для вставки иллюстраций и фото используют тег <img>.

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

Тегу <img> можно задать следующие атрибуты:

  • src — путь до изображения на сервере,
  • width — ширина изображения,
  • height — высота изображений,
  • alt — альтернативный текст (текстовое описание изображения).

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

Выделение текста

Для того, чтобы привлечь внимание читателя, можно некоторые фрагменты текста сделать контрастными. Например, слова, которые задают ссылку на другой ресурс выделяют подчёркиванием, жирным шрифтом, курсивом. Для этого используют теги <strong>, <em> и <mark>.

Оформление текста

Существуют единые правила для оформления текста или текстовых элементов; эти правила могут применяться и в печатных изданиях, и в текстах веб-страниц.
Ниже приведён ряд основных правил:

  1. В русском языке используют кавычки-ёлочки «…».
  2. Если фраза с кавычками содержит в себе ещё одни кавычки, то ставятся двойные кавычки-«лапки»: „…”.
  3. Знак препинания в конце каждого пункта списка любого типа определяет, с какой буквы будет следующий пункт: если в конце точка, то с прописной, если запятая — строчной.
  4. При добавлении изображений в материал лучше всего добавлять к каждому подпись. Если текст сопровождает большое количество изображений, стоит ссылаться на них в тексте выше.
  5. Проверьте правильность написания буквы «ё».
  6. Не путайте дефис (-), тире (—) и знак минус (−).

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

  1. Внутренние и внешние отступы;
  2. Высота и ширина;
  3. цвет;
  4. интерлиньяж и кегль;
  5. выравнивание текста.

Инструменты

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

  1. Notepad++ — текстовый редактор с подсветкой синтаксиса, который поддерживает различные плагины. Он подойдёт опытным пользователям.
  2. Advergo — сервис для проверки орфографии. Позволяет выполнить SEO-анализ текста и проверить его на уникальность.
  3. «Типограф» от «Студии Артемия Лебедева». Сервис поможет проверить правильность форматирования некоторых элементов перед публикацией.
  4. Adobe Photoshop / GIMP / Paint.NET — инструменты, позволяющие привести изображения к одному размеру, подправить цвета, выбрать в нужный формат.
  5. Inkscape — удобный инструмент для быстрой правки векторных изображений.

Изучение CMS

CMS (Content management system) — это система управления содержимым, позволяющая наполнить сайт.  Важно научиться работать в CMS-системе сайта:

  1. «1C-Битрикс». Курсы контент-менеджера.
  2. HostCMS. Документация. Документация скорее для программистов, но найти информацию по наполнению также можно.
  3. CS-Cart. Документация.
  4. Joomla. Документация.
  5. NetCat. Уроки и документация.
  6. UMI.CMS. Руководство пользователя.
  7. Drupal. База знаний от веб-разработчика.