Как писать html код в сообщении

Как писать html код в сообщении

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

Введение. Нужно знать.

1. Если вы ранее (до введения или включения функции) писали в своих сообщениях html (например форум дизайна), то после включения функции эти html теги в таких сообщениях не отразятся, а только в новых (те, что вы напишите после включения html). И наоборот, писали html, отключили функцию, всё написанное в html формате не пропадает.
2. Разрешать html теги в сообщениях опасно и лучше всего этой функцией пользоваться на время. Например, включите функцию только для группы Администраторы, оформите сообщение с использованием html как вы хотите и отключите функцию.

HTML можно применить и в мирных целях:

1. В сообщениях при включённой функции html можно использовать Информеры, которые прекрасно работают;
2. Полезно включить, если вы хотите дать название, описание для своей картинки или текста (теги alt, title);
3. Так же, полезно при составлении номерных списков, если первое значение не 1 (тег start);
4. Есть ещё безумный вариант для безумных людей, но вариант сказать должен. Если вам надо в определенных темах иметь разный вид такста в сообщениях, но вы не хотите заваливать шаблон или файл со стилями раличными группами, то можно в первом сообщении темы написать свой класс, например:

и сообщения писать так:

тогда весь ваш текст будет отражаться именно так как вы захотите только в этой теме. Все будут думать «как же он (она) пишет таким шрифтом, цветом? и т.п.» Для удобства стиль можно назвать именем темы:

и т.д. Не забываем сделать это сообщение «шапкой темы» иначе на новой странице темы стили работать не будут.
5. В общем, вы можете использовать любой html, я только лишь привел примеры.

1. Точно знаю, что опасным и рабочим может быть тег

. С его помощью можно сделать пакости. (Не пишу как, но проверял).
2. Так же могут сделать неприятности с тегов

если вставлять этот тег в первом сообщении страницы и последнем. Вся эта страница не бцдет индексироваться и ни кто знать не будет, так как сам тег не отобразится.
3. Ещё один нюанс с тегом переносом. Можно написать сообщение, ставить тег автопереноса и все посетители будут отправляться в указанную страничку. Например, кто-то напишет сообщение, вы посмотрите всё вроде «ок». Злоумышленник отредактирует сообщение, вставит код и все будут летать до тех пор, пока вы не заметите нововведенную дыру.
Я всего лишь привел малую часть примеров того, как могут пользователи использовать функцию «html в сообщениях». Выводы делайте сами.

Рекомендации к работе.

1. Лучше всего тему с html создавать в отдельном форуме (подфоруме) который видите только вы. Если после создания вы удостоверились, что всё работает верно, смело переносите её в нужное место. Если какой-то сбой (особенно с тегами таблиц) и вы ни как не можете это исправить (мало ли), то можно через панель снести этот подфорум вместе с темой.
2. Перевод строки заменяется тэгом
по умолчанию.
3. Если то, что вы хотите сделать через html можно сделать с помощью вв-кодов, то лучше выбрать второе.

Данная тема просто описывает все плюсы и минусы, опасности и возможности работы функции html в сообщениях на форуме, но далеко не все. Скорее всего она предназначена для начинающих изучать html (типа сайт девочки 14 лет о куклах Барби) чем для супер-дупер продвинутых. Предлагаю обсудить все плюсы и минусы функции и помочь ответить на вопросы других пользователей. И не пишите типа «да это мы и без тебя знаем», уверен, что кто-то это не знал.

Как собирать html-письма

Теперь предлагаем немного глубже разобраться в каждом из вариантов.

Вручную

Чтобы создать письмо самостоятельно, нужно хорошо знать HTML и CSS и быть готовым к тому, что писать код вручную — это долго. Верстают письма обычно в редакторах исходного кода, их много разных — например, есть Visual Studio от Microsoft. Выбирайте тот, который вам наиболее понятен по интерфейсу.

Минус такого подхода — письмо собирается очень долго. Плюс — можно все настроить под себя.

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

На аутсорсе

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

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

В блочном редакторе

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

Чтобы им пользоваться, необязательно даже знать, что такое HTML и CSS. Программы обычно интуитивные и максимально простые — там точно не запутаешься. Вы можете создать письмо с нуля внутри редактора или воспользоваться готовыми шаблонами.

Минус — если вы используете шаблоны, возможно, у кого-то из конкурентов вы встретите похожую верстку. Плюс — быстро, дешево, просто.

Типы шаблонов в блочном редакторе

В блочном редакторе обычно есть два типа писем: базовые и тематические.

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

Тематические — это макеты с готовым дизайном. Они всегда идеально подогнаны под разные форматы почты. Вам остается только подставить текст, контакты и логотип бренда. Все!Что выбирать — зависит от ваших задач и возможностей. Стиль, персонализация, колонки — все эти параметры можно менять под себя в любом типе письма. О том, как это сделать, рассказываем в этой статье — почитайте, чтобы больше узнать о своих возможностях.

Добавить пользовательский HTML-код в шаблон письма

Элемент HTML или “Smart block” ( Рис. 1 ) позволяет добавить в шаблон письма пользовательский HTML-код, отметить в нем переменные (текст, цвет шрифта или изображения) и настроить пользовательские макросы для редактирования.

Рис. 1 — Добавление элемента HTML в шаблон письма

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

На заметку. Для использования данного элемента необходимы знания в области web-дизайна и HTML-верстки.

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

Добавить макрос в HTML-код

Вы можете добавить пользовательские макросы в HTML-код элемента HTML . При отправке email-сообщения Creatio заменяет указанные макросы значениями, указанными в настройках элемента HTML . Обновленная функциональность элемента HTML позволяет отметить в коде элемента переменные (текст, цвет шрифта или изображения) и настроить пользовательские макросы для редактирования.

Когда пользователь создает макрос, дизайнер контента генерирует соответствующее поле и сопоставляет значение поля с макросом. Если макрос используется несколько раз в одном и том же элементе HTML , то значение поля будет сопоставлено с каждым экземпляром макроса.

По умолчанию в системе доступны следующие типы макросов:

• Новая строка — однострочный макрос. Подробнее >>>
• Новый текст — многострочный макрос. Подробнее >>>
• Новая картинка — макрос изображения. Подробнее >>>
• Новый цвет — макрос подбора цвета. Подробнее >>>

1. Выберите элемент HTML в шаблоне письма и кликните Редактировать HTML на панели настройки элемента.
2. Выделите часть кода, которую необходимо заменить на макрос.
3. Кликните правой кнопкой мыши на выделенном фрагменте кода. Отобразится контекстное меню макроса.

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

Рис. 2 — Добавление заголовка макроса

Рис. 3 — Новое поле макроса

Удалить макрос из HTML-кода

1. Выберите элемент HTML , из которого необходимо удалить макрос, и кликните Редактировать HTML на панели его настройки.
2. В области Конструктор макросов справа кликните рядом с макросом, который необходимо удалить ( Рис. 4 ).

Рис. 4 — Удаление поля макроса

Типы макросов

Макрос “Новая строка”

Этот тип макроса используется для добавления короткого однострочного текста ( Рис. 5 ).

Рис. 5 — Настройка макроса “Новая строка”

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

В результате текст будет отображаться в одну строку при условии, что пользовательские правила CSS не запрещают такого поведения.

Макрос “Новый текст”

Этот тип макроса используется для добавления длинного многострочного форматированного текста ( Рис. 6 ).

Рис. 6 — Настройка макроса “Новый текст”

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

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

Макрос “Новая картинка”

Этот тип макроса используется, чтобы указать или отредактировать значение атрибута “src” контейнера или значение CSS-свойства “url”.

При создании макроса дизайнер контента создает поле, в котором указывается источник изображения (). Используя это поле, вы можете добавить изображение в шаблон письма. Изображение можно загрузить с компьютера или указать его URL-адрес ( Рис. 7 ).

Рис. 7 — Добавление макроса “Новая картинка”

На заметку. Поле поддерживает URI данных. Вы можете вставить изображение в кодировке base64 вместо URL.
Изображения в кодировке base64 являются частью HTML-кода сообщения и обычно не фильтруются почтовыми клиентами, которые по умолчанию не позволяют загружать внешние изображения.

Макрос “Новый цвет”

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

Рис. 8 — Настройка макроса “Новый цвет”

При создании макроса дизайнер контента создает поле для подбора цвета. Макрос сгенерирует шестнадцатеричный код цветовой схемы RGB, которому предшествует знак “#“, например, “#0d2e4e”.

Советы по HTML-верстке в email: что правильно и неправильно использовать

Создавать с нуля HTML-код для email-рассылок достаточно сложно, так как есть много ограничений и HTML-правила для email-рассылок еще не стандартизированы. Это накладывает разные ограничения на креативность и на фишки, которые используют дизайнеры и разработчики. Более того, перед отправкой отображение каждого шаблона необходимо проверять для всех почтовых клиентов, чтобы убедиться, что он везде хорошо отображается.

Как верстать письмо. Базовые приемы

В статье мы расскажем про обязательные для создания шаблона приемы и те, которых стоит избегать. Рассмотрим на примерах кода в редакторе eSputnik:

Делать: Табличную верстку

Использование таблиц для макета шаблона позволяет письму не «ломаться» и корректно отображаться во всех почтовых клиентах. Несмотря на то, что как метод веб-разработки табличная верстка устарела, но для создания email-писем она является основной:

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

Делать: Одноколоночный шаблон

Самый простой макет для реализации с помощью CSS – это Single column layout (макет в один столбец). Блоки письма будут располагаться последовательно друг под другом.

В настоящее время многие используют этот вид макета, так как он отлично смотрится на любых устройствах и экранах, особенно на мобильных. Кроме того, он облегчает чтение даже очень длинного письма и позволяет делать верстку более гибкой. Например, добавив стиль mso-hide:all; можно скрыть отдельный элемент для ПК:

Делать: Стили прямо в коде, а не в отдельных блоках

Поддержка стилей в разметке head существует, но есть почтовые клиенты, которые их не обрабатывают, так что лучше придерживаться inline CSS. Разница в том, что inline CSS – это стили, которые записываются в атрибут style для тегов, а встроенные – это отдельный тег в head письма.

Например, вот так inline CSS применяются к таблице:

А вот так выглядят встроенные CSS:

Делать: Медиазапросы

С помощью медиазапросов (media queries) можно создавать адаптивный макет. Они позволяют видеть с мобильных устройств дизайн email с измененными шрифтами, изображениями и фоном. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину письма, размеры изображений и текста, и т.д.

Медиазапросы ограничивают ширину макета и при достижении этого значения уже применяется другое оформление. Через стили медиазапросов также можно перезаписывать существующие стили для разных устройств и скрывать информацию, которая не должна на этих устройствах отображаться. Для этого добавьте !important к нужному селектору, и тогда ваш стиль при отображении будет иметь приоритет:

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

Получить бесплатный шаблон

Делать: Оптимизацию под Retina-экраны

Сейчас все больше и больше людей используют устройства с дисплеями с высокой плотностью пикселей: iPhone, MacBook, iPad и т.д. Чтобы все изображения выглядели четкими на таких экранах, оптимизируйте картинки под них. Используйте изображения в два раза большего размера, чем нужно по макету.

Один из самых простых способов – подготовить исходное изображение в 2Х-размере и разделить их пополам уже в редакторе. Например, чтобы показать фотографию 200×300 px на экране с увеличенной плотностью пикселей, необходимо загрузить фото размером 400×600 px уменьшить его, используя CSS-атрибуты или HTML.

Делать: Абсолютные адреса

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

Если адрес не содержит имени сервера или протокола, то это относительный адрес:

Делать: Предзаголовок в дополнение к теме

Текст предварительного заголовка важен, потому что люди видят его перед тем, как открыть емейл. Но не нужно прописывать в коде текст прехедера. Лучше запишите его как комментарий HTML. Это предотвратит случайную отправку емейла с текстом-рыбой для предварительного заголовка. Например: “Написать текст предварительного заголовка здесь”.

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

В открытом письме его видно не будет.

Делать: Правильную кодировку символов

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

Например, внеся в редакторе eSputnik в код такие символы

вы получите пустой скрытый предзаголовок:

Делать: Адаптивность

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

В редакторе eSputnik можно играть с адаптивностью, чтобы письма одинаково хорошо смотрелись и на телефоне, и на ПК:

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

Делать: Комментарии в коде

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

Делать: Тесты

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

Работая в редакторе eSputnik, вы всегда можете отправить тестовое сообщение, чтобы посмотреть, хорошо ли оно выглядит как на телефоне, так и на компьютере:

Если же вы только создали свой первый шаблон и хотите, чтобы его отображение было идеальным, воспользуйтесь специальными сервисами для тестирования отображения писем (Litmus, Email on Acid)

Не делать: Изображения с разными областями для клика

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

Не делать: Дизайнерские шрифты

Причудливые шрифты не будут правильно отображаться во многих почтовых клиентах. Как правило, вы можете использовать стандартные шрифты. Но лучше определить резервный шрифт на случай, если выбранный вами не распознается почтовым клиентом (с этим могут помочь такие ресурсы, как: What The Font?, FontShop и т.д.).

eSputnik предоставляет список безопасных шрифтов, а также шрифтов, которые отобразятся в том случае, если кастомные шрифты не сработают.

Не делать: Heavy&Complex CSS/HTML

Советуем отложить JavaScript, Flash, HTML5 и CSS3 – расширенный код еще не сочетается с версткой емейл. Но если вы хотите работать со скриптами в коде, воспользуйтесь AMP-контентом в редакторе eSputnik.

Не забывайте и про вес письма. Размер вашего почтового шаблона не должен превышать 102 КБ. Это та точка, в которой Gmail может обрезать емейлы.

Заключение

Верстка электронного письма связана с определенными правилами и постоянным тестированием. Мы обрисовали в общих чертах самые распространенные запреты и требования к коду email в формате HTML.

В eSputnik есть все необходимое, чтобы создавать корректные емейл-рассылки:

• Письма уже выполнены с табличной версткой,
• Редактор позволяет минимизировать работу с кодом,
• В редакторе поддерживается создание и отправка AMP-контента,
• Простые настройки для адаптивности писем на мобильных устройствах.

Если вы знаете, чем можно дополнить список, пишите в комментариях.