Posted:
Янв 14, 2023
Comments:
0 Comments

Css в маркетинге: 20 базовых HTML & CSS приемов для маркетологов

Содержание

20 базовых HTML & CSS приемов для маркетологов


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


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

  • Что такое HTML? (коротко о главном)

1. Как посмотреть фронтэнд любого сайта


Front-end, или программная составляющая интерфейса сайта, не видна обычному пользователю. Однако, в некоторых ситуациях может возникнуть необходимость посмотреть код какого-либо элемента страницы или всю структуру целиком.


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

«Просмотр кода страницы» в Chrome

«Просмотр кода элемента» в Chrome

2. Строение и принципы работы HTML-таблиц


Таблицы часто являются главным строительным элементом email-шаблонов, поэтому маркетологам необходимо знать, как именно они устроены и по какому принципу работают. Вот самый простой пример таблицы из 3 строк и 2 столбцов:


Ниже представлен код этой таблицы с комментариями в формате <!—Комментарий—> для лучшего понимания ее строения:

3. Тег переноса строки <br>


Если у вас возникли сложности с текстом: например, он не переносится на следующую строку в нужном вам месте — добавьте тег переноса строки <br>:

4. Горизонтальный разделитель <hr>


Если хотите разделить ваш текст на несколько смысловых блоков, горизонтальная линия <hr> может стать хорошим вариантом. Этот тег часто используется в новостной email-рассылке или на лендингах, где требуется отделить один ряд информации от другого:

5. Стиль горизонтального разделителя


Стандартный внешний вид разделителя <hr>, как правило, плохо вписывается в основной дизайн страницы. В связи с этим в CSS есть возможность задать ему собственный стиль, который идеально подойдет к шаблону вашего лендинга. Для этого достаточно дать тегу некоторый класс, а затем указать его параметры в коде:

Пример взят с css-tricks.com/examples/hrs

6. Определение цвета и шрифта


Иногда очень важно узнать, какой цвет или шрифт использовался на веб-странице. Чтобы не гадать или искать нужный оттенок на скриншоте в Photoshop, вы можете установить расширение ColorZilla для Chrome: после активации «пипетки» достаточно навести курсор на выбранный элемент, и его цвет появится в следующем окне:


Рядом с цветом (в форматах #ABC и RGB) также показываются размеры элемента и его код на странице. Что же касается шрифта, то для определения понравившейся гарнитуры в Chrome существует расширение WhatFont, работающее по аналогичному принципу:


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

  • 20 бесплатных дизайн-инструментов для маркетолога

7. Убираем пробел под картинкой


Под изображением, находящимся в ячейке таблицы, Gmail нередко вставляет дополнительный пробел. Чтобы избавиться от этой неприятности, к тегу img необходимо добавить style=”display: block”, например, вот так: <img src=”image.jpg” style=”display: block;” />


Результат до и после на скриншотах ниже:

8. Задаем атрибуты тегу <img>


Для того, чтобы вставить изображение, необходимо указать параметры тега <img>: src — ссылка, или URL картинки, alt — название, которое отобразится на ее месте в случае технических проблем, а также ширину (width) и высоту (height) изображения.

9. Добавляем внешние отступы


Margin — это внешний отступ элемента от соседних элементов и/или родительского блока. Отступы прописываются в следующем порядке: верхний, правый, нижний, левый; они могут задаваться как в пикселях (px), так и других единицах, например, в сантиметрах или процентах.


В приведенном примере у второго абзаца с классом class=”example” прописан margin:2cm 4cm 3cm 4cm:

10. Задаем стиль HTML-элементам


Если хотите задать некоторым заголовкам и абзацам страницы красный цвет и выравнивание по центру, то добавив в теги <h2> и <p> произвольный класс, вы можете поменять его свойства в шапке HTML-документа.


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


Так, в примере стиль сработает только при наличии двух условий — тега <p> и класса class=”red-center”:

  • Нейромаркетинг: как оптимизировать дизайн блога?

11. Варианты задания CSS-стилей


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


В некоторых случаях стили элементов прописываются не в отдельном CSS-файле, а встраиваются внутри парного тега <style>, где указываются все необходимые параметры. Встроенные стили бывают полезны, когда шаблон имеет свой уникальный стиль, а вы хотите внести лишь небольшие правки на конкретную страницу (см. пример выше).


Однако, когда вы хотите использовать одинаковое оформление (гарнитура, цвет шрифта и границ, рамки и пр.) для множества страниц сразу, то удобнее внешние стили. Чтобы прикрепить к документу внешний CSS-файл, на него надо указать ссылку в шапке страницы:

Иногда стиль задается напрямую, как атрибут к какому-либо тегу, например, <h2 style=”color:blue; margin-left:30px”>Заголовок</h2>. Этот способ хоть и позволяет внести быстрые изменения во внешний вид элемента, все же он не рекомендуется, так как подобные стили очень трудно отследить в общем коде, а при их корректировке внешними или внутренними стилями могут возникнуть проблемы.

12. Размещаем стили на Google Drive


Если хотите загрузить ваш css-файл на диск Google, то для корректного отображения свойств им необходимо поделиться им с остальными пользователями, задав ему публичные права доступа:

«Public on the web»


Скопируйте предложенную ссылку:

«Copy link»


Теперь вам нужно ее немного изменить, а именно убрать ту часть, которая начинается с /edit. Например, если ссылка выглядит так:

https://docs.google.com/file/d/file_code/edit?usp=sharing


то после изменения она станет:

https://googledrive.com/host/file_code


Полученный вариант ссылки прикрепите к вашему шаблону как внешний CSS-файл (см. предыдущий пункт).

13. Масштабируемые единицы


Размер шрифта, высоты строк или отступов лучше задавать в масштабируемых единицах измерения (em), а не в пикселях (px), чтобы сайт или лендинг был пригодным для просмотра на устройствах с различной величиной экрана.


Например, установив

h2 {

font-size: 2em;

}


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

Адаптивный дизайн — новая эра мобильного маркетинга

14. Внутренние отступы


Представленная ниже иллюстрация как нельзя лучше показывает отличие внешних отступов (margin) от внутренних (padding) и их общее взаимное расположение по отношению к содержимому (content), рамкам (border) и родительскому элементу (выделено точечной линией).


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

padding: 5px 10px 15px 20px;


означает, что верхний отступ равен 5px, правый 10px, нижний 15px, левый 20px.


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

padding: 5px 10px;


говорит о том, пары отступов верхний/нижний и правый/левый составляют 5px и 10 px соответственно.

15. Прикрепляем шрифты Google Fonts


Если вы хотите использовать в шаблоне необычный шрифт, то хорошим источником шрифтов является Google Fonts, откуда вы можете скопировать и вставить в шапку страницы готовый код, предварительно выбрав для него желаемые параметры:

Шрифту задано кириллическое и латинское начертания


Там же находится и название шрифта, которое следует разместить в разделе стилей или во внешнем CSS-файле:

  • Как подключить дополнительные шрифты на целевые страницы в LPgenerator

16. Ширина и высота


Чтобы блоки, изображения и таблицы всегда подстраивались под размеры экрана, а не «выпадали» за его пределы, указывайте их ширину (width) и высоту (height) не в пикселях, а в процентах. Для сохранения пропорций, высоту обычно задают автоматически: auto.

17. Создание и стилизация форм


Формы в HTML создаются парным тегом <form>, внутри которого помещаются различные поля для ввода текста, email-адресов, телефонов, а также выпадающие списки с выбором опций, чекбоксы, кнопки и пр. Так, поле для ввода текста выглядит как <input type=”text”>, а кнопка отправки формы как <input type=”submit”>.


После того, как форма создана, ее необходимо стилизовать — указать размеры и границы полей, шрифтов, отступы, цвет кнопок и другие характеристики, без которых форма будет выглядеть слишком бедно и невыразительно. Описание правил задания стилей формам выходит за рамки этой статьи, приведем лишь небольшой кусок кода и финальный результат:


В примере выше форма начинается с тега <form>, которому задается отдельный класс class=”STYLE-NAME”, чтобы можно было использовать уже созданные стили для других форм с таким же классом:

18. Валидация форм и сообщение об ошибке


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


Можно реализовать данное свойство, задав полям атрибут required, но для большей интерактивности, например, если вы хотите, чтобы появлялось окно об ошибке, следует использовать язык JavaScript:


В данном примере, если значение обязательного поля email при отправке формы осталось незаполненным:

if ( document.contact_form.contact_email.value == «» )


то система выведет на экран «Пожалуйста, заполните поле “Ваш email’».

  • 5 критически важных компонентов лид-формы

19. Выравнивание изображений


Чтобы вставленное в текст изображение выравнивалось относительно строки нужным вам образом, тегу img необходимо задать атрибут align:

20. Объединение ячеек


Когда в таблице требуется объединить столбцы или строки, соответствующим <td> задается атрибут colspan для слияния ячеек по горизонтали и rowspan — для слияния по вертикали. В значении атрибута прописывается количество ячеек, которые вы хотите объединить, например:

Горизонтальное объединение 2-х ячеек

Вертикальное объединение 2-х ячеек

Вместо заключения


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


Для иллюстрации примеров использовался бесплатный онлайн-сервис JS Fiddle, где любой желающий может попрактиковаться в своих знаниях HTML & CSS, а при желании — и в JavaScript.


Высоких вам конверсий!

По материалам searchenginepeople.com image source daitozen

30-07-2015

HTML, CSS, JS и общее понимание работы веб-сайтов

HTML, CSS, JS и общее понимание работы веб-сайтов для интернет-маркетологов

Маркетинг имеет массу инструментов, без знаний которых невозможно управлять продажами. Этот огромный пласт знаний надо изучать и усваивать не менее 2-3 лет. Интернет-маркетинг имеет ту же идею и принципы, но делать его нужно, используя совершенно другие инструменты, ведь не зря интернет-маркетинг является отдельной профессией. Это не просто модное название профессии, а другая профессия. И если вы маркетолог, но хотите работать в интернете, то вам необходимо потратить еще немного времени для изучения рабочих инструментов именно интернет-маркетинга.

Мной замечена такая тенденция, что интернет-маркетологи не знают основ работы сайтов и не хотят разбираться в этом. «Я же маркетолог, а все эти технологии для разработчиков», — уже давно не аргумент, поскольку слово «интернет» не зря появилось в названии профессии.

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

Я, как наниматель, склоняюсь к мнению, что маркетологи должны знать и понимать CSS/HTML/JS на базовом уровне, чтобы отличать бекенд (back-end) от фронтента (Front-end), понимать принципы html/css/js и программирования на любом из языков, хотя бы на 3+.

Почему так? Давайте рассуждать!

Экономический эффект

Нам приходится очень много экспериментировать, и далеко не каждый эксперимент даёт положительный результат. И если на каждый эксперимент привлекать разработчика — есть вероятность создать дыру в бюджете, ведь в это время разработчик может как раз работать над вашим замечательным продуктом. Также нужно учитывать, что современные методологии разработки не могут гарантировать вам быстрой реакции разработчика, потому что если он в процессе (спринте), скорее всего он не будет рисковать, связываясь с маркетингом, потому что процесс разработки, как правило, имеет жесткие временные ограничения.

Быстрые правки

Во-первых, вы можете самостоятельно сделать посадочную страницу(landing page). Например, используя Bootstrap, там есть полный набор инструментов и уже всё готово, главное правильно расположить блоки и закинуть тексты и графику.

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

Работа с системами аналитики

Понимание основ работы систем аналитики — тоже важный момент, эта тема других постов. Но тут тоже много JS.

Google Analytics и Яндекс.Метрика подключаются на сайт с помощью JS. Любые взаимодействия, например отправка дополнительных событий — также происходит через JS. Расширять ваши отчёты в Google Analytics, можно используя Custom Dimensions и Custom Metrics — их тоже можно прокинуть в Google Analytics через JS. При использовании Google Tag Manager вы можете прокидывать дополнительные события и переменные с помощью JS (Data Layer или Custom JS).

Вывод: Понимать, курировать и настраивать вэб-аналитику невозможно без знаний работы JS.

Оптимизация конверсии

Если маркетологу не нравится форма или расположение блока и нужно согласовать изменения, достаточно открыть инструмент для разработчика в Chrome или Mozilla, подкрутить html/css и показать разработчику вариант, который будет лучше вписываться в текущую страницу.

Не смогли убедить коллег скриншотом?

Запустите Экперимент в GA или прокиньте ваши изменения через Google Tag Manager на определённый канал трафика. Предоставьте вашим коллегам цифры из систем аналитики, которые докажут вашу правоту.

Работа с сервисами для создания посадочных страниц

Есть много сервисов, которые позволяют делать посадочные страницы по принципу «Drag & Drop». Допустим не работает шаблон, или хочется что-то поставить «правее-левее», а бывает что синий недостаточно синий. В большинстве случаев, эти сервисы позволяют самостоятельно дорабатывать HTML, CSS.

Написание спецификаций

Если следовать принципам MVP (Minimum Viable Product), часто приходится искать наиболее простую реализацию фич («хотелок») для продукта. Поэтому предложения со стороны маркетологов будут огромным плюсом, так как только вы понимаете, зачем вы внедряете каждую из «хотелок».

Email-рассылки

Навыки в HTML и CSS открывают вам возможность развиваться как интернет-маркетолог: сделать письмо и отправить через почтовый сервис — больше не страх и не проблема. Понятно, что есть Drag & Drop решения, но когда ваше письмо один из популярных почтовиков вывернет наизнанку, или будет где-то часами его гонять, или откажется его отправить по разным причинам — вспоминайте этот пост.

HTTP/Веб-сервер/Бекенд/Cookie

Очень часто разработчиков маркетологи заваливают вопросами/предложениями/хотелками:

— А давайте залогиненным пользователям показывать другие товары на экране? Или давайте покажем товары, которые являются аксессуарами для ранее приобретенного этим пользователем товара?

— А давайте если пользователь, которого вы привели, совершит покупку в течение 30 дней — мы дадим вам скидку на следующую покупку или зачислим N денег на ваш бонусный счёт?

— Системы аналитики проставляют куки — а зачем?

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

— Фиксировать транзакции лучше в момент, когда средства поступили на ваш счёт. Ведь не каждый выставленный счёт будет в итоге оплачен, а нам в статистике нужны правильные цифры. Поэтому можно отправить события достижения какого-то уровня пользователем и в дальнейшем по этому параметру построить аудиторию для Adwords.

Если вы хотите развиваться как специалист, охватывать больше каналов, писать крутые спецификации, которые в итоге принесут вам много конверсий и продаж — обязательно изучайте основы интернета. Потому что маркетинг в офлайне значительно отличается от онлайн-маркетинга. Помимо того, что вы должны быть маркетологом изначально, вы должны знать и уметь курировать разработку сайта и настройку web-аналитики, знать рекламные интернет-каналы и как они работают, собирать и анализировать данные. И если вы не умеете настраивать, анализировать и допиливать – вы еще не стали интернет-маркетологом.

Автор: Максим Сундалов, руководитель онлайн школы английского языка EnglishDom

Что такое CSS? [Часто задаваемые вопросы]

  • Блог Hubspot

  • HubSpot.com

Загрузка

    О нет! Мы не смогли найти ничего подобного.

    Попробуйте еще раз поискать, и мы постараемся.

    Дэн Лайонс

    Обновлено:

    18 февраля 2020 г.

    Опубликовано:

    16 сентября 2013 г.

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

    Сегодняшний вопрос: Что такое CSS?

    Это то, что мы получаем часто. Это одна из тех вещей, когда многие люди слышали инициалы, но большинство не знают, что они обозначают. Мы предполагаем, что из 7 миллиардов человек на планете 6,999 миллиарда не знают, что такое CSS.

    Как только вы узнаете, что такое CSS, вы можете обнаружить, что на самом деле вам не нужно знать, что это такое, потому что вам никогда не придется иметь с этим дело — у вас есть дизайнеры или агентства, которые занимаются вашими потребностями в CSS. Но мы поняли. Вы любопытны. Знание — сила. И хорошо хорошо разбираться в языке, которым пользуются ваши дизайнеры и агентства. Так вот.

    Что такое CSS?

    CSS означает каскадные таблицы стилей. По сути, CSS — это язык, который управляет дизайном и представлением веб-страниц — тем, как все выглядит. Он работает вместе с HTML или языком гипертекстовой разметки, который обрабатывает содержимое веб-страниц.

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

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

    Многим достаточно простого старого шаблона блога. Только когда вы хотите начать настраивать внешний вид сайта, вам нужно углубиться в CSS.

    Три таблицы стилей

    Существует три вида таблиц стилей CSS: внешние, внутренние и встроенные.

    Внешние стили управляют тем, как все выглядит на многих страницах веб-сайта.

    Внутренние стили определяют внешний вид только одной страницы.

    Встроенные стили управляют только одним элементом одной страницы, даже одним словом.

    Для получения дополнительной информации о том, как эти таблицы стилей работают вместе или «каскадируют» друг друга, см. этот замечательный учебник от w3schools.com.

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

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

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

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

    Достаточно, чтобы быть опасным

    CSS-код на первый взгляд выглядит довольно странно. Чтобы дать вам представление о том, как это выглядит, мы взяли пример из статьи Mashable о CSS. Взгляните:

    a:link {color:red;}
    a:visited {color:purple;}

    Перевод: непросмотренная ссылка будет выделена красным, а посещенная ссылка будет фиолетовой.

    Но это не так сложно, как кажется. И опять же, многим людям вообще не нужно прикасаться к CSS. Однако, если вы хотите сделать некоторые настройки, вам нужно будет ускорить работу с CSS. Если это так, вам лучше всего купить книгу, подобную этой, чтобы освоиться, а затем — просто начать рубить. Чем больше вы практикуетесь, тем лучше и свободнее вы будете говорить.

    Изображение предоставлено: Стефан Боди

    Темы:

    Развитие веб-сайта

    Не забудьте поделиться этим постом!

    Связанные статьи

    • 15 лучших бесплатных конструкторов сайтов, которые стоит попробовать в 2023 году

      16 сентября 2022 г.

    • 12 лучших языков программирования для изучения в 2022 году

      27 апр. 2022 г.

    • Вводный курс по SQL: как писать простые запросы

      21 марта 2022 г.

    • 7 лучших альтернатив Leadpages в 2022 году

      08 марта 2022 г.

    • Нужен ли моему бизнесу веб-сайт? 12 причин почему и 5 причин почему нет

      19 нояб. 2021 г.

    • Как добавить HTML-коды для встраивания на ваш сайт [Быстрый совет]

      26 авг. 2021 г.

    • Веб-дизайн 101: как работают HTML, CSS и JavaScript

      19 окт. 2020 г.

    • 11 лучших альтернатив и конкурентов ClickFunnels в 2021 году

      30 сент. 2020 г.

    • Как нанять внештатного веб-разработчика

      25 июня 2020 г.

    • 4 лучших программных инструмента для управления контентом в 2020 году

      31 мая 2019 г.

    Краткое руководство по HTML и CSS для цифрового маркетолога

    Сегодня от цифровых маркетологов ожидают высокой креативности, аналитики, работы с данными и технических знаний, но изучение HTML и CSS является обязательным навыком для цифровых маркетологов. ?

    Наш ответ: конечно!

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

    Понимание основ HTML и CSS даст вам инструменты для понимания того, как создается веб-сайт, как он работает и как манипулировать лежащим в его основе кодом.

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

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

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

    • Что такое HTML?
    • Что делает HTML?
    • Как создать файл HTML?
    • Как написать HTML-код?
    • Теги заголовков
    • Теги заголовков
    • Метатеги
    • Теги тела
    • Теги таблицы
    • Теги упорядоченного и неупорядоченного списка
    • Метатеги Open Graph
    • Что такое CSS?
    • Как работает CSS?
    • Внешняя таблица стилей
    • Внутренние/встроенные стили
    • Встроенные стили
    • Импорт стилей
    • Как написать код CSS?
    • Форматирование текста
    • Форматирование шрифта
    • Поля
    • Дополнительные ресурсы

    Начнем!

    Базовый HTML, который должен знать каждый маркетолог

    Что такое HTML?

    HTML (язык гипертекстовой разметки) — это компьютерный язык, используемый для создания веб-страниц и веб-приложений. HTML включает в себя использование тегов — шорткодов, которые вы вводите в текстовый файл, — которые ваш браузер будет читать и отображать визуально. Базовый HTML выглядит примерно так:

    Что делает HTML?

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

    Как создать файл HTML?

    Чтобы создать файл HTML, используйте один из следующих текстовых редакторов: Блокнот (для Windows) или TextEdit (для Mac). Щелкните здесь, чтобы узнать, как создать HTML-документ с помощью Блокнота и TextEdit.

    Кроме того, многие системы управления контентом имеют встроенный текстовый редактор, позволяющий редактировать HTML-код страницы.

    Вернуться к началу

    Как написать код HTML?

    HTML содержит элементов , которые состоят из начального тега, конечного тега и содержимого между ними. В целом элемент будет выглядеть так:

    В приведенном выше примере

    — это начальный тег,

    — конечный тег и «Мой первый абзац». это содержимое элемента. В других примерах, которые вы увидите в этом руководстве, вы заметите, что вы можете размещать элементы внутри других элементов, например, тег

    внутри тега .

    Кроме того, элементы могут иметь 9Атрибуты 0036, , которые предоставляют дополнительную информацию об элементе. Например, тег обозначает HTML-изображение, но добавление атрибута « src » отображает источник изображения.

    Теперь, когда мы понимаем структуру элементов HTML, вот несколько элементов и атрибутов, с которыми должен быть знаком каждый цифровой маркетолог. Для более глубокого изучения HTML мы предоставим некоторые дополнительные ресурсы, на которые вы можете ссылаться в конце этого поста.

    Начнем сверху с….

    Теги заголовков

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

    Существует 6 уровней тегов заголовков, ранжированных по степени важности: от

    до

    . Тег заголовка

    должен содержать самую важную информацию о веб-странице, такую ​​как заголовок и основные ключевые слова. Чуть менее важная информация и ключевые слова могут быть в

    тегов и так далее.

    Примечание. Тег заголовка — это , а не , как и тег.

    Теги заголовка

    Тег заголовка ( ) используется для отображения информации о самой веб-странице. В теге head вы можете включить такую ​​информацию, как заголовок веб-страницы (), стили (</p><style>@import </strong>в тегах <strong></p><style></strong>. Этот вариант отлично подходит,если у вас большой веб-сайт,который требует большого количества стилей CSS и нескольких таблиц стилей.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/aa/6a/8c/aa6a8ca724657431f17d75582b659e89.jpg'/><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/aa/6a/8c/aa6a8ca724657431f17d75582b659e89.jpg'/></noscript>Это будет выглядеть примерно так:</p><h4></h4><p><strong>Как написать код CSS? </strong></h4><p>Синтаксис CSS содержит два основных компонента:<strong>селектор </strong>и <strong>блок объявлений </strong>. Селектор указывает,какой элемент HTML вы хотите стилизовать. В приведенном ниже примере селектор «p»,что означает,что я хотел бы стилизовать абзац. </p><p>Блок объявлений — это весь текст,заключенный в фигурные скобки. Каждое объявление может содержать одно или несколько объявлений,и каждое объявление имеет свойство и значение. В приведенном ниже примере текст красного цвета — это свойство,а текст зеленого цвета — значение. Также обратите внимание,что каждое объявление отделяется точкой с запятой. </p><p>Теперь,когда вы поняли,как писать код CSS,давайте сразу перейдем к синтаксису CSS! </p><h5></h5><p><strong>Вернуться к началу </strong></h5><h4></h4><p><strong>Форматирование текста </strong></h4><p>С помощью CSS мы можем изменить цвет,стиль,межстрочный интервал,выравнивание и многое другое в тексте на нашем веб-сайте.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/1/0/1/101298adbc73e9b674709f1d9c06753c.png'/><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/1/0/1/101298adbc73e9b674709f1d9c06753c.png'/></noscript></p><h5></h5><p><strong>Text-align   </strong></h5><p>Начнем с выравнивания текста. Это включает в себя выравнивание моего текста по левому,правому краю,по центру или по ширине (где каждая строка растягивается,чтобы иметь одинаковую ширину). Чтобы выровнять текст,используйте <strong>«выравнивание текста» </strong>свойство. </p><p>Если я хочу,например,центрировать абзац,синтаксис CSS будет выглядеть примерно так:</p><h5></h5><p><strong>Text-indent </strong></h5><p>Чтобы сделать отступ первой строки абзаца,используйте свойство <strong>text-indent </strong>. . </p><h5></h5><p><strong>Межбуквенный интервал </strong></h5><p>Чтобы отрегулировать интервал между буквами в заголовках или абзацах,используйте свойство « <strong>межбуквенный интервал </strong>»,чтобы внести необходимые корректировки. </p><h5></h5><p><strong>Высота строки </strong></h5><p>Если вы хотите настроить расстояние между каждой строкой текста,используйте свойство <strong>«высота строки» </strong>. </p><h5></h5><p><strong>Цвет </strong></h5><p>Чтобы настроить цвет текста на веб-странице,используйте свойство «цвет»,чтобы указать имя цвета,шестнадцатеричный код или значение RGB.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/d/f/cdf978c897855de605c49171e7ada2d0.png'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/d/f/cdf978c897855de605c49171e7ada2d0.png'/></noscript></p><h5></h5><p><strong>Вернуться к началу </strong></h5><h4></h4><p><strong>Форматирование шрифта </strong></h4><p>В этом руководстве для начинающих мы сосредоточимся на трех свойствах шрифта CSS:семействах шрифтов,стиле шрифта и размере шрифта. </p><h5></h5><p><strong>Семейства шрифтов </strong></h5><p>В блоке объявления CSS вы можете увидеть два типа семейств шрифтов. Если вы видите «Times New Roman» или «Arial» в блоке объявлений,это конкретные семейства шрифтов <strong></strong>. Если вы видите «Serif» или «Sans-serif»,они считаются <strong>родовыми семействами </strong>. </p><p>Чтобы использовать свойство «font-family»,начните с семейства шрифтов по вашему выбору,а затем выберите общее семейство,как в примере ниже. </p><h5></h5><p><strong>Стиль шрифта </strong></h5><p>Свойство <strong>«стиль шрифта» </strong>в основном используется для того,чтобы отличить обычный текст от текста,выделенного курсивом. Для обычного текста значение будет <strong>«нормальный» </strong>,как в примере ниже.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/burenka33.ru/wp-content/uploads/0/e/c/0ec0705ba50b292174cca227ec346cd8.jpeg'/><noscript><img loading='lazy' src='/800/600/http/burenka33.ru/wp-content/uploads/0/e/c/0ec0705ba50b292174cca227ec346cd8.jpeg'/></noscript></p><p>Аналогично,для отображения текста курсивом значение будет <strong>«курсив» </strong>. </p><h5></h5><p><strong>Размер шрифта </strong></h5><p>В этом руководстве мы сосредоточимся на использовании свойства «<strong>font-size» </strong>для настройки размера текста в пикселях и процентах. </p><p>Для контекста размер текста внутри абзаца по умолчанию составляет 16 пикселей. Если вы хотите увеличить размер текста абзаца,просто используйте свойство «размер шрифта»,за которым следует количество пикселей в качестве значения. </p><p>Кроме того,вы можете увеличить весь текст внутри тега <strong><body></strong>,используя проценты. Помните,размер текста абзаца по умолчанию составляет 16 пикселей,что равно 100%. Вот как это будет выглядеть,если я захочу увеличить размер основного текста до 120%. </p><p>При публикации текст будет выглядеть следующим образом:</p><p>Фото:KyleSchaffer.com </p><h5></h5><p><strong>Поля </strong></h5><p>В CSS свойство «поле» позволяет создавать пустое пространство вокруг элемента.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/burenka33.ru/wp-content/uploads/3/4/4/3441df2ffacdbbcb235de9ae4fc014bf.jpeg'/><noscript><img loading='lazy' src='/800/600/http/burenka33.ru/wp-content/uploads/3/4/4/3441df2ffacdbbcb235de9ae4fc014bf.jpeg'/></noscript>Скорее всего,вы увидите одно из этих четырех свойств поля:</p><ul role="list"><li>«Отступ сверху» — регулирует отступ над элементом. </li><li>«Поле-нижнее» — регулирует поле над элементом. </li><li>«margin-right» — настраивает поле справа от элемента. </li><li>«поле слева» — настраивает поле слева от элемента. </li></ul><p>Чтобы указать расстояние между вашими полями,вы,скорее всего,увидите в качестве значения px,но также часто используются значения pts,cm и %. </p><p>Следует отметить,что вы также можете увидеть сокращенную версию этого кода. Вместо того,чтобы разработчик использовал 4 разных свойства «margin»,он может сократить его,просто используя «margin» в качестве свойства. Следовательно,приведенный выше пример можно переписать как:</p><p>В этом сокращенном коде первое значение относится к верхнему полю,второе — к правому полю,третье — к нижнему полю,а четвертое — к левому полю. </p><h5></h5><p><strong>Вернуться к началу </strong></h5><p>Уф! Это было много информации,но еще так много нужно узнать о HTML и CSS.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/2/e/32ee1e40247b2b1c5abcf7cd7026ec99.png'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/2/e/32ee1e40247b2b1c5abcf7cd7026ec99.png'/></noscript></p><div class="clear"></div><p class="inner-meta">This entry was posted in <a href="https://consei.ru/category/populyarnoe" rel="category tag">Популярное</a></p></div><div class="post comments" id="comments"><!-- You can start editing here. --></div></div></div></div><!-- END Narrowcolumn --><div id="sidebar" class="profile"><ul><li class="widget png_scale" id="widget_categories"><h2 class="blocktitle"><span>Рубрики</span></h2><ul><li class="cat-item cat-item-23"><a href="https://consei.ru/category/adsense">Adsense</a>(3) </li><li class="cat-item cat-item-20"><a href="https://consei.ru/category/chrome">Chrome</a>(2) </li><li class="cat-item cat-item-19"><a href="https://consei.ru/category/direkt">Директ</a>(86) </li><li class="cat-item cat-item-18"><a href="https://consei.ru/category/dorvei">Дорвеи</a>(39) </li><li class="cat-item cat-item-15"><a href="https://consei.ru/category/klyuchevye-slova">Ключевые слова</a>(238) </li><li class="cat-item cat-item-14"><a href="https://consei.ru/category/lendingi">Лендинги</a>(78) </li><li class="cat-item cat-item-12"><a href="https://consei.ru/category/populyarnoe">Популярное</a>(12 ),метаданные и многое другое.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/0/3/e/03e568d6e7f4de61fe187abe54f7ece7.jpeg'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/0/3/e/03e568d6e7f4de61fe187abe54f7ece7.jpeg'/></noscript></p><h4></h4><p><strong>Метатеги </strong></h4><p>Как мы упоминали ранее,метаинформация включается в тег заголовка. <strong>Метатеги </strong>(<strong><meta></strong>) предоставляют метаданные о веб-странице,которые не отображаются визуально,а также считываются поисковыми системами. </p><p>Вот несколько распространенных примеров метатегов:</p><ul role="list"><li><strong><meta name="description"></strong>используется для описания содержимого страницы. </li><li><strong><meta name="author"></strong>используется для идентификации автора веб-страницы. </li></ul><p>В приведенном ниже примере вы также заметите,что существуют различные атрибуты,обычно связанные с числом 9.0036 <meta></strong>тег,такой как «имя»,«контент» и «свойство». Щелкните здесь,чтобы узнать больше об атрибутах тегов <strong><meta></strong>. </p><h5></h5><p><strong>Вернуться к началу </strong></h5><h4></h4><p><strong>Теги тела </strong></h4><p>Тег тела <strong></strong>(<strong><body></strong>) используется для обозначения тела веб-страницы,где находится текст,ссылки,изображения,таблицы и другое содержимое.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/d0/0a/a4/d00aa41d2ce8555cbc029cd6f72c7804--inbound-marketing-online-marketing.jpg'/><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/d0/0a/a4/d00aa41d2ce8555cbc029cd6f72c7804--inbound-marketing-online-marketing.jpg'/></noscript>отображается. </p><p>Эти теги обычно встречаются внутри тега body:</p><ul role="list"><li><strong><p></strong>указывает на абзац в основном тексте. </li><li><strong><img></strong>указывает на изображение в теле веб-страницы. Вы также можете увидеть их с двумя атрибутами:src и alt. Атрибут src указывает URL-адрес изображения,а alt указывает замещающий текст,назначенный изображению. </li><li>Тег <strong><a href></strong>используется для создания гиперссылок на текст и изображения. </li></ul><h4></h4><p><strong>Теги таблицы </strong></h4><p>Чтобы создать таблицу на веб-странице,вы начнете с использования <strong>Тег таблицы </strong><strong></p><table></strong>с одним или несколькими из следующих элементов:<strong></p><tr></strong>для указания строки в таблице,<strong></p><td></strong>для указания информации в ячейке таблицы и <strong></p><th></strong>для заголовка таблицы. </p><p>В приведенном выше примере я указал заголовки двух строк в таблице — «Еженедельные расходы» и «Еженедельный бюджет»,а затем заполнил ячейки второй строки соответствующими данными.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/efimovfree.ru/wp-content/uploads/e/3/b/e3b0ac1c9ccce42a20988e6a419d41a6.png'/><noscript><img loading='lazy' src='/800/600/http/efimovfree.ru/wp-content/uploads/e/3/b/e3b0ac1c9ccce42a20988e6a419d41a6.png'/></noscript>После публикации моя таблица будет выглядеть примерно так:</p><h4></h4><p><strong>Теги упорядоченных и неупорядоченных списков </strong></h4><p>В HTML существует два типа списков:<strong>упорядоченные (нумерованные) и неупорядоченные списки </strong>. Тег <strong></p><ol></strong>указывает на упорядоченный список,в котором информация отображается в алфавитном или числовом порядке. Тег <strong></p><li></strong>указывает на отдельный элемент в вашем списке. Например,вот как мой список дел отображается в HTML:</p><p>Конечный продукт будет выглядеть так:</p><ol role="list"><li>Купить яйца </li><li>Забрать из химчистки </li><li>Убрать на кухне </li></ol><p>Напротив,если я хочу отобразить список предметов в произвольном порядке,я буду использовать тег <strong></p><ol></strong>для создания неупорядоченного списка,который будет отображаться мои элементы в формате маркированного списка. Вот как будет выглядеть мой список дел в ненумерованном списке:</p><p>Вот как выглядит конечный продукт:</p><ul role="list"><li>Купить яйца </li><li>Забрать в химчистку </li><li>Убрать на кухне </li></ul><h5></h5><p><strong>Вернуться к началу </strong></h5><h4></h4><p><strong>Метатеги Open Graph </strong></h4><p>Вы когда-нибудь задумывались,как платформы социальных сетей могут отображать предварительный просмотр вашего контента,когда вы включаете ссылку в публикацию? </p><p>Представляем <strong>метатегов Open Graph </strong>.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn-edge.kwork.ru/pics/t3/17/240006-1.jpg'/><noscript><img loading='lazy' src='/800/600/http/cdn-edge.kwork.ru/pics/t3/17/240006-1.jpg'/></noscript>Это социальные метатеги,которые распознаются самыми популярными платформами социальных сетей,включая Facebook,LinkedIn и Google Plus. (<em>Обратите внимание,что в этом процессе используются разные метатеги для карточек Twitter. </em><em>Щелкните здесь </em><em>для получения дополнительной информации. </em>) </p><p>В отличие от других элементов HTML,таких как <strong><head></strong>или <strong></p><table></strong>,метатеги open graph являются атрибутами,прикрепленными к тегу <strong><meta></strong>. </p><p>Вот теги Open Graph,с которыми вы,вероятно,столкнетесь:</p><ul role="list"><li>Подобно тегу <strong><title></strong>,атрибут <strong>«og:title» </strong>— это заголовок,который платформа социальных сетей будет отображать в вашем сообщении. Если вы не укажете <strong>«og:title» </strong>,то он,вероятно,будет использовать информацию из тега <strong><title></strong>. </li><li>Как и его аналог <strong><meta name="description"></strong>,атрибут <strong>«og:description» </strong>позволяет описать содержимое вашей веб-страницы и будет отображаться под заголовком вашего поста в социальной сети.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/7/824391/slide_26.jpg'/><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/7/824391/slide_26.jpg'/></noscript></li><li>Атрибут <strong>«og:image» </strong>позволяет вам выбрать изображение,которое вы хотите отображать в своей публикации в социальной сети. Обратите внимание,что во многих системах управления контентом эта фотография будет «избранным изображением»,но в случае,если платформа социальной сети случайно удалит другую фотографию со страницы или,что еще хуже,вообще не отобразит изображение,вы можете быстро исправить это с <strong>«og:image» </strong>атрибут. </li><li>Атрибут <strong>«og:type» </strong>описывает тип контента,представленного на вашей веб-странице. Обычно в качестве значения вы видите «веб-сайт»,но вы можете использовать и другие значения,такие как «статья»,«автор»,«видео»,«книга» и т. д. CSS,который должен знать каждый маркетолог </strong></h3><h4></h4><p><strong>Что такое CSS? </strong></h4><p><strong>CSS (каскадные таблицы стилей) </strong>— это язык программирования,который позволяет изменять общий вид HTML-элементов веб-страницы путем редактирования их цвета,макета и шрифтов.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/s/ShCOmZQE9qbs7KMH0gN8RIj5UJ1x2eBoFlVfPu/slide-62.jpg'/><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/s/ShCOmZQE9qbs7KMH0gN8RIj5UJ1x2eBoFlVfPu/slide-62.jpg'/></noscript></p><h4></h4><p><strong>Как работает CSS? </strong></h4><p>При работе с HTML вам потребуется создать HTML-документ с помощью текстового редактора. Но как применить CSS к этому документу? Чтобы стилизовать веб-страницу,вам нужно будет применить файл CSS (известный как таблица стилей <strong></strong>) к вашему HTML-документу. Есть четыре способа применить CSS к вашему HTML-коду. </p><h5></h5><p><strong>1. Внешняя таблица стилей </strong></h5><p>Первый метод — это внешняя таблица стилей <strong></strong>. Это отдельный текстовый файл,содержащий все стили CSS,которые вы хотите применить ко всему веб-сайту. После того,как таблица стилей создана,ее следует сохранить с пометкой 9.0036 Расширение .css </strong>. </p><p>Чтобы связать эту таблицу стилей со своими веб-страницами HTML,вставьте следующую строку между тегами <strong><head></strong>. Конечный результат будет выглядеть примерно так:</p><h5></h5><p><strong>Вернуться к началу </strong></h5><h5></h5><p><strong>2. Внутренние/встроенные стили </strong></h5><p><strong>Внутренние </strong>(также называемые <strong>Встроенные </strong>элементов,позволяющие добавлять элементы) <strong>стилей вашу таблицу стилей прямо в HTML-документ,используя <strong></p><style></strong>тегов внутри <strong><head></strong>тегов.<img class="lazy lazy-hidden" loading='lazy' src="//consei.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.slideplayer.com/24/7231201/slides/slide_4.jpg'/><noscript><img loading='lazy' src='/800/600/http/images.slideplayer.com/24/7231201/slides/slide_4.jpg'/></noscript>Этот параметр используется,когда вам нужен уникальный стиль на одной веб-странице,например на целевой странице. </p><h5></h5><p><strong>3. Встроенные стили </strong></h5><p>Другой вариант — использовать встроенный стиль <strong></strong>для редактирования одного элемента на странице. Это означает,что я могу изменить заголовок раздела на веб-странице,не затрагивая другие заголовки на странице или на остальной части веб-сайта. </p><p>Для этого просто добавьте <strong></p><style></strong>за определенным элементом (в этом примере мой тег <strong></p><h2></h2><p></strong>) без скобок. Затем укажите свойства и значения,которые вы хотите изменить в этом элементе. </p><h5></h5><p><strong>4. Импорт стилей </strong></h5><p>Последним вариантом является <strong>импорт внешней таблицы стилей CSS </strong>с использованием правила <strong>235) </li><li class="cat-item cat-item-17"><a href="https://consei.ru/category/prodvizhenie">Продвижение</a>(498) </li><li class="cat-item cat-item-8"><a href="https://consei.ru/category/raznoe">Разное</a>(41) </li><li class="cat-item cat-item-22"><a href="https://consei.ru/category/rsya">Рся</a>(6) </li><li class="cat-item cat-item-13"><a href="https://consei.ru/category/semanticheskoe-yadro">Семантическое ядро</a>(366) </li><li class="cat-item cat-item-21"><a href="https://consei.ru/category/spam">Спам</a>(10) </li><li class="cat-item cat-item-16"><a href="https://consei.ru/category/ssylochnoe">Ссылочное</a>(73) </li><li class="cat-item cat-item-11"><a href="https://consei.ru/category/ticz">Тиц</a>(381) </li></ul></li></ul></div><div class="clear"></div></div><div class="clear"></div></div><!-- END main wrapper --><div id="footer"><div class="wrapper" style="margin: auto;"><p style="margin-left: 50px; padding-top: 10px;"></p><div style="margin-left: 50px; padding-bottom: 10px; border-bottom: 1px solid #444;"><ul class="clearfix"><li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Подписаться на RSS <br><span>100+Подписчиков</span></li><li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Услуги и реклама<span><br>Я свободен</span></li><li style="padding-right: 8px; height: 32px; padding-left: 43px; margin: 17px 0 0 0; float: left; background-image: ; background-repeat: no-repeat;">Контакты <span><br>Скажи мне привет!</span></li></ul></div><p></p><br><p style="margin-left: 50px; padding-top: 10px;"></p><p style="margin-left: 50px; color: #ffffff;">© Копирование моих статей приветствуется,если вы поставите ссылку на мой блог будет просто математично!</p><div class="clear"></div></div></div><style type="text/css">.archive #nav-above,.archive #nav-below,.search #nav-above,.search #nav-below,.blog #nav-below,.blog #nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content .nav_post_link,.page-link,.post-nav-links,.page-links,#comments .navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none !important}.single-gallery .pagination.gllrpr_pagination{display:block !important}</style><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://consei.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://consei.ru/wp-content/cache/autoptimize/js/autoptimize_3aa3f4eee099f2ae4825514f384a8d8e.js"></script></body></html>