This is a user generated content for MyStory, a YourStory initiative to enable its community to contribute and have their voices heard. The views and writings here reflect that of the author and not of YourStory.
HTML beginners guide for bloggers: easy tips to grasp HTML skills
A Simple and Non-Scary Guide to HTML for Bloggers
This is a user generated content for MyStory, a YourStory initiative to enable its community to contribute and have their voices heard. The views and writings here reflect that of the author and not of YourStory.
Learning programming language is certainly not an easy task but the good news is that HTML uses common words that can now make it fairly straightforward and simple to pick up. From the small business owner to individuals working on a blog or personal project online, HTML knowledge is incredibly useful.
Well, I am Chandan Chakraborty a freelance website developer in Kolkata, India. I am professional Blogger and I write, speak about Website design and development. I share my tips and technics by blogs. Here I am sharing HTML Beginners Guide for Bloggers how bloggers can easily learn and apply few valuable codes to their blogs.
Many bloggers think HTML is complicated. A simple know how of HTML code & tags can make it an easier language for any blogger. In this guide we cover the HTML basics in an easy-to-understand manner, perfect for the absolute beginner. The article explains the basic know how of what HTML is, what it looks like, how it works, and why it’s important for bloggers.
Explaining HTML and its Work
Hypertext Markup Language, HTML is a standardized system for tagging text files to achieve font, color, bold or italic sections, graphics, hyperlink effects and much more on websites. It is basically a format for creating documents and web pages.
World Wide Web browsers use HTML tags to interpret & display the content of the page. You need just a basic understanding of HTML & you can create your own Website.
This is how an HTML Code Look Like
Look at an example of HTML:
<p>For a limited time, you can buy this novel online for <strong>just 499 INR</strong>.</p>
This is how this sentence would look live on the website:
For a limited time, you can buy this novel online for just 499 INR.
What are these codes used for:
The <p> and </p> start and end the paragraph.
The <strong> and </strong> start and end the section of bold text.
The <p>, </p>, <strong> and </strong> are called ‘tags’.
Remember- Each ‘element’ in HTML must have an opening tag and a closing tag as shown above.
How to View the HTML Version Of Your Blog Posts
The editor you usually use for writing your blog is “WYSIWYG” (“What You See Is What You Get”). This lets you see your post formatted in the same way it will appear on your website.
But you can easily switch to the HTML view of your post by:
Editing an existing post (or creating a new one)
Clicking the ‘Text’ tab at the top of the posting box (next to the ‘Visual’ tab).
Creating an HTML Version of Your Blog Post
If you’re guest posting for a blog that needs posts in HTML format, you can simply create your post as a draft on your own blog using the ‘Visual’ tab as normal. Then click the ‘Text’ tab and copy the HTML version into Notepad document as plain text.
Let’s Learn the Examples of Different HTML Tags
Here are some more tags you must know. Create a draft post or page on your blog, and start using these tags to gain HTML expertise:
Line break: <br/>
This tag is opened and closed all in one, which is why it has a forward slash at the end. The <br/> creates a single line break (not a paragraph break). You might use it if you’re writing poetry.
I
Am
Separating
These
Words
By
Line
Breaks
In the visual editor, you can hold down Shift while hitting Enter to create a line break.
Horizontal Rule: <hr/>
This is another tag that is opened and closed all in one. The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is used to separate content (or define a change) in an HTML page.
Let’s learn it with an example:
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>
The above HTML code will be displayed as:
HTML
HTML is a language for describing web pages.
CSS
CSS defines how to display HTML elements.
Lists: <ul> or <ol> and <li>
In HTML, these lists are called:
Unordered lists: <ul> (with bullet points – like this list)
Ordered lists: <ol> (with numbers)
Take a look at this example:
<p>I have just brought :</p>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
This HTML would create a list that looks like this:
I have just brought:
Coffee
Tea
Milk
If you wanted to number the items on the list, you can simply replace <ul> and </ul> with <ol> and </ol> respectively.
Links: <a> Anchor Tags
The HTML tag to create a link looks a little bit more complicated than the others that we’ve looked at. That’s because the tag includes the actual link.
Here’s an example:
In HTML, links are defined with the <a> tag:
<html>
<body>
<h2>HTML Links</h2>
<p><a href="https://www.wordpress.com/ ">For more info visit my site here</a></p>
</body>
</html>
The above HTML anchor tag will look like:
For more info visit my site here
What After Learning Basic HTML?
Now when you have learned the basic HTML it’s time to start using it on your blogs. To validate your learning, check your HTML coding on web tutorial sites like W3Schools.com or CodeAcademy.com. Just remember practicing HTML daily is the only way you can acquire proficiency on to this language. This is just an initial learning, there’s a lot more you can do with HTML, including creating ‘styles’ for your different elements, color fonts etc.
We wish you all the best in embracing this new skill. Who knows if this is the skill that will take you further & open the doors of success in your professional life?