Как отправить HTML по электронной почте
Большинство современных почтовых клиентов отправляют электронную почту в формате HTML по умолчанию, когда сообщение составлено в самом клиенте. Например, Gmail и Yahoo! Почта имеет встроенные редакторы WYSIWYG , которые можно использовать для написания HTML-сообщений. Однако, если вы хотите написать свой HTML во внешнем редакторе, а затем использовать его в своем почтовом клиенте, это может быть немного сложнее.
Существует множество редакторов, которые можно использовать для создания HTML-сообщения, от простых, таких как « Блокнот» в Windows, до полнофункционального приложения, такого как Dreamweaver . Другие хорошие (и бесплатные) опции включают Notepad ++ , NetBeans , CoffeeCup и Komodo Edit .
Шаги для написания вашего HTML
Если вы собираетесь писать свои HTML-сообщения в другом редакторе, вам нужно запомнить несколько вещей, чтобы ваши сообщения работали.
- Ваши изображения должны быть размещены на общедоступном веб-сайте. Они не обязательно должны быть на веб-странице, но они должны быть общедоступными в Интернете.
- Используйте полный URL-адрес изображения в атрибуте и проверьте, правильно ли отображается ваше изображение перед отправкой сообщения.
- Не используйте относительные пути в ссылках. Вы должны использовать полные URL-адреса для всех ссылок, как и с изображениями.
- Если вы используете CSS, вы должны либо встраивать их в HTML с помощью элемента , либо ссылаться на них с помощью полного URL-адреса.
- Лучше избегать JavaScript, потому что почтовые клиенты обычно отключают их по соображениям безопасности. Однако, если вы должны использовать его, вы должны встроить его с элементом .
Всегда используйте полный интернет-адрес для изображений и других ресурсов, которые вы будете использовать в своем HTML-письме, чтобы клиент получателя знал, где получить к ним доступ в Интернете.
Следует помнить, что почтовые клиенты могут не поддерживать расширенные функции, такие как Ajax, CSS или HTML5 . Чем проще вы делаете свои сообщения, тем больше вероятность того, что они будут доступны для просмотра большинству ваших клиентов.
Некоторые почтовые клиенты упрощают использование HTML, созданного в программе или редакторе HTML. Ниже приведены краткие руководства по созданию и внедрению HTML в нескольких популярных почтовых клиентах.
Gmail и Mac Mail
Gmail и приложение «Почта» на Mac не предлагают способа составления электронного письма в HTML внутри клиента. Однако вы можете отправить сообщение HTML любому из этих двух клиентов, скопировав и вставив код HTML, созданный в другом приложении.
Напишите свою электронную почту в редакторе HTML. Обязательно используйте полные пути, включая URL-адреса любых внешних файлов, как указано выше.
Как только файл HTML будет завершен, сохраните его на жестком диске (не важно где).
Откройте файл HTML в веб-браузере . Если он выглядит так, как вы ожидаете (изображения видны, стили CSS корректны и т. Д.), Выберите всю страницу с помощью Ctrl + A на ПК с Windows или Cmd + A на Mac.
Нажмите Ctrl + C (Windows) или Cmd + C (Mac), чтобы скопировать все содержимое страницы.
В Gmail или Mac Mail запустите новое сообщение. Вставить содержимое страниц , скопированных выше , в теле сообщения , используя Ctrl + V или Cmd + V .
Вы можете редактировать текст после его вставки в новое сообщение, но будьте осторожны, чтобы не удалить ни один из ваших стилей или встроенных изображений; их трудно исправить, не повторяя предыдущие шаги.
буревестник
Для сравнения, Thunderbird упрощает создание HTML-кода, а затем импортирует его в ваши почтовые сообщения.
Напишите свою электронную почту в редакторе HTML. Обязательно используйте полные пути, включая URL-адреса любых внешних файлов.
Выделите весь HTML-код, используя Ctrl + A (Windows) или Cmd + A (Mac). Чтобы увидеть сам код, вам, возможно, придется изменить представление с WYSIWYG на представление исходного кода HTML, которое показывает все теги HTML и т. Д.
Скопируйте HTML — код , используя Ctrl + C или Cmd + A .
Откройте Thunderbird и напишите новое сообщение.
В меню сообщения нажмите Вставить и выберите HTML.
Когда всплывающие окна появляется HTML, вставьте HTML в окно, нажав Ctrl + V или Cmd + V .
Нажмите Вставить, и ваш HTML-код будет вставлен в ваше сообщение.
Преимущество использования Thunderbird в качестве почтового клиента
Вы можете подключить учетные записи электронной почты, такие как Gmail, Yahoo! Почта и многие другие в почтовый клиент Thunderbird и использовать его в качестве универсального почтового приложения. Возможно, вы захотите сделать это, потому что немного легче вставить HTML в сообщение Thunderbird, и вы можете отправлять исходящие сообщения через любую из подключенных учетных записей электронной почты.
Не каждый может читать электронные письма в формате HTML
Если вы отправите HTML-письмо человеку, чей почтовый клиент не поддерживает его, он получит HTML-код в виде обычного текста. Если они не веб-разработчик и не знакомы с чтением HTML (и даже если это так, неудобно, если не сказать больше), письмо будет в лучшем случае трудным для чтения, а в худшем — немногим более, чем нечитаемое трюк.
Если вы отправляете новостную рассылку по электронной почте , вы должны дать своим читателям возможность выбрать электронную почту в формате HTML или обычный текст при регистрации. Если вы просто используете его для отправки электронных писем друзьям и родственникам, убедитесь, что они могут читать электронные письма в формате HTML.
Простейшая форма отправки данных на почту при помощи HTML и PHP
Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.
Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.
Для программиста создать такую форму не составит труда, а вот HTML верстальщику может показаться сложным некоторые действия.
Создаем форму отправки данных в html
На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.
Первая строка будет следующей
Это очень важный элемент формы. В нем мы указываем каким способом будут передаваться данные и какому файлу. В данном случае все передачется методом POST файлу send.php. Программа в этом файле соответственно должна принять данные, они будут содержаться в post массиве, и отправить их на указанный email адрес.
Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:
Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.
Здесь практически все то же самое, но имя для поля указано email, а пояснении указано, чтобы пользователь в эту форму ввел свой адресс электронной почты.
Следующей строкой будет кнопка «отправить»:
И последней строкой в форме будет тэг
Теперь соберем все вместе.
Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:
Создаем файл, принимающий данные из HTML формы
Это будет файл с именем send.php
В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
Перед названиями переменных в php ставится знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.
Первая функция преобразует все символы, которые пользователь попытается добавить в форму:
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ »
Вторая функция декодирует url, если пользователь попытается его добавить в форму.
$fio = urldecode($fio);
$email = urldecode($email);
Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:
$fio = trim($fio);
$email = trim($email);
Существуют и другие функции, позволяющие отфильтровать переменные php. Их использование зависит от того , насколько вы опасаетесь того, что злоумышленник попытается добавить программный код в данную форму отправки данных на почту html.
Проверка данных, передаваемых от HTML формы в файл PHP
Для того, чтобы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:
Вторая строка здесь нужна для того, чтобы разделить вывод переменных php на разные строки.
Отправляем полученные данные из формы HTML на почту при помощи PHP
Для отправки данных на почту нужно воспользоваться функцией mail в PHP.
mail(«на какой адрес отправить», «тема письма», «Сообщение (тело письма)»,»From: с какого email отправляется письмо \r\n»);
Например, нужно отправить данные на email владельца сайта или менеджера example@mail.ru.
Тема письма должна быть понятной, а сообщение письма должно содержать то, что указал пользователь в HTML форме.
mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»);
Необходимо добавить условие, которе проверит отправилась ли форма при помощи PHP на указанные адрес электронной почты.
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
<
echo «сообщение успешно отправлено»;
> else <
echo «при отправке сообщения возникли ошибки»;
>
Таким образом программный код файла send.php, который отправит данные HTML формы на почту будет выглядеть следующим образом:
$fio = $_POST[‘fio’];
$email = $_POST[’email’];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo «
«;
//echo $email;
if (mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
< echo "сообщение успешно отправлено";
> else <
echo «при отправке сообщения возникли ошибки»;
>?>
Три строки для проверки, передаются ли данные в файл закомментированы. При необходимости их можно удалить, так как они нужны были только для отладки.
Помещаем HTML и PHP код отправки формы в один файл
В комментариях к этой статье многие задают вопрос о том, как сделать, чтобы и HTML форма и PHP код отправки данных на почту находились в одном файле, а не двух.
Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.
Давайте посмотрим как изменить PHP код в файле send.php:
Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке . Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.
Частые ошибки, возникающие при отправке PHP формы с сайта
Первая, наверное самая популярная ошибка, это когда вы видите пустую белую страницу без сообщений. Это означает, что вы допустили ошибку в коде страницы. Вам нужно включить отображение всех ошибок в PHP и тогда вы увидите, где допущена ошибка. Добавьте в код:
Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.
Таким образом, для корректной работы я рекомендую поместить файл send.php на хостинг сайта. Там, как правило, все уже настроено.
Еще одна частая ошибка, когда появляется оповещение «Сообщение успешно отправлено», а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:
if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
Вместо example@mail.ru должен быть email адрес на который нужно отправить письмо, а вместо example2@mail.ru должен быть существующий email данного сайта. Например для сайта webriz.ru это будет info@webriz.ru . Только в этом случае письмо с данными из формы будет отправлено.
Читайте также статью про немного модифицированный вариант данной формы отправки.
Расширение формы, добавление Google ReCaptcha (v.2)
По просьбам в комментариях я доработал форму, добавил в нее поле для отправки сообщения. Также для защиты от роботов я добавил Google ReCaptcha, вторую версию. Добавлено поле textarea.
Итак, имеется два файла: index.php и send.php
Программный код index.php:
Вам нужно вставить ключ сайта вместо текста в соответствующей строке.
Программный код send.php:
else < echo "При отправке сообщения возникли ошибки"; >> else < echo "Подтвердите, что вы не робот и попробуйте еще раз"; >> else < echo "поставьте галочку в поле 'Я не робот' для отправки сообщения"; >?>Также нужно вписать секретный ключ.
Как использовать ссылки mailto: и tel:
Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.
Такие форматы ссылок поддерживаются всеми браузерами, так что вы можете по необходимости использовать их в своих проектах не переживая, что где-то они не сработают.
mailto:
Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.
Текст письма указывается с помощью параметра body .
За тему письма отвечает параметр subject .
Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .
Что произойдёт, если кликнуть на ссылку с mailto
Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в MacOS:
Если почтовая программа по умолчанию не установлена, появится окно выбора программы.
Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.
Как стилизовать mailto
Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .
a[href^="mailto:"]
tel:
Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .
Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:
Хорошо
В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Санкт-Петербурге.
Чуть хуже
В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.
Плохо
Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.
Другое обязательное требование RFC 3966 — номер телефона, указанный в href , должен быть явно виден на странице.
Хорошо
Звоните 8-900-111-11-11 по любому поводу. Номер видно в тексте ссылки.
Плохо
Звоните по любому поводу. Номер не видно в тексте ссылки, непредсказуемое поведение.
Что произойдёт, если кликнуть на ссылку с tel
На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще-то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства.
- Android, iOS — откроется звонилка по умолчанию.
- Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
- Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.
Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.
Как стилизовать
С помощью CSS-селектора a[href^=»tel:»] .
a[href^="tel:"]
А так можно добавить иконку телефона из Unicode, которая есть во всех системах:
a[href^="tel:"]:before
Получится такой результат:
Дополнительные материалы по теме
- RFC 6068 — The ’mailto’ URI Scheme
- RFC 3966 — The tel URI for Telephone Numbers
- The Current State of Telephone Links
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Инструкция по HTML верстке писем email рассылки
Верстка HTML-письма с нуля – работа не из легких. Основная задача – создать универсальный код, который будет понятен различным почтовым клиентам и одинаково красиво будет отображаться на всех устройствах. Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют конструкторы HTML писем, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов. В этой статье мы расскажем, как создать HTML письмо, которое пользователи оценят по достоинству.
Создание HTML письма: Базовые знания
- Используйте таблицы HTML кодов при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте ��
- Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах и , включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.
Формат шаблона html-писем
- Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
- Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
- Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.
Как сверстать HTML шаблон письма: Создание документа
- Шапка (Header) . Всё, что будет обернуто в тег и , почтовый клиент будет принимать за шапку письма.
- Тело (Body) . Код, размещенный внутри тега и будет использован для создания структуры вашего email сообщения.
Верстка тела email писем. Создание таблицы
Общая структура письма создается с использованием тега . Прежде всего, устанавливаем нулевое значение для отступов (теги и ), чтобы избежать лишнего пустого пространства в шаблоне. Ширина главной таблицы должна быть 100% (table width=”100%”). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега , работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы. Значения тегов и тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.
Примечание. Здесь и далее мы оставим значение тега border для границы всех таблиц как 1: border=”1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».
1.
2.| 5. Привет! 6. |
9. Пока что наше письмо выглядит следующим образом: 
(наличие рамки – результат работы тега border=”1″)
Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=”600″.
Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.
Этот код вложенной таблицы следует вставить вместо слова «Привет!» 1.
| Привет! |
Теперь письмо выглядит вот так: 
Вы заметили, что для вложенной таблицы использован атрибут со значением “collapse”? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц. Мы уже говорили о том, что любой шаблон email сообщения состоит из трёх логических частей: хедер, тело письма с основным контентом, футер. Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку 1.
5.
и продублируем его несколько раз, заменив приветствие на порядковый номер строки. Должно получиться следующее: 1.
| 4. Строка 1 5. |
| 9. Строка 2 10. |
| 14.Строка 3 15. |
Визуально: 
Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег , следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.
1.
| 4. Строка 1 5. |
| 9. Строка 2 10. |
| 14. Строка 3 15. |
Сосредоточимся на первой строке – это будет хедер письма.
Строка 1. Верстка хедера HTML писем
В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег – . Работая с , важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми. Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;. Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;. В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег , добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом внутри), но с четко установленной высотой или шириной. Например:
Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега
или , последние ведут себя более непредсказуемо. В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=”display:block;”, наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=”center” в тег
Примечание. Помните, что большинство почтовых клиентов по умолчанию блокируют изображения. Поэтому напишите в alt тексте подсказку клиенту, картинка на какую тематику должна быть вместо пустого места. К тому же, не стоит на картинках писать важную уникальную информацию, которая не дублируется в письме. Ведь тогда в случае блокировки изображений, ваше письмо будет абсолютно бесполезным.
Пример кода Строки 1 с вставленным изображением: 1.
3. Визуально: 
Строка 2. Работа с контентом в HTML шаблоне письма
Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега . Приступайте! �� Визуально должно получиться:
Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:
Строка 3. Создание кода футера HMTL письма
Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц. Чтобы не забыть, сначала добавим отступы, а после – таблицы. Отступы:
Визуально: 
Разделяем строку на две колонки с помощью дополнительной таблицы. 1.
| 4. Колонка 1 5. | 7. Колонка 2 8. |
В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате. Дополнительная таблица с информацией футера: 1.
| 4.
Компания ePochta 6. |
8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже. 9. |
Визуально: 
Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=”right” для тега