Best source for learning HTML & CSS

[bigpallooka]

I have absolutely no practical experience with HTML or any other programming and was wondering if anyone could recommend a source (application, book, forum, tutorial etc.) to learn the fundamentals that will help me to produce properly formatted or re-formatted books, specifically ePub.

I have an extensive collection of PDF and other books that need considerable rehashing to get them into what I consider readable form that can't be accomplished by simple conversion in calibre.

The main problems are books that have been converted multiple times in different formats and books that have been OCR'd to plain text.

I would also like to generate my own original works in clean ePub format.

I guess the questions I need answered are:

1. Is learning certain elements of HTML and CSS what I need to accomplish the tasks I have set myself? (Correcting or setting page and paragraph lay-out, TOC, images, tables)

2. What elements should I concentrate on?

3. Where are good sources for studying these elements?

4. Am I asking the correct questions?

In my mind I imagine the process as: converting books to ePub using calibre, exploding the book, loading it Notepad++ (or similar), using my newly acquired skills to reformat the book appropriately, re-combining the book and loading it onto my Kobo for hours of frustration free fun

Regards

[theducks]

Originally Posted by bigpallooka

I have absolutely no practical experience with HTML or any other programming and was wondering if anyone could recommend a source (application, book, forum, tutorial etc.) to learn the fundamentals that will help me to produce properly formatted or re-formatted books, specifically ePub.

I have an extensive collection of PDF and other books that need considerable rehashing to get them into what I consider readable form that can't be accomplished by simple conversion in calibre.

The main problems are books that have been converted multiple times in different formats and books that have been OCR'd to plain text.

I would also like to generate my own original works in clean ePub format.

I guess the questions I need answered are:

1. Is learning certain elements of HTML and CSS what I need to accomplish the tasks I have set myself? (Correcting or setting page and paragraph lay-out, TOC, images, tables)

2. What elements should I concentrate on?

3. Where are good sources for studying these elements?

4. Am I asking the correct questions?

In my mind I imagine the process as: converting books to ePub using calibre, exploding the book, loading it Notepad++ (or similar), using my newly acquired skills to reformat the book appropriately, re-combining the book and loading it onto my Kobo for hours of frustration free fun

Regards

People learn differently, so use a technique that works for you.

My technique (for EPUB) was find some books that I found the style and layout pleasant to read.

Reverse engineer it.
By that, I mean find a Paragraph or other section you like , then find the code (source and CSS) involved and figure what does what.

Calibre does really clean, simple code when converting ASCII txt. There are no 'tricks' in use. No italics.... Simple.

For some decent examples, Baen Free Library EPUB for no frills, with basic styling (has a very good chance to work on most devices).

Documents converted from Word seem to have the messiest code and style sheets and should only be used to learn how not to code things

Remember this about HTML code,
If it works, it is not done wrong
(in may only be a less elegant solution to the coding problem )
I use the Standards References from W3.org for syntax guidance.

One other tip.
Don't code to a specific reading device. Test your work on various devices and programs...At different Zoom levels. You may have to make compromises in your code to accommodate the deficiencies of some devices.

[bigpallooka]

Originally Posted by theducks

People learn differently, so use a technique that works for you.

My technique (for EPUB) was find some books that I found the style and layout pleasant to read.

Reverse engineer it.
By that, I mean find a Paragraph or other section you like , then find the code (source and CSS) involved and figure what does what.

That is a great idea that hadn't occurred to me.

Originally Posted by theducks

One other tip.
Don't code to a specific reading device. Test your work on various devices and programs...At different Zoom levels. You may have to make compromises in your code to accommodate the deficiencies of some devices.

Good point. Just because I use a Kobo now doesn't mean down the track I might not find something else more appropriate.

[Worldwalker]

I'm on the more technical side here (I hand-code websites) so my HTML suggestions are W3 Schools (free website full of wonderful things) and O'Reilly's ebooks (very affordable if you get them on sale). If you're a tech geek like me, they're wonderful. If you're not, they're scary. YMMV.

[bigpallooka]

Originally Posted by Worldwalker

I'm on the more technical side here (I hand-code websites) so my HTML suggestions are W3 Schools (free website full of wonderful things) and O'Reilly's ebooks (very affordable if you get them on sale). If you're a tech geek like me, they're wonderful. If you're not, they're scary. YMMV.

W3Schools was one of the first websites I came upon that made me feel like I had a hope

I found a couple of tables I thought I might print out to keep at hand also with common tags.

The real issue is knowing what to bother with and I think theducks suggestion of reverse engineering will go a long way towards giving me a basis of at least where to start.

[bigpallooka]

In several posts I have read that calibre uses XHTML and not HTML. Is this true and what is the impact on this particular discussion?

[theducks]

Originally Posted by bigpallooka

In several posts I have read that calibre uses XHTML and not HTML. Is this true and what is the impact on this particular discussion?

Far from being an expert
For our purposes, the Declarations In the Document Headers (Not Body Headings).

If you start Editing with Sigil, it puts the boilerplate stuff in place for every new (blank) page created. Sigil will also create your TOC based upon headers.
Nothing say you you can't use a combination of tools to create your masterpiece

[ldolse]

Reverse Engineering seems to be easier, I agree with theducks - most html/css tutorials are aimed more at webmasters. Much of what's applicable to web is not applicable to epub.

The layout of a typical book is pretty straightforward. I suggest you try to find sources that haven't been converted by Calibre - not to say that there is anything wrong with Calibre, it's just that Calibre converted HTML has a specific signature - specifically naming all the different CSS styles based on it's own normalization rules. If you find original good sources then the css styles typically have meaningful names that help you understand how the book was layed out.

xhtml is html - the difference is that xhtml must be 'perfect' in terms of opening and closing every tag. HTML spec is more relaxed. If you're editing stuff by hand you don't need to worry too much about xhtml - it's definitely good practice to close your own tags, but tools like Calibre/Sigil will constantly clean up after you when you make mistakes.

[Worldwalker]

If you want some good "cheat sheets" to print out, go here. They're incredible. I have a presentation folder full of them for reference, and it probably gets used more than my plethora of books.

[AlexBell]

Originally Posted by Worldwalker

If you want some good "cheat sheets" to print out, go here. They're incredible. I have a presentation folder full of them for reference, and it probably gets used more than my plethora of books.

Thanks, Worldwalker, that's an excellent site.

Regards, Alex

[bigpallooka]

Originally Posted by AlexBell

Thanks, Worldwalker, that's an excellent site.

Regards, Alex

... Really good. Thanks from me also.

[bigpallooka]

Originally Posted by ldolse

Reverse Engineering seems to be easier, I agree with theducks - most html/css tutorials are aimed more at webmasters. Much of what's applicable to web is not applicable to epub.

This is really the crux of my post which was lost in my verbosity.

Originally Posted by ldolse

The layout of a typical book is pretty straightforward. I suggest you try to find sources that haven't been converted by Calibre - not to say that there is anything wrong with Calibre, it's just that Calibre converted HTML has a specific signature - specifically naming all the different CSS styles based on it's own normalization rules. If you find original good sources then the css styles typically have meaningful names that help you understand how the book was layed out.

What would be really helpful is if someone could recommend source books for this purpose. Maybe from Project Gutenberg?

Originally Posted by ldolse

xhtml is html - the difference is that xhtml must be 'perfect' in terms of opening and closing every tag. HTML spec is more relaxed.

That's what Wikipedia said so it must be true!

Originally Posted by ldolse

If you're editing stuff by hand you don't need to worry too much about xhtml - it's definitely good practice to close your own tags, but tools like Calibre/Sigil will constantly clean up after you when you make mistakes.

I've downloaded sigil but have been reluctant to use it just because it's another program with a learning curve.

[theducks]

Originally Posted by bigpallooka

What would be really helpful is if someone could recommend source books for this purpose. Maybe from Project Gutenberg?

I di mention a source.
Baen Free Library: 100% Legal, with the Publishers blessing http://www.baen.com/library/

(and chortling, cuz they got another book lover addicted to Baen publihed works. [was that way, before the free Library introduced me to different Authors that I did not have. Grrrr.])

[ldolse]

A lot of the Gutenberg books are pretty good - as long as you ignore the horribly ugly introduction/licensing pages that Gutenberg forces to be included at the beginning of the book. I would say the Gutenberg content is good examples of how to write an html ebook, not neccessarily brilliant examples of how to create epubs in terms of where they are split, TOCs, etc.

Many of the contributors of epub books on the Mobileread ebook subforum are submitting really good example books.

[bigpallooka]

Originally Posted by theducks

I di mention a source.
Baen Free Library: 100% Legal, with the Publishers blessing http://www.baen.com/library/

(and chortling, cuz they got another book lover addicted to Baen publihed works. [was that way, before the free Library introduced me to different Authors that I did not have. Grrrr.])

I think I may actually have some on a disk somewhere. Thanks again.