Welcome to the HTML tutorial page I hope you find this useful

If You Need A Loan Look No Further!

Dream&Win

Visit Our Sponsor!

Guestbook - Amazon Shop - Pixels Home - Contact - Ebooks

Basic HTML

Ever wondered how people change the appearance of their text?

To practice using HTML Click here

It's by using Hypertext Markup Language(HTML) and it is easier than it sounds. Some simple tags to get you started:

Want to FTP your site to your host?
Click here








Trust 1&1 Internet for your domain name registration, from only £1.99/year!. Check now!

 

Free Visual HTML Editor
Free HTML Editor

Command Altered text (examples)
<B>Text here</B> Bold text
<I>Text here</I> Italic text
<BIG>Text here</BIG> Bigger text
<STRIKE>Text here</STRIKE> Line through text
<U>Text here</U> Underlined text
<KBD>Text here</KBD> Keyboard text
<SUB>Text here</SUB> Lower text
<SUP>Text here</SUP> Higher text
<STRONG>Text here</STRONG> Strong text
<SMALL>Text here</SMALL> Smaller text
<P>

Starts a new paragraph

<BR>

Starts a new line

<P ALIGN=left>Text here</ALIGN>

Left aligned text

<P ALIGN=center>Text here</ALIGN>

Central aligned text

<P ALIGN=right>Text here</ALIGN>

Right aligned text

Please note: all commands may not work, depending on the internet browser you are using
For more commands Click here

Changing font type
Command Changes font to:(examples)
<FONT FACE=COURIER>Text here</FONT> Courier font
<FONT FACE=ALGERIAN>Text here</FONT> Algerian font
<FONT FACE=GARAMOND>Text here</FONT> Garamond font
<FONT FACE=ARIAL>Text here</FONT> Arial font
<FONT FACE=MODERN>Text here</FONT> Modern font
Please note: all fonts may not work, depending whether the person viewing
the font has it installed on their computer

Changing text colour
Command Changes text color to:
<FONT COLOR=#DC143C>Text here</FONT> Red text
<FONT COLOR=#3300FF>Text here</FONT> Blue text
<FONT COLOR=#FF6600>Text here</FONT> Orange text
<FONT COLOR=#FFFF33>Text here</FONT> Yellow text
<FONT COLOR=#66FF33>Text here</FONT> Green text
For more colour codes click here

Changing text size
Command Changes text size to:
<FONT SIZE=1>Text here</FONT> Text size 1
<FONT SIZE=2>Text here</FONT> Text size 2
<FONT SIZE=3>Text here</FONT> Text size 3
<FONT SIZE=4>Text here</FONT> Text size 4
<FONT SIZE=5>Text here</FONT> Text size 5
<FONT SIZE=6>Text here</FONT> Text size 6
<FONT SIZE=7>Text here</FONT> Text size 7
The default text size is 3
The maximum text size is size 7 (see the advanced section for larger text)
You can also use <H1></H1>...<H6></H6 to change text size, where <H1> is the largest and <H6> is the smallest

Joining HTML together
You may have noticed that the font, colour and size are all changed using the <FONT> tag.
If you wanted to change the text to a courier font, size 5 and red you would put the following
<FONT FACE=courier SIZE=5 COLOR=red>Edited text</FONT> which gives Edited text

Example 2: To make the text bold, underlined and green all at the same time use
<B><U><FONT COLOR=green>Text here</FONT></U></B> gives you Text here

It is important that you close the tags in the same order as they were opened. In the example above <B> was opened first so must be closed last <FONT> was the last opened and first to be closed.

Rules:


To practice using HTML Click here

Adding a link to a different page
Links are what allow people to move to other pages on the Internet. They can usually be identified because the mouse pointer changes when over a link and the text is usually underlined and blue (although this is not always the case). To create a link use the following:

<A HREF=            >Text here</a> In the space you need to enter the URL (web address) of the page you want to go too. All web addresses must start with http://

e.g. <A HREF=http://www.ebay.co.uk>eBay UK</a> will look like eBay UK

Email links
An email link works in a similar way to a normal link. To create a simple email link:

<A HREF="mailto:            ">Email me</a> just enter your email address in the space.

e.g. <A HREF="mailto:me@me.net">Email me</a> looks like Email me

Advanced email links
To automatically fill in the subject line of the email:

<A HREF="mailto:            ?subject=This will appear in the subject line">Email me</a> you need to place a ? mark after your email address and then put the subject

e.g. <a href="mailto:me@me.net?subject=Fill in the subject line">Email me</a> will give Email me

To display a picture
Use the following:

<IMG SRC=            > in the space enter the address of where the picture is stored beginning http://

e.g. <IMG SRC=http://img.photobucket.com/albums/v479/mepage/69.gif"> gives Hello

Please note: There is no closing tag for a picture

<IMG> tag properties
You can set the following properties for the <IMG> tag. It is recommended that you set the width and height for each picture as it makes the picture load faster.

WIDTH The width of the picture
HEIGHT The height of the picture
ALT Text to be displayed if the image can not be displayed

Auctions-United
Both width and height are specified in either pixels or as a percentage of the screen size.
<img src="http://img.photobucket.com/albums/v479/mepage/1236.jpg" width=150 height=100 alt="Snowy mountain">

Snowy mountain

Linking a picture
You just need to put the two codes together

<A HREF=address of page you want to go too><IMG SRC=address of picture></a>

Create a numbered list
Command Looks like:
<OL>
<LI>List item number 1</LI>
<LI>List item number 2</LI>
<LI>List item number 3</LI>
</OL>
  1. List item number 1
  2. List item number 2
  3. List item number 3

Create a bulleted list
Command Looks like:
<UL>
<LI>List item number 1</LI>
<LI>List item number 2</LI>
<LI>List item number 3</LI>
</UL>
  • List item number 1
  • List item number 2
  • List item number 3


Advanced HTML
Now you have managed the basics, why not try something a little more difficult?

Large text
For larger text than HTML allows use <FONT STYLE="font-size:100pt" color=red>Text</FONT> to get:

Text

Increase the number for larger text or decrease for smaller text.

Moving text
There are a number of ways in which the text can move:

Command Example
<MARQUEE>Text here</MARQUEE> Text right to left
<MARQUEE DIRECTION=right>Text here</MARQUEE> Text left to right
<MARQUEE DIRECTION=up>Text here</MARQUEE> Text moving upwards
<MARQUEE DIRECTION=down>Text here</MARQUEE> Text moving downwards
<MARQUEE BEHAVIOR=alternate>Text here</MARQUEE> Text bounces off sides
<MARQUEE BEHAVIOR=slide>Text here</MARQUEE> Text stops at left side
<MARQUEE BGCOLOR=yellow>Text here</MARQUEE> Text on yellow background
<MARQUEE SCROLLAMOUNT=30>Text here</MARQUEE> Changes speed of text
<MARQUEE DIRECTION=right><MARQUEE>Text here</MARQUEE> Alternating text

Please note: <MARQUEE> only works in Internet Explorer and Mozilla Firefox 1.0

You can also create some fancy text using:
<FONT COLOR=red><MARQUEE STYLE="filter:wave(strength=30, phase=2, add=20, freq=2)" direction="up" scrolldelay="50" height="100" width="100%">T<br>E<br>X<br>T<br></marquee></FONT>


T
E
X
T

Creating tables
Tables are used to precisely align you information and help to make the page easier on the eye if they are used right. They are difficult to understand at first but if you keep practising you will soon work it out

To create a table you will need the following tags:
<TABLE></TABLE> identifies that a table is being created
<TR></TR> creates a row in a table
<TD></TD> creates a cell within a row
<TH></TH> creates a heading

A basic table
The following code will give you the most basic table as shown below:

Code Creates:
<TABLE BORDER=2>
<TR>
<TD>row 1 cell 1</TD>
<TD>row 1 cell 2</TD>
</TR>
<TR>
<TD>row 2 cell 1</TD>
<TD>row 2 cell 2</TD>
</TR>
</TABLE>
row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2
Properties of the <table> tag  
BORDER=1 sets the width of the surrounding box, use number 0 for no border
CELLPADDING=1 sets the size of gap left around the data in each cell
CELLSPACING=1 Sets the gap between the cells
ALIGN=center used to align the table on the page (left/center/right)
BGCOLOR=blue fills the table border with a colour
BORDERCOLOR=blue sets the colour of the border
WIDTH=20% sets the table width to 20% of the screen size
HEIGHT=20% sets the table height to 20% of the screen height

Change all values (colours and numbers) accordingly

Code Creates:
<TABLE BORDER=2 BGCOLOR=yellow>
<TR>
<TD>row 1 cell 1</TD>
<TD>row 1 cell 2</TD>
</TR>
</TABLE>
row 1 cell 1 row 1 cell 2
<TABLE BORDER=2 BGCOLOR=yellow BORDERCOLOR=yellow>
<TR>
<TD>row 1 cell 1</TD>
<TD>row 1 cell 2</TD>
</TR>
</TABLE>
row 1 cell 1 row 1 cell 2
<TABLE BORDER=0 BACKGROUND=http://img.photobucket.com/albums/v479/mepage/a1.gif>
<TR>
<TD><FONT COLOR=white>row 1 cell 1</FONT></TD>
<TD><FONT COLOR=white>row 1 cell 2</FONT></TD>
</TR>
</TABLE>
row 1 cell 1 row 1 cell 2
<Table border=1 bgcolor=#FF6600 bordercolor=#FF6600 width=90% align=center>
<tr>
<td>
<font color=white>title</font>
</td>
</tr>
<tr>
<td bgcolor=white>
main text here
</td>
</tr>
</table>
title
main text here

Merging cells
At some point you may need to merge cells either horizonatally or vertically
<TABLE BORDER=1>
<TR>
<TD COLSPAN=3 width=90 height=30>1</TD>
</TR>
<TR>
<TD ROWSPAN=2 width=30 height=60>2</TD>
<TD width=30 height=30>3</TD>
<TD width=30 height=30>4</TD>
</TR>
<TR>
<TD width=30 height=30>5</TD>
<TD>6</TD>
</TR>
</TABLE>
<TD COLSPAN=3>
<ROWSPAN=2>
 3 4
5 6

Don't be afraid to put tables inside other tables!


Adding a picture
Adding a picture is really simple. All you need is an image host (somewhere to store your pics). For a list of image hosts please see the links section. The following instructions are for how to use photobucket.

Click on a picture to make it larger

  1. Sign up for a free Photobucket account (there are certain times at which you may sign up)
  2. Activate the account
  3. Right click on a pic you want to use and select "Save Picture As..."
    Save button - click to enlarge
  4. Choose an appropriate place on your computer (recommended place:my documents) and select save
  5. Sign in to your photobucket account
  6. Click the browse button
    Browse button - click to enlarge
  7. Find where you saved your pic and click on it, then select the open button
  8. Select submit (your picture will now be added to your bucket)
    Submit button - click to enlarge

    Under the picture there are 3 lines...

  9. Right click the tag line <img src="...."> and select copy
    Tag line - click to enlarge
  10. Go to where you want the picture to appear (the boards)
  11. Right click and select paste in the message box
  12. Post the message
    The picture should now have appeared
You can also rotate and change the size of the picture once it is in photobucket by clicking on the edit button above the picture you want to change.

Creating a signature picture
To put your name on a picture you need some drawing software
Most people use a specialised program called Paint Shop Pro (PSP) to add their name to pictures.
You can download a free trial here.

Now just get creative

Dream&Win

Icons & Smileys
The icons next to User IDs have different meanings:

Feedback stars
You get awarded a star depending on the amount of feedback you have received. Feedback is displayed as a number E.G.( 8 ) (this shows eight positive unique feedbacks) next to a User ID.

No star Feedback less than 10.
Yellow Star Feedback between 10 and 49.
Blue Star Feedback between 50 and 99.
Turquoise Star Feedback between 100 and 499.
Purple Star Feedback between 500 and 999.
Red Star Feedback between 1000 and 4999.

A list of additional stars.

Additional Icons
There are also a number of additional icons which can be found beside a User ID:

Me page icon Shows that a User has created an "about me" page. Click to see what the page contains. (This is my "about me" page.)
User registered less than 30 days ago Shows that the User ID was created less than 30 days ago.
User has changed ID within the last 30 days Shows that a User ID has been changed in the last 30 days.
Shop Shows that a User has their own shop. Click to visit the shop.

A list of icons specific to buying and selling.

Smileys
To get smileys on the message boards:

  1. Click on the smiley face next to the check spelling button (up pops a box of faces)
  2. Select the face that you want to use (this inserts the code for the selected face into the message box)
  3. Select post message
The code for the following 4 smileys does not work smileys instead you have to change the code so that a - is in the middle. eg. :-D, :-x, :-p, :-O for the 4 smileys shown above.

If in step one the box does not pop up, try either or both of the following...

  • Change your pop-up blocker so that pop-ups are allowed on the ebay site
  • minimize all the windows you have open - sometimes the smileys are hiding behind the other windows on the desktop)

Abbreviations
Abbreviation Stands for:
AKA Also Known As
ASAP As Soon As Possible
BBL Be Back Later
BBS Be Back Soon
BIN Buy It Now
BNWL Brand New With Label
BNWT Brand New With Tags
BRB Be Right Back
BTW By The Way
COA Certificate Of Authenticity
FAO For Attention Of...
FAQ Frequently Asked Question
FB Feedback
FVF Final Value Fees
FYI For Your Information
GIF Graphics Interchange Format
GTG Got To Go
HTML Hyper Text Markup Language
IMHO In My Honest Opinion
IMO In My Opinion
LMAO Laugh My A*** Off
LOL Laugh Out Loud
LTNS Long Time No See
M8 Mate
MIB Mint In Box
NARP Not A Registered Poster
NARU Not A Registered User
NIB New In Box
NPB Non Paying Bidder
N/R No Reserve
OMG Oh My G...
OP Opening/Original Poster
PM Private message
PMSL P*** Myself Laughing
RL Real Life
ROTHF Rolls On The Floor Laughing
TOS Terms Of Sale
TTFN Ta Ta For Now
TVM Ta Very Much
TY Thank You
URL Uniform Resource Locator
VERO Verified Rights Owner Program
VFM Value For Money
WD Well Done
WTG Way To Go
YHM You Have Mail
YW Your Welcome

For more abbreviations click here


Favourite Links
Learning HTML
HTML Help
HTML Introduction
HTML Beginner's Guide

Template maker
TagBot

Colour charts
Hex codes
HTML colour chart
Colour Chart

Image hosts
Photobucket
TinyPic
Village photos
Image Magician
AuctionPix

Smileys
Best Smileys
World of smileys
Caboot
Small smileys

Fancy text
3D text maker
Flaming text

igamesdirect.com