VisualEditor

Краткие сведения про теги Html

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

<p><strong>Параграф с полужирным текстом</strong></p>

Подробнее можно узнать на странице википедии: Элементы HTML

1. Простой текст

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

2. Добавление заголовков

Текст на странице может содержать заголовки разного уровня, от первого до шестого (теги h1-h6). По умолчанию, заголовки первого уровня имеют самый крупный шрифт, второго уровня - немного меньше, и т.д. Самый мелкий шрифт - у заголовка шестого уровня. На странице должен быть только один заголовок первого уровня.

Для того, чтобы сделать текст в визуальном редакторе заголовком, необходимо поставить курсор на нужную строку и выбрать в выпадающем списке "Формат" значение "Заголовок 1".

В результате тег текста в нижней части редактора сменился на h1.

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

3. Полужирный текст

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

Так же, как и в программе Microsoft Word, чтобы сделать текст полужирным, нужно выделить мышкой необходимую область и нажать вышеуказанную кнопку. Если вы обратите внимание на нижнюю часть редактора, то увидите иерархию тегов "p >> strong". Именно такая вложенность элементов была упомянута в самом начале статьи, в кратких сведениях про теги Html, и теперь вы видите результат.

4. Добавление классов элементам

Для того, чтобы добавить класс (или несколько классов) какому-либо элементу, нужно выделить мышкой нужную область или поставить на конкретном элементе курсор и нажать кнопку "Добавить/Изменить элемент":

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

Поставив курсор на элемент и посмотрев в нижнюю часть редактора, можно убедиться в том, что класс (или классы) был добавлен.

5. Добавление ссылок

Для добавления ссылки в текст, нужно выделить нужную его часть и нажать иконку "Добавить/Изменить ссылку", для удаления ссылки (но не самого текста) используется одноименная иконка рядом:

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

Если необходимых классов в списке нет, то на вкладке "Дополнительно" того же окна можно добавить собственные классы. Добавить классы для ссылки можно и ранее описанным способом при помощи кнопки "Добавить/Изменить элемент".

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

6. Добавление картинок

Для того, чтобы добавить картинку, поставьте курсор в нужном месте и нажмите иконку "Добавить/Изменить изображение":

Откроется окно параметров изображения, где обязательно нужно указать путь к картинке (адрес), описание (альтернативный текст, который виден при отсутствии файла), желательно заголовок (показывается при наведении на картинку). В области предварительного просмотра, сразу же после указания адреса, вы можете увидеть свое изображение. Путь к картинке, уже имеющейся в загруженных файлах в ПУ, вы можете найти в Панели Управления -> "Управление контентом" -> "Файлы" -> столбец "URL". Копировать путь следует начиная с "getfile" до конца строки адреса.

На вкладке "Положение" того же окна вы можете отрегулировать положение картинки относительно окружающего контента. Для тех, кто разбирается в css, в поле "Стиль" есть возможность изменить стили отображения на желаемые, например, убрать отступы снизу и слева, как на скриншоте: