There are plenty of frameworks that make creating websites but maybe you want to do it yourself. In this series of guides I will teach some of the basics of website programming, starting with HTML.

HTML (HyperText Markup Language) is a simple language, that can be used to make static websites. HTML actually tells the websites visitor how to display a website, meaning that it is up to the user’s browser to actually run the code. It is neither compiled (Like the C family) or interpreted (Like Python so no fancy compilers or interpreters are needed. You can code a website using Window’s notepad software, but any text editor will do (I personally prefer using notepad++)

To start writing our website, we will create a file call ‘index.html’. We call the file this because we aim to eventually put our website on a webserver. The software for hosting websites on these servers looks for a file called index to display first.

With our file created, we can now open it with our text editor of choice.

Let’s Start Coding

HTML is written with tags surrounded by < and >, usually with opening and closing tags but not always. The first tag we use is <!DOCTYPE html>. This tag doesn’t affect the look of the website, and isn’t strictly necessary, but it tells the users browser how to show the page and it is good practice to include it. DOCTYPE is a bit strange because you don’t have to close it, read on if that doesn’t make much sense.

After writing that we are using an HTML document, we then declare that the current part of the page we are working on is HTML and we do this with the <html> tag. This tag has to be closed however, so after opening it, you type it again but this time with a / before the name of the tag, like so:

This also isn’t strictly necessary right now, but it’s a good habit to get into for when we start using scripting. From now on all the coding we do will be between these two tags.

Next we can create a heading for our page. This is going to be a nice, big word or phrase to title the page/website. There are six levels of heading: h1 is the biggest, with h6 being the smallest. Like the html tag, this has to be opened and closed, but we will put the text to be displayed between the tags.

(The indentation on line 3 isn’t necessary and won’t impact the look of the website, but it does help make coding clearer.)

Here I used the classic “Hello, World!” but as this is your website, feel free to use whatever you want. To get some more experience with HTML, feel free to change the size of the heading. Remember to change the size on the closing tag as well.

What does this look like though? Well we can open the page with our browser by clicking on the file in our documents, and it should open.

Here is my site. It’s looking a little bare, so I think I’ll add some text. You can add paragraphs of text using the <p> tag, like this:

Viewing it in the browser shows me this:

Now it’s not looking quite so empty. I think that’s all for now. I know it’s still very basic, but it will flesh out as I keep writing these guides.

The code is available on GitHub if you want to download it, and as always you can always reach out to me on Twitter or Tumblr for any questions/suggestions/friendly messages.