Web Development 101 – Learn HTML, Part Two

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.

Learn HTML

Now onto Part Two and your next lesson in the world of HTML. In Part One I introduced you to all the basics you need to put together a very basic site, now I want to talk about some of the other tags that you’ll most likely be using quite frequently. In the next lesson we’ll start covering CSS, then Javascript and soon you’ll be writing jQuery and AJAX in your sleep. Think you can’t, think again.

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.

{ 10 comments… add one }

  • JWhite November 9, 2012, 4:38 pm

    Adding to my Facebook “DataBase” list – Thanks 🙂

    Reply
  • JWhite November 9, 2012, 4:58 pm

    Have you spent any time with Adobe Flex/Flash Builder?

    Reply
  • Morgan November 9, 2012, 5:04 pm

    Thanks @JWhite – I’m honored! I have not used Flex/Flash Builder, I have a lot of experience in the software dev space but not as much in design/animation. I know the Smashing Magazine does have some great tutorial though that might have more coverage on this topic.

    Reply
  • JWhite November 9, 2012, 5:52 pm

    “Flash” builder can be misleading. It’s a SDK/IDE derived from Eclipse. It’s pretty awesome, but flash is in a state where it’s neither moving forward nor backwards. There are some rumors Adobe is trying to move away from it since the advent of HTML5 but HTML5 is taking quite a long time to maturate. I definitely need to focus on HTML5 at some point. I havent spent much time in HTML in far to long. Thanks for the 101’s btw.

    Reply
  • onedot November 11, 2012, 9:26 pm

    There is always someone out there who has to show what he knows, eg JWhite.

    Reply
  • Wobble November 16, 2012, 2:17 am

    Thank you for this short and sweet, yet powerful article!

    Reply
    • Morgan November 16, 2012, 10:26 am

      Absolutely @Wobble – glad you liked it!

      Reply
  • Saqib Hussain November 19, 2012, 9:26 pm

    Yes i got very impressed with your this article. That will be very helpful for me to learn web development.
    After reading your article now i am feeling more interest to start learning web development.
    Keep sharing such good new with us.

    Reply
  • Max January 15, 2013, 8:50 am

    Thanks for the free lessons ! But a query – why all the violas ? Shouldn’t it be ‘voila’ ?

    Reply
  • Salvador Hubbard January 24, 2013, 10:27 pm

    CSS is divided into Selectors which are the factor you want to design, and Declarations which are methods in which you want those components to be designed.

    Reply

Leave a Comment