Andrew's Tutorials

HTML Page

This tutorial requires the use of a text editing program like Notepad on Windows or TextEdit on Mac, however it will be easier to follow using a more fully featured editor which will colour the HTML code to make it easier to follow. I recommend Visual Studio Code.

  1. Create a new folder on your computer (for example in the documents area), named Website.
  2. Open your text editing programme and open the folder. If it does not permit opening of a folder, skip this step for now
  3. Create a new file. In Visual Studio Code you can choose File -> New File from the menu
  4. Save the file (if you were unable to open a folder earlier, save the file to the folder you just created). Name the file 'Index.html'
  5. Type the following text into the editor and then save the file again: 
    <!DOCTYPE html>
<html>
<head>
    <title>A test page</title>
</head>

<body>
    <p>Hello world</p>
</body>
</html>
  6. Navigate to the folder you created and open the index.html file – it should open with your computer's default web browser (e.g. Chrome, Edge, Safari etc.)
  7. You should see something similar to that displayed below: Webpage displayed in the browser
  8. Notice how the <title> element you added is displayed in the tab.
  9. You can also change the text in your text editor and use the refresh button (or F5) to view changes to your website as you are working on it.