HTML, the text editor for nerds.

Web development, where to start? Right here with HTML!

But first: KISS

First I'd like to explain the goal of this series of tutorials. The goal is to get people excited for web development and I want to do that as efficient as possible (hoping, like most teachers, to make it fun). This is why I'll try to apply the programming principle named KISS as much as possible. The basics should be enough to keep up with the series but I will provide links to resources if you want to know the ins and outs of the subject. So let's KISS and start already!

What is HTML

HTML is the basis of websites/apps. It is the language your browser translates to content on your screen. You can compare it with a text editor showing a stored document. The document contains the text and the editor shows it to you. In a webpage the content of the document is HTML and it is the browser that translates it to the content you read on your screen.

What does HTML look like

The source of an (almost) minimal webpage looks like this.

<!DOCTYPE html> 
<html>
  <head>
    <title>My webpage!</title>
  </head>
  <body>
    <h1>I'm writing html!</h1>
    <p>
      No idea what this all means
    </p>
  </body>
</html>

Tags and Elements

So let's establish some terms by looking at the following example:

<!DOCTYPE html><!-- tell the browser it is going to read html -->
<!-- This is a way to make comments in HTML -->
<html><!-- html opening TAG -->
  <head><!-- head opening tag -->
    <title>My webpage!</title>
  </head><!-- head closing tag --> 
  <body><!-- body opening tag -->
    <img src="https://fonts.gstatic.com/s/i/materialicons/done/v14/24px.svg" />
    <!-- a self closing tag with an attribute -->
  </body><!-- body closing tag -->
</html><!-- html closing tag -->

So a HTML document exists of html elements, these elements have a start tag(< elementName >) and closing tag (</ elementName >) or are selfclosing (< elementName />).

Every element between the opening tag and the closing tag of an element is considered a child of the element and is indented accordingly (for readability).

Attributes

You may have noticed that the img tag in the above example had something extra (src="..."). This is called an attribute. Attributes tell something about the element and can be found in the opening tag of the element.

Base HTML document

Let's create a HTML document and find out.

Create html file
Create a file with the html extension (filename.html)
If it doesn't work later on check if it is nog (filename.html.txt)

Fill it with html
Fill this file using a text editor (notepad e.g.) with one of the above examples

Open it
Open this file using a browser (Edge, Firefox, Chrome)

And there it is, your first html file, served by a browser! Good job.

The easy way to play with HTML

Don't worry if this didn't work. For the next few posts of this series we are going to use codepen for the examples and for playing with the code. For the HTML basics you can use this pen:

Basic HTML Pen

In a pen all you'll need to do is write the HTML that goes in the body element of the HTML document and the preview will automatically be updated.

Experiment

I found experimentation the fastest way to really learn something and make it stick so please experiment! Everything inside the body element of the document will be what you see in the browser.

Basic HTML Pen

A good resource for html elements:
Mozilla HTML elements reference
Mozilla HTML element img (shows attributes)
What is that first line in my document?

Try to create some sort of story, maybe a list or two, and some headings, or anything else you like.

Is this all?

These are the basics of HTML. Sure there is more to making a web app than just html but this is the basis. The next post for the series is going to be about styling the HTML document with CSS, adding color, placing stuff where you want etc. Feel free to leave a comment if you run into any problems and I'll get back to you as soon as possible!

Blog