Tip #76: More Organization -- HTML Tables

What if you need more than bullets and enumerations to explain a complex task? The answer may be tables. You know, rows and columns of information. Here's how you can add a table to your blog page, and, you've guessed it -- a future article will explain a complex task with lots of information. Instead of too much text, I will display the how-to in a table.

First, here's the sample table:

X	O	X
O	X	O
O	O	X

---

Next, here's the code, used to create the table:

<table border="5">
<tr>
<td>X</td> <td>O</td> <td>X</td>
</tr>
<tr>
<td>O</td> <td>X</td> <td>O</td>
</tr>
<tr>
<td>O</td> <td>O</td> <td>X</td>
</tr>
</table>

---

Tables can be useful for text as well as for images. Additional details on the use of html tables can be found at W3Schools.com.




[Back to the Main Site]

Tip #75: Lists on Blogs

Sometimes, when writing articles or tips or notes, you need to enumerate the steps to a solution or list bullet points to emphasize the main points of your discussion. In this collection of "how-to's" I have used both kinds of lists, and I have wondered out loud, why the blog editing tools do not have bullets and lists included. Here are examples of each and the code needed to make them. The tags are simple and differ, only, by a single letter: <ol> or <ul>:

Ordered list (enumerated):

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


2. Nulla semper nulla ut quam fermentum vel vulputate est ultricies.


3. Donec at diam sit amet justo fermentum pulvinar ut a nisi.

The Code:

<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nulla semper nulla ut quam fermentum vel vulputate est ultricies.</li>
<li>Donec at diam sit amet justo fermentum pulvinar ut a nisi.</li>
</ol>

---

Unordered list (not numbered):

• Pellentesque quis libero vel ipsum cursus tincidunt.


• Phasellus facilisis enim id tellus ornare vestibulum.


• Nunc pretium arcu ut felis elementum ut viverra mi faucibus.

The Code:

<ul>
<li>Pellentesque quis libero vel ipsum cursus tincidunt.</li>
<li>Phasellus facilisis enim id tellus ornare vestibulum.</li>
<li>Nunc pretium arcu ut felis elementum ut viverra mi faucibus.</li>
</ul>


I hope this helps you get your points across!

Note: Here's a quick follow-up. I was working with my blog tool, blogger.com, when I realized that I always write in the "edit html" mode. When I accidentally clicked on "compose" mode, guess what I found. I found buttons to automatically add ordered and unordered lists -- imagine that. The moral of the story is, don't get stuck in a rut!

[Back to the Main Site]

Tip #58: HTML Colored Text

If your blog editor is like mine, there are limited things you can do with text. You can probably bold-face it or make it italics, but you may not be able to change the text color. In the early days of html you would just use the <font> tag, but, alas, the <font> tag has been deprecated (phased out). The preferred method is to use the <span> tag.

I searched all over to find the replacement for <font>. Everyone insisted on using cascading style sheets (CSS). Well, for entire web pages, I agree, but for a single word or a single phrase, creating a CSS style for a color seems like code-bloat to me. Finally, I found the solution, and here it is for you to use.

<span style="color:orange;">Your Text Here</span>

Want to know more, see <span>



[Back to the Main Site]

Tip #56: Blogging with Links

If you have been watching closely, you have noticed at least two behaviors with links that I use in my blog articles. For links that point back to my own material, I let the new page open in the same window (or tab) as the original article. For links to external resources, I cause the new material to open in a new window (or tab). I do that for a couple of reasons: I want you to stay on my site, and I want the external links to come up in the format that was designed by that article writer. Here's how the code for external links work:

1. Create the link in your article.


2. Once the link is created, find the edit html link or button, and move to the code with your newly created link. It will look something like
   
   <a href="http://www.link-to-external-site.com">External Link</a>



3. Add target="info" to the link, so that it looks like this
   
   <a target="info" href="http://www.link-to-external-site.com">External Link</a>



4. Return to your normal editing mode and post your article. When your blog visitors click on your link, a new window will open with the external information that you have linked.

BTW, the word, "info", has no special meaning. It is just the name of the new window that opens up. You could call it, George, if you wanted to.



[Back to the Main Site]