HTML TIPS & TRICKS FOR DESIGNING WEB PAGES
Pawan Vora , pawan.vora@xor.com
XOR
Like many of you, I have been designing Web sites and Web applications for quite some time now. And it's been mostly fun.... although, at times it's been frustrating with browser and version incompatibilities. Over time I have learned a few design tricks that I'd like to share with you. Mind you, that these are not all my tricks, so I can't take all the credit. Some I have learned from other Web page designers (by looking at their HTML source, of course) and some I have learned because of time constraints and my own laziness :-) I just hope these will be useful to you in your design endeavors.
Before I start, I want to warn you that these tricks don't work on all browsers... especially Netscape. However, they degrade gracefully and your pages will not break.
Tip 1. Creating Colored Horizontal Rules
You can write:
<hr size="2" color="#000099">
If you are using IE, you will see a single-pixel blue colored line above. If you are using Netscape, you will just see a regular horizontal rule. As you can see, the code degrades gracefully on browsers that don't support the COLOR attribure, but enhances the design for IE browsers.
Now, if you really want a blue horizontal rule to show up in other browsers, you can try the following HTML code:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td height="2" bgcolor="#000099"><spacer type="block" height="2"></td>
</tr>
</table>
With this code, you will see a blue horizontal rule no matter what browser you are using; see the blue line below:
Tip 2. Changing Cursor Shapes
If you are familiar with style sheets, you know that CSS allows you to change the cursor type. Some of the cursor shapes that we can use are listed below:
 |
cursor:crosshair |
 |
cursor:hand |
 |
cursor:help |
 |
cursor:move |
 |
cursor:text |
 |
cursor:wait |
One that I've used often is cursor:help. I use it mainly for applications that provide context-sensitive field level help. At least users with the IE browsers get an idea of the link type and the nature of help they are going to get. In the example below, move your cursor over the label 'User Name.' If you're using IE4 and above, you will see an pointer with a question mark over it.:
And here's the code:
<a style="cursor:help; color:#000099; text-decoration:none;" href="#">User Name:</a> <input type="text" size="15" name="userName">
Note: See http://www.w3.org/TR/REC-CSS2/ui.html#cursor-props for a listing of all the cursor types recommended in CSS2 Recommendation by W3C (World Wide Web Consortium)>
Tip 3. Making Colored Buttons
It's time you say goodbye to gray buttons. Well, almost! We will still have to deal with gray buttons for a while on Netscape browsers. If you're using IE 4 and above, you should see below a button with blue background and white text "Continue...". If you're using Netscape 4+ you will see a button with bold text 'Continue..."; the background color of the button will still be gray.
How did I do it? Simple! With Cascading Style Sheets. Here's the code:
<input type="button" value="Continue..." style="background:#000099; color:#ffffff; font-family: verdana,helvetica,arial,sans-serif; font-size: 8pt; font-weight:bold;">
As you can see, I have added a STYLE attribute and have specified BACKGROUND and COLOR properties for the background color and the text color respecitvely. I have also added FONT-FAMILY, FONT-SIZE, and FONT-WEIGHT to demonstrate that we can control quite a few button properties. All the FONT-related attributes will work on Netscape, so all is not lost.
In most cases, I would recommend defining a "class" in the style sheet so that you can change your mind later if you want to about any of the attributes. So in the above example, you could define a class as follows:
<style type="text/css">
.emButton {
background: #000099;
color: #ffffff;
font : bold 8pt Verdana,Helvetica,Arial,Sans-serif;
}
</style>
And then use the class in the button as follows:
<input type="button" value="Continue..." class="emButton">
I have used this approach on several web-based applications to emphasize the default path through the application to the user. Although it doesn't work for all browsers, it does enhance experience for quite a few users.
To be continued...
Recently, I have learned a few other tricks as well, but I'll save them for the next issue. You know, we do have to fill up these internetworking issues :-) But, seriously, do let me know if these tricks worked for you and e-mail me (pawan.vora@xor.com) any other design tips or tricks you have learned and I'd be glad to share them with the rest of the ITG community in the next issue.
© Internet Technical Group
Last update: October 8, 2000
URL: http://www.sandia.gov/itg/newsletter/aug00/workshop_tips.html
hosted by Sandia National Labs
Disclaimer: Neither Sandia Corporation, the United States Government, nor any agency thereof, nor any of their employees makes any warranty, express or implied, or assumes any legal liability or responsibility for the accuracy, completeness, or usefulness of any information, apparatus, product, or process disclosed, or represents that its use would not infringe privately-owned rights. Reference herein to any specific commercial product, process, or service by trade name, trademark, manufacturer, or otherwise does not necessarily constitute or imply its endorsement, recommendation, or favoring by Sandia Corporation, the United States Government, or any agency thereof. The views and opinions expressed herein do not necessarily state or reflect those of Sandia Corporation, the United States Government or any agency thereof.