Techy Tips on Tuesdays - {Hyper}Links

Last week was our first Techy Tips on Tuesday where we shared some Basic HTML Tips.

Now that we have established some basics, we can move onto hyperlinks.  A hyperlink is simply just a link to another page or image.

The HTML code for a hyperlink is simple:

<a href="www.yourURL.com">TEXT to display to reader</a>

The RED text is the URL, or website, where you would like to send your readers.

The BLUE text is the text that you would like your reader to see.

For example...

Let's say in a post you are referencing your blogs name and you would like to link it up to your blog homepage.

The code would be as simple as this (using our site as an example):

<a href="www.twosasters.com">Two Sasters</a>

If I copy that code into my "Edit HTML" tab of my post editor, I would get this:

When a user clicks on the text "Two Sasters", in the above example, they will be directed to our homepage.

In most cases, you will be directing your users to a different site.  To make your hyperlink open up in a new window (usually a good idea when directing users away from your site) is done by adding one more piece of code (in purple below).

<a href="www.yourURL.com" target="_blank">TEXT to display to reader</a>

Going back to our example, it would now look like this:

<a href="www.twosasters.com" target="_blank">Two Sasters</a>

Once again, this could have been done in the "Compose" tab of the post editor, but we want to continue getting more familiar with HTML code.  When creating things like buttons with text boxes (which we will get to in a future post) or social icon buttons with links (also a future post) we cannot solely rely on the "Compose" tab.

Thanks for stopping by and talking a little more about HTML:)

Share Tweet