HTML - Images In Html Email - Help
Hello, let me begin by saying that I know absolutley nothing about HTML but have been put in a position to learn a little
I have made a dinky HTML page in MS Word 07 that we are trying to email to some folks on newsletter list and I am having an issue. When I send the test file to myself the images don't load. From what I understand they need to be hosted in order to load correctly. 2 Questions: 1) Can I host them on photobucket? 2) How in the heck do I get them to display properly??? I.E. Where does the IMG tag go? If anyone can help me I can post the source code and the IMG tags from photobucket...... Thanks! Similar TutorialsI have a client who's dead-set on sending out their own HTML emails via Outlook. I create the HTML with absolute links for them via Dreamweaver; then they attach the HTML "as text" into a new Outlook message and send it out. It works surprisingly well except for one thing: Outlook always drops out any background image so that part of the message just looks blank. Is there any easy way to force Outlook to display a background image correctly? Thanks! Hi all, When a member joins up to my site I have they receive an email automatically telling them they have joined... Can I put a logo in that email? Or can it only be text? Hi, so I'm trying to make this e-mail newsletter. It's entirely images, tables and text. So no javascript, just plain stuff. I tried attaching it as a signiture file and I had trouble sending it. It also didn't come out right. I'm trying to avoid using a software. Its basically just a block of HTML I need to show up as the only content in an email. If you just put HTML into a email text field, it just shows the HTML code in the email as text. Any ideas? hi all, something I thought would be simple is, well, not so simple for me!! all that I want to do is send a complete html web page as an ordinary email so that people viewing it can click on the existing links and buttons.(for payments etc) I have tried sending it several times and on aol none of the headings/gif's n jpg's are displayed, using squirrel mail, some of the links are highlighted, however, some are missing. using outlook, well, no comment!!! surely there is an easy (hehe) way to send a whole hyml web page as an email? many thanks for all help, Ed hi im not sure if this is the right section but ive been looking around and cant find what i need so im asking for help. i have a html form like so Code: <form name="riskform" method="post" enctype="text/plain" > <div id="formtop">Name: <br> <input type="text" name="Name" /><br /><br /> Company: <br> <input type="text" name="Company" /><br /><br /> Location:<br /><input type="text" name="Location" /> <br><br /></div><br /> <h2>Risk Selection</h2> <div id="list"> <label><input type="checkbox" name="Extream Weather" />Extream Weather</label><br /><br /> <label><input type="checkbox" name="Confined Space" />Confined Space</label><br /><br /> <label><input type="checkbox" name="Traffic" />Traffic</label><br /><br /> <label><input type="checkbox" name="Slip/Trip" />Slip/Trip</label><br /><br /> <label><input type="checkbox" name="Noise" />Noise</label><br /><br /> <label><input type="checkbox" name="Falling Object" />Falling Objects</label><br /><br /> <label><input type="checkbox" name="Machinary" />Machinery</label><br /><br /> <label><input type="checkbox" name="Equiptment" />Equiptment</label><br /><br /> <label><input type="checkbox" name="Construction Work" />Construction Work</label><br /><br /> </div> <div id="sub"><input type='submit' name='Submit' value='Submit'/></div><br /><br /> </form> and what i want to happen is when the user clicks submit this form is emailed to my site admin, ive looked at mailto: but i want the page to be email as a page view the same as how it looks if you print the page. hope that makes sense Hi Everyone, I just created an email template that i want to send out and i am getting lots of errors when I'm testing it. All my images are showing up as attatchments, Can i prevent this? My page doesn't work across all browsers, spacing issues in gmail, hotmail is giving me and extended height in a few places. I have a search box as well that I want to include- is that a bad idea? How can avoid this / fix these problems. If requested i will include my code. Thanks can anyone help me with this, it looks ok but it wont email Code: <form action="mailto:byp_webmaster@hotmail.co.uk" method="POST" enctype="multipart/form-data" name="Website contact form"> <table border="1" align="center"> <td> <center>Your Name:</center><input type="text" align="center" size="40" maxlength="50" name="name"> <br><br> <center>Your Email:</center><input type="text" align="center" size="40" maxlength="50" name="Email"> <br><br> <center>Message:</center><textarea cols="50" rows="4" name="Message" align="center"></textarea><br> <center><input type="submit" value="Send Email" ></center> </td> </table> </form> I have to send an HTML email, but I'm missing something. I have my HTML page encoded, and I put Outlook on HTML mode, but when I send the email, the receiver still only gets a bunch of code, not the nice-looking HTML Layout we've worked so hard on. I'm opening the HTML's source code, copy/pasting it in the body of the email. Obviously this is wrong. Can someone please tell me how it's supposed to be done? And yes I know HTML emails are evil, no I'm not a spammer, and I know I'm facing an army of filters. But if someone could point me in the right direction, I would really appreciate it. everytime i try to make this my html email, i get bad table padding and spacing but it looks good on webpages but not emails Code: <html> <head> <style> .body { background-color: #d6d6d6; } .content { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #D7D7D7; } A:link, a:visited, a:active { color: #00BFFF; } a:hover { color: #1AC8FF; } .simple { width: 800px; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 0px; height: 601px; }</style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#D8D8D8"> <table class=simple border=0 cellspacing=0 cellpadding=0 width="100%"> <tr> <td colspan="5" width="800"> <img src="http://www.megatopics.com/emails/images/Email_01.png" width="800" height="38" alt=""></td> </tr> <tr> <td colspan="2" width="253"> <img src="http://www.megatopics.com/emails/images/Email_02.png" width="253" height="178" alt=""></td> <td width="267"> <img src="http://www.megatopics.com/emails/images/Email_03.png" width="267" height="178" alt=""></td> <td colspan="2" width="280"> <img src="http://www.megatopics.com/emails/images/Email_04.png" width="280" height="178" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="http://www.megatopics.com/emails/images/Email_05.png" width="44" height="384" alt=""></td> <td width="770" height="340" colspan="3" valign="top" background="http://www.megatopics.com/emails/images/Email_06.png" class="content"> {member_name},<br> We have just launched a whole new system to MegaTopics, its Called The Reputation System! You can read more about it <a href="http://www.megatopics.com/Forum-Related-f1/Suggestions-Questions-FAQs-f2/Help-Files-f40/How-Do-I-Get-Repuation-t977.html">here</a>!<br> <br> Here is the breakdown of the reputation point trade-ins: (if you elect not to purchase one) <br> Silver Membership: 50000 Request an upgrade <a href="http://www.megatopics.com/Forum-Related-f1/Suggestions-Questions-FAQs-f2/Request-New-Category-Membership-f3/Request-New-Category-Membership-f3.html">here</a><br> 50 USD: 100000 Request Money <a href="http://www.megatopics.com/Forum-Related-f1/Suggestions-Questions-FAQs-f2/Request-New-Category-Membership-f3/Request-New-Category-Membership-f3.html">here</a><br> <br> </a>There is a couple forums that allow the use of getting reputation on MT. Its obvious that people have to click the little green button plus sign to give you reputation to more or less thank you for the post. These are the forums that allow you to get reputation. <br> <br> <a href="http://www.megatopics.com/Jus-Kickin-It-f134/Jus-Kickin-It-f134.html"><strong>Jus' Kickin It</strong></a>: All the forums under this category <br> <a href="http://www.megatopics.com/Incognito-f122/Incognito-f122.html"><strong>Incognito</strong></a>: All the forums under this category<br> <a href="http://www.megatopics.com/Champagne-Room-f162/Champagne-Room-f162.html"><strong>Champagne Room</strong></a>: All the forums under this category,<u><em>except</em></u> the General Forum<br> <a href="http://www.megatopics.com/Special-Interests-Everything-Else-f4/Computer-GeekZ-FreakZ-f8/Computer-GeekZ-FreakZ-f8.html"><strong>Computer GeekZ & FreakZ</strong></a>: There is only one forum that allow reputation here, Tutorials<br> <a href="http://www.megatopics.com/Special-Interests-Everything-Else-f4/Cooking-f78/Cooking-f78.html"><strong>Cooking</strong></a>: There is only one forum that allow reputation here, Recipes <br> <a href="http://www.megatopics.com/Special-Interests-Everything-Else-f4/The-Juice-And-Liquor-Bar-f147/The-Juice-And-Liquor-Bar-f147.html"><strong>The Juice And Liquor Bar</strong></a>: There is only one forum that allow reputation here, Concoctions <br> <a href="http://www.megatopics.com/Mega-Topics-Salon-f91/Mega-Topics-Salon-f91.html"><strong>Mega Topics Salon</strong></a>: There is only one forum that <u><em>does not allow</em></u> reputation here, Request A Graphic <br> <br> {board_name} Statistics: Registered Users: {reg_total} | Total Posts: {total_posts} | Busiest Time: {busy_count} users were online on {busy_time}<br> <br> Board Address: {board_url} Log In: {board_url}?app=core&module=global&section=login Lost Password Recovery: {board_url}?app=core&module=global&section=lostpass<br> <br> How to unsubscribe<br> Visit your email preferences ({board_url}?app=core&module=usercp) and ensure that the box for 'Send me any updates sent by the board administrator' is unchecked and submit the form </td> <td rowspan="2"> <img src="http://www.megatopics.com/emails/images/Email_07.png" width="49" height="384" alt=""></td> </tr> <tr> <td colspan="3"> <img src="http://www.megatopics.com/emails/images/Email_08.png" width="707" height="44" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="44" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="209" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="267" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="231" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="49" height="1" alt=""></td> </tr> </table> </body> </html> Hi, I want to ask is there any way to send email form html?? like php mail() is there something in php. Or sending by smtp???? I'm having trouble using html email. Everything works fine except the link I put in it. I need to have a link parents will click on which will take them to a webpage which will automatically register them. When I test it (on my Mac - sorry ... a real computer) it works great, but the parents of my students say the link doesn't work. I tested the email again by sending it to one of my fake yahoo.com email accounts, and sure enough, the link was NOT active. Here is what it looked like: <a href="register.php?id=1712">click here</a> Can someone tell me what I might be doing wrong. Hi, does anyone know if it is possible to send an html email with yahoo? thanks hey guys im after some simple help i think. i have created a .psd for a html email i wish to send. i have sliced it up to how i would like it and i created the automated html. It all show ok in all web browsers and most email clients but not outlook 2007, i know there is a lot of issues with this email client but just wondered if you guys know any way to work around it. If i keep all the slices horizontal then it all fits fine but on the vertical ones which i need it kinds shifts them over the right so there the while vertical lines running through the page. i have attached the code any help would be more then appreciated. Code: <html> <head> <title>newnew</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (newnew.psd) --> <table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="http://www.designtwenty1.com/emailimages/skyblue_02.jpg" width="327" height="44" alt=""></td> <td colspan="6"> <img src="http://www.designtwenty1.com/emailimages/skyblue_03.jpg" width="280" height="44" alt=""></td> </tr> <tr> <td colspan="11"> <img src="http://www.designtwenty1.com/emailimages/skyblue_04.jpg" width="607" height="28" alt=""></td> </tr> <tr> <td colspan="12"> <img src="http://www.designtwenty1.com/emailimages/skyblue_05.jpg" width="790" height="44" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/skyblue_06.jpg" width="10" height="44" alt=""></td> </tr> <tr> <td colspan="3"> <img src="http://www.designtwenty1.com/emailimages/skyblue_07.jpg" width="311" height="77" alt=""></td> <td colspan="10"> <img src="http://www.designtwenty1.com/emailimages/skyblue_08.jpg" width="489" height="77" alt=""></td> </tr> <tr> <td colspan="13"> <img src="http://www.designtwenty1.com/emailimages/skyblue_09.jpg" width="800" height="37" alt=""></td> </tr> <tr> <td> <img src="http://www.designtwenty1.com/emailimages/skyblue_10.jpg" width="141" height="121" alt=""></td> <td colspan="3"> <img src="http://www.designtwenty1.com/emailimages/skyblue_11.jpg" width="221" height="121" alt=""></td> <td colspan="6"> <img src="http://www.designtwenty1.com/emailimages/skyblue_12.jpg" width="279" height="121" alt=""></td> <td colspan="3"> <img src="http://www.designtwenty1.com/emailimages/skyblue_13.jpg" width="159" height="121" alt=""></td> </tr> <tr> <td colspan="13"> <img src="http://www.designtwenty1.com/emailimages/skyblue_14.jpg" width="800" height="41" alt=""></td> </tr> <tr> <td colspan="6"> <img src="http://www.designtwenty1.com/emailimages/skyblue_15.jpg" width="397" height="54" alt=""></td> <td colspan="7"> <img src="http://www.designtwenty1.com/emailimages/skyblue_16.jpg" width="403" height="54" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <img src="http://www.designtwenty1.com/emailimages/skyblue_17.jpg" width="193" height="154" alt=""></td> <td colspan="3" rowspan="3"> <img src="http://www.designtwenty1.com/emailimages/skyblue_18.jpg" width="187" height="154" alt=""></td> <td colspan="3" rowspan="3"> <img src="http://www.designtwenty1.com/emailimages/skyblue_19.jpg" width="223" height="154" alt=""></td> <td colspan="5"> <img src="http://www.designtwenty1.com/emailimages/skyblue_20.jpg" width="197" height="115" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="http://www.designtwenty1.com/emailimages/skyblue_21.jpg" width="18" height="39" alt=""></td> <td colspan="2"> <img src="http://www.designtwenty1.com/emailimages/skyblue_22.jpg" width="162" height="26" alt=""></td> <td colspan="2" rowspan="2"> <img src="http://www.designtwenty1.com/emailimages/skyblue_23.jpg" width="17" height="39" alt=""></td> </tr> <tr> <td colspan="2"> <img src="http://www.designtwenty1.com/emailimages/skyblue_24.jpg" width="162" height="13" alt=""></td> </tr> <tr> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="141" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="52" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="118" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="51" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="18" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="17" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="123" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="83" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="18" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="20" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="142" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="7" height="1" alt=""></td> <td> <img src="http://www.designtwenty1.com/emailimages/spacer.gif" width="10" height="1" alt=""></td> </tr> </table> <!-- End Save for Web Slices --> </body> </html> thanks jamie Hi, I am using an email newsletter system, wherein I can create HTML templates and then send mails. I would like to know in the email that I send, I need the html to pick up some dynamic content from another website and when the email is being displayed, it needs to show that dynamic content I could have used iframe in the html template - but that would work on websites, but not on emails. Is there a way anyone can suggest wherein I can achieve this? Thanks Does anyone know of a good way to construct & send emails with html in it? I'd like to be able to send professional looking emails to my customers. hello everyone! I'm trying to edit a notification email for my blog and have most of it completed; however the only problem I'm having is that there is a gap between the menu-bg-2.png and the top of the table which I cannot get rid of. I'd like the table to be butted-up against menu-bg-2.png. When testing the html in firefox, it seems fine, but within an email the gap appears. Can anyone help? (FYI, I have no prior HTML experience or education...) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .style1 {font-family: "Trebuchet MS"} a:active { outline: none; text-decoration: none; } :focus { -moz-outline-style: none; } .header { position: relative; left: 0px; } .navigation { position: relative; top: 10px; left: 0px; } .footer { position: relative; left: 0px; top: -2px; height: 31px; } .footer2 { position: relative; left: 0px; top: 40px; } body { width: 960px; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } --> </style> </head> <body> <div class="header"> <a href="http://www.photocs.net/" title="Photo CS, L.L.C." target="_blank"> <img src="http://www.photocs.net/blog/wp-content/uploads/2011/05/logo3.png"></a> </div> <div class="navigation"> <a href="http://www.photocs.net/" title="Photo CS, L.L.C." target="_blank"> <img src="http://www.photocs.net/blog/wp-content/themes/DeepFocus/images/menu-bg-2.png"></a> </div> <table frame="void" width="960px" border="0" cellpadding="20px" cellspacing="0px" valign="top"> <tr> <td bgcolor="333333"><font color="#CCCCCC" face="Verdana, Arial, Helvetica, sans-serif">Hello my photo fans!<br /><br />I've just published a new blog post that you'll be interested in checking out; click <a href="@@permalink" target="_blank">here</a> to go straight to the images.<br /><br />You subscribed to these email notices regarding new posts to my photoblog. If you want to change your settings or unsubscribe, please do it <a href="@@conf_url" target="_blank">here</a>.<br /><br />I hope you enjoy my new images, and, until next time!<br /></font></td> </tr> <tr> <td class="none" style="cursor:pointer" onclick="window.location.href='http://www.photocs.net/info/about/'" background="http://www.photocs.net/blog/wp-content/plugins/post-notification/en_US/signature.png" bgcolor="#333333" width="960px" height="60px"></td> </tr> </table> <div class="footer"> <img src="http://www.photocs.net/blog/wp-content/themes/DeepFocus/images/featured-bottom-shadow.png" width="960" height="31" /> </div> <div class="footer2"> <a href="https://www.facebook.com/pages/Constantino-Schillebeeckx-Photography/121881317862617" title="Index" target="_blank"> <img src="http://www.photocs.net/blog/wp-content/uploads/2011/04/facebook-150x150.png"></a> <a href="https://twitter.com/#!/photo_cs" title="Index" target="_blank"> <img src="http://www.photocs.net/blog/wp-content/uploads/2011/04/twitter-150x150.png" hspace="50"></a> <a href="http://feeds.feedburner.com/StLouisFreelancePhoto" title="Index" target="_blank"> <img src="http://www.photocs.net/blog/wp-content/uploads/2011/04/rss-150x150.png"></a> </div> </body> </html> Hi was wondering if anyone could help me in the right direction with html emails? I'm not doing something right and I dunno what it is! AGH! Anyhoo, would really appreciate your help if you can spare a mo.... I am issued with a .pdf, which I need to re-create as an html email. The graphics ned to look the same, and I have to make the text editable, so I have split the image into a table, which, when tested in Firefox, Explorer and Safari, work just splendidly! The table is only 600px wide, as I hear that emails should be no wider than 650. All the links work, there is no padding on any of the cells and the page displays perfectly in all browsers. However.... when the client put its on their server, customers who have hotmail, gmail or outlook7 accounts see a displaced image... the table is everywhere and is filled with white-space! Everything has to be built in plain HTML. I am not able to use styles, as the clients server does not support them. Does anybody have any idea what could be happening? If you need more info, I will do what I can to help! Thanks Hi all, Not sure if im posting in the right place but i am having some problems, well, a lot of issues, with an email im sending in outlook. As you can see outlook has put hue gaps in before each section, although the gap in the right column is supposed to be there. Any one have any advice on how to fix this? Its works well in every other email inbox... really stumped! Thanks for any help in advance. Matt |