Making websites part-1

I already covered how to earn money from your content on the internet. Now I am taking a step back and get into putting your content online with your own website. There are a lot of programs that take coding out of your way but with this blog i want to take the fear away from coding your own. HTML and CSS code is very easy to understand and it does not take a genius to learn this. There are just a couple of basic rules you need to know. With some basic knowledge about HTML and CSS you can already start creating beautiful websites.

First we will start with HTML, it stands for HyperText Markup Language. Everything you do in HTML will be between "tags" like <body>"to do"</body> there are a lot of different tags but for now i will just explain the most important ones. Just make sure every tag has to be closed like in the example with a "/", without closing your website might still look good but it will have problems I discuss later on.

The first tag you should begin with is <html>. This is the root of the document, it tells browsers they should read it as HTML and all the other HTML you write for this document should go within this tag with a couple of advanced exceptions.

The first tag within your <html> tag should be <head>. This holds information about your document like the <title> or meta data. But can also reference link to another file which holds some other data you want to use. More on that later.

The one below the <head> will be <body>. This holds the contents you want to get on the screen. Here is a example of a very basic web page.

<html>
  <head>
    <title>A basic web page</title>
  </head>
  <body>
Hello World!
  </body>
</html>

This example is a perfectly working website. Except our content is not tagged, google might have trouble finding this content since it does not know much about it other then it resides within the <body> tag. It also shows without any layout, although we eventually want to use CSS for our layout let me give you a couple of examples on that exact line.

<p>Hello World!</p> This tag opens a paragraph there should automatically be some extra space between different <p> tags.

<h2>Hello World!</h2> Now this line resides in a header tag. Indexing robots count these as higher value unless you put to much content between <h> tags. The range of these <h> tags go from <h1> biggest to <h6> smallest.

Then we have tags like <b> bold, <i> italic, <u> underlined, <center> align in middle. And we can use it like this:

<center><h3>Hello World!</h3></center>

Hello World!


<p> Hello <b>world</b></p>
Hello world

<p><i>Hello</i><u>World</u></p>
HelloWorld 

As you can see it is very simple and effective. For this session i just want to tell you about one more. <br /> this is one of the exception tags that does not need to be closed and it just breaks the line. In the next episode of this series I am going to introduce a couple of advanced tags so you can interact with your users like forms. After that we will get into CSS which is truly awesome designing and laying out your website.

No comments:

Post a Comment