by HTML Basics – All webpages on world wide web including blogs, websites, forums, powered by HTML only, Earlier HTML knowledge is must for everyone who want to create a blog or website, But now things are changed there are blog platforms came with innovative ideas like Inbuilt theme and gadgets in case of Blogger and Plugins by wordpress, These themes, gadgets and plugins saving lots of time of bloggers, reducing coding work almost zero.
HTML basics for beginners and bloggers HTML basics for bloggers
Table of Contents
Why HTML Basic knowledge important for bloggers?
Even though there are simple blogs building platforms available without using HTML/CSS still knowing basic html will provided added benefits to bloggers.Some of benefits listed below
To implement verification codes for ownership verification – in Blogger.com templates and in wordpress as well. So when you join any service or ad network online you need to verify your blogs ownership means that belongs to you, So in that case basic html knowledge is required as you need to put provided code inside blogs html(as shown in above image), So you need to know basics of html to avoid misplacing these codes may cause breaking of your website in some cases.
To Add google analytics codes – To track your website analytics properly google analytics provide you a tracking code to add in your html, specifying add it to Head section of your blog, So in this case you must know where this head section located inside your HTML.
To implement some Widgets and gadgets inside your blog – For example if you want to add Automatic Table of content in your blogger post then you need to add 5 codes in HTML 2 in head, 1 in body and also 2 codes inside post html. So you should know basics to do these things, so without html basics you can’t make it perfectly and your widget will not work.
To Customize custom templates for blogger – Sometimes in blogger we use custom templates for better suitable design for our blog, But when we download that blog Template and uploade it in blogger, We must know HTML and CSS basics to do customize your custom template for your blog, You need to change Menu items, Some links if you want to change some sizes, colors so in this case knowing basic HTML and CSS is becomes must to customize custom blogger templates effectively.
To make Dropdown menu – Or to edit drop down menu code you got online, if you want to implement dropdown menu in blogger template then you need certain Codes that you will get ready made on internet but you need to add your links inside tabs that needs basic HTML knowledge otherwise you will end with ruining the code.
So to be a Pro-Blogger basic HTML & CSS is necessary, here i am making a full course for bloggers to learn basic HTML and CSS coding after completing this code bloggers can work effectively and can design their blog effectively, I will publish learning chapters once a Week and Update those in below Post. Basics of HTML/CSS course for beginner & Blogger
HTML Basics & Its Elements.
What is HTML?
HTML Abbreviation & Use= Hyper Text Markup Language. Used for creating Webpages that can be used on browsers, Can include write-ups, Links, Images and sometime Sounds and videos also. So HTML is used to mark these things so the web browser can display them properly in their sequence.
HTML describes structure of webpage, It consists of different elements These elements tell the browser how to display content, elements represented using html tags, tags are nothing but to Label different kind of content on webpage such as Heading, sub-headings, paragraph, bold text etc.
Refer Below Sample HTML page i have made using simple notepad and then run it using browser.(you can also make one type codes as shown in image and save file as “.html” instead of .txt) you can also use HTML Compiler for checking the code.
<!DOCTYPE html>
<html>
<head>
<title>Birds Photography Blog</title>
<style>
body {background-color: white;
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<h2>This is heading-2 for below paragraph</h2>
<p>This is paragraph</p>
<h3>This is Sub-heading h3 </h3>
<h4>Minor heading</h4>
<p>This is paragraph<p>
<h5>Minor heading 2</h5>
<p>This is paragraph<p>
<h6>Minor heading 3</h6>
<p>This is paragraph<p>
<img src="dandobahill.jpg" alt="Avatar" style="width:350px">
<a href="http://bloggerguest.com">Visit mu site</a>
</body>
</html>
HTML & Its Elements
1- <!DOCTYPE html> its just to define html page i.e. its HTML5
As shown in above image.
2- <html> tag defines the whole html webpage(document). put opening tag <html> at beginning and put closing tag </html> at end of html code. Every element or tag must be closed to work properly.(backslash is used to close tags).
3- <head> section is used to include Meta elements of page, like meta title, Meta description of your webspage or blog and is used by search engines to rank your webpage for relevant search queries. <head> tag also includes styling of page. <head> tag is important for bloggers also as to verify their website ownership they put verification code below <head> tag only, Google adsense auto ads script is also need to put inside header only.
As shown In above image we added a <Title> tag to show what is page is about? also <style> tag is used for stylink like we selected background color white, Font color black etc. <head>Head section is closed by closing head tag = </head> you should post meta data of your blog, like seo title, description etc inside this section only.
4- <body> Body tag is what visitors see online on blog/webpage, The element has a start tag <body> and an end tag </body>. Body may contain many tags, many section’s (tags) includes – headings, paragraphs, image tag, anchor tag and more.
Main tags used inside <body> tag
- 1-<h1>, <h2>,<h3>, <h4>,<h5>, <h6> tags as shown in above image & code used to give heading to your content, in which <h1> has high Importance and <h6> has relatively least Importance, These tags are also important while writing blog post content, you must use 1 <h1> tag and 2 or more times <h2> & <h3> tags, You should atleast use <h1><h2> & <h3> for good SEO of blog page, for lengthier content you can further use h4, h5, h6 to give heading. this way search engine will know which area has higher importance in your page.
(Note-Don’t overload blog with excess h1 tags for ranking higher it may result in blacklisting only 1 H1 tag is recommended per post 2 or more can be used only in case of longer articles) Recommended count for <h2> is 10 max remaining tags you can use many times.
HTML Heading tag Tips for blogger Post -By default blogger heading tag has <h2> tag so here is guide to add H1 – How to add H1 tag in Blogger Post?
- 2- <p> tag is used to define your paragraph, content text, Example <p>your post content here</p>
- 3- <img> tag is used to define and display image on webpage & Blog, to locate image we can use image url as well as image server location. in above example I displayed bird image using IMG tag
- 4- <a> anchor tag is used to define link on web page or blog , It is very useful tag can be used in dropdown menu, to create Table Of Contents using html, Commenting your post link on others posts and also for making go to top link.
Note: Every html tag need to be closed properly. for example <html> should be closed by </html> here we use forward slash, html tag is closed at end of web page i.e. after closing </body> tag & footer in some cases, & <head> tag closed using </head> tag before opening <body> tag.
So here we completed our chapter 1 of our course HTML/CSS basics for bloggers and Beginners. follow this link for complete HTML course free.
Thanks for your valuable article.