Home > Member Center > Developing an Epinions Personality

A Simple Explanation of How to Modify Your Profile Page

Jun 1, 2001 Write an essay on this topic.

The Bottom Line Using some basic HTML codes on your profile page can make it more attractive, personal, and functional.

The purpose of this editorial is to show you how to modify your profile page by changing the font size, type, and color and by adding links. I have put some examples at the bottom of my profile page so that you can see what is explained here. I have worded the instructions in such a way that, I hope, most computer novices will be able to understand. Here is an outline of this editorial:

1. A very basic introduction to HTML
2. Changing font size
3. Changing font type
4. Changing font color
5. Combining font changes
6. Line breaks and paragraphs
7. Making a link
8. What to do with links
9. Conclusion
Appendix - Answers to Questions in Comments

1. A Very Basic Introduction to HTML

Keeping this simple, HTML refers to the "codes" you can add to text to change the way that text looks when viewed with a web browser (such as Netscape or Internet Explorer). If you have used bold or italics in your reviews, then you are already familiar with HTML. Specifically, you put at the beginning of the text that you want to make bold and you put at the end of the text.

When you type your review, you might type the following:
Make this text italicized

But when published, it appears like so:
Make this text italicized

Thus, the basic idea of HTML is that whatever text you want to modify, you must surround that text with appropriate HTML codes. The code turns Bold on and turns Bold off.

Now that you know that, all you need to do is to learn what are the appropriate codes. Within a review, bold and italics are the only acceptable HTML codes. In your profile page, however, many more codes can be used. Let's look at just a few codes you can use to modify the appearance of your profile page. Remember, the HTML codes go before and after the text you want to modify. The text in-between the codes is what gets changed.

2. Changing Font Size

To make text within your profile page appear larger or smaller, place this HTML code before the text and this code at the end of the text to be changed (the size number can be changed to your liking).

For example:
This text will be small.

If you had the example above in your profile page, the words "This text will be small." would appear smaller than normal because a text size of "1" is a small font. To get text to appear larger than normal, use size numbers greater than "2". I recommend using text sizes between 1 and 7. As you can see in the example shown on my profile page (at the bottom), a font size of 7 is very large.

3. Changing Font Color

To change the color of the text font, you use the same code for changing size, but use "color=" instead of "size=". Specifically:

This text will appear blue.
This text will appear red.

Some colors you can use are red, green, blue, yellow, orange, darkred, darkgreen, darkblue, lightblue, lightgreen, gray, lime, teal, maroon, silver, aqua, olive, and fuchsia. Just make sure you put quotation marks around the color when you type the HTML code. For example, or and remember to turn the color off with 

4. Changing Font Type Face

If you have been following this, you probably know what to expect here. If you want a different type face, such as Arial or Courier, you surround the text you want to change with the following code:

This text will be in Arial font.
This text will be in Courier font.

The list of fonts that you can use is too large for me to list here. You can use your word processor to get some names of fonts and see what they look like. Note that the fonts will only show if the person viewing your profile page has those fonts installed on their computer. The fonts shown at the bottom of my profile page appear fine when I view it from home. At my work computer though (which doesn't have those fonts), the text reverts back to Epinions default font.

5. Combining Font Changes

Let say you have some text in your profile page that you want to be red, size 5, and in Courier font. You can combine the above codes within a single section. Specifically, to start the red, size 5, Courier font you would type:



To end those font changes, you simply put the end font code:



6. Line Breaks and Paragraphs

One annoying feature of HTML is that you have to tell it when to start a new paragraph. For example, if I type the following text into my Profile Page:

This is paragraph one.

This is paragraph two.

What I get when I view my public profile is this:

This is paragraph one.This is paragraph two.

That is, even though I skipped down a couple of lines when I typed it, those lines are ignored when the text is displayed. In order to start a new paragraph in HTML, you have to provide an HTML code that says "Start a new paragraph." The HTML code for paragraphs is this:



Putting a before text starts the paragraph. It is correct to finish the paragraph with the end code of . Using this code, if I want to create a couple of paragraphs (and make them have a double-space between them) I can type the following:

This is paragraph one.

This is paragraph two.

Note that it is not necessary for me to put those two paragraphs on separate lines. For example, I could have just typed:

This is paragraph one. This is paragraph two.

And it still would have been displayed like this:

This is paragraph one.

This is paragraph two.

This is because anytime a browser sees the HTML code it immediately skips down a couple of lines to start a new paragraph. So basically, anytime you want to start a new paragraph, begin with 

A line break is different from a new paragraph in that a line break just moves the following text down a single line. To create a line break, type the following:

 

For example, if I type this:

This is line one. This is line two.

It will look like this:

This is line one.
This is line two.

7. Making a Link

Let's say you want to add a link to your profile page. (If this is your first visit to the Internet, a link is some text (usually underlined) that you can click on to go to another web page). Before you can add links to your profile page, you must understand what a URL is. A URL is the Internet "address" of the web page. URLs begin with http:// and look something like this:

http://www.epinions.com/user-drdad

The URL above is to my Profile Page. Every web page you visit has a specific URL and you can find it in the address box of your browser window. This URL of an Epinions review looks like this:

http://www.epinions.com/content_1571070084

If you want to add to your profile page a link to a certain web page (the Disney web site for example), you have to know the URL (which happens to be http://www.disney.com). To add a link to the Disney web site on your profile page you would enter the following text:

<a href="http://www.disney.com">Visit the Disney Web Site</a>

After adding this text, when you view your Public Profile you will see that the words that will show are "Visit the Disney Web Site". However, it will be a link (underlined and in a new color). People can click on the link and they will be taken to the Disney web site.

If you want to add a link to one of your reviews, put the review URL inside the beginning HTML code like this:

<a href="http://www.epinions.com/content_1571070084%22>

Then type the reivew title and the ending code:

A Review of the Canon CanoScan N650U Scanner</a>

Here is an example that you can cut-and-paste directly into your Profile Page. Simply delete the first bold section and replace it with the URL. Then delete the second bold section and replace it with the review title (and be sure not to delete the "> that is in-between the two bold sections):

<a href="Put the URL here">Put your review title here</a>

8. What to do with links

I hope I was clear enough that you now know how to add links to your profile page. Now you can add additional links to your favorite web sites, add links to your favorite Epinions members, or add links to your favorite reviews. One option for you to consider is to add links to your own reviews, but group them by category.

For example, you might want to start your profile page with some personal information about yourself. At the end of that, skip down a couple of lines (by typing on a blank line) and type the following:

My Movie Reviews 

<a href="URL of your first movie review">Title of your first movie review</a> 

<a href="URL of your second movie review">Title of your second movie review</a>

<a href="URL of your third movie review">Title of your third movie review</a>

My Book Reviews

<a href="URL of your first book review">Title of your book movie review</a>

<a href="URL of your second book review">Title of your book movie review</a>

<a href="URL of your third book review">Title of your book movie review</a>

And so on.

The above text can be cut-and-pasted into your Profile Page. You would just need to change the bold text. Also, you can replace each with a if you want the lines single-spaced instead of double-spaced.

8. A few final comments

First, even if you don't link to your reviews on your profile page, I hope this editorial was helpful. Especially if you are an HTML novice. Second, if you are an HTML novice, don't feel bad if you have to read this information more than once to understand it. I hope the examples of different font sizes, colors, and faces on my Profile Page will make things clearer. Third, as you play around with your Profile Page trying some of the things I've included here, I recommend you go very slowly. Start by making one or two small additions and then view your Public Profile to see if they worked. You might consider copying your original profile page into a separate text file as a backup. Finally, you may be wondering "Where in my profile page do I put all this stuff?". The answer is that you can add these HTML codes to your "Long Bio". From your "Account Page", click on "Update Public Profile" and you will see boxes for "Short Bio" and "Long Bio". The Long Bio will accept all the HTML code discussed here.

Thanks for reading, and I hope I've helped HTML novices understand a few basics of HTML. If you have any questions about using HTML in your profile page, please feel free to e-mail me and I will do my best to help.

Bret (DrDad)

I express my thanks to MobiProf for making me aware of the fact that mark-up codes can be used in reviews.

How to include mark-up codes in your reviews.
http://mmmm.epinions.com/content_1486200964

Appendix - Answers to Questions in Comments

A couple of questions have been posed in the comments section of this review. I choose to answer them here so that others might benefit.

1. How do you put photos in your profile (the biography area)?

In one sense, a photo is similar to a link. That is, you have to have the URL of the photo. For example, the URL of my photo is http://obupsichi.homestead.com/files/drdadbeach.jpg (Notice that the URL ends with .jpg instead of .html. Photo URLs may also end with .gif or some other picture extension.) Once you have the photo URL, then the code you use to put the photo in your profile page is as follows:

<img border="0" src="http://obupsichi.homestead.com/files/drdadbeach.jpg" width="100" height="97">

The border="0" code means there will not be a border around the picture. If you want a border, change the value to your liking. The width= and height= set the dimensions for the picture. For your reference, those are the actual dimension of my photo. Be careful about resizing a picture, because it will likely change the appearance. You can leave the width and height settings out of the code (simply end with .jpg> ), but if you know the size you want, this is how to do it.

2. How do you find out the URL of someone's profile photo?

OK, nobody asked that in the comments, but I'm anticipating that someone might want to know this.

Internet Explorer Users
A. Right-click on the photo
B. Select "Properties" from the options
C. The Properties box will show you the URL which can be copied

Netscape Users
A. Right-click on the photo
B. Select "View Image" from the options
C. The Location box of Netscape will show the URL which can be copied

Now that you have to URL to someone's photo, you can put their photo on your profile page and say something nice about them like "DrDad's great. He taught me how to do this!" (and don't forget to link to his profile page ;-) ).

3. How do you change the color of a link?

One way to do this is to put the color codes inside the link codes. Specifically, start the link, then start the font, then type the link text, then end the font, then end the link. Maybe an example will help:

<a href="http://www.epinions.com">Epinions</a>

I hope that helps. I will try to answer any other questions that are asked. Thanks for reading
Bret (DrDad)

Read all comments (29)|Write your own comment

Write an essay on this topic.

Share with your friends

About the Author

Epinions.com ID: DrDad

- Top 1000

Location: Oklahoma

Reviews written: 54

Trusted by: 188 members