Friday, 24 January 2014

A simple HTML Document

Finally, we get to some real-world coding. I now explain to you how to create a simple HTML document that contains a little bit of JavaScript code. If you do not already know, HTML is a language used to define the format and layout of webpages. In this post I am not going to get into so much details, but rather I just want to show you how things work. Before you read my below instructions, it is important that you have a text-editing software. If you have not yet done so, then nothing to worry about! Just get back to my previous posts and download one of my recommended text-editing software (except Emacs). So here are the instructions (specifically for Sublime-text):
1- Open Sublime-text
2- Click on File->New. Now a new tab is opened where you can write text (just like a normal word processing software)
3- Copy the following code between 'start' and 'end':

<!--     START OF CODE         -->

<!DOCTYPE HTML>
<html>
<head>
<script>
function doIt(){
alert("Why did you click him? Don't listen to him! He is lying.");

}

</script>
</head>
<body>
<h3>This is a simple HTML document</h3>
You can:
<ol>
<li>Edit this document</li>
<li> Learn basic useage of HTML from it</li>
<li>Become familiar with JavaScript</li>

</ol>

<h4>Now you may click on the button below:</h4>
<button onclick="doIt()">Click me! Please Click me!</button>
Feel free to edit this sample. I will post more examples on my <a href="http://behnamazizi.blogspot.ca/">blog</a> soon!
</body>
</html>

<!--     END OF CODE         -->

4- Now click on File->save or simply press 'Ctrl+s', then choose the location where you want to save the file (a location that you can remember).
5- Open your browser (No! You don't need to do that as your browser is already open!)
6- press 'Ctrl+o' then open the file you just saved
7- If you follow the steps correctly you should now see how the HTML code looks like in your browser. Your browser turns all the code into this format that you see. Isn't this amazing?
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)