LINK ME? <a href="http://www.neopets.com/~_sunsh1ne_"><img src="http://9.percent.dark.cocoa.googlepages.com/ghostkerchief.gif/ghostkerchief-full;init:.gif" width=209 height=80 border=2></a> <a href="http://www.neopets.com/~_sunsh1ne_"><img src="http://9.percent.dark.cocoa.googlepages.com/ghostkerchief_christmas1.gif/ghostkerchief_christmas1-full;init:.gif" border=2></a>

Introduction to HTML Have you ever wanted to learn HTML? Well here's a guide to most of the basic stuff! I'll try to actually give an explanation, instead of just giving you a bunch of codes. :) One thing that you always need to remember about HTML, is that whenever there's a starting code, there's an ending code. Such as: <textarea> and </textarea> OR <font color="purple"> and </font> If you want a pet page on neopets, keep in mind that neopets doesn't allow certain codes, bad words/language and links to any other website BUT neopets. Top of Page

FONTS This is a pretty big chapter on fonts, compared to the others. Below are lots of ways to make your text look interesting or to make it your own. There are three major ways you can change your text. Font face = changing the style of the text. Font size = changing the size of the text. Font color = changing the color of the text. If you have any questions feel free to neomail me!! Do you want your text bold? <b>TEXT HERE</b> Do you want your text in italics? <i>TEXT HERE</i> Do you want your text crossed out? <strike>TEXT HERE</strike> Do you want your text underlined? <u>TEXT HERE</u> Do you want your text a different color? EXAMPLE: #FF3300 , #9900FF, #3366CC, etc. Click HERE for a color chart! <font color="YOUR COLOR HERE">TEXT HERE</font> Have you ever wanted your text to be a different SIZE? Font Size 1 Font Size 2 Font Size 3 Font Size 4 Font Size 5 Font Size 6 Font Size 7 Type ANY number you want! I only did it till 7 to give you an idea of the different sizes. <font size="SIZE">TEXT HERE</font> Want to make your text centered? <center>TEXT HERE The next two codes are really simple. "align" just means alignment (where it is). Want to make your text go to the left? <div align="left">TEXT HERE Want to make your text go to the right? <div align="right">TEXT HERE Want to make a break in your sentence? <br> Want to make a paragraph? <p> The difference between <p> and <br> is that breaks simply move your words to the next line, while paragraphs actually skip a line. Just think of paragraphs as double a break. Do you want to change your font face? One font getting too boring for you? Below is a code for changing font types. <font face="TYPE OF FONT">TEXT HERE</font> To use these fonts below, just type in the name of the font (Example: Comic Sans MS) in the code above. But be careful! Sometimes your computer is more updated than someone else's and you can see more fonts than someone else. Choose the more common fonts so everyone that comes to your page can see it. (That's why some of the fonts I put down will appear in default font) If you want more fonts to choose from, go to Microsoft Word or any type of typing/document/writing page and choose fonts from there. Comic Sans MS Courier New Monotype Corsiva Castellar Times New Roman Maiandra GD Impact Top of Page

MARQUEES Have you ever wanted your words to actually move? With the marquee code you can. There are also different variations of marquees. You can make it go up, down, right or left! THE SIMPLE MARQUEE(Just moves from one side to another) <marquee>TEXT HERE</marquee> THE BOUNCY MARQUEE (When it gets to the other side, it bounces back almost like it hit a wall!) <marquee behavior="alternate">TEXT HERE</marquee> For the marquees below, all you have to do it change the direction in the code to make it go different directions. EXAMPLE: To make it go right, type "right". Simple enough, right? :) MARQUEE RIGHTOoh, going the OPPOSITE way! <marquee direction="right">TEXT HERE</marquee> MARQUEE UP Going up, up, and awayyyy!! <marquee direction="right">TEXT HERE</marquee> MARQUEE DOWN Marquee sliding down... <marquee direction="down">TEXT HERE</marquee> MARQUEE WITH A BACKGROUND! This one's coooooooooool! What the "bgcolor" does is fills in something with color. Sometimes it's the background or marquee or table or etc. To change the color of the font, simply use the font code: <font color="COLOR HERE"> TEXT HERE </font> In the code, replace the "COLOR HERE" with the name of a color (Example: purple) Where it says "TEXT HERE", type in what you want the marquee to say. <marquee bgcolor="COLOR HERE">TEXT HERE</marquee> FASTER MARQUEE Scrollamount controls the speed of the marquee. Where it says "20", change it to any number you want. 20 is just the number I put for the marquee above. <marquee scrollamount="50">TEXT HERE</marquee> You can also make your marquee go slower with the scrollamount. The scrollamount for the marquee below is: "2". SLOWER MARQUEE Top of Page

LISTS The simple bulleted list The "ul" starts the bullets. Only put your text after the "li". <ul> <li>TEXT HERE <li>TEXT HERE <li>TEXT HERE </ul> The simple numbered list This list is the same as the bulleted list, except the ul is changed to ol. <ol> <li>TEXT HERE <li>TEXT HERE <li>TEXT HERE </ol> Top of Page

IMAGES The code below is the image code. Where it says somelink.jpg, it means the URL of the picture. <img src="somelink.jpg"> Sizes To adjust the size (width and height) of the picture, just put the size number you want where it says 150. Where it says somelink.jpg, replace it with the image URL. This is a sample picture: <img src="somelink.jpg" width=150 height=150> If I changed the size a little bit, from 150 to 100, then it would look smaller: Borders To add a border to your picture, simply replace the 1 with any number you want and change the somelink.jpg to the URL of the picture you want! <img src="somelink.jpg" border="1"> Here are the sizes of borders you can have: Border Size 1 Border Size 2 Border Size 3 Border Size 4 Border Size 5 Border Size 6 Border Size 7 Top of Page

LINKS The link code will take you to a different place. Below is the simplest link code. Where it says "URL HERE", type in the website you want the link to take you to. Where it says "TEXT HERE", type in what you want the link to actually say. <a href="URL HERE">TEXT HERE</a> An example of a link would be the link below. It'll take you to neopets. Neopets Sometimes you can make a link do something when your mouse is hovering over it! This link says something when your mouse is hovered over it. In the code, where it says: "LINK URL HERE", type in what you want the link to go to. Where it says: "SAYS", type in what you what the link to say when your mouse is hovered over it. Where it says: "TEXT HERE", type in what the link will actually appear as. NEOPETS <a href="LINK URL HERE" target="_blank" title="SAYS">TEXT HERE</a> You can also make a picture link to a different place. The picture code is provided below. Simply replace the: "somelink.jpg" in the picture code to the URL of the picture you want. Where it says: "URL HERE", type the URL of the website you want the link to go to. <a href="URL HERE"><img src="somelink.jpg"></a> Below is a picture with a link to neopets: Anchoring Links Have you ever heard of 'anchoring links'? Anchoring Links means to make a link to somewhere else on that same page. It's useful for people who have long pages with lots of content. There are two steps to anchoring links. One, you put the code below where you want the actual link to be. Where it says: "TEXT HERE", type what you want the link you say. <a href="#KEYWORD">TEXT HERE</a> Step two, put the code below where you want to link to go to. Think of it as a bridge. You need two parts to make the whole anchor link. Where it said: "KEYWORD" in the code above, it means a word that will let the computer find where to link it to. If I said, "Icons" in the code above, then I would have to put, "Icons" in the code below. P.S. Remember! Keywords can only be one word long! <a name="KEYWORD"> Want an example? Check out the table of contents at the top of the page

Making Lines Want a simple dividing line? Like that? <HR> Want to make the line colorful? Where it says: "YOUR COLOR HERE" in the code, type in the color you want the line to be. <HR color="YOUR COLOR HERE"> Want a thicker line? Or maybe a shorter line? Adjust the line yourself. Width means how long the line is, color means what color, and size means how thick the line is. The code below is the code for the purple line. <HR width="100" color="purple" size="10"> Top of Page

Text Boxes When you use this code on neopets, for some reason, the </TEXTAREA> and all of the codes after it will vanish every time you try to edit your pet page. So what I do is... 1. Go to your petpage (not the editing page, the REAL website). 2. Click View and scroll down to Page Source. 3. An HTML version of your pet page will pop up in another window. Copy/Paste the part of your website that you lost. :) The simple text box! CODE: <text-area>TEXT HERE</text-area> Want it to scroll? Type more! TEXT TEXT TEXT TEXT TEXT TEXT TEXT Want a bigger text box? TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT CODE: P.S. The rows and cols in the code, control how big the text box is. Adjust them if you would like to. <text-area rows=5 cols=40> TEXT HERE</text-area> Top of Page

CURSORS This cursor, the crosshair cursor, makes your cursor change to this: + when hovering over a certain link/section/word. The: "TEXT HERE" tells the cursor to change when it is hovered over it. Change the: "TEXT HERE" to anything you want. <span style="cursor:crosshair">TEXT HERE</span> To change the cursor, not just for a section, but the whole page, use this link. <style>body{cursor:crosshair}</style> Top of Page

BACKGROUNDS (Want some backgrounds? Check out my backgrounds page!) Backgrounds can be images. The images/backgrounds can be tiled, non-tiled, or fixed. TILED BACKGROUND Where it says: "URL HERE", type the URL of the image that you want to be your background. <body background="URL HERE"> NON-TILED BACKGROUND Where it says: "URL HERE", type the URL of the image that you want to be your background. <style>#main {background:url(URL HERE) fixed}</style> BACKGROUND AT LOWER RIGHT CORNER Where it says: "URL HERE", type the URL of the image that you want to be your background. <style> body{background:white url('Your Background URL Here') no-repeat fixed right bottom;} </style> Top of Page

Color Chart Top of Page