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!
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!
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!