Producing an HTML file with Jupyter Notebook
Contents
Producing an HTML file with Jupyter Notebook¶
Let’s suppose you have written your file and you are now ready to produce your final output. As I mentioned, there are two approaches, one simple (that produces quite nice content) and one advanced (that produces really nice content).
The simple approach really is very simple. From your Jupyter Notebook file go to the File menu, go to Download as and select HTML (.html). That’s it. Easy! This will produce the HTML file from your output. Note that this file will probably be saved to your Downloads folder, but you’ll want to make sure it is in the same directory as any figures or other relevant files for everything to load properly. You should then be able to just open the page in any browser and view your file.
As mentioned above, the mathematics will have been rendered using MathJax, meaning it straightaway meets accessibility requirements. You will also have a simple HTML file (and perhaps some figures) that you can then upload to your chosen web hosting service and it will be available to the world (I’ll say more about this later).
Example 1
You can click here to see an example of where I used this approach for a short course I taught. You can see everything is rendered fairly nicely and it looks like a pretty standard set of lecture notes.
Saving as a PDF¶
You may still wish to provide a PDF of your notes, say as a hand-out (although it would be simple enough just to print the webpage in this case). You may well have spotted that when you clicked the Dowload as dropdown, one of the options was PDF via LaTeX (.pdf). If you click this it should produce your PDF for you.
Warning
I have found this doesn’t always work first time as it asks me to ensure I have some LaTeX style file or other installed first. Of course you can just go ahead and download that missing file, or even just save the webpage itself as a PDF.
Producing multiple pages¶
The method I have covered here (and the example linked to above) produces just a single page. This would be fine for a fairly short course, and is ultimately not that different from a big PDF file being accessed online. But if you teach a longer course, browsing through a massive webpage is far from ideal for all concerned - I would imagine that in itself causes problems for accessiblity.
Of course there is nothing stopping you from creating multiple webpages. You can simply create a new Jupyter Notebook for each lecture’s content (or however you wish to divide it up) and download each as an HTML file. The challenge then is to link effectively between them. You can again make use of HTML tags here to create hyperlinks between pages, by adding,
<a href="my_2nd_chapter.html">Click here to go to chapter 2</a>
at an appropriate point. If you have a fair few chapters you may wish to create a central index with all the chapters listed, and then have each seperate page direct back to that.
It is at this point in proceedings where you may find yourself thinking, “This is getting a bit complicated, hasn’t anyone come up with a way to automate this?”.
The answer to that is: YES! Read on…