About me

This is what I look like. My owner (stickyjammy) is starting to like customising and is searching for the best clothes for me. She likes the Hissi Thief set but she doesn't spend so much money just for clothes.

Welcome

Welcome! This page has a few small tutorials on HTML and graphics.
To Navigate click the links on the right hand side.
OR, you can search for keywords by using the search function in your browser (Ctrl+F) and typing the word you want to find with "[" and "]" around the word.

HTML help

I already have a HTML/CSS help page, but that seemed more like tips and tricks. I realised by looking at the Help boards, that people need help with adding images, changing the look of things, etc. So I thought I'd construct a little section to help them with it.
Of course, anyone can send in requests for things to be mentioned or help they need. I would encourage this, as it would save time explaining things. :)
If you do have a question about HTML, I would be happy to help. Just neomail me.

Basics

How do I put an image on my petpage or userlookup?
1. First you upload the image somewhere. Photobucket is probably the best choice.
2. When you have uploaded it, copy the code below and paste it where you want the image to be on your petpage/userlookup.

3. Go back to your image host and copy the URL of the image you want. Make sure the one you copy starts with "http://" because that is a direct link which is what we want.
4. Replace IMAGE URL HERE.jpg with the URL of the image you copied.

Tags: [Image], [img], [Userlookup], [Petpage], [Photobucket], [Imageshack], [image host], [html]

Category: Image, HTML

Top

How do I get the text to go around or wrap around the image?
1. In your img tag, add align="left" if you want the image to go to the left. You can change it to "right" if you want it on the right.
2. It should turn out like this:

Tags: [image], [img], [align], [wrap], [html]

Category: Image, HTML

Top

How do I make a link so that it jumps to another part of the page?
1. Put this code and change 'Link' to whatever you want.

2. Then make the link, which would be:

Notice that when you make the link, you put a '# in front of the name.

Tags: [link], [links], [jump], [anchor], [a], [#], [html]

Category: Links, HTML

Top

How do I make some text Bold, italic or underlined?
1. To make something bold copy this code:

2. To make something italic copy this code:

The Underline code does not work.
3. To make something Underlined copy this code:

Tags: [bold], [strong], [italic], [emphasize], [emphasise], [underline], [formatting], [html]

Category: Font, Styles, HTML

Top

How do I make an image a link?
1. Just make a normal link. Like this:

2. Now replace the text for the link (in this case I'll replace 'Example') with the image tags. Which is:

I've put 'border=0' because when you make an image a link there will be a horrid looking border around the image, so adding 'border=0' removes the border.
3. It should look like this:

Tags: [image], [link], [html]

Category: Image, Links, HTML

Top

THIS SECTION IS NOT WORKING FOR PETPAGES. DO NOT USE THE CODES.
How do I make some stuff go back and forth?
This is called a Marquee. It is good for a lot of text like updates. Though using it too much can get quite annoying, so try not to use it for everything.
Example:
This is a marquee! 1. Copy this code:
Text here
2. You can change it a lot. Like changing the width, scrollamount, direction, scrolldelay, loop, etc. Mainly people would want to change the direction, speed and width.

Direction:
Add direction="left" to the marquee code to change the direction to go left.
Like this:
Text here
To make it go right, just change "left" to "right".

Speed:
To change the speed use both scrollamount and scrolldelay.
To change the scroll amount add this to the code:
scrollamount="NUMBER" . The higher the number the faster it is.
To change the scroll delay add this to the code:
scrolldelay="NUMBER" . The higher the number the slower it is.
Width:
To change the width add this to the code:
width="NUMBER" .
Change the "NUMBER" part to a number.

Tags: [marquee], [html]

Category: Misc, HTML

Top

How do I make a textbox that people can copy codes from?
That is what you call a text area.
1. This code is pretty difficult to show on the petpages, so you'll have to copy from this image.
textarea

Tags: [textarea], [text], [area], [textbox], [box], [codes], [html]

Category: Misc, HTML

Top

How do put an image as a background?
You will have to use CSS for this.
1. Upload your image somewhere.
2. In your CSS (in between the style tags) put:

Copy the "Direct Link" URL of your image and replace "URLOFIMAGE" with it.

Tags: [Image], [img], [background], [bg], [css]

Category: Image, CSS

Top

How do you get a horizontal gap or separate the content from the footer?
For this there are a few methods of doing this.
1. The first most easy one is the br tag. Though, the tag won't separate, for example, a content and a sidebar from the footer. Because this only creates a line break.


2. So we use another method which is probably the best. I'll split it up so it'll make it easier.
CSS
Create a div class and name it something like "spacer", so you know what it is. And then fill in the css with the following: clear:both; width:100%; height:5px;
Here is what it should be like:

I'll explain each part:
a) clear:both; is for when other divs have the "float" properties, and makes it so the floating divs won't go on either side of the div with the properties "clear:both;".
b) Width is self-explanatory and so is height.
With the height, you can change it to what you like.
HTML
So now we have the CSS ready, we just need to get the right code.
It should be:

And of course, "spacer" is what you named it in the CSS.
All you need to do is just put it after the div or where ever you want a horizontal gap. You don't need to type anything in between.

Tags: [space], [spacing], [spacer], [horizontal], [html], [css]

Category: Misc, HTML, CSS

Top

How do I make the font size on my userlookup smaller?
It's very simple! Just add this to your userlookup css.

Replace the asterisk (*) with the font size you want.
The !important part is in there to overwrite the default font size.

Tags: [userlookup], [font], [size], [font size], [smaller], [bigger]

Category: Font, CSS



^Top


MS Paint

Making gradients
DISCLAIMER: I didn't come up with this! I found this method on an offsite, I decided that maybe people would like to know it on neopets. Credits to NerdParadise.


Want to make a gradient like the above?

1. Create a new blank picture on MS Paint with the width of 100 pixels. The height should be what you want it to be. (You can change it by going to Image, Attributes. Or press Ctrl+E)


2. Fill it with the colour you want at the bottom of the gradient. I filled it with blue.


3. Then get the line tool and make a diagonal line with the colour you want the top part to be.


4. Fill the top side of the diagonal line.


5. Resize it horizontally to 1%. Change it by going to Resize and skew, press CTRL+W or click Image, Resize and skew.


6. It will become just a thin line, like so.


7. Then stretch it out again by going to Resize and skew and changing the horizontal resize to 500%. Keep doing this until it is as wide as you want.



Then you are done! You can add text to it or do whatever you want to it.

^Top


Index of tutorials

^Top


Awards/Reviews

None at the moment.

^Top




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions