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

Bold

/ StrongBold / Strong

Making Text Underline

UnderlineUnderline

Making Text Italics

Italics

EmphasizeItalics

/ 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

Text Goes HereYour Text

Making Text Small

Text Goes HereYour Text

Aligning Text

Center Alignment

Your Text You Want Centered Goes Here
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.

Your Text You Want Aligned to the Left Goes Here
Your Text You Want Aligned to the Left Goes Here

Right Alignment

Your Text You Want Aligned to the Right Goes Here
Your Text You Want Aligned to the Right Goes Here

Justify Alignment

Your Text Goes Here
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

Text Goes HereText Goes Here

Text Size: 2

Text Goes HereText Goes Here

Text Size: 3

Text Goes HereText Goes Here

Text Size: 4

Text Goes HereText Goes Here

Text Size: 5

Text Goes HereText Goes Here

Text Size: 6

Text Goes HereText Goes Here

Text Size: 7

Text Goes HereText Goes Here

Backwards Text

Well, in proper HTML terms, this would be called: Bi-Directional Override.Your Text Goes HereYour 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.)Your TextFor the pet lookups, shops, and galleries, use this code: 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

Text Goes Here

H1 Example Heading

H2

Text Goes Here

H2 Example Heading

H3

Text Goes Here

H3 Example Heading

H4

Text Goes Here

H4 Example Heading

H5

Text Goes Here
H5 Example Heading

H6

Text Goes Here
H6 Example Heading

Links

Next Tutorial | Top

Creating a Link

Neopets.comNeopets.com

Non-Underlined Links

Example Link

Creating Hover Effects

Color Changing Hover Effect

Example Link

Dotted Underline Hover Effect

Example Link

Line-Through/Strike" Hover Effect

Example Link

Underline Hover Effect

Example Link

Overline Hover Effect


Example Link

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

Example Link

Blur Hover Effect

(F)(N)
Example Link

Border Hover Effect

Example Link

Shifting Hover Effect

Example Link

Highlight Hover Effect

Example Link

Mirror Image Hover Effect

(F)(N)
Example Link

Upside-Down Hover Effect

(F)(N)
Example Link

Bold Hover Effect

Example Link

Italics Hover Effect

Example Link

Glowing Hover Effect

(F)(N)
Example Link

Text-Transform Hover Effects

Uppercase Text-Transform
example link
Lowercase Text-Transform
EXAMPLE LINK
Capitalization Text-Transform
example link

Border Links

Border-Left Hover Effect
Example Link
Border-Right Hover Effect
Example Link

Expantion Hover Effect

Example Link

Shrinking Hover Effect

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.)Now, make a link with those classes. (ctt & glow)capitalization hover effects | Glowing Hover Effectscapitalization hover effects | Glowing Hover Effects

Anchor Links

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.

Opening a New Window/Tab with a Link

Neopets.comNeopets.com

Scrollboxes

Next Tutorial | Top

Creating a Scrollbox

Text...
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)
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:


Text
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!Your Text Goes HereYour Text Goes Here

Images

Next Tutorial | Top

Uploading Images

Giving an Image Width and Height Commands

Horizontal Rule

Next Tutorial | Top

Creating a Horizontal Rule



Giving a Horizontal Rule Color



Giving a Horizontal Rule Width Commands



Types of Horizontal Rules

Dotted



Dashed



Marquee

Next Tutorial | Top

Creating Marquee

Your Text Goes Here


Your Text Goes HereYour Text Goes Here

Bouncing Marquee

Your Text Goes HereYour Text Goes Here

Adding a Background Color to Marquee

TextText

Adding a Background and Font Color to Marquee

TextText

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.TextText

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).TextText

Marquee Entering From the Left

TextText

Marquee Entering From the Bottom

TextText

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

TextText

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).TextText

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

*pokes background*

Placing a Background Image

The image *URL will come up tiled.

Fixed Background Image

The background will be tiled but will remain in the same spot when you scroll down.

Non-Tiled Background Image

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

Types of Unordered Lists

Type: Circle
Type: Square

Making an Unordered List Colored

Bullets(green) Words(green)

Ordered Lists

  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
  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.

  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: A
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: a
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: I
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
Type: i
  1. First Item
  2. Second Item
  3. Third Item
  4. Fourth Item
  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

TextText

Creating a Colored Fieldset

TextText

Tables

Next Tutorial | Top

Creating a Table

Text
Text

Creating a Table with Borders

Text

Text
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)
Text
Text

Creating a Table with Collapsed Borders

Text
Text

Creating a Table with Collapsed Colored Borders

Text
Text

Creating a Table with Dotted Borders

Text
Text

Creating a Table with Dashed Borders

Text
Text

Creating a Table with Multiple Cells

1 Row - 2 Columns

Text Text
Text Text

2 Rows - 1 Column

Text
Text
Text
Text

2 Rows - 2 Columns

Text Text
Text Text
Text Text
Text Text

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

Text
Text Text
Text
Text Text

Cursor

Top

Changing the Cursor to: Crosshair (throughtout)

Example in below section

Changing the Cursor to: Crosshair (section)

Text You Want With the Crosshair CursorText You Want With the Crosshair Cursor

Change the Cursor to: Hand (throughout)

Example in below section

Changing the Cursor to: Hand (section)

(F)(N)
Text You Want With the Hand CursorText You Want With the Hand Cursor

Change the Cursor to: Wait (throughout)

Example in below section

Changing the Cursor to: Wait (section)

Text You Want With the Wait CursorText You Want With the Wait Cursor

Change the Cursor to: Help (throughout)

Example in below section

Changing the Cursor to: Help (section)

Text You Want With the Help CursorText You Want With the Help Cursor

Change the Cursor to: Text (throughout)

Example in below section

Changing the Cursor to: Text (section)

Text You Want With the Text CursorText You Want With the Text Cursor

Change the Cursor to: Move (throughout)

Example in below section

Changing the Cursor to: Move (section)

Text You Want With the Move CursorText You Want With the Move Cursor

Change the Cursor to: Resize Up (throughout)

Example in below section

Changing the Cursor to: Resize Up (section)

Text You Want With the Resize Up CursorText You Want With the Resize Up Cursor

Change the Cursor to: Resize Down (throughout)

Example in below section

Changing the Cursor to: Resize Down (section)

Text You Want With the Resize Down CursorText You Want With the Resize Down Cursor

Change the Cursor to: Resize Left (throughout)

Example in below section

Changing the Cursor to: Resize Left (section)

Text You Want With the Resize Left CursorText You Want With the Resize Left Cursor

Change the Cursor to: Resize Right (throughout)

Example in below section

Changing the Cursor to: Resize Right (section)

Text You Want With the Resize Right CursorText You Want With the Resize Right Cursor

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

Example in below section

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

Text You Want With the Resize Up & Left CursorText You Want With the Resize Up & Left Cursor

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

Example in below section

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

Text You Want With the Resize Up & Right CursorText You Want With the Resize Up & Right Cursor

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

Example in below section

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

Text You Want With the Resize Down & Left CursorText You Want With the Resize Down & Left Cursor

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

Example in below section

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

Text You Want With the Resize Down & Right CursorText You Want With the Resize Down & Right Cursor

Change the Cursor to: Default (throughout)

Example in below section

Changing the Cursor to: Default (section)

Text You Want With the Default CursorText 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-2012.
® 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