Create and View a Web Page on Your Computer

Requirements:

  • Text Editor
  • An Internet Browser
  • Completed Unit 1 of Codecademy's Learn HTML & CSS course

Introduction

When you navigate to a web page on the Internet, the browser is doing a lot of work. The browser reads all the necessary files (HTML, CSS, and JavaScript) and interprets those raw resources to paint the complex page you see.

In this article, you'll learn how to create a web page using a text editor on your own computer, then view the web page in your browser. If you're interested in publishing your web page to the World Wide Web (the Internet) for everyone to see, check out this article after you understand the steps below.

Step 1: Open Your Text Editor

The first step is to open your text editor. It's important to use a "raw" text editor, and not a formatted word processor.

Word processors insert characters which make the page look good, but aren't valid HTML. They're great tools for making stylish documents, such as academic papers and flyers, but they also insert characters that aren't valid HTML. Since a web page file must contain valid HTML, a text editor is a better tool than a word processor for building web pages.

Step 2: Write Your HTML Skeleton

Now that your text editor is open, you can begin writing your HTML. As you learned in the first lesson of the HTML & CSS course, there are a few things that are always present in a well-formatted HTML file. Here's all of them together again:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

You can use this exact skeleton if you like. Just copy and paste it into your text editor. Make sure you include everything!

Step 3: Save Your File

Your web page is now ready, but currently it only exists inside of your text editor. The next step is to save the file to your computer. If you closed the text editor now without saving, your new web page would be lost! There are a few important things to keep in mind when you save it the file:

  1. Use the .html HTML file extension, i.e. about_me.html
  2. Don't use any spaces or special characters in the file name. Use underscores (_) or dashes (-) instead.
  3. Decide where in your computer you will save the file, and make sure to remember the location!
Use the .html HTML file extension

A file extension is the suffix of a file name, and describes the type of the file. The file extension is always the last 3 or 4 characters in a filename, preceded by a period. For example, the HTML file extension is .html, and it tells the browser (and other applications) to interpret the contents of the file as a web page. Note that on older web pages you may see .htm, but this archaic and no longer used.

Don't use any spaces or special characters in the file name

When choosing a file name, keep it simple. Stick to numbers and letters. Use underscores (_) or dashes (-) instead of spaces. Leave out percent signs, slashes, question marks, exclamation points, commas, and other "special characters". The browser needs to locate the file based on its name, and special characters within the file name can interrupt that process. File names should be kept simple and should follow conventions in order to make navigating to your web page more reliable.

Decide where in your computer you will save the file

After choosing a file name, select an appropriate location in your file system to save your web page. It's good practice to create a new folder to house this web page. If you do create a new folder, use the same naming conventions outlined above in order to minimize future headaches. The most important thing when selecting the location to save to is to remember where you saved it. If you saved it already but you don't remember where, just click File > Save As..., choose a new location to save, and be sure to remember this time.

Step 4: Open Your Web Page in Your Browser

Now you're ready to view your new page in your browser! First, open up your browser. In the top menu, click File > Open File. Navigate to the location you saved your web page. Click on your web page file and then click Open. You should see your web page!

Review

In this short time you learned how to take what you're learning on Codecademy and use it on your own personal computer. You also learned about file extensions, text editors, and saving and viewing local files. Now you are prepared to test out anything you learn in Codecademy for yourself, and practice on your own!