I understand this might not be the best place to ask this question...
I have an application that's sending important html documents to my Kindle. They are displayed all right, but all referenced resources (css, images etc) are not there.
I don't really care about absent css, but having images is crucial for me. Even though sometimes they are absolutely referenced, they are not displayed.
I tried to send a zipped archive with the html file and all images it references, but Kindle interpreted it as separate documents instead.
P.S. I'm sending the documents via Amazon's free #free.kindle.com e-mail.
You have to use KindleGen utility to generate from your .html to .mobi to preserve images, css and use things like cover image, table of contents etc.
When you have your .html file and related image resources you have to create (generate) .opf file (generally it is just xml file describing your book resources). KindleGen has
included example of Kindle User guide in .html with related .opf
After that just use kindlegen with your .opf file from shell to create .mobi file which you can email after to your kindle email adress.
When you send only a zip to the Kindle it will separate everything in this document.
You need to convert this zip into a mobi file then the Kindle know this is one document.
For that task you can use Calibre or any other ebook converter. Every image has to be in the root-directory and referenced via a relative path.
Sample:
<div id="header">
<h1>Logo</h1>
<img src='blabla.png'/>
</div>
Related
How do I convert an HTML file with content folder to a self-contained HTML file which can be viewed from anywhere with its images etc.
How can it be done so that it's also editable and stays self-contained, post-edit?
I basically need to make HTML file based documentation which can be viewed from anywhere. Unfortunately it HAS to be HTML, otherwise I would have made PDFs
You can use pandoc, it has an option to create self-contained html files https://pandoc.org/MANUAL.html#option--self-contained.
If you start with html, this is the command.
pandoc in.html --self-contained -o out.html
This tool can do a lot more things, for example, you can also generate html from markdown files or generate pdfs instead.
The most direct way is to convert all asset urls to data: urls. (There are online coverters available that will take a provided asset and produce a data: url from it.)
A possibly simpler way is to convert image and font urls to data: urls while instead inlining scripts and css.
Edit: Possibly of interest: inliner, a Node utility for doing this kind of thing. "Turns your web page to a single HTML file with everything inlined". Also performs a number of minifying optimizations.
I don't know exactly what you're envisioning, but HTML was never meant to be fully self-contained. There may be some loopholes that allow it in the end, but to my knowledge there are no premade tools that do this 'conversion'.
It would require the following things:
Converting all linked style sheets and scripts to inline style sheets and scripts. This means that whenever there's a <script src="http://url.to/foo.js"></script> you'll have to download foo.js and include it as such: <script type="text/javascript"> [this is the content of foo.js] </script>. Something similar applies to CSS and other linked source files.
Downloading all linked media (images mostly, I presume) and converting them to blobs (a service that provides you with a base64 blob you can use within a HTML file is https://www.base64-image.de/). This means replacing <img src="http://url.to/image.jpg" /> with <img src="data:image/png;base64,[converted image data goes here] />.
So there's gonna be some manual labour involved there, but it probably can be done (almost) fully.
Possibly there's a way to accomplish what you're wanting to do another way though, what exactly is your reason for wanting this?
Here's another option: write your documentation in markup, then use a tool such as "Marked 2" (http://marked2app.com) to convert to self-contained html. Works slick. Plus you can go back and edit the markup any time you need to update your documentation, then simply re-export your html file.
I am pretty new to web design, so this may be a very elementary question. I have a folder where I have multiple HTML files for a simple web page, I also have CSS style sheets and JPGs for the web backgrounds. I want to send the sample website to my friends via email, but there are about 10 files in a folder. Is there any way to bundle them to make it simpler for a non-programmer to open and view the website?
In short: No.
You should really just send them a zip folder containing the different HTML files, CSS files, and images. That way they can just decompress the zip, open up the default document (i'm guessing index.html) and view the website locally on their machine. If you'd like further explanation please let me know.
We have a bunch of files (css, js, html, flash, swf, etc) put together by a third party to show videos on our site. This link is an example of the type of rendered output that i'm talking about - http://www.esi-intl.com/public/us/resources/virtualclassroom/presentation.htm. This isn't my company but I was able to find this via google since our site is not live yet.
Our editors would like to include these files in the Media Library and display these pages from there. I've tried to include these files but the HTML page doesn't render instead it is offered as a download. I've tried commenting out the Mime type in the Mimetype config file but I'm not having any luck.
Can the Sitecore media handler be modified to get these HTML files to render as pages?
Thanks
Html in media libary could.
To get the correct mime-type look at the setting name="Media.RequestExtension" set the value to "" then you get the original extension.
That makes things become easier for the web server to give the correct mime type.
I am trying to convert a word document into html. I used an online converter http://word2cleanhtml.com/ but it does not keep the pictures I have in my file. From the html I will be making a nook and kindle ebook. Does anyone have a tool or suggestion for this project?
Using save as html in word doesn't keep images either.
Download the KindlePreviewer: http://www.amazon.com/gp/feature.html/?docId=1000765261
Then, save your file as HTML. Images will not be part of the html file, instead they are stored in a separate folder.
Open the resulting html file into the KindlePreviewer, it will find the images in the images folder and add them to your book.
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.