Welcome to Part Two in my series on Web Development 101. If you missed Part One, make sure to read Web Development 101 – Learn HTML, Right Now before delving into this post. Also if you’ve come across this post and haven’t read my blog before or don’t know much about me make sure to read Understanding Who I Am And What I Do.
The first tag I want to introduce you to here is one that you’ll find yourself using a lot, it’s the tag to create a link and it goes like this:
<a href = “http://www.website.com”>This is a link</a>
This is a very easy tag but also a very powerful one, it is what tells the browser that you would like to link the text “This is a link” to the website “http://www.website.com” and pass along some link juice with it. This is called a “Do Follow” link and written in this form it tells Google that you support or vouch for the site you are linking to.
If you don’t want to give any link love you’ll need to turn the link into a “No Follow” link which you can do using the following format:
<a href = “http://www.website.com” rel = “nofollow”>This is a link</a>
Looks almost the same right? Well it is except for that rel = “nofollow” piece at the end which tells Google you don’t necessarily want to vouch for the site you are linking to and you don’t want to pass on any link juice. Most links in blog comments are marked with this since bloggers don’t want to give away all of their link juice to people trying to rank better by throwing links into their comment stream. Also you might not know where these links are going so you certainly don’t want to vouch for them.
Now I’ll show you how to add an image to your site to spice things up a bit. As you’ll see the syntax here is equally simply – see, HTML isn’t as hard as your thought is it?
<img src = “my_image.png”>
Bam! That’s it, as long as the image “my_image.png” is in the same folder as your HTML file the image will appear. Now let’s link the image to something using the cool link code you just learned:
<a href = “http://www.website.com”><img src = “my_image.png”></a>
Viola! Your image now is liked to http://www.website.com and if someone clicks on it, they’ll be taken to that site. If you want to get fancy you may want to remove the link border that appears in some browsers, to do this simply add a border = “0” to your img tag like this:
<a href = “http://www.website.com”><img src = “my_image.png” border = “0”></a>
There, now you’re in good shape. Honestly these are all the HTML basics you need to know before we delve-into the exciting world of CSS. If you’ve been intimidated by HTML in the past hopefully you’re a little less intimated now. If you’ve been scared of CSS I’m about to help you get over that fear as well. Ready to rock? Stay-tuned, more to come in my Web Development 101 series.