Now on Amazon Kindle - $1.99!
Want to have i7's Tech Tutorials delivered daily to one of your Amazon Kindle devices? Click here!

Monday, January 31, 2011

"Hello World!" HTML Document

Introduction:

I decided to do this tutorial because the idea of becoming a developer, specifically a Web Developer, is growing more and more popular. This tutorial will show you how to create a basic HTML document that simply outputs "Hello World!".

Preparation:

The only thing you will need for this tutorial is a simple text editor, we will use Microsoft Windows Notepad because it is available on all Windows PCs. I must point out why I said "simple" text editor. I said this because you will need to make sure the editor does NOT format the document in any way. It must remain in plain text for the browser to be able to read it and identify the code.

Step 1:

Open Windows Notepad. Notepad can be launched from the start menu at this location: All Programs -> Accessories -> Notepad.

Step 2:

Once you have Notepad open, copy / paste the following HTML structure code. I will not go into detail about what this code does or how it works for now. If you do find yourself interested, visit the W3C Schools HTML Tutorial here. This tutorial is great for beginner and intermediate HTML developers.

<html>
<head>
<title>Hello World!</title>
</head>
<body>


</body>
</html> 



Please note that the space in between each body (highlighted above) tag is intentional. It isn't required, but makes things a lot easier for this tutorial.

Step 3:

After you have pasted the code above into the blank Notepad document, we can move on to the cool part! Take the following string and place it in the space we left in between the <body> tags above.

Hello World!

Once you have done this, save your document as 'index.html'. You can save this document by clicking 'File', then 'Save As'. Please note that you must change the file extension drop down box to say 'All Files'. Then click 'Save'.



Finally:

Open your favorite web browser. Once it has loaded your home page, we must open our Hello World! document. In Internet Explorer and many 3rd Party browsers, this can be done by pressing the keyboard binding Ctrl + O. These keys must be pressed at the same time. Alternatively, you can click File - > Open.

In the dialog that appears, choose 'Browse'. Then navigate to your documents folder and choose index.html. Choose Open, then Ok.

There it is! our Hello World! HTML document.

Conclusion:

Anyone can become anything they want to be, including a software developer. What we just did in this tutorial is HTML programming at it's most basic level. If you are interested in learning more about this language and / or wish to become a more advanced HTML developer, I highly recommend you follow the W3C Schools HTML tutorial located here.

No comments:

Post a Comment