• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Formatting Your Text

Blog posts tend to be short bursts of well-chosen copy, intended to deliver a thought, idea, or comment with a limited amount of text. Because of this, it often behooves us bloggers to make use of lists, indents, tables, strategically placed line breaks, and the like. Let’s go over some of the ways we can whip our words into shape.

Section Headers

Headers are simple tags that help you attribute “importance” to your text. Traditionally, text that you want to give the most attention to would be level one header—the biggest header. The level six header is the smallest. I know, it seems backwards, but that’s the way it works—think “priority.” Headers are good if you want a simple way to title your individual posts.

There’s not too much to applying a header tag. Just pick a size and go for it. Listing 4.6 shows what you’d type for the different sizes.

Listing 4.6. Section Header Examples

<h1>your text here</h1> 
<h2>your text here</h2> 
<h3>your text here</h3> 
<h4>your text here</h4> 
<h5>your text here</h5> 
<h6>your text here</h6> 

Figure 4.2 shows what a level one header looks like on a blog.

Figure 4.2. Use a level one header for a big, juicy title.

Paragraph and Line Breaks

Some blog tools automatically convert your paragraph breaks, based on where you have pressed Enter or Return when typing data in the form. Knowing the HTML for separating your text is useful, just in case (see Listing 4.7).

Listing 4.7. Code for Creating Paragraphs

<p>Putting the paragraph tags around your text will guarantee that 
it doesn't run together. This is some text that's got paragraph tags 
at the beginning and the end. As a result, this text will appear in 
miraculous paragraph form!</p> 
<p>As a result, this paragraph is separated. I like paragraphs. I 
remember in elementary school when we had assignments like, "Write a 
paragraph on what you did this summer." The whole summer in one 
paragraph! That's good stuff.</p> 

If you only need a single line break instead the bigger double space associated with a new paragraph, you can use the <br> tag after the text where you want the break to occur (see Listing 4.8).

Listing 4.8. Code for Creating a Line Break

I <br> would <br> not <br> say <br> such <br> things <br> if <br> 
were <br> you! 

Figure 4.3 shows what the code in Listing 4.8 looks like in a blog.

Figure 4.3. Use line breaks to boss your post around.

Creating Margins and Space

Good blog design tends to allow for plenty of white space right from the beginning—at the template stage. It is preferable to have plenty of margin space around your text because it keeps the eyes fresh and just looks better. But when you want even more emphasis, or you want to single something out within a post, blockquote works great. Blockquote together with the teletype tag works well when you want to display an email message, for example, and give it a different look from the rest of your blog’s text.

To create this “emailed” look, follow these steps:

Put the cursor in front of the text you want to alter.

Type the opening <blockquote> tag.

Then, type the opening teletype tag, <tt>.

After the passage, close both tags with </tt></blockquote>.

Staggering Tags Remember that tags are “wrapped” around your text—they should never be staggered. For example, <b><i>your text here</b></i> is incorrect. The last tag opened should be the first tag closed, like this: <b><i>your text here</i><b>. You can think of your tags as layers of headphones on top of each other, if that helps at all.

Any text you type before or after the blockquote tags will appear with normal margins, and the text inside will be substantially more indented (see Figure 4.4).

Figure 4.4. Always ask permission before you post a friend’s email to your weblog.

Emulate the Email Format

Use the line break tag (<br>) after From and Subject, and wrap each of those words in the bold tag (<b></b>).

Making Lists

There are two kinds of people in this world: good people and bad people. Similarly, there are many kinds of lists on the web. We’re going to talk only about two of them: The Unordered List and the Ordered List. Both are good.

Making an Unordered (Bulleted) List

To make an unordered (or bulleted) list, follow these steps:

In your blog post, type the tag <UL>.

On the next line, type <LI> and enter a list item.

Repeat <LI>, followed by list items until you’re done.

Don’t forget to close each item with </LI>.

Close the list with </UL>.

So, the HTML that I’d enter into my blog entry area would look like Listing 4.9.

Listing 4.9. Unordered List HTML Code

Things I need to do (in no particular order): 

<LI>Wake up</LI> 
<LI>Get dressed</LI> 
<LI>Go back to sleep</LI> 
<LI>But before that, put on my pajamas</LI> 

Damn, I've got too much to do. 


Making an Ordered (Numbered) List

The only difference between an ordered list and an unordered list in terms of HTML is the opening tags. The cool thing about the ordered list HTML is that you don’t have to number the list. The browser will do it for you when it renders your HTML.

To make an ordered (or numbered) list, follow these steps:

In your blog post, type the tag <OL>.

On the next line type <LI>, and enter a list item.

Repeat <LI>, followed by list items until you’re done.

Don’t forget to close each item with </LI>.

Close the list with </OL>.

The HTML that I’d enter into my blog would look like Listing 4.10.

Listing 4.10. Ordered List HTML Code

Things I need to do (in this order): 

<LI>Wake up</LI> 
<LI>Get dressed</LI> 
<LI>Put on my pajamas</LI> 
<LI>Go back to sleep</LI> 

Damn, I've got too much to do. 

Remember that if the blog application you are using doesn’t automatically insert line breaks or paragraph breaks when you press Enter or Return, you will want to use the <br> or <p> tags where necessary.

Aligning Text

Your blog posts will be aligned according to your template design, but occasionally you’ll want to center text within a post or otherwise align the text in a way that differs from your usual post format. To illustrate, let’s say I want to center some text. Listing 4.11 shows what I’d type.

Listing 4.11. Centering Some Text

Home is where we grumble the most and are treated the best. 


Creating Tables

Tables originally existed merely to “tabulate information.” Then they were adopted by creative HTML authors who used the table tags to design layouts for entire web pages. Today, there are other choices for designing layouts, but tables still remain useful within individual blog posts for arranging information in tabular form.

Try to think of your tabular information with the table elements in mind. A table includes headings that explain what the columns and rows contain, rows for information, and cells for each item.

These are the table elements you need to know:

  • <table></table>— These are the opening and closing tags for a table.

  • <tr></tr>— Table row

  • <td></td>— Table cell

  • <th></th>— Table header

You also can adjust the look of your table a bit by using these tags (please note that in the following examples, I’ve used the # or % characters as place-holders for the numbers you will choose):

  • <table border=#>— Sets the width of the border around table cells.

  • <table cellspacing=#>— Sets the amount of space between table cells.

  • <table cellpadding=#>— Sets the amount of space between a cell’s border and its contents.

  • <table width=# or %>— Sets the width of table, in pixels or as a percentage of document width.

  • <tr align=?> or <td align=?>— Sets the alignment for cell(s) (left, center, or right).

  • <tr valign=?> or <td valign=?>— Sets the vertical alignment for the cell. Use top, middle, or bottom in place of the question mark.

  • <td colspan=#>— Sets the number of columns a cell should span.

  • <td rowspan=#>— Sets the number of rows a cell should span.

  • <td nowrap>— Prevents the lines within a cell from being broken to fit.

Listing 4.12 shows what the code for a very simple table with a rule would look like.

Listing 4.12. Simple Table with a Rule

<table border=1> 
    <TH> Things I Love </TH> 
    <TH> Things I Hate </TH> 
    <TD> Coffee </TD> 
    <TD> Smog </TD> 
    <TD> Carrots </TD> 
    <TD> Pain </TD> 

Figure 4.5 shows Listing 4.12 in a blog.

Figure 4.5. A simple table.

Beware of Tables

Those new to HTML should be forewarned: Tables are very particular. You must make sure that every open tag is closed, or you could have major rendering problems—especially in Netscape. Don’t be scared; just double-check your work.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint