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:
12
Replies
AdChoices