SLIDER

Follow

Newsletter

Want exclusive downloads, blogger tips and beauty tricks sent straight to your inbox? Sign up to the Charley Lucy newsletter.

Follow

Simple HTML Coding for Bloggers

Simple HTML Coding for Blogger Learn Easy Quick

A couple of years ago, I knew absolutely nothing about coding and now I build websites as part of my job. It’s absolutely maddening! I think a lot of people are put off by the fact that it looks like a load of gibberish but, I promise you, with a bit of know-how and practice you can come to understand code really, really quickly.

In this post, I’m going to outline some of the Blogger basics - the platform, not the people! - but I could quite happily sit here and teach you how to code all day long. So please let me know if you found this helpful/if you’d like to learn something a little more complex.


Paragraphs, Starting & Finishing


*This bit is pretty important to read before you move onto the rest of the post*

Think of basic HTML coding like a sentence, it starts with a capital letter and ends with a full stop. Only in this case, it looks something like this:

<p>Isn’t this great!</p>

The “p” stands for paragraph. It’s what Blogger is creating for me right now as I press the return key. However, the beginning of a paragraph is coded for like this <p>. I then follow this with whatever I want to say in that particular paragraph. For example “Isn’t this great!” and, instead of pressing the return key to let the code know I’m finished, end with a slash, like this </p>.

As “p” simply stands for paragraph you can use the same structure with pretty much any HTML I’m going to teach you in this first post. All you then have to do is change what’s inside the < >. For example <b>I’m bold</b> makes anything inside the < > bold.

If you want to practice this on Blogger, click to compose a post and look for the “HTML” button on the top of the toolbar and HTML has to be entered in a different place to your rich text, or post content. If you’ve ever copied and pasted a Bloglovin’ widget code - this is the right place!



Bold, Italic and Underlining


Using the same structure as the paragraph above, you can create bold, underlined and italic text. I will more than likely be using all three in this post. Obviously, there’s a really simple way of doing it in Blogger by clicking the B, I or U icons along the toolbar. But, if you’d like to know a bit more about what’s going on:

<b>This text is bold.</b>
<i>This text is italic.</i>
<u>This text is underlined.<u>



Headings


Similarly, you can create different sized headings using the same method. With H1 being the biggest and H4 the smallest - really, you can keep on going, but no one is really likely to include so many subheadings in a blog post!

Depending on your blog’s template, you are likely to already have a H1 on your page - your blog name or post title - and, using more than one, tends to make the Google robots a little confused. So it’s probably best to sticking to H2, H3, H4 etc. Please note that the standard blogger “subheading” present - what I’ve used to highlight the subheadings in this post - is H3.

<h1>I’m a big heading.</h1>
<h2>I’m a smaller heading.</h2>
<h3>I’m the smallest heading.</h3>

*Please excuse the terrible highlighting!*

You style these headings - the font, size, weight etc. - using something called CSS. it’s inbuilt in each and every blogger template to make things look pretty. And is, more often than not, the cause of many of my work-related headaches. Let me know if you’d like to learn about it in a future blog post!



Alignment


To finish off the boring stuff, text alignment within your post is created using much the same method. Though, it is important to note that the spelling of centre is center when it comes to coding. Those darn Americans.

<center>I’m in the middle!</center>
<left>I’m on the left!</left>
<right>I’m on the right!</right>

High five if you’re following so far! It’s pretty easy, right? And you though you wouldn’t be able to do this!



Images, Resizing & Alt Tags


Let’s get onto something a little more fancy to finish the post. All images you upload to Blogger are stored on a server somewhere and each and every one has their own URL - just like a web page. Most likely ending in .jpg .jpeg .png etc. depending on the file format.

It’s these URLs we need in order to embed the image into the post. You can usually find these by right clicking on the original image - not a preview or thumbnail - and selecting “Copy image URL” which should look a little something like: http://www.charleylucy.com/amazing-cat-image.gif - unfortunately this is purely for demonstrative purposes. You will need to use the original link for this and not a shortened version.

Got it? Good. Now, if you’ve made it this far through the post, you’ll probably be thinking images are coded for like <image>URL</image>. Unfortunately not. Instead of closing like this: </image> images use "img" and self closing tag like this: <img />.

So where do you write the URL?! As we’re sourcing the image from the URL, you’d write it like:

<img src=“http://www.charleylucy.com/amazing-cat-image.gif” />

However, what you’d get from this is, most likely, a very large version of your original image - presuming that you’re embedding a camera photo that are thousands of pixels wide. To fix this, we add in width constraints. For example, I know my sidebar is 300px wide so I’d tell the image to be 300px wide:

<img src=“http://www.charleylucy.com/amazing-cat-image.gif” width=“300px” />

You can also do this with height:

<img src=“http://www.charleylucy.com/amazing-cat-image.gif” height=“800px” />

Or use the both of them together! Just be careful not to blow out the proportions of your original image. If your blogging platform doesn’t do this automatically - like the Small, Medium, Large and X Large function in blogger - you can manually calculate the new width and height using an online ratio calculator *shudder, maths*.

*Please note that this will likely vary on your mobile template which can be a little trickier to fix!*

The last thing you need to do with an image is to include an alt tag. Not only are these great for SEO but they provide aid to those viewing your blog that may have visual impairments by describing what is in the image. For example:

<img src=“URL” alt=“Cat Eating Cereal” width=“200px” height=“800px” />


I hope you enjoyed this really quick HTML crash course for Blogger. It was an incredibly fun to write and I hope it helps you either learn a little more or fix a few of those niggly little sidebar errors you might have - we’ve all got to learn somewhere!

Let me know if and what you would like to see in the next instalment of this series in the comments below. To read more posts in my #BloggingHacks series, click here.

Follow
© Charley Lucy • Theme by Maira G.