Here are some tips for using simple HTML tags if you need to create long product descriptions for your product spreadsheet in the “Item Descriptions (Detailed)” column. It is also possible to use HTML tags in the Item Name column.
Create the Description file and simply enter the name of the file (“filename.html” or “filename.txt”) in the column in the spreadsheet and the information will display on the web site. Since each file will be for a specific SKU, it is wise to name the file with the SKU number (i.e. BF12345.html).
It is best to create and edit HTML files in a text editor like Windows’ Notepad, rather than a word processor like Word or Word Perfect, because word processors add unseen formatting to documents that would corrupt the HTML. MS Word does allow you to create and save HTML documents, but they tend to be overly complex. You can use one of the HTML editing software programs that have a desktop-publishing-style interface and you can bypass the HTML “tags” described below. Popular programs include Macromedia’s Dreamweaver and Microsoft Frontpage. If you use one of the editors, you will need to remove the <html>, <head> and <body> tags that are usually present in HTML documents.
Below are some basic HTML “tags” to use in formatting your descriptions.
What is HTML?
Hypertext Markup Language (HTML) is the method used to format text and images for web pages. Web pages are text files with a “.html” or “.htm” extension. HTML “tags” are the commands embedded in the text to indicate formatting and begin and end with the “less than” and “greater than” symbols ( <tag> ). Some tags require an ending, indicated with a slash, i.e. </tag>.
Paragraph Breaks:
The paragraph tag is <p> and end paragraph is </p>. Example:
<p>This is an example paragraph. It includes beginning and ending HTML tags. Everything between the two paragraph tags will be the same font face, style and color, unless you add <style> tags to change them.</p>
The <p> and </p> won’t be visible on the web page, just the beginning and end of the paragraph. Each paragraph will be separated from the others by a blank line.
Heading sizes can also be used and are numbered “H1” (the largest) through “H6” (the smallest).
Line Breaks:
If you don’t want to have a blank line between paragraphs or if you want to break a line in a specific place use <br /> for line break. If you simply hit “Enter” or “New Line” as you type your description, it won’t show up in HTML. You must put a tag in order for the web page to be formatted. The <br /> tag doesn’t need a closing tag; it stands alone.
Style:
Through Cascading Style Sheets (CSS), text files which end in “.css”, websites can have style characteristics built in, such as font face, font size and color, backgrounds, etc., that unify an entire web site. But it is possible to put styling inline with your text and that is what we are concerned about here. If you want to change the style within a paragraph, to bold </strong> or italicize <em> certain words for emphasis. To change the size or color of text, you can use the <span> tag. You must end the style change with </span> or the rest of the document will retain the new style.
Bold: <strong></strong>– or – <b></b>. Both will still work in most web browsers but <strong> is preferred and <b> may be deprecated, meaning it will not work in the future.
Italic <em></em> (for “emphasis”) – or –<i></i>. Again, <i> is deprecated, use <em>.
While <b> and <i> for bold and italic are easiest to use, <strong> and <em> are preferred because they have implications for making web sites accessible to the site-impaired, since systems that will read websites to the blind are becoming available and <strong> is interpreted correctly when read aloud by a speech program, unlike <b> and <i>.
Color: The <font> tag is also deprecated, You should use <span> like this: <span style="color:red">Your red text</span> – or use a hexidecimal color- <span style="color:#FF0000">Your red text</span> (See below for info on Hexidecimal colors).
Size: <span style=”font-size:12pt”>Your 12 pt text here</span>. You can also express font-size in pixels, percentages and more.
You don’t need multiple <span> tags if you are modifying multiple styles. Simply combine the styles separated by semicolons like this:
<span style=”font-size:12pt;color:#ff0000″><strong>Your 12 pt, red, bold text</strong></span>
There are many variations possible for the above, but that’s enough to allow you to do a lot. Here’s an example of several things you can do with the HTML tags:
In this example paragraph we will change the weight, the color and the size of the text so you can see how it is done. You can combine the elements in different ways to get different effects.
Below you can see exactly how it looks in HTML.
|
<p>In this example paragraph we will change the <strong>weight</strong>, the <span style=”color:red”>color</span> and the <span style=”font-size:10pt”>size</span> of the text so you can see how it is done. You can <span style=”color:blue”><strong>combine</strong></span> the elements in <span style=”color:red;font-family:Times New Roman,serif,default”><em>different ways</em></span> to get different <span style=”font-size:16pt”>effects</span></p>. |
HTML Colors
In the examples above, font color is stated as “red”, “black”, etc. Below are the basic colors available and the Hexidecimal equivalents. Example: <font color=”red”> is the same as <font color=”#FF0000″> or <style=color:#FF0000>.
| Name | Color | Hexidecimal |
| Red | #FF0000 | |
| Green | #00FF00 | |
| Blue | #0000FF | |
| Yellow | #FFFF00 | |
| Cyan | #00FFFF | |
| Magenta | #FF00FF | |
| Black | #000000 | |
| White | #FFFFFF |
More extensive color variations are possible beyond the very basic examples above. For more information, refer to online color charts such as http://www.visibone.com/colorlab/.