Let’s make a website. Episode II – HTML
Attack of the HTML.*
Hey! Good to see you again.
So, what happened last time? We copied and pasted some code into Notepad, saved it as a .html file, opened this file in the browser, saw “Hello, World!”, and we didn’t really get what the f*ck was going on.
This time, I’m gonna tell you what actually happened. Oh yeah.
The thing that actually happened
The browser
Chrome, Firefox, Safari, Edge. Those are cool names, but they’re also browsers. A web browser allows you to, you guessed it, browse the web. You use one every day to check Facebook, read your mail, look at the news, and enjoy awesome blogs like this one.
The web is composed of so-called web pages. They’re everywhere. The page you’re reading right now is a web page. Your Facebook profile is a web page. And just like a Word document can be read by Word, a web page can be read by your browser.
The code
How does the browser know the contents of the page? What does the page look like? This is where the code comes in.
We need a way to tell the browser: “I want this paragraph right here, and this image in the header.” Writing all of this in English (or any other spoken language) would be long, tedious, and prone to errors given the complexity of the language. Can you imagine making a website this way?
The code would probably look like this:
Alright so put an image of a red panda from Google Images on the top left corner of the screen.
But not too close to the edge of the screen. Like probably just a little on the right.
Also after you're done with that, put this exact text next to it (and when I say next to it I mean on the right of the image): "Picture of a red panda"Wow! This is terrible, I know.
It’s extremely verbose, and it takes too much time for a human to extract the meaningful information from the code. You can’t quickly read the text and understand what it does. Also, someone else could phrase this description differently. It would be very difficult to make a browser which would understand all the different ways someone could describe a web page.
This is why HTML was invented. HTML (for HyperText Markup Language) is a language readable by humans and browsers. It allows you to describe the contents of a web page with a few keywords that your browser will understand.
Remember the code from last time?
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>This is HTML.
Every web page on the Internet is made of HTML code. So basically, last time when we opened the HTML file with the browser, it read the code and displayed what it understood from it on your screen.
That’s why we saw “Hello, World!”.
HTML
Your new friends, the tags
Let’s see the code again.
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>You now know that this is HTML code.
“You now know that this is HTML code.”
— Me
You can probably tell that it involves some “Hello, World!” text, but what are those weird symbols and keywords? <html>? <h1>?
Those are called tags. They are the building blocks of HTML. You open a tag with <name-of-the-tag> and you close it with </name-of-the-tag>. Note the slash in front of the name for the closing tag. This is to differentiate it from the opening tag. Everything between the opening and the closing tag is affected by the tag itself.
say what?
Alright, terrible explanation. Let’s look at an example, <h1>.
<h1>Hello, World!</h1><h1> is a tag which tells the browser: “Hey man, the text between <h1> and </h1> is a title, just so you know. Alright cool see ya”.
So basically, anything you put between <h1> and </h1> will be seen as a title by your browser. This is why the “Hello, World!” text was super huge.
Inception II
Brace yourselves. Are you ready?
You can put tags in tags. And put these tags in other tags.
This is why you can do this:
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>As you can see, the <h1> tag is in the <body> tag, which is itself in the <html> tag. Your browser understands this.
On the subject of <html> and <body>
Ok, we know <h1> now, but what are <html> and <body> doing?
By themselves, not much. We’ll talk more about them later, but basically:
<html>tells the browser: “Everything between my opening and closing tag is HTML code.”<body>tells the browser: “Everything between my opening and closing tag is the actual content of the page.”
Right now, this might sound pretty similar, but as we’ll see later, there’s an actual difference. #teaser #cantwaittoknowthedifferencebetweenhtmlandbody
And now, to conclude this part
Wow. That was a lot of theory. If you made it through, congrats! Let’s briefly recap what you learned:
- The browser reads HTML code, understands it, and displays the web page it was able to create from it.
- The HTML code allows the developer (yes, you!) to describe the content of a web page with simple keywords which can be read by your browser.
- HTML is made of tags.
- There are opening and closing tags. The closing tags start with a slash.
- You can put tags in tags.
<html>,<body>, and<h1>are tags.
In the next part, we’ll put what we just learned into practice. We’re gonna make a web page with some actual content!
See you next time!
The next article is available here!
Note: This post is part of a series.
- Let’s make a website. (Episode I)
- Let’s make a website. Episode III — Your first page
- Let’s make a website. Episode IV — Images
- Let’s make a website. Episode V — The code editor
- Let’s make a website. Episode VI — CSS
- Let’s make a website. Episode VII — Let’s make a Pokédex!
- Let’s make a website. Episode VIII — Intermission
- Let’s make a website: the JavaScript adventures.
- Let’s make a website: the JavaScript adventures — The variables
As usual, feel free to share this article if you liked it!
*Ok, right, it’s terrible but I was uninspired for this subtitle. Also while we’re at it, Episode II is not that bad OH SH*T WHAT DID HE SAY?!?!!?!!??!??!?
