Home /
Neopets Premades
/
Cursors
/
Blogs
/
Backgrounds
/
Animations
Links
/
Simple HTML Help
/
Frequently Asked Questions
/
Contact Us
![]()
A Simple HTML Guide for Neopians (or Non-Neopians)
|
It's wonderful to have premade layouts for Neopets, but what if you want to make some small changes yourself? Or even go for a complete theme on your own? When I started creating graphics and layouts I ran across some bewildering questions about html that everyone else "seemed" to know automatically. It was if Neopets took everyone aside but me and taught them about html coding. Most likely, everyone else just did their homework like I had to do eventually, but it would have been nice when I started to have a complete guide of simple html coding to get me through my "duh" moments. For more in depth HTML help, you may want to do a Google search (seach engine at the top of page) or you can CLICK HERE for one that I found. :o)
Below you'll find some simple html codes to make creating your own stuff a little easier. No fancy stuff yet, but I found that learning the basics went a long way in preventing html disasters for me. (The appropriate html codes will be in black below.) * * * * * BREAK Ever put up a banner or image and have your text share the same line as your banner making it completely off-centered and horrid looking? Place the code below before and after your banner or image (and even between text you'd like to separate) and the banner or image will have its very own line. (Put several of these in a row to make the gap wider if you want.) <br>
PARAGRAPH BREAK Same concept as above except one of these creates a wider space above and below characters. (Also, if you have font coding a certain way, this code could cause you to keep adding the same font colors over and over down your page. The <br> code doesn't. And, you can only use one <p> at a time to make a standard sized gap. With the <br> code, you can make the gap as tall as you like.)<p>
CENTER Can't figure out how to center an image or text on a page? You'll need the following code before your characters. <center> To close this off, you'll need to put </center>
IMAGE CODE Is there a lovely picture you'd like to put up, but don't know the code? (First you need to know the URL address of the image. If the pic is on your PC, you'll have to upload it using an image host. Some common ones are Photobucket, Maj or Image Shack.) Use the code below to display the image. Be sure to place the image URL where it says "Image URL Here" <img src= "Image URL Here">*** With the New Neopets
layout, you might have to put the size of the image so it will show
up properly in Internet Explorer. Here's how... <img src="Image URL Here" width="IMAGE WIDTH HERE" height="IMAGE HEIGHT HERE">
LINK AN IMAGE What if you want to link your picture to go somewhere when someone clicks it? Easy! <a href=Address Where You Want Them to Go Here><img src=Image URL Here></a> (Or if you don't want a border around your image) <a href=Address Where You Want Them to Go Here><img src=Image URL Here border=0></a>
LINK TEXT Want to link a word or phrase to take people to another place? Here ya go! <a href="Place the Destination URL Here">Put the Words You Want to Appear Here</a> Example: <a href="www.royaladybug.com">Find Neo Graphics Here!</a>
TEXT FONT, TEXT COLOR, TEXT SIZE Here's a simple way to control your font face, color or size, followed by the code that will close it up. Change the font face, color and size according to what you need it to be. (Keep in mind that not everyone has the fancy fonts you may have. So if you use a font you're unsure of, have someone else tell you if they can see it.) <font face="verdana" color=red size=4>Your Text Here</font> You can also use CSS to change your text into many possible colors. The text below will be red, but when you change the color code (which is #FF0000) you change the color! Click here for a CSS color chart. <font face="verdana" color=#FF0000 size=4>Your Text Here</font> Also, here are a few popular fonts that can be seen by "most" computers. Andy Artbrush Chiller Harrington Jester Jokerman Papyrus
TEXT EFFECTS Here are some common effects you may want to apply to your text. Underline <u> text here </u> Bold <b> text here </b>
<s> text here </s> Italics <i> text here </i>
MARQUEE or SCROLLING TEXT What about making text scroll across the screen? <marquee>Your Text Here Will Scroll from Right to Left</marquee> <marquee direction="right">Your Text Here Will Scroll from Left to Right</marquee> <marquee direction="up">Your Text Here Will Scroll Up</marquee> <marquee direction="down">Your Text Here Will Scroll Down</marquee> <marquee behavior="alternate">Your Text Here Will Bounce Back and Forth</marquee>
MARQUEE or SCROLLING Images You can make images scroll as well. (Use the above codes as a guide to change the direction of your scrolling image. <marquee><img src=Image URL Here></marquee>
BACKGROUNDS Here is your standard background code... *Not Fixed: <body background="Your Background URL Here"></body> *Fixed: <body background="Your Background URL Here" bgproperties="fixed"></body> *Fixed
with the new Neopets Layout
I've also been asked how to have an image fixed to the lower right corner of a page. <style> body{background:white url('Your Background URL Here') no-repeat fixed right bottom;} </style> Would you like some color
behind that image instead of white? <style> {background:#FF000
TEXT BOX or FORM BOX
This has to be
the most common html question I get. "How do I put a box under my
banners so that other people can copy the code?" Well, here's your
answer! (You can change the size, color, etc. by experimenting with
what's here. But this is the standard box I use on Neo.)
<center><textarea rows="3" cols="20" name="Text_link">PUT
INFO HERE</textarea>
REMOVE
BANNERS FROM SHOPS AND GALLERIES
I had a difficult time figuring this one out, but luckily Neo made
it easier a few days ago...
To Remove the
Ad up Top:
To Remove the
Ads at the Bottom:
To Remove
All the Ads:
REMOVE THE BORDERS
AROUND YOUR SHOP AND GALLERY ITEMS
If
you have a white or light background, your items might look better
if you remove the box around them.
<style>td img {border:0px;}</style>
FOR
ADVANCED HTML AND CSS HELP WITH THE NEW NEOPETS LAYOUT, SEE MY
FRIEND'S PAGE
Well, Neo really did it this time, didn't they. *sigh* All of the coding above works with normal websites
and with your pet pages, however, you might have problems with some of it on your lookup, shop, etc. For that
I am sorry. I have no control over what Neo does to their site. In any case, a friend of mine has come up with
some great coding help for Neo's new layout. I'll leave the link for you below. =)
|
Copyright © 2006
royaladybug.com All rights reserved.
All Neopets images belong to Neopets and
are
Copyright © 2003 Neopets, Inc. All Rights Reserved. Used With Permission.