Epinions.com 
Join Epinions | Learn More! | Sign In   

HomeMember CenterGeneral Comments about Epinions.com

Read Advice   Write an essay on this topic. 

How Important Is Your Profile Page - Part III - A Lesson in HTML Coding

Feb 18 '02

The Bottom Line Spice up your profile page and you too might experience far more hits than before...

Back in August and September of last year, I put together two essays that dealt with the importance of creating an attractive, informative and functional Epinions profile page. Since members and non-members alike will eventually come across a review of yours and, subsequently, they may click through to your profile page, you want to give those perspective readers (hits) a chance to see more reviews by you and, if you like, even learn a little bit more about yourself.

To that end, my two previous reviews gave somewhat of an introduction to basic HTML coding which would help spice up your profile page and give it some flair.

To see some of the contents I discussed back then, please visit:

Part I: http://www.epinions.com/content_2071044228 (Aug 2001)

and/or

Part II: http://www.epinions.com/content_2191958148 Sep 2001)

One of the biggest issues I had with Part I was that the drop down menu HTML coding only seemed to work with MS-Explorer, not Netscape. Well, after doing some research, I found new HTML coding for drop down menus that will work on all browsers plus it gives you a little more flexibility. I'll be covering that coding in this essay, how to use special characters and then using a rainbow of colors in your text and background.

So sit back, get your pen out, and get ready to learn some more HTML coding that's sure to help you improve your profile page and net you more hits.

New Drop Down Menus
As mentioned above, my earlier drop down menu coding didn't seem to work with certain later versions of Netscape Navigator. This new coding, which works essentially on the same principle, functions on all browsers that I know of. Additionally, it gives you the flexibility of increasing the size of the drop down window to show more than just one entry at a time.

So, let's take a look at the coding below. The first two lines set up the drop down menu form. The 'size' indicator is adjustable based on your tastes. Enter 1, and only one item can be seen in the drop down menu. Enter 3, and you'll see 3 items, and so on. Play around with it to see which one you prefer.

The next series of lines will link to the items you want to reflect in your drop down menu (usually your reviews). With my drop down menus, I always make the first line the title of the box. In other words, I have a drop down menu reflecting my Rush reviews, my music reviews, Kids & Family reviews, etc. So to 'label' the drop down box accordingly, I title the first line and have it 'linked' to my profile page. This way, if someone tries to 'select' the title, it'll simply reload my profile page.

After that, as reflected below, I list each review on a line with the appropriate coding and reflect the title of each. If you follow the simple pattern below you shouldn't have any problems creating the drop down menu. All HTML coding that appears on the final 3 lines should be copied exactly.

To create a second drop down menu, simply follow the same pattern. It's just that easy :) (Or is it...)

Drop Down Menu HTML Coding

<FORM name="form1">
<P align="center"><SELECT name="links1" size="2">
<OPTION value="http://www.epinions.com/user-jag2112%22> My Reviews </OPTION>
<OPTION value="http://www.epinions.com/content_2071044228%22> HTML Coding - Part I </OPTION>
<OPTION value="http://www.epinions.com/content_2191958148 "> HTML Coding - Part II </OPTION>
<OPTION value="http://www.epinions.com/content_2536874116%22> HTML Coding - Part III </OPTION>
</select><input type="button" name="go" value="GO" onclick= "window.location=document.form1.links1.options [document.form1.links1.selectedIndex].value"></P>
</FORM>

Special Characters
Unknown to most is the ability to display special characters that aren't available on your standard QWERTY keyboard. Sometimes including these characters will add a special touch to your profile pages that you normally couldn't achieve. Some of these codes also work within your reviews which adds a nice touch as well. To access the code, simply type the '&' and the code together (no space) from the list below.

Codes not viewable in reviews...

& lsquo; left single quote
& rsquo; right single quote
& sbquo; single low-9 quote
& ldquo; left double quote
& rdquo; right double quote
& bdquo; double low-9 quote
& dagger; dagger
& Dagger; double dagger
& permil; per mill sign
& lsaquo; single left-pointing angle quote
& rsaquo; single right-pointing angle quote
& spades; black spade suit
& clubs; black club suit
& hearts; black heart suit
& diams; black diamond suit
& oline; overline, spacing overscore
& larr; leftward arrow
& uarr; upward arrow
& rarr; rightward arrow
& darr; downward arrow
& trade; trademark sign

Codes viewable in reviews...


& iexcl; ¡ inverted exclamation
& cent; ¢ cent sign
& pound; £ pound sterling
& curren; ¤ general currency sign
& yen; ¥ yen sign
& brvbar or &brkbar; ¦ broken vertical bar
& sect; § section sign
& copy; © copyright
& ordf; ª feminine ordinal
& laquo; « left angle quote
& not; ¬ not sign
& shy; ­­ soft hyphen
& reg; ® registered trademark
& macr or & hibar; ¯ macron accent


A Rainbow of Colors

Tired of the plain white background on most profile pages? Don't want to add a background picture because it takes too long to load? Well, how about adding some simple color? With the bgcolor="code" command, you can do just that. Simply replace the 'code' with one of the following and you'll soon be amazed at the colorful backgrounds you can create. Use the same code number to change the color of your font via the font color ="code" command.

Because there are so many colors to choose from, I'll only list a few ranges of colors here. However, to see a complete color chart/code list, visit: http://hotwired.lycos.com/webmonkey/reference/color_codes/ Webmonkey is a fantastic site filled with HTML tips and tricks (some of which I've repeated here).

Yellow's
#FFFFCC, #FFFF99, #FFFF66, #FFFF33, #FFFF00

Red's
#FF33FF, #FF33CC, #FF3399, #FF3366, #FF3333, #FF3300

Green's
#33CC99, #33CC66, #33CC33, #33CC00, #339966, #339933, #339900

Blue's
#3333FF, #3333CC, #333399, #333366, #333333

And there you have it. My third installment in HTML coding tips and tricks. Special thanks to Webmonkey.com for providing some of the tips seen here and in my previous HTML coding reviews.

As before, if you have any trouble with this coding, or just need a helping hand in getting your profile page working, feel free to email me at jag2112@hotmail.com I'll be happy to help any way I can.

Until next time, take care...

-John




 Read all comments (17)
 Write your own comment
jag2112

Epinions.com ID:
jag2112
Epinions Most Popular Authors - Top 100
Member: John
Location: Clinton, NJ
Reviews written: 304
Trusted by: 309 members
About Me:
The writer stares with glassy eyes... Defies the empty page...


Help | Member Center | Message Boards | Site Rules | User Agreement | Privacy Policy | Site Index | Topic Index  
About Epinions | Careers | Contact Epinions | Advertising  

Epinions | Shopping.com | Rent.com | Free Classifieds | Price Comparison UK

Shopping.com Network © 1999-2009 Shopping.com, Inc. Trademark Notice

Epinions.com periodically updates pricing and product information from third-party sources,
so some information may be slightly out-of-date. You should confirm all information before relying on it.