Improve your Web pages with basic HTML
HTML (HyperText Markup Language) may sound technical and confusing,
but in fact it's easy to use basic HTML to make your listings more visual, clear
and effective.
An HTML "tag" is an instruction that makes a given section of your page look a certain way without being visible itself. A tag consists of a less than sign (<) to begin the tag, followed by a tag name, or instruction, followed by a greater than sign (>) to end the tag. Remember: tags are not case sensitive, so <P> is the same as <p>.
Here are some basic HTML tags that will get you started. Give it a try. You'll see immediate results!
Line Breaks & Horizontal Lines
| Tag |
Description |
What your code looks like |
What customers see |
<p> |
paragraph |
<p>I look forward to answering your questions.
<p>Please give me a call.
|
I look forward to answering your questions.
Please give me a call.
|
<br> |
line break |
If I'm not available, please send me Mail. <br> I'll get back to you within 24 hours.
|
If I'm not available, please send me Mail.
I will get back to you within 24 hours.
|
<hr> |
horizonal
rule
|
John B. Smith
<hr>
Certified Public Accountant
|
John B. Smith
Certified Public Accountant
|
Bullet & Number Lists
| Tags |
Description |
Example code |
What customers would see |
<ul>
<li></li>
</ul>
|
unordered (bullet) list with list items |
I love dogs and can help you with the following:
<ul>
<li>Potty-training a new puppy</li>
<li>Getting your dog to stop barking</li>
<li>Choosing the appropriate breed of dog for your lifestyle</li>
</ul>
|
I love dogs and can help you with the following:
- Potty-training a new puppy
- Getting your dog to stop barking
- Choosing the appropriate breed of dog for your lifestyle
|
<ol>
<li></li>
</ol>
|
ordered (number) list with list items |
I love dogs and can help you with the following:
<ol>
<li>Potty-training a new puppy</li>
<li>Getting your dog to stop barking</li>
<li>Choosing the appropriate breed of dog for your lifestyle</li>
</ol>
|
I love dogs and can help you with the following:
- Potty-training a new puppy
- Getting your dog to stop barking
- Choosing the appropriate breed of dog for your lifestyle
|
Accentuating Text
| Tags |
Description |
Example code |
What customers would see |
<b></b> |
bold |
I can help you <b>make money</b>.
|
I can help you make money.
|
<i></i> |
italics |
Do you need <i>live</i> advice?
|
Do you need live advice?
|
<u></u> |
underline* |
<u>Here are my qualifications.</u>
|
Here are my qualifications.
|
| Note: |
| * |
It is generally considered good Web practice to avoid underlining text, since some users
will confuse the underlined text for a link.
|
Font Tag: Text Size, Color & Type Face
You can use the size, color and face "attributes" of the <font> tag to change the appearance of your text.
| Tag |
Attribute |
Example code |
What customers would see |
<font></font> |
size (1-7) |
<font size="1">This is the smallest text</font><br>
<font size="2">This is smaller text</font><br>
<font size="3">This is small text</font><br>
<font size="4">This is medium text</font><br>
<font size="5">This is big text</font><br>
<font size="6">This is bigger text</font><br>
<font size="7">This is the biggest text</font><br>
|
This is the smallest text.
This is smaller text
This is small text
This is medium text
This is big text
This is bigger text
This is the biggest text
|
<font></font> |
face* |
<font face="Palatino">Here is an example of Palatino.</font>
<font face="Arial">Here is an example of Arial.</font>
<font face="Courier">Here is an example of Courier.</font>
|
Here is an example of Palatino.
Here is an example of Arial.
Here is an example of Courier.
|
<font></font> |
color** |
<font color="red">Here is some red text.</font><br>
<font color="green">Here is some green text.</font><br>
<font color="brown">Here is some brown text.</font><br>
<font color="blue">Here is some blue text.</font>
|
Here is some red text.
Here is some green text.
Here is some brown text.
Here is some blue text.
|
<font></font> |
multiple
attributes
|
<font size="2" face="Courier" color="red">Here is some small red text in Courier.</font><br>
<font size="6" face="Arial" color="purple">Here is some big purple text in Arial.</font>
|
Here is some small red text in Courier.
Here is some big purple text in Arial.
|
| Notes: |
| * |
If you do not specify a font face, or if you specify a font face which users don't have on their computers, then users will see the default font, which for most browsers is Times New Roman. |
| ** |
Click here for a web site which lists by name all the colors you may you in HTML.
To change the color of a link, you must place your font tags inside the link tags (e.g. <a><font></font></a>).
|
Centering Text
| Tags |
Example code |
What customers would see |
<center></center> |
<center>THIS HEADLINE IS CENTERED</center>
|
THIS HEADLINE IS CENTERED
|
Adding Images
You can use our image
upload tool to add an image to any of your listings. We'll host
the image, and the tool will give you the HTML tag to copy and paste into your
HTML code.
Code Restrictions
In order to prevent your HTML code from interacting with the layout, formatting and functionality of the PsychicCenter website, we impose the following rules on the code you may enter when creating your listings.
Links
- Links must be absolute—i.e. "href" attributes in <a> tags must begin with "http://".
- Correct:
<a href="http://www.mysite.com/content/mypage.html">My Link</a>
- Incorrect:
<a href="mypage.html">My Link</a><a href="/content/mypage.html">My Link</a>
- Links to JavaScript functions—if you are trying to call a JavaScript function in your links, then you must include "javascript:" before your function call.
- Correct:
<a href="javascript:MyFunction();">My Link</a>
- Incorrect
<a href="MyFunction();">My Link</a>
Images
-
Image URLs must be absolute—i.e. "src" attributes in <img> tags must begin with "http://"
- Correct:
<img src="http://www.mysite.com/images/graphic.gif">
- Incorrect:
<img src="graphic.gif"><img src="/images/graphic.gif">
Restricted HTML Tags
You may not use the following tags in the HTML for your listings:
-
<style>
-
<link>
-
<layer>
-
<iframe>
-
<form>
-
<input>
-
<select>
Restricted <BODY> Tag Attributes
If you include a <BODY> tag in the HTML for your listing, then you may not include any of the following attributes inside the tag:
-
"text="
-
"link="
-
"vlink="
-
"alink="
-
"scroll="
-
"style="
JavaScript Restrictions
PsychicCenter does not permit the use of the following types of JavaScript functions in the HTML for your listings:
- Scripts that place or read cookies.
- Scripts that redirect users to another page.
- JavaScript includes (i.e. the "src=" attribute is not permitted inside <script> tags).
Additionally, you may not include the following JavaScript commands:
.styledocument.cookielocation.hreflocation.replacelocation.reload.go.home.back.forwardwindow.navigatewindow.openhistory.history[
