View Full Version : Trying to write a simple tutorial


Pablo
04-21-2011, 01:41 PM
I am trying to write an ePub tutorial "for dummies", starting with HTML and CSS and later Sigil.

I am aware there are thousands of online HTML/CSS tutorials, so why yet another one? Well, because not everybody has the time or the patience needed to go through them, so I thought I could write some no-fuss quick and dirty guide covering the basics.

I just finished a draft covering HTML and CSS (in 7 pages, screenshots included) and would like some feedback to know if it is worth the effort.

Disclaimer No. 1: I am not an expert. I am still learning.
Disclaimer No. 2: English is not my mother language. So if you read something funny, please tell me so I can improve it.

Thanks

EDIT

I just uploaded a new draft with more on CSS and an introduction to ePub

EDIT

I just uploaded a new draft covering Sigil and basic book formatting

EDIT

Uploaded the final version.

EDIT (May 1st, 2012)

Uploaded version 2 covering Sigil 0.5.3

EDIT (March 9th, 2013)

Uploaded version 3 covering Sigil 0.7.1

EDIT (April 20th, 2013)

Uploaded version 3 in ePub format

EDIT (December 15th, 2013)

Removed older versions


Pablo

FatDog
04-21-2011, 05:54 PM
That is a nice little tutorial. Short examples with screen-shots to show the effects. Anybody could type in the examples.

Looking forward to the epub chapter and Sigil chapter.

Pablo
04-21-2011, 06:23 PM
That is a nice little tutorial. Short examples with screen-shots to show the effects. Anybody could type in the examples.

Looking forward to the epub chapter and Sigil chapter.

Thanks!!! I am waiting for some more feedback before adding more. I want to keep it as short and compact as possible.

Elfwreck
04-21-2011, 06:47 PM
I like this; I'm going to look over the CSS part very carefully. (I learned HTML mostly from toggling between wysiwyg & HTML editors in forums; they don't do CSS, so I'm absolutely lost in figuring it out.)

Pablo
04-21-2011, 09:57 PM
I just uploaded a new draft. There's more on CSS and an introduction to ePub.
See first post for the file.

Hatgirl
04-24-2011, 03:04 PM
Nice work!

Some random nitpicks:

The R in MobileRead should be capitalised
The N at the start of Notepad should be capitalised
If you are trying to teach as little HTML as possible (if you know what I mean!) why are you bothering to include those two meta tags? You'd be better off teaching the Doctype tag - it's scary, but important. The other important tag for a HTML page is the title tag. Although it's not needed in an epub, it is in every other HTML page. That one comes down to a judgement call, I guess...
Absolute newbies may not know directory=folder :)
The em explaination is a bit confusing... but it is hard to explain!
"An ePub document is compressed file" think you mean "An ePub document is a compressed file"
"It is not necessary to create a TOC inside the book" this is a bit confusing. Maybe "It is not necessary to create a HTML file with an additional TOC inside the book..."
"link from body to note and back" Newbies may not know what you mean by "link" as they haven't learned about anchors/hyperlinks.


Again, it's really, really good! I know how hard it is to try and create a teaching document. Well done!

Pablo
04-24-2011, 04:26 PM
Thanks for looking at the tutorial!!!

Some random nitpicks:

The R in MobileRead should be capitalised
The N at the start of Notepad should be capitalised
"An ePub document is compressed file" think you mean "An ePub document is a compressed file"



Thanks for pointing this out, I will make the corrections before uploading again.


If you are trying to teach as little HTML as possible (if you know what I mean!) why are you bothering to include those two meta tags? You'd be better off teaching the Doctype tag - it's scary, but important. The other important tag for a HTML page is the title tag. Although it's not needed in an epub, it is in every other HTML page. That one comes down to a judgement call, I guess...



The purpose of teaching a little HTML and CSS is to prepare the reader for the Sigil working environment. As the title tag is not needed, I skipped it. Same for the Doctype.
The "meta" tags are recognised as such by Sigil when importing the HTML file, so I thought it would be nice to show that you can find them in the metadata editor (and that the CSS has gone to the "styles" folder and the body to the "text" folder).


Absolute newbies may not know directory=folder :)



Good point. I started with MS-DOS and sometimes that shows....


The em explaination is a bit confusing... but it is hard to explain!



Yes, I know. I will try to improve it.


"It is not necessary to create a TOC inside the book" this is a bit confusing. Maybe "It is not necessary to create a HTML file with an additional TOC inside the book..."


I thought that was clear.... I meant that some people like to see TOC pages at the start of an ebook, much like the TOC's of paper books, even if their reader has a TOC browser tool.


"link from body to note and back" Newbies may not know what you mean by "link" as they haven't learned about anchors/hyperlinks.


Surely everybody knows by now what a link is....

Pablo
06-02-2011, 01:50 PM
I just uploaded a new draft covering Sigil and basic ebook formatting. Feedback is welcome.

mtrahan
06-03-2011, 10:13 AM
Much more complete than the first version—well done! There is a lot of information in those 24 pages considering all the screenshots you included (very helpful to have visual guide for those not familiar with the software).

Nice work, looking forward to the next version.

And by the way, another short guide I used that I found very helpful is here: http://thinkubator.ccsp.sfu.ca/wikis/epubguide/ToC (wiki format—also available in ePub and PDF). Maybe it can inspire you for new sections.

Pablo
06-03-2011, 11:01 AM
Much more complete than the first version—well done! There is a lot of information in those 24 pages considering all the screenshots you included (very helpful to have visual guide for those not familiar with the software).

Nice work, looking forward to the next version.

And by the way, another short guide I used that I found very helpful is here: http://thinkubator.ccsp.sfu.ca/wikis/epubguide/ToC (wiki format—also available in ePub and PDF). Maybe it can inspire you for new sections.

Thanks! I will be uploading the next version in short.
I'll have a look at the guide you mention.

Pablo
06-04-2011, 06:46 AM
I just completed and uploaded the tutorial (see first post for the file).
Feedback is welcome.

mrmikel
06-04-2011, 07:25 AM
page 24 enough is should be enough if

No problem with the English, I wish my Spanish were as good.

You might mention that all ereaders are not created equal and that perfectly acceptable epubs will not display the same in all of them.

In Sigil, it is important when cutting and pasting to observe the results. The results using the keyboard are NOT the same as using the menus in Windows. The keyboard (Control X, Control C, Control V) results are more as one would expect. This is the fault of the underlying software and not Sigil's fault. But one can lose whole sentences and introduce new faults if one is not observant.

Otherwise very excellent. Thanks!

Pablo
06-04-2011, 07:54 AM
You might mention that all ereaders are not created equal and that perfectly acceptable epubs will not display the same in all of them.

My experience is limited to my Sony PRS-505, so I can't compare how the look of ePubs varies from device to device. I did mention that each device has its own fonts, that some devices don't support font-embedding and that some devices do not display empty paragraphs, though.

In Sigil, it is important when cutting and pasting to observe the results. The results using the keyboard are NOT the same as using the menus in Windows. The keyboard (Control X, Control C, Control V) results are more as one would expect. This is the fault of the underlying software and not Sigil's fault. But one can lose whole sentences and introduce new faults if one is not observant.

That's why I recommend using Code View instead of Book View for editing. In the current version of the tutorial, there's a whole page devoted to what happens when one uses Book View to edit and why it should be avoided.

caleb72
06-19-2011, 06:32 AM
Thanks very much for this tutorial. I was thinking about converting some poetry and song lyrics into ePub and this guide gives me pretty much all I need (along with Sigil of course).

Pablo
06-19-2011, 07:15 AM
Thanks very much for this tutorial. I was thinking about converting some poetry and song lyrics into ePub and this guide gives me pretty much all I need (along with Sigil of course).
I'm glad you find it useful!!!

ProDigit
11-17-2011, 03:58 AM
Thanks for the tutorial. On LRF files it is possible to create hyperlinks within a document, to skip from a toc to a book chapter (or skip chapters to the next/previous chapter by the use of links).
I don't know if that's possible in epub, but the tutorial could add that one feat if Sigil can process this (BookDesigner can).

I've already passed the HTML class, but a handy tool to learn CSS can be found here:
where input/output is directly displayed within a web browser!
http://www.w3schools.com/css/tryit.asp?filename=trycss_default

I mainly will read the manual for learning sigil, and perhaps update/hone my css skills (since I'm very basic in that area); and probably in 2 to 3 days give some more feedback.

Thanks for doing this though!

Btw, if you want to have an example of hyperlinks, please see THIS THREAD (http://www.mobileread.com/forums/showthread.php?t=34754&highlight=bible+framework)
It has a file with the most basic HTML formatting for ebooks, including hyperlinking within a document. The Sony PRS-505 does not allow reverse linking from those links.

Since it takes about a day more before my jetbook will arrive, it'd be nice if someone would want to see if hyperlinking works on the jetbook!
If not, in 2 days I'll figure it out!

Pablo
11-17-2011, 11:29 AM
Thanks for the tutorial. On LRF files it is possible to create hyperlinks within a document, to skip from a toc to a book chapter (or skip chapters to the next/previous chapter by the use of links).
I don't know if that's possible in epub, but the tutorial could add that one feat if Sigil can process this (BookDesigner can).

If you are familiar with BookDesigner, you may find my HTML02HTML utility useful (see my signature). This utility converts a ".html0" file to a simpler html with CSS and performs some additional formatting tasks. The resulting file imports very well into Sigil.
Important: after you finish formatting with BD, you have to make your book in BD format (html0), then reload your book from the resulting html0 and inmediatly close BD. Then you you to direct the utility to the "LastFile" directory and use the file inside there as input to the utility.

Btw, if you want to have an example of hyperlinks, please see THIS THREAD (http://www.mobileread.com/forums/showthread.php?t=34754&highlight=bible+framework)
It has a file with the most basic HTML formatting for ebooks, including hyperlinking within a document. The Sony PRS-505 does not allow reverse linking from those links.

The tutorial has a section on how to code hyperlinks, including "go back" links for readers that don't provide a history button.

Thanks for your interest in the tutorial. Your feedback is welcome.

bramwell1922
11-17-2011, 12:53 PM
Hi,

Nice book. :thumbsup: Go beyond a quick and dirty; we need something comprehensive! As a newbi I was confused about the difference between <title> and meta data's title, perhaps there could be something that explains which one I should use.

There is a log of information on the web for authoring ePub documents but so much of it is unusable for an author. Some of it is talking more about specifications and does not show how the various tags are used or what effect they have. Other info I've been signposted to is really for website creation, with tags that ePub does not use, or missing tags that it does. Many tutorials do not specify that they are teaching EPUB 3.0, so the reader is not sure whether they are learning depreciated tags or the preferred tags.

So far, your guide is the best I've come across, so keep up the good work.

If you know of a more complete work that relates to EPUB 3.0, and defines the tags, and shows the consequences of each, please do let me know, as I want to create some specific effects in my book and will need the full power of the tags. Thanks a bundle. :thanks:

Pablo
11-17-2011, 01:09 PM
There is a log of information on the web for authoring ePub documents but so much of it is unusable for an author.

That's true, and the reason why I decided to share my (limited) knowledge on the matter.
The purpose of the tutorial is to get people started in creating nice looking ePub books. Of course there's a lot more to HTML, CSS and ePub than is covered in this document. But once you've got the gist of it, it's fairly easy to search the web for more complicated things.

ProDigit
11-17-2011, 01:35 PM
The problem is when it's all converted to html0, many of the extra feats are redundant (they get filtered out anyway); meaning many of them get converted into a simpler html command.

wraylewis
12-25-2011, 12:46 PM
Thanks for your tutorial.

It put so many things in clear perspective for me, especially how I messed thins up by trying to do extensive edits in Sigil's book view!

AZdave
12-25-2011, 01:32 PM
Thanks !
I like it....

Pablo
12-29-2011, 07:28 AM
Thanks for your tutorial.

It put so many things in clear perspective for me, especially how I messed thins up by trying to do extensive edits in Sigil's book view!

Thanks !
I like it....

I'm glad you found the tutorial useful. I'm planning to write an update next year, maybe in feb or march, covering the latest version of Sigil and adding a section on common tasks using Search & Replace with Regular Expressions.

CaptainMachSnot
01-31-2012, 07:58 AM
Thanks for this tutorial. I have only just started re-formatting some of my epub files. I have spent hours searching for code on the Internet, but mostly only find web site stuff. It makes it so much easier to have the info I need specifically for epubs in a handy document. Thanks :drinks:

Pablo
01-31-2012, 05:46 PM
Thanks for this tutorial. I have only just started re-formatting some of my epub files. I have spent hours searching for code on the Internet, but mostly only find web site stuff. It makes it so much easier to have the info I need specifically for epubs in a handy document. Thanks :drinks:

I'm glad you find it useful!!!

sachin
03-02-2012, 12:49 AM
I am trying to write an ePub tutorial "for dummies", starting with HTML and CSS and later Sigil.

I am aware there are thousands of online HTML/CSS tutorials, so why yet another one? Well, because not everybody has the time or the patience needed to go through them, so I thought I could write some no-fuss quick and dirty guide covering the basics.

I just finished a draft covering HTML and CSS (in 7 pages, screenshots included) and would like some feedback to know if it is worth the effort.

Disclaimer No. 1: I am not an expert. I am still learning.
Disclaimer No. 2: English is not my mother language. So if you read something funny, please tell me so I can improve it.

Thanks

EDIT

I just uploaded a new draft with more on CSS and an introduction to ePub

EDIT

I just uploaded a new draft covering Sigil and basic book formatting

EDIT

Uploaded the final version.


Pablo

I tried to embed the font using following method
add existing files at fonts folder and creating css as you said but to open my ebook in calibre ebook reading software in my PC it is not opening and showing that DRM BLOCKED". what to do now?
Thanks in advance:thanks:

Toxaris
03-02-2012, 02:22 AM
Are you trying to embed a font to a DRM restricted book? Then you first need to liberate the book from DRM before embedding.

sachin
03-06-2012, 01:54 AM
Are you trying to embed a font to a DRM restricted book? Then you first need to liberate the book from DRM before embedding.

No I'm not using any book which is DRM protected. I was experimenting with the book created by myself. And the Problem is fixed, I found out how to remove DRM. But now a new problem arrived. This may be a simple one but please help me out.
I'm trying to embed fonts by providing fonts(TTF) to the fonts folder at book browser menu and then creating a blank styles.css page. I dont know why the message " the resource is present in the opf<manifest>, but it is not reachable(unused)" is coming when i validate by using FLightcrew.
:help:

Toxaris
03-06-2012, 04:16 AM
Well, after you added a font to the ePUB, Sigil will put it in the manifest. However, you need to reference to the font in the stylesheet (@font-face) and to a style to actually apply it.
As long as you don't do that, it is referenced, but not used.

sachin
03-06-2012, 06:36 AM
Well, after you added a font to the ePUB, Sigil will put it in the manifest. However, you need to reference to the font in the stylesheet (@font-face) and to a style to actually apply it.
As long as you don't do that, it is referenced, but not used.

after providing 3 versions of fonts at the fonts folder in the book browser i did following things
-
opened a blank stylesheet (style0001.css) by right clicking on the styles folder of book browser and pasted following code

font-face {
font-family: "myfontname";
font-weight: bold;
font-style: normal;
src: url(../Fonts/myfontname-b.ttf);
}
@font-face {
font-family: "Myfontname";
font-weight: normal;
font-style: italic;
src: url(../Fonts/Myfontname-i.ttf);
}
@font-face {
font-family: "Myfontname";
font-weight: normal;
font-style: normal;
src: url(../Fonts/Myfontname-n.ttf);
}
p{
text-indent: 0;
text-align: justify;
font-size: 1em;
margin-top:0;
margin-bottom: 1em;
}
body { font-family: "Myfontname", serif; }

NOTE:"Myfontname" is actually the name of my font.

isn't it enough? what more should i do?:help:

Pablo
03-06-2012, 12:31 PM
after providing 3 versions of fonts at the fonts folder in the book browser i did following things
-
opened a blank stylesheet (style0001.css) by right clicking on the styles folder of book browser and pasted following code

font-face {
font-family: "myfontname";
font-weight: bold;
font-style: normal;
src: url(../Fonts/myfontname-b.ttf);
}
@font-face {
font-family: "Myfontname";
font-weight: normal;
font-style: italic;
src: url(../Fonts/Myfontname-i.ttf);
}
@font-face {
font-family: "Myfontname";
font-weight: normal;
font-style: normal;
src: url(../Fonts/Myfontname-n.ttf);
}
p{
text-indent: 0;
text-align: justify;
font-size: 1em;
margin-top:0;
margin-bottom: 1em;
}
body { font-family: "Myfontname", serif; }

NOTE:"Myfontname" is actually the name of my font.

isn't it enough? what more should i do?:help:

Names are case-sensitive, make sure you are writing filenames exactly as they are.

sachin
03-07-2012, 01:28 AM
Names are case-sensitive, make sure you are writing filenames exactly as they are.

They are also correct, but still not working properly. epub reader(calibre) now considering font which is already in my system. :help:
One more thing is my epub reader -calibre- is considering different fonts of my language when opened in windows, linux and in firefox pluggin.:smack:
Thanks a lot for your support guys.:thanks:

sachin
03-07-2012, 05:10 AM
Hi all,
I need to know that is there any method to forcefully embed the font by using sigil?
What i mean to say is I have different kinds of fonts in my mother-language, when i embedd one font by using sigil and i read in calibre on my PC, the displaying font is the one which is already present in the PC but not the font which i embedded. i need to forcefully display the font which i embed. i guess that i already have other fonts in my PC so ebook reader is using those fonts only instead of my embedded fonts. How to make it work. any suggestions?:chinscratch:

Toxaris
03-07-2012, 09:40 AM
No, when you use an embedded font, the Calibre preview, Sigil Bookview and ADE should display the embedded font. That is in fact the whole point.

I have seen that sometimes embedding fonts will result into problems if the fontname contains a space.

Pablo
03-07-2012, 01:37 PM
They are also correct, but still not working properly. epub reader(calibre) now considering font which is already in my system. :help:
One more thing is my epub reader -calibre- is considering different fonts of my language when opened in windows, linux and in firefox pluggin.:smack:
Thanks a lot for your support guys.:thanks:

I think it would be better to repost this in the ePub forum, where it will have more visibility. It would also help if you uploaded your ePub document.

sachin
03-20-2012, 04:14 AM
Thanks for your suggestion guys...

Pablo
03-20-2012, 07:10 AM
Thanks for your suggestion guys...

I just thought... Is your font a serif font? (as declared in the following line in the CSS)

body { font-family: "Myfontname", serif; }

sachin
03-21-2012, 04:48 AM
I just thought... Is your font a serif font? (as declared in the following line in the CSS)

body { font-family: "Myfontname", serif; }

I didn't check is it a serif font or not and i don't know how to check. But now problem is fixed with the arrival of new problem.

I tested my newly created on epub on SIGIL, CALIBRE and EPUBREADER ADD-ON, it is properly working there. But the problem I'm suggested to check on ADE, so I installed ADE on win-7 and tested it and there is still a rendering problem with it. My ebook is not displaying properly here. How should i embed font to display properly on ADE? Do you expect me to attach my CSS with it? Any suggestion is greatly appreciated.
:thanks:

Elfwreck
03-21-2012, 01:05 PM
I didn't check is it a serif font or not and i don't know how to check.

Serif fonts have little "hanging bits" on the edges of the letters.

This is a serif font. (Palatino Linotype)
This is a different serif font. (Garamond.)



Sans serif fonts don't. Mobileread's forum is, by default, in a sans serif font.

This is a sans serif font. (Arial)
This is a different sans serif font. (Impact.)



If you add ", serif" to the end of the font family, it means if it can't find that specific font, it'll display in whatever the device's generic serif font is.

Serif fonts are often easier to read on paper and e-ink; sans serif are often easier on LCD/OLED screens. This is because the "hanging bits," which give the eye something to follow on a fixed screen/page, can get blurry at low resolutions, which most computer screens have.

(I have no specific suggestions about the CSS and font embedding; while I've managed it for some ebooks for myself, I think my process is not quite right because it doesn't seem to always work. I'll leave that to people who actually understand what they're doing with it.)

Jellby
03-21-2012, 04:12 PM
Serif fonts have little "hanging bits" on the edges of the letters.

This is a serif font. (Palatino Linotype)
This is a different serif font. (Garamond.)



Sans serif fonts don't. Mobileread's forum is, by default, in a sans serif font.

This is a sans serif font. (Arial)
This is a different sans serif font. (Impact.)


Of course, that only works if you have the corresponding fonts installed. In my screen all bits are sans serif ;)

Arran
03-28-2012, 05:20 AM
And it does not work at all, if you configure your browser to use uniquely a defined font.

A really great tutorial. However, I know XHTML and CSS quite well. Is it possible to use HTML3 and CSS5 already or better keep hands off?

And for embedding fonts what about the copyrights of the «foundries»? Better using free fonts? Are there any standards if I have bought fonts for commercial use on websites to use too on free or sold eBooks?

Pablo
03-28-2012, 05:52 PM
A really great tutorial. However, I know XHTML and CSS quite well. Is it possible to use HTML3 and CSS5 already or better keep hands off?

If you already know CSS and XHTML it would be a good idea to have a look at the ePub 2 specification to see what's supported and what is not.
The current version of the ePub standard is 3, but most readers in the market today only support (a subset of) ePub 2.

And for embedding fonts what about the copyrights of the «foundries»? Better using free fonts? Are there any standards if I have bought fonts for commercial use on websites to use too on free or sold eBooks?

I believe you can use commercial fonts on your ebooks, but you have to encrypt them using "font obfuscation". Here's (http://epubsecrets.com/font-embedding-and-font-obfuscationmangling.php) an article on this subject. This prevents unauthorized reuse of the font.

Pablo
05-01-2012, 03:44 PM
I just uploaded version 2 of the tutorial, covering Sigil 0.5.3 (see first post of this thread for the file)
Sigil has changed so much in the last year that the original document was almost obsolete.
I hope you find it useful.

gogreen
08-29-2012, 09:23 AM
Hi There, I recently created my own very simple guide based on converting a manuscript to an ebook. As you say there are plenty to choose from out there. My main motivation was to write down my experience of learning how to convert an ebook based on no prior knowledge, mainly so I have a point of reference for any future book conversions. If you want to check out a free pdf copy go to http://www.davidkindertheauthor.com/ . So yes for me I felt writing a guide was worth it, but if your already highly computer literate I am not so sure sure of the market for books with lots of html explanations. I have made no attempt to promote my book other than to publish on Kindle. If someone picks it up and it helps them then great, otherwise it is there so I can remember how I did it in a couple of years time. Good Luck.

Elfwreck
08-29-2012, 10:46 PM
If you want to check out a free pdf copy go to http://www.davidkindertheauthor.com/ .

I didn't see a PDF copy at all, just links to Amazon for mobi copies. Do you have a PDF version? (And why would you release an epub tutorial only in a Kindle market?)

PeterT
08-30-2012, 01:42 AM
Manuscript to Ebook a Simple DIY guide f - David Kinder (http://www.davidkindertheauthor.com/download/i/mark_dl/u/4010829633/4573089402/Manuscript%20to%20Ebook%20a%20Simple%20DIY%20guide %20f%20-%20David%20Kinder.pdf)

snarkophilus
08-30-2012, 01:45 AM
I didn't see a PDF copy at all, just links to Amazon for mobi copies. Do you have a PDF version? (And why would you release an epub tutorial only in a Kindle market?)

The link to the PDF was the text link (Manuscript to Ebook a Simple DIY guide f - David Kinder) immediately under the book cover link to Amazon.

Cheers,
Simon.

AlexBell
08-30-2012, 02:49 AM
I didn't see a PDF copy at all, just links to Amazon for mobi copies. Do you have a PDF version? (And why would you release an epub tutorial only in a Kindle market?)

It's in the top left corner - the text in the image is hard to read against the typewriter background. I've just downloaded it by clicking on the 'tab' at the bottom of the image.

JSWolf
08-31-2012, 09:18 AM
WOW! That PDF just looks awful.

gogreen
09-01-2012, 06:40 AM
Hi,
Yes perhaps I should make it a little clearer! The free pdf of Manuscript to Ebook can be found directly below the cover link of the book to amazon. The pdf is a straight conversion from an epub copy to pdf using Calibre. Yes it does download in rather a large format but you can reduce the size of the text. The guide (I hesitate to call it a book) simply started out as a way for me to remember how I learnt to correct my first ebook and how I created my second book having no prior knowledge of building an ebook. I have one further book in draft format and one further idea for a book. By the time I get round to converting them to ebooks, I would have probably forgoten how I did it! So instead of sticking my experiences down on scrap pieces of paper, I thought I may as well prove to my self I could indeed build ebooks by making a guide (book!) out of it. If only a little bit can go to help other people then great. This forum is a great place for help. I am not looking to be marked on how beautiful the book looks, just its ability to help others to make an ebook. Comments good or bad can only help me and others to produce better ebooks. I could improve the cover but this would mean I would have to spend a further $4 doing a new picture and double the production cost of the book! This simply will not do.... Finally, although the free pdf provides all you require to produce an ebook, I have added a few extra chapters that are available in the Kindle format. Yes it does involve spending money (gulp!) but hey why not. It is available in full in the Kindle lending section as well.

Pablo
09-01-2012, 10:51 AM
@gogreen:
May I suggest you start an independent thread for your guide? Just to avoid mixing things up. And if you intend to sell your Kindle version, maybe you should put it in the Author's Self Promotion forum.
I had a look at your guide, it covers many things that I left out in my tutorial. Thanks for making it freely available for others to learn.

dubito
09-03-2012, 01:38 PM
Hi, Pablo.

Thanks for your pamphlet ›Quick and Dirty ePub Tutorial - v2.pdf‹
I just had a look at it and found a mistake: The little code starting with <h1>This is a level 1 title</h1> has to be applied in the source code of the html-file. Otherwise you just see what you have typed.
I have attached my file after having inserted the code in the source code. Above is what you suggested, below shows what I mean.

Best wishes Harry

Pablo
09-03-2012, 04:08 PM
Hi, Pablo.

Thanks for your pamphlet ›Quick and Dirty ePub Tutorial - v2.pdf‹
I just had a look at it and found a mistake: The little code starting with <h1>This is a level 1 title</h1> has to be applied in the source code of the html-file. Otherwise you just see what you have typed.
I have attached my file after having inserted the code in the source code. Above is what you suggested, below shows what I mean.

Best wishes Harry

I don't know what you mean by "source code" of the html file. You just type <h1>....</h1> in your text editor and save as file.html and that's it. Of course, when you open the file with a browser, you will not see the html tags, just the formatted text...

I can't see your attached file... maybe you are not allowed to attach files, as you've only written one post so far.

DavidV
09-24-2012, 11:08 PM
Since my last post some years ago, I have ugraded my ePubIt book authoring program quite a bit. It is free and lets you create ePUB books with a WSIWYG editor without the need to know any HTML or CSS. It also can create ePub books from RSS feeds. It only works with Windows and there are no support for languages other than English. I apologise to Mac and Linux users, but simply do not have the time to provide other versions.
If interested, you can download the program on www.lifespices.net

CaptainMachSnot
11-23-2012, 07:00 AM
I was wondering if someone can please help me. I have followed the dropcap instructions in the guide, but have adjusted to make it 3 lines high. What I need help with is when there is quotation marks in front of the first letter. Is there a way to make the quotes appear normal, while still having the initial cap show up?
Code I am currently useing:

.dropcap {
float: left;
font-family: "Mariage";
font-size: 4em;
font-weight: normal;
height: 1em;
line-height: 1em;
margin-bottom: -0.2em;
margin-left: 0em;
margin-right: 0.125em;
margin-top: -0.1em;
text-indent: 0em;
}

sachin
11-23-2012, 07:28 AM
I was wondering if someone can please help me. I have followed the dropcap instructions in the guide, but have adjusted to make it 3 lines high. What I need help with is when there is quotation marks in front of the first letter. Is there a way to make the quotes appear normal, while still having the initial cap show up?
Code I am currently useing:

Try and search in this (http://www.mobileread.com/forums/showthread.php?t=46448) thread.

CaptainMachSnot
11-24-2012, 07:16 AM
Thanks sachin, exactly what i was looking for

Pablo
03-09-2013, 08:56 AM
I just uploaded version 3 of the tutorial, covering Sigil 0.7.1
See first post for the file.

dgatwood
03-09-2013, 01:58 PM
I was wondering if someone can please help me. I have followed the dropcap instructions in the guide, but have adjusted to make it 3 lines high. What I need help with is when there is quotation marks in front of the first letter. Is there a way to make the quotes appear normal, while still having the initial cap show up?

You can do it by adjusting the span to start after the quote mark, but IMO it probably isn't a good idea. Making the quotation mark smaller than the drop cap is fine, but I would caution that a normal-sized quotation mark before such a large cap is likely to get lost visually, so you might want to make it somewhat larger than the normal body font.

Jellby
03-09-2013, 03:08 PM
I usually have an additional <span>, inside the dropcap, to collect everything that could appear before the dropcap proper (quote marks, or dashes and opening question/exclamation marks in Spanish). Anyway, note that printed books often completely drop (no pun intended) the initial quote mark before a drop cap (something I would obtain by adding "display:none" to my "predrop" <span>).

JSWolf
03-12-2013, 09:10 AM
What is good code for dealing with a dropcap that needs to be two characters such as a quote and the following letter?

Arios
03-20-2013, 01:40 PM
Hi Pablo!

Just a few words to thank you for your Quick and dirty ePub tutorial. When I began to learn epub file format around 9 months ago, your guide was the one I looked first.

After a while, we forget rapidly where we started and it's nice that someone take care of newbies.

Can I suggest you 2 little things?

Your guide has 3 main sections:
1) general informations about Html, CSS and ePub format;
2) Which is related to Sigil and;
3) Advanced formatting tasks.

So I think it would be more logical to keep the subsection "Back to Sigil: Code View vs. Book View" with the main Sigil section.

My other suggestion is: why not create an ePub version of your Guide? I understand easily that pdf format allows a more precise presentation of the informations, but an epub file could show directly the code you are using for, by example, a Drop Cap.

Anyway thanks again Pablo!

Pablo
03-20-2013, 02:58 PM
Hi Pablo!

Just a few words to thank you for your Quick and dirty ePub tutorial. When I began to learn epub file format around 9 months ago, your guide was the one I looked first. After a while, we forget rapidly where we started and it's nice that someone take care of newbies.


I'm glad you found it useful! This guide is my way of giving back something in return for all the help I got here.


Can I suggest you 2 little things?

Your guide has 3 main sections:
1) general informations about Html, CSS and ePub format;
2) Which is related to Sigil and;
3) Advanced formatting tasks.

So I think it would be more logical to keep the subsection "Back to Sigil: Code View vs. Book View" with the main Sigil section.


That section is there on purpose: the idea was , first, to show that you really need to write HTML code to format your book and after that, show how inadequate is BV for even the simplest tasks.

My other suggestion is: why not create an ePub version of your Guide? I understand easily that pdf format allows a more precise presentation of the informations, but an epub file could show directly the code you are using for, by example, a Drop Cap.

That's a good idea, I will have a look at it and maybe post an epub version in 30-45 days.

Arios
03-21-2013, 10:13 PM
Wonderful Pablo!

If time allows me, I could make a French version (if you want).

¿Y por qué no una versión en español también?

¡Buenas noches!

Pablo
03-22-2013, 01:56 PM
Wonderful Pablo!

If time allows me, I could make a French version (if you want).

Sure, why not? Go ahead!

¿Y por qué no una versión en español también?

¡Buenas noches!

Hace tiempo que tengo ganas de hacer una versión en mi idioma, ahora que tenemos un foro en español, tal vez sea el momento adecuado.

¡Gracias por tu interés y aportes!

Big Kev
03-31-2013, 05:07 AM
Hi Pablo

Great tutorial. Thanks for the time and effort you have put into its development.

As a complete newbie I wish I had found your tutorial prior to undertaking the w3 courses. It would have made things a lot easier.

Regards
Kevin

Pablo
04-01-2013, 10:57 AM
Hi Pablo

Great tutorial. Thanks for the time and effort you have put into its development.

As a complete newbie I wish I had found your tutorial prior to undertaking the w3 courses. It would have made things a lot easier.

Regards
Kevin

I'm glad you like it!

Pablo
04-20-2013, 03:03 PM
As per Arios request, I have generated an ePub version of the tutorial (see first post of this thread for the file).

Arios
04-20-2013, 05:11 PM
Pablo,

I have had a really quick glance to the epub, but it looks very fine: gracias!

Pablo
04-20-2013, 06:17 PM
Pablo,

I have had a really quick glance to the epub, but it looks very fine: gracias!

Thanks, now you can make your French version... ;)

Arios
04-24-2013, 11:55 AM
Sorry Pablo, I'm late.

Ok, I'll try to do it, insofar as I have some free time. BTW, I've already started...

Have a nice day!

Pablo
04-24-2013, 04:58 PM
Sorry Pablo, I'm late.

Ok, I'll try to do it, insofar as I have some free time. BTW, I've already started...

Have a nice day!

Thanks!

ecbritz
05-03-2013, 06:59 PM
Thanks for this "guide for dummies". The author can be assured that especially new Sigil users need and appreciate this. So any new editing or development of the pdf or epub is going to be read and used widely.

dgatwood
05-03-2013, 10:49 PM
What is good code for dealing with a dropcap that needs to be two characters such as a quote and the following letter?

As far as appearance?

Specifying a negative left margin so that the quote mark approximately falls in the margin would be best for printing, but that sucks for onscreen viewing because of the need to waste space with a positive left margin on every page to accommodate it.

If you're really enterprising, this is where an "@media print" comes in handy. Just do it in a separate css file, since ADE vomits on media queries, IIRC.

Beyond that detail, there's not really any difference between a single-character drop cap and a multi-character drop cap. I size the leading quotes the same as the drop cap, but that's a question of personal preference. Others may prefer to make them smaller or specifically design a font with narrow quotation marks so that they take up less horizontal space.

Toxaris
11-12-2013, 03:31 AM
Can I place a vote that this thread should be a stickie? It really helps new people getting around and I find myself directing people to this thread regularly.

Pablo
12-15-2013, 08:08 AM
Can I place a vote that this thread should be a stickie? It really helps new people getting around and I find myself directing people to this thread regularly.

Thanks Toxaris! Maybe the title of this thread should be changed to something like "Quick and dirty ePub tutorial" and the first and second version of the documents should be removed... I find it difficult to understand why the oldest version of the document keeps being downloaded, maybe because it shows up in Google searches... :chinscratch:

Pablo
12-15-2013, 02:07 PM
I just removed the original and second versions of the tutorial.

stevelitt
12-23-2013, 08:35 PM
I am trying to write an ePub tutorial "for dummies", starting with HTML and CSS and later Sigil.

I am aware there are thousands of online HTML/CSS tutorials, so why yet another one? Well, because not everybody has the time or the patience needed to go through them, so I thought I could write some no-fuss quick and dirty guide covering the basics.

I just finished a draft covering HTML and CSS (in 7 pages, screenshots included) and would like some feedback to know if it is worth the effort.

Disclaimer No. 1: I am not an expert. I am still learning.
Disclaimer No. 2: English is not my mother language. So if you read something funny, please tell me so I can improve it.


Pablo

Very nice Pablo!

Is there an online HTML version of your document? I'd like to include a link to your document in my tutorial. My tutorial is closer to the metal than yours, and yours might be a good prerequisite to mine. Yours is much easier and less time consuming. My tutorial is at http://www.troubleshooters.com/ebooktech/epub_demystify.htm .


I have one disagreement with your document: Your use of .right, .left and .center. From my perspective, that violates styles based authoring because it focuses on appearance, not usage. Personally, I'd suggest you use different CSS examples in your doc.

Very nice. Thank you!

SteveT

Pablo
12-24-2013, 07:17 AM
Very nice Pablo!

Is there an online HTML version of your document? I'd like to include a link to your document in my tutorial. My tutorial is closer to the metal than yours, and yours might be a good prerequisite to mine. Yours is much easier and less time consuming. My tutorial is at http://www.troubleshooters.com/ebooktech/epub_demystify.htm .


I have one disagreement with your document: Your use of .right, .left and .center. From my perspective, that violates styles based authoring because it focuses on appearance, not usage. Personally, I'd suggest you use different CSS examples in your doc.

Very nice. Thank you!

SteveT

I had a look at your website and liked it.

There's no online HTML version of my document, but if you want to include it in your website, I can send you the original word file (send me a PM with your mail address). You are free to make any changes you see fit.

DaleDe
12-24-2013, 11:14 AM
I had a look at your website and liked it.

There's no online HTML version of my document, but if you want to include it in your website, I can send you the original word file (send me a PM with your mail address). You are free to make any changes you see fit.

If you wanted to make an online version you might want to think of our wiki. It would be a good place to host the document.

Dale

Pablo
12-24-2013, 11:52 AM
If you wanted to make an online version you might want to think of our wiki. It would be a good place to host the document.

Dale

Good idea. I'm not familiar with the format, will have a look at it.
Thanks!

DaleDe
12-24-2013, 12:12 PM
Good idea. I'm not familiar with the format, will have a look at it.
Thanks!

there is help on the wiki. We use the same tool as wikipedia so that format works the same. Actually a wiki is simplified version of text with minimal formatting requirements but it gets converted on the fly by our server to html to be displayed on a browser so it turns out that if there is something you don't know how to do in the wiki syntax you can also use HTML syntax and since it is going to a browser anyway it will also work, also wiki syntax is much easier to read when you are in code view. TOC for example is generated automatically in the wiki for headings. Just click on help in the left column.

Dale

Pablo
12-24-2013, 03:37 PM
there is help on the wiki. We use the same tool as wikipedia so that format works the same. Actually a wiki is simplified version of text with minimal formatting requirements but it gets converted on the fly by our server to html to be displayed on a browser so it turns out that if there is something you don't know how to do in the wiki syntax you can also use HTML syntax and since it is going to a browser anyway it will also work, also wiki syntax is much easier to read when you are in code view. TOC for example is generated automatically in the wiki for headings. Just click on help in the left column.

Dale

Thank Dale! I've already created a user and began editing my page. It's very simple...
So, when I'm finished, how do I put a link to it in the main wiki page?

DaleDe
12-24-2013, 09:34 PM
Thank Dale! I've already created a user and began editing my page. It's very simple...
So, when I'm finished, how do I put a link to it in the main wiki page?

Set the category to HowTo and then the HowTo link on the main page will pick it up automatically. [[Category:HowTo]] at the bottom of the page. Actually I will go over it a bit after you are done to make a meaningful title.

Dale

Pablo
12-26-2013, 07:02 AM
Set the category to HowTo and then the HowTo link on the main page will pick it up automatically. [[Category:HowTo]] at the bottom of the page. Actually I will go over it a bit after you are done to make a meaningful title.

Dale

Thanks Dale! I'll let you know when I'm done.

DaleDe
12-26-2013, 11:29 AM
I made a few changes basically as examples for you to see what can be done in wiki format.

Pablo
12-26-2013, 12:38 PM
I made a few changes basically as examples for you to see what can be done in wiki format.

Thanks Dale! I had a look earlier today and was pleasantly surprised.

Maybe I will put a warning at the top of the page stating that it is work in progress.... I don't know when I will be able to finish it...

DaleDe
12-26-2013, 01:02 PM
Sure I can do that.

Dale

Pablo
12-26-2013, 02:14 PM
Sure I can do that.

Dale

Just finished loading all the content of the tutorial, I should proofread it, but right now I don't have the time...

I followed your formatting examples. A problem I see is the low contrast of text in bold inside gray boxes. Is there any way to solve it?

Thanks again for your help!
:thanks:

MyDK
01-21-2014, 03:43 AM
Hi Pablo
I enjoyed your "Quick and dirty ePub tutorial" very much. Not too much and not too little information. Perfect. Thanks!

Pablo
01-22-2014, 04:49 PM
Hi Pablo
I enjoyed your "Quick and dirty ePub tutorial" very much. Not too much and not too little information. Perfect. Thanks!

I'm glad you liked it!

tclink
01-24-2014, 11:10 AM
Good Idea

cager
02-14-2014, 12:01 PM
As per Arios request, I have generated an ePub version of the tutorial (see first post of this thread for the file).

The epub link downloads a file "attachment.php" downloaders need to rename extension as epub to read in Calibre

Now for the hard work of digesting the contents

Thank you very much - I just needed this sort of tutorial, now.

mrmikel
02-14-2014, 12:05 PM
This can happen if you allow internet explorer to block active x.

Pablo
02-14-2014, 12:18 PM
Thank you very much - I just needed this sort of tutorial, now.

I hope you find it useful!