Thursday, September 23, 2010

Adding pictures to your book

Books are not just linear text—at least not all of them. Without getting into a philosophical discussion about the evolution of the book and what the next generation will look like, suffice it to say that we like pictures. Pictures and graphic elements are used to illustrate, illuminate, and decorate. In our fairytale book, The Obstructive Bridge, we are going to add a decorative initial cap to the first paragraph. In this lesson we will cover both the new html element (<img>) and additional styling that is needed to make it line up where we want it.

First, the .ZIP file “Bridge.zip” should be copied to your hard drive and unpacked. This new package has the same files as previous packages but also includes a decorative image named “o.jpg.”
  1. In your text editor, open the file “content.html.” The image element is an empty element (has no end tag). It contains three necessary elements: The “img” element name, the url of the graphic, and alternate text (alt) that will be read by screen readers or displayed on mouse-over by devices that do not display images.

  2. Locate the first <p> tag in the document. We are going to replace the “O” in ONCE with a graphic, so delete the “O.” Immediately following the <p> tag, insert the following line:
    <img src="o.jpg" alt="Once" />

  3. The first line of the html file should now read:
    <p><img src="O.jpg" alt="Once" />NCE UPON A TIME,

    That is all that needs to be done to the HTML file, so save it and close it. Next we will work on the style sheet to indicate how we want the image to be displayed. Open “styles.css” in your text editor.

  4. We will add two lines in the style sheet. One line will remove the indent from the first paragraph of text that follows a <h1> heading. The second will cause the image to “float” to the left of the paragraph. This means that it will line up with the top of the line of text and the text will wrap around it. At the end of the css file add the following two lines:
    h1 + p { text-indent:0; }

    img { float:left; }

  5. Save and close “styles.css.” Open “Bridge.opf” in your text editor. We need to add the graphic element to the manifest so that readers understand it is part of this eBook. Locate the “manifest” portion of the file and before the closing </manifest> tag add the following line:
    <item id="o" href="O.jpg" media-type="image/jpeg" />

  6. Save and close the file, then drag and drop the three changed files into the OEBPS folder in your .ZIP file. Change the extension to .ePUB and open your book in a reader.


You have now added a graphic element to your eBook. We will deal more extensively with images in a future chapter and discuss some of the kinds of files you can use for images, different ways of displaying them in your text, and how to organize them in your document. Next, we’ll add several new chapters to the eBook.

1 comment:

  1. Nathan...is there a limit to how BIG you can make graphics in your ebooks? How wide they should be? or will each device squish it down to size?

    ReplyDelete