Announcement

Collapse
No announcement yet.

Basic HTML

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Basic HTML

    Here are some of the most common HTML tags to help you design your site:
    <table style="width: 100%;" bgcolor="" border="0" cellpadding="2" cellspacing="5"><tbody><tr><td style="font-weight: bold;" align="left" align="middle" width="33%">HTML</td><td style="font-weight: bold;" align="left" valign="middle" width="20%">Displays as: <br/></td><td style="font-weight: bold;" align="left" valign="middle" width="46%">What it does </td></tr><tr><td>&lt;b&gt;My text&lt;/b&gt;</td><td><span style="font-weight: bold;">My text</span><br/></td><td>bold</td></tr><tr><td>&lt;u&gt;My text&lt;/u&gt;</td><td><span style="text-decoration: underline;">My text</span><br/></td><td>underline</td></tr><tr><td>&lt;i&gt;My text&lt;/i&gt;</td><td><span style="font-style: italic;">My text</span><br/></td><td>italics</td></tr><tr><td>&lt;strike&gt;My text&lt;/strike&gt;</td><td><strike>My text<br/></strike></td><td>strike through<br/></td></tr><tr><td>&lt;font face="Times Roman"&gt;My text&lt;/font&gt;</td><td><font face="Times Roman">My text</font><br/></td><td>type face<br/></td></tr><tr><td>&lt;font color="red"&gt;My text&lt;/font&gt;<br/></td><td><span style="color: rgb(255, 0, 0);">My text</span><br/></td><td>colour</td></tr><tr><td colspan="3" style="vertical-align: top;">You can also use the hexadecimal number for the colour, e.g.:</td></tr><tr><td>&lt;font color="#00ff00"&gt;My text&lt;/font&gt;<br/></td><td><font color="#00ff00">My text</font><br/></td><td>colour</td></tr><tr><td>&lt;font size="7"&gt;My text&lt;/font&gt;<br/></td><td><span style="font-size: 36pt;">My text</span><br/></td><td>size</td></tr><tr><td colspan="3">The font tags can be combined to change different attributes of text in one go, for example:</td></tr><tr><td>&lt;font face="Ariel" color="blue" size="5"&gt;My Text&lt;/font&gt;<br/></td><td><font color="blue" face="Ariel" size="5">My Text</font><br/></td><td style="vertical-align: top;">type face, colour and size<br/></td></tr><tr><td style="vertical-align: top;">&lt;h1&gt;Heading Style 1&lt;/h1&gt;<br/></td><td style="vertical-align: top;"><h1>Heading Style 1</h1></td>
    <td style="vertical-align: top;">pre-set heading style<br/></td></tr><tr><td style="vertical-align: top;">&lt;h2&gt;Heading Style 2&lt;/h2&gt;<br/></td><td style="vertical-align: top;"><h2>Heading Style 2</h2></td><td style="vertical-align: top;">pre-set heading style</td></tr><tr><td style="vertical-align: top;">&lt;h3&gt;Heading Style 3&lt;/h3&gt;<br/></td><td style="vertical-align: top;"><h3>Heading Style 3</h3></td><td style="vertical-align: top;">pre-set heading style</td></tr><tr><td style="vertical-align: top;">My&lt;br/&gt;Text</td><td>My<br/>Text</td><td>line break</td></tr><tr><td style="vertical-align: top;">&lt;p&gt;This contains my text&lt;/p&gt;Hello<br/></td><td style="vertical-align: top;"><p>This contains my text</p>Hello</td><td style="vertical-align: top;">paragraph tag - puts a line after the paragraph<br/></td></tr><tr><td style="vertical-align: top;">&lt;img src="imagename.gif" alt="my image"&gt; <br/></td><td style="vertical-align: top;"><img title="" alt="" src="http://kb.actinic.com/activekb/images/imagename.jpg" align="bottom" border="0" height="133" width="133"/></td><td style="vertical-align: top;">inserts and image where:<br/>src = the image name (could also be a url to an image somewhere on the web)<br/>alt = alternative text if the image doesn't appear (in IE it also displays a tooltip box when the mouse hovers over the image - to do the same in Firefox, add the 'title' attribute)<br/></td></tr><tr><td style="vertical-align: top;">&lt;a href=<br/>"http://community.actinic.com"&gt;<br/>Click here&lt;/a&gt;<br/></td><td style="vertical-align: top;"><a href="http://community.actinic.com">Click here </a></td><td style="vertical-align: top;">A clickable text link<br/></td></tr><tr><td style="vertical-align: top;">&lt;a href=<br/>"http://community.actinic.com"&gt;<br/>&lt;img src="community-logo.gif" alt="Actinic Community" border="0"&gt;&lt;/a&gt;</td><td style="vertical-align: top;"><a href="http://community.actinic.com"><img title="" alt="" id="de_element_image" src="http://kb.actinic.com/activekb/images/community-logo.gif" align="" border="0" height="32" width="150"/></a></td><td style="vertical-align: top;">A clickable image link<br/></td></tr><tr><td colspan="3">to have a link open in a new window add target="_blank" to the <a> tag so it would look like:
    &lt;a href="http://community.actinic.com" target="_blank"&gt;&lt;img src="community-logo.gif" alt="Actinic Community"&gt;&lt;/a&gt;</a></td></tr><tr><td style="vertical-align: top;">&lt;a href=<br/>"mailto:YourEmail@Address.here"&gt;<br/>Email Me&lt;/a&gt; </td><td style="vertical-align: top;"><a href="mailto:YourEmail@Address.here">Email Me</a></td><td style="vertical-align: top;">An email address link (will open the email client)<br/></td></tr><tr><td style="vertical-align: top;">&lt;table border="1" cellspacing="1" cellpadding="5"&gt;<br/>&lt;tr&gt;<br/>&lt;td&gt;cell 1&lt;/td&gt;<br/>&lt;td&gt; cell 2&lt;/td&gt;<br/>&lt;/tr&gt;<br/>&lt;tr&gt;<br/>&lt;td&gt; cell 3&lt;/td&gt;<br/>&lt;td&gt; cell 4&lt;/td&gt;<br/>&lt;/tr&gt;<br/>&lt;/table&gt;<br/></td><td style="vertical-align: top;"><table border="1" cellpadding="5" cellspacing="1"><tbody><tr><td>cell 1</td>
    <td> cell 2</td></tr><tr><td> cell 3</td><td> cell 4</td></tr></tbody></table></td><td style="vertical-align: top;">A simple table:<br/>&lt;table&gt; - start of table<br/>&lt;/table&gt; - end of table<br/>&lt;tr&gt; - start of table row<br/>&lt;/tr&gt; - end of table row<br/>&lt;/td&gt; - start of table cell<br/>&lt;/td&gt; - end of table cell<br/></td></tr><tr><td style="vertical-align: top;">&lt;ul&gt;<br/>&lt;li&gt;bullet 1&lt;/li&gt;<br/>&lt;li&gt;bullet 2&lt;/li&gt;<br/>&lt;li&gt;bullet 3&lt;/li&gt;<br/>&lt;/ul&gt;<br/></td><td style="vertical-align: top;"><ul><li>bullet 1</li><li>bullet 2</li><li>bullet 3</li></ul></td><td style="vertical-align: top;">Bulleted List</td></tr></tbody></table>

    NOTE: When using any of the above within the 'full description' field in a product or the 'text' field in a fragment you must use the embedding tags so that SellerDeck can treat it as HTML. Put !!< at the beginning of the field and >!! at the end.

    For more help with HTML try the following sites:

    www.gotomy.com
    www.w3shools.com
Working...
X