Archive for the 'Web Site Design' Category

Adding Hyperlinks to your web site

Thursday, May 15th, 2008

The World Wide Web is a huge assortment of various web sites and documents, many of which are linked together for easy navigation from one to another by viewers. The element which creates such an interlinked connection is often referred to as a hyperlink. A hyperlink is either an image or colored text which, when clicked by a viewer, takes the viewer to another web site. In today’s post we’ll cover how to add hyperlinks to your web site.

To add a hyperlink, you use a small bit of HTML (HyperText Markup Language) code. Once you understand the HTML format required, adding a hyperlink is really quite easy… you just add the bit of code to the Body Text area of the Modification form for your WebSpawner website.

Let’s start off with a text hyperlink. The HTML code required is in the following format:

<a href=”URL”>
The Text to be displayed goes here
</a>

This particular HTML tag is called the Anchor tag. It’s really not complicated; you simply substitute in the URL address and the text to be displayed. Here is an example:

<a href=”http://www.webspawner.com”>
Create a free web site!
</a>

The line of code above will result in text displaying on your web site like this:

Create a free web site!

The text that you substitute into the ‘text to be displayed’ portion is displayed as colored clickable text, and when that colored text is clicked, it takes the viewer to the web site indicated by the URL address.

Now let’s take a look at the format for using an image as a hyperlink:

<a href=”URL”>
<img src=”URLofImage”>
</a>

Using this format, you simply substitute in the URL of the web site to which you are linking, as well as the URL address of the image that you wish to have displayed (the image must exist somewhere online… see Tips below for more information). Here is a usage example:

<a href=”http://www.webspawner.com”>
<img src=”http://www.webspawner.com/ads/freewebpages/wsanrevb.gif”>
</a>

Adding this line of code will result in a clickable image being displayed on your web site like this one:

When the image hyperlink is clicked, the viewer is then taken to the web site indicated by the URL address.

You can add hyperlinks of either type to the Body Text area of your WebSpawner web site any time you are in the Modification form.

Some closing tips:

• For your first few hyperlinks, try selecting and Copying (Control-C on a Windows PC, or Command-C on a Mac) the format we have provided above and then Pasting it (Control-V on Windows, or Command-V on Mac) into the Body Text area of the Modification form. Then you can easily replace just the URL and Text portions as you wish to create your own hyperlink.

• The easiest way to correctly enter the URL address for a web site is to first visit that web site in a separate browser window, then click in the Address Bar to select all of the address there and Copy it. Then you can simply Paste the entire URL into the Anchor tag code.

• The image used in an img src tag must already be hosted somewhere online where it can be viewed on a web site. You can obtain the URL address of an online image by right-clicking on the image in your web browser, choosing “Properties”, and then Copying the information marked “Location” or “URL”. On a Mac, Control-click on an online image, then select “Copy image address.” Once you have the URL of the image copied, you can then easily Paste it into the img src tag.

Adding games to your web site

Tuesday, April 29th, 2008

WebSpawner members occasionally contact us to ask:

How can I add a game to my web site?

Adding a game to your WebSpawner web site is really quite easy and requires just a few simple steps.

First, you must locate a game that you would like to add to your website. While there are many good web sites online that provide games, one of the best that we are aware of is Miniclip Games at www.miniclip.com. Click any of the Miniclip games to try it in your web browser. When you have found a game that you like and wish to add to your website, click the Post to my blog/website button, as shown in the example below:

post to my web site

A window will appear similar to the one below. Click inside the box containing the code as shown, and the code should become selected; then Copy the code (Control-C on a Windows PC, or Command-C on a Mac).

codebox

Now open a new browser window and log in to your WebSpawner account at www.webspawner.com with your Account Name and Password. Under Step 1 select the web page to which you would like to add the game and click the ‘Modify’ button under Step 2, as shown here:

ModifyButton

Scroll down through the Modification form to the ‘Body Text’ step. Click inside the Body Text box, then Paste (Control-V in Windows, or Command-V on a Mac) the copied code. Next, add ‘begin’ and ‘end’ markers (being careful to avoid making any changes to the code) before and after the code to surround it exactly as shown in the image below:

codewithmarkers

The ‘begin’ and ‘end’ markers are very important as they notify the WebSpawner engine that it should not filter or modify the code between the markers, ensuring that the game will appear properly on your webpage. The ‘begin’ and ‘end’ markers should be entered exactly as shown in the image above, and should be used any time you add code to your web site.

Complete the Modification process by clicking ‘Continue’ at the bottom of the Modification form, and then click ‘I Like It’ at the page preview as shown below (this saves and publish your changes:

ILikeIt

After completing these steps, your web site should display your selected game. You can add additional games to your web site by repeating the process in the same manner.

Some other sources of games that you can place on your website are:

  • FreeGamesForYourWebsite.com (use the Get HTML Code link under the desired game and then select and Copy the code, and proceed as described above)
  • AddictingGames.com (click in the Embed Game box to select the code, Copy it, and then proceed to Paste it into your web site as indicated above).

Changing font size, style, and color

Wednesday, March 26th, 2008

In our continuing quest to address the questions asked most frequently by users of WebSpawner’s easy-to-use website creation tools, today we examine the following one:

How do I change the font size/style/color?

WebSpawner’s Webpage Builder uses predetermined layout templates and font sizes to ensure an easy-to-read website on computer monitors of all sizes and resolutions. This allows all viewers, regardless of whether they use a large or small computer display, to be able to easily view and read the text within your website.

When you Modify your webpage, the Headline and Body Text steps present a simple pull-down Text Color menu to select a color for the text … by choosing a color in the menu, the color of all of the Body Text or Headline text is adjusted accordingly.

However, you can also specify the font size, style and color of certain text (without affecting the rest of the text on your webpage) by using HTML tags in the Body Text area of your webpage. For details and examples of all the tags needed to make these changes, click the orange Resources tab in the Member Menu, then click the HTML Reference Guide, as shown here:

htmlguideicon

The HTML Guide provides an overview of many HTML tags, providing specific examples of how to apply the tags for the desired effect. The Guide is arranged to allow for easy reference by Tag (in alphabetical order) or by Category (Content list), and also includes a HTML FAQ (Frequently Asked Questions) page to help you quickly locate the information desired.

The Font page in the HTML Guide gives an explanation and example of specifying font color and size…

<FONT SIZE=+1 COLOR=”#123123″>
The text here between the tags will be bigger and a different color than the rest.
</FONT>

When you enter HTML tags like the one above into the Body Text area of your webpage, the tags within the brackets (< and >) will be invisible and not displayed. These tags merely instruct the web browser (Internet Explorer, Safari, Firefox or other) how to display the text within the tag.

HTML tags specify colors using a six-digit hexidecimal code, which requires you to have a color chart in order to select the desired color and find the proper six-digit code. Here is an excellent color chart available to reference online: http://www.songweaver.com/html/colorchart.html

HTML tags can also be used to apply different styles to text. For example, to make text appear in italics, see this page in the Guide:
http://www.webspawner.com/cc/html/italics.html. The tag to italicize text looks like this:

<I>
The text here between the tags will be displayed in Italics.
</I>

To make text appear bold, see the following page for tag explanation and examples:
http://www.webspawner.com/cc/html/bold.html. The tag to make text bold looks like this:

<B>
The text here between the tags will be displayed in Bold.
</B>

The HTML Reference Guide contains numerous additional tags and examples to help you stylize the fonts on your website. Keep in mind that the HTML tags should be entered into the Body Text area of your webpage when you Modify your website.

Occasionally a WebSpawner member will inquire about changing the font face to a custom font. This is also possible using HTML tags; for example:

<font face=”book antiqua”>

However, WebSpawner recommends that you do NOT specify a custom font face, and many other webhosts recommend avoiding it as well. The reason for this is that if you specify a custom font which is not installed on the computer of a viewer of your website, the viewer’s browser will be forced to substitute another font and there may be unexpected display results or possibly even illegible text. It is actually the settings of the web browser on each viewer’s computer (and the fonts that are installed) that determines the font in which they will see the text of your website.

Getting your website listed in search engines

Friday, February 22nd, 2008

One of the most frequent questions received by WebSpawner Customer Service is:

How do I get my website listed in search engines like Google and Yahoo?

Getting your website listed in search engines is probably the single most important step you can take to promote your website and increase the chances of receiving substantial visitor traffic. Building a website without getting it listed in search engines is kind of like having an unlisted phone number; it makes it extremely difficult for others to find you unless you directly provide them with the URL address for your website.

Getting listed in search engines is a process and does not occur immediately. For your website to appear in search engines the following things need to occur:

  1. The search engines must first be alerted to the existence of your website. This typically occurs by submitting a request for inclusion of your website to each search engine. It may occur automatically over time if your site is found by a search engine spider after it crawled a link on another website to your site… but submitting it directly speeds up the entire process.
  2. After each search engine receives the request for inclusion, it goes through a process of determining the relevancy of your website, which includes sending out a “spider” (an automated program that acts like a viewer) to visit your website and “crawl” its contents, which are analyzed using the search engine’s relevancy algorithms. Each search engine uses different algorithms to establish a relevancy score, and the algorithms do change over time, with relevancy scores varying as a result.
  3. Once the search engine has determined the relevancy of your website it will then make a determination of whether or not to list your website in its search index. As each search engine is an independent business entity there is no way to force a search engine to include any particular listing; each engine retains the ultimate authority over the decision to list a website in its index (or to not list it).
  4. On an ongoing basis, the search engine spider will review your site to make any necessary adjustments to how it rates the relevancy of your site against other similar sites already in its index. If the relevancy of your site drops too far your site may be removed from their index.

The process of getting into the search engines can take from a few days to several weeks (sometimes even a couple of months) depending on the search engine, how many submissions they have waiting before yours, and the rate at which they process those submissions.

You can visit each search engine and follow its instructions to submit your website yourself if you wish. Or, WebSpawner does offer a service in which we will handle the rapid submission of your requests for inclusion to more than 100 search engines and directories for a one-time fee. For more information and pricing along with a secure online order form, click the orange Promote Your Site tab in the Members Menu of your account, then click the Search Engine Registration link.

It is important before submitting your website to search engines to increase the overall content available on your website. Without a considerable amount of content there will be little for the search engine spiders to evaluate. The more prepared your website is for the spiders’ visits, the more likely it is that your website will be listed in the search engines’ indexes. Search engine spiders can read the text on your website, so the more unique and relevant information you can provide in text format, the better.

For more information on content and how it relates to search engine relevancy scores, see Improving your website’s positioning in search engine results.