Build a free webpage in 10 mins!
There are two programs you will need in order to create a webpage and both are already on your computer if you have a pc with Microsoft Windows on it. Any version of Windows post-1998 will work perfectly. (The same concepts will apply to an Apple computer or a pc with an alternative operating system but this tutorial focuses on the most commonly used computer combo: a Windows pc.) Those two programs are Notepad and an internet browser. The webpage itself is created in Notepad but the results are viewed from within the browser. Notepad is a simple text-editor that is included in the operating system of all Windows computers. The easiest way to locate Notepad is to do a quick search on your computer. To open the search box, press the Start button.     Then type the full name of the program: notepad.exe.     The shortcut to Notepad is now visible. To open Notepad, click on the icon.     Perfect! Now you are ready to go...let’s build a simple webpage. First, let’s save our webpage to your computer’s desktop. Select File > Save As.     This opens the Save As dialog box. Select your desktop as the location.     Next, name the document myfirstpage.html. (Don’t hit the save button yet!)     Now the great thing about a text-editor like Notepad is that it can be used for writing in multiple computer languages. Websites are created using the language called HTML or Hypertext Markup Language. So it is important that we change the file type to All Files. This tells our computer that this document is not a text document. The extension at the end of our document’s name (.html) informs your computer that it is in fact a webpage.     Ok, now it’s time to save. Click on the Save button. In order to view our page as a webpage, we need to see it from inside an internet browser. There are numerous free browsers that are available like Safari, Firefox, Opera, Netscape and Chrome. However in this example we will utilize Microsoft’s Internet Explorer, commonly referred to as IE, as this is already installed on your computer. On your desktop, you will see your webpage called myfirstpage.html. Double-click on it to open it. (This will automatically open your default browser on your computer. In our example, this is Internet Explorer.)     And behold there it is! Your first webpage which looks exactly like...a blank page. Hmmm...     Well of course it is blank. We haven’t added anything to it yet. Back to Notepad! Type the traditional first line of code in any computer language. You guessed it...type Hello World! and save the changes.     Now back to the browser! Click on the Refresh button and behold...your first web message to the world. Well done!     Now what if we wanted to change the font size or the page color? Just typing straight into notepad allows us to add plain text but without HTML tags we can’t access any of the fun stuff. So let’s add HTML tags now. Delete the existing text, and then type the following:     Everything we place between the opening and closing HTML tags can utilize HTML formatting. The next set of HTML tags we need are the body tags. The body of the page is where we will type the text for our webpage. Type the following in Notepad:     Now inside the body tags type: This is my first webpage. Isn’t it cool?     Save the changes in Notepad then refresh your browser to view the results.   So now for some fun stuff! Let’s make the word webpage bold. To do this we need to add an opening bold tag in front of the word and a closing bold tag after the word.     Save the changes and then refresh your browser. Woohoo!     Now what if we wanted to make the second sentence show up in italics? Easy! Return to Notepad and add the following.     Save the changes and refresh the browser. Too easy!     This text looks a little small, doesn’t it? Let’s make it bigger! This time we are going to use a more complex tag: the font tag. Text can come in different sizes and colors so this tag is a little different. We are going to change the text size to 16 pixels which means we need to add a font tag that has the added attribute related to font size. Type the following:     Save the changes and refresh your browser. Excellent!     Black is the default color for webpage text which is all well and good but not nearly colorful enough for our webpage. Bring on the colors! Let’s change the text color to blue by adding to the existing font tag. The attribute we will add is the color attribute. Type the following:     Save the changes and refresh the browser.     Colorful text is great but what would be even better is a colorful webpage. Would you like to change the page color? Cool – let’s do it! So how do we affect the background color of a page? We would need to add a color attribute to a tag, but which one? The page is represented by the body tags so what we need to do is add the background color attribute inside the opening body tag. Type the following:     Save and refresh.   Wow! Now that is a colorful webpage. Try changing the font and background colors to red and green or yellow and black or pink and white. Guess what? You just built a basic webpage all on your own, without a fancy degree or expensive software. It’s just that simple. Now it’s time to take it to the next level! How do we add images, create a navigation menu and link to other webpages or even emails? Find out how in our Create a Simple Website using HTML intro course today. You’ll be online in no time!

This tutorial is free and available for all to use and enjoy. However the text and images for this tutorial are protected by copyright and are not to be copied or reproduced, either partially or in full, for either free or commercial use. Any references to this tutorial, in any form (i.e. virtual or paper), should clearly state the ownership of this material.