Free Monthly Newsletter...and much more!

5 Star Support - Free Computer Help and Technical Support

 

 . 
5 Star Support Home
Computer Help Forums
Computer Tutorials
Tips, Tricks & Tweaks
Troubleshooting FAQ
 
Google

HTML Tips

Using the META Tags Changing defaults within lists
The TABLE Tag Eliminate Paragraph Breaks
Use common fonts Using the ALT Tag
Using the CENTER Tag Configure a link to download

Line Break Spacing

Configure Auto Transfer

GIF -VS- JPEG

HSPACE and VSPACE

Useful Tags and Attributes

Text Formatting
Working with forms Header Size
Configuring Hyperlinks Slow loading images
No Cache Option Remove the underline from links
Redirect your guests HTML Tags
Mailto: Glyph Character Codes

Remove the Underline from a Single Hyperlink

Make your text stand out by using basic lists

 

Use the Information below at your own risk.  See "Terms of Use"

Using the META Tag
Use META tags to get a more accurate and representative listing of your web site in (some) search engine indexes. By adding your own searchable keywords, you can better communicate with the search engine robots (also referred to as spiders) that index your site. 

Keep in mind, however, that not all search engines rely on robots or recognize META tags. Some search engines ask for a description of your site and keywords when you submit your URL, and will use this text even if you have different information in your META tag. Other search engines don't use robots at all. Yahoo, for instance, relies on you to submit your URL for review, and then Yahoo (real live human) editors will add your site to the Yahoo directory. Of the most popular search engines, Alta Vista, Infoseek and WebCrawler recognize and index information contained in a META tag. 

In addition, when you are trying to come up with a description of your site and appropriate keywords, BE THE ONE WHO SEARCHES. If you were looking for the type of information that your site includes, what keywords would you punch into the search line? What descriptive sentence would lead you to one site as opposed to another? Keep in mind that when a robot visits your site, it will follow links within your site and index them as well. If you change your web site or a single web page, the robot will update the search engine index when it returns to your site anywhere from a couple days to several months later, depending on the search engine. 

META tags are invisible; they will not display when previewing your HTML document through a web browser. For this reason, META tags must fall after the <TITLE></TITLE> tag, between your <HEAD></HEAD> tag, and before the tag as in the following example: 

<HEAD>
<TITLE>This text would contain the title of your page</TITLE>
<META NAME="DESCRIPTION" CONTENT="This text would contain a description of your page">
<META NAME="KEYWORDS" CONTENT="This text would consist of a list of keywords, separated by commas">
</HEAD>

There are many different META tags. You can use one, two, or all of the tags within your web page: 

<META NAME="DESCRIPTION" CONTENT="your text here"> 
Depending on the search engine, the text you include after CONTENT will be displayed along with the TITLE of your page in a search index. A single, brief but descriptive sentence is all you need, but you can use up to 200 text characters (a character is a single letter, space, or punctuation mark). Don't make the DESCRIPTION the same as your TITLE. For example, the following code... 

<HEAD>
<TITLE>"Early American Writers</TITLE>
<META NAME="DESCRIPTION" CONTENT="Early American Writers">
</HEAD> 

...would appear like this in a search engine index that recognizes META tags: 

Early American Writers
Early American Writers 

If you do not include META tags in your HTML, Alta Vista will index all of the words in your document, and will use the first few words of the document as a short abstract or description in the Alta Vista search index. Similarly, Infoseek will derive an index description from the first 200 characters of your HTML document if you choose not to include META tags. 

<META NAME="KEYWORDS" CONTENT="your keyword here, your keyword here"> 
KEYWORDS should be separated by commas (and spaces between commas are not necessary), and you can include 1,000 characters of text (again, a character is a single letter, space, or punctuation mark). For instance, if your site consists of information on early American writers, include author names as keywords: 

<META NAME="KEYWORDS" CONTENT="Hawthorne, Melville, Poe"> 

Early on, some web masters discovered that if you included the same keyword repeatedly within the CONTENT attribute, you could increase your web site's chances of appearing at the beginning of a search index. Search engines caught on, and now, many instruct their robots not to index web sites with repetitive keywords. In fact, Infoseek clearly states: "The overuse and repetition of keywords may result in a lower relevancy score and possible omission from Infoseek's index." 

<META NAME="ROBOTS" CONTENT="NOINDEX"> 
Use this tag if you don't want a specific page to be indexed by a search engine. If you don't want the robot to index any links contained within your web site, add NOFOLLOW to the tag: 

<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"> 

[Top]  

Changing defaults within lists
To change the default bullet in an unordered list, just add the following element to your <LI> tag: 

<LI TYPE=CIRCLE> will give you a hollow circle bullet 
<LI TYPE=DISC> will give you a solid circle bullet 
<LI TYPE=SQUARE> will give you a square bullet
You can also change the default numbering style for ordered lists. Just add the following element to your <OL> tag: 

<OL TYPE="1"> 

will give you Arabic Numerals 1, 2, 3 
will give you Arabic Numerals 1, 2, 3 
will give you Arabic Numerals 1, 2, 3 
<OL TYPE="A"> 

will give you Uppercase letters A, B, C 
will give you Uppercase letters A, B, C 
will give you Uppercase letters A, B, C 
<OL TYPE="a"> 

will give you Lowercase letters a, b, c 
will give you Lowercase letters a, b, c 
will give you Lowercase letters a, b, c 
<OL TYPE="I"> 

will give you Uppercase Roman Numerals I, II, III 
will give you Uppercase Roman Numerals I, II, III 
will give you Uppercase Roman Numerals I, II, III 
<OL TYPE="i"> 

will give you Lowercase Roman Numerals i, ii, iii 
will give you Lowercase Roman Numerals i, ii, iii 
will give you Lowercase Roman Numerals i, ii, iii 
In addition, you can change the starting number in an ordered list by adding the START attribute to the OL tag: 

<OL TYPE="1" START=3> 

will start the numbering at 3 (or whatever number you specify) 
next consecutive number 
next consecutive number 

[Top]  

The TABLE Tag
Use the CAPTION tag to add a description to your table: <CAPTION>Your caption here</CAPTION>

You can use the BGCOLOR attribute to change the color of  a table element:
<TABLE BGCOLOR=YELLOW>
<CAPTION>This demonstrates the use of color</CAPTION>
<TR><TD BGCOLOR=BLUE>blue</TD><TD>yellow</TD></TR>
<TR BGCOLOR=GREEN><TD>green</TD><TD>green</TD></TR>
</TABLE>

[Top] 

Eliminate Paragraph Breaks

Paragraphs are block-level elements no matter what your style sheet says, and browsers will put space between block-level elements. It may break the rules of fine typography, but that's just how browsers render paragraphs. You might consider an HTML paragraph that includes all the text within a section, and just insert a line break and a few non-breaking spaces where you want a new "visual" paragraph. When you start a new section, make a new paragraph, and first words, text-indent, or other CSS properties will only apply to that division. 

[Top]  

Use common fonts

When setting your fonts with the FONT FACE="" command, it's best to choose fonts commonly found on computers. Fairly safe choices include Arial, Century Gothic, and Times New Roman, and any default fonts for Windows or Microsoft Office. If you choose a rarer font, many users may end up with the wrong font displayed on their screens.

[Top]  

Using the ALT Tag

Because users might not enable graphics in their browsers, some visitors might not be able to navigate your site using image-based buttons. Thus, it's a good idea to use text alternatives by means of the ALT variable in the IMG SRC tags. Simply insert the ALT=" " syntax into your image tags and should the graphic not load, a text-based link will.

[Top]  

Using the CENTER Tag

Text and graphics can be centered with the <CENTER> tags. (However, only some WWW clients support the <CENTER> tags.) For example, this HTML: <CENTER><B>How to center text</B></CENTER> which renders this line:


How to center text

[Top]  

Configure a link to download

You can do this by making an FTP link to whatever file you want to download. You would define the link as:
<A HREF=ftp://ftp.host.domain/path/file.cpt.hqx> Download Now </A>

[Top]  

Line Break Spacing

There are two main types of HTML tag which create a line break. For a regular line break
such as between this line and the previous one, is created with the <BR> tag at the end of the text.

A full paragraph break, such as the one between this line and the previous paragraph, is creating by using the <P> tag at the end of the text.

[Top]  

Configure Auto Transfer

If you would like your page to automatically transfer from one page to another, just place the following code between your <HEAD></HEAD> tags.

<META HTTP-EQUIV=REFRESH CONTENT="5;URL=http://www.hopto.com">

5 is the number of seconds you want the current page to be displayed before it transfers, and http://www.jump.com is the URL of the site or specific page that you want the user to transfer to.

[Top]  

GIF -VS- JPEG

The general rule of thumb is to use JPEG for color photographs (images with gradations of color) and the GIF file format for all other web graphics. Only GIF images can be made transparent.

[Top]  

HSPACE and VSPACE

Using HSPACE (horizontal space) and VSPACE (vertical space) within the IMG SRC tag will give you horizontal and vertical padding around an image. For example, the following with give you 8 pixels above, below, and on each side of your image:

<IMG SCR="home.gif" HSPACE=8 VSPACE=8>

[Top]  

Useful Tags and Attributes
Body Tag and Attributes
<BODY>...</BODY> Contains the viewed portion of the document
<BODY bgcolor="color"> Sets the color of the background in hexadecimal code
<BODY background="filename.xxx"> Sets an image as a page's background (wallpaper)
<BODY text="color"> Specifies the color of normal text in hexadecimal code
<BODY link="color"> Specifies the default color of unvisited links in hexadecimal code
<BODY alink="color"> Specifies the color of links on click in hexadecimal code
<BODY vlink="color"> Specifies the color of followed links in hexadecimal code
 
Font Tag and Attributes
<FONT>...</FONT> Changes font attributes for text within the tags
<FONT size="value">...</FONT> Sets the font to a size from 1 to 7, with 1 the smallest and 7 the largest
<FONT face="name">...</FONT> Sets the font face
<FONT color="color">...</FONT> Sets the font color using hexadecimal code
 
Image Tag and Attributes
<IMG> Embeds an image in the document at the location of the tag
<IMG src="url" alt="text"> Adds an image with a text description
<IMG src="url" alt="text" align="direction"> Aligns an image to the left, right, center, bottom, or top
<IMG src="url" alt="text" border="number"> Sets the size of the border around an image
<IMG src="url" alt="text" height="pixels"> Sets the height of an image
<IMG src="url" alt="text" width="pixels"> Sets the width of an image
<IMG src="url" alt="text" hspace="pixels"> Sets a horizontal margin to be placed around an image
<IMG src="url" alt="text" vspace="pixels"> Sets a vertical margin to be placed around an image
<IMG src="url" alt="text" usemap="map-name"> Designates an image as a client-side image map
 
Anchor Tag and Attributes
<A>...</A> Designates the origin and destination of a hyperlink
<A HREF="url">...</A> Creates a hyperlink
<A HREF="#NAME">...</A> Links to a target location in the current page
<A HREF="URL#NAME">...</A> Links to a target location in a page outside your site
<A NAME="NAME">...</A> Sets a target location within a document
<A HREF="mailto:email">...</A> Creates a mailto link
Optional Attributes:
<A HREF="?" target="?">...</A> Specifies where the linked-to document is to be placed
<A HREF="?" rel="?">...</A> Sets up a relationship between the linked-to document and the current page
<A HREF="?" rev="?">...</A> Sets up a reverse relationship between the current page and the linked-to document
 
Table Tags and Attributes
<TABLE>...</TABLE> Generates a table
<TABLE border="pixels"> Sets the size of cell borders
<TABLE cellspacing="pixels"> Sets the amount of space between cells
<TABLE cellpadding="pixels"> Sets the amount of space between a border and cell content
<TABLE height="pixels" or "%"> Sets the height of a table
<TABLE width="pixels" or "%"> Sets the width of a table
<TD>...</TD> Defines a table data cell
<TD colspan="columns"> Sets a cell to span columns
<TD rowspan="rows"> Sets a cell to span rows
<TD nowrap> Prevents the lines within a cell from wrapping
<TH>...</TH> Defines a table header with bold, centered table data
<TR>...</TR> Defines a table row
<TR align="?"> or <TD align="?"> Aligns the contents of a row or cell to the left, right, or center
<TR valign="?"> or <TD valign="?"> Sets the vertical alignment of a row or cell to the top, middle, or bottom
 
Frame Tags and Attributes
<FRAMESET>...</FRAMESET> Specifies the layout of subsections in the main browser window
<FRAMESET rows="value,value"> Defines the rows within a frameset
<FRAMESET cols="value,value"> Defines the columns within a frameset
<NOFRAMES>...</NOFRAMES> Provides alternate content for browsers that do not support frames
<FRAME src="?"> Defines the appearance and content of a single frame
<FRAME name="name"> Labels the frame for targeting by other frames
<FRAME marginwidth="#"> Sets the margin width of a frame
<FRAME marginheight="#"> Sets the margin height of a frame
<FRAME scrolling="value"> Creates a frame scrollbar
<FRAME noresize> Prevents the resizing of a frame
 
Form Tags and Attributes
<FORM>...</FORM> Generates a container for all form elements
<FORM action="url"> Designates the path of the script to process input from the form
<FORM method="get|post"> Instructs the browser how to interact with the form URL
<FORM accept="media type"> Defines which MIME types are supported by the server processing the form
<FORM accept-charset="text"> Defines which character sets are supported by the server processing the form
<FORM enctype="media type"> Defines the format of the submitted data
<OPTION> Defines each menu item
<SELECT name="NAME">...</SELECT> Generates a pull-down menu
<INPUT type="checkbox"> Generates a check box
<INPUT type="hidden"> Conceals a field from view
<INPUT type="image"> Generates an image that acts like a Submit button
<INPUT type="password"> Generates a one-line password box
<INPUT type="radio"> Generates a radio button
<INPUT type="text"> Generates a one-line text box
<INPUT type="submit"> Generates a Submit button (send form)
<INPUT type="reset"> Generates a Reset button (clear form)
[Top]  

Text Formatting
There are many effects that can be applied to text formatting. These can be very useful.

<SMALL>text</SMALL><BR>
<STRIKE>oops!</STRIKE><BR>
<BIG>LARGE</BIG><BR>
<STRONG>NO</STRONG><BR>

This HTML will display the following text:

text
oops!
LARGE
NO

As you can see, the SMALL tag makes the text smaller. The STRIKE tag puts a horizontal line through the text, the BIG tag makes the text larger, and the STRONG tag has the same effect as the B tag.

[Top]  

Working with forms

Forms are an excellent way to get information or feedback from your guests. Don't be afraid of them, they are very simple. Below is a very basic one to help get you started:

<FORM METHOD="POST" ACTION="/CGIBIN/FILETO">
<INPUT TYPE="HIDDEN" SIZE="32" NAME="CHECKME" VALUE="form">
<INPUT TYPE="CHECKBOX" NAME="CHECKME">Tick this
<P>
<INPUT TYPE="TEXT" SIZE=25>How did you find us?:
<P>
<SELECT NAME="DRAG" SIZE="2">
<OPTION>Search Engine
<OPTION>Newsletter
<INPUT TYPE="SUBMIT" value=" Submit ">
</SELECT>

This would produce this simple form;

Tick this  

How did you find us?: 

Don't click Submit! It simply will not work. Now, the first line of HTML is there to tell the software that it is dealing with a form, and where to send the information if Submit is entered. The Action given tells the browser the address of the server it needs to send the information to, and the METHOD tells it that it that it must POST the information to the server in question. Try asking your ISP about their servers, and if they could set up an account for you.

The next two lines are setting up the checkbox, and the NAME is again, telling the server about what parts of the message it needs to deal with. With all of the boxes, the SIZE attribute affects the size oif the box. After each INPUT TYPE, TEXT will produce a text box, CHECKBOX will produce a checkbox, and RADIO will produce a radio box. The OPTION type will produce a drag-down list with all the available options listed on it.

[Top]  

Header Size
<H1>SIMON SAYS</H1>
<H2>SIMON SAYS</H2>
<H3>SIMON SAYS</H3>
<H4>SIMON SAYS</H4>
<H5>SIMON SAYS</H5>
<H6>SIMON SAYS</H6>

This is what that sample HTML displays:

HEADER

HEADER

HEADER

HEADER

HEADER
HEADER

As you can see, the larger the number after H, the smaller the text.
This is most useful for headings at the beggining of the page

[Top]  

Configuring Hyperlinks

Links link one page to another page. They are essential if you site is composed of more than one page, or if you want to link to other sites on the Web. Example #1 in an internal link to an anchor that is set on the subject above (Header Size).  Example #2 is an external link to a web site outside of this one.

1)<a href="http://www.5starsupport.com/info/htmlinfo.htm#header-size">Text Link #1</a>

2)<a href="http://www.yahoo.com">Text Link #2</a>

Example= Text Link #1

Example= Text Link #2  

[Top]  

Slow Loading Images

There are some things that you can do before getting rid of your colorful images:
  1. You can remove all of the spaces between your coding, also called "Whitespace".  By doing this, you will allow the browser to view the HTML much faster speeding up the load time.
  2. Be sure to use the height and width tags on your images.  If you do not use these tags, the text will have to wait until the images are loaded thus making your guests wait to view your content. This will allow the browser to read the images much quicker.
  3. Avoid putting tables inside of tables. This takes the browser longer to calculate the spacing.
  4. If possible, use GIF's over JPEG's because GIF images generally load a bit faster. Don't sacrifice to much resolution though.
  5. Reduce the overall bytes of your images.  You can easily shed hundreds of bytes off of your image without sacrificing the image quality. For GIF's try: HVS GIFCruncher  For JPEG's try: JPEG Wizard. 
  6. If you have an image that loads slowly, put this on the page leading to it, such as a splash page that leads to your main page:
    <IMG src="imagename.gif" border=0 width=1 height=1>
    This will load the image into the browsers cache before they arrive on that page, speeding up the load time considerably. It is almost invisible, just place it in an inconspicuous spot. 

Note: This should work with any browser.

  1. Another easy way to preload an image and speed up load time is to insert this into the HEAD of your page:
    <SCRIPT language="JavaScript">
    <!--
    var preload=new Image();
    preload.src="(insert name of image here)";
    -->
    </SCRIPT>

Note: This will work with any JavaScript enabled browsers.

[Top]  

No Cache Option

If you update your pages often.  You may want to configure your web page to not cache the page, giving your visitors a fresh look at every visit. Here's how:

Place these META tags in between your <HEAD> and </HEAD> tags.

<META HTTP-EQUIV="Expires" CONTENT="Wed, 25 Dec 2000 12:00:00 EST"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
The date should be simply a date in the past so the browser will automatically cancel the cached copy. Both the "Expires" and the "no-cache" tags are used due to the older browsers recognizing the "no-cache" tag only.

[Top]  

Remove the underline from links

You can remove the underline easily by adding the following code between the </title> and </head> tags in your page.

<style type="text/css"><!--A:link {text-decoration:none}
A:visited {text-decoration:none}--> </style>

Note: This effect will only work with Netscape 4.0+ and Internet Explorer 3.0+

[Top]  

Redirect your guests

To redirect to another page use this code:

<HTML>

<HEAD>
<TITLE>I moved!!!</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="5;URL=http://www.newpage.com/">
</HEAD>

<BODY>

I have moved!
Your browser should automatically take you there in 5 seconds. If it doesn't please go to http://www.newpage.com/

</BODY>

</HTML>  

Note: "CONTENT="5;" The 10 specify's a 5 second delay. Use whatever number of delay you desire.

[Top]  

HTML Tags

Basic Tags: 

<html></html>
Creates an HTML document: Every web page begins and ends with these tags. 


<head></head>
Sets up the title and other information that isn't displayed on the Web page itself. The title appears in the blue bar at the top of the screen and is used in searching for your page. Meta tags and Javascript information is put here so that it can be preloaded with the page.

<body></body>
Sets off the visible portion of the document that appears in the main window of the browser. Whatever you want to appear on your screen should be put between the body tags!

-----------------------------------------------
----------------------------------------------- [Top]

Header Tags:

 <title></title>
Puts the name of the document in the title bar or blue bar at the top of the screen. It is important that you choose a title that will make it easy to find your page.

------------------------------------------------
------------------------------------------------[Top]

Body Attributes: 

<body bgcolor=?>
Sets the background colour, using name or hex value. See the colour page to find your perfect colour.

<body text=?>
Sets the text colour, using name or hex value

<body link=?>
Sets the colour of links, using name or hex value

<body vlink=?>
Sets the colour of followed links, using name or hex value

<body alink=?>
Sets the colour of links on click

-----------------------------------------------
-----------------------------------------------[Top]

Text Tags: 

<pre></pre>
Creates preformatted text. It is good practice to use this method to keep your page standardized across browsers and screen settings.

<h1></h1>
Creates the largest headline. Think of it like a newspaper: Set the headings to appropriate size based on importance.

<h6></h6>
Creates the smallest headline

<b></b>
Creates bold text

<i></i>
Creates italic text

<tt></tt>
Creates teletype, or typewriter-style text: good to use to offset text

<cite></cite>
Creates a citation, usually italic

<em></em>
Emphasizes a word (with italic or bold)

<strong></strong>
Emphasizes a word (with italic or bold)

<font size=?></font>
Sets size of font, from 1 to 7)

<font color=?></font>
Sets font color, using name or hex value

------------------------------------------------
------------------------------------------------[Top]

Links:

<a href="URL"></a>
Creates a hyperlink: link within or between documents.

<a href="mailto:EMAIL"></a>
Creates a mailto link: used to email the results of a form 

<a name="NAME"></a>
Creates a target location within a document

<a href="#NAME"></a>
Links to that target location from elsewhere in the document

-----------------------------------------------
-----------------------------------------------[Top]

Formatting:

<p></p>
Creates a new paragraph

<p align=?>
Aligns a paragraph to the left, right, or centre

<br>
Inserts a line break

<blockquote>
</blockquote>
Indents text from both sides

<dl></dl>
Creates a definition list

<dt>
Precedes each definition term

<dd>
Precedes each definition

<ol></ol>
Creates a numbered list

<li></li>
Precedes each list item, and adds a number

<ul></ul>
Creates a bulleted list

<div align=?>
A generic tag used to format large blocks of HTML, also used for stylesheets

----------------------------------------------
----------------------------------------------[Top]

Graphical Elements:

<img src="name">
Adds an image

<img src="name" align=?>
Aligns an image: left, right, centre; bottom, top, middle

<img src="name" border=?>
Sets size of border around an image

<hr>
Inserts a horizontal rule

<hr size=?>
Sets size (height) of rule

<hr width=?>
Sets width of rule, in percentage or absolute value

<hr noshade>
Creates a rule without a shadow

-----------------------------------------------
-----------------------------------------------[Top]

Tables:

<table></table>
Creates a table

<tr></tr>
Creates each row in a table

<td></td>
Creates each cell in a row

<th></th>
Sets off the table header (a normal cell with bold, centered text)

-----------------------------------------------
-----------------------------------------------[Top]

Table Attributes:

<table border=#>
Sets width of border around table cells

<table cellspacing=#>
Sets amount of space between table cells

<table cellpadding=#>
Sets amount of space between a cell's border and its contents

<table width=# or %>
Sets width of table - in pixels or as a percentage of document width

<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right)

<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan=#>
Sets number of columns a cell should span

<td rowspan=#>
Sets number of rows a cell should span (default=1)

<td nowrap>
Prevents the lines within a cell from being broken to fit

----------------------------------------------
----------------------------------------------[Top]

Frames:

<frameset></frameset>
tag in a frames document; can also be nested in other framesets

<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of width

<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width

<frame>
Defines a single frame - or region - within a frameset

<noframes></noframes>
Defines what will appear on browsers that don't support frames

-----------------------------------------------
-----------------------------------------------[Top]

Frames Attributes:

<frame src="URL">
Specifies which HTML document should be displayed

<frame name="name">
Names the frame, or region, so it may be targeted by other frames

<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to or greater than 1

<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto. " The default, as in ordinary documents, is auto.

<frame noresize>
Prevents the user from resizing a frame

----------------------------------------------
----------------------------------------------[Top]

Forms:

<form></form>
Creates all forms

<select multiple name="NAME" size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

<option>
Sets off each menu item

<select name="NAME"></select>
Creates a pulldown menu

<option>
Sets off each menu item

<textarea name="NAME" cols=40 rows=8></textarea>
Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.

<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag

<input type=text name="foo" size=20>
Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME">
Creates a Submit button

<input type="image" border=0 name="NAME" src="name.gif">
Creates a Submit button using an image

<input type="reset">
Creates a Reset button

[Top]  

Mailto:

There are many ways to created a pre-formatted email link, here are a few examples:

Regular mailto:

There are many ways you can use the mailto to send pre-formatted email. Here
are a few: normal mailto: <a href="mailto:webmaster@5starsupport.com">5 Star Support</a>

Example: 5 Star Support

mailto with subject:

<a href="mailto:webmaster@5starsupport.com?subject=Join 5 Star Support">Join 5 Star Support</a>

Example: Join 5 Star Support

mailto with several recipients and subject:

<a href="mailto:joe@5starsupport.com,jim@5starsupport.com,bob@5starsupport.
com?subject=Suggestion">Suggestion</a>

Example: Suggestion

mailto with recipient, cc and bcc (carbon copy and blind carbon copy):

<a href="mailto:joe@5starsupport.com?subject=MeetingTime!&cc=jim@
5starsupport.com&bcc=bob@5starsupport.com">Meeting time!<a/>

Example: Meeting Time!

mailto with subject and body:

<a href="mailto:webmaster@5starsupport.com?subject=Meeting Time!&body=My office @ 5:00pm 8-30-01">Meeting Time!</a>

Example: Meeting Time!

[Top]  

Glyph Character Codes

Name Code Number Code Glyph Description
&lsquo; ‘   left single quote
&rsquo; ’   right single quote
&sbquo; ‚   single low-9 quote
&ldquo; “   left double quote
&rdquo; ”   right double quote
&bdquo; „   double low-9 quote
&dagger; †   dagger
&Dagger; ‡   double dagger
&permil; ‰   per mill sign
&lsaquo; ‹   single left-pointing angle quote
&rsaquo; ›   single right-pointing angle quote
&spades; ♠   black spade suit
&clubs; ♣   black club suit
&hearts; ♥   black heart suit
&diams; ♦   black diamond suit
&oline; ‾   overline, = spacing overscore
&larr; ←   leftward arrow
&uarr; ↑   upward arrow
&rarr; →   rightward arrow
&darr; ↓   downward arrow
&trade; ™   trademark sign
&#09; horizontal tab
&#10; line feed
&#32; space
&#33; !   exclamation mark
&quot; &#34; "   double quotation mark
&#35; #   number sign
&#36; $   dollar sign
&#37; %   percent sign
&amp; &#38; &   ampersand
&#39; '   apostrophe
&#40; (   left parenthesis
&#41; )   right parenthesis
&#42; *   asterisk
&#43; +   plus sign
&#44; ,   comma
&#45; -   hyphen
&#46; .   period
&frasl; &#47; /   slash
&#48;-
&#57;		 digits 0-9
&#58; :   colon
&#59; ;   semicolon
&lt; &#60; <   less-than sign
&#61; =   equals sign
&gt; &#62; >   greater-than sign
&#63; ?   question mark
&#64; @   at sign
&#65;-
&#90;		 uppercase letters A-Z
&#91; [   left square bracket
&#92; \   backslash
&#93; ]   right square bracket
&#94; ^   caret
&#95; _   horizontal bar (underscore)
&#96; `   grave accent
&#97;-
&#122;		 lowercase letters a-z
&#123; {   left curly brace
&#124; |   vertical bar
&#125; }   right curly brace
&#126; ~   tilde
&ndash; &#150; –   en dash
&mdash; &#151; —   em dash
&nbsp; &#160;     nonbreaking space
&iexcl; &#161; ¡   inverted exclamation
&cent; &#162; ¢   cent sign
&pound; &#163; £   pound sterling
&curren; &#164; ¤   general currency sign
&yen; &#165; ¥   yen sign
&brvbar; or &brkbar; &#166; ¦   broken vertical bar
&sect; &#167; §   section sign
&uml; or &die; &#168; ¨   umlaut
&copy; &#169; ©   copyright
&ordf; &#170; ª   feminine ordinal
&laquo; &#171; «   left angle quote
&not; &#172; ¬   not sign
&shy; &#173; ­   soft hyphen
&reg; &#174; ®   registered trademark
&macr; or &hibar; &#175; ¯   macron accent

[Top]

Name Code Number Code Glyph Description
&deg; &#176; °   degree sign
&plusmn; &#177; ±   plus or minus
&sup2; &#178; ²   superscript two
&sup3; &#179; ³   superscript three
&acute; &#180; ´   acute accent
&micro; &#181; µ   micro sign
&para; &#182; ¶   paragraph sign
&middot; &#183; ·   middle dot
&cedil; &#184; ¸   cedilla
&sup1; &#185; ¹   superscript one
&ordm; &#186; º   masculine ordinal
&raquo; &#187; »   right angle quote
&frac14; &#188; ¼   one-fourth
&frac12; &#189; ½   one-half
&frac34; &#190; ¾   three-fourths
&iquest; &#191; ¿   inverted question mark
&Agrave; &#192; À   uppercase A, grave accent
&Aacute; &#193; Á   uppercase A, acute accent
&Acirc; &#194;    uppercase A, circumflex accent
&Atilde; &#195; à  uppercase A, tilde
&Auml; &#196; Ä   uppercase A, umlaut
&Aring; &#197; Å   uppercase A, ring
&AElig; &#198; Æ   uppercase AE
&Ccedil; &#199; Ç   uppercase C, cedilla
&Egrave; &#200; È   uppercase E, grave accent
&Eacute; &#201; É   uppercase E, acute accent
&Ecirc; &#202; Ê   uppercase E, circumflex accent
&Euml; &#203; Ë   uppercase E, umlaut
&Igrave; &#204; Ì   uppercase I, grave accent
&Iacute; &#205; Í   uppercase I, acute accent
&Icirc; &#206; Π  uppercase I, circumflex accent
&Iuml; &#207; Ï   uppercase I, umlaut
&ETH; &#208; Р  uppercase Eth, Icelandic
&Ntilde; &#209; Ñ   uppercase N, tilde
&Ograve; &#210; Ò   uppercase O, grave accent
&Oacute; &#211; Ó   uppercase O, acute accent
&Ocirc; &#212; Ô   uppercase O, circumflex accent
&Otilde; &#213; Õ   uppercase O, tilde
&Ouml; &#214; Ö   uppercase O, umlaut
&times; &#215; ×   multiplication sign
&Oslash; &#216; Ø   uppercase O, slash
&Ugrave; &#217; Ù   uppercase U, grave accent
&Uacute; &#218; Ú   uppercase U, acute accent
&Ucirc; &#219; Û   uppercase U, circumflex accent
&Uuml; &#220; Ü   uppercase U, umlaut
&Yacute; &#221; Ý   uppercase Y, acute accent
&THORN; &#222; Þ   uppercase THORN, Icelandic
&szlig; &#223; ß   lowercase sharps, German
&agrave; &#224; à   lowercase a, grave accent
&aacute; &#225; á   lowercase a, acute accent
&acirc; &#226; â   lowercase a, circumflex accent
&atilde; &#227; ã   lowercase a, tilde
&auml; &#228; ä   lowercase a, umlaut
&aring; &#229; å   lowercase a, ring
&aelig; &#230; æ   lowercase ae
&ccedil; &#231; ç   lowercase c, cedilla
&egrave; &#232; è   lowercase e, grave accent
&eacute; &#233; é   lowercase e, acute accent
&ecirc; &#234; ê   lowercase e, circumflex accent
&euml; &#235; ë   lowercase e, umlaut
&igrave; &#236; ì   lowercase i, grave accent
&iacute; &#237; í   lowercase i, acute accent
&icirc; &#238; î   lowercase i, circumflex accent
&iuml; &#239; ï   lowercase i, umlaut
&eth; &#240; ð   lowercase eth, Icelandic
&ntilde; &#241; ñ   lowercase n, tilde
&ograve; &#242; ò   lowercase o, grave accent
&oacute; &#243; ó   lowercase o, acute accent
&ocirc; &#244; ô   lowercase o, circumflex accent
&otilde; &#245; õ   lowercase o, tilde
&ouml; &#246; ö   lowercase o, umlaut
&divide; &#247; ÷   division sign
&oslash; &#248; ø   lowercase o, slash
&ugrave; &#249; ù   lowercase u, grave accent
&uacute; &#250; ú   lowercase u, acute accent
&ucirc; &#251; û   lowercase u, circumflex accent
&uuml; &#252; ü   lowercase u, umlaut
&yacute; &#253; ý   lowercase y, acute accent
&thorn; &#254; þ   lowercase thorn, Icelandic
&yuml; &#255; ÿ   lowercase y, umlaut

How to Remove the Underline from a Single Hyperlink

Using FrontPage 2003 there are two possible ways to remove the default underline formatting from a single hyperlink:

  • Method #1: Use the Underline button on the Formatting toolbar. Here's how:
  1. Select the hyperlink that you would like to re-format.
  2. On the Formatting toolbar, click the Underline button (The "U" with an underline).

The hyperlink will no longer be underlined. It's just that simple!

  • Method #2: Use the text-decoration cascading style sheet (CSS) attribute.
  1. In FP 2003, click the Code tab at the bottom-left of the FrontPage window.
  2. Locate the hyperlink that you would like to re-format. The code will look similar to the example below:

  1. Insert the style tag with the style="text-decoration:none" attribute in the anchor tag. Your code should look similar to the example below:

  1. On the File menu, click Save.

The hyperlink will no longer be underlined.

[Bonus Tip] How to Remove the Underline from All Hyperlinks

FrontPage makes it easy to remove the underline from all hyperlinks in a page by adding a <STYLE> section to the page. Here's how:

  1. Open the page that you would like to re-format.
  2. Click the Code tab.
  3. Place the following HTML code before the <BODY> tag:

  1. Click the Design tab.

Your hyperlinks will no longer have underlines.

[Top]

Make your text stand out by using basic lists

The two basic lists in this tip are very simple to create and are great ways to make your important text recognized by your visitors. Notice that the only difference between an ordered list and an unordered list is the opening and closing tag.

By using ordered lists, you can create an organized way to define important items in their order of importance.

Unordered lists are usually all things equal. But, in the event you have one that you would like to be noticed first, then by all means, place it in the first spot.

Here's how to create your lists:

<ol style="color: #F3E9CD; font-family: Tahoma; font-size: 10pt">
<li><font color="#F3E9CD"><font face="Tahoma" size="2"><b>Reach out to your readers with rich content</b></font></li>
<li><font face="Tahoma" size="2"><b>Use everyday words when writing</b></font></li>
<li><font face="Tahoma" size="2"><b>Create stylish menu's to showcase your text</b></font></font></li>
</ol>

<ul style="color: #F3E9CD">
<li><a href="http://www.5starsupport.com/support.htm">
<font face="Tahoma" size="2">Free Technical Support Form</font></li>
<li><a href="http://www.5starsupport.com/palm.htm"><font face="Tahoma" size="2">Palm Handheld Tips</font></li>
</ul>

Here's how these lists look in a browser:

  1. Reach out to your readers with rich content
  2. Use everyday words when writing
  3. Create stylish menu's to showcase your text

[Top]

   Site Map  | About 5 Star Support  | Links | Comments
    Privacy Policy  | Terms of Use  | Newsletter Archive  | Awards
Usage of this site constitutes acceptance of our Terms of Use
Copyright © 2000-2011  5 Star Support All rights reserved.