Create an HTML webpage in 5 minutes


If this is the first article you are reading on web development you have come to the right place. Since we only have 5 minutes, let us not waste any more time on formalities.

You need a browser and an editor

We need two ingredients to make our webpage; an internet browser where we can see our webpage, and an editor to write the markup needed to create our webpage. I will assume that you are reading this article on my online blog, so that takes care of the first puzzle piece, an internet browser.

The second thing we need is an editor. You may already have chosen and downloaded an editor for this purpose, but if you have not, there is already an editor on your machine that works wonders for our little adventure today.

If you are on MAC OS, you can open the program on your machine called "TextEdit". If you are on Windows, open the program called "Notepad". Once you have done so, you are ready to make your webpage.

Hello, World!

Type "Hello, World!" into your editor - without the quotes, like shown below:

Hello, World!

Now save your document naming it "index.html", again, no quotes. Once you have done this, locate your "index.html" file and either drag the document into your browser, or open it using your browser as application or program.

Hello, World!

There we have it, your own website in a few minutes! That was quite simple no? I do think we can do a little better to make sure that we are following the HTML specefications to ensure full compatability. Let us use the last minute or two that we have left to do this.

Proper HTML markup

If we go back to our "index.html" file and update it with some HTML markup we can start to get our first taste of real web development.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

With the markup above, we have now defined the document type to be ensure the browser handles our HTML in a best-effort attempt. The text you see inside the angle brackets "<>" are called tags. They help browsers, search engines and other web developers understand and display the contents of our webpage. Our "Hello, World!" text is now inside such a tag denoted as <h1>, which represents a section heading.

Save the file and refresh your browser window with the "Hello, World!" text. It should now have transformed the text into a bigger and bolder text like shown below.

Hello, World!

Achievement unlocked!

Congratulations for making it to the end! You have created your own webpage in only a few minutes. Web development goes much deeper still. Stay tuned if you wish to learn more, or learn how to style a HTML webpage in one of my other posts.