HTML Blog Tutorial
Blogs are the online equivalent of a journal. While some individuals create blogs for fun, others create blogs to portray a new hobby and yet others use blogs to talk about their vacations. Businesses use blogs to display company news, build relationships with customers and gain higher search engine ranking. While you can host your blog on sites like Blogger, WordPress or TypePad for free without any programming knowledge, some prefer using HTML code to create a blog from scratch.
Other People Are Reading
Instructions
-
-
1
Create the basic HTML body using the following tags:
<html>
<body></body>
<html> -
2
Name your blog and enter the name into the HTML title tags.
Use the following HTML code and insert your own title instead of the words "Blog Name":
<html>
<head>
<title>Blog Name</title>
</head>
<body>
<H1 align="center">Blog Name</H1>
</body>
</html>
The "Blog Name" inside the title tags displays the name in the top bar of the browser window and not inside the blog itself. The "Blog Name" surrounded by H1 tags displays the blog name on the actual blog page. -
-
3
Insert a blog post after the blog title.
Use the following code to create a blog post that contains a title for the post, image, three paragraphs of text and a website link.
<html>
<head>
<title>Blog Name</title>
</head>
<body>
<H1 align="center">Blog Name</H1>
<H3 align="center">Blog Post Title</H3>
<Img src="yourimage.jpg">
<p>First paragraph of blog post</p>
<p>Second paragraph of blog post</p>
<p>Third paragraph of blog post</p>
<a href="http://www.anywebsiteurl.com">Blog link</a>
</body>
</html>Replace the words "Blog Post Title" with the title of your blog post. Replace "yourimage.jpg" with the name of the image you wish to display. Insert paragraphs of blog text between the <p> and </p> tags. You can add additional paragraphs by inserting text into new <p> and </p> tags. Link to another webpage by replacing "http://www.anywebsiteurl.com" with your chosen webpage URL. Replace the words "Blog Link" with text that will link to this URL when clicked upon. The HTML link text (<a href="http://www.anywebsiteurl.com">Blog link</a>) can also be inserted between the <p> and </p> tags.
-
4
Repeat the code in Step 3 for each new blog post you add. Add the new post on top of the previous post.
The following is an example blog called "Sam's Blog" with three posts. Each post contains a different number of paragraphs. The first blog post does not contain an image and the second blog post does not contain a link.
<html>
<head>
<title>Sam's Blog</title>
</head>
<body>
<H1 align="center">Sam's Blog</H1>
<H3 align="center">Today's Blog Post</H3>
<Img src="image3.jpg">
<p>This is today's blog post. Today is turning out to be a great day.</p>
<p>I just love posting in my blog.</p>
<a href="http://www.todayurl.com">See today's link</a><H3 align="center">Yesterday's Blog Post</H3>
<Img src="image2.jpg">
<p>Hi! I know I haven't written in a few days. Nothing new is happening.</p><H3 align="center">Last Week's Blog Post</H3>
<p>Welcome to my blog. This is my first blog post.</p>
<p>As I create new blog posts, they will appear on top of this post.</p>
<p>Keep reading. I hope to make this blog exciting.</p>
<a href="http://www.firsturl.com">My first website link</a></body>
</html> -
5
Remove old blog posts from the bottom of the HTML page on a monthly basis to keep your blog feeling fresh and not overloading with content.
-
1
References
Resources
- Photo Credit journal and fountain pen image by jimcox40 from Fotolia.com
More Like This
Comments
-
Anonymous
Oct 22, 2011
Great txa -
mrsilkie
Feb 06, 2011
This should be done with a form and database should it not?
