Learn Computer Code…Like a Rock Star

So when you’re writing your post on your blog in your visual editor, have you ever switched over to your text editor and become overwhelmed with all the code that is displayed on your page.

Well this easy beginning guide to code will get you on your way to learning code like a rock star.

So let’s get right to it. We’re going to jump into the world of HTML. What is HTML? Hypertext Markup Language is how text is styled through fonts, colors, linked and so on, on the internet. The text must be styled using tags, you’ll have a beginning tag and an ending tag that signifies the end of the code that is to be applied to the text.

ie. I <strong>LOVE</strong> Cake!

looks like: I LOVE Cake!

Now lets jump in!

Basic HTML code you need to know

Bold

<strong>your text</strong>

Italic

<em>your text</em>

Font color

<span style=”color: #000000;”>your text is now black</span>

Font size

<span style=”font-size: 14px;”>your text</span>

You can also add more than one attribute to change font, color and size for example.

<span style=”font-family: Georgia; color: #000000; font-size: 14px; “>your text</span>

Links

<a href=”http://www.yourlinkaddy.com”>your text here</a>

Images

You can grab your image url from your media library. The link will look like this if you’re on WordPress and it can be in a jpg, png or gif file.

http://www.yoursite.com/wp-content/uploads/2015/10/yourimagename.png

To display the image on your site you’d need to add the image tag.

<img src=”http://www.yourimagelink.png”>

Images + link

See how the image code is nested inside the link code instead of text.

<a href=”http://www.yourlinkaddy.com”><img src=”http://www.yourimagelink.png”></a>

Nofollow code 

Links are automatically dofollow, if you’re using an affiliate link or links for sponsored posts the the vendor, any kind of links that you are receiving compensation either monetary or a product, you need to add a nofollow code to your links. This can be done manually or with a plugin like Ultimate Nofollow.

<a href=”http://www.yourlinkaddy.com” rel=”nofollow”>your text here</a>

Open link in a new window

<a href=”http://www.yourlinkaddy.com” target=”_blank”>your text here</a>

You can also have both codes in there to make them both nofollow and open in the a new window.

<a href=”http://www.yourlinkaddy.com” target=”_blank” rel=”nofollow”>your text here</a>

Center an image

To center an image, you’d use div tags, they create a block or area around your element that you can style. This also works for the buttons or banners that you have in your sidebar.

<div align=”center”><img src=”http://www.yourimagelink.png”>your image here </a></div>

FYI if you site ever goes wonky after you added in a div tag and it affects everything before you were just editing, it’s likely that you didn’t close your div tag with the </div>.

Be sure to follow along in my series: Best Ways to Grow Your Blog.