Slides with Html

You can create slides using Html.

Start by creating a file named slides.html and then remember these three ideas:

1. Per reveal.js, slides are separated with <section/> tags.
2. Most standard Html tags do what you suspect.
3. You'll spend your time most efficiently if you study the data attributes and classes that are used in the reveal.js demo.

While the reveal.js demo is your ultimate reference, I've documented a few snippets that are commonly used below.

Separating Slides

Slides are separated with <section/>s.

Here are two slides:

  
<section>
  <h1>Slide 1</h1>
</section>

<section>
  <h1>Slide 2</h1>
</section>
  

Vertical Sldies

Vertical Slides are created by wrapping <section/>s within a parent <section/>:

Here are two vertical slides:

  
<section>
  <section>
    <h1>Slide 1</h1>
  </section>

  <section>
    <h1>Slide 2</h1>
  </section>
</section>
  

Speaker Notes

Speaker notes are visible only to you, and they are added with an <aside> that has a class="notes".

Here is a slide with a speaker note:

  
<section>
  <h1>Slide 1</h1>
  <aside class="notes">
    Remember to mention that..
  </aside>
</section>
  

Background Colors

You can change the background color of a slide by providing a data attribute named data-background. The value of this data attribute is any valid CSS color format:

  
<section data-background="#007777">
  <h1>Slide 1</h1>
</section>
  

Background Images

You can set an image as the background of a slide by providing the same data attribute that you did for the background color. However, the value of this data attribute should be a URL where an image can be found.

The URL can be absolute, like this one:

  
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg">
  <h1>Slide 1</h1>
</section>
  

Or you can download an image directly, save it to the images/ directory, and then reference it relatively like this:

  
<section data-background="images/reveal-parallax-1.jpg">
  <h1>Slide 1</h1>
</section>