Typestyle Effects

Hyperlink and Image Tips

Additional Tips

Useful Links

 


Welcome to our section on customizing the look and feel of your Web site. After you have entered specific information about your office and products in the appropriate sections, you may want to include special type effects or add additional links within a page. You can use these pages and the hyperlinks provided on the left to create those effects.

For tips on typestyle effects, click here.

For tips on hyperlinks and images, click here.

For additional tips not covered in these sections, click here.

Typestyle Effects
Below are samples of additional text (HTML tags) that need to be added around text in order to create special effects.

If you wish, you can move your mouse to one end of the sample text and tags shown below, hold the left mouse button, and drag on the needed example. Right-click the highlighted material and choose "copy" to copy the selected text. Go to a specific section of your site administrator where you want the text effect to appear. Click the mouse into the specific location within the text block where you want the text effect to appear, right-click, and select "paste." Then select the text that appears within the HTML tags ( the < and > symbols) to make your changes.

How Do I ...
Bold, Italicize, Underline, or Center Text?
Change Font Styles?
Change Font Size?
Change Font Color?

To bold, italicize, underline, or center text:
To change a word or sentence, put the following commands before and after the word/sentence:

bold   <B> This would appear in bold</B>
italic   <I> This would appear in italics</I>
underlined   <U>This would appear underlined</U>

   <CENTER>All text in here will be centered</CENTER>

Back to top

To change font styles:
Type the following HTML tag immediately before and after the text you want to change:

   <FONT FACE="arial">This text will appear in arial font.</FONT>

Be careful not to use a font that the majority of computers will not have. The recommended fonts are: Arial, Algerian, Bookman, Braggadocio, Courier, Desdemona, Garamond, and Modern. You can try these fonts in Microsoft Word and most other word processors if you want to look at them first.

Back to top

To change font size:
Type the following HTML tag immediately before and after the text you want to change:

   <FONT SIZE="3">This text will appear in size 3 font.</FONT>

You have 1, 2, 3, 4, 5, 6, and -1, -2, -3, -4, -5, -6 as options for font size.

Back to top

To change font color:
Type the following HTML tag immediately before and after the text you want to change:

   <FONT COLOR="#FF6633">This text will appear in red.</FONT>

For a list of web-safe colors, please see List of "safe" colors (A++) .

Back to top

 

Hyperlink and Image Tips
Below are samples of additional text (HTML tags) that need to be added around text in order to create special effects.

If you wish, you can highlight the sample text and tags shown below, and right click to bring up a menu used to copy the selected text. Go to a specific section of your site administrator where you want the text effect to appear. Click the mouse into the specific location within the text block where you want the text effect to appear, right-click and select "paste" to paste the material into a text field. Then select the text that appears within the HTML tags ( the < and > symbols) to make your changes.

How do I ...
Create links to other sites?
Link images from the Internet into my site?
Link images that I have loaded into my site?
Make a hyperlinked image so that people can click on an image?
Get rid of that blue border around my hyperlinked images?
Make an anchor link? What can they do?

To create links to other sites
Go into the site manager to the area you would like the link to appear (most commonly the disclaimer or Our Services section) and simply type in the tag as shown below. The example below would create a link to the Emerald home page.

     Click here for <A HREF="http://www.emeraldpublications.com">Emerald Publications.</A>

The words "Emerald Publications" would appear underlined and in blue. When you click on those words, it would take you to www.emeraldpublications.com.

Back to top

To link images from the Internet into my site
You will need to find out the URL (uniform resource locater or web address) of the image you want to link into your site. Once you have the URL, then you need to paste into the site manager.

Internet Explorer: Go to the Web page where the image is residing on the Internet. Using your mouse, move the arrow or cursor to the image and right-click. A new menu window will pop up. Go down to "properties" and click. Another window will pop up. You will see the image address http://www.addressofpicture.jpg. Highlight this address, right-click, and hit Copy.

Netscape: Go to the Web page where the image is residing on the Internet. Using your mouse, move the arrow or cursor to the image and right-click. A new menu window will pop up. Go down to "copy image location," and click.

You now have copied the URL of the image you wish to paste into your site.

Go into your site manager. Decide where you want the image to be inserted. Add this code exactly where you want the image to show.

<img src=" ">.

Put your cursor inside the quotation marks, right-click and hit Paste. Go to the bottom of the page. Click Save Changes.

Back to top

To link images that I have loaded into my site
Please see Navigating the Site Administrator

Back to top

Make a hyperlinked image so that people can click on an image
This section discusses additional text that must be added to the commands used to bring the image into your web page. If you have not entered those commands yet, see this section first.

In the section of the site manager that contains these commands, there should be something like the following: <img src=" some text ">.

To the left of that text, add <a href=" http://the-url-of-the-website-to-link.com ">, replacing the URL of the Web site you wish to reach with the sample copy shown above.

To the right of that image source text, add </a>.

The final command should look something like
<a href="website.com"> <img src="URL of image"> </a>

Be sure to hit the Save Changes button at the bottom of the page. You should be able to see the image on your preview site. When you click on it you will be linked to that Web site.

Back to top

Get rid of the blue border around my hyperlinked images
This section discusses additional text that must be added to the link used to hyperlink an image on your Web page. If you have not done that yet, see this section first.

In the section of the site manager that contains this code, there should be something like the following: <a href="website.com"> <img src="URL of image"> </a>

Before the closing greater-than sign, add the following text: BORDER="0". The text should now look something like the following:

<a href="website.com"> <img src="URL of image" BORDER="0"> </a>

Save changes and preview the site. That should get rid of the blue border around hyperlinked images.

Back to top

Make an anchor link? What do they do?
An anchor link allows you to link to specific sections within Web pages.

Type the following code where you want the link to appear.

<a href="PAGE NAME.cfm#LINK">NAME</a>

where PAGE NAME = name of page in Web site that you are linking to, such as the calendar or location page. If you are linking to another section within the same page, the PAGE NAME.cfm is not needed.

LINK = can use almost any word. It's a keyword or flag for the link to look for within the linked page.

NAME = text that appears on the site for clients to click on to link to the other page.

Now you need to go to the page or part of the page where the link is going to in the Web site and type in the following code. This goes before the text that it's linking to.

<a name="LINK"></a> text goes here

where LINK = the word that you put above to act as a keyword or flag for the link to go to. It has to match the LINK used in the "a href ... " command used above.

Back to top

 

Additional Tips
Below are solutions to additional questions asked by our clients. These solutions do require minimal HTML tag entry, which is shown within each section.


To Put an E-Mail Address on Other Parts of the Site
To Put Multiple Addresses in "Our Location" Section

To Put an E-Mail Address on Other Parts of the Site
This is known as a mailto: command. Just type this command (replacing the name and e-mail with your own information) into the site manager where you want the link to appear. This creates blue wording on the screen where people can click to send you e-mail.

   <A HREF="mailto:techsupport@emeraldmail.com">Click here to contact techsupport</A>

Please notice there is NO SPACE between the colon and the e-mail address. This HTML tag would cause "Click here to contact Doug" to appear in blue.

Back to top

To Put Multiple Addresses in "Our Location" Section
While in the My Company Info section of the Site Administrator, enter your address information in the appropriate fields. When entering info in the "Zip" field, also add the phone and fax numbers to your first address. In the "Phone" field, enter your second address information along with your second address phone number. In the "Fax" field enter the fax number of your second address and you're done.

Back to top

 

Useful Links
The following is a collection of links on the topic of HTML.

http://www.htmlgoodies.com

HTML Resources Through the Net

Yahoo! HTML

HTML Quick Reference

List of "safe" colors (A++)

Web Page Tools & Information

 

© 2001 Emerald Publications