Adding basic HTML formatting to product
descriptions
Customers using
our ecommerce / shopping data facility.
A few notes to help you add a few personal touches to you
product descriptions:
Examples of basic HTML code which you could apply to the description
field of your 'products' and 'product highlights' using the
shopping admin program:
Format
description / function
HTML Code
How the text will look
Ordinary text with no formatting
New
New
Bold text
<b>New</b>
New
italic text
<i>New</i>
New
Change colour of text to red
<font color=red>New</font>
New
Bold and italic
<b><i>New</i></b>
New
Bold and red
<b><font color=red>New</font></b>
New
Bold, red and italic
<b><font color=red><i>New</i></font></b>
New
There's a lot more you can do, but we recommend you apply only
the above types of formatting just to highlight small areas
of text. Don't get too carried away and stick to the same layout
style throughout.
An example of HTML formatting on a paragraph of text:
Original text with no formatting:
NEW
From the creators of Wallace & Grommit, Morph
and Chicken Run come the fantastic Creature Comforts.
HTML Code applied to text:
<b><font color=darkred>NEW</font></b>
From the creators of <i>Wallace & Grommit</i>,
Morph and Chicken Run come the fantastic <b>Creature
Comforts</b>.
How the text will look in
a web browser:
NEW
From the creators of Wallace & Grommit,
Morph and Chicken Run come the fantastic Creature
Comforts.
Adding a list / bullet points:
Original text with no formatting:
Bullet point 1
Bullet point 2
Bullet point 3
Bullet point 4
Bullet point 5
Actual text typed into
'Product Description' field
{bullet}
Bullet point 1
Bullet point 2
Bullet point 3
Bullet point 4
Bullet point 5
{endbullet}
How the text will look in a web
browser:
Bullet point 1
Bullet point 2
Bullet point 3
Bullet point 4
Bullet point 5
Colours
Note: Only 16 color names are supported by the W3C HTML 4.0
standard (aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow).
Color Name
Color
Color HEX
value
Aqua
#00FFFF
Black
#000000
Blue
#0000FF
Fuchsia
#FF00FF
Gray
#808080
Green
#008000
Lime
#00FF00
Maroon
#800000
Navy
#000080
Olive
#808000
Purple
#800080
Red
#FF0000
Silver
#C0C0C0
Teal
#008080
White
#FFFFFF
Yellow
#FFFF00
For all other colours you should use the Color HEX value, see
example below:
HTML code using Color Hex value
Colour of Text
HTML Code using
Hex value
How the text will look
No colour applied
New
New
BlueViolet
<font color=#8A2BE2>New</font>
New
Crimson
<font color=#DC143C>New</font>
New
LawnGreen
<font color=#7CFC00>New</font>
New
Gold
<font color=#7CFC00>New</font>
New
Use Color Hex value for the following colours:
Color Name
Color
Color HEX
value
Color Name
Color
Color HEX
value
AliceBlue
#F0F8FF
LightPink
#FFB6C1
AntiqueWhite
#FAEBD7
LightSalmon
#FFA07A
Aquamarine
#7FFFD4
LightSeaGreen
#20B2AA
Azure
#F0FFFF
LightSkyBlue
#87CEFA
Beige
#F5F5DC
LightSlateBlue
#8470FF
Bisque
#FFE4C4
LightSlateGray
#778899
BlanchedAlmond
#FFEBCD
LightSteelBlue
#B0C4DE
BlueViolet
#8A2BE2
LightYellow
#FFFFE0
Brown
#A52A2A
LimeGreen
#32CD32
BurlyWood
#DEB887
Linen
#FAF0E6
CadetBlue
#5F9EA0
Magenta
#FF00FF
Chartreuse
#7FFF00
MediumAquaMarine
#66CDAA
Chocolate
#D2691E
MediumBlue
#0000CD
Coral
#FF7F50
MediumOrchid
#BA55D3
CornflowerBlue
#6495ED
MediumPurple
#9370D8
Cornsilk
#FFF8DC
MediumSeaGreen
#3CB371
Crimson
#DC143C
MediumSlateBlue
#7B68EE
Cyan
#00FFFF
MediumSpringGreen
#00FA9A
DarkBlue
#00008B
MediumTurquoise
#48D1CC
DarkCyan
#008B8B
MediumVioletRed
#C71585
DarkGoldenRod
#B8860B
MidnightBlue
#191970
DarkGray
#A9A9A9
MintCream
#F5FFFA
DarkGreen
#006400
MistyRose
#FFE4E1
DarkKhaki
#BDB76B
Moccasin
#FFE4B5
DarkMagenta
#8B008B
NavajoWhite
#FFDEAD
DarkOliveGreen
#556B2F
OldLace
#FDF5E6
Darkorange
#FF8C00
OliveDrab
#6B8E23
DarkOrchid
#9932CC
Orange
#FFA500
DarkRed
#8B0000
OrangeRed
#FF4500
DarkSalmon
#E9967A
Orchid
#DA70D6
DarkSeaGreen
#8FBC8F
PaleGoldenRod
#EEE8AA
DarkSlateBlue
#483D8B
PaleGreen
#98FB98
DarkSlateGray
#2F4F4F
PaleTurquoise
#AFEEEE
DarkTurquoise
#00CED1
PaleVioletRed
#D87093
DarkViolet
#9400D3
PapayaWhip
#FFEFD5
DeepPink
#FF1493
PeachPuff
#FFDAB9
DeepSkyBlue
#00BFFF
Peru
#CD853F
DimGray
#696969
Pink
#FFC0CB
DodgerBlue
#1E90FF
Plum
#DDA0DD
Feldspar
#D19275
PowderBlue
#B0E0E6
FireBrick
#B22222
RosyBrown
#BC8F8F
Floralhite
#FFFAF0
RoyalBlue
#4169E1
ForestGreen
#228B22
SaddleBrown
#8B4513
Gainsboro
#DCDCDC
Salmon
#FA8072
GhostWhite
#F8F8FF
SandyBrown
#F4A460
Gold
#FFD700
SeaGreen
#2E8B57
GoldenRod
#DAA520
SeaShell
#FFF5EE
GreenYellow
#ADFF2F
Sienna
#A0522D
HoneyDew
#F0FFF0
SkyBlue
#87CEEB
HotPink
#FF69B4
SlateBlue
#6A5ACD
IndianRed
#CD5C5C
SlateGray
#708090
Indigo
#4B0082
Snow
#FFFAFA
Ivory
#FFFFF0
SpringGreen
#00FF7F
Khaki
#F0E68C
SteelBlue
#4682B4
Lavender
#E6E6FA
Tan
#D2B48C
LavenderBlush
#FFF0F5
Thistle
#D8BFD8
LawnGreen
#7CFC00
Tomato
#FF6347
LemonChiffon
#FFFACD
Turquoise
#40E0D0
LightBlue
#ADD8E6
Violet
#EE82EE
LightCoral
#F08080
VioletRed
#D02090
LightCyan
#E0FFFF
Wheat
#F5DEB3
LightGoldenRodYellow
#FAFAD2
WhiteSmoke
#F5F5F5
LightGrey
#D3D3D3
YellowGreen
#9ACD32
LightGreen
#90EE90
Adding Simple Tables
We have setup a simple method of creating tables which can
be used in the product description content area.
Example 2 column
table
MICRO POWER e-LOGGER
UNIT
Item
Description
Voltage
Measurement
approx 5V to 45Volts
Voltage
Resolution
0.1V
Current
Measurement
up to 100Amps
Current
Resolution
0.1Amp
Temperature
Measurement
Dual inputs 0
to 220°C (0 to 434°F) - (one temperature input when
RPM is used)
Actual text typed into 'Product
Description' field
{table title="MICRO POWER e-LOGGER UNIT "
class=1 cols=2 width=160,260 align=L,L}
#Item, Description
Voltage Measurement, approx 5V to 45Volts
Voltage Resolution, 0.1V
Current Measurement, up to 100Amps
Current Resolution, 0.1Amp
Temperature Measurement, Dual inputs 0 to 220°C (0
to 434°F) - (one temperature input when RPM is used)
{endtable}
Explained in more detail
{table title="MICRO
POWER e-LOGGER UNIT " class=1 cols=2 width=160,260
align=L,L} title="MICRO POWER e-LOGGER UNIT
" table name/title, this could
be left blank class=1 name of style used
to format the table. ITP will set this up initially,
please ask. Default is 'class=1' cols=2 Number of columns in
the table width=160,260 the column widths
(need to be careful when specifying widths) align=L,L alignment of each
column i.e. centre (C), left (L) or right (R)
#Item, Description
A '#' at the beginning of this line, denotes
that this row of columns
will be the header (hence the top row looking
different to others)
commas ',' separate text for each column. Leave
this out if not required.
Voltage Measurement,
approx 5V to 45Volts
Main text for table. Separate columns with commas
','
Press 'RETURN' for new row
{endtable}
Denotes end of the table
This method is quite versatile, allowing you
to easily add more columns. You can also use different
styling for different tables, if this is the case,
please ask ITP to set up extra formatting syles.
Web
Site Designers, Bespoke
Software & Tailor Made Software in Leamington
Spa, UK.
Writing Custom Programs in Warwickshire, Coventry, Birmingham &
all over the UK