Login
Introduction to Blogging what you should know before get started

Introduction to Blogging what you should know before get started

What is a “blog”?

“Blog” is an abbreviated version of “weblog,” which is a term used to describe websites that maintain an ongoing chronicle of information.

A blog features diary-type commentary and links to articles on other websites, usually presented as a list of entries in reverse chronological order. Blogs range from the personal to the political, and can focus on one narrow subject or a whole range of subjects.

Many blogs focus on a particular topic, such as web design, home staging, sports, or mobile technology. Some are more eclectic, presenting links to all types of other sites. And others are more like personal journals, presenting the author’s daily life and thoughts.

CHECK: 25 Legit Ways to Make Money Online Blogging with WordPress

Generally speaking (although there are exceptions), blogs tend to have a few things in common:

diagram

  • A main content area with articles listed chronologically, newest on top. Often, the articles are organized into categories.
  • An archive of older articles.
  • A way for people to leave comments about the articles.
  • A list of links to other related sites, sometimes called a “blogroll”.
  • One or more “feeds” like RSS, Atom or RDF files.

Some blogs may have additional features beyond these.

ALSO CHECK:What’s wordpress and it’s uses in CMS

What is a “blogger”?

A blogger is a person who owns or runs a blog or a person who maintains the blog. That is, posting articles or new posts, information, sharing the most up-to-date news, opinions and case studies to name but a few. Such entries are known as blog posts.

The Blog Content

Content is the raison d’être for any website. Retail sites feature a catalog of products. University sites contain information about their campuses, curriculum, and faculty. News sites show the latest news stories. For a personal blog, you might have a bunch of observations, or reviews. Without some sort of updated content, there is little reason to visit a website more than once.

On a blog, the content consists of articles (also sometimes called “posts” or “entries”) that the author(s) writes. Yes, some blogs have multiple authors, each writing his/her own articles. Typically, blog authors compose their articles in a web-based interface, built into the blogging system itself. Some blogging systems also support the ability to use stand-alone “weblog client” software, which allows authors to write articles offline and upload them at a later time.

MUST KNOW: Advantages and disadvantages of using wordpress to build CMS

Comments

Want an interactive website? Wouldn’t it be nice if the readers of a website could leave comments, tips or impressions about the site or a specific article? With blogs, they can! Posting comments is one of the most exciting features of blogs.

Most blogs have a method to allow visitors to leave comments. There are also nifty ways for authors of other blogs to leave comments without even visiting the blog! Called “pingbacks” or “trackbacks“, they can inform other bloggers whenever they cite an article from another site in their own articles. All this ensures that online conversations can be maintained painlessly among various site users and websites.

The Difference Between a Blog and CMS?

Software that provides a method of managing your website is commonly called a CMS or “Content Management System”. Many blogging software programs are considered a specific type of CMS. They provide the features required to create and maintain a blog, and can make publishing on the internet as simple as writing an article, giving it a title, and organizing it under (one or more) categories. While some CMS programs offer vast and sophisticated features, a basic blogging tool provides an interface where you can work in an easy and, to some degree, intuitive manner while it handles the logistics involved in making your composition presentable and publicly available. In other words, you get to focus on what you want to write, and the blogging tool takes care of the rest of the site management.

WordPress is one such advanced blogging tool and it provides a rich set of features. Through its Administration Screen, you can set options for the behavior and presentation of your weblog. Via these Administration Screen, you can easily compose a blog post, push a button, and be published on the internet, instantly! WordPress goes to great pains to see that your blog posts look good, the text looks beautiful, and the html code it generates conforms to web standards.

If you’re just starting out, read Getting Started with WordPress, which contains information on how to get WordPress set up quickly and effectively, as well as information on performing basic tasks within WordPress, like creating new posts or editing existing ones.

Things Bloggers Need to Know

In addition to understanding how your specific blogging software works, such as WordPress, there are some terms and concepts you need to know.

Archives

A blog is also a good way to keep track of articles on a site. A lot of blogs feature an archive based on dates (like a monthly or yearly archive). The front page of a blog may feature a calendar of dates linked to daily archives. Archives can also be based on categories featuring all the articles related to a specific category.

It does not stop there; you can also archive your posts by author or alphabetically. The possibilities are endless. This ability to organize and present articles in a composed fashion is much of what makes blogging a popular personal publishing tool.

Feeds

A Feed is a function of special software that allows “Feedreaders” to access a site automatically looking for new content and then post updates about that new content to another site. This provides a way for users to keep up with the latest and hottest information posted on different blogging sites. Some Feeds include RSS (alternately defined as “Rich Site Summary” or “Really Simple Syndication”), Atom or RDF files. Dave Shea, author of the web design weblog Mezzoblue has written a comprehensive summary of feeds.

CHECK: Most 10 Best (Pay Per Click) PPC Sites Publisher Ad Networks For Bloggers

Syndication

A feed is a machine readable (usually XML) content publication that is updated regularly. Many weblogs publish a feed (usually RSS, but also possibly Atom and RDF and so on, as described above). There are tools out there that call themselves “feedreaders”. What they do is they keep checking specified blogs to see if they have been updated, and when the blogs are updated, they display the new post, and a link to it, with an excerpt (or the whole contents) of the post. Each feed contains items that are published over time. When checking a feed, the feedreader is actually looking for new items. New items are automatically discovered and downloaded for you to read, so you don’t have to visit all the blogs you are interested in. All you have to do with these feedreaders is to add the link to the RSS feed of all the blogs you are interested in. The feedreader will then inform you when any of the blogs have new posts in them. Most blogs have these “Syndication” feeds available for the readers to use.

 

Pretty Permalinks

Permalinks are the permanent URLs to your individual weblog posts, as well as categories and other lists of weblog postings. A permalink is what another weblogger will use to refer to your article (or section), or how you might send a link to your story in an e-mail message. Because others may link to your individual postings, the URL to that article shouldn’t change. Permalinks are intended to be permanent (valid for a long time).

“Pretty” Permalinks is the idea that URLs are frequently visible to the people who click them, and should therefore be crafted in such a way that they make sense, and not be filled with incomprehensible parameters. The best Permalinks are “hackable,” meaning a user might modify the link text in their browser to navigate to another section or listing of the weblog. For example, this is how the default Permalink to a story might look in a default WordPress installation:

/index.php?p=423

How is a user to know what “p” represents? Where did the number 423 come from?

In contrast, here is a well-structured, “Pretty” Permalink which could link to the same article, once the installation is configured to modify permalinks:

/archives/2003/05/23/my-cheese-sandwich/

One can easily guess that the Permalink includes the date of the posting, and the title, just by looking at the URL. One might also guess that hacking the URL to be /archives/2003/05/ would get a list of all the postings from May of 2003 (pretty cool). For more information on possible Permalink patterns in WordPress, see Using Permalinks.

Blog by email

Some blogging tools offer the ability to email your posts directly to your blog, all without direct interaction through the blogging tool interface. WordPress offers this cool feature. Using email, you can now send in your post content to a pre-determined email address & voila! Your post is published!

Post Slugs

If you’re using Pretty Permalinks, the Post Slug is the title of your article post within the link. The blogging tool software may simplify or truncate your title into a more appropriate form for using as a link. A title such as “I’ll Make A Wish” might be truncated to “ill-make-a-wish”. In WordPress, you can change the Post Slug to something else, like “make-a-wish”, which sounds better than a wish made when sick.

SEE: 25 Reasons Your Business Should Switch to WordPress

Excerpt

Excerpts are condensed summaries of your blog posts, with blogging tools being able to handle these in various ways. In WordPress, Excerpts can be specifically written to summarize the post, or generated automatically by using the first few paragraphs of a post or using the post up to a specific point, assigned by you.

Plugins

Plugins are cool bits of programming scripts that add additional functionality to your blog. These are often features which either enhance already available features or add them to your site.

WordPress offers simple and easy ways of adding Plugins to your blog. From the Administration Screen, there is a Plugins Screen. You can easily search, install and activate Plugins from this Screen.

Basics – A Few Blogging Tips

Starting a new blog is difficult and this can put many people off. Some may get off to a good start only to become quickly discouraged because of the lack of comments or visits. You want to stand out from this crowd of millions of bloggers, you want to be one of the few hundred thousand blogs that are actually visited. Here are some simple tips to help you on your way to blogging mastery:

  1. Post regularly, but don’t post if you have nothing worth posting about.
  2. Stick with only a few specific genres to talk about.
  3. Don’t put ‘subscribe’ and ‘vote me’ links all over the front page until you have people that like your blog enough to ignore them (they’re usually just in the way).
  4. Use a clean and simple theme if at all possible.
  5. Enjoy, blog for fun, comment on other peoples’ blogs (as they normally visit back).
  6. Have fun blogging and remember, there are no rules to what you post on your blog!

 

If you have any questions or enquires, please feel free to drop your comments

HTML TIPS: Everything You Need to Know To Get Started in HTML Basics

The aim is to show you ‘how’ to create your first web page without spending the entire tutorial focusing too much on the ‘why’. By the end of this tutorial, you will have the know-how to create a basic website and we hope that this will inspire you to delve further into the world of HTML using our follow-on guides.

What is HTML?

Ok, so this is the only bit of mandatory theory. In order to begin to write HTML, it helps if you know what you are writing. HTML is the language in which most websites are written. HTML is used to create pages and make them functional. The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design.

Background Facts

HTML was first created by Tim Berners-Lee in 1990. The latest version is known as HTML 5.

It stands for Hyper Text Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether.

Markup Language is a way that computers speak to each other to control how text is processed and presented.  To do this HTML uses two things: tags  and attributes.

What are Tags and Attributes?

Tags:

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened  <h1>  and closed </h1> in order to function

Attributes

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

<img src="mydog.gif" alt="A photo of my dog.">.

In this instance, the image source (src) and the alt text  (alt) are attributes of the <img> tag.

Rules You Must Remember Before Starting

  1. The vast majority of tags must be opened <Tag> and closed </Tag> with the element information such as a title or text resting between the tags.
  2. When using multiple tags, the tags must be closed in the order in which they were opened.

Tools of the Trade

Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.

First off, we must ensure that we have the right tools. Most importantly, we need an HTML editor. There are many choices on the market such as the extremely popular Notepad++.

However, for this tutorial, we will use the Bluefish Editor as it is free and also offers cross platform support for Windows, Mac, and Linux users.

If you don’t want to install any software, but want to preview code instantly — you can use an online HTML editor such as this simple html5 editor.

Do not use Microsoft Word or any other word processor when writing HTML code, only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task.

Secondly, ensure that you’ve installed a number of different browsers such as Chrome and Firefox in order to preview your upcoming creation.

Writing your first page with HTML code

First off, you need to open your HTML editor, where you will find a clean white page on which to write your code. From there you need to layout your page with the following tags. These tags should be placed underneath each other at the top of every HTML page that you create.

<!DOCTYPE html>
This tag specifies the language you will write on the page. In this case, the language is HTML 5.

<HTML>
This tag signals that from here on we are going to write in HTML code.

Underneath the HTML we will open two further elements:
<Head>
and
<Body>

The content placed inside the <Head> tag is mostly designed to be read by search engines and other robots and is not for human consumption. This tag identifies your page to other computers and will decide where your content will be ranked in popular search engines including Google.

Inside the <Head> tag we will open two further elements

<Title> This is where we insert the page name as it will appear at the top of the browser window.

Let’s try it out:

Write
<title> My First Webpage </title> on a blank line in your HTML editor.

Next, we will add the metadata, which is the information that search engines read about your site.

This should follow the following format:

<meta charset="UTF-8">

<meta name="description" content="This field contains information about your page. It is usually around two sentences long.">.

We can also create meta name attributes for “keywords”, “author” and other terms that you might want search engine bots to read.

Let’s try it out:
<meta charset="UTF-8">

<meta name="description" content="This is my first website. It includes lots of information about my life.">

Closing tag: </head>

Next, we will make <body> tag.

The HTML<body> is where we add the content which is designed for viewing by human eyes. This includes text, images, tables, forms and everything else that we see on the internet each day.

How to add headings to your page

In HTML, headings are written in the following elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

As you might have guessed <h1> and <h2> should be used for the most important while the remaining tags should be used for sub headings and less important text. Search engine bots use this order when deciphering which information is most important on a page.

Let’s try it out: On a new line in the HTML editor, type
<h1>Welcome to My Page</h1> 
and hit save. We will save this file as “index.html” in a new folder called “my webpage”.

The Moment of Truth: Click the newly saved file and your first ever web page should open in your default browser. It may not be pretty it’s yours….all yours evil laugh

Well let’s now get carried away, we’ve still got loads of great features that we can add your page.

How to add text to your web page

Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new paragraph.

We place all of our regular text inside the element <p>.

When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.

They are as follows:
<b> – Bold text
<strong> – Important text
<i> – Italic text
<em> – Emphasized text
<mark> – Marked text
<small> – Small text
<del> – Deleted text
<ins> – Inserted text
<sub> – Subscript text
<sup> – Superscript text

These tags must be opened and closed around the text in question.

For example:

<p> This is where the text goes. Sometimes we mark it in <strong>bold</strong>. </p>

Let’s try it out: On a new line in the HTML editor, type the following HTML code:
<p> Welcome to <em> my </em> brand new website. This site will be my <strong> new <strong> home on the web. </p>

Don’t forget to hit save and then refresh the page in your browser to see the results.

How to add links to your website

As you may have noticed, the internet is made up of lots of links. Almost everything you click on while surfing the web is a link takes you to another page within the website you are visiting or to an external site.

Links are included in an attribute opened by the <a> tag. This element is the first that we’ve met which uses an attribute and so it looks different to previously mentioned tags.

The <a> (or anchor) opening tag is written in the format:

<a href=“http://www.placeholder.com”>Your Link Text Here </a>

The first part of the attribute points to the page that will open once the link is clicked. Meanwhile, the second part of the attribute contains the text which will be displayed to a visitor in order to entice them to click on that link.

If you are building your own website then you will most likely host all of your pages on a server. In this case, internal links on your website will

<a href=“mylinkedpage.html”>Linktitle Here </a>.

Let’s try it out: Make a duplicate of the code from your current index.html page. Copy / paste it into a new window in your HTML editor. Save this new page as “page2.html” and ensure that it is saved in the same folder as your index.html page.

On page2 add the following code:

<a href=“http://www.google.com”>Google</a>

This will create a link to Google on page2.

Hit save and return to your index.html page.

On a new line on index.html add the following code:

<a href=“/page2.html”>Page2</a>

Hit save and preview index.html in your browser.

If everything is correct then you will see a link which will take you to your second page. On the second page, there will be a link that will take you to google.com

How to add images to your site

In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your site. Much like the <a> anchor element, <img> also contains an attribute. The attribute features information for your computer regarding the source, height, width and alt text of the image.

You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial.

The file types generally used for image files online are: .jpg, .png and .gif.

Alt text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site.

The <img alt> attribute appears as follows:

<img src=“yourimage.jpg" alt= “Describe the image” height="X" width="X">.

Let’s try it out: Save an image (.jpg, .png, .gif format) of your choice in the same folder where you’ve saved index.html and page2.html. Call this image “testpic.jpg”.

On a new line In your HTML editor enter the following code:

<img src=“testpic.jpg alt= “This is a test image” height="42" width="42">

Hit save and preview the index.html page in your browser.

Making a List

How to add lists to your page

In web design, there are 3 different types of lists which you may wish to add to your site.

The first is <ol>: This is an ordered list of contents. Eg.

  1. An item
  2. Another item
  3. Another goes here

Inside the <ol> tag we list each item on the list inside <li> </li> tags.

For example:

<ol>
<li> An item </li>
<li> Another item </li>
<li>Another goes here </li>
</ol>

The second type of list that you may wish to include is a <ul> unordered list. This is better known as a bullet point list and contains no numbers.

An example of this is:

<ul>
<li> This is </li>
<li> An Unordered </li>
<li> List </li>
</ul>

Finally, you may wish to include a definition list <dl> on your page.

An example of a <dl> list is as follows:

Item

The code used for the above is as follows:

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>

Let’s try it out: Open index.html and on a new line, enter the following HTML:

<p> This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li> Global Reach</li>
<li> Promotional Opportunities</li>
</ul>

Now hit save and check out the results in your browser. If everything worked out then it will display a bullet pointed table displaying the information above.

Adding a table to your website

Another way to keep your website looking neat and orderly is through the use of a table. This is definitely the most complicated part of this tutorial, however, studying it will certainly pay off in the long-run.

Important: Do not use a table to layout your website. Search engines hate it and it is generally a bad idea. Just…don’t.

With this in mind, tables can still be a useful way to present content on your page.

When drawing a table we must open an element with the <table> opening tag. Inside this tag we structure the table using the table rows, <tr>, and cells, <td>.

An example of a HTML table is as follows:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td> Row 1 - Colunm 2 </td>
<td> Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>

This will produce a 2-row table with 3 cells in each row.

Tables can get quite complicated so it is best to leave this for a later tutorial. However, watch out for these tags so that you can recognize them and use them as your skills develop:

<th> – Table header
<colgroup> – Column Group
<thead> – Table head
<tbody> – Table body
<tfoot> – Table foot

Tables, borders, spacing are usually styled using CSS but we will cover this in a later tutorial.

Let’s try it out: Go to a new line on the index.html page within your text editor. Enter the following HTML code:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td> Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>

Hit save and preview it in your browser.

Congratulations: You did it!

You’ve reached the end of the HTML TUTORIAL BASIC: A Plain and Simple Guide to HTML tutorial.

The final step we need to complete is to close the <body> and <html> tags at the end of each page using the following HTML code:

</body>
</html>

In this guide, you’ve learned how to create basic HTML web pages. You’ve also learned to add headings, text, images, links, lists and basic tables to these pages.

You can now use this knowledge to create your own web pages containing these features and link them together. We suggest that you further enhance your skills by experimenting with the code you’ve learned using different variables. You may also wish to learn about intermediate HTML elements or how to make your pages beautiful using CSS.

The power to create your own website is now in your hands.

Troubleshooting

:In case things didn’t work out as intended, simply check your HTML code against the examples below:

Index.html troubleshooting code
<!DOCTYPE html>
<html>
<head>
<title> My First Webpage </title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1> Welcome to my webpage </h1>
<p> Welcome to <em> my </em> brand new website. </p>
<p>This site will be my <strong> new <strong> home on the web.</p>
<a href=“/page2.html”>Page2</a>
<img src=“testpic.jpg alt= “This is a test image” height="42" width="42">
<p> This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li> Global Reach</li>
<li> Promotional Opportunities</li>
</ul>
<table>
<tr>
<td>Row 1 - Column 1</td>
<td> Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>
</body>
</html>

page2.html troubleshooting code
<!DOCTYPE html>
<html>
<head>
<title> My First Webpage </title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1> Welcome to my webpage </h1>
<p> Welcome to <em> my </em> brand new website. </p>
<p>This site will be my <strong> new <strong> home on the web.</p>
<a href=“http://www.google.com”>Google</a>
</body></html>

Where to go next?

Thanks for working through this simple crash course to HTML.  Keep learning!

WATCH OUT FOR BASIC II