Getting started

Create your first webpage

Learn how to use an editor to create a first webpage.

Learn HTML

We will not learn you how to code HTML or CSS. Use a tutorial like W3Schools for that: start with the "HTML introduction" and follow the pages until "HTML CSS".

Basic steps

These are the basic steps you should take. Each step is described in detail below.

  1. Install an editor
  2. Create a folder for your website
  3. Add a webpage (an index.html file)
  4. Add HTML code
  5. Preview the webpage

1. Install an editor

To write HTML code, you need an text editor. You may use an editor already present on your computer (eg. Notepad), but it is strongly recommended to use an editor which is suitable to manage a site and write code. We reccommend:

In this tutorial we will continue using Atom. Install the editor you choose and continue with the steps below.

2. Create a folder for your website

Start your editor:

Create a folder for your website, for example in your 'Documents' folder:

We can do this from the editor (or use the Windows Explorer/Finder):

In Atom: choose File > Add Project Folder, click New Folder, type a name, select it, press Select Folder:

You now are ready to add files to the website folder.

Important: add all files to the website folder

All files you would like to add to your site have to be in the website folder. So if you would like to add images, copy them to the website folder (it is recommended to create a subfolder for that, eg. with the name "img").

3. Add a webpage (an index.html file)

If there is already an 'untitled' file, skip the next line.

If there is no 'untitled' file, add a file via File > New File:

Now we have a new 'untitled' file:

Next, save the 'untitled' file: choose File > Save or press CTRL+S. Give the file the name index.html:

Your project in Atom should now look like:

You now are ready to add HTML code to the file index.html.

4. Add HTML code

Go to the HTML introduction of W3Schools, or to any other tutorial which shows a start of an HTML document. Now copy the HTML example code (select it and right-click it and choose Copy, or press CTRL+C):

Next, paste it in the index.html file in your editor (use Edit > Paste or CTRL+V):

Make some changes to the code. Add a proper title, headers and paragraph-text (info shown below is just an example):

Add an image

First, add a new folder 'img'. Right-click the website folder and choose New Folder:

Add it's name "img" and press Enter:

Copy an image to be used for the page to the folder "img" (use Windows Explorer/Finder):

Next, paste it in the subfolder 'img' of the website-folder:

Now study the W3Schools tutorial chapter on images. Add code for an image element to embed the image in the html document:

5. Preview the webpage

Save the file. (File > Save or CTRL+S)

To check if the page looks good, you can preview it in your browser. In the Windows Explorer (or Finder), browse to the website folder and double-click on the index.html file:

It might be a good idea to keep working with a preview opened, eg. with the browser next to the editor:

Tips:

The preview will change only once you save the file (press CTRL+S) and refresh the preview (press F5). But in browser-plus, you can turn on Live preview (icon with lightning bold), which will automatically refresh the preview (but you still have to press CTRL+S to save the file):

You can now further customize the page, make it your own, try out things. Maybe even add some style (go to the CSS tutorial of W3Schools to learn more).

You now are ready to upload the files to your site. This is explained in a separate page:

Next step: upload the page to your website

Important: your first page (homepage) should have the name index.html or index.php

For your site-address to work, your site should have an index-file: your first page (homepage) should have the name index.html (or index.php). Filenames are case-sensitive. Use only lowercase characters for index-files.

Atom tips: add packages

You can enhance Atom with packages. We will show you how to install the browser-plus package as an example.

You can close Settings afterwards:

After succesfull install of the browser-plus package use ALT+CTRL+O to start it (or right-click > Open Browser-Plus).