Website Navigation
If you’re on the web, you already know what a LINK is. It’s highlighted words, phrases or images that take a reader to another page, on your website or blog, or to another website entirely.
They can be used to add information to an article, to categorize information, group services or products for a company, or a variety of other points of interest. They can even be used to set up any easy method for visitors to send you email.
Links are pretty simple things to code, but they do have a few parameters that are worth noting.
| <A HREF= “anotherpage.html”> page name </A> |
A link tag is like any other HTML tag. It has a starting tag and ending tag.
|
| Links to files in other directories . <A HREF= “../anotherpage.html”> page name </A> |
When you create your website, you should keep it as organized as possible. For instance, pages about Wolves should go in their own file folder/directory, and pages about information technology should go in another. This not only helps you keep track of your pages, it also keeps it more manageable when you want or need to make global changes to a particular section of your website. Note: You won’t have this kind of control on a blog site. . On a static website, your main webpages will be in the main file folder, what techies call the main or ROOT directory. The additional directories are called sub-directories and they are the children of the ROOT.
Navigating between directories is easily done with the “../” direction. Let’s pretend for a moment that you’re working on a page called “creatinglinks.html” and you want to set up a link to the “abcwolf.html” page. You must tell the browser to go up one level and then come back down into the wolves directory to find the page you want. Your code will look like this: |
| Setting the TARGET
Target=_blank |
The HREF tag has one useful parameter, the Target. The Target parameter tells the browser how it should load the page/file you’re linking to. Should it load in the current window or a new window? . If you’re linking to a page on your website or blog, you should load pages in the current window. Since this is the default, you don’t need to do anything extra. But if you’re linking to a page outside of your website, you should load that page in a new window. . The browser will decide what the new window is based on your readers personal settings. So if they want new pages opened in a new tab or an entirely new window, they get what they want. All you have to do is tell the browser to open that new view. And that’s done by adding the Target=_blank. Your link would look like this: . <A HREF=”http://reference.sitepoint.com/html/a/target” target=_blank>HTML Elements Link:Target Parameter</A> . There are additional values to the Target parameter, but if you’re not an advanced HTML user, this is the only one you’ll probably use. You can click on the link above and see the additional values, which are primarily used for pages that include framesets. |
| Image Links .<A HREF= “infotech.html”> <img src= “images/swdesign.gif”> </A> |
We’ll talk more about images in HTML 105, but links can be text bases or image based. The code on the left is an example of an image based link. Click on the picture and you’ll go to that page. . Images within an article can be useful to pull a visitor into your article, or grab their attention for a sale. If you are offering a 25% Discount on sale items, you might want to link your visitors to a sale page through both text in your article AND through a graphic that says “25% Off”. |
| Links Within A Page . <A HREF= “links.html#section2“> page name </A> |
Sometimes you might have a webpage that’s so long, you decide it needs a menu list or table of contents at the beginning of the page, where the links take your visitors to various sections within the same page. . You might be familiar with this if you’ve been to a Wikipedia webpage and used their Contents to quickly jump to the section you’re interested in. They provide a short summary of the article, then a table of contents that includes links to various sections on that same page. . This is accomplished by using two Anchor tags, one that links to the section and one that Anchors the section within the page. In other words, you have to know where you’re going within the page in order to create a link to it. Within your webpage, find the section where you want to “link to”, usually this is a heading, such as “How Links Work”. You define the section by giving it an Anchor Name. Like this: . <A NAME=”howlinkswork”>How Links Work . At the top of your page, where you’re defining your table of contents, your in-page link will look like this: <A HREF=#howlinkswork”>How Links Work</A> . To link to a particular section of another page, you simply add the pages file name. <A HREF=”links.html#howlinkswork”>How Links Work</A> |
| Blog Anchors
Create the Anchor:
Create the Link |
Creating an Anchor Link on a Blog page is basically the same thing. Only you may have to code the link by yourself in Text mode, instead of Visual mode. Let’s say you’re on a WordPress blog and you want an anchor link from a Post to the second section (or halfway down the page) to one of your Blog Pages.
Start with the Page you want to link to. Open it in Edit mode. Find the section within the Page you want a link to jump to. Highlight the first word you want to see when a visitor jumps to that page. Then click the Text tab on the top right corner. When your screen switches to the text mode, you’ll see all the code behind your blog page. In WordPress, your cursor should already be on the word you highlighted while in Visual mode. Move your cursor to a blank line before that word. ie: I hope you’ll join us! Click on the Visual tab to switch modes and update your page. Now go to the Post where you want to create the link. Highlight the word or phrase where you want to put the link. Click on the Link icon and enter the page you want to establish the link. It’s just like any other link at this point. Once you’ve done that, switch over to Text Mode again. You should see something like this: Check out <a href=”http://springwolf.net/appearances/the-aenigma-project/” target=”_blank” rel=”noopener”>Our New PodCast</a>, available for download now. To add the Anchor to the link, add “#Anchor” after the last slash for your page. In the example above, follow the url For your link, you’ll need to change “RadioShow” to something that’s meaningful for your page. And if you capitalize any part of the word like I did, in the anchor, it has to match exactly to what you put in the link. Now toggle back to Visual mode and when you’re ready post or update your post. Then test it. Make sure it works the way you wanted it to. If it doesn’t, the first thing to check is to make sure the Anchor name on the Page matches the Link on the Post. Next check the “” quotes around both the anchor and link. If you copied the code from somewhere, editors have a tendency to italicize the quotes. Which isn’t a proper code in html. That’s it. |
| eMail Links . mailto:abc@gmail.com”> Send Me An Email</A> |
The final type of link you’re likely to use is an email link. This is accomplished with the “MailTo” parameter. It works like any other link, but you’re telling the browser that when it opens a new window; that window should be a mail client identified by your visitor as their mailing system. The link opens their preferred mail system and begins creates a “new email” window with the specified email address. . If you want to include a particular subject line for the email, you add that to the link like this: <A HREF=”mailto:abc@gmail.com?subject=”2014 Spring Contest”>Enter Our Contest</a> |
eMail Links
On a side note, using email links on your website today can be convenient, but it also opens your email to scammers and spammers. They can see your email address, add it to a list and bombard you with unwanted eMail in bulk. Or they can sell your email address to scammers who might try to trick you into giving them information about yourself so they can hack into accounts. And it also makes it easy for them to try to use your email account to send spam out to the world.
Be cautious of putting your eMail address directly on your site or blog. If you must include contact information for eMail, you’re better off creating a webform that hides the email address. Or using Captcha to require human identification for sending an eMail. I’ll be adding a section on this topic later.
© 1997-2014 Springwolf, D.D., Ph.D., Springwolf’s Kosmos. All Rights Reserved.