Lets face it, all blogging systems and wysiwyg (What You See Is What You Get) editors have some quirks that the user must work around, particularly when you attempt to paste a pre-built formatted document into the blog system. In the case of the Linux.com Blog system it retains most of the original formatting including text size which may not appear well once it is published in html. For that reason I am here to share my trick with the other users of the blog system so everyone can have well formatted tutorials and blog posts.
Lets cut to the chase
In efforts to allow you more time to write your own posts we can jump to my major points.
- Do not write your posts in a formatted application, use only a text editor.
- Write the post in html using standard flags such as headings, breaks, paragraphs, ordered lists and unordered lists.
- Paste your text based file into the Plain Text tab, then add the pictures, hyperlinks, special characters and touchups in the formtted view which will be inthe Rich Text tab.
- Keep it simple, by using only the headers and default font formatting rather than specifying the text size you allow the users to change their browser setting to fit their own preferences rather than forcing your own preferences.
- All formatting flags except for horizontal rules and line breaks must be started and ended.
Available HTML flags
Now that you know to write the original document in HTML, it is time share the flags that you can use.
- Flags with terminators – all Of the followin flags must be terminated to end the formatting.
- Paragraph – <p> – This flag is used to notate where a paragraph starts and ends, the ending flag is the paragraph with a / character – </p>.
- Bold – <b> – This flag is used to indicate where bold text starts and ends, the ending flag includes the / character – </b>.
- Italic – <i> – This flag is used to indicate where italic text starts and ends, the ending flag includes the / character – </i>.
- Underline – <u> – This flag is used to indicate where underlined text starts and ends, the ending flag includes the / character – </u>.
- Headings – The heading flags indicate where Headings/Larger Font text starts and ends, there are four size which are numbered 1-4 from Largest to Smallest such as <h1>, the ending flag includes the / character such as </h1>. Generally I do my Section Headings in H2 and the subsections in H3.
- Lists – The list flags are special because you must start list with <ol> for ordered lists or <ul> for unordered lists. You must then notate each list item with between <li> and </li>. Remember that the list sets must be terminated with </ol> or </ul> depending on which type you are using.
- Flags without terminators
- Line Returns – <br /> – The line returns are used to terminate a line.
- Horizontal Line – <hr /> – The Horizontal Lines create a single line across your posts which are useful for seperating sections.
Some additional flags such as adding a hyperlink, a picture or a video can be added, but I recommend using the formatting tools in the Rich Text tab to guarantee that the placement is where you want it. The same can be said for special characters which you will see when you review the text for this post.
Now to make this easier I have posted the html formatted text for this post to pastebin so you can reference it to see what formatting I used.
I hope you learned something and if you have any other hints to share please post them in the comments.
