HTML Hello World

It is considered a requirement when learning any new programming language that the first full example your write is “Hello, World”. I am not one to break from tradition, so let’s take everything and put it all together to make our first web site!

Setting Up

The first step is to create the project directory. Choose a place on your computer where you want to store your projects. I like to create a folder in my home directory called projects for this purpose. Then, create a folder inside called hello to hold this particular project. Here is what those commands look like when run from a terminal:

~$ mkdir projects
~$ cd projects
~/projects$ mkdir hello
~/projects$ cd hello

Those commands are identical if you are using the Linux/MacOS Terminal or the Windows Command Prompt.

Open the Project

Now, open the Text Editor you installed earlier. Inside the text editor, do a File > Open and navigate to the hello project directory.

Create an HTML Page

Inside the browser, right click on the folder name and select New File from the context menu. Name this file index.html. By calling it index we are telling our web server that this file is the root of the current directory. In the newly opened file, paste the following code in:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Title</title>
    </head>
    <body>
        <h1>Hello Heading</h1>
        <p>Hello paragraph.</p>
    </body>
</html>

Save the file.

Run the Web Server

Go back to the terminal window. You should still be in the project directory ~/projects/hello. If you aren’t, navigate back to it.

Now, run the following command to start the web server if you are on Python 2:

python -m SimpleHTTPServer

Or, run this command if on Python 3.x:

python -m http.server

Open in the Browser

You now have your page running at http://localhost:8000/. Click the link to open in your default browser. Congratulations! You have written your first web site!

Next Steps

You now have the basics to build a web site. The next step is to learn about the different HTML elements and how to use them to build more complicated web sites. Read through our guides on individual tags and you will master HTML in no time!

Want to learn more? Join our Virtual Boot Camp!