开发者

HelpBar in HTML

开发者 https://www.devze.com 2023-03-07 13:03 出处:网络
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.

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;
<开发者_Go百科;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>


  1. Don't use a table, use appropriate tags and CSS
  2. Get rid of all those &nbsp; 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/


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'">&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>
0

精彩评论

暂无评论...
验证码 换一张
取 消