HelpBar in HTML
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'" >
<开发者_Go百科;input type="button" value="ABOUT US" onClick="window.location.href='http://www.google.com'">
<input type="button" value="CONTACT US" onClick="window.location.href='http://www.google.com'">
</td>
- Don't use a table, use appropriate tags and CSS
- Get rid of all those
characters and use CSS to add margins - Use
<a>
tags instead of buttons, and style them with CSS - Don't uppercase your words in the markup, use CSS (
text-transform:uppercase
) - For the sake of all that is good, use an
href
instead of a javascriptonclick
event. - 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/
You can simply combine it all onto one line if you want:
<table><tr><td width="400" height="50"><input type="button" value="HOME" onClick="window.location.href='http://www.google.com'"> <input type="button" value="ABOUT US" onClick="window.location.href='http://www.google.com'"> <input type="button" value="CONTACT US" onClick="window.location.href='http://www.google.com'"></td>
精彩评论