HTML Tutorial for Beginners 1

Even smart people have to start somewhere.  And if you are planning on becoming an influence online or make money then knowing how the internet works, code included is important.  Consider this a crash course in HTML.

Why should you learn HTML?

Well, for starters, you are going to want change your anchor text when you are doing links.  You are also going to want to learn simple things like how to align a picture where it looks inline and professional.

Here are a few points:

• HTML is nothing more than a tag based system.
• HTML is very easy to learn once you learn the tags.
• Learning the language will actually improve your visibility and help in the long run with search engine optimization.
• After you know it, other things like javascript and php become much easier to breeze through.

When I first started out, I was using a WYSIWYG editor.  I was a complete newbie.  I tried reading HTML for Dummies but got bored and to be honest, kind of lost.  The problem was that there was really no visual for me to go by.

That was years ago but now, thanks to blogging platforms, most marketers can get by without it (although it isn’t suggested).  Learning to read and write HTML (in its rudimentary form) has become a breeze because we now have something to reference while we are writing our content the regular way.

Before we get into this, there are two rules that you will always want to apply to format HTML correctly:

1. All opened tags must be closed. (see ex. 1 below….<strong>Crackingthe MSN Code</strong>
2. When using multiple tags, the first tag is always closed last (see ex. 2 below…<strong><a href=”http://www.thelazymarketer.com/”>lazy marketer</a>, <a href=”http://www.thelazymarketer.com/vip-conduit/”></a></strong>

1. The first example is a very basic emboldened tag.  Basically what you are saying is that you want the text in between the tags to be bolded.
2. The second example is an example of anchor text.  The <a href=”..> tag is basically telling the person’s browser that what is about to be put there is going to be linked.  Now notice, that the a href=”….”> actually has a second part to it.  The second part is the actual text that the person will see on their screen that they can click to to get to whatever you are linking to.
3. Finally, once, again, notice that all the tags are closed.
4. Oh…one more thing…notice the text that has no HTML tags. That’s right.  You don’t need to place any HTML tags in wordpress (or most of the other blogging platforms) if you don’t have any special instructions for it. Of course, this will change when you start building static websites.

Here is what that same line of HTML looks like in a WYSIWYG editor from above…..

The <a href=”….”>tag explained.

The <a href> tag is probably the one tag that you will definitely need to understand to get by with the minimum. It is really simple though.

We have already established that the <a href> tag tells the browser that this is going to be a link.  Let’s analyze this a little more….

Notice now what we have….

1. The first part of the string is the <a href= tag.  This tells the visitors browser that the thing they are about to see is going to be clickable.
2. The second part is the actual url.  This is encased in quotes.  Basically think of it as it giving the browser clues into when the url is done.
3. The third part is the closing part of the URL. You haven’t actually closed anything though (yet).  You are just telling the browser that whatever is between this tag and the closing </a> tag, then that will be the link text. In this case, it is lazy marketer.
4. Finally, the last part of the this string is the closing tag </a>

Here is what it looks like on a regular page….

Now, in the case above, this link is also enboldened.  You can do this a couple different ways with 2 different tags.

1. <a href=”http:SiteName.com><b>Lazy marketer</b></a>
2. <strong><a href=”http:sitename.com<Lazy Marketer</a></strong>

The two examples above actually give you the same thing.  The only difference is what the search bots see.  A <strong> tag means that you are placing special emphasis on the particular text.  The <b> is simply telling the browser that the words in between their tags are to be bolded.

Of course there are a ton of other tags that you can use.  Here are a few popular choices…

• <i> = italics
• <u>= underline
• <p>= new paragraph
• H1, H2, H3 = Header tags (bigger, H1 being the biggest)

---

Check out my other HTML tutorials for Beginners

How to wrap images around your text

How to Create Bullet Points in HTML

 Subscribe in a reader

---