Once we are familiar with the key concepts of the web, browser and how it works, now its time to see how to get started with it. If you have not yet gone through them, here are the links,
1. introduction
2. getting used to the terms
I hope by now you have gone through the above links. This is not mandatory, but then going through them will bring you to the same page with me. Else it will be a little difficult for any one to understand what is being referred in the tutorial here.
Well, lets get into action. By now, you must be knowing to start with a web-page we at least need 3 files (Not mandatory but good way to segregate different functionality in different files, refer to the “getting used to the terms” reference for more on this ). So the 3 files are, one HTML file, one Javascript file and one CSS file. We will start to put the basic code for these.
The HTML file is stored with an extension of “.html”, CSS files are stored as “.css” and javascript files are stored as “.js” files. Lets write our first html file.
The very basic HTML page code will look something like

Though you might be thinking what the hell is

Well, may be its one of those little things, you were ignoring from the past days. But its so important thing that will take another post all together. For the time being, lets settle down by saying, “it defines or tells the browser that the following page is of this kind.” That means, if a browser reads your html page and tried to render it, it will not guess how to render the particular elements but just know that these elements belong to this kind of things. After that the normal “html” tag begins and it must contain “head” and “body” tags to be a valid HTML page. Well, at this point you may try all types of things with these HTML tags. Remove the “head” section and save it as HTML, then see it through browser !! And can complain that my html page looks the same! Why I need a “head” altogether! Thats for the line above says “Valid” HTML page.
A little talk about the web today. When something goes to the web, its not your local usergroup or some bunch of friends. Its the globe looking at your page. And the time has already come, when people are really interested to see how you write something. If your page is not a valid page, you are setting yourself up for a bad face value in the beginning. And first impression is the last impression. Suppose you have applied for a job and provided some references to your web design work. The recruiter has gone through your portfolio, which were nice visuals but not standards compliant, then there may be chances you will fail despite of the visual layout. Thats just one example. The world wide web is much more than you think and consume. Everyone is peeping into your standards, if they found something interesting in your web page. Then there are search engine optimisations, which can not happen if you do not put the ground for it. You might not be doing a search engine optimisation job, but without these basic standard setup, the job of a search engine optimisation guy would be doubled!! He has to fix your code for the standards and then go ahead do his job. These are some of the many things, why you should be doing the standards compliant web design.
Lets go back to our discussion. Now, we know that these are basic tags for an HTML page. How can I validate whether its a standards compliant or not. Well, there are validators. Here is a direct link to W3C validor. The complete suite of validation products are here. Thats good to know do not you think so. Yeah, people and organisations have done a great job for us. Now apart from all those online validators, browsers also ship with some kind of validators. Or there are addons and plugins available for different browsers for validation.
So lets say our basic HTML page is ready with the code above. Now all I need to do is, add my other two files(javascript and CSS) to it. Make two text files with names as “actions.js” and “design.css” and save these two files in the same folder as the HTML page. The names of the files are not important but the extensions are important.
One more sweet and important update is if you are starting to experiment with HTML5, then the doctype definition, which is the top line of any HTML page is just as below

Are you kidding!?! No. I am serious. Whooaa. Thats the beginning of the excitement of HTML5. Now I think, you must not forget to add this line at top of the html document , its just two words instead of the long ones we had previously.
Well, lets see what are our all these three files look like now.
The html page “hello.html” (name could be anything)

The javascript file “actions.js”

function showReady()
{
	alert("Document is ready!");
}

The CSS file “design.css”

body
{
	background:#ff0000;
}

Now at this point, if you save all three files in one folder and open the HTML page in a browser, you will see nothing special. As we have not added the style and action to our HTML page yet. So lets do it. This is basically done on the “head” section of your HTML page. Now the new page code will look as

Take a close look between the “head” tags for the additions.

Now if you refresh the browser, which had opened the page, now the page is rendered as a red coloured page. Congratulations! Your first HTML styling is done.
If you do not understand what is happening in the javascript file, thats ok. Its not doing anything yet! And we will go deep of that latter. Lets first see how we can add different files in our HTML document.
For adding external javascript file and CSS file in any HTML page, the syntax is same as shown above in the HTML page. The fun is, we have not touched the HTML page for making it RED. We just added the Style sheet and defined our style there. More on the style tags and how will come soon, keep tuned. But if you are really curious, you can now go ahead and search for these terms on internet and try out for yourself.
Well, lets add some actions As we have defined something in our javascript file and added the file to our html page, but it is actually doing nothing! You can check that by removing everything there is in the javascript file. and reloading the page in a browser. Not much will happen. Just the same old result of a Red page. Thats because, we need to tell something inside our HTML page. Well, then you will say we will mdify HTML page!! Then why should we write a different javascript file, we can write everything inside HTML page only. Actually there are some very cool libraries of javascript available today, which can help us in that. They will allow us to not to touch the HTML file at all. Since we are beginning, lets see how its done at its basics, when we get comfortable in it, will dive into more javascript libraries and frameworks. At this point, I hope your files are looking exactly as it is shown. If you have previously removed the code from the javascript file, then put that back again. Now update the HTML file as below

We just modified the “body” tag from “body” to “body onload=”showReady()”". Now if you refresh the browser, you can see an alert box, saying “Document is ready!” Look at our javascript file, we have mentioned that message there. Change the message and refresh the page, you will get the updated alert message. Thats all for the actions

Thats a long journey till now. But thank yourself for getting the understanding of things. There is not much to the code here than the understanding. And lastly, there is no limitations as to how many files you can include in an HTML page. We can include as many CSS and Javascript files as we want.

There is a very cool tool available to you online, provided by javascript guru Remy Sharp known as JS Bin. So go ahead and try that, if you do not have any editor with you now or you want to learn in a real interactive way.

Would love to listen back from you. So please leave a comment here. Ask questions and put your findings in the comments section. I would love to help, with whatever knowledge I have.

Finally enjoy things you are doing
Happy living.