About meThis 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.
WelcomeWelcome! 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 helpI 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.
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.
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:
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.
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:
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:
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.
This is a marquee! 1. Copy this code:
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.
Add direction="left" to the marquee code to change the direction to go left.
To make it go right, just change "left" to "right".
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.
To change the width add this to the code:
Change the "NUMBER" part to a number.
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.
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.
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.
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.
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.
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.
MS PaintMaking 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.
Index of tutorials
Bold, Italics, Underline
Bold, Italics, Underline