Question

I am trying to develop Help Bar in HTML for which i am using following code.Is
there any way so that i can make it small in terms of number of lines.

<table>
<tr>
<td  width="400" height="50" >
<input type="button"  value="HOME" onClick="window.location.href='http://www.google.com'" >
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button"   value="ABOUT US" onClick="window.location.href='http://www.google.com'">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button"  value="CONTACT US" onClick="window.location.href='http://www.google.com'">
</td>

Answer 1

1. Don’t use a table, use appropriate tags and CSS
2. Get rid of all those   characters and use CSS to add margins
3. Use <a> tags instead of buttons, and style them with CSS
4. Don’t uppercase your words in the markup, use CSS (text-transform:uppercase)
5. For the sake of all that is good, use an href instead of a javascript onclick event.
6. Learn CSS!

Resulting HTML should look something like this:

<ul class="navigation">
    <li><a href="http://www.google.com">Home</a></li>
    <li><a href="http://www.google.com">About Us</a></li>
    <li><a href="http://www.google.com">Contact Us</a></li>
</ul>

With CSS you will be able to get the same look you had with the table and buttons, but much more, and you will be using best practices, have greater accessibility, as well as easy maintenance, editing, control over your page’s appearance, and simpler, sensible markup

Remember:

• HTML – Describes what the content is
• CSS – Describes what the content looks like

Some good reference reading for the future:

• http://www.htmldog.com/