HTML Guide

This is a short HTML guide for you to use in forums and on your homepages! If you need help building a full layout for your homepage, please see our Layout Generator.

This guide is tailored to the needs of HP, but it can be used anywhere on the internet that supports HTML code. Just copy and paste the codes below. Make sure to change any filler wording/numbers to the correct ones.

Move down one line (Enter/Return)

    <br>
  
Page Break

    <hr>
  
For example:

Link

    <a href='URL WHERE YOU WANT LINK TO GO HERE'>WHAT YOU WANT LINK TO SAY HERE</a>
  
For example: This link goes to my homepage.

Post an Image

    <img src='IMAGE URL HERE'>
  
Note that you need the image URL to be directly to the image not to a page that the image is on, so the URL should end in .jpg, png, or .gif, otherwise it won't show up! You can find the direct link to an image by right-clicking on it and clicking "Copy Image Address".

Change Image Size

To change height (the width will adjust proportionally):
     <img src='IMAGE URL HERE' height=1000>
  
To change width (the height will adjust proportionally):
     <img src='IMAGE URL HERE' width=1000>
  
To change both (this may distort your image):
    <img src='IMAGE URL HERE' width=1000 height=1000>
  
Change the number 1000 to the number of pixels you want the image to be. This works best to make images smaller, but you can also make them larger this way. Making an image larger might make it blurry.

Link within an Image

    <a href='URL WHERE YOU WANT LINK TO GO HERE'><img src='IMAGE URL HERE'></a>
  
This is for when you want someone to be able to go to another page by clicking on an image.

Bold

    <b>Words you want bolded here</b>
  
For example: This is bold.

Italics

    <i>Words you want italicized here</i>
  
For example: This is italics.

Underline

    <u>Words you want underlined here</u>
  
For example: This is underlined.

Strikethrough

    <s>Words you want to strike through</s>
  
For example: This is struckthrough.

Heading 2

    <h2>Heading Name Here</h2>
  
For example:

This is heading 2



Heading 3

    <h3>Heading Name Here</h3>
  
For example:

This is heading 3



Heading 4 / Cursive Font

    <h4>Heading Name Here</h4>
  
For example:

This is heading 4



Bullet Points

    <li>
  
For example:


  • Bulleted List

        <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <ol>Optional Sub-Item 1</ol>
    <ol>Optional Sub-Item 2</ol>
    <li>Item 3</li>
    <li>Item 4</li>
    </ul>
    For example:

    • Horse
    • Dog
      1. Labrador Retriever
        Dachshund
    • Cat
    • Dwarf Hamster


    Center Text

        <center>Your text here.</center>
      
    You can also use the <center> tag around images or for your whole page.

    For example:
    This text is centered.


    Font Size

        <font size=1>Your text here.</font>
      
    You can change the font size number from 1-7.
    This is size 1.
    This is size 2.
    This is size 3.
    This is size 4.
    This is size 5.
    This is size 6.
    This is size 7.


    Font Color

        <font color="#HEXCODE">Your text here.</font>
      
    Make sure you always have # in front of your color hex codes or they wont work.

    Here are some common color hex codes:
    White: #FFFFFF
    Black: #000000
    Dark Green: #008000
    Lime Green: #00FF00
    Light Blue: #00FFFF
    Blue: #0000FF
    Navy: #000080
    Purple: #800080
    Lavender: #D7BDE2
    Red: #FF0000
    Pink: #FF00FF
    Yellow: #FFFF00
    Orange: #F39C12
    Gray: #808080
    Brown: #873600


    Font Color and Size

        <font color=#HEXCODE size=SIZE>Your text here.</font>
      
    Comments

        <!--This is a comment.-->
      
    This is for when you want to write something in your page's coding that you don't want to show up on the page itself. For example, to remind yourself that a certain part of your layout code can be changed in a certain way, or to denote different sections of the code.