Basic HTML Codes Every Blogger Should Know
January 03, 2018
I can't believe it's been two years already since I've started blogging here and there. Time just flew by crazy fast. I wouldn't say that I am now a veteran, I still have a lot to learn and to improve in terms of blogging but over the past two years that I have been doing so I couldn't help but notice the significance of HTML and CSS have on your blog.
The more aesthetically pleasing the blog is to a readers eyes, the more likely they're going to like it and the chances of them staying and subscribing are very high.
Of course the content of your blog matters too but just like how a human being is attracted to another, you have to atleast look presentable and decent. Your blog has to capture the attention of your reader first with the theme and layout of your blog.
Today I am going to teach you the basics of HTML that every blogger should know. These are also the basic attributes that I was taught in school so I'm [definitely] going to be having fun writing this post.
Image
<img src="#" alt="this text is going to show up when your image fails to load">
You can configure its height and width. The hashtag is where the link is supposed to go.
Example: <img src="thenameofyourimage.jpg" alt="a picture of my hand with the thing">
Image Link
<a href="#"><img src="#"></a>
Clicking this image will direct you to another blog post or site. Click the image below!
Example: <a href="http://danidotyes.blogspot.com/2017/02/mudfacialmask.html"><img src="thenameofyourimage.jpg"></a>
Text Link
<a href="#">this text is now a link</a>
Example:
The Benefits of the Rejuvenating: Glorious Mud Facial Mask
Favicon
<head>
<link rel="#" type="#" href="#">
</head>
Example: <link href='/favicon.ico' rel='icon' type='image/x-icon'/>
Don't forget to convert your image to .ico
There's this site that I've used to convert the favicon that I made for my blog (which you could see above) Favicon & App Icon Generator. It also includes the <link href, rel, and type> that you can easily copy and paste to the html of your blog. Your favicon needs to be 16 x 16 pixels in terms of its height.
So the favicon needs to be in between the head element for it to work.
You can't really see it well since it's 16 x 16 pixels but here's the look of the favicon that I've made. This is not the final design of my favicon, I'm still thinking of a good design to represent my blog.
Headings
HTML includes six levels of headings which are
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
The text goes in between those tags.
This is h1
This is h2
This is h3
This is h4
This is h5
This is h6
So that is it for this post if you want more of these kind let me know in the comments below, also let me know if this was helpful for you!
Check out my recent post if you're interested to learn more about HTML!
4 comments
very useful post. I used to know a bit of html back in the days but forgot most of it, so im grateful that you shared this.
ReplyDeleteoh wow such a simple way to explain basic HTML! Definatly keeping these all in mind as I am not brilliant at HTML
ReplyDeleteMelissa |
Moonlight Mel
This is so helpful and accessible for new bloggers like me- thank you so much! Definitely going to refer back to this post in the future. Loving your blog!
ReplyDeleteNati | www.lifeaftercoffeeblog.com | lifeaftercoffeeblog@gmail.com
Thank you!!! Always good to have this as a reference.
ReplyDelete