# How to create webpage slides for teaching?

I have PDF slides prepared in Latex. I would like to have all of my slides in a website where students can find all learning materials, animations, examples, etc. Do you have any experience with creating HTML/CSS/other from slides? Is there any framework you would recommend?

Edit: I would like to write everything in HTML/CSS so I can add links and animations of algorithms in the future.

• I'm not sure I understand the question. You have... a powerpoint? And you're trying to convert it to HTML/CSS? – Ben I. May 16 at 16:42
• There are no power points here. I have PDF slides prepared in Latex. – Drimades Boy May 17 at 1:31
• I edited your question to include that information. In the future, if a clarification is requested, please also do this. Comments are considered transient on SE. Questions are meant to be high-quality and self contained. – Ben I. May 17 at 10:25

pandoc can convert slides written in markdown to a html presentation using reveal.js. pandoc can go markdown->latex (beamer) too. Not sure about going latex->reveal.js but it could be possible.

One of our instructors at CSU does his entire course web site using Pmwiki, which uses a markup language. If you follow certain conventions, it can be converted to a slide show in the browser. For an example how this works, see https://www.cs.colostate.edu/~cs253/Spring19/ This is a C++ course for students in the second year. On the home page is a link to the slide technology used. I believe it is java script that takes the HTML file and renders it in a slide format. If you look at the Schedule page and click any of the links to lecture material, you will see a straight web page. At the top left corner is a link that will render the page as a slide show. You can advance through the slide show using the arrow keys.

One of the other instructors takes screen shots of the PowerPoint slides and embed them in the HTML page. For an example of this style, see here.

If either of these interest you, I can put you in touch with the specific instructors.

# Some options

• just put the PDFs on the site.
• runestone — allows you to create interactive webpages, with programming code.
• sozi — for creating animated slideshows from SVGs.
• You can generate SVGs from $$LaTex$$. First use a $$Tex$$ engine that creates DVIs, then convert the DVIs to SVGs.

If you can get the slide deck into Google Slides you can publish to the web from there.

With your slides open, select Publish to Web on the File menu. From there click on Embed and then the Publish button. You'll get an HTML snippet that uses an iframe. Copy and paste that into your HTML and it'll look just like it does in the presentation.

• Does it work with PDFs? – Drimades Boy May 17 at 1:32
• Slides doesn't, but if you have the PDF online somewhere it's pretty easy to embed a PDF into a web page. – Ryan Nutt May 17 at 12:39

Create a Beamer presentation using RMarkDown and you can easily knit to HTML. Renders beautifully. Reference: Rmarkdown Beamer Presentation

• Hi Manoov, welcome to Computer Science Educators! This is currently a stub answer. Could you edit the answer to add more information? You will not find much in the way of upvotes for one-sentence responses. – Ben I. Jun 6 at 17:15
• Added reference to more clarity. – Manoov Jun 10 at 18:41