Linking 101 – How to Create a Hyperlink
Creating links is quite easy and always necessary. This series is for those that know how to click on a link but don’t quite get the mechanics behind the link itself. If you’re new to blogging, there are some fundamental HTML elements you should know and this week I thought hyperlinks should be top on that list.
In WordPress, when creating a post, there is a little button that will allow you to create a link. I use this feature often, but it doesn’t quite provide all of the link attributes I need or want so I usually end up having to edit the links manually.
A link (or Hyperlink) is used to send your visitors to another page either within your own site or to someone else’s site. You would know this from your own basic internet searches or from interacting on the sites you visit yourself. But how do you create those links? It’s very easy and I’ll show exactly how to do it, but first a little education…
Definitions:
Source page – the page containing the link
Destination page – the page being linked to from the source page
HTML elements – everything from a start tag <a></a> to the end tag
Element content – everything in between the start tag and the end tag <a></a> this is the element content
Attributes – provide additional information about and element, they are always specified in the start tag, always come in name/value pairs like target=”_blank”
When creating a link you need the correct HTML elements to make it function. Here’s an example:
<a href="http://www.creativedesignworx.com">Creative Design Worx</a>
Which would look like:
Let’s break this down, shall we?
“a” is the anchor element which works with the “href” element which specifies the destination of your link
“Creative Design Worx” is the element content
“/a” is the end tag (notice the “/” which always signifies a closing tag)
Now you can link anything including an image which would work the same way except the content element would be different. Instead of text, you would insert the image elements:
<img src="http://creativedesignworx.com/myimage.jpg" alt="" />
Your Link tag would now look like:
<a href="http://www.creativedesignworx.com"><img src="http://creativedesignworx.com/myimage.jpg" alt="" /></a>
Which would look like:
Target Links
So those are the basics, now let’s look at how to direct the link to a specific target (this is where the linked page or destination page would open)
By default, if you don’t specify a “target” the destination page will open inside the browser window you (or the reader) is currently on (_self). But, you may not want your visitor to be taken away from your site while directing him to checkout information on another. In this case you would set the target to open in a new window, therefore, keeping your own webpage open as well.
Here’s what you would do:
<a href="http://www.creativedesignworx.com" target="_blank">Creative Design Worx</a>
By adding ” target=”_blank” right after the web url you are sending them to a new page or tab while your site remains open.
In you are sending your visitor to a link within your own website and it doesn’t matter if they leave the page they are currently on (ie. From your home page to your contact page), you would create the link like this:
<a href="http://www.creativedesignworx.com">Creative Design Worx</a>
Or
<a href="http://www.creativedesignworx.com" target="_self">Creative Design Worx</a>
Now, because _self is the default for any link, you really don’t need to waste the time to actually add that element, this is more for educational purposes.
Email Links
There are times when you will want to create an email link which will allow people to contact you directly. This method will open their email client automatically with your email address already inserted. (works with most email clients)
In this case the element is a little different than the links we did above, for an email like you would use the “mailto” attribute.
Here’s an example
<a href="mailto:yourname@mysite.com">Click Here to Email Me</a>
Now let’s say you wanted to have people email you about a specific subject and you want it to stand out when then are delivered to your email box. You can use the “subject” attribute and insert your own subject line.
Example:
<a href="mailto:yourname@mysite.com?subject=Feedback from XY Article">Click Here to send me your feedback</a>
I would suggest you don’t use these links on your webpages directly as they can be grabbed easily by spammers. Instead, use these in place like your email newsletter (not published online) or your personal emails or even in pdf documents you may create.
I think that pretty much wraps up the basics of linking. There are other attributes you can use which I’ll cover in another post.
If you have questions, comments or would like me to add a tutorial on a specific topic, please let me know by leaving a comment below.
Hope this helps…
Toresa:)
