How to Make a Blog in HTML

Written by michelle norton
  • Share
  • Tweet
  • Share
  • Email

Creating a blog in HTML is a simple way to have a blog you can update in any text editor. Blogs have several elements in common that are easily produced in basic HTML. Each blog post should appear above the last, have a title, date and content. Using HTML comment tags, the code for the blog posts stays in the page but is unseen until it is used for an actual post. The code is copied from the comment tag section and pasted in the page above the last blog post. Then, the code is filled in with content.

Skill level:
Easy

Other People Are Reading

Things you need

  • Text editor

Show MoreHide

Instructions

  1. 1

    Open the text editor and create a new file by clicking on "File" and "New." Every computer comes with a text editor. A Windows PC uses Notepad. This is found under "Applications" in the Start menu. Mac PCs have Text Edit. To open Text Edit, open Finder and click on "Applications". Scroll down to the Text Edit icon and double click to open.

  2. 2

    Create the web page by typing in the basic HTML tags for the page. For example:

    <html>

    <head>

    <title>My Blog</title>

    </head>

    <body>

    </body>

    </html>

  3. 3

    Use the largest heading tag to give the page a title. The heading tags start with h and end in a number with 1 being the largest. For example:

    <body>

    <h1 style="text-align: centre;">My Blog</h1>

    The style element uses CSS elements to centre the title on the page. Headers also leave a double space after them.

  4. 4

    Create the blog postcode by using smaller header tags and paragraph tags. For example:

    <h3>My First Post</h3>

    <em>June 1, 2010</em>

    <p>This is a post</p>

    <hr>

    The EM tag italicises the text. The break or BR tag puts a line break after the date. The P or paragraph tag puts a double line break after a block of text. The HR tag puts a line across the page after the paragraph.

  5. 5

    Copy the code for the blog post and place it before the first post. Place the code in the comment tag. The comment tag is <!-- -->. The page in the example will now look like:

    <html>

    <head>

    <title>My Blog</title>

    </head>

    <body>

    <h1 style="text-align: centre;">My Blog</h1>

    <!--<h3>My First Post</h3>

    <em>June 1, 2010</em>

    <p>This is a post</p>

    <hr> -->

    <h3>My First Post</h3>

    <em>June 1, 2010</em>

    <p>This is a post</p>

    <hr>

    </body>

    </html>

    The comment tag makes the unused code invisible to the browser. To use it for a blog post just copy the code and remove the comment tags.

  6. 6

    Save the file as index.html by clicking on "File" and "Save."

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.