|
HTML
(Hypertext Markup Language) is the scripting language used
to create and control the appearance of documents on the World
Wide Web. This
page illustrates a vast majority of the HTML tags that are
compatible with online auction sites such as eBay. Of course,
this page can also be used as a general reference if you are creating your own Web site or if you are seeking HTML help for any other reason!
The
code presented here is designed so that you may easily copy and paste any specific code
example and modify it so that it better suits
your needs. The layout is easy to understand and follow,
as described below:
RED
TEXT - This
is the actual HTML coding needed to accomplish the desired
effect.
BLUE
TEXT
- This
is part of the HTML code which can be customized by entering
different values.
BLACK
TEXT - This is the text that will actually be displayed
on the page you are making.
Layout
wise, you will find the primary Table of Contents below. Click
on any category to jump that particular section of this page.
Within each primary category, you will find a secondary set of links which will allow you to quickly jump to any specific code example you are looking for. For every section, the first
row illustrates the code you use to
accomplish the desired effect. It is color-coded as described
above. The second row shows you what the code will display
when previewed in a browser. The final row contains notes
about the specific code example directly above it. These notes will
tell you additional information about the command(s), and so forth. Clicking on the Arrow found within in each section will return you
to the main table of contents. Have fun!
|
General HTML Formatting
Line
Breaks |
| Code
To Use: |
This
is line ONE! <BR>
This is line TWO! <BR>
This is line THREE!
<BR><BR>This
sentence will have a blank line above and
below it! <BR><BR>
The
more breaks you have... <BR><BR><BR>
The more blank lines there will be!
|
| What
Will Happen: |
This
is line ONE!
This is line TWO!
This is line THREE!
This
sentence will have a blank line above and
below it!
The
more breaks you have...
The more blank lines there will be! |
| Notes: |
The <BR>
command is very important and helps
keeping your page or description from cluttering
up. It is a good idea to put a blank line (two
<BR> statements) in between
each set of ideas as you would if you were writing
a paper and needed several paragraphs. You can
also use the <BR> tag
to ensure each picture you display is on its
own line and they don't get lined up horizontally.
The <P> tag is described
below and has similar functionality. |
Paragraphs |
| Code
To Use: |
<P>This
is the first paragraph!</P>
<P>This
is the second paragraph!</P>
<P
ALIGN = "right">This
is the third paragraph - aligned to the
right! </P>
|
| What
Will Happen: |
This is a the first paragraph!
This is a the second paragraph!
This is the third paragraph
- aligned to the right!
|
| Notes: |
The Paragraph <P>
tags are a simple way to keep your page or description
from cluttering up. They also are a wise replacement
for the <BR> tags if you are writing a
large article and plan on having lots of line
breaks. The <P> tags
also make it easier to format and align different
parts of the document being worked on. Two <BR>
statements will achieve the same spacing effect
as the <P> tag does. |
Special
Characters and Spacing |
| Code
To Use: |
1.)
|
7.) ¥ |
| 2.) © |
8.) € |
| 3.) ® |
9.) “ |
| 4.) ™ |
10.) ” |
| 5.) £ |
11.) — |
| 6.) < |
12.) > |
|
| What
Will Happen: |
1.)
Non-Breaking Space (blank)
|
7.)
¥ (Yen)
|
| 2.) ©
(Copyright) |
8.) €
(Euro) |
| 3.) ®
(Registered) |
9.) “
(Left Quote) |
| 4.) ™
(Trademark) |
10.) ”
(Right Quote) |
| 5.)
£ (Pound) |
11.) —
(Extended Dash) |
| 6.)
< (Less
Than Sign) |
12.) >
(Greater Than Sign) |
|
| Notes: |
The codes above will allow you
to insert special characters and symbols into
your pages that otherwise would be impossible.
Tags such as the Less Than (<)
and Greater Than (>)
should be entered in the 'code' format because
they are part of the HTML language and if you
just use the keyboard keys to insert them -
they may not appear on your page and could produce
further problems with the layout. To use these
codes, simply insert them where you would like
to place the corresponding letter. |
|
|
Text Formatting
Setting
the Text Alignment |
| Code
To Use: |
<LEFT>This
Is Left Aligned!</LEFT>
<CENTER>This
Is Centered!</CENTER>
<RIGHT>This
Is Right Aligned!</RIGHT>
<P
ALIGN = "LEFT">Left-Aligned
Paragraph!</P>
|
| What
Will Happen: |
This
Is Left Aligned!
This
Is Centered!
This
is Right Aligned!
Left-Aligned
Paragraph! |
| Notes: |
The alignment tags displayed above
will not only align text, but everything between
the beginning and closing brackets will be aligned
in the same way. Thus, you can use the <CENTER>
command to center images, text, or even the entire
page simply by ensuring the opening and closing
tags completely surround what you want to be centered.
The <P ALIGN> tag used
above is just to illustrate another form of aligning
text. |
Applying
Font Styles |
| Code
To Use: |
<B>Bold!</B>
<I>Italic!</I>
<U>Underlined!</U>
<S>Strike-Through</S>
<CENTER><B><I>Centered,
Bold & Italic!</I></B></CENTER>
|
| What
Will Happen: |
Bold!
Italic!
Underlined!
Strike-Through
Centered,
Bold & Italic! |
| Notes: |
The commands above (bold,
italic, underline, strike-through)
are not the only font formatting tags available
using HTML. However, they are by far the most
common and thus I wanted to illustrate them more
than any others. Some other formatting commands
you may wish to experiment with include: <PRE></PRE>
(Preformatted), <SUB></SUB>
(Subscript), <SUP></SUP>
(Superscript), <TT></TT>
(Teletype), and <CODE></CODE>
(Code). |
Changing
Font Size |
| Code
To Use: |
<FONT
SIZE = "1">Font
Size 1!</FONT>
<FONT
SIZE = "7">Font
Size 7!</FONT>
<FONT
SIZE = "+1">Font
Size +1!</FONT>
<FONT
SIZE = "+7">Font
Size +3!</FONT>
|
| What
Will Happen: |
Font
Size 1!
Font
Size 7!
Font
Size +1!
Font
Size +3! |
| Notes: |
Along with the standard FONT SIZE
property described above, you can also set the
font style and size by using the HEADING
tags. They range from <H1></H1>
to <H6></H6> - H1
being the largest. The difference between the
Heading commands and the standard Size property
of FONT tags is that the Heading tags will automatically
insert a break below and above the Heading text.
The +3 font size will increase
the font size 3 units from what it currently is. |
Changing
Font Color |
| Code
To Use: |
<FONT
COLOR = "BLUE">Blue
Font!</FONT>
<FONT
COLOR = "RED">Red
Font!</FONT>
<FONT
COLOR = "#006600">Green
Font (HEX code)!</FONT>
<FONT
COLOR = "BLUE"
SIZE = "5"><B>Bold,
Blue font size 5!</B></FONT>
|
| What
Will Happen: |
Blue
Font!
Red Font!
Green Font
(HEX code)!
Bold,
Blue font size 5! |
| Notes: |
The font colors
can be specified using either a common color name
(red, blue, yellow, etc.) or a HEX value. For
a very complete table of colors and their corresponding
HEX codes, visit this
page. |
|
| Linking
to Other Documents (Hyperlinks)
Adding
Links (Web, E-Mail, Image) |
| Code
To Use: |
<A
HREF = "http://www.example.com">Click
to visit an example site!</A>
<A
HREF = "mailto:email@example.com">Send
me an e-mail!</A>
<A
HREF = "http://www.volcanicsoft.com"><IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
border = "1"></A>
|
| What
Will Happen: |
Click
to visit an example site!
Send me
an e-mail!
|
| Notes: |
Without any additional properties
or formatting (see the section below), the web
links will open in the same window the user
is currently in. This means that if you have
a link on your page that leads to a different
site, the user will be taken away from your
site and the new site will appear. Also, the
e-mail hyperlink will open up the user's default
mail client with your e-mail address in the
'To' field. |
Formatting
Hyperlinks |
| Code
To Use: |
<A
HREF = "http://www.example.com"
target="_blank">Link
in new window!</A>
<A
HREF = "http://www.example.com"><FONT
COLOR = "RED">Red
Link!</FONT></A>
<CENTER><A
HREF = "http://www.example.com"><B><I><FONT
COLOR = "GREEN">Centered,
Green, Bold and Italic
L ink!</FONT></I></B></A></CENTER>
|
| What
Will Happen: |
Link in new window!
Red
Link!
Centered,
Green, Bold and Italic Link! |
| Notes: |
The target property
of the HREF tag allows you to specify how the
link should open. The default is _self
which will open the link in the current window.
There is also _blank (open
in new window), _parent (opens
in the parent web window), and _top
(similar to _parent). If you use a site with
frames, you can specify additional launch locations. |
Using
Named Anchors (Page Jumps) |
| Code
To Use: |
Insert the following code
where you want the anchor to be placed:
<A
NAME ="anchor1"></A>
Use the following code to
create a link TO the anchor created above:
<A
HREF = "#anchor1">Jump
to anchor point!</A>
|
| What
Will Happen: |
Jump to anchor
point! |
| Notes: |
Named anchors allow the user to
navigate a particular page simply by clicking
links provided. A lot of times, pages with a
lot of content as this one is will have such
a feature so the user can quickly navigate to
the section he or she wishes to view. |
|
| Inserting
and Formatting Images
Inserting
Images |
| Code
To Use: |
<IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif">
<P><CENTER><IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"></CENTER></P>
|
| What
Will Happen: |
|
| Notes: |
As with virtually all HTML commands,
the IMG tag can be inserted into any existing
tags such as alignments or tables. The second
example line of code above is a good idea if
you are using pictures for an auction etc. as
it will put one blank space in between each
image and they will be centered on the page. |
Managing
Image Attributes |
| Code
To Use: |
<IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
BORDER = "1">
<IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
WIDTH = "200"
HEIGHT = "125"
BORDER = "3">
<IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
ALT = "This shows
up when mouse is over image!"
>
<IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
ALIGN = "left"
HSPACE = "5"
VSPACE = "5">This
text is on the right of the image! There
is also a five pixel padding around the
image to make the text wrap more appealing.
|
| What
Will Happen: |
This
text is on the right of the image! There is
also a five pixel padding around the image
to make the text wrap more appealing.
|
| Notes: |
There are a number of different
formatting options available with images. One
note I want to make is that if you resize the
image(s) using the HTML tags, be aware that
dimensions larger than the original will result
in a jagged and/or pixilated image. For major
resize jobs, it is best to resize the image
in a graphic editing program. |
Image
Hyperlinks |
| Code
To Use: |
<A
HREF = "http://www.volcanicsoft.com"><IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
border = "1"></A>
<A
HREF = "http://www.volcanicsoft.com"><IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
border = "0"
ALIGN = "absmiddle"
HSPACE = "10">Image
AND text are clickable</A>
<CENTER><A
HREF = "http://www.volcanicsoft.com"><IMG
SRC = "http://www.volcanicsoft.com/images/sampleimage.gif"
border = "4"></A></CENTER>
|
| What
Will Happen: |
Image
AND text are clickable
|
| Notes: |
Images can link to any other site
or graphic that a standard text link can. If
the image is hyperlinked AND has a border, the
border will appear blue (or the default link
color) on the site. It is not advised to use
images for important links for the reason that
some users might have pictures disabled in their
browser or be using a text-only browser. |
|
|
Creating and Formatting Tables
Basic
Design (Table Insertion) |
| Code
To Use: |
<TABLE
BORDER = "1">
<TR>
<TD>The Table
Content Goes Here</TD>
</TR>
</TABLE>
|
| What
Will Happen: |
| The Table Content Goes Here |
|
| Notes: |
As you can see, tables are not
very attractive without certain properties being
manually configured (as shown below). The TR
and TD tags are used to create a 1 x 1 cell
within the table. Cells are sections where actual
content can be inserted. |
Formatting
Tables |
| Code
To Use: |
<TABLE
WIDTH = "550"
BORDER="1"
CELLSPACING="0"
CELLPADDING="5"
BORDERCOLOR="green"
BGCOLOR="yellow">
<TR>
<TD>This table
is 550 pixels wide, has a 1 pixel border,
no cell-spacing, and 5 pixel cell padding.
The border is colored green and the table
background is yellow!</TD>
</TR>
</TABLE>
<DIV
ALIGN = "center"><TABLE
WIDTH="95%"
BORDER="1"
CELLSPACING="1"
CELLPADDING="5"
BORDERCOLOR="#FF0000"
BGCOLOR="tan">
<TR>
<TD>This table
is 95% wide, has a 1 pixel border and cell-spacing,
and 5 pixel cell padding. The border is
colored red (hex) and the table background
is tan! It is also centered!</TD>
</TR>
</TABLE> </DIV>
|
| What
Will Happen: |
| This table is 550 pixels
wide, has a 1 pixel green border, 5 pixel
cell padding. The background is also bright
yellow! |
| This table is 95% wide, has a 1 pixel
border and cell-spacing, and 5 pixel
cell padding. The border is colored
red (hex) and the table background is
tan! It is also centered! |
|
| Notes: |
Some of the most common properties
to set within a table include the cell spacing,
cell padding, border, and width. The cell spacing
is how many pixels of blank space are between
each cell. The cell padding is how much blank
space surrounds the contents within a particular
cell (cell padding of 0 will result in content
that is very close to the cell borders). The
border will outline each side of the table along
with each edge of the cells within the table.
Width can be entered in percent (in relation
to the document window), or pixels (fixed width
on all browsers and resolutions). |
Inserting
Rows and Columns |
| Code
To Use: |
<DIV
ALIGN = "CENTER"><TABLE WIDTH
= "550"
BORDER = "1"
CELLSPACING = "0"
CELLPADDING = "5">
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
<TD>Row 1 Col 3</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
<TD>Row 2 Col 3</TD>
</TR>
</TABLE></DIV> |
| What
Will Happen: |
| Row 1 Col 1 |
Row 1 Col 2 |
Row 1 Col 3 |
| Row 2 Col 2 |
Row 2 Col 2 |
Row 2 Col 3 |
|
| Notes: |
In HTML, table cells are created
using a series of <TR>
and <TD> tags. The general
procedure is that you create the table row (TR)
first, and then nestle the column tags (TD)
inside. |
Formatting
Cells |
| Code
To Use: |
<DIV
ALIGN = "CENTER"><TABLE
WIDTH = "550"
BORDER = "1"
CELLPADDING = "5"
CELLSPACING = "0">
<TR>
<TD BORDERCOLOR = "#0000FF"
BGCOLOR="#FFCCFF">Row
1 Col 1</TD>
<TD BORDERCOLOR = "#006600"
BGCOLOR="#FFFFCC">Row
1 Col 2</TD>
<TD BORDERCOLOR = "#FFFFFF"
BGCOLOR="#FF0000">Row
1 Col 3</TD>
</TR>
<TR>
<TD ALIGN = "center">Row
2 Col 2</TD>
<TD ALIGN = "right"
BGCOLOR = "#33CCFF">Row
2 Col 2</TD>
<TD BACKGROUND = "http://www.volcanicsoft.com/dac/img/dacblue.jpg">
<DIV ALIGN = "center"><B>Row
2 Col 3</B></DIV></TD>
</TR>
</TABLE></DIV> |
| What
Will Happen: |
| Row
1 Col 1 |
Row
1 Col 2 |
Row
1 Col 3 |
| Row 2 Col 2 |
Row
2 Col 2 |
Row
2 Col 3 |
|
| Notes: |
Cell properties are very similar
to table properties. You can specify the background,
border color, etc... If you wish to use a background
texture instead of a standard color, be sure
to use the BACKGROUND property
instead of the BGCOLOR. The
same rule goes for adding a background texture
to a full table. |
Merging
Cells (ROWSPAN = Row Merge, COLSPAN = Column
Merge) |
| Code
To Use: |
<DIV
ALIGN = "CENTER"><TABLE
WIDTH = "550"
BORDER = "1"
CELLPADDING = "5"
CELLSPACING = "0">
<TR>
<TD ROWSPAN="2">Rows
1 & 2 Merged!</TD>
<TD>Row 1 Col 2</TD>
<TD>Row 1 Col 3</TD>
</TR>
<TR>
<TD COLSPAN="2">Columns
2 & 3 Merged!</TD>
</TR>
</TABLE></DIV> |
| What
Will Happen: |
| Row 1 & 2 Col 1 Merged! |
Row 1 Col 2 |
Row 1 Col 3 |
| Columns 2 & 3 Merged! |
|
| Notes: |
To merge cells, you use the ROWSPAN
and COLSPAN commands. The value
specified in these tags represents the number
of rows or cells you wish to merge. For example,
the code above merges columns 2 and 3 by using
the tag, <TD COLSPAN = "2">. |
|
|
Bulleted and Ordered Lists
Creating
Bulleted Lists |
| Code
To Use: |
<UL>
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
</UL>
<UL
TYPE = "square">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
</ul>
|
| What
Will Happen: |
|
| Notes: |
Bulleted lists are also called
unordered lists. The square variation
will not work on all browsers, and if it isn't
compatible it will default to the circle bullets.
For lists that require a particular order (recipes,
steps, etc.) you should use the ordered lists
as described below. |
Creating
Ordered Lists |
| Code
To Use: |
<OL>
<LI>Item
1</LI>
<LI>Item
2</LI>
<LI>Item
3</LI>
</OL> |
<OL
TYPE="i">
<LI>Item
1</LI>
<LI>Item
2</LI>
<LI>Item
3</LI>
</OL> |
<OL
TYPE="I">
<LI>Item
1</LI>
<LI>Item
2</LI>
<LI>Item
3</LI>
</OL> |
<OL
TYPE="a">
<LI>Item
1</LI>
<LI>Item
2</LI>
<LI>Item
3</LI>
</OL> |
<OL
TYPE="A">
<LI>Item
1</LI>
<LI>Item
2</LI>
<LI>Item
3</LI>
</OL> |
|
|
| What
Will Happen: |
- Item 1
- Item 2
- Item 3
|
- Item 1
- Item 2
- Item 3
|
- Item 1
- Item 2
- Item 3
|
- Item 1
- Item 2
- Item 3
|
- Item 1
- Item 2
- Item 3
|
|
|
| Notes: |
Ordered lists offer a variety
of styles and are generally used to describe
steps or processes that require a specific order.
If you nest ordered lists, the nested tags will
appear indented as sub-topics on the actual
page. |
Creating
Directory Lists |
| Code
To Use: |
<DL>
<DT><B>First
Item</B>
<DD>This is the
description of the first item!
<DT><B>Second
Item</B>
<DD>This is the
description of the second item!
<DT><B>Third
Item</B>
<DD>This is the
description of the third item!
</DL> |
| What
Will Happen: |
- First Item
- This is the description of the first item!
- Second Item
- This is the description of the second
item!
- Third Item
- This is the description of the third item!
|
| Notes: |
< | |
