Use HTML Button Tag in Blog

This morning I read an article on web. The article is a long serials one, but it does not show the whole article on one page. Instead, it breaks down into small ones and placed serval buttons at the end of each one: First, 1, 2, ..., Last. I like this style. I immediately related this to my blog. Sometimes, I do the same thing, but I use UL LI list tags to show them as a list.

I did some investigation. What I found are three basic ones. First is to use DIV or UL LI with CSS. Although it does provides flexible and nice layout, it is a little bit complicated. The most concern I have is that I have to define CSS styles in my blog headers. This is not an issue in Blogger, but my other blog web providers do not allow me to add CSS styles.

The second method is INPUT tag. It is very simple. It provide a button like UI. However, it is a single tag with limited layout enhancement.

The third one is BUTTON tag. With this tag, any HTML tags can be placed within open and close tags. I like this one very much. Both INPUT and BUTTON utilize OnClick event to trigger click or hit event. For my blog purpose, what I need is to direct to another URL, either in current document or a new window. This can be done by client side JavaScript. I'll show this later on.

Here I give it a try in this blog.

The following codes define two BUTTON tags. By using inline Javascript, one will open a URL (Apple web page) in another new window and another open Microsoft web page in the current window. Within each button, there is an image content with text on the next line.

<button type="button"
 onclick="JavaScript:window.open('http://www.apple.com')">
 <img src="http://images.apple.com/home/images/billboard_ipad_hero.jpg" />
 <br/>Go to Apple... make my day!
</button>
<button type="button"
 onclick="JavaScript:document.location='http://www.microsoft.com';">
 <img src="http://compass.surface.com/assets/e4/38/e43802e2-8e9c-4fb9-80d6-f27fa6cf50df.jpg#1280_carousel_1_meet_surface.jpg" />
 <br/>Go to Microsoft... make my yesterday!
</button>

Here is another example with two buttons. I added a SPAN tag with TITLE attribute so that each button has a tooltip when you move mouse over the button.

<button onclick="JavaScript:window.open('http://davidchuprogramming.blogspot.com/2004/05/my-first-blog-entry.html')" type="button">
<span title="First blog">||&lt;&lt;</span></button>

<button onclick="JavaScript:document.location='http://davidchuprogramming.blogspot.com/2013/02/communication-between-mvc-controllers.html';" type="button">
<span title="Previous blog">&lt;</span>
</button>