Difficulty opening a html file created using photoshop

Forum|Forum|7 years ago
January 9, 2019
5 replies
1589 views

Hi Guys

I have created an image using photoshop CS4 and then attached hyperlinks by selecting save web & devices and then using the slice tool,inserted the links to "you tube videos" which i copied and pasted in the URL. I have then saved this as HTML and images and have chosen the JPEG format. This has created a HTML file which I can open on my Mac and view the document as designed but when I send this file via email, the recipient when opening the file cannot see the image just a bunch of boxes which takes them to the links I input. I hope this makes sense, I cannot understand where I am going wrong ? the links are obviously working fine but the image (background/text) is completely missing. Can someone shed a bit of light for me. Much appreciated.

This topic has been closed for replies.

Stephen Marsh

Community Expert

This is the wrong tool for the job IMHO.

A HTML webpage isn't the same thing as a HTML email.

You can of course use the base code and upload images to the internet and update image paths in the code etc.

But I personally would just use a dedicated HTML email marketing tool, such as:

https://mailchimp.com/solutions/email-marketing-platform/

https://zapier.com/blog/mailchimp-alternatives/

N

nstone101

Participant

Yes, which use this exact format in those programs. Mailchimp, constant contact, all of them. They all take these html templates. I dont know how you could possibly disagree. You're saying you should use mailchimp (HTML Emails). None of those programs use ANYTHING otherthan HTML. You can't plain and simple. Maybe they allow to upload a zipped file but ultimately what i wrong with the exception of one error i made in my post which i am correcting regarding syntax in the wrong place. Not to mention you can do much more in terms of customization and tracking outside of using or paying for analytics packages that many programs will offer to add as an add-on. You can add your on analytics snippets. You can add meta-data. You can do a plethora of things. If you're 35 or younger and had a xanga page, that's essentially all you need to know to do it. Most people who haven't looked at html before can sort of figure it out with the exception of certain things with page load of resources CSS before JS attributes of certain tags like href vs src. Many dont even use JS because not all of those programs or email clients will allow JS in emails. All email HTML pages are either inline styled or as i wrote it out above.

Stephen Marsh

Community Expert

@nstone101

I am agreeing with you, but also being practical with the apparent knowledge and skills of the OP.

N

nstone101

Participant

1. You absolutely can send an html file via email. I do it all the time for a living and at a very high level.

OK, from what I understand you want to know how to put everything in a single .html file. This is simple. Yes you can zip it but that's not helpful if you want someone to just click once and open it in the browser fully loaded with all your imgs and backgrounds and CSS or styling.

2. Right now you are using files saved on your disk drive in the same folder and the index.html or your .html file is looking for those images, and styling in a relative location according to how computer directories work.

HTML files can have styling and CSS and JS all in a single file. You just have to add it a certain way. You could in theory copy the contents of those files into <script>[code contents here]</script> tags and put it at the bottom of the .html file but above the closing body tag </body>. This is more difficult than just using CDNs. Most likely your dependencies or resource files are accessible online. You just need to point to file at a web address. Look at the top of your .html file. You may have bootstrap, jquery, modernizr, or libraries of that ilk. If you post your .html file I can tell you how to make them CDNs or where to find existing CDNs. Truthfully, most .html templates and apps use many of the same libraries as dependencies. Upload your photos online.
Example:
Then

<img src="https://onedrive.com/[username]/yourimage.jpg"/>

instead of

<img src="myimage.jpg" />

this s relative to the file on a disk drive/directory.

for styling

If working out of a folder that would need to be zipped and sent... it'll look something like this with perhaps a /css in the src address

<head>
  <link rel="stylesheet" href="styles.css">
</head>



/** To not have to send it your can wrap the contents of each .css file in <style> tags inside the HTML file in order and inside the <head> **/





<style type="stylesheet"> 

/** Bootstrap **/
.body {

font-family: Tahoma, arial,

margin-top: 10px;

},

/**..... etc.. etc. **/



</style>

</head>

then any other subsequent style sheets after can go below this but above the closing head. All these .css or css styling go at the top while usually JS go at the very bottom BUT above closing body tag. Look up email html templates and you'll get a good primary example of what i'm taking about. All your resources have to be publically accessible web hosted files. Like photos and .css and .js that's the main point. For speed purposes CDNs are the best but photos will need to be uploaded to your choice of cloud storage providers platforms and copy the link and paste it in after script tag's src="[url here"] attribute

Note: to link CSS the same way you don't use style tags you use link tags ***NOTE*** but the link tags still go in the head

but the easiest way is to use the link tag as well as the src attribute instead of the href attribute in order to source or point to your styling from a pubilc online upload

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Start by opening your html file in Notepad or Sublime Text 3 or Atom.io for autocomplete or auto-suggestion/intellisense to help you format things the right way. I think i've exampled these correctly but I did type it quickly. Just trying to help But you 100% can put it all in one file. It just has to be put in the right locations. I advice looking at W3Schools.com and look at links, style and script tags. It has information that lays it all out. Like this...

//below was sourced from W3Schools.com

The <link> element defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets:

T

Test Screen Name

Legend

It may not be very difficult or time consuming for you, but it is likely to range from easy to confusing to impossible for the person who gets the message. Would you go to all that trouble if someone emailed you a ZIP file? Depends how much you wanted to click on the graphic, I imagine.

I understand, I think, what you want to do. But you can't do it. There is no "folder" to add it to, an email is just a very simple way of sending attachments. Please, consider using a web site. Why wouldn't you?

T

Test Screen Name

Legend

It's not generally possible to email just an HTML file, because it needs the graphics and other files too, in the same folder. You can't achieve that unless you put them all in a ZIP. Better to put them on a web site and email the link.