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.
<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).
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.
You can now open your browser and drag in your index.html file to open it.
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:
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>
<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!
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>
<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:
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>
<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 break 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!
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>
<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.
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. 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.
Top comments (1)
Careful with blank though, this can be considered bad UX, because it is changing standard behaviour. We shall let the user decide if he wants to open a site in the same tab or a new one, that said, I guess even not so tech-savvy users are meta-clicking links nowadays anyway.
An example for a good case of blank links would be if it'd mean data loss, when a link opens in the same tab, like when you've an editor (or a simple input field) and the user is about to write something when he decides to open a link.