I have a widget in my grade 6 iBook that is a web page embed of a list of media resources. I created the page in a blog then copied and pasted the HTML to make a standalone web page.
[su_accordion]
[su_accordion] [su_spoiler title=”HTML Code” style=”fancy”]
DOCTYPE html>
<html>
<head>
<title>Media Resources</title>
</head>
<body>
<table style=”border-collapse: collapse; width: 100%;”>
<tbody>
<tr>
<td>
<h2>Flickr Resources</h2>
appropriate item CC use.” href=”http://www.behold.cc/”>Behold
<a title=”An easy to use Flickr Search Tool. Click on all to toggle the correct search.” href=”http://www.compfight.com/”>Compfight</a><br>
<a title=”Flickr search” href=”http://www.flickr.com/creativecommons”>Flickr Creative Commons Search</a><br>
<a title=”Flickr Search Tool” href=”http://www.zoo-m.com/flickr-storm/”>Flickrstorm</a><br>
<a title=”Flickr Search Tool” href=”http://www.flickr.com/commons”>Flickr Commons
</a><br><a href=”http://wylio.com”>Wylio.com
</a><br><a href=”http://imagecodr.org/”>ImageCodr</a><br>
<h2>Image Resources</h2>
Pixabay (cc-0)
<a href=”http://solate.tk”>Solate.tk (cc-0)</a><br>
<a href=”http://www.morguefile.com/”>Morgue File</a><br>
<a href=”http://www.everystockphoto.com”> Everystockphoto</a><br>
<a href=”http://www.geograph.org.uk/”> Geograph</a><br>
<a href=”http://openphoto.net/”> Open Photo</a><br>
<a href=”http://photo2.si.edu/”> Smithsonian Photos</a><br>
<a href=”http://www.nationsillustrated.com/”> Nations Illustrated</a><br>
UVic’s Language Teachers Clip Art
<a href=”http://www.pics4learning.com/”> Pics 4 Learning</a><br>
<a href=”http://www.photl.com”> Photl.com</a><br>
<a href=”http://www.nasa.gov/multimedia/imagegallery”> NASA Images</a><br>
<a href=”http://www.dreamstime.com/”> Dreamstime</a><br>
<a href=”http://www.sxc.hu/”> Stock Xchng</a><br>
<a href=”http://www.istockphoto.com”> StockVault</a><br>
<a href=”http://www.explore.co.uk/”> Explore</a><br>
<a href=”http://unprofound.com/”> Unprofound</a><br>
<a href=”http://www.burningwell.org”> Burningwell</a><br>
<a href=”http://www.openclipart.org”> Open Clip Art Library</a><br>
<a href=”http://www.4freephotos.com/”>4 Free photos
</a><br><a href=”http://commons.wikimedia.org/wiki/Main_Page”>Wikicomons</a><br>
<a href=”http://www.historicalstockphotos.com/”>Free Historical Stock Photos</a><br>
<h2>Color Swatch Tools</h2>
<a href=”https://color.adobe.com/create/color-wheel/”>Adobe Color</a><br>
<a href=”http://www.colourlovers.com/”>Colour Lovers</a><br>
</td>
<td>
<h2>Cartoon Resources</h2>
<a title=”Cartoon Maker” href=”http://toondo.com”>ToonDo</a><br>
<a title=”Cartoon Maker” href=”http://chogger.com”>Chogger</a><br>
<a title=”Cartoon Maker” href=”http://www.bitstrips.com/”>Bitstrips</a><br>
<a title=”Cartoon Maker” href=”http://stripgenerator.com/”>Stripgenerator</a><br>
<a title=”Cartoon Maker” href=”http://www.pixton.com”>Pixton</a><br>
<h2>Music Resources</h2>
<a title=”Music with CC license” href=”http://ccmixter.org/”>CC Mixter</a><br>
<a title=”Royalty free music” href=”http://incompetech.com/m/c/royalty-free/”>Incompetech</a><br>
<a title=”Music site with some copyright friendly tunes.” href=”http://www.owlmm.com/”>OWL Music Search</a><br>
<a title=”http://freemusicarchive.org/” href=”http://freemusicarchive.org/”>Free Music Archive</a><br>
<h2>Sound Resources</h2>
<a title=”Offers a variety of CC sound (not music)” href=”http://www.freesound.org/”>Free Sounds</a><br>
<a title=”Royalty Free Sounds” href=”http://www.soungle.com/”>Soungle</a><br>
<h2>Video Resources</h2>
<a title=”http://spinxpress.com/getmedia” href=”http://spinxpress.com/getmedia”>Spinxpress</a><br>
<h2>Lyrics</h2>
<a title=”http://www.lyricsoncall.com/” href=”http://www.lyricsoncall.com/”>Lyrics On Call
</a><br><a title=”http://www.lyricsmode.com/” href=”http://www.lyricsmode.com/”>LyricsMode</a><br>
<a title=”http://www.justlyrics.com/” href=”http://www.justlyrics.com/”>Just Lyrics</a><br>
<a title=”http://www.elyrics.net/” href=”http://www.elyrics.net/”>Sound Lyrics</a><br>
<h2>Icons</h2>
<a href=”http://thenounproject.com/”>Noun Project</a><br>
<a href=”http://www.flaticon.com/”>Flat Icon</a><br>
<a href=”http://iconmonstr.com/”>Iconmonstr</a><br>
</td>
</tr>
</tbody>
<br><br>
</body>
</html>
[/su_spoiler]
[/su_accordion]
The HTML is just a simple two column table with links to the resources which I uploaded to the school FTP server. I used BookWidgets, a tool I use quite a bit (more on that in a future post), to embed the web page into a iBook widget. Unfortunately, when I went to test it I found it didn’t work: our FTP server was down.
So I looked to see what I could do using Hype. I created a document and inserted an HTML5 widget object. Double clicking on the widget object, or clicking on the pencil opened the Inner HTML area where I pasted the HTML code. After resizing the object to fit the widget space I exported the project as a Dashboard/iBooks Author Widget. Dropping it on to an iBooks Author page made it available for the students.
Another way of adding content to the iBook.