├── README ├── templates └── white.otp └── src ├── 1-intro.rst ├── 3-css.rst └── 2-html.rst /README: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/white.otp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattharrison/epub-for-3rd-graders/master/templates/white.otp -------------------------------------------------------------------------------- /src/1-intro.rst: -------------------------------------------------------------------------------- 1 | ============================== 2 | Digital Publishing with ePub 3 | ============================== 4 | 5 | .. class:: right normal black 6 | 7 | | @__mharrison__ 8 | | http://panela.blog-city.com/ 9 | 10 | .. class:: small black 11 | 12 | ©2011, licensed under a `Creative Commons 13 | Attribution/Share-Alike (BY-SA) license 14 | `__. 15 | 16 | ------------------- 17 | 18 | .. class:: center huge 19 | 20 | What is *Publishing*? 21 | 22 | Publishing 23 | ----------- 24 | 25 | Broadcasting knowledge 26 | 27 | Publishing (2) 28 | --------------- 29 | 30 | * Selection 31 | * Preparation 32 | * Marketing 33 | 34 | Text Publishing 35 | ----------------- 36 | 37 | Broadcasting printed material. 38 | Traditionally a partnership between publishers and authors 39 | 40 | History 41 | -------- 42 | 43 | * 9th Century - Chinese print books 44 | * 1440 - Gutenberg press 45 | * 1663 - Magazine in Germany 46 | * 1690 - American Newspaper 47 | * 1845 - Paperbacks 48 | * 1971 - First ebook (Declaration) 49 | * 2007 - Amazon Kindle 50 | 51 | 52 | Traditional Publisher 53 | ---------------------- 54 | 55 | * Sets direction of book 56 | * Sets schedule of book 57 | * Does editing 58 | * Does marketing 59 | * Does distribution 60 | 61 | Self Publishing 62 | ----------------- 63 | 64 | Enabled by 65 | 66 | * Print on demand 67 | * eBooks 68 | 69 | 70 | -------------------- 71 | 72 | 73 | .. class:: center huge 74 | 75 | What is an eBook? 76 | 77 | 78 | eBook 79 | ------- 80 | 81 | Digital book 82 | 83 | * .pdf 84 | * .mobi (Kindle) 85 | * .epub (iBook, Android, Nook) 86 | 87 | Why eBooks? 88 | ------------ 89 | 90 | Sales 91 | 92 | * 2009 - 3% ebook 93 | * 2010 - 8% ebook 94 | * 2011 - 20?% ebook 95 | 96 | 97 | -------------------- 98 | 99 | 100 | .. class:: center huge 101 | 102 | What will this class cover? 103 | 104 | Contents 105 | --------- 106 | 107 | * HTML 108 | * CSS 109 | * Typography 110 | * .epub creation 111 | -------------------------------------------------------------------------------- /src/3-css.rst: -------------------------------------------------------------------------------- 1 | ============================== 2 | CSS 3 | ============================== 4 | 5 | .. class:: right normal black 6 | 7 | | @__mharrison__ 8 | | http://panela.blog-city.com/ 9 | 10 | .. class:: small black 11 | 12 | ©2011, licensed under a `Creative Commons 13 | Attribution/Share-Alike (BY-SA) license 14 | `__. 15 | 16 | ------------------- 17 | 18 | .. class:: center huge 19 | 20 | What is *CSS*? 21 | 22 | CSS 23 | ------- 24 | 25 | Cascading Style Sheet 26 | 27 | CSS (2) 28 | ------- 29 | 30 | Tells html elements how to style 31 | 32 | * font 33 | * color 34 | * alignment 35 | * padding 36 | 37 | CSS (3) 38 | ------- 39 | 40 | epubs use a subset of CSS called OPS (Open Publication Structure) Style Sheets 41 | 42 | OPS 43 | ------ 44 | 45 | Example:: 46 | 47 | h1 { color: blue; 48 | font-weight: bold; 49 | font-size: 12pt } 50 | 51 | OPS (2) 52 | --------- 53 | 54 | Arrangement:: 55 | 56 | SELECTOR(S) { 57 | PROPERTY:VALUE; 58 | } 59 | 60 | OPS(3) 61 | -------- 62 | 63 | Can style multiple elements with:: 64 | 65 | h2, h3, h4 { 66 | color: red; 67 | } 68 | 69 | Example 70 | ----------- 71 | 72 | Create file chapter1.html 73 | 74 | .. class:: normal 75 | 76 | .. code-block:: html 77 | 78 | 79 | 80 | 81 | 82 | 83 |

Some text

84 | 85 | 86 | 87 | Example (2) 88 | ----------- 89 | 90 | Create file book.css:: 91 | 92 | p { 93 | color: blue; 94 | } 95 | 96 | 97 | Selectors 98 | ----------- 99 | 100 | * Tag Selectors 101 | * Class Selectors 102 | * ID Selectors 103 | 104 | Tag Selectors 105 | --------------- 106 | 107 | html 108 | 109 | .. class:: normal 110 | 111 | .. code-block:: html 112 | 113 |

Some text.

114 |

More text.

115 | 116 | css 117 | 118 | .. class:: normal 119 | 120 | .. code-block:: css 121 | 122 | p { 123 | color: blue; 124 | } 125 | 126 | Tag Selectors (2) 127 | ------------------ 128 | 129 | Just put element/tag names in selector area. 130 | 131 | Class Selectors 132 | ----------------- 133 | 134 | html 135 | 136 | .. class:: normal 137 | 138 | .. code-block:: html 139 | 140 |

Some text.

141 | More text. 142 | 143 | css 144 | 145 | .. class:: normal 146 | 147 | .. code-block:: css 148 | 149 | .bl { 150 | color: blue; 151 | } 152 | 153 | 154 | 155 | Class Selectors (2) 156 | -------------------- 157 | 158 | Matches value of class. Put period before class name. 159 | 160 | Class Selectors (3) 161 | -------------------- 162 | 163 | Can combine with class selectors:: 164 | 165 | span.dropcap { 166 | float: left; 167 | font-size: 4em; 168 | } 169 | 170 | 171 | ID Selectors 172 | -------------- 173 | 174 | html 175 | 176 | .. class:: normal 177 | 178 | .. code-block:: html 179 | 180 | 181 | More text. 182 | 183 | css 184 | 185 | .. class:: normal 186 | 187 | .. code-block:: css 188 | 189 | #header { 190 | color: blue; 191 | } 192 | 193 | 194 | 195 | ID Selectors (2) 196 | -------------------- 197 | 198 | Matches id of and element. Put ``#`` before class name. 199 | 200 | Psuedo-Element 201 | ---------------- 202 | 203 | Style first line or letter 204 | 205 | .. class:: normal 206 | 207 | .. code-block:: css 208 | 209 | /* this is a class selector */ 210 | .initial { 211 | color: #1213ac; 212 | } 213 | 214 | /* a psuedo-selector on the class */ 215 | .initial:first-line { 216 | text-transform: uppercase; 217 | } 218 | 219 | 220 | Values 221 | -------- 222 | 223 | Arrangement:: 224 | 225 | SELECTOR(S) { 226 | PROPERTY:VALUE; 227 | } 228 | 229 | 230 | Values (2) 231 | ----------- 232 | 233 | * numbers 234 | 235 | * length 236 | 237 | * px, em, pt 238 | 239 | * percentage 240 | 241 | * color 242 | 243 | * names 244 | * #rgb or #rrggbb 245 | 246 | * strings (in quotes) 247 | 248 | 249 | Properties 250 | ------------ 251 | 252 | Arrangement:: 253 | 254 | SELECTOR(S) { 255 | PROPERTY:VALUE; 256 | } 257 | 258 | 259 | Properties (2) 260 | --------------- 261 | 262 | .. class:: tiny 263 | 264 | * Box Model 265 | 266 | * Margins, Padding, Border 267 | 268 | * Formatting 269 | 270 | * width 271 | * line-height 272 | 273 | * Colors 274 | 275 | * color, background-color 276 | 277 | * Fonts 278 | 279 | * font-size, font-family, font-variant 280 | 281 | * Text 282 | 283 | * text-indent 284 | 285 | * Paged Media 286 | 287 | * page-break-before, -after, orphan, widow http://www.pigsgourdsandwikis.com/2010/06/goodbye-widows-and-orphans-or-yes-you.html 288 | 289 | 290 | Colors 291 | ------- 292 | 293 | Can specify like: 294 | 295 | * Decimal - ``rgb(255, 0, 33);`` 296 | * Percent - ``rgb(100%, 0%, 10%);`` 297 | * Hex - ``#ff001a;`` 298 | 299 | .. class:: tiny 300 | 301 | Example:: 302 | 303 | h1 { 304 | color: #73ff00; 305 | } 306 | -------------------------------------------------------------------------------- /src/2-html.rst: -------------------------------------------------------------------------------- 1 | ============================== 2 | HTML 3 | ============================== 4 | 5 | .. class:: right normal black 6 | 7 | | @__mharrison__ 8 | | http://panela.blog-city.com/ 9 | 10 | .. class:: small black 11 | 12 | ©2011, licensed under a `Creative Commons 13 | Attribution/Share-Alike (BY-SA) license 14 | `__. 15 | 16 | ------------------- 17 | 18 | .. class:: center huge 19 | 20 | What is *HTML*? 21 | 22 | HTML 23 | ------- 24 | 25 | Hyper Text Markup Language 26 | 27 | HTML (2) 28 | --------- 29 | 30 | * Basis of web 31 | * Adds structure to pages 32 | 33 | * titles 34 | * headings 35 | * links 36 | * emphasis 37 | * layout 38 | 39 | HTML (3) 40 | ---------- 41 | 42 | .. code-block:: html 43 | 44 | Hello World! 45 | 46 | HTML (4) 47 | ----------- 48 | 49 | HTML has 50 | 51 | * tags (elements) 52 | * attributes on tags 53 | * content 54 | 55 | Tags 56 | ----- 57 | 58 | *Tags* are the way to markup the text 59 | 60 | Tags 61 | ---- 62 | 63 | .. class:: normal 64 | 65 | .. code-block:: html 66 | 67 | 68 |

Heading

69 |

Normal text, emphasis

70 | 71 | 72 | XHTML 73 | ------ 74 | 75 | epub uses *XHTML* which is a little bit more restrictive that normal *HTML*. 76 | 77 | XHTML (2) 78 | ---------- 79 | 80 | Tags must be *well-formed* 81 | 82 | Good 83 | 84 | .. code-block:: html 85 | 86 |

Text

87 | 88 | Bad 89 | 90 | .. code-block:: html 91 | 92 |

Excited

93 | 94 | XHTML (3) 95 | ---------- 96 | 97 | Tags must be *well-formed* 98 | 99 | Good 100 | 101 | .. code-block:: html 102 | 103 |

Some text

104 | 105 | Bad 106 | 107 | .. code-block:: html 108 | 109 |

Some text

110 | 111 | 112 | XHTML Elements 113 | --------------- 114 | 115 | Tags and Elements are the same thing 116 | 117 | XHTML Elements (2) 118 | ------------------- 119 | 120 | .. class:: tiny 121 | 122 | * doctype 123 | 124 | * html 125 | 126 | * head 127 | 128 | * title 129 | * style, link 130 | 131 | * body 132 | 133 | * h1, h2, h3, h4, h5 134 | * p 135 | * img 136 | * a 137 | * span 138 | * div 139 | * table 140 | 141 | * tr, th 142 | 143 | * td 144 | 145 | * ol, ul 146 | 147 | * li 148 | 149 | 150 | Attributes 151 | ------------- 152 | 153 | Tags can have attributes in them 154 | 155 | .. class:: normal 156 | 157 | .. code-block:: html 158 | 159 | 162 | 163 | ``doctype`` 164 | ------------- 165 | 166 | Tells browsers/readers that document is XHTML 167 | 168 | .. class:: normal 169 | 170 | .. code-block:: html 171 | 172 | 173 | 174 | 175 | 176 | ``html`` 177 | ------------- 178 | 179 | *Root* element. Other elements are nested (children). 180 | 181 | .. class:: normal 182 | 183 | .. code-block:: html 184 | 185 | 186 | ... 187 | ... 188 | 189 | 190 | 191 | 192 | ``head`` 193 | ------------- 194 | 195 | Tells browsers/readers about information about the document (not displayed on page). 196 | 197 | .. class:: normal 198 | 199 | .. code-block:: html 200 | 201 | 202 | My Webpage 203 | 204 | 205 | 206 | ``title`` 207 | ------------- 208 | 209 | Tells browsers/readers the title of the document. 210 | 211 | .. class:: normal 212 | 213 | .. code-block:: html 214 | 215 | 216 | My Webpage 217 | 218 | 219 | ``style`` 220 | ------------- 221 | 222 | Tells browsers/readers styling rules 223 | 224 | .. class:: normal 225 | 226 | .. code-block:: html 227 | 228 | 229 | 232 | 233 | 234 | ``link`` 235 | ------------- 236 | 237 | Tells browsers/readers styling rules in another location. ``main.css`` can have rules. This is more common. 238 | 239 | .. class:: normal 240 | 241 | .. code-block:: html 242 | 243 | 244 | 245 | 246 | 247 | 248 | ``body`` 249 | ------------- 250 | 251 | ``body`` contains the text content. 252 | 253 | .. class:: normal 254 | 255 | .. code-block:: html 256 | 257 | 258 | 259 | This is the text 260 | 261 | 262 | 263 | ``h1`` (h2, h3, ..., h6) 264 | ------------------------- 265 | 266 | Different heading levels. ``h1`` is largest 267 | 268 | .. class:: normal 269 | 270 | .. code-block:: html 271 | 272 | 273 |

Chapter 1

274 |

Normal text.

275 | 276 | 277 | ``p`` 278 | ------------------------- 279 | 280 | A text paragraph 281 | 282 | .. class:: normal 283 | 284 | .. code-block:: html 285 | 286 | 287 |

Chapter 1

288 |

Normal text.

289 | 290 | 291 | 292 | ``img`` 293 | ------------------------- 294 | 295 | An image 296 | 297 | .. class:: normal 298 | 299 | .. code-block:: html 300 | 301 |

Normal text.

302 | 303 | 304 | 305 | 306 | ``a`` 307 | ------------------------- 308 | 309 | A hyperlink 310 | 311 | .. class:: normal 312 | 313 | .. code-block:: html 314 | 315 |

Normal text.

316 | Click here 317 | 318 | 319 | ``span`` 320 | ------------------------- 321 | 322 | Apply structure to text 323 | 324 | .. class:: normal 325 | 326 | .. code-block:: html 327 | 328 |

Normal text. OUCH!

329 | 330 | ``div`` 331 | --------- 332 | 333 | Allows grouping of elements 334 | 335 | .. class:: normal 336 | 337 | .. code-block:: html 338 | 339 |
340 |

A Note

341 |

Some text.

342 |
343 | 344 | ``table`` 345 | ----------- 346 | 347 | Allows tabular data 348 | 349 | .. class:: normal 350 | 351 | .. code-block:: html 352 | 353 | 354 | 355 | 356 | 357 |
NameAge
Paul20
George22
358 | 359 | 360 | ``ol``, ``ul`` 361 | ---------------- 362 | 363 | Allows for ordered list or unordered list 364 | 365 | .. class:: normal 366 | 367 | .. code-block:: html 368 | 369 |
    370 |
  • 2009 - 3% ebook
    • 371 |
  • 2010 - 8% ebook
    • 372 |
  • 2011 - 20?% ebook
    • 373 |
374 | 375 | ``em``, ``strong`` 376 | ------------------- 377 | 378 | Indicates "emphasis" and "strong emphasis" 379 | 380 | .. class:: normal 381 | 382 | .. code-block:: html 383 | 384 |
    385 |
  • 2009 - 3% ebook
    • 386 |
  • 2010 - 8% ebook
    • 387 |
  • 2011 - 20?% ebook
    • 388 |
389 | 390 | --------------------------------------------------------------------------------