Понимание базового HTML абсолютно необходимо, когда вы ведете блог. Если вы еще не знаете, HTML- это язык гипертекстовой разметки. Это язык кодирования, который сообщает вашему веб-браузеру, как читать веб-страницу. Последняя версия- HTML5.1, является пятой и основной версией языка разметки HTML на сегодняшний день.
Для новичков весь код, на первый взгляд, выглядит непонятным и беспорядочным набором символов и слов. Но, не обязательно быть программистом или гением, чтобы разбираться в нем и добавлять некоторые теги в документы своего блога.
Фактически любой блоггер может использовать некоторые теги, даже не понимая больших частей кода. Для этого достаточно понять основные теги и знать как их прописать. В идеале лучше сделать некую шпаргалку и обращаться к ней по мере необходимости. Просмотреть код статьи можно нажав на правую кнопку записи:
Конечно, WordPress максимально упрощает жизнь блоггерам, в админке свободно можно поставить или убрать ссылку в тексте, изменить размер картинки, сделать маркированные списки, менять заголовки H1, H2, H3 и т. д. А вот поставить ссылку на картинку нужно самостоятельно.
HTML-теги являются контейнерами для этих различных типов элементов. Они состоят из угловых скобок с атрибутами и значениями или аббревиатурой для каждого кода внутри них. Теги обычно открываются с помощью угловых скобок <> , а когда закрываются, к ним добавляется знак слеша (косая палочка) — </>.
Теперь давайте рассмотрим основные HTML-теги, с которыми вам придется сталкиваться в текстах своего блога.
Создание списков
Как я уже упоминал выше, в Wordpressе есть два вида списков: маркированный (1) и упорядоченный (2). Выглядят они соответственно, вот так:
(1)
(2)
В некоторых случаях, нужно показать списки с описанием или вложенные списки. Для них используется тег <dl></dl> списки определений (с описанием) и <dt></dt>, но это еще не все и нужно добавить маркеры. Маркеры прописываются с помощью тега <dd></dd>.
Теги изображений
Изображения — важная часть любого блога. Но знаете ли вы, как использовать теги изображений для настройки изображений и вставлять в них ссылки? Для чего вставлять ссылки в изображения? Например: перенаправить пользователя на лендинг партнерской программы.
Для картинок используется тег- <img>.
Попробуйте нажать на картинку и вы перейдете по партнерской ссылке. Вот полная конструкция кода:
<a href="партнерская ссылка" target="_blank"><img src="ссылка на картинку" /></a>
target="_blank"- указывает что ссылку нужно открыть в новой вкладке. Такие конструкции можно вставлять и в сайтбаре.
Горизонтальные линии
Горизонтальные линии — еще один полезный вид тега, поскольку они разбивают ваш текст. Вы можете использовать тег <hr />, чтобы обозначать изменения в теме вашего письма, разделять разные разделы контента или придавать определенному разделу большее значение, чем другие.
Вот так они выглядят, просто вставьте тег <hr />, в нужное место в тексте. Во втором случае добавлено ограничение <hr width = «40%»>
Вставка видео
Добавлять видео в контент страницы или сайдбара, так же совсем не сложно, достаточно вставить готовую конструкцию в то место где вы хотите разместить ролик:
Вывод
Чтобы настроить контент именно так, как вы этого хотите, вам необходимо разбираться в HTML. HTML5.1 невероятно популярен и вам не обязательно быть гением кодирования или профессиональным веб-разработчиком, чтобы использовать его.
Элементарные знания кода понадобятся при настройке лендинга, установке баннеров на блоге, видео и фото. От себя могу посоветовать бесплатный курс Михаила Русакова "HTML и CSS для начинающих".