How to create a simple blog post using HTML
Do you want to create a blog that can easily be edited in any text editors? You can do that by following these simple steps using HTML.
When you create a blog, it should contain a title, author, date, content and the likes and a new blog should appear above the last one. To do this, write the HTML codes fot the blog post and hide the codes from appearing on the actual post using comment tags. Then the code can be copied at any time from the comment section and pasted above the last blog to create a new one.
Before starting, there are some basic informations you should know about HTML
* All HTML documents must start with a document type declaration: <!DOCTYPE html>.
* An HTML element is defined by a start tag, some content, and an end tag
* HTML document begins with<html> and ends with </html>.
* The visible part of the HTML document is between <body> and </body>.
Let me get you through the process…
Step1: Getting started
Select a text editor from your computer ( In Windows PC, ‘Notepad’ can be found under ‘Application’ in the startup menu. In Mac PCs ‘Text Edit’ can be found by opening finder and clicking on ‘Applications’, then scroll down to ‘Text edit’and open it by double clicking on it) click on “File” then “New” to create a new file.
Step2: Creating a web page
Create a new webpage by writing the basic HTML tags
Note :<!DOCTYPE html> declaration defines that this document is an HTML5 document
Step3: Title
Use heading tags to write the title of your blog. Heading tags varies from <h1> to <h6> with <h1> being the larger one. I recommend <h1> here.
Step4: coding for the blog
Create the blog post code using suitable tags
Eg :- <p> paragraph — to add a blog of text
<em> emphasis — to emphasize a text(typically appears as italic )
<br> break — to insert single line break to the text
<hr> horizontal rule- used to separate content
(see the following example for more understanding)
Note: Some HTML elements have no content (like the <br>,<hr> element). These elements are called empty elements. Empty elements do not have an end tag
Step5: Hiding the codes
You are done with the coding part. That’s great. All that is remained is preventing the original code from appearing on the post. We need them for future use though. So we are going to keep them hidden in our page using comment tags.
<! — It’s a very simple trick — >
Step5: finishing
We are done with the HTML coding. All you have to do it save the final file by clicking on “file” and then, “Save”
You have done it. If you have followed all the steps correctly, you will be left with a simple blog page that you can update using any text editor .
you could add CSS tags to give this a classic look, but that is for another time