How is Chrome SingleFile format achieved? - html

Chrome has an extension called SingleFile. It basically saves a web page in a one file *.htm page that is a clone of the original website. I have seen something like this done with Mozilla MAFF format. The MAFF format saves the file in *.maf, and is you want to see contents (html, css, images etc.) you can change the format to *.zip. Then you can unzip it. With the SingleFile (Chrome) you can’t unzip the file by changing extension. Does anybody know how this is achieved? Is this a known thing that *.htm can offer? Thanks

The MAFF format saves the file in *.maf, and is you want to see
contents (html, css, images etc.) you can change the format to *.zip.
Then you can unzip it.
I'm assuming that you're really asking just how the image files are stored in .htm since html and css can easily be stored as text in htm.
It uses uuencode/uudecode to embed image files in the .htm file. More on that here:
https://en.wikipedia.org/wiki/Uuencoding
This is why changing the extension to .zip won't turn the file into a zip package that you can unzip.
Illustrative side-by-side screenshots of external vs. embedded image.

I found this article may help: http://www.techgainer.com/enable-single-file-mhtml-support-chrome/
On Chrome address bar, type chrome://flags, then hit enter. Now use Ctrl+F (Command+F on Mac) bring search bar and search for mhtml as I did below. Once you find the option, click on Enable link.

Related

Why is my HTML code not translating right to the browser?

When I type my code in VSCode, it ends up looking like below in Google Chrome. Why would it be doing that?
I tried fixing my code and I expected it to come out looking cleaner in the browser. It actually just brought over all of the code.
When loading local files, browsers use the file extension to determine how to process the file.
Since your file doesn't have one, it treats it as plain text.
Rename it so it ends in .html.
From the URL, it is clear that you've not saved your file with .html extension. That is why it is showing up as text instead of a web page.
Save the file with name Mywebsite.html and try again. Hope this helps!

Inserting index.html file into Github Repository

I've created a very simple website in a Codecademy exercise that I'd like to upload to the Internet using Github Pages. Because you are unable to export your index.html and main.css files from Codecademy, I copy and pasted them into a word document, with the intent to get them in their proper file formats. However, I have been unable to find a source to convert these plain text files to .html and .css formats. Also, I've created an account on Github and a new repository, but the tutorial doesn't cover how to insert these two files into this repository.
How do I convert code from text in a document to .html and .css file format, and then insert these files into a Github repository? Thanks!
You don't need any special tools to convert plain text files to html or css.
You simply do it yourself as well.
Follow the steps to change .txt files to .html or .css:
Right-click on your index.txt or main.txt
Click on Rename from the list of options shown
Then it will take you to editing the file name
Navigate the cursor and delete txt
Type html in txt's place
Press Enter
Then you might receive a prompt asking if you are sure. Click on Yes/use .html whichever is appropriate for your prompt.
Voila! you have your file extension changed
Follow a similar approach to change the files to css as well
*Please note that my screenshots are from Mac OS and may look different from yours depending on the Operating system you are using
Hosting Webpages on Github:
Github pages website gives you a step by step guide with visual illustrations on how to do it.
If you are looking for a more comprehensive guide, then please refer to this page.
Seems nonsense, but after struggling a lot with Github Pages I have tested (and worked):
duplicate your first html file and rename it as index.html
drag and drop it into the /docs folder
drag and drop the remaining html files to the /docs folder (including the one you
have duplicated, of course with it´s original name)
commit changes
Goto Settings / Github pages and
Go down till “Github Pages”
Clic on the down arrow in [None] and select “main”
Clic on the down arrow in [/root] and select “/docs”
Clic on [Save]
After a few minutes you will see in [Settings] / “Github Pages”
Your site is published at
https://your_account_name.github.io/your_repo_name/

Iframe contents not visible in a chm file

I am compiling one chm file with set of html files. In one html file i am using iframe tag and viewing text file throught 'src' attribute. I am able to see the contents of text file inside iframe when opening that HTML file in a browser. But when viewing that file in a chm file i don't see text file content. It is showing 'This page can’t be displayed' error in iframe.
This is the tag i'm using:
<iframe src="./mytextfile.txt" style="width: 100%; height: 300px;border:none"></iframe>
Is there anything to add to view that file. Please help me.
As you can see - your problem is reproducible (here on a German Windows10 machine).
You must ensure that the text file is either in the same directory as the project (.hhp) file or in a subdirectory of that directory.
You also have to add the *.txt file extension or filename to the [FILES] list in the .hhp file, as this ensures that the text file will be compiled into the .chm file. Best way is to do this by a text editor like shown below:
Save the *.hhp file and compile all content to your *.chm file.
Done!
BTW - here are some hints to another problem may be targeted:
Microsoft introduced some security restrictions many years ago that disable functionality in HTML Help files that are accessed over a network, so what you're seeing is almost certainly by design. There are two possible solutions: move the help file to your local drive, or implement some changes in the Windows registry so that you can view the contents of remote help files.
Microsoft's summary of the problem: http://support.microsoft.com/kb/896054
You may try following workaround that lets you explicitly 'unblock' a CHM help file coming from a network drive or internet download. To do this:
Open Windows Explorer
Find your CHM file
Right click and select Propertie
Click the Unblock button on the General tab
For information on how to make the registry changes, see this page:
http://www.grainge.org/pages/authoring/chm_mspatch/896358.htm
Or more straightforwardly, use the free HHReg utility available from the page below to make the required changes.
http://www.ec-software.com/products_hhreg.html

Link to open PDF from folder

I have some PDF's sitting in a folder on my computer, is there a way to write a link to open them on to a webpage?
The main idea is when the site goes live the link will be used to download the pdfs from the folder, but obviously at a later stage the folder will be a temp folder on my website.
So at the moment i just want to open the pdfs from a link, and the final goal will be to have the links download them.
Can any one help me?
This is the file path to get to the pdf i want to link to.
C:\Users\Shaun\Documents\FormValue\CS1.pdf
How would i create the link?
If you want to have a link to a PDF, you just have to put the relative path to the file in the href attribute of an a tag. So let's say you had a folder called pdfs, with the file boom.pdf inside it, and folder called site sitting beside it, with the file site.html in it. Then all you'd have to do is put this link in the html file:
Link to a pdf
In most (all?) browsers now a days, that will open the PDF in a new tab. To download it you would right-click it and do the Save Link As thing. Just need to get the path in href right.
UPDATE
If you want to use the full path to the file, you need to prefix it with file://. Then you just put it in the href the same as with a regular link, ending up with something like:
Link to a pdf
This should work with your set up, but if the pdf and the html files are stored near each other, relative URLs are still a good option. A little bit of Google work should show you how to write those.
For each PDF just do what I talk about here.
<object height="950" data="sample-report.pdf" type="application/pdf" width="860">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="sample-report.pdf">click here to
download the PDF file.</a>
</p>
</object>
It works with most browsers and it degrades nicely.
It sounds like youre asking if you can put a link on a web site to a PDF sitting on your computer. You can't. The files have to be either on another web site or on your site's server.
If you are using ASP.NET, you can have the link point to a handler that accepts a query string identifying the file, either by file name or a hash of the file. Then the handler can look in the folder for a file that matches the pattern, read the file as a byte array, and then write those bytes to HttpResponse.

Strange problem while compiling CHM file

I had to write some documentation. I wrote each page in MS Word and then save each *.docx as htm file. I'm using "HTML Help Workshop" (from microsoft) to compile a chm file.
I was able to sucessfully create a chm file but the problem is that not all images in chm file are displayed. I tried decompiling the *.chm file into another folder and opened each .htm file in web browser. All images are correctly displayed.
Then why aren't they displayed in chm file. Strangely, only some of them aren't displayed. I checked if image format is causing problem, but all images are of same format. I checked if file naming is a problem, but all images are named like image[001-100].jpg in their corresponding folders.
Any idea about whats going wrong?
HTML Help Workshop (HHW) is known to have problems with the HTML generated by Word (or better put: Word generates terrible HTML). Some versions put VML coding around the IMG tags that HHW cannot handle.
Possible solutions:
In Word: Deselect the option 'Rely on VML for displaying graphics in browsers' (Tools > Options > General > Web Options)
In Word: Save as 'filtered HTML'.
In HHW: Manually add the images to the project's [FILES] section.
Let me know if any of this helps.
More information can be found in the HTML Help 1.X FAQ