Html письмо

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

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

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

Сначала нужно скачать эту программу. Для этого переходим на официальный сайт почтового клиента от Мозиллы: http://mozilla-russia.org/products/thunderbird/. В открывшемся окне, слева, выбираем программу на русском языке для вашей операционной системы компьютера:

pochtoviy-klient

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

integraciya-s-pochtovim-klientom

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

e-mail-programma

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

registraciya-pochti

 

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

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

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

sozdanie-html-pisma

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

zapolnenie-soobsheniya

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

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

  1. Ищем ссылки на графические файлы. Они представлены в виде <img border=»0″ hspace=»0″ src=»./Шаблон1_files/1.jpg» width=»183″ height=»253″>
  2. На стационарном компьютере, если открыть html_файл с шаблоном электронного письма, всё будет отображаться корректно, а вот на электронном почтовом ящике изображения показываться в таком случае не будут.
  3. Нам нужно найти полный адрес изображений на компьютере. Для этого открываем папку с картинками, идущими в комплекте, в отдельной папке с шаблоном.
  4. Щёлкаем правой кнопкой мышки на изображение и выбираем пункт «Свойства». В открывшемся окне есть строка «Расположение» — её полностью нужно выделить и скопировать polniy-adres-kartinki
  5. Открываем html-файл шаблона и заменяем ссылки на изображения.

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

Итак, полный адрес изображений на компьютере мы получили, теперь его нужно вставить в шаблон. Для этого, открываем шаблон на редактирование и вместо <img border=»0″ hspace=»0″ src=»./Шаблон1_files/1.jpg» width=»183″ height=»253″> пишем <img border=»0″ hspace=»0″ src=»file:///C:/Users/trushin.av/Desktop/письма/shablon1/shablon1/Шаблон1_files/1.jpg» width=»183″ height=»253″>.

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

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

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

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

vstavka-shablona-html-v-email

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

vstavka-shablona-v-email

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

html-pismo-po-shablonu

Итоги:

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

polushennoe-pismo

2 комментария

  1. Ну вот, то, что нужно. Ато все пишут о том, как сверстать письмо, а как его вставить - непонятно.

  2. а как ссылку вставлять в html шаблон ?

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

Your email address will not be published. Required fields are marked *