Basic HTML

Ever wanted to be a website pro and make a cool site like Animal Palace? Or maybe something different, but you can still use this knowledge for any website out there!

Italic Text

<I> YOUR TEXT </I>

Bold Text

<B> YOUR TEXT </B>

Underlined Text

<U> YOUR TEXT </U>

Striked-through Text

<S> YOUR TEXT </S> or <strike> YOUR TEXT </strike>

Big Text or Small Text

Change the "#" symbol to any whole number between 1 and 7 (seven being the biggest, 1 being the smallest)

<font size="#"> YOUR TEXT </font>

C O L O R F U L Text

Change "COLOR" to whatever color you want. Use either a hexadecimal code or a regular word for a color.

<font color="COLOR"> YOUR TEXT </font>

Different Font Faces

You can change the "face" of your font with the following code. Change "FACE" to whichever font you would like!
Here are some great fonts you can use! If they do not appear different to you, then you don't have them downloaded. You can go to dafont to get a few! And just so you know, sometimes you may have a font but it does not show up on the computer. It may be your settings or the font itself.

• Papyrus
• Times
• Palatino
• Mistral
• Herculanum
• Arial
• Helvetica
• Comic Sans MS
• Soopafresh
• Angelica
• Impact
• Scriptina
• Century Gothic
• Century
• Visitor TT1 BRK
• Vitamin
• Vampire
• uncletypewriter
• Trubble
• Tigger
• Tahoma
• Stencil
• Skia
• Silom
• Silkscreen
• Redensek
• Inkburrow
• Powerpuff
• Playbill
• Paskowy
• Oogieboogie
• Onyx
• Moonstar
• Monaco
• Incantation
• Beyond Wonderland

And that's enough for now. Now for the actual CODE. Replace "FACE" with whichever you pick -- or another one that you would like!

<font face="FACE">YOUR TEXT HERE</font>

You can combine all the font codes to get a cool font like

THIS!

Just use the following code, and edit it like you learned above! You want it bold or italic or one of those, just put those inside where it says YOUR TEXT HERE. You can add as many as you would like!

<font face="FACE" color="COLOR" size="SIZE">YOUR TEXT HERE</font>

Textareas

Do you want a box like this? It shows your code and stuff, so whatever is inside is just the plain old, regular stuff. That's great for if you have a site and you want people to be able to copy your codes! The code for a textarea like this is below.

<textarea> YOUR TEXT HERE

Add a

</textarea> to the end of that code. Sorry it doesn't show up in the textarea box! The computer just thinks it's closing the whole text area.

If you want the textarea to show up on your petpage, use the below code!

<text_area> YOUR TEXT HERE </text_area>

If you want something to show up like this (being not in a textarea, so that you can have code show up on your page without it doing anything) then use the example code!

<xmp> YOUR TEXT HERE </xmp>

Do you want scrolling text like this? It's called a marquee! Just use the code below to make your own scrolling text! Woo hoo!

<marquee> YOUR TEXT HERE </marquee>

Ok so how about a shorter marquee like this? That would be nice. Just take the code below and replace 300 with the width that you want your marquee!

<marquee width="300"> YOUR TEXT HERE </marquee>

This marquee has a cool background color. That would be great too! Use the code below! Just replace "COLOR" with whatever color you would like to use!

<marquee bgcolor="COLOR"> YOUR TEXT HERE </marquee>

Ok do you want a super speedy marquee like this? Wow! This is fast! Just use the code below! Make the number 25 higher if you want it EVEN FASTER or lower if you want it SLOWER.

<marquee scrollamount="25"> YOUR TEXT HERE </marquee>

Oh dear this is veeeeeeeeerrrrrry slooooooooooooooow. If you want a marquee like this, use the code below. Make the number 1 higher if you want it faster, or lower if you want it eeeeevvvvvveeeeeeen slllllllllloooooooooooowwwwwwwwweeeeeeeeerrrrrrr.

<marquee scrollamount="1"> YOUR TEXT HERE </marquee>

Oh my goodness! It's going the other way! How interesting...the code below can do that for you!

<marquee direction="right"> YOUR TEXT HERE </marquee>

Oooh...bouncy!! Yay! Make a bouncy marquee like this with the code below!

<marquee behavior="alternate"> YOUR TEXT HERE

Haha! I scroll up! This looks like credits, doesn't it? Yep, that would be a good use...use the code below! Change 200 to your desired width, and 100 to your desired height!

<marquee direction="up" width="200" height="100"> YOUR TEXT HERE </marquee>

What the..?!? I'm going down!! Aaah! Use the code below! Change 200 to your desired width, and 100 to your desired height!

<marquee direction="down" width="200" height="100"> YOUR TEXT HERE </marquee>

Just like the fonts, you can combine the codes to make one super cool marquee! You can also add in font codes and codes like that!

Do you want an image to show up like that? Here's how.
If your image is on your computer (like the hard drive or desktop):

1. Upload to somewhere like photobucket.com, tinypic.com, imageshack.us, or somewhere like that.
2. Copy the URL they give you. Tinypic will call it the URL for layouts, Photobucket will call it the URL Link, and ImageShack will call it Direct Link to Image.
3. Follow the steps below for if you have already uploaded it.

If you have already uploaded the image or it is from somewhere on the internet(i.e. a neopets fun image or one of our icons):

1. Use the code below and paste it wherever you want it.
2. Replace "IMAGE URL HERE" with the URL you were given for your image, or that you already have. If it is already on the internet and you did not upload it, then right click the image and select "Copy Image Location". Please make sure that the owner of this image does not mind you using it elsewhere first!
3. Enjoy your image!

<img src="IMAGE URL HERE">

Use the code below to give your image a thin border like the one above. Change IMAGE URL HERE to your image's URL, and you can change 1 to however thick you want the border.

<img src="IMAGE URL HERE" border="1">

Give your image a really thick border like the one above! Change IMAGE URL HERE to the URL of your image, and change 10 to however thick you want it.

<img src="IMAGE URL HERE" border="10">

Give your page a cool background like this! Use the code below to add a background to your whole page! Just so you know yours will show up on the whole page. Mine only shows up in this part because I used a table to do that. Change IMAGE URL HERE to the URL of the image you are using for your background!

<body background="IMAGE URL HERE">

What to change the dimensions of your image around? Then just use the code below! Change 200 to how tall you want your image, and 350 to how wide! If you want the proportions to remain the same, then just use one or the other! Change IMAGE URL HERE to the URL of the image that you want to change the dimensions of!

<img src="IMAGE URL HERE" height="200" width="350">

You can also make images smaller. Just change 25 in the code below to your desired width. You can always use the code above too ;) Like always, change IMAGE URL HERE to the URL of your desired image!

<img src="IMAGE URL HERE" width="25">

Ok so here's how to make your background just a nice plain color, instead of the insane images that I showed you up there. This is nice because you don't even have to make an image! Just use the code below to do something like this. Replace COLOR with the color you want! Oh, and why mine doesn't cover the whole page is because it is only the background for this table here. Yours WILL be the background color for the whole page!

<body bgcolor="COLOR">

I link to Arid Seas!

If you click the above link, it will take you straight to animalpalace.org. Use the code below to create your own link! Change WEBSITE URL to the URL of the page that you want people to go to when they click the link. Change YOUR TEXT HERE to what you want it to show (like how above it says "I link to Animal Palace!")

<a href="WEBSITE URL">YOUR TEXT HERE</a>

I link to Arid Seas!

If you click the above link, it will take you straight to animalpalace.org, except this time it will open in a new window! Use the code below to create your own link! Change WEBSITE URL to the URL of the page that you want people to go to when they click the link. Change YOUR TEXT HERE to what you want it to show (like how above it says "I link to Animal Palace!")

<a href="WEBSITE URL">YOUR TEXT HERE</a>

EMAIL ME!

If you click the link above, you will be able to email us. Use the code below. Change EMAIL to your email address and YOUR TEXT HERE to what you want it to say (like how ours says "EMAIL ME!")

<a href="mailto:EMAIL">YOUR TEXT HERE</a>

Was this guide helpful?

If you click the link above, you will be able to email us with the title "Was this guide helpful?". Use the code below to make your own link! Change EMAIL to your email address, SUBJECT to the subject that you want, and YOUR TEXT HERE to what you want people to click (Like how we have "Was this guide helpful?")

<a href="mailto:EMAIL?subject=SUBJECT">YOUR TEXT HERE</a>

• Wow!
• This makes a neat list, doesn't it?
• Wouldn't it be nice to have this, so that everything's in order?
• Well then, just use the code below!
• Just replace YOUR TEXT HERE with your text!
• And you can add the 2nd line as many times as you want in order to make your list as long as you need!

<ul> <li>YOUR TEXT HERE </ul>

1. Aaah...
2. This list is great!
3. It numbers FOR YOU!
4. Yippee!
5. Just copy the code below
6. and add the second line as many times as you need to make your code
7. as long as you want!

<ol> <li>YOUR TEXT HERE </ol>

*stretches* Ah well, that ought to be enough code for now. If you're still not satisfied, check out our other coding guides! Don't worry -- we'll add to this guide pretty often so make sure to check back!