How would you send an HTML email from Gmail or Yahoo? Is it possible to embed HTML using Gmail or Yahoo?
Gmail, Yahoo Mail, Hotmail, and Outlook all allow you to send out HTML emails. They also provide some simple tools to allow you to add styles to your text – like italics, colors, bolding, etc.
Yes – you can easily embed your own HTML inside Gmail Yahoo Mail and Hotmail!
However, as you may have already noticed, you can not just write HTML tags into your emails and expect HTML to display. Luckily for you, there is an easy solution that allows you to embed HTML into your Gmail or Yahoo mail message – we broke it down in four easy steps below. But, a word of warning: you should note that this method may not work for you – but it’s worth trying out since it’s so simple.
So, how can I send out an HTML email in Gmail, Yahoo, or Hotmail?
It’s actually quite simple – if you want to compose an email and insert your own html formatting then these are the four steps you need to take – it is essentially a copy and paste, but we wrote out all of the little details:
1. Use an html editor (like DreamWeaver, TextWrangler, Coda, or whatever you may have) and create the email in the editor. Then save the file with a “.html” extension. Where you save the file does not matter at all, but it’s probably easiest just to save the HTML file on your desktop so you can easily access it in step 2.
2. Open that html file in an internet browser – Firefox, Safari, Internet Explorer, Google Chrome, etc. If you just click on the file it should just directly open up in a browser, since your computer is smart enough to know that a “.html” file should be opened in a browser. If the file does not open directly in a browser, simply open a browser window, and then in the browser menu go to “File->Open File”, and choose the .html file.
3. In your browser menu, go to Edit, and then “Select All” or Ctrl+A ( or Command + A if you are on a Mac) to select everything that is displayed in the browser. This is the magic step that stores all the HTML onto your clipboard – so make sure you get this one right!
4. Paste (CTRL + V or Command +V) the html to the Gmail or Yahoo Mail message. Then you are done! This should work like a charm – and you should be able to see the HTML message directly in your message before you send it.
Absolute versus relative references in your HTML email
If you are using relative references to your CSS and image files then you will probably have to change those references to be absolute. What’s the difference between relative and absolute references? Well, suppose you have an image that you want displayed in your HTML email, but it’s currently stored on your desktop – so, for example, the reference to the image file looks something like: “img src=”/Users/someUserName/Desktop/your-image.jpg”. This is a relative reference. If you want to embed an image inside an HTML email, you will have to first store that image on a server, and then point to that image appropriately with an absolute reference – something like “http://www.someserver.com/images/your-image.jpg”. More details on this below.
If your images and CSS files are on your desktop there is no way this would work – they have to be on a server because people viewing your email do not have access to your desktop, nor would you want them to!
A summary of how to insert your own HTML into a Gmail or Yahoo mail message
So, the answer to this is quite simple – after you open up the contents of the HTML message in an internet browser, you simply select that entire page to copy the contents (using CTRL-C , CMD-C, or Select All) of the page and then finally just paste those contents into the Gmail or Yahoo message using CTRL-V or CMD-V.
How to embed HTML images and CSS into a email?
The best way to embed images into an email is to first host those images on a server and then use the html you create to access those images. So, for instance, you may end up with an html tag like this:
And then you would just put that tag wherever appropriate in your HTML code for your email message, and then you can follow the same steps given above to send out that HTML message with the images embedded.
The same rule applies for external CSS files. It’s definitely easier to use the copy/paste method we described above if you just have your CSS inline – as in embedded inside the HTML email.