HTML Document 1: What is a html document? How do I make one?

If you want to write a document that will be printed to paper, you use Microsoft Word or LibreOffice Writer to make a printable document. If you want to write a document that will be displayed as a slideshow, you use Microsoft PowerPoint or LibreOffice Impress. Computers aren't paper or presentations though, so what kind of document exists to be on a computer? That is what HTML is. In the same way a printable document would be a docx or odt file, or a presentation would be a pptx or odp file, computer documents are html files.

For this part of the Web development guide we're not going to talk about the Internet, or the Web even. We're just going to talk about creating computer-native documents with HTML.

Getting started

To follow along, you'll need the following:

  • A computer (Windows, Linux, Mac, doesn't matter)
  • A Web browser (I recommend Firefox but any will work)
  • A text editor (For Windows, try Notepad++, for Linux or MacOS try Geany)

We will start by making a HTML document. Open the folder you want to place your file and create a file called "hello.html".

If you're using Windows

Windows is weird about this. In your folder options you need to enable file extensions. Otherwise Windows will happily let you make a "hello.html.txt" and confuse you. This is done differently on different versions of Windows, so just search "How to show file extensions on Windows" and find a guide. You only have to do this once.

Now, open your "hello.html" file in your Web browser. The url bar should say "file://" followed by the path to your file, and the page itself should be empty. This is good. Open "hello.html" in your text editor of choice as well and put these windows side by side. You should now have the same file open in your browser and in your text editor.

In the text editor, write:

Hello

then switch to your Browser and reload the page by clicking the reload button or pressing F5 on your keyboard. You should now see "Hello" in the browser. Well done.

Recap

We did the following:

  • Made sure our system has everything we need to make html documents
  • Created a document by making a file called "hello.html"
  • Edited this document
  • Saw the changes on the screen

You should practise this until you are comfortable with it. Try changing the text in the file, and reloading the page, and see what happens. All future html guides will start with making a html file and opening it in a browser and a text editor, so get used to doing this.