How to Make This Thing Connect to That Thing

Hyper-linking is the means of making something in an email template or web page "clickable".

Setting Links With the Email Editor Toolbar

 

Select the text (or image) you want to link by clicking the mouse in front of the first character then while holding down the mouse button, drag over the text to the point that you want the linking to appear then letting up on the mouse button. For images, just click on the image and it is selected.

Select the Add/edit link button. Set the web address you want to be displayed when the link is clicked. For best results, go to the web page in another browser then copy the address from the address bar and paste it into the URL field. This minimizes the possibility of a bad link that can occur from a typo.

The Add/edit link dialog has three tabs, Link Info, Target and Advanced.

Link Info

The Link Info tab has three fields.

Link Type

Link Type sets what kind of link this is.

• URL is used for web addresses and resources on the Internet.
• Link to anchor in the text is for going to a specific location on a web page. You must have inserted anchorsbefore you can use this feature.
• E-mail is for creating an email link that causes a new email to be created when selected. You have the option of setting the email subject and the email body automatically with this link tool.

Protocol

Set the protocol for this link connection. Most likely you will use the http::// option (HyperText Transfer Protocol) unless you are linking to a secure resource in which case you would use the https:// option. Three other options available in the Protocol drop down menu are ftp:// (File Transfer Protocol), news:// (News feed protocol), and <other> for linking to uncommon resources on the Internet.

URL

URL is the address of the resource you want to link to.

Target

You set how you want the resource to load on the Target tab.

<not set> - No target is set, will use default behavior which is to load into the same window that the link was selected from.

<frame> - DO NOT USE - WILL NOT WORK. Load the resource into the frame named in the Target Frame Name field. Useful for web pages, not emails.

<popup window> - DO NOT USE - WILL NOT WORK. Makes use of scripting which will not work in emails. Useful for web pages, not emails.

New Window (_blank) - Load the linked resource into a new tab or window.

Topmost Window (_top) - Opens the linked resource in the full body of the window. Like Same Window but ignores commands in code to load elsewhere into a subsection of the page. Useful for web pages, not emails.

Same Window (_self) - Load the linked resource into the same window that you clicked the link in.

Parent Window (_parent) - Opens into the parent object. Useful for web pages, not emails.

Advanced

The Advanced tab contains some expert options some of which you may find useful. None of these are required for your email to function. It is likely you will ignore this tab.

Id - Used to assign a name to object on the web page that can be addressed via code. You are very unlikely to ever use this.

Language Direction - Is the language that the link connects to read right to left or left to right?

Access Key - Used to assign a keyboard shortcut to the link.

Name - Like Id.

Language Code - Used to identify the language of the linked resource which helps search engines and browsers. Language codes can be seen at "W3School's "HTML Language Code Reference". Not likely something you need to worry about unless you are linking to a site which is in a different language than the linked page..

Tab index - Used to set the order that tabbing goes through. Pressing the tab key will cycle through all of the tab'able items. You can force the order that tabbing moves from item to item by setting the tab index. May or may not be useful to you. Likely more work than its worth. If you set one you must set them all otherwise you will have unpredictable results.

Advisory Title - Sets the hover or informational text. Useful for proving information about the linked resource by hovering your mouse over the link, producing a bubble with the information.

Advisory Type - Declare the content (MIME - Multipurpose Internet Mail Extensions) type of the linked resource. Ex: text/css, text/plain, application/octet-stream, etc. Do not need to use.

Stylesheet Classes - If you have a predefined stylesheet class  you can enter it here.

Linked Resource Charset - The character set of the linked resource. Unicode? Latin Alphabet?

Relationship - Specifies the relationship between the linking document and the linked document. Ex, index, glossary, copyright, etc.

Style - The one field you will likely use on the advanced tab. Use this to set the color of your link. I.e., add "color:white" to make your link color display with white text. Web color names can be found at W3School's "HTML Color Names".

Common styles (type any of these into the Style field):

• To make a hyperlink white use color:white;
• To make a hyperlink black use color:black;
• To turn off the underlining of the hyperlink use text-decoration:none;

To color a hyperlink with specific RGB color values, use color:rgb(R##,G##,B##); i.e., color:rgb(255,255,255) is white, color:rgb(0,0,0) is black.

If you add multiple items they must be separated with the semi-colon. For example, color:white;text-decoration:none;font-weight:bold

Working in HTML

In HTML hyper-linking is accomplished with the use of the Anchor tag.The only difference between this and using the toolbar is that the toolbar does the code work for you. It is the same code as what you will see here, but using a tool to do it in which you don't have to know HTML to link an image or some text.

An Anchor tag is a paired tag meaning that it has a prefix tag and a suffix tag counterpart. For example,

<a href="http://www.gothere.com/">Stuff the reader sees</a>

Let's look at the individual parts of this linking,

<a - start hyper-linking,

href="http://www.gothere.com/" - web site address you want to link to,

> - end of the prefix tag,

Stuff the reader sees - The hyper-linked text,

</a> - stop the hyper-linking here.

You have many more options that you can work with if you know HTML. See W3Schools's entry on the <a> HTML element for how to code this tag in HTML.

For a very helpful website on editing HTML see W3Schools.com. See W3's Quick list for common web editing elements.