Embedding Your Slide Deck into a Web Page Using HTML

Quick reference

• 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.