Learn HTML

2019-12-12 Moduatehtml

HTML (Hypertext Markup Language) is the language used on the internet for structuring the content of websites. I’m going to be using atom on macOS for this tutorial to demonstrate how easily you can create an HTML document. Hopefully by the end of this tutorial you will have a good understanding of how HTML structures web pages. Our hope is that this tutorial will help and encourage you to further your learning and build on the core concepts learned here.

If you don’t already have atom installed you can get it from here

Start off by opening a blank document in atom.

HTML is made up of tags. These tags are how HTML defines different areas and sections of the document.

The DOM (Document Object model) represents how your HTML is read by the browser.

DOM diagram

The first tags needed in HTML are simply the <html> opening and closing tags.

<html>

</html>

Most tags in HTML need opening and closing. As you can see here the only minor difference between the opening and closing tags is that the closing tag includes a forward slash.

Everything else that we are going to put into our HTML file will go in between these tags.

We will be using tabs to indent our tags. These is common practice when writing code as it makes the code more readable (for us humans).

Note: Browsers and compilers are not interested in whitespace. They are merely used to make a code base more readable for us (anyone working on, or who will work on our codebase in the future).

Within the HTML tags we have two sections. We have the head section, so let’s add opening and closing head tags, and then we have the body section. So let’s also add opening and closing body tags.

<html>
  <head>

  </head>
  <body>

  </body>
</html>

What we have so far is simply the basic structure of any HTML file. We will now go through some basic, but vital tags that you should know to start building websites with HTML.

The head section is where the metadata goes (information about the page), and in the body section is where the actual content of the page goes (what gets displayed to the user).

In the head section we will add an opening and closing title tag. This is the text that gets displayed in a web browsers title bar.

So let’s add “Learn HTML” between our title tags.

...
  <head>
    <title>Learn HTML</title>
  </head>
...

We can see what this looks like after saving our document with a file extension of .html and after opening this same HTML file in our web browser.

Notice that the content of our page is currently blank, as we have not placed anything between our body opening and closing tags, but we can see our newly added title text displayed in our browsers title bar!

We will now add some content to our page.

Usually the first thing you would want is a heading. HTML has some handy header tags. These header tags start from h1, which is the biggest header tag in terms of styling (large font size, with a bold font-weight). Following the h1 tag are the h2, h3, h4, h5 and h6 tags, with each one getting progressively smaller in size, and with h6 being the smallest. We will use an h1 tag for our main heading and an h2 tag for our subheading.

HTML header tags

Add some Text between your h1 and h2 tags. Like so:

...
  <body>
    <h1>Learning HTML</h1>

    <h2>Practice makes Perfect</h2>
  </body>
...

Let’s save our document and go over to our browser to refresh the web page. Notice the changes reflected in our browser. Now that we have added some headings, we will move onto to adding some text. This is achieved with the <p> tag (p for paragraph).

So lets add our opening and closing <p> tags and place some text inside:

...
  <body>
    ...
    <p>This is a paragraph</p>
  </body>
...

Save our changes and refresh our browser, taking note of the now visible paragraph.

Because we are using HTML tags (h1, h2, p), with preset styling. Our web browser is able to display our content, with the correct indentation and line spacing, as we would expect to see it.

To add more paragraphs, just add more <p> tags. It really is that simple!

Next we will add an image to our web page.

To do this, we are going to use an image stored locally on our computer. If you don’t already have an image you can head over to pixabay and get a royalty free image from there.

Make sure you download your image and store it in the same directory as the HTML file that we are currently working on. This will enable use to reference it using a relative path.

To add our image to our HTML file we will make use of the HTML <img> tag. The img tag takes several properties within the tag itself.

One of these properties is the src attribute, which will have its value set to our image path. If we stored our downloaded image in the same directory as our HTML file, then we can use the images relative path. Otherwise we will need to use its absolute path.

...
  <body>
    ...
    <img src=”image.png” />
  </body>
...

It is interesting to note, that because we define everything about the img tag within the tag itself and because the image tag does not take any child nodes, ie, takes no content between its tags like our <h1> or <p> tags. There is no need syntactically for a closing tag. This is why the img tag is self closing, as can be seen above.

Let’s save our document, refresh our browser and we should now see the image displayed in our browser.

If we want to change the size of our image, instead of displaying it at its original size. We can add width and height attributes to our <img> tag as seen below:

<img src=”image.png” width=”200px” height=”200px” />

Note that px here represents the pixel unit of measurement.

Now if we save our document again and refresh our browser we can see that our image has been resized.

The last tag we are going to cover in this tutorial is the hr (horizontal rule) tag.

The <hr> tag is another self closing tag. Its sole purpose is to draw a horizontal line across the page. This can be great for visually separating content.

Our html file should now look something like this:

<html>
  <head>
    <title>Learn HTML</title>
  </head>
  <body>
    <h1>Learning HTML</h1>
    <h2>Practice makes Perfect</h2>
    <p>This is a paragraph</p>
    <hr />
    <img src="image.png" width="200px" height="200px" />
  </body>
</html>

recap

Conclusion

We started with html tags. Inside our html tags we placed our head and body tags. Remember that our head tag contains information about our page and inside this tag we placed our title tag, which is what gets displayed in our browsers title bar.

Our body tag is where our web page content goes. This is the content that a user sees in their browser window when loading our webpage. Inside our body tag we placed heading, sub-heading, paragraph, image and horizontal rule tags.

We also learned that several html tags are self-closing, meaning that no content goes between its open and closing tags.

If you would like to see how to host your website on the internet. To make it available for your friends and family to see. Subscribe and stay tuned as we will be covering how to do this in a future video!

We also, recommend that you keep tweaking your site and build on top of what you have currently learned. We will also cover a great source of resources to enhance your web learning experience in future videos!