Friday, May 25, 2007

Easy Blogging Tips, part I

New to reading blogs and want to format your comments? New to blogging? Here's how to do some simple stuff, besides just plain text.

I encourage you also to try out these tips in comments to this post! Feel free to doodle and see how it comes out. You'll never know unless you try it!

Easy stuff

The method of formatting text on the Web is called HTML. This stands for HyperText Markup Language. We "mark up" parts of our text to tell other people's browsers how to render (show) it.

So if I want a part to be italic, I put marks around the part that I want to be italic. The marks are called tags. A tag consists of a <, a tag name, maybe some attributes, and a >. An attribute is just a word with a = and a value (usually the value is in quotes). The close tag is a tag consisting of <, /, the tag name that it is closing, and >. Close tags are usually required, but sometimes they are optional.

Basic tags:

  • <b> - Bold. Whatever is inside b tags is bold.


    I ate a <b>really</b> big burrito.

    Looks like:

    I ate a really big burrito.

  • <i> - Italic. Whatever is inside i tags is italic.


    I read <i>Pride & Prejudice</i> yesterday.

    Looks like:

    I read Pride & Prejudice yesterday.

  • <a> - This tag is called an anchor tag. It signals something which the user can click, and specifies in the href attribute what url the browser should display when it is clicked.


    <a href="">My blog</a>

    Looks like:

    My blog

These are three tags which are usually allowed in comments. Blogger has this message above the box where you type in comments: "You can use some HTML tags, such as <b>, <i>, <a>". If you use "Blog This" from your Flickr photo page, you can also use these tags to format text or insert links.

If you blog, and you don't use these tags, it is because you are using a WYSIWYG editor. WYSIWYG = What You See Is What You Get. The default view for Blogger is WYSIWYG, and if you want something bold or italic you highlight the thing you want to be bold or italic, and then click on the bold B or italic I. But if want to do it in comments, then you might find these helpful. You will also see raw tags if you click on the "Edit Html" tab.

Special Characters

Now you know that < and > have special meanings. If you try and type them into your blog or comments, it is possible that they will be interpreted as tags. But if you want them to show up, here is how to do it:

  • <: &lt;
  • >: &gt;
  • &: &amp;

I've given you ampersand too, because as you see, it has special meaning as signalling that there is a special character.


46 &gt; 0

46 &lt; 90

Feather &amp; Fan

Looks like:

46 > 0

46 < 90

Feather & Fan

More cool tags

These tags are typically not permitted in comments, but can be handy if you're writing your own blog.
  • <hr> - Generates a horizontal line. This does not have an end tag.


    Above the line. <hr> Below the line.

    Looks like:

    Above the line.

    Below the line.

  • <del> - strikes out. Whatever is inside del tags has a line through it.


    I <del>need</del>want more yarn.

    Looks like:

    I needwant more yarn.

    This tag used to be s and strike, but were deprecated and replaced with del.

  • <br> - line break. This does not require a close tag, and I have never seen one.


    One line<br>next line

    Looks like:

    One line
    next line

  • <p> - paragraph break. This does not require a close tag, but it is optional. It is like br only most browsers put space after the newline.


    One paragraph<p>next paragraph

    Looks like:

    One paragraph

    next paragraph

    Remember that the user's browser determines how the page looks, not you, your server, or your browser. Your server tells the browser the content, with the markup indicating what to do, but the browser (whether it's IE, Firefox, Opera, or a reader to a blind person) determines what to do about it.

  • <blockquote> - Takes the text within the tags and formats it with space, as if it were a quote or poem.


    Here is a quote: <blockquote>To be or not to be;<br>That is the question.</blockquote>

    Looks like:

    Here is a quote:

    To be or not to be;
    That is the question.

  • <pre> - Preserves spaces and newlines in enclosed text. You may have noticed that newlines don't seem to create extra space (Blogger has a setting by default that converts lots of newlines into <br> tags.). This tag lets the browser know it should honor things exactly as you have typed them, and use a fixed-width (typewriter) font.


    <pre>One space: Two spaces:  5 spaces     end
    that was five spaces too.</pre>

    Looks like:

    One space: Two spaces:  5 spaces     end
    that was five spaces too.

A note on styles

If you use Blogger (I'm not sure how other blogging software works - this might apply also) part of the template indicates the font, size, background color, etc., for the whole blog. Blogger uses CSS (Cascading Style Sheets) to define named styles. If you are composing a blog entry and click on the "Edit HTML" tab, you will notice that if you used Blogger's buttons to style your text, say in italic, it does not show <i> as I have described above. Instead, you will see a span tag: <span style="font-style: italic;">. Feel free to use this tag in place of the i tag. As usual, don't forget to close it. Similarly, Blogger uses <span style="font-weight: bold;"> instead of the b tag. These only work within a CSS system with these styles defined; the i and b tags are in the HTML standard and should work everywhere.

In future posts, I will explain more, such as how to insert photos into blog entries. If you have any special requests, please feel free. As always, corrections and clarifications are always welcome.


trek said...

The line break <br> is deprecated in the lastest XHTML standard and replaced with <br />. There never was a closing line break tag.

Also, a <p> is really only an opening tag. The standards are written for the paragraph tag to have a closing tag,</p>, as well.

Kathy said...

Oh my gosh. I NEEDED this post. Now
Can I do it?
I will print the post and try to refer to it in my posts. THis is a wonderful tutorial. Thank you thanks you

So I just type as usual and then insert the stuff in code and keep wriiting right? I mean Correct?

Judy G. said...

This information should be available the moment someone signs up to open a blog. If you don't need it, great, but if you do need it, you really need it. Thanks also for writing it in English instead of Techie.
Waiting for the next one!

uberstrickenfrau said...

Yeah , me too. What they said. Thanks for doing this, It really helps me out.

Theresa said...

I wish this had been around when I started blogging . . . Good idea!

Lucette said...

I really appreciate your tutorial on the code. I just started blogging, and it is the technical stuff that is the hardest for me.
Question. I want to put links in the blog but it comes out with the full address. I have been using the links icon in the text box. How do you highlight a link cleanly.

Ahmed said...

Thank you very much for all your efforts, I do appreciated all your work done here, and let me get much learn from your treasures and permit me to follow your update work.