Ebook Basics: Understanding HTML, XML, CSS, ePub, for beginners

16,248 views

Published on

This is a very simple and basic introduction to ket technologies that are used in ebooks and the web. It's intended to give people with little technical knowledge a basic, conceptual understanding on how these important technologies work.
At the end of the presentation, there's also a quick, 5-step way to build a website free using WordPress.com.
By Martin Taylor, Director of the New Zealand Digital Publishing Forum.

Published in: Education, Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,248
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
7
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Ebook Basics: Understanding HTML, XML, CSS, ePub, for beginners

  1. 1. Under the hood – Getting techie
  2. 2. What is an ebook? <ul><li>Digital Publishing’s goal: Create once, re-use many times </li></ul><ul><li>To work effectively ebooks today need to: </li></ul><ul><ul><li>Support reflowable text </li></ul></ul><ul><ul><li>Ideally support scalable images (SVG) </li></ul></ul><ul><ul><li>Be compact and contained in a single file </li></ul></ul><ul><ul><li>Simple layout (often displayed in black and white), easily readable </li></ul></ul><ul><ul><li>Be in a suitable format for e-reader devices </li></ul></ul>
  3. 3. Under the hood <ul><li>Most ebooks today are built on a foundation of (X)HTML / XML , the language of the web </li></ul><ul><li>Common formats today: mobi, azw, ePub, PDF </li></ul><ul><li>PDF is adapting with announcement (Feb 09) of reflowable PDF aimed at mobile devices </li></ul><ul><li>Digital Rights Management </li></ul><ul><ul><li>DRM or DRM-free ? A key decision for publishers and the industry </li></ul></ul>
  4. 4. Under the hood - HTML/XML Chapter 1 What is an Ebook? An ebook is a book without pages. HTML describes the presentation of your book (or web page). For instance:
  5. 5. Your book is 'marked up' to show the e-reader how to display it <html> <body> <h1> Chapter 1 </h1> <h2> What is an Ebook? </h2> <p> An ebook is a book without pages. </p> </body> </html>
  6. 6. This is what it looks like when viewed in the browser / e-reader Chapter 1 What is an Ebook? An ebook is a book without pages.
  7. 7. XML describes the structure <chapter> <title> What is an Ebook? </title> <paragraph> An ebook is a book without pages. </paragraph> </chapter>
  8. 8. Using CSS to style your document <ul><li>CSS = 'Cascading Style Sheets' </li></ul><ul><li>Apply a designated style to the underlying HTML document </li></ul><ul><li>The power of CSS comes from being able to restyle an entire document by just changing its style sheet </li></ul><ul><ul><li>“ Create once, re-use multiple times” </li></ul></ul><ul><ul><li>Can allow the same content to be formatted to suit entirely different outputs – eg printer, PC, mobile phone </li></ul></ul>
  9. 9. So, this HTML <html> <body> <h1> Chapter 1 </h1> <h2> What is an Ebook? </h2> <p> An ebook is a book without pages. </p> </body> </html>
  10. 10. Combined with this CSS ... body {color: black} h1 {font-family: “comic sans ms”, arial, 'sans serif'} h2 {color: red} p {text-align:center}
  11. 11. Produces this style variation Chapter 1 What is an Ebook? An ebook is a book without pages.
  12. 12. Metadata – data about the ebook <ul><li>As well as creating the book, we need to describe it for selling purposes </li></ul><ul><ul><li>Eg ISBN, author, price, availability, blurb, links to cover image, etc </li></ul></ul><ul><li>E-tailing is driving a need for standardised metadata as computers manage more of the process </li></ul><ul><li>ONIX ( ON line I nformation E x change) is the book industry standard </li></ul><ul><ul><li>An XML standard, 31 core metadata elements </li></ul></ul>
  13. 13. Bonus : A free website in 5 steps and 15 minutes No HTML coding needed
  14. 14. Bonus : A free website in 5 steps <ul><li>Go to WordPress.com </li></ul><ul><li>Sign Up for a free account then Login </li></ul><ul><li>Go to Appearances | Themes </li></ul><ul><ul><li>Choose a theme (site design) and Activate it </li></ul></ul><ul><li>Go to Settings | General </li></ul><ul><ul><li>Add your site’s Title and Tagline </li></ul></ul><ul><li>Go to Posts | Add New </li></ul><ul><ul><li>Write your first story and Publish! </li></ul></ul>
  15. 15. Add PAGES for static information
  16. 16. Instant website (cont.d) <ul><li>(Optional) Go to Pages | Add New </li></ul><ul><ul><li>Write pages for static info (eg Home, About Us, Contact Us) </li></ul></ul><ul><li>Go to Settings | Reading </li></ul><ul><ul><li>For Front Page Display select A static page </li></ul></ul><ul><ul><li>Choose a Page for the Front page and for the Posts page (ie your news/blog articles) </li></ul></ul><ul><li>Save Changes . You’re done! </li></ul>
  17. 17. So there it is … in case you’d ever wondered 
  18. 18. Thanks! Martin Taylor web: digitalpublishing.org.nz email: martin@digitalstrategies.co.nz blog: activitypress.com/ ereport

×