Welcome,

guest,

to patrick6357s Morcchhicino's HTML Tutorial! Obviously you wouldn't be here if you didn't want to be. The only way you would be here without wanting to be here is if you were being forced to (such as being hostage or something to that extent). Some of you are probably saying, "Just get on with the point already!" Well, it's very IMPORTANT that you read everything c-A-r-E-f-U-l-L-y so you don't miss anything, especially the Contents at the bottom of the page. The Contents section is EXTREMELY HELPFUL because it allows you to find small sections quickly without having to look through the broad ones.
Another IMPORTANT thing to point out is that this HTML Tutorial was created for Internet Explorer, therefore any other browsers such as Netscape or Firefox may display some things incorrectly or not at all.
Section titles with these symbols near or adjacent to them will be shown incorrectly or not at all with Firefox or Netscape:
(F) = Firefox (2.0.0.2) may display this section incorrectly or not at all | (N) = Netscape (8.1.2) may display this section incorrectly or not at all

Anyway, your probably here because you want to learn HTML. If I am incorrect and you are not being held hostage, then I suggest you leave because all that is here has to do with HTML. If otherwise, I am sorry for the unfortunate circumstance(s).
If your computer won't obey these codes, your computer is messed up!!! *LOL*And finally, to take a test on what you know about HTML either before you look at this tutorial or take it afterwards to test your knowledge on what you learned, click here. (If you see that the test is not there, then it is currently down for maintenance.)

The code for the item will look like this sentence.

Neopets HTML Guide ~ 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

HTML Lesson

Text

Making Text Bold

<b>Bold</b> / <strong>Strong</strong>Bold / Strong

Making Text Underline

<u>Underline</u>Underline

Making Text Italics

<i>Italics</i>

<em>Emphasize</em>Italics / Emphasize

Making "Line-Through/Strike" Text

This section of the tutorial was deleted due to an HTML and stylesheet filter run by Neopets. To learn more about the filter, follow this link.

Making Text Big

<BIG>Text Goes Here</BIG>Your Text

Making Text Small

<SMALL>Text Goes Here</SMALL>Your Text

Aligning Text

Center Alignment

<center>Your Text You Want Centered Goes Here</center>
Your Text You Want Centered Goes Here

Left Alignment

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.<div align=left>Your Text You Want Aligned to the Left Goes Here</div>
Your Text You Want Aligned to the Left Goes Here

Right Alignment

<div align=right>Your Text You Want Aligned to the Right Goes Here</div>
Your Text You Want Aligned to the Right Goes Here

Justify Alignment

<div align="justify">Your Text Goes Here</div>
Once you fill up a whole line, it spaces each word equally so the last word of every line will touch the edge. (You will commonly see books use this alignment) Notice that some of these lines appear to have larger gaps. The longest word in the English language is pneumonoultramicroscopicsilicovolcanoconiosis. Other long words are: Supercalifragilisticexpialidocious, floccinaucinihilipilification, antidisestablishmentarianism, honorificabilitudinitatibus, ethylenediaminetetraacetic acid, uniformitarianism, perspectives, conjunctivitus, comprehensively, pronunciation, astigmatism, nearsightedness, terrestrialness

Text Sizes

Text Size: 1

<font size=1>Text Goes Here</font>Text Goes Here

Text Size: 2

<font size=2>Text Goes Here</font>Text Goes Here

Text Size: 3

<font size=3>Text Goes Here</font>Text Goes Here

Text Size: 4

<font size=4>Text Goes Here</font>Text Goes Here

Text Size: 5

<font size=5>Text Goes Here</font>Text Goes Here

Text Size: 6

<font size=6>Text Goes Here</font>Text Goes Here

Text Size: 7

<font size=7>Text Goes Here</font>Text Goes Here

Backwards Text

Well, in proper HTML terms, this would be called: Bi-Directional Override.<bdo dir="rtl">Your Text Goes Here</bdo>Your Text Goes Here

Having All Text Be One Color

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.)<body text=white>Your Text</body>For the pet lookups, shops, and galleries, use this code: <style>p, table, body{color:white}</style>No Example! It's pretty obvious what's going to show up.

No-Break

This section of the tutorial was deleted due to an HTML and stylesheet filter run by Neopets. To learn more about the filter, follow this link.

Headings

Next Tutorial | Top

H1

<H1>Text Goes Here</H1>

H1 Example Heading

H2

<H2>Text Goes Here</H2>

H2 Example Heading

H3

<H3>Text Goes Here</H3>

H3 Example Heading

H4

<H4>Text Goes Here</H4>

H4 Example Heading

H5

<H5>Text Goes Here</H5>
H5 Example Heading

H6

<H6>Text Goes Here</H6>
H6 Example Heading

Links

Next Tutorial | Top

Creating a Link

<a href=http://neopets.com/>Neopets.com</a>Neopets.com

Non-Underlined Links

<style type="text/css"> A:Link { color:blue;text-decoration:none; } A:Visited { color:blue;text-decoration:none } A:Hover { color:blue;text-decoration:none } </style>Example Link

Creating Hover Effects

Color Changing Hover Effect

<style type="text/css"> A:Link { color:blue; } A:Visited { color:blue; } A:Hover { color:red; } </style>

Example Link

Dotted Underline Hover Effect

<style type="text/css"> A:Link { color:blue;text-decoration:none; } A:Visited { color:blue;text-decoration:none } A:Hover { color:blue;border-bottom:1px dotted red } </style>Example Link

Line-Through/Strike" Hover Effect

<style type="text/css"> A:Link { color:blue;text-decoration:none } A:Visited { color:blue;text-decoration:none } A:Hover { color:blue;text-decoration:line-through; } </style>Example Link

Underline Hover Effect

<style type="text/css"> A:Link { color:blue;text-decoration:none } A:Visited { color:blue;text-decoration:none } A:Hover { color:blue;text-decoration:underline; } </style>Example Link

Overline Hover Effect

<style type="text/css"> A:Link { color:blue;text-decoration:none } A:Visited { color:blue;text-decoration:none } A:Hover { color:blue;text-decoration:overline; } </style>

<style type="text/css"> A:Link { color:blue;text-decoration:none } A:Visited { color:blue;text-decoration:none } A:Hover { color:blue;text-decoration:none;border-top:1px solid blue } </style>Example Link

Underline, Overline, and "Line-Through/Strike" Hover Effect

<style type="text/css"> A:Link { color:blue;text-decoration:none } A:Visited { color:blue;text-decoration:none } A:Hover { color:blue;text-decoration:underline overline line-through; } </style>Example Link

Blur Hover Effect

(F)(N)
<style type="text/css"> A:LINK { color:blue;text-decoration:none } A:VISITED { color:blue;text-decoration:none } A:HOVER {color:red;text-decoration:none;height:0px;filter:blur(add=1,direction=270,strength=20);} </style>Example Link

Border Hover Effect

<style type="text/css"> A:Link { color:blue;text-decoration:none } A:Visited { color: blue;text-decoration:none } A:Hover { color:red;border:1px dashed red; } </style>Example Link

Shifting Hover Effect

<style type="text/css"> A:LINK { color:blue;text-decoration:none } A:VISITED { color:blue;text-decoration:none } A:HOVER { color:gray;text-decoration:none;height:0;position:relative;left:1px;top:1px } </style>Example Link

Highlight Hover Effect

<style type="text/css"> A:LINK { color:blue;text-decoration:none } A:VISITED { color:blue;text-decoration:none } A:HOVER { color:black;text-decoration:none;background-color:white } </style>Example Link

Mirror Image Hover Effect

(F)(N)
<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:red;filter:fliph;height:0; } </style>Example Link

Upside-Down Hover Effect

(F)(N)
<style type=text/css> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:red;filter:flipv;height:0; } </style>Example Link

Bold Hover Effect

<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:blue;text-decoration:none;font-weight:bold } </style>Example Link

Italics Hover Effect

<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:blue;text-decoration:none;font-style:italic } </style>Example Link

Glowing Hover Effect

(F)(N)
<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:blue;text-decoration:none;filter:glow(color=blue,strength=5);height:0 } </style> Example Link

Text-Transform Hover Effects

Uppercase Text-Transform
<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:blue;text-decoration:none;text-transform:uppercase } </style>example link
Lowercase Text-Transform
<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:blue;text-decoration:none;text-transform:lowercase } </style>EXAMPLE LINK
Capitalization Text-Transform
<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:blue;text-decoration:none;text-transform:capitalize } </style>example link

Border Links

Border-Left Hover Effect
<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:red;text-decoration:none;border-left:1px solid red; } </style>Example Link
Border-Right Hover Effect
<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:red;text-decoration:none;border-right:1px solid red; } </style>Example Link

Expantion Hover Effect

<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:red;letter-spacing:3px; } </style>Example Link

Shrinking Hover Effect

<style type="text/css"> A:LINK { color:blue;text-decoration:none; } A:VISITED { color:blue;text-decoration:none; } A:HOVER { color:red;letter-spacing:-3px; } </style>Example Link

Giving Different Links Different Hover Effects

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.)<style type="text/css"> A:LINK.ctt { color:blue;text-decoration:none; } A:VISITED.ctt { color:blue;text-decoration:none; } A:HOVER.ctt { color:blue;text-decoration:none;text-transform:capitalize } A:LINK.glow { color:blue;text-decoration:none; } A:VISITED.glow { color:blue;text-decoration:none; } A:HOVER.glow { color:red;text-decoration:none;filter:glow(color=red,strength=5) } </style>Now, make a link with those classes. (ctt & glow)<a class=ctt href=http://www.neopets.com/>capitalization hover effects</a> | <a class=glow href=http://www.neopets.com/>Glowing Hover Effects</a>capitalization hover effects | Glowing Hover Effects

Anchor Links

For this code, there are actually two parts. The first part is the link to the destination:<a href="#contents">Contents</a>An the second part is the destination:<a name="contents">Contents</a>This is the link to the Contents.

Opening a New Window/Tab with a Link

<a href=http://www.neopets.com/ target=_blank>Neopets.com</a>Neopets.com

Scrollboxes

Next Tutorial | Top

Creating a Scrollbox

<div style="overflow:auto;height:100;width:75">Text...</div>
Text
Text
Text
Text
Text
Text
Text
Text
Text

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

Scrollbars

(F)(N)
Next Tutorial | Top

Scrollbars Covering Whole Screen

(F)(N)
<style> body{scrollbar-face-color:black; scrollbar-shadow-color:white; scrollbar-highlight-color:white; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:black; scrollbar-track-color:black; scrollbar-arrow-color:white} </style>
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right

Scrollbars Covering Your Selected Specific Sections

(F)(N)
There are two ways to do this:


<style>div.awesome{scrollbar-face-color:blue; scrollbar-shadow-color:black; scrollbar-highlight-color:white; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:white; scrollbar-track-color:black; scrollbar-arrow-color:white}</style> <div class=awesome>Text</div>
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right
Look To Right

Mirror Image Text

(F)(N)

Creating Mirror Image Text

(F)(N)
Now this is Mirror Image! You can follow this link for the: Mirror Image Hover Effects!<style type="text/css"> span.cool{filter:fliph;height:0} </style><span class=cool>Your Text Goes Here</span>Your Text Goes Here

Images

Next Tutorial | Top

Uploading Images

<img src=http://images.neopets.com/template_images/luperun_greenL.gif>

Giving an Image Width and Height Commands

<img src=http://images.neopets.com/template_images/luperun_greenL.gif width=90 height=70>

Horizontal Rule

Next Tutorial | Top

Creating a Horizontal Rule

<hr>

Giving a Horizontal Rule Color

<hr color=yellow>

Giving a Horizontal Rule Width Commands

<hr width=50>

Types of Horizontal Rules

Dotted

<hr style="border:dotted">

Dashed

<hr style="border:dashed">

Marquee

Next Tutorial | Top

Creating Marquee

<marquee>Your Text Goes Here</marquee>

<marquee direction=left>Your Text Goes Here</marquee>Your Text Goes Here

Bouncing Marquee

<marquee behavior="alternate">Your Text Goes Here</marquee>Your Text Goes Here

Adding a Background Color to Marquee

<marquee bgcolor=red>Text</marquee>Text

Adding a Background and Font Color to Marquee

<marquee bgcolor="red" style="color:green">Text</marquee>Text

Giving Marquee a Speed Command

You will see that this text will go really fast. Scrollamount is telling how many pixels the marquee will go at a time.<marquee scrollamount=10>Text</marquee>Text

Stopped Marquee

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).<marquee behavior=slide>Text</marquee>Text

Marquee Entering From the Left

<marquee direction=right>Text</marquee>Text

Marquee Entering From the Bottom

<marquee direction="up">Text</marquee>Text

Giving Marquee a Height Command w/ Marquee Entering From the Bottom

<marquee direction="up" height=100>Text</marquee>Text

Giving Marquee a Certain Amount of Loops

(F)(N)
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).<marquee loop="2">Text</marquee>Text

Backgrounds

Remember to place these following background codes at the beginning of all your text. Also remember that you should have no other tags anywhere else on the page. (If necesary, combine the tags together.)

Changing the Background Color

<body bgcolor=black>*pokes background*

Placing a Background Image

<body background=URL>The image *URL will come up tiled.

Fixed Background Image

<body background=URL bgproperties=fixed>The background will be tiled but will remain in the same spot when you scroll down.

Non-Tiled Background Image

<style> body{background:black url('URL') no-repeat bottom right;} </style>Your background image will be put in the bottom right corner, background will be black, and will not be tiled or fixed.

Lists

Next Tutorial | Top

Unordered Lists

<ul> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ul>

Types of Unordered Lists

Type: Circle
<ul type="circle"> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ul>
Type: Square
<ul type="square"> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ul>

Making an Unordered List Colored

Bullets(green) Words(green)
<ul style=color:green> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ul>

Ordered Lists

<ol> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ol>
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item

Different Types of Ordered Lists

Type: 1
You can simply use the regular ordered list for this, but this will teach you how to start at 27.<ol type=1 start=27> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ol>
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: A
<ol type=A> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ol>
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: a
<ol type=a> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ol>
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: I
<ol type=I> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ol>
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: i
<ol type=i> <li>First Item <li>Second Item <li>Third Item <li>Fourth Item </ol>
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item

Definition Lists

This section of the tutorial was deleted due to an HTML and stylesheet filter run by Neopets. To learn more about the filter, follow this link.

Fieldset

Next Tutorial | Top

Creating a Fieldset Around Text

<FIELDSET>Text</FIELDSET>
Text

Creating a Colored Fieldset

<FIELDSET STYLE=border-color:lime>Text</FIELDSET>
Text

Tables

Next Tutorial | Top

Creating a Table

<table>Text</table>Text

Creating a Table with Borders

<table border><tr><td>Text</td></tr></table>

<table border=1><tr><td>Text</td></tr></table>
Text

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

Creating a Table with Colored Borders

(F)(N)
<table border style=border-color:red><tr><td>Text</td></tr></table>
Text

Creating a Table with Collapsed Borders

<table border style=border-collapse:collapse><tr><td>Text</td></tr></table>
Text

Creating a Table with Collapsed Colored Borders

<table border style=border-collapse:collapse;border-color:blue><tr><td>Text</td></tr></table>
Text

Creating a Table with Dotted Borders

<table border style="border:dotted"><tr><td>Text</td></tr></table>
Text

Creating a Table with Dashed Borders

<table border style="border:dashed"><tr><td>Text</td></tr></table>
Text

Creating a Table with Multiple Cells

1 Row - 2 Columns

<table><tr><td>Text</td><td>Text</td></tr></table>
TextText

2 Rows - 1 Column

<table><tr><td>Text</td></tr><tr><td>Text</td></tr></table>
Text
Text

2 Rows - 2 Columns

<table><tr><td>Text</td><td>Text</td></tr><tr><td>Text</td><td>Text</td></tr></table>
TextText
TextText

Top: 1 Row - 1 Column
Bottom: 1 Row - 2 Columns

<table><tr><td colspan=2>Text</td></tr><tr><td>Text</td><td>Text</td></tr></table>
Text
TextText

Cursor

Top

Changing the Cursor to: Crosshair (throughtout)

<style>body{cursor:crosshair}</style>Example in below section

Changing the Cursor to: Crosshair (section)

<span style="cursor:crosshair">Text You Want With the Crosshair Cursor</span>Text You Want With the Crosshair Cursor

Change the Cursor to: Hand (throughout)

<style>body{cursor:hand}</style>Example in below section

Changing the Cursor to: Hand (section)

(F)(N)
<span style="cursor:hand">Text You Want With the Hand Cursor</span>Text You Want With the Hand Cursor

Change the Cursor to: Wait (throughout)

<style>body{cursor:wait}</style>Example in below section

Changing the Cursor to: Wait (section)

<span style="cursor:wait">Text You Want With the Wait Cursor</span>Text You Want With the Wait Cursor

Change the Cursor to: Help (throughout)

<style>body{cursor:help}</style>Example in below section

Changing the Cursor to: Help (section)

<span style="cursor:help">Text You Want With the Help Cursor</span>Text You Want With the Help Cursor

Change the Cursor to: Text (throughout)

<style>body{cursor:text}</style>Example in below section

Changing the Cursor to: Text (section)

<span style="cursor:text">Text You Want With the Text Cursor</span>Text You Want With the Text Cursor

Change the Cursor to: Move (throughout)

<style>body{cursor:move}</style>Example in below section

Changing the Cursor to: Move (section)

<span style="cursor:move">Text You Want With the Move Cursor</span>Text You Want With the Move Cursor

Change the Cursor to: Resize Up (throughout)

<style>body{cursor:n-resize}</style>Example in below section

Changing the Cursor to: Resize Up (section)

<span style="cursor:n-resize">Text You Want With the Resize Up Cursor</span>Text You Want With the Resize Up Cursor

Change the Cursor to: Resize Down (throughout)

<style>body{cursor:s-resize}</style>Example in below section

Changing the Cursor to: Resize Down (section)

<span style="cursor:s-resize">Text You Want With the Resize Down Cursor</span>Text You Want With the Resize Down Cursor

Change the Cursor to: Resize Left (throughout)

<style>body{cursor:w-resize}</style>Example in below section

Changing the Cursor to: Resize Left (section)

<span style="cursor:w-resize">Text You Want With the Resize Left Cursor</span>Text You Want With the Resize Left Cursor

Change the Cursor to: Resize Right (throughout)

<style>body{cursor:e-resize}</style>Example in below section

Changing the Cursor to: Resize Right (section)

<span style="cursor:e-resize">Text You Want With the Resize Right Cursor</span>Text You Want With the Resize Right Cursor

Change the Cursor to: Resize Up & Left (throughout)

<style>body{cursor:nw-resize}</style>Example in below section

Changing the Cursor to: Resize Up & Left (section)

<span style="cursor:nw-resize">Text You Want With the Resize Up & Left Cursor</span>Text You Want With the Resize Up & Left Cursor

Change the Cursor to: Resize Up & Right (throughout)

<style>body{cursor:ne-resize}</style>Example in below section

Changing the Cursor to: Resize Up & Right (section)

<span style="cursor:ne-resize">Text You Want With the Resize Up & Right Cursor</span>Text You Want With the Resize Up & Right Cursor

Change the Cursor to: Resize Down & Left (throughout)

<style>body{cursor:sw-resize}</style>Example in below section

Changing the Cursor to: Resize Down & Left (section)

<span style="cursor:sw-resize">Text You Want With the Resize Down & Left Cursor</span>Text You Want With the Resize Down & Left Cursor

Change the Cursor to: Resize Down & Right (throughout)

<style>body{cursor:se-resize}</style>Example in below section

Changing the Cursor to: Resize Down & Right (section)

<span style="cursor:se-resize">Text You Want With the Resize Down & Right Cursor</span>Text You Want With the Resize Down & Right Cursor

Change the Cursor to: Default (throughout)

<style>body{cursor:default}</style>Example in below section

Changing the Cursor to: Default (section)

<span style="cursor:default">Text You Want With the Default Cursor</span>Text You Want With the Default Cursor

Contact Us

Top

Coming Soon/Eventually!

Links/Buttons

HTML Links/Buttons

My Button


Wizzney's Button

Drop by Why ? Wizzney to have your HTML questions answered

CSShelp's Button


Other Links/Buttons

The Neopian Directory


Counter From: www.boingdragon.com
Counter Started: November 17, 2005
Top

Contents

  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

Top


NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions