Webdevelopment for Beginners 02 - Lets start a project
Tags: html, css, beginners
Published: 2019-07-21 13:08:53

Welcome to my second part of the **Webdevelopment for Beginners** series! In this part we will start creating our first own project and write down some code. But before we write code, I'll explain to you what kind of code you're actually going to write.

# Meet HTML

HTML is a markup language used by browsers to create a "tree structure" of nodes which will be rendered. It's the core of every website and you won't come around HTML if you want to learn webdevelopment. But it's actually very easy **if you can think in ~~portals~~ boxes**.

A HTML file is made out of a lot of **Tags**.

```html
<header>
  <p>Hello world</p>
</header>
```

Here I used two tags called `header` and `p`. `<header>` is used to tell your browser that it's a header element, while `<p>` is a shorthand for **paragraph**.

Some browsers bring styles for their elements by default (for example headlines, paragraphs and lists always have default styles determined by the browser). A `<header>` element on the other hand does not provide any styles and will behave the same as any other element which will not have styles provided by the browser.

So this code would print out a header element with a paragraph containing "Hello world" in it.

# What kind of Tags are out there?

**A TON**. With HTML5 we received a lot of new tags to play around with. Most of them are **semantic** tags. Semantic tags are used to tell your browser what kind of element something is. `<header>` for example tells your browser, that it's a header element. This information can also be helpful for screen readers, search engines and more).

You can see a full list of HTML elements on the [MDN (Mozilla Developer Network)](https://developer.mozilla.org/docs/Web/HTML/Element).

As you can see there are plenty of them and each of them has their own role. In this tutorial you will learn a few elements you'll need a lot.

# Lets start creating a website

Enough talk about HTML, lets create a project and use it. I'd recommend creating a folder just for your website. I'll call mine `example-website`. Inside this new  folder, we will create a file called `index.html`. The index file is always the first page loaded by most of the webservers out there so `index.html` would be your homepage.

My workspace in Visual Studio Code now looks like this.

![](https://i.imgur.com/MSrOKYu.png)

You can now open your browser and drag in your `index.html` file to open it.

![](https://i.imgur.com/5kQwasz.png)

Well this looks boring. In Firefox and Chrome you can open the developer tools by pressing F12 or Command+Shift+I. For me it looks like this:

![](https://i.imgur.com/fFIRhp8.png)

As you can see, we have some code on the right side of the screen, but we actually didn't write a line of code yet. How can this be? The reason for that is, that every HTML file is required to have a `<html>`, `<body>` and `<head>` tag.

The `<html>` tag is the wrapper for your whole document. Everything lives in this file and it's the **root** node for your document.

The `<head>` tag is a place for meta informations like the page title, descriptions and other informations for your browser. It's also the place where most of the styling assets will be loaded at.

The `<body>` tag is the place, where the party actually is going on. It's the content of your website that will be visible to your visitors. Since every website requires these tags, we'll start writing them on our own in our `index.html`.

```html
<html>

<head>
  <title>Hello world</title>
</head>

<body>
</body>

</html>
```

The formatting is just my own choice and best practice defined by prettier. You can write your code as you like but you can try to stick to my style of indentation if you'd like to.

As you can see, we defined the html, head and body tags of our website but I also added a `<title>` tag with *Hello world* in it. What does it do? Well reload your website in your browser and see it by yourself!

![](https://i.imgur.com/6BC43tm.png)

As you can see, we now have a title for our website defined in the browser tab. The `title` tag is a tag with meta informations for your browser and also search engines or crawlers.

But your page is still white. Meh. How about we put on a title and some description of what this website is?

```html
<html>

<head>
  <title>Hello world</title>
</head>

<body>
  <h1>Tutorial demo website</h1>
  <p>This is a tutorial demo page for my dev.to beginner tutorial about HTML.</p>
</body>

</html>
```

We added in a `<h1>` and `<p>` tag here. We already talked about the `<p>` tag which means paragraph. But what does the `<h1>` mean? The `h` stands for headline and the number behind it is the type of headline.

If you think about it as a Word document, you would have 6 types of headlines. Each has it's own priority. `<h1>` to `<h6>` would mean that `<h1>` has the **highest priority** and should be used for page titles while `<h6>` has the **lowest priority** and should be used for very small section headlines.

If we now load our page, this is what we should see:

![](https://i.imgur.com/thN9jM1.png)

Cool! Now you have your first document written in HTML. Quite boring but at least something.

Wouldn't it be cool, if we could also add a link to your dev.to profile? Lets try this out!

```html
<html>

<head>
  <title>Hello world</title>
</head>

<body>
  <h1>Tutorial demo website</h1>
  <p>
    This is a tutorial demo page for my dev.to beginner tutorial about HTML.<br />
    You can find my profile <a href="https://dev.to/bdbch/">here</a>
  </p>
</body>

</html>
```

What is going on? We reformatted the paragraph a bit. As you can see, we're using a `<br />` here. Why is it written in this strange fashion? It's a **self-closing** tag. `br` stands for a line **br**eak which means, it can't have content itself. If a tag can't have it's own child element, it's a self closing element and can be written like this: `<tag />`. Another example for this would be images which I will show you afterwards.

You can see another new tag. `<a>` with some strange giberrish afterwards. This gibberish is an `attribute`. HTML tags can have many of them and they modify the behaviour of a tag.

The `<a>` tag is an anchor (or link) which means it can link your website to another page on click. Since you have to tell the anchor where to link to, you can use **attributes** to give it the information it needs.

This `<a>` tag would now link to my dev.to profile. Let's give it a try!

![](https://i.imgur.com/3BpXfZj.gif)

Now that works! Awesome. But it replaces the current tab 🤔, how could we fix t hat? Let's bring in another attribute called `target`. Both attributes are exclusive to the anchor tag. Target defines where the browser should open the link.

```html
<html>

<head>
  <title>Hello world</title>
</head>

<body>
  <h1>Tutorial demo website</h1>
  <p>
    This is a tutorial demo page for my dev.to beginner tutorial about HTML.<br />
    You can find my profile <a href="https://dev.to/bdbch/" target="_blank">here</a>
  </p>
</body>

</html>
```

We set the `target` attribute to `_blank`. This means it will open in a new window. Since browsers now have tabs, it will open in a new tab instead.

You can see all kind of attributes for the `<a>` tag [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes).

![](https://i.imgur.com/NC1lZDi.gif)

There we go. Now the link opens in a new tab.

# Conclusion

I think this should be enough to get the first concepts of HTML. My suggestion for you would be to try around a few elements from [here](https://developer.mozilla.org/docs/Web/HTML/Element). Play with them and their attributes to learn a bit more about them.

In the next part we will be adding **images**, **lists** and embed a YouTube player!

See you next time.