You can make a web page simply by typing HTML code (for ‘HyperText Markup Language’) in a text editor and saving it as a file with the .html extension. Browsers can open these files and show them as web pages.
So, while you’ll learn a lot about HTML when time comes, let’s first get our hands dirty as fast as possible to get a feel for what you’ll be doing, and create your first web page!
Open notepad and type (to learn faster it’s best not to simply copy-paste!) the following:
<!doctype html> <html> <head> <title>My first web page!</title> </head> <body> <h3>Hello world!</h3> <p> This is a paragraph of text. </p> </body> </html>
Next, select File > Save As … in the top menu, choose ‘any type (*.*’, type index.html and hit save.
This creates a file named index.html on your computer. If you navigate to it with your file explorer and double-click, it will open in your browser, and show something like this:
Smile: you’re web coding!
Congratulations, you just created your first web page in HTML – maybe you’re not such an idiot after all! Now go eat a cookie, you’ve earned it.
You just did for the first time what you will be doing hundreds of times from now on, if you don’t chicken out of course. A great part of the work in building web sites consists of editing code in a text editor, pressing CTRL+S or CMD+S to save your changes, going to your browser, and hitting ‘refresh’ to see their effect.
Trust me, you’ll learn to love the ALT+TAB shortcut to switch between applications, and CTR+R to refresh your browser (or their mac equivalents using CMD) in no time.
What’s more, this lesson was more useful than it probably seemed. This web page serves as a template for all the work that follows. To follow the code snippets we show, which you should, put them between the <body> and </body> parts of your hello world page to see them in action.
In a next tutorial, we will have a closer look at the meaning of the HTML code that you used to create your web page. But first read about using a good free text editor for building web sites.