Basic HTML Coding for Blogging: the Beginners guide
Do you know the basic HTML coding for blogging? Here I have written a beginners guide, so you can check if you are a pro or if you need to study a little bit the subject. Nothing complicated but something that will ease your daily blogging routine.
Basic HTML Coding: my story
You all know I love talking about blogging but probably you didn’t know my past very well. Before blogging started in 2014 for me (maybe earlier for you), I was obsessed with forum communities.
My Past with Forum long before Blogging
Forum communities were a particular type of website called forum where people usually wrote threads about a subjects. My favourite were the ones dedicated to a tv series, an actor, graphic design or a couple.
Back then I was obsessed with Gilmore Girls, Yale and I always wanted to be Rory Gilmore. So when I discovered it existed an Italian forum on Alexis Bledel (the actress) I wanted to be a part of it.
Basically in forums you had three main roles, you could have been:
- admin (the one who built the free online forum)
- moderator (someone who helps but it doesn’t have the complete admin accessibility)
- simple user (you could comment and read the pages)
There I became a moderator for the first time in my life! After a bit of time, I enjoyed so much that I started creating my own forums (I remember one summer preparing the Hogwarts quiz and lessons because I built a Harry Potter one).
With time I saw how much work and how many incredible graphic designers were there. Without knowing they were creating a job because at the time Photoshop wasn’t really accessible. It was super expensive and only for professional. So we had to be sneaky to download it illegally (good old 15 years old me) and to start using it by trying.
It was so fun! My first graphic, especially the header logo were awful at the beginning, but I was really good in cropping images for avatars. This came very handy in photography: the rules of thirds and composition comes naturally to me. I believe this time in forum created my skills.
We created an online community there: people with the same passions, talking and creating digital material on those passions: movies, books, tv series especially. And the graphic design of course. We all had one portfolio forum to showcase our works and people could request something. All for free, you just wanted visibility.
There was so much. The downside of this time on the computer was me becoming a little bit shyer and not very social in real life. Another factor was that I lived on the edge of the city, in the countryside, away from everyone and without a car to move. So I was happy in this online world.
Then Blogging Happened
I recently read this post from Sarah about the changes of blogging back in 2010 compared to blogging nowadays and I couldn’t relate more! We all started on Blogger because everyone was on Blogger. Self-hosted WordPress was not even in the radar.
GIVE IT A READ: How Blogging Has Changed – 2010 vs 2020
So after forums era, I needed something else, I loved the online world and blogging was perfect! I have always kept a diary, writing was a necessity so creating a blog was a natural choice. Zoella was my main reference – could you relate? – so I opened my first blog in 2014 called kateidoscope.
Always very cate-centric!
In the blog I talked about my passion for fashion and travels. I remember writing about Harry Styles style and youtubers. Then with time I learned.
Anyway both these two worlds – forum and blogging – taught a lot about HTLM, coding and CSS, especially forum.
You had to create the layout of the forum by writing codes, updating images on your signature were edited with coding so you had to learn.
This below is what I learned and what I still use in blogging nowadays. Don’t despair it’s a beginners guide because now with all the apps, plugins and tools you won’t need to be a professional hacker. Knowing these these HTML and basic coding will make your blogging life a lot easier.
The Beginners Guide of the HTML and basic coding for Bloggers
First of all I want to talk about something that pisside me off quite easily and I see this everywhere. When I comment on other people’s blogs, I then check the other replies because I am always curios to discover amazing new content creators.
1.Add a Linkable Signature to Your Comments
But most of the time their blog is NOT linkable!
I can’t click on myblog.com but I can on myblog.com
Can you see the difference?
People are very lazy so having your blog address clickable will improve so much the reach on your website. Believe it is so simple, yet not so much bloggers think of it.
But how can I do it?
Most of the time when you copy and paste your signature with the link to your blog or social media you need to say with the html to make the word linkable. Very easily:
<a href=“https://blog.com”>blog.com</a>
When the comment is approved you won’t see the <a href> coding but your name will be clickable! Do you use this simple but very effective basic coding?
You can go further by deciding to make it stand out! You can:
- add a symbol
- add the bold, corsive, underscore type (<b></b> | <i></i> | <u></u>)
See these examples:
Underscore link:
<u>blog.com</u>provablog.comprova
Also, you can add a colour or a background colour but I won’t suggest it. Keep it simple. Don’t overdo it too, like in images, remember? One of the biggest mistakes in editing images is to overediting. Same rule happens here.
RELATED: Behind Blog Photography: The 2 most common mistakes in editing images
2.Add a linkable image to your blog/sidebar
Sometimes it’s faster to use coding and html in blogging instead then opening the right “upload image plugin” because most of the time you can’t edit anything.
This time you want an image to be clickable exactly like a button.
How to do it this time?
The basic coding for links stay the same, all you have to do is add the image html code. See my example below.
<a href=“https://blog.com”><img src=“http-of-the-image”></a>
Where before there was the name your blog/link, now you add the image. Image goes with <img src=“”> inside you have the name of the image always starting http:// that you can copy and paste.
In this way the image will be shown of the exact pixels it was created.
But you can also change this!
3.Modify the size of your image with coding
Maybe you want to edit the size of the image, for example it must be smaller then 400px. Px or pixels is how images and sites measure. Although your image is 600x900px, a standard 2:3 ratio.
How to make an image smaller without editing on a software and exporting it again?
Easy with coding! Let’s take our latest code and add a little part to it.
We should add width=“400px”
Let see where:
<a href=“https://blog.com”><img src=“http-of-the-image” width=“400px”></a>
Now you are sure that your image width is exactly 400px wide. No excuse. Below I am giving you another example. On the left there is the normal size of the image, on the right instead I show you that I add the “100px” wide measure so the width is smaller. All you have to do is add that tag!
So these 3 are the main HTML and basic coding tags I use but there is a lot more! The others are a little more complicated than these three, like moving images or scrolling down but if you wish to know them, I would be happy to improve the Beginners Guide of HTML for blogging. I can write about Professional HTML Coding for Bloggers. Just let me know.
Did you know these basic HTML coding?
Remember to Pin this post for later!
