Creating email with html

How to Send HTML Emails

This article was co-authored by wikiHow staff writer, Jack Lloyd. Jack Lloyd is a Technology Writer and Editor for wikiHow. He has over two years of experience writing and editing technology-related articles. He is technology enthusiast and an English teacher.

The wikiHow Tech Team also followed the article’s instructions and verified that they work.

This article has been viewed 205,977 times.

This wikiHow teaches you how to send your HTML page or newsletter as an email. Since most email providers support HTML coding in their emails, doing so is usually a matter of copying and pasting your HTML page or graphic into your email composition.

Understanding HTML Emails

Image titled Send HTML Emails Step 1

  • Structure content by using tables.
  • Store images on a live web server or use stock images.
  • Use «https://» (or «http://») in your links.

Image titled Send HTML Emails Step 2

  • Spam filters can block images and attachments. They also tend to filter emails of substantial size, which can include you if you have large image files or numerous images.
  • Many mobile users won’t see your images anyway.

Image titled Send HTML Emails Step 3

  • Provide a way to opt out of your email list. This can be an automatic unsubscribe link at the bottom of your email. You can also identify an email address for them to contact and ask to be removed if they no longer wish to receive your emails at any point in the future.
  • Include your business’s name and physical mailing address. Readers need to know that you are a valid businesses and not a scheme or spammer.
  • Ensure that the «from» and «reply-to» addresses are valid and active. Provide a way for readers to contact you if they have questions or are interested in supporting your business.
  • Choose an appropriate subject line. Your subject should be a concise description of what the email contains, not invalid sales offers or false promotions.
Читайте также:  Ammyy ru downloads html

Image titled Send HTML Emails Step 4

  • Look to see if links are intact and active.
  • Ensure that images and fonts appear correctly.
  • Check to see if your table is too wide.
  • Test your email in as many email readers as possible.

Image titled Send HTML Emails Step 5

  • If your email is sent to the Spam folder during any of your tests, you may have to remove things such as images and links to pages which don’t use HTTPS encryption.

Copying and Pasting HTML Content

Image titled Send HTML Emails Step 6

  • Windows — Click File, click Save As, enter a name followed by .html (e.g., «file.html»), click the «Save as type» drop-down box, click All Files, and click Save.
  • Mac — Click Format, click Make Plain Text, click OK when prompted, click File, click Save, click the downward-facing arrow to the right of the «Name» field, uncheck the «Hide Extension» box, replace the «.txt» part of the name with «.html», click Save, and click Use .html when prompted.

Image titled Send HTML Emails Step 7

  • You can also open your preferred web browser and then click and drag your HTML file into the browser window.

Image titled Send HTML Emails Step 8

  • You can also click anywhere on the page and then press either Ctrl + A or ⌘ Command + A to highlight the whole page, but this may cause you to highlight components of the page you don’t want to include.

Image titled Send HTML Emails Step 9

  • Gmail — Go to https://www.gmail.com/ and log in if necessary, then click COMPOSE.
  • Outlook — Go to https://www.outlook.com/ and log in if necessary, then click + New message.
  • Apple Mail — Go to https://www.icloud.com/#mail and log in, then click

iPhone Quick Compose

Image titled Send HTML Emails Step 10

IE Settings

Image titled Send HTML Emails Step 11

Add a recipient and a subject. Type a recipient’s email address into the «To» text box at the top of the «Compose» window, then add a subject in the text box below it.

Image titled Send HTML Emails Step 12

Paste in your content. Click the main text box in the «Compose» window, then press Ctrl + V (Windows) or ⌘ Command + V (Mac). The HTML page’s content will appear in the email exactly as it was formatted on the HTML page.

Image titled Send HTML Emails Step 13

Send your email. Click the Send button in the «Compose» window to do so. Your recipient(s) will receive your HTML page as an email.

Using Gmail and Chrome

Image titled Send HTML Emails Step 14

  • You’ll need to copy all of the body text—including the «» and «» tags—but Gmail will cover the document type and the HTML tags themselves, so you don’t need to copy those.

Image titled Send HTML Emails Step 15

Android 7 Chrome

Google Chrome. This is the only browser in which you can successfully paste your HTML code into your Gmail email.

Image titled Send HTML Emails Step 16

Open Gmail. Go to https://www.gmail.com/ in Chrome’s address bar, then enter your email address and password if prompted to log in.

Image titled Send HTML Emails Step 17

Image titled Send HTML Emails Step 18

Add a recipient and a subject. Type a recipient’s email address into the «To» text box at the top of the «Compose» window, then add a subject in the text box below it.

Image titled Send HTML Emails Step 19

Enter placeholder text. In the main section of the «Compose» window, type in a string of asterisks, zeroes, or other similarly distinguishable text. This will help you find the necessary location in the source code.

Image titled Send HTML Emails Step 20

Open an «Inspect» window. Select your placeholder text, then right-click (or Control -click on a Mac) the text and click Inspect in the resulting drop-down menu. You should see a pop-out window appear on the right side of the page.

Image titled Send HTML Emails Step 21

Open the selected code for editing. Right-click (or Control -click on a Mac) the blue-highlighted code at the top of the pop-out window, then click Edit as HTML in the resulting drop-down menu.

Image titled Send HTML Emails Step 22

Image titled Send HTML Emails Step 23

Paste in your HTML. Press Ctrl + V (Windows) or ⌘ Command + V (Mac) to do so. You should see the HTML for your project appear in the window.

Image titled Send HTML Emails Step 24

Exit the pop-out menu. Click the X in the top-right corner of the «Inspect» pop-out window to close it.

Image titled Send HTML Emails Step 25

Review and send your email. In the Gmail window, look at your email’s presentation. If you’re satisfied with the way the HTML page looks in your «Compose» window, you can click Send to deliver it to your recipient(s).

Expert Q&A

Use HTML templates available through online contact management systems if you are not familiar with HTML code. These provide an easy way to send appealing messages to your email subscribers.

Offer a plain-text version of your HTML email for those who cannot view HTML or who prefer not to. This will allow you to reach a broader audience.

Do not copy and paste code from word processing software. You will probably lose HTML tags, causing your email to lose its structure; additionally, many email spam filters block emails which were copied from a word processor.

You Might Also Like

Create an Email Link in HTML

Create Multiple Email Accounts

Make an Email Account

Ask for a Phone Number over Email

Send Someone an Email

Write a Formal Email

Send a Text Message to Your Email

2 Simple Ways to Send a Text Message to Your Email

Make an Email Address for Free

10 Simple Ways to Make a Free Email Address

Access Email

3 Ways to Access Email

Write an Email Asking for Feedback

Setup Outlook for Military Email

How to Access Military Email from Anywhere: Easy Outlook Setup

Make a Mailing List in Gmail

Open Winmail.dat

Email to Fax

How to Email to a Fax Machine

Источник

Оцените статью