~ A good resource with HTML code for Neopets

Quick Reference

- Text
- Headings
- Links
- Scrollboxes
- Scrollbars
- Mirror Image Text
- Images
- Horizontal Rule
- Marquee
- Backgrounds
- Lists
- Fieldset
- Tables
- Cursor 

---

- Contact Us
- Coming Soon!
- Links/Buttons
- Contents

/ StrongBold / Strong

Making Text Underline

UnderlineUnderline

Making Text Italics

/ Emphasize

Making "Line-Through/Strike" Text

.

Text Goes HereYour Text

If your text isn't already aligned otherwise, you don't have to put any tags around the text you want aligned to the left.

Well, in proper HTML terms, this would be called: Bi-Directional Override.Your Text Goes HereYour Text Goes Here

This next code should work for everything except shops, galleries, and pet lookups. If those are not the only pages that the next code will not work on please tell me. (link on Contact Us) Remember that you should have no other "body" tags anywhere else on the page. (If necessary, combine the tags together.)Your TextFor the pet lookups, shops, and galleries, use this code: No Example! It's pretty obvious what's going to show up.

.

Headings

Text Goes Here

H1 Example Heading

Text Goes Here

H3 Example Heading

Text Goes Here

H5 Example Heading

Text Goes Here

H6 Example Heading

Neopets.comNeopets.com

Example Link

This enables you to have different links side by side to have different hover effects. The code below will work for Capitalization Hover Effects & Glowing Hover Effects. (You can have different classes besides: ctt & glow. Those are just what I used.)Now, make a link with those classes. (ctt & glow)capitalization hover effects | Glowing Hover Effectscapitalization hover effects | Glowing Hover Effects

For this code, there are actually two parts. The first part is the link to the destination:ContentsAn the second part is the destination:ContentsThis is the link to the Contents.

The set height for this example is 100 pixels and the width is 75 pixels. You may alter them.

There are two ways to do this:

<div style="">Text</div>

Now this is Mirror Image! You can follow this link for the: Mirror Image Hover Effects!Your Text Goes HereYour Text Goes Here

Your Text Goes Here

Your Text Goes HereYour Text Goes Here

Your Text Goes HereYour Text Goes Here

TextText

TextText

You will see that this text will go really fast. Scrollamount is telling how many pixels the marquee will go at a time.TextText

If you were to miss the action on of this marquee, refresh here and now. Or just trust me on this matter that it works(for me atleast).TextText

TextText

TextText

TextText

If you were to miss the action of this marquee, refresh here and now. Or just trust me on this matter that it works(for me atleast).TextText

• First Item
• Second Item
• Third Item
• Fourth Item

• First Item
• Second Item
• Third Item
• Fourth Item

• First Item
• Second Item
• Third Item
• Fourth Item

• First Item
• Second Item
• Third Item
• Fourth Item

• First Item
• Second Item
• Third Item
• Fourth Item

• First Item
• Second Item
• Third Item
• Fourth Item

• First Item
• Second Item
• Third Item
• Fourth Item

• First Item
• Second Item
• Third Item
• Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

You can simply use the regular ordered list for this, but this will teach you how to start at 27.

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

1. First Item
2. Second Item
3. Third Item
4. Fourth Item

.

TextText

TextText

Tables

If you used the "...border=1..." to make the border for the table, you can increase the number so the border becomes thicker.

• If you have any questions, please contact me here.
• If you would like to add something to this HTML page, be welcome to Neomail me your request(s) at the link above.
• If the code(s) don't do what they are supposed to do, please Neomail me about the problem you are having.

Counter Started: November 17, 2005
Top

1. Text
   1. Making Text Bold
   2. Making Text Underline
   3. Making Text Italics
   4. Making "Line-Through/Strike" Text
   5. Making Text Big
   6. Making Text Small
   7. Aligning Text
      1. Center Alignment
      2. Left Alignment
      3. Right Alignment
      4. Justify Alignment
   8. Text Sizes
      1. Text Size: 1
      2. Text Size: 2
      3. Text Size: 3
      4. Text Size: 4
      5. Text Size: 5
      6. Text Size: 6
      7. Text Size: 7
   9. Backwards Text
   10. Having All Text Be One Color
   11. No-Break
2. Headings
   1. H1
   2. H2
   3. H3
   4. H4
   5. H5
   6. H6
3. Links
   1. Creating A Link
   2. Non-Underlined Links
   3. Creating Hover Effects
      1. Color Changing Hover Effect
      2. Dotted Underline Hover Effect
      3. Line-Through/Strike" Hover Effect
      4. Underline Hover Effect
      5. Overline Hover Effect
      6. Underline, Overline, and "Line-Through/Strike" Hover Effect
      7. Blur Hover Effect(F)(N)
      8. Border Hover Effect
      9. Shifting Hover Effect
      10. Highlight Hover Effect
      11. Mirror Image Hover Effect(F)(N)
      12. Upside-Down Hover Effect(F)(N)
      13. Bold Hover Effect
      14. Italics Hover Effect
      15. Glowing Hover Effect(F)(N)
      16. Text Transform Hover Effects
          1. Uppercase Text-Transform
          2. Lowercase Text-Transform
          3. Capitalization Text-Transform
      17. Border Links
          1. Border-Left Hover Effect
          2. Border-Right Hover Effect
      18. Expantion Hover Effect
      19. Shrinking Hover Effect
   4. Giving Different Links Different Hover Effects
   5. Anchor Links
   6. Opening a New Window/Tab with a Link
4. Scrollboxes
   1. Creating a Scrollbox
5. Scrollbars(F)(N)
   1. Scrollbars Covering Whole Screen(F)(N)
   2. Scrollbars Covering Your Selected Specific Sections(F)(N)
6. Mirror Image Text(F)(N)
   1. Creating Mirror Image Text(F)(N)
7. Images
   1. Uploading Images
   2. Giving an Image Width and Height Commands
8. Horizontal Rule
   1. Creating a Horizontal Rule
   2. Giving a Horizontal Rule Color
   3. Giving a Horizontal Rule Width Commands
   4. Types of Horizontal Rules
      1. Dotted
      2. Dashed
9. Marquee
   1. Creating Marquee
   2. Bouncing Marquee
   3. Adding a Background Color to Marquee
   4. Adding a Background and Font Color to Marquee
   5. Giving Marquee a Speed Command
   6. Stopped Marquee
   7. Marquee Entering From the Left
   8. Marquee Entering From the Bottom
   9. Giving Marquee a Height Command w/ Marquee Entering From the Bottom
   10. Giving Marquee a Certain Amount of Loops(F)(N)
10. Backgrounds
    1. Changing the Background Color
    2. Placing a Background Image
    3. Fixed Background Image
    4. Non-Tiled Background Image
11. Lists
    1. Unordered Lists
       1. Types of Unordered Lists
          1. Type: Circle
          2. Type: Square
       2. Making an Unordered List Colored
          1. Bullets(green) Words(green)
    2. Ordered Lists
       1. Different Types of Ordered Lists
          1. Type: 1
          2. Type: A
          3. Type: a
          4. Type: I
          5. Type: i
    3. Definition Lists
12. Fieldset
    1. Creating a Fieldset Around Text
    2. Creating a Colored Fieldset
13. Tables
    1. Creating a Table
    2. Creating a Table with Borders
       1. Creating a Table with Colored Borders(F)(N)
    3. Creating a Table with Collapsed Borders
       1. Creating a Table with Collapsed Colored Borders
    4. Creating a Table with Dotted Borders
    5. Creating a Table with Dashed Borders
    6. Creating a Table with Multiple Cells
       1. 1 Row - 2 Columns
       2. 2 Rows - 1 Column
       3. 2 Rows - 2 Columns
       4. Top: 1 Row - 1 Column
          Bottom: 1 Row - 2 Columns
14. Cursor
    1. Changing the Cursor to: Crosshair (throughtout)
    2. Changing the Cursor to: Crosshair (section)
    3. Change the Cursor to: Hand (throughout)
    4. Change the Cursor to: Hand (section)
    5. Change the Cursor to: Wait (throughout)
    6. Changing the Cursor to: Wait (section)
    7. Change the Cursor to: Help (throughout)
    8. Changing the Cursor to: Help (section)
    9. Change the Cursor to: Text (throughout)
    10. Changing the Cursor to: Text (section)
    11. Change the Cursor to: Move (throughout)
    12. Changing the Cursor to: Move (section)
    13. Change the Cursor to: Resize Up (throughout)
    14. Changing the Cursor to: Resize Up (section)
    15. Change the Cursor to: Resize Down (throughout)
    16. Changing the Cursor to: Resize Down (section)
    17. Change the Cursor to: Resize Left (throughout)
    18. Changing the Cursor to: Resize Left (section)
    19. Change the Cursor to: Resize Right (throughout)
    20. Changing the Cursor to: Resize Right (section)
    21. Change the Cursor to: Resize Up & Left (throughout)
    22. Changing the Cursor to: Resize Up & Left (section)
    23. Change the Cursor to: Resize Up & Right (throughout)
    24. Changing the Cursor to: Resize Up & Right (section)
    25. Change the Cursor to: Resize Down & Left (throughout)
    26. Changing the Cursor to: Resize Down & Left (section)
    27. Change the Cursor to: Resize Down & Right (throughout)
    28. Changing the Cursor to: Resize Down & Right (section)
    29. Change the Cursor to: Default (throughout)
    30. Changing the Cursor to: Default (section)
15. Contact Us
16. Coming Soon/Eventually
17. Links/Buttons
    1. HTML Links/Buttons
       1. My Button
       2. Wizzney's Button
       3. csshelp's Button
    2. Other Links/Buttons
       1. The Neopian Directory