Locked lesson.
About this lesson
We’ll learn how to embed a Keynote slide deck into a web page.
Exercise files
Download this lesson’s exercise file.
Embedding Your Slide Deck into a Web Page Using HTML .key1 MB
Quick reference
Topic
We’ll learn how to embed a Keynote slide deck into a web page.
When to use
Whether you want to embed a Keynote presentation into a private Intranet site for your organization or on a public web site for your customers to see, this lesson will walk you through the steps necessary to do that.
Instructions
Keynote has a great feature that allows you to export a Keynote file to HTML.
Keynote files embedded into a website can include some of the following (and more):
- upcoming events
- customer visit schedule
- sales charts
- production information
- local weather
- business listings
- more…
To export a Keynote file as a series of HTML files:
- open the Keynote file
- go to File > Export To… HTML
- click “Next”
- choose a location to save the folder
After the export has completed, it will save a folder to the specified the location.
Note: DO NOT make changes to the files and folders that Keynote created. Doing so will limit the functionality of the exported files.
We can test our export by opening the file “index.html” in our browser of choice.
To finish embedding our Keynote file on a website, we upload the files to our web host, then create and point a link to that index.html file.
Login to download- 00:05 Keynote has a really cool feature that allows you to export a key note slide deck
- 00:09 to HTML format.
- 00:11 You may be asking, why someone would consider such a feature?
- 00:15 Let me throw out an example.
- 00:17 I run a small business that has an internally accessible intranet website.
- 00:21 On this internet site, I would love to include things like upcoming events,
- 00:24 health insurance information, general sales figures, and
- 00:28 much more information that any employee of the business may find useful.
- 00:33 Using text is okay, but eye-catching video is even better.
- 00:37 In addition to the internet site,
- 00:39 we also have several screens located strategically around our building.
- 00:43 That has a Keynote slide deck running 24 7, that displays this information.
- 00:48 Using Keynote allows us to harness the power of using images, videos,
- 00:52 transitions, bills, actions and
- 00:55 more to quickly convey our message to our employees.
- 00:59 Since it's so easy to do this using Keynote and often much more difficult
- 01:03 to accomplish the same thing using traditional HTML, XML, or other tools.
- 01:08 It would be awesome if we could just take what we've already done in Keynote,
- 01:12 simply export that out as a series of HTML files and
- 01:16 embed that right into our internet site.
- 01:18 Well, this is exactly what the HTML export feature does for us.
- 01:23 Let me first open the Keynote file that is playing on the screens
- 01:26 around our building.
- 01:28 You can see the information that is on display, here.
- 01:32 Next, we want to embed this into our internet site.
- 01:35 To do this, we go to File, Export to HTML.
- 01:42 From here, we click Next and are then presented for the name and
- 01:46 location of a folder that will be created for us.
- 01:49 This folder will contain the contents that will be needed to embed this
- 01:53 into our site.
- 01:55 After we have named the folder, we click Next to export.
- 02:00 Let's close Keynote now and look at our desktop.
- 02:03 As you can see, we have the new folder that was created for us,
- 02:06 as part of the HTML export.
- 02:09 If we open that folder, we will notice a file called index.html, and
- 02:14 a folder called assets.
- 02:16 Before I continue, let me stress to you the importance of not making changes to
- 02:20 the assets folder or it's contents within.
- 02:23 When Keynote exports a file to HTML, it exports everything from
- 02:27 text boxes to images and videos and stores them in a very specific way,
- 02:32 that it knows how to access them using the index.html file.
- 02:37 The assets folder also contains a media player that is used,
- 02:40 when a user plays the slide deck via the website.
- 02:44 If we open the index.html file using our default browser, safari in this case,
- 02:49 you will see that it simply plays a web version of our slide deck.
- 02:53 This is very cool and very useful in so many creative ways.
- 02:57 In order to finish embedding this HTML formatted slide deck into our website,
- 03:02 we simply upload these files to our web host, create and
- 03:05 point a link to this index.html file.
- 03:09 Since this lesson isn't a web development lesson, we won't go through those details.
- 03:13 But if you work on building web pages already,
- 03:15 you will likely know how to do this.
- 03:18 You can also use one of many HTML tags to embed the index.html file,
- 03:23 right into the home page of your website.
- 03:26 Doing this will automatically launch the video as soon as they access the webpage.
- 03:31 For you, web developers, I can already feel your creative gears in motion.
- 03:35 Take an existing Keynote file, export it to HTML and
- 03:38 try embedding it into your own website to see what it could look like.
- 03:42 This this could be an internal only website or something more customer facing.
- 03:46 The possibilities are endless.
Lesson notes are only available for subscribers.