как отправить html код в письме

Html письмо

На сайте Saitoseoteka.ru есть несколько готовых шаблонов html писем, но возникает вопрос — как такие письма отправлять? Давайте разбираться. Если вы хотите отправить html письмо, то просто вставить код в тело сообщения в вашем почтовом ящике у вас не получиться — отобразиться сам код без его выполнения. Для полноценной отправки, с возможностью отображения таблиц, ссылок, графики и рисунков, нужно использовать специальную программу.

Специальной программой для отправки писем в коде html являются почтовые клиенты. Рассмотрим один из них — Mozilla Thunderbird. Рассмотрим процесс отправки писем с картинками и прочим более подробно.

Почтовый клиент Mozilla Thunderbird

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

Теперь нужно указать адрес электронной почты, с которой мы будем в дальнейшем отправлять письма. Для этого щёлкаем по специальной ссылке «Электронная почта»:

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

После этого, нажимаем «Продолжить» — происходит автоматическое определение почтового сервера, и после нажатия на кнопку «Готово», мы переходим снова к начальному окну. Тем самым мы установили и настроили почтовый клиент для работы с электронной почтой (использовалась почта на Яндексе) посредством которого мы будем отправлять шаблоны html писем.

Отправляем html письмо

Снова открываем клиент Mozilla Thunderbird, если вы уже успели его закрыть, и нажимаем на пункт верхнего меню «Создать»:

Открывается форма по созданию электронного письма. Заполняем данные: «Кому» и «Тема»:

Имейте ввиду, если вы хотите указать несколько получателей, нужно щёлкнуть мышкой чуть ниже пункта «Кому» — для этого там предусмотрены несколько полей получателей. Данные заполнили, переходим к шаблонам.

Пусть мы будем отправлять шаблон письма, предложенный в предыдущей статье (первый в списке). Открываем его в редакторе (файл shablon1.html) и выполняем небольшое не сложное действие, а именно — указываем корректные полные адреса изображений:

Как правильно указать ссылку на картинку в html-шаблоне электронного письма

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

Обратите внимание, что слэши в компьютере и для браузера разные. Кроме того, перед букой диска с расположение нужного файла, добавляется «file:///».

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

Вставка шаблона в тело письма в почтовом клиенте Mozilla Thunderbird

Итак, мы заполнили адреса получателей нашего письма, указали тему, подправили ссылки. Теперь, нажимаем на пункт верхнего меню в окне создания электронного письма нашего почтового клиента «Вставить» — «HTML»:

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

Нажимаем кнопку «Вставить» и, если адреса картинок были указаны верно, то вы должны увидеть полноценный шаблон электронного письма:

Давайте подведём итоги проделанной работы. Для этого нужно нажать на кнопку всё в том же почтовом клиенте «Отправить». Для эксперимента был указан личный почтовый ящик, поэтому есть возможность проверить доставку сообщения. Открываем почту и видим полноценное html письмо:

Источник

Отправка html-письма через веб-интерфейс Mail.ru

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

Видео

Пару слов о шаблоне

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

Готовим почву для отправки

Здесь наша работа будет состоять из двух частей. Первая — это подготовка к корректировке html-кода в браузере, а вторая — подготовка кода нашего письма к внедрению в браузер при помощи самого простого редактора — «Блокнота».

Итак, авторизуемся на сервисе Mail.ru и инициируем создание нового письма.

Рис. 1

Браузер, а мы используем Google Chrome, переключится в том же окне в форму создания нового письма. Доступность т.н. панели оформления покажет нам, что мы используем нужный нам режим создания письма. Убедимся, что она активна, и более её не трогаем.

Рис. 2

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

Рис. 3

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

Рис. 4

Источник

Отправка html-письма при помощи web-интерфейса Gmail

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

Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.

Видео

1 этап — ревизируем шаблон нашего html-письма

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

2 этап — создаём письмо из своего html-шаблона в среде браузера

Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху

Рис. 1

Раскрывшееся окошко «Новое сообщение» развернём по максимуму, нам далее очень пригодится это пространство

Рис. 2

Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».

Рис. 3

Все примеры действий, которые здесь озвучены, базируются на использовании «родного» для Gmail браузера, Google Chrome. Соответственно, используются и названия окон и команд из него. Но в целом, алгоритм универсален, и по аналогии можно действовать и в других браузерах.

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами

Рис. 4

Отметим, что горизонтальная компоновка окон на этом этапе работы более удобна, и привести окна к такому порядку поможет раскрывающийся список под тремя точками справа вверху вспомогательного окна, как показано на рисунке выше, и в нём надо выбрать средний вариант, «Dock to bottom».

Правый клик по выделенному блоку

Рис. 5

Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».

Рис. 6

Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.

Рис. 7

Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).

Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.

Рис. 8

Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор
, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.

Рис. 9

В результате получится модифицированный код страницы браузера из Gmail с внедрённым в него содержимым нашего письма. Но пока он только в «Блокноте», поэтому выделяем всё в этом, только что дополненном нашим кодом, окне и вновь копируем в буфер теперь уже это содержимое.

Рис. 10

Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».

Рис. 11

Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.

Рис. 12

Для выхода из режима правки html-кода закроем окна, отражающие этот код.

Рис. 13

Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.

Рис. 14

И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.

Источник

Как отправить html-письмо через Mail.ru

Чтобы отправить html-письмо через Mail.ru нужно проявить немного смекалки. Мы самостоятельно разобрались в том, как это сделать и подготовили подробную пошаговую инструкцию.

Шаг 1. Подготовка письма

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

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

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

Шаг 2. Вставка письма в Mail.ru

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

Нажмите правой кнопкой мыши на поле для ввода текста письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется). Откроется панель редактирования кода страницы. (Панель может отличаться визуально в зависимости от вашего браузера. Мы показываем на примере Google Chrome).

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

Именно этот блок отвечает за наполнение письма и нам нужно вместо него вставить наш шаблон. Для этого щелкните правой кнопкой мыши по блоку и нажмите “Edit as HTML”.

Далее нам нужно удалить весь находящийся там код…

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

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

Шаг 3. Отправка html-письма

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

Источник

Как отправить HTML-письмо

Здравствуйте, уважаемые читатели! Из предыдущих статей мы узнали, в чем преимущество html-писем для рассылки и как создать html-письмо. Итогом второй статьи стал полученный код. Что делать с ним дальше, чтобы отправить красиво оформленное письмо со ссылками?

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

Чтобы письмо отправилось в правильном виде, нужно код вставить именно как код. Разберём, как это сделать, на примере почты Яндекс.

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

Теперь в коде именно это слово заменяем на код нашего html-письма.

Нажимаем Edit as HTML (Редактировать как HTML).

Вставляем код и нажимаем на крестик в правом верхнем углу панели кода.

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

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

Источник