Kathy Smith
Sr. Website Designer

Behind the Scenes, Part V: Links

This is part V of a series of blogs about HTML for the layperson. Many people who are not website programmers can still find that it is beneficial to learn more about HTML in order to make best use of their websites.

So far we’ve covered the basic anatomy of a web page, h tags for defining structure and how to put images on a web page.

Specifying links in web page code

One of the basic things people need to do on web pages and blog entries is to create links to other pages on the site or even other sites. Let’s take a look at our sample page and HTML code again:

Sample code

This page has sample links to a product details page:

<a href=”long-foldover-skirt.html”>Details…</a>

The link is specified using the “anchor,” or “<a>” tag. Put the web page address that you’d like to go (“long-foldover-skirt.html” to wrapped in quotes with the href parameter.

So on my products list page, the text that appears for the link, “Details…,” is wrapped with “<a>” and “</a>” in the code. Then I specify where the link goes with the href parameter.

I can also make it go to a new browser window instead of the current one by adding “target=’_blank'”:

<a href=”long-foldover-skirt.html” target=”_blank”>Details…</a>

Click here to see how a link like this goes to a new target browser window. Click here to see how if I don’t specify a target, it just uses the current window for the page that is linked to. (You can use the “back” arrow key in your browser to get back to this blog page.)

A note on files, directories and full paths

Note that the particular link in our example above just indicates the file name, “long-foldover-skirt.html,” so this means that the file would have to be in the same directory as the web page linking to it on the server in order for the link to work. Now, on my website here, I’ve put this file in the examples directory, so I’d specify it this way:

<a href=”/examplesforblog/long-foldover-skirt.html” target=”_blank”>Details…</a>

or this way, with the full path of my website included:

<a href=”http://www.lakenetwork.net/examplesforblog/long-foldover-skirt.html” target=”_blank”>Details…</a>

When to use links

It’s good not only to use links when absolutely necessary, but when it makes it convenient for the person browsing your website. So go ahead and use internals links in your site so that people can get around more easily. This Hubspot article also talks about the benefits of using internal links for search engine optimization.

Links and WordPress

As a layperson, you might be using a content management system such as WordPress to manage not only your blog, but your entire site. As a matter of fact, many of the sites we develop for our clients are now WordPress sites because it’s such a great tool.

Specifying a link in WordPress is pretty easy–you do not need to know any HTML. WordPress created this great tutorial showing how to create links on a WordPress Post or Page using a “link” button.

Thank you for reading this series; I hope it’s useful to you. In some future blog entries I will probably cover how to do the rest of these functions (h, p and img tags) in WordPress as well.

Kathy Smith has developed more than 200 websites – everything from n-tier enabled applications to ecommerce to your friendly brochure-style website. She is senior developer at Lakenetwork.net, a website development company in Eastlake, Ohio.

 


about lakenetwork

Lakenetwork is a family-owned business providing website design and development for companies, professionals and organizations in the Cleveland, Ohio area and beyond. We specialize in providing the most cost-effective and appropriate solutions for clients’ online needs. We are located in Eastlake, Ohio.

Get in touch...