Об авторе

HTML для блоггера

html-tagsПонимание базового HTML абсолютно необходимо, когда вы ведете блог. Если вы еще не знаете, HTML- это язык гипертекстовой разметки. Это язык кодирования, который сообщает вашему веб-браузеру, как читать веб-страницу. Последняя версия- HTML5.1, является пятой и основной версией языка разметки HTML на сегодняшний день.

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

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

tags

Конечно, WordPress максимально упрощает жизнь блоггерам, в админке свободно можно поставить или убрать ссылку в тексте, изменить размер картинки, сделать маркированные списки, менять заголовки H1, H2, H3 и т. д. А вот поставить ссылку на картинку нужно самостоятельно.

HTML-теги являются контейнерами для этих различных типов элементов. Они состоят из угловых скобок с атрибутами и значениями или аббревиатурой для каждого кода внутри них. Теги обычно открываются с помощью угловых скобок <> , а когда закрываются, к ним добавляется знак слеша (косая палочка) — </>.

Теперь давайте рассмотрим основные HTML-теги, с которыми вам придется сталкиваться  в текстах своего блога.

Создание списков

Как я уже упоминал выше, в Wordpressе есть два вида списков: маркированный (1) и упорядоченный (2). Выглядят они соответственно, вот так:

(1)        spisok1                               teg_ul1

(2)

spisok2

teg_li2

В некоторых случаях, нужно показать списки с описанием или вложенные списки. Для них используется тег <dl></dl> списки определений (с описанием) и <dt></dt>, но это еще не все и нужно добавить маркеры. Маркеры прописываются с помощью тега <dd></dd>.

teg_dt

ted_dl

Теги изображений

Изображения — важная часть любого блога. Но знаете ли вы, как использовать теги изображений для настройки изображений и вставлять в них ссылки? Для чего вставлять ссылки в изображения? Например: перенаправить пользователя на лендинг партнерской программы.

Для картинок используется тег- <img>.

sozdatel_saitov

Попробуйте нажать на картинку и вы перейдете по партнерской ссылке. Вот полная конструкция кода:

<a href="партнерская ссылка" target="_blank"><img src="ссылка на картинку" /></a>

target="_blank"- указывает что ссылку нужно открыть в новой вкладке. Такие конструкции можно вставлять и в сайтбаре.

Горизонтальные линии


Горизонтальные линии — еще один полезный вид тега, поскольку они разбивают ваш текст. Вы можете использовать тег <hr />, чтобы обозначать изменения в теме вашего письма, разделять разные разделы контента или придавать определенному разделу большее значение, чем другие.


Вот так они выглядят, просто вставьте тег <hr />, в нужное место в тексте. Во втором случае добавлено ограничение <hr width = «40%»>

Вставка видео

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

youtube

youtube

Вывод

Чтобы настроить контент именно так, как вы этого хотите, вам необходимо разбираться в HTML. HTML5.1 невероятно популярен и вам не обязательно быть гением кодирования или профессиональным веб-разработчиком, чтобы использовать его.

Элементарные знания кода понадобятся при настройке лендинга, установке баннеров на блоге, видео и фото. От себя могу посоветовать бесплатный курс по HTML  Евгения Попова «Базовый курс».

Забирайте и изучайте!==>>

html

С Уважением, Александр Клюев.

 


Вам так же будет интересно

Предыдущий пост:     ←
Следующий пост:    

Оставить свой комментарий