HTML Help

This page contains explanations on the very basics of HTML..
Feel free to bookmark it and use it whenever you need help, or just for a reference.

Links to navigate the page:

Text Styles | Formatting | Links | Images | Backgrounds | Scrollbars | Borders | Scrolling Divs | DropDown Lists

Text Styles

Bold Text = <b>Bold Text</b>

Italic Text = <i>Italic Text</i>

Underlined Text = <u>Underlined Text</u>

~~Striked-Out Text~~ = <strike>Striked-Out Text</strike>

_{Sub Script}Text = <sub>Sub Script</sub> Text

^{Super Script}Text = <sup>Super Script</sup> Text

Typewriter Text = <tt>Typewriter Text</tt>

• To use a combination of them, eg. Bold&Italic = <b><i>Bold&Italic</i></b>

• To change the color of your text, use <font color="#color code here">.
eg: Pink Text = <font color="#FF3399">Pink Text</font>
Click here for the color codes to use for your text.
You can also use the name of a color, eg: Pink = <font color="pink">Pink</font>

• To change the size of your text, use <font size="size number here">.
eg: Sized 3 Text = <font size="3">Sized 3 Text</font>

There are 7 font sizes: 1 2 3 4 5 6 7

• To change the font of your text, use <font face="font name here">.
eg: Georgia = <font face="Georgia">Georgia</font>
Names of popular fonts: Arial, Arial black, Book Antiqua, Century Gothic, Courier new, Garamound, Georgia, Impact, Lucida Console, Monotype Corsiva, Small Fonts, Tahoma, Times New Roman, Trebuchet Ms, Verdana.

• To make your text spaced out or cramped together,
eg. Spaced Out (2px) = <font style="letter-spacing:2px">Spaced Out</font>
Cramped (-1px) = <font style="letter-spacing:-1px">Cramped Together</font> Change the 'px' to any number... but it's best to keep it small so the text is readable.

• To add a background color to your text, use <font style="background-color: #color code here">.
eg. Light Grey Background
= <font style="background-color: #f8f8f8">Light Grey Background</font>
To make the background color span the width of the text area, add "display: block" to the code, eg. Light Grey Wide Background = <font style="background-color: #f8f8f8; display: block">Light Grey Wide Background</font>
Centering this can look good to use as a heading, add "text-align: center" to the code, eg. Light Grey Wide Background Centered = <font style="background-color: #f8f8f8; display: block; text-align: center">Light Grey Wide Background Centered</font>

• Popular special characters to use in text:

♥ = &hearts;	· = ·	© = ©	® = ®	« = &laquo
» = »	º = º	™ = ™	† = &dagger;

Formatting

• To make text or images start on a new line, use "<br>"... the number of "<br>"s you use will determine the number of blank lines.

• For extra horizontal spaces between text or images, use " "
eg: Spaced &nbsp Out &nbsp Text = Spaced   Out   Text. The number of " "s determines the amount of space.

• To center text or images, wrap them around "<center>" tags. eg: Centered Text = <center>Centered Text</center>

• To align text or images to the right, wrap them around "<p align="right">" tags. eg:

Right-Aligned Text

= <p align="right">Right-Aligned Text</p>

• To align text or images to the left, wrap them around "<p align="left">" tags. eg:

Left-Aligned Text

= <p align="left">Left-Aligned Text</p>

• For scrolling text or images, wrap them around "<marquee>" tags. text eg: Scrolling Text = <marquee>Scrolling Text<marquee>
image eg:

= <marquee><img src="image url here"><marquee>

• To create bulleted lists: eg.

List Item 1
List Item 2
List Item 3

= <ul> <li>List Item 1 <li>List Item 2 <li>List Item 3 </ul>

Links

• To create a link, use <a href="url here">Link Name</a>

• If you want the link to open in a new window, add "target=_blank" to the code. eg. <a href="url here" target="_blank">Link Name</a>

• To create an "email me" link, use:
<a href="mailto:youremailaddress@whatever.com">E-mail me</a>
When this link is clicked on, it opens the person's email program with your email address already filled in the "To" field.

Images

Go to Imageshack.us, follow the instructions to upload your image, and use the "direct link" for your image url in the following codes.

• To display an image, put the url an <img> tag,
= <img src="image url here">

• To turn the image into a clickable link, wrap it in <a href=""> tags,
eg.<a href="url here"><img src="image url here" border=0></a>

• To wrap text around an image, add align="left or right", depending on which side you want the image to be.
eg. <img src="image url here" align="left"> = image to your left

Backgrounds

• To change the background color of the page, use:
<style> body {background-color: #color code here}</style>

• To apply a background image, use the code below as a reference:
<style> body {
background-image: url ('*image url here*');
background-repeat: repeat *tiled background* or no-repeat *single image background*;
background-attachment: fixed *background doesn't move when page is scrolled* or scroll *background scrolls*; }</style>

eg: <style> body {
background-image: url ('image url');
background-repeat: repeat;
background-attachment: fixed; }</style>

Scrollbars

Colored scrollbars can only be seen in Internet Explorer, those who use other browsers (eg Firefox) will see their default browser color.
Use the image below as a reference, and choose some color codes for each part of your scrollbar. The following code is for the main page scrollbar.

Borders

To add a border to text, images, or divs, use the following code as a reference.

style=" border-style: solid , dotted , dashed , double or groove (style of the line)
border-width: 1px or 2px or 3px, etc. (thickness of the border)
border-color: #color code here (get codes here) "

Put the above code within the tag of whatever you want the border on, eg.
<img style="border-style: solid; border-width: 1px; border-color: #000000" src="image url here">

scrolling divs

To make a div box which will scroll, use the following code, using the above scrollbar and border styles as references (or grab a premade one).

<div style="
height: 200px; *height in pixels*
width: 100px; *width in pixels*
overflow: auto; *this tells it to scroll*
border-color: #color code;
border-style: #color code;
border-width: #color code;
scrollbar-arrow-color: #color code;
scrollbar-track-color: #color code;
scrollbar-face-color: #color code;
scrollbar-highlight-color: #color code;
scrollbar-darkshadow-color: #color code;
scrollbar-3dlight-color:#color code;
scrollbar-shadow-color: #color code;">
Your content goes here. </div>

eg. This is a simple scrolling div with no custom scrollbar, and a 1px black border.

Your content goes here.

code = <div style="width: 200px; height: 100px; overflow: auto; border-color: #000000; border-style: solid; border-width: 1px;">Your content goes here. Keep writing until the scrollbar appear... </div>

Use the following code as a reference:
<select style="
width: 200px; *width in pixels*
background-color: #color code;
color: #color code;
font-family: font name;
font-size: 9px; ">
<option>List Item 1</option>
<option>List Item 2</option>
<option>List Item 3</option>
<option>List Item 4</option></select>

eg.

code = <select style=" width: 200px; background-color: pink; color: #000000; font-family: verdana; font-size: 9px; "> <option>List Item 1</option> <option>List Item 2</option> <option>List Item 3</option> <option>List Item 4</option></select>