Slides are hardcoded to be 1024 x 768 overall. That's XGA and 4:3 is what most projectors have managed for a very long time. Sure there are newer ones that do 1080p and have HDMI input and are all very sexy, but “good luck with that” when you rock up to a public lecture theature expecting to find such a thing.
You will write your HTML in a
<section> element that is
width 864px and height 718px (the above full screen "resolution", less
an appropriate amount of padding top and sides.
When rendered in the browser the slide content will be scaled to fit in the browser window; you don't have to worry about that; you can think in terms of a fixed size canvas regardless of device size.
If you put an image on a page, you’re often showing that image (and
ony that image) as the entire point of the slide. So you give the
class="graphic" and the
image will be centred vertically and horizontally.
whereby an image is stretched to cover the screen vertically or horizontally,
For a text only slide that makes its point loudly, try
class="shout" which takes the
on the page and renders it in an enormous font centered on the screen.
If you have a footnote or citation to add to a side (perhaps attribution of the
source of an image) add a
<footer> within your slide. It will be
subtly rendered and aligned with the automatically added page numbers.
We recommend you use SVGs when creating custom graphics to illustrate things in your presentations. The ever fantastic Inkscape is a terrific way to compose them; if you're not familiar with drawing vector graphics it's well worth the investment of time to become fluent with Inkscape.
As an implementation matter, don’t use
<img>s to load
the SVGs; that is supposed to work, of course, but there are all kinds of
scaling and loading bugs out there. So instead of:
1 <section> 2 <h2>Explain all the things</h2> 3 4 <img src="pictures/Illustration.svg" class="graphic">> 5 6 </section>
1 <section> 2 <h2>Explain all the things</h2> 3 4 <embed src="pictures/Illustration.svg" type="image/svg+xml" class="graphic"> 5 6 </section>
and it'll work great. Go figure. It’s the same drawing code in the browser, but this way it
<object> has exactly the same
semantics, but you have to write an
</object> close tag;
<embed> saves you the trouble.
Note that all paths are relative to the location of the top-level master
.html file, not the (e.g.)