How to add Hyperlinks

Hyperlinks

For my second installment of how to use HTML tags I have chosen to talk about hyperlinks. This is something that I use in every single one of my posts. I use one in my footer to link steemians back to my introduction post. I also usually update a link to my latest blog post.

Another great reason to add a hyperlink is to give credit for an image or quote that you have used from another source. Rather than typing out the entire web address, you could add a link to the word SOURCE like so. You can also make the image itself link to the site

@jedau is currently writing a multi post story HERE. He has created a link to the previous and next post in the series in each installment. I think it turned out pretty slick. It gives readers the opportunity to continue reading his content without having to spend time searching for it. And lets be honest, we have all gone looking for a post and ended up clicking on something else instead that stood out in the feed. Then you forget what you were looking for to begin with! Once you have your users attention, make it easy for them to stay on your content. It could be the difference of one upvote or multiple upvotes!

How To

Just like using headers in the previous post, to add a hyperlink we must use tags. Every tag is marked with a start and an end. The starting tag is just the tag itself surrounded by <>. So <center> was an example of a starting tag. After the starting tag you then type you content like"Now my text is centered!". Finally you have to close out your tag. It is similar to the starting tag except that you use a / before the tag name. So to close <center> we use </center>

Now my text is centered in the page!

For a hyperlink the tag that we use is <a>. As far as I can remember the a stands for "another" HTML file. Some tags in HTML have fields that can be added that tell the tag how to perform. To use a for hyperlinks, we need to assign the "href" field. This is done by adding it into the opening tag. <a href="www.steemit.com">. This example would send the user to www.steemit.com To complete this hyperlink with have to assign some text or an image and then add the closing link </a>.

Lets add the text Steem On! as our link: <a href="www.steemit.com">Steem On!</a>
This would appear and act as follows: Steem On!

Adding an image

Okay so not that we know how to add a link to some text. How can we achieve the same with an image. There are two ways to accomplish this.
The first and easiest for beginers would be to upload the image into the editor first. Then we could use the lessons we learned above and go back and add the <a href="web address"> and </a> to either side of the image data. The second would be to call the image with an image tag. To do this the image would have to already be hosted online some where like ImageBB. You would then get the web address of the image and add it to the src field in the img tag like so: <img src="image web address here">

So the following line of code would be used: <a href="https://www.mlb.com/bluejays"><img src=""></a>

To produce the following image link

I hope you find this tutorial helpful. I encourage you to play around with hyperlinks. It is a great tool to add to your blog and a great way to start getting comfortable using HTML tags!

Thanks to @jerrybanfield for the idea of adding a personal image to my thumbnail!
Check out his post on them HERE

---

Darryl (@dadview) resides in Canada. He is a loving husband and father who enjoys spending time with his family no matter the activity. He is also an active member of the #steemdads #steemparents threads


If you enjoyed this post, please up-vote and/or Follow @dadview on Steemit

---

Vote Luke Stokes for Witness as lukestokes.mhth