Learning HTML and CSS from scratch - part 1

/ #HTML


HTML is the most fundamental thing you need to learn to build websites. All websites in the Internet started with HTML in the bottom of the stack.

What is HTML?

First of all, what is HTML?
HTML stands for Hyper Text Markup Language. It's not actually a programming language, but many people still refer to it as one (and so do I).

You can think of HTML as building blocks for the web. You use different elements to build a website and describe to the browser what type of content you are building.

Plain HTML without CSS looks bad, so this is also something you need to learn to build pretty web sites. We will come back to this later!

Where to start?

There are tons of different tutorials where you can learn to build websites using HTML. I'm going to teach you HTML by first explaining a couple of key terms and then go over to teach you basic HTML.

Elements and attributes

HTML is built up using elements. Elements can also have attributes to add different data to it. I'm going to show a couple of different HTML elements and then explain them afterwards.

<h1>This is a large headline</h1>
<p>This is a paragraph</p>
<div>This is a container</div>

The first line in this code is what we call a heading. There are six different headings (h1, h2, h3, h4, h5 and h6). The lower the number, the more important the information in it is. You typically use h1 for the page titles, h2 for sub titles and so on.

The next line is a paragraph. Just like the line you're reading right now.

The third line is a "div". We use this to group other elements together. A div-element can contain child elements, like this:

<div>
  <h1>The title</h1>
  <p>The paragraph</p>
<div>

Most HTML elements can contain information in it, and then it's important that we close it using a backslash. There are some elements that don't have content like images, line breaks, rulers, etc.

We will come back to more elements and also atributes later, it's just important that you understand how it works.

Try it your self

Create a new file on your computer called "part1.html" and add the following content to it:

<div>
  <h1>The title</h1>
  <p>The paragraph</p>
<div>

Go to your favorite browser and open the file there. Congrats, that's your first HTML page :-)

Summary

In this part, you learned what HTML is and what it's used for. In the next part of this series, you will learn some more elements and how to use attributes.

Comments

No comments yet...

Add comment

Newsletter

Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.