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.
  
  

  Example:

  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.
  
  

  Example:

  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.
  
  

  Example:

  <a href="http://knitswithasilentk.blogspot.com">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.

Example:

46 > 0

46 < 90

Feather & 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.
  
  

  Example:

  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.
  
  

  Example:

  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.
  
  

  Example:

  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.
  
  

  Example:

  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.
  
  

  Example:

  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.
  
  

  Example:

  <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.