Foopets | Real Virtual Pets Online

Member Login

An understanding of HTML coding and how to Edit. (locked)

Useful 1,545


HTML is an abreviation for “HyperText Markup Language”. It is written in a way for your computer to understand and is used to display all web pages. You can view the coding of any web page by “Viewing the Page Source”. For Firefox users you can do this by right click on a web page and selecting “View Page Source” or selecting this from the “View” drop down menu at the top of the page.


HTML coding can be very useful, and you can use it here on foopets but with limitations. The HTML coding is not placed in the “Textile Markup” on editing your profile, but in there are some basic ways of designing your profile page.

HTML has a structure, editing this stucture can gain you many benefits when you go to edit your profile page. Including the removal of outside links from sites such as Tinypic or Photobucket while using the HTML code they have given you to post an image.

The Structure:
All codes have an opening tag , < , and a closing tag, > . Some codes have two seperate codes, one at the start and one at the end of your information but not all need this.

Here is an example of a standard Image HTML Code;

<img src="Image URL here">

As you can see this code only has one sequence. However here is an example of a code which has two sequences;

<b>Your text here</b>

As you can see this code has a beginning sequence at the start of your text and an ending sequence when you have finished your text. This is the code to make bold text and if you do not close the sequence at the end then the rest of what you type will be in bold even if that was not your intention.

Many HTML codes begin with a symbol, or an abbreviation which allows your computer to understand which command you’d like to show.

For example for bold the symbol is the letter “b”
For the start of a clickable link the symbol is “a”.

Each command has a different symbol and you can use these symbols to identify what is in the code.

Altering Codes

You now know that a code has an opening tag , < , and a closing tag , > , and may have two seperate sequences, an opening sequence and an ending sequence. Also that each command has a different symbol. You now have all of the information to begin altering codes.

The most common code on foopets is the HTML code supplied by sites such as Photobucket and Glitter-Graphics which have three parts to the code
1. The coding to click back to their site (a clickable link)
2. The image URL (To display the image)
3. The image border and the Image name.

The only section you will need out of any code to display an image on your profile is the Image source, which looks like this;
<img src="Image URL here">

Any excess in the Image source, such as the border or the alternate you do not need, and you can delete these sections from the code and replace them with a closing tag, > . Please remember that if you are starting a command with familiarities such as src=“image URL here” you should have both quotation marks in place or the code will not work.

The site reference has two sequences to it and this is how it looks;
<a href="Site link here">Other codes or text here</a>

This is the part of any code which makes the image or text clickable, and if the URL is back to Photobucket or the site which supplied the code then when you click the image you will be redirected to that site, you do not need this section and you can delete the beginning sequence and the ending sequence.
(<a href="site link here> and </a>)

Altering Codes to gain different effects
You can alter many codes to add different effects to them, for example making text bold or an image go to the right hand side of your profile while text is aligned around the outline of the image.

Before altering any code you must first have the basic code.
There are seperate commands which can be added into these codes which apply a different effect and is most commonly done through the class of the image or text.

The class is what you can add into the code to give it a different effect, for example;

Bold Text <b>Bold Text</b>
Pink Bold Text <b class="pink">Pink Bold Text</b>

As you can see by adding the class as “pink” we have changed the colour of the bold text to pink instead of the default black. The only colours which the foopets text reader will respond too and show are the colours; “pink”, “blue” and “red”. Any other colours do not work in this code because Foopets has limited it and the green can only be used in headers, however the other colours can be applied to the headers in the same manner.

This is how you can use the class of the code to change the colour, you can also change the position of an image or position of text on the page (right or left).


Here are some codes that you can use on your foopets or your profile.

Text Codes
Text to the right of your profile <p class="right">your text here</p>
Text to the left of your profile <p class="left">your text here</p>
Hover Title: <p title="your text Title here">Your text Here</p>

Pink Text

<p class="pink">your text here</p>

Blue Text

<p class="blue">your text here</p>
Pink Text Bold <b class="pink">your text here</b>
Blue Text Bold <b class="blue">your text here</b>
Red Text Bold <b class="red">your text here</b>
Text Itallics <i>your text here</i>
Text Pink itallics <i class="pink">your text here</i>
Text Itallics Blue <i class="blue">your text here</i>
Crossed out Text <del>your text here</del>
Blue crossed out Text <del class="blue">your text here</del>
Pink crossed out text <del class="pink">your text here</del>
Type in another Font: <code>Your Text here</code> OR @Your text here@

Image Codes
Image Code: <img src="Image URL here">
Image to the right of your profile: <img class="right" src="your image URL here">
Image to the left of your profile: <img class="left" src="Your Image URL here">
Hover title; <img title="Your Image title here" src="Your Image URL here">
Linked Image; <a href="Your Foopets Link here"><img src="your image URL here"></a>

Other Codes
A Staight Line; <hr>
A Straight Line in Pink; <hr class="pink">
A Straight Line in Blue; <hr class="blue">
A Space: <br />

I have left out some codes because they are already posted in the User Support forum many times.

Don’t be afraid to experiment

You shouldn’t be afraid to try and combine two codes together. Such as this code here;
<a href=""><img title="Hello!" class="right" src="Image URL here"></a>

This code combines a Link back to your own profile, a Title for the image, the image locaton to the right of your profile page and the image source for the image to display on your profile. There are many ways to alter and experiment with different codes, you can combine many ext effects toether in one long code such as this one;

<i class="pink"><b>Hello!</b></i>

This code combines the itallics pink font with the bold font. One Rule while combining two or more codes together is that you must order it. In the example above I have used the itallics code first in the sequence, this means I must use it last in the sequence so as they are aligned or your computer will not display the text correctly, If I put them in the wrong order, like this;

<i class="pink"><b>Hello!</i></b>

Then your computer would not be able to understand the command for it would read it like this;
<i class="pink">text</b>
Confusing the itallics and the bold.
This is not the right format, and so you must place them in the order listed above for your computer to understand the command properly.


There is a glitch in the pet profile which does not correctly turn a space using the enter key into the correct code (listed a bove). Which causes the code to repeat with each view of a foopet profile, including from you. Upon 15 views tere would be 15 additional spaces added, which leaves a huge gap between your writing. While writing in your foopet profile you should not space out any information into paragraphcs and use the code <br /> if you must make a space. The more you place together the more spaces there will be.

For a more in depth evaluation of this glitch, please view this board; Quick Fix for a Pesky Glitch

Quick Tips

When posting from forums the text reader cannot acknowledge the “&” in any forums links, this causes the text reader to revert the & into it’s normal code “amp;”, which in time you can find the Link filled with many of these “amp;”’s and a very long URL. To avoid this please look at this URL and I will teach you how to edit it;

As you can see there is a lot of information in this Link, such as the forum Id and the post count or Page number, you don’t need this unless linking a specific page, and so you can delete these sections until it looks like this;

This cleans up the URL and leaves no room for glitches to occur.

“Click to go to the top”
This is a very useful tool to have on your profile if you have a very long description in your about me.

You can place a button, image or text which when clicked will take you straight back to the top of the page without reloading the page or scrolling up manually.

You can do it by adding a hash number key, # , to the end of your Profile URL.

For an image this is what I would put;

<a href=""><img title="Click me to go back to the top!" src="My Image URL here"></a>

Or for text;

<a href=""><p title="Click me!">Click here to go to the top of my Profile!</p></a>

It is a very useful, easy and quick add-on for your profile!

In Closing

Thank you for viewing my forum post, I’ve seen many members ask for certain codes and instead of repeating myself I decided to make this board so as I can reference it for them to look into.

However please do not bump this “guide” for that is not allowed, please however if you think this would be useful in the present or for future reference bookmark or share this board with someone needing help.


Note: Please remember that you are not allowed to post outside links to any other site. Only from or Thank you.

clickable link

Useful 250

I am leaving this for awhile. This is very useful and alot of members have been asking about this so this is why I have made this into a sticky. IF members practice any of this on here, it will be locked. Please practice on your profile


Okay! Thanks for this guide! This will be very useful to members! COngrats on the Sticky, btw!


Thank you! The text colour guide will come in very handy! C8


Some of that I didn’t even know. O.O Very useful! :)



I barley understand the title! LOL

But the color guide is very useful! :)


This has been really helpful, thankyou for this

Useful 152

Here is an add-on to my first post

Text Codes
Courier Font Blue <code class="blue">Your Text Here</code>
Courier Font Pink <code class="pink">Your Text Here</code>

Forum Formatting

This topic has some Forum Formatting which I did not post in the first post of this topic

This is the HTML coding for doing this text;

Small gray font

<h1><span>Your text here</span></h1>

You can alter this font accordingly with all other HTML codes such as Header three or changing the text colour.

Message Status

You may have seen other members with colourful or textile markup used in their status messages and if you want to know how to do so yo may read below.

Click your “update status” button in your messages bow and while in there select the design you’d like your font to be and begin the status with the beginning of the code.
EG: Pink and itallics status
<i class="pink">your text here

When dealing with the status message you cannot end the code or it will not let you update your status, there for you do not close the code with the end tag, you leave it as is.

As you cannot end the code with the closing tag this means that when yo uupdate your status message all of your message box (old messages included) will appear with the textile markup to any visitors.

You cannot see your status message in the textile markup, only visitors to your profile can and this is the only draw back.

If you have more tha one account, you can look at your status message from your other account to make sure it has properly shown, or ask a friend if it has worked.

The more advanced codes, such as the small grey font and red fonts do not work in the status message, and only these codes do;
Pink codes, Blue codes, all header codes, itallics, bold, notice codes.


Thanks much Skeltoness:) This is wonderful information and I’m glad they’ve made it a sticky:)


This. Is. So. Useful. This is going to help a lot when I start web designing. :D


The is reallly cool[/sub]