Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

An Introduction to HTML and CSS for EPUB

No description
by

Carolyn McNeillie

on 25 October 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of An Introduction to HTML and CSS for EPUB

AN INTRODUCTION TO HTML
AND CSS FOR EBOOKS This presentation is intended as an introduction to the concepts of HTML and CSS for publishers who have little or no experience with coding, and focuses on HTML and CSS as used in EPUB 2.0. WHAT IS HTML? HTML is a Markup Language developed for the Internet to control how text and media are displayed by a browser. An HTML file is a text-only file that includes tags that allow the program accessing the file to know what kind of content each part comprises. EPUB has adopted HTML to markup ebook text. PUBLISHERS
KNOW ALL ABOUT
MARKUP Like Proofreader's markup, Hypertext Markup Language (HTML) is a system of notation inserted into the text. It communicates to a browser or ereader how the manuscript is to be interpreted.

It is actually quite easy to learn and use. Once you understand the way HTML tags work, and the basic structure of an HTML document, there are lots of resources to help you to find the specific tags that you need. <h1>Chapter 1</h1> <h1>Chapter 1</h1> <h1>Chapter 1</h1> WHAT CAN HTML DESCRIBE Heading levels
Paragraphs
Line Breaks
Block quotes
Font size
Basic text styles (italic, bold, underlined)
Lists (numbered, bulleted, nested)
Tables
Links
Images SOME BASIC HTML TAGS <p>The paragraph tag.</p> Bold text can be created using the <b>bold</b> or <strong>strong</strong> tags. Italic text can be described using the
<i>italic</i> or <em>emphasis</em> tags. To break a line of text <br />
use the break tag. To break a line of text
use the break tag. THE STRUCTURE OF
AN HTML DOCUMENT An HTML document is a plain-text document. You can write an HTML file in a plain text editor like TextEdit or Notepad. Don’t write HTML in a word-processing program like Microsoft Word or Open Office; these programs impose hidden markup of their own which will interfere with your HTML file. Most text editors will save your file by default with an extension like .txt. You can manually enter your file name as “filename.html” to save an HTML document, or “filename.xhtml”, which we’ll get to later. All HTML files are wraped in <html> tags. <html>
</html> There are two main sections in an HTML
document: the head section, and the body. <html>
<head>
<!--Metadata goes
in the head section-->
</head>

<body>
<!--Content goes in
the body section-->
</body>
</html> <!-- This -->
denotes a comment. Comments are ignored by the browser and not displayed to the user. They are used to make notes to people looking at the HTML document. This is the first example of a tag which doesn't have an </end> tag. <html>

<head>
<title>My Book – Chapter 1</title>
</head>

<body>
<h1>Chapter 1</h1>

<p>
It was a dark and stormy night. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

</body>
</html> Throughout this presentation I’ve been referring to HTML, but everything I’ve described so far is true of HTML and XHTML. XHTML is what is used in EPUBs. So what's the difference? For your purposes, think of XHTML as HTML that follows stricter rules. For example, if you were writing HTML for webpages in the late 90’s, your code might have looked something like this: <HTML>
<HEAD><title>My Webpage</title></HEAD>

<body>
<p>
<img src=”under_construction.jpg”><br>
Th1s p4ge is UnDer c0nstRuXioN
</BODY>
</Html> <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Hello World!</title></head>

<body>
<p>
<img src=”HomeSweetHome.gif” /><br />
I’d like to buy the world a Coke!
</p>

</body>
</html> An XHTML file might look more like this: more detailed declarations
tags are case-sensitive
all tags are paired with an ending tag Later versions of HTML took on the rules followed by XHTML, and HTML 4 is nearly identical to XHTML, and so people really use these terms interchangeably. If you know how to use one, you know how to use both. Don’t think of XHTML as a new language, think of it as a different accent. AFTER VIEWING THIS PRESENTATION YOU WILL UNDERSTAND The function of HTML
The structure of an HTML document
Some simple HTML tags
How to navigate an HTML file
How XHTML and HTML are different
The function of CSS
How to link a CSS file to an HTML file
How to navigate a CSS file
How HTML and CSS files fit into an EPUB file
Where to learn more about HTML, CSS, and EPUBs <h1>Chapter 1</h1>

<p>It was a dark and stormy night. Lorem ipsum dolor sit a
met, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.</p> WHAT IS XHTML? XHTML WHAT IS CSS? HTML is called semantic markup because it describes what the content of a document is, not how it looks. A browser sees a paragraph tag and displays the content in a block of text with space before and after it, because this is how it has been programed to display a paragraph.

Different browsers may interpret the same tag differently, and different eReaders – because they are a new technology, and because to varying degrees they are trying to make EPUB files mimic printed books - almost certainly do display the same tags differently.

HTML does not give you control of how the elements are displayed. CSS does. tyle C
S
S ascading heets Think of CSS as a list of style directions for your ereader. It’s a one-stop place to set the rules for how your files will display. CSS gives you more control over your EPUB in a couple of ways. Leading (line-height)
Letter-spacing
Paragraph indenting
Control over serif or sans-serif
Finely calibrated font size
Margins and padding on elements
Element outlining You set the style once, and it applies everywhere.
If you want to change or tweak your styles, you only have to do it in one place to affect the look of the whole document. 2. CSS GIVES YOU CONTROL OVER YOUR WHOLE DOCUMENT FROM ONE CENTRAL PLACE 1.CSS HAS STYLING ELEMENTS NOT AVAILABLE IN HTML Chapter 1

It was a dark and stormy night. Lorem ipsum dolor sit a
met, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris. A SAMPLE CSS FILE h1 {
font-family: sans-serif;
font-weight: bold;
font-size: 15em;
text-align: center;
}

p {
font-family: serif;
line-height: 1.20em;
font-size: 1em;
text-align: justify;
text-indent: 10px;
} <html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>My Book – Chapter 1</title>
</head>

<body>
<h1>Chapter 1</h1>

<p>
It was a dark and stormy night. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

</body>
</html> A TOUCH OF CLASS Let’s say that you would like the first paragraph in every chapter to be flush left, and every paragraph after that to be indented. You can create two different paragraph styles using an attribute called “class.” h1 {
font-family: sans-serif;
font-weight: bold;
font-size: 15em;
text-align: center;
}

p {
font-family: serif;
line-height: 1.20em;
font-size: 1em;
text-align: justify;
}

p.no_indent{
text-indent: 0px;
}

p.indent{
text-indent: 10px;
} <html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>My Book – Chapter 1</title>
</head>

<body>
<h1>Chapter 1</h1>

<p class="no_indent">
It was a dark and stormy night. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

<p class="indent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

<p class="indent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet risus risus, at elementum mauris. Fusce facilisis convallis nunc, scelerisque semper orci auctor id. Suspendisse dolor odio, consequat pellentesque mattis ac, sagittis non magna. Suspendisse vel diam nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor rutrum ipsum non pellentesque. Mauris nibh felis, tempor quis fringilla sed, egestas nec mauris.
</p>

</body>
</html> HTML AND CSS IN EPUB An EPUB is a zip file containing a series of XHTML files, one for every chapter or part of your ebook, a CSS file, which describes how your XHTML files are to be displayed, and some standard structural XML files. A cover image, illustrations and other media linked in the files are contained in the EPUB too. RESOURCES XHTML & CSS http://w3schools.com/
Besides being a fabulous overall tutorial, W3Schools is easy to navigate when you need to find a specific tag, and it allows you to try and tweak XHTML and CSS right in your browser. EPUB RESOURCES EPUB Straight to the Point
This is the industry go-to book for learning about EPUBS. It's available as an ebook, naturally.

http://www.jedisaber.com/ebooks/tutorial.asp
This free tutorial takes you step-by-step through creating an EPUB including the container files. Great for troubleshooting.

http://www.digitalbookworld.com/2011/indesign-to-ebook-resources/
Colleen Cunningham has put together an exhaustive list of internet resources for making ebooks. Anything you could want to find is here. carolyn_mcneillie@eboundcanada.org Thank you for reading This code... displays like this in a browser. A little mark-up... makes a big difference. end tag beginning tag end tag together, they style this content
Full transcript