html basic (part 1)

Introduction

As seen in basic web understanding the HTML file is the backbone of a web-page.
The purpose of this post is to have a better understanding of those, and how you can write a simple one!

Like on the basic understanding, I will omit some stuff to keep it simple.
As more posts will be published, we will clarify those 🤓

Why HTML?

Every device (computer, mobile phone, TV…) has a web-browser. So it’s the most universal language you can learn!

With it you can make:

  • blog
  • sales sites
  • video games
  • books
  • and a lot more!

And it also can be read by people with disabilities!

What is an HTML file?

different steps of understanding it is an HTML file

Getting to know each other

It’s a text file.

So we can just write some text on it and it will do the thing!

But for the browser to understand it’s reading an HTML file we need two things:

  • the right file extension: .html
  • a small text at the top of the file to indicate the content is really HTML.
    This will be <!DOCTYPE html>

Hey! if it’s a text file, I can use Microsoft Word!

A Word file speaking an incomprehensible language to a browser

Guy, I can't understand you

In short: you can’t use Microsoft Word

If you’re interested about the reasons:

Microsoft Word (let’s call it Word for now on) produces docx files not HTML files.

And your browser can’t understand Docx files.
Even if, when looking at word document it looks like only text, it isn’t.

Word in its files stores a lots of other information! the text in itself but also the font styles you use (which font, the size, if it’s bold or not), the images you use, etc.

Let’s use a proper text editor

So we need another solution.
Luckily there is a lot of alternative, and some are already on your computer!

On mac: TextEdit

  • don’t forget to have the format > Make Plain Text option checked

On Windows: Notepad

  • don’t forget to set save as type to All Files (*.*)

A screenshot of the Notepad application

You need to specify ”save as type: All Files”

What are the better alternatives (and they are free):

Atom & Visual Studio Code

We're ok on every computers!

So you can download and use one of them 👍

Let’s begin!

A baby HTML file

น่ารัก

Make a new file named my-first-webpage.html and save it somewhere.
You can now type:

my-first-webpage.htmlview raw
1
2
3
4
5
<!DOCTYPE html>

The Boy Who Cried Wolf

He just cried wolf while playing with his toys.

And open it with your web browser! (or click on the view raw to have the final result)

Why is everything on the same line?

The browser rendering the previous example

Hey, just doing my job…

You wanted to have a formatted article, right?
It means for a better reading experience having some:

Where in Word you can click a button to this, in HTML you have to write it for the web browser to understand.

Because right now, you only wrote two lines of text, and for him it’s just some text: he merges multiple spaces and ignore carriage return 😇 (and believe me, he’s doing this for your own good)

Let’s tell the browser we want a headline and paragraph!

The browser rendering the example below

Ah OK! you want a heading & a paragraph!

We need to update our example like this:

my-improved-webpage.htmlview raw
1
2
3
4
5
<!DOCTYPE html>

<h1>The Boy Who Cried Wolf</h1>

<p>He just cried wolf while playing with his toys.</p>

After saving, reload your browser aaand… It’s done! 🥇
It’s still kind of ugly but we will address that on another post talking about CSS.

But what happened? HTML elements

We just told the browser which type of content we want 😊

The anatomy of an HTML element

Two detailed HTML elements

X-Ray vision of HTML elements

An HTML Element is a group having a semantic value (like heading, paragraph, list…)
It’s composed most of the time by:

  • a starting tag (<h1> & <p> in our example) always written by the tag’s name of the surrounded by angle brackets
  • the content (your different texts)
  • a closing tag (</h1> & </p> in our example) like the starting tag but:
    ⚠️ add an additional / after the first angle bracket!

you can see more on this wikipedia article

Starting and closing tags

That’s how you tell the browser where an HTML element begin and stop.
Without it, as clever as the browser is, he can’t guess what you have in your mind when writing your HTML page.

Writing properly an HTML element is the most important thing to understand about HTML!

h1 & p

As told previously, any HTML carry a semantic value, so:

  • h1 stands for heading of 1st level
  • p stands for paragraph

You can view an extensive list of HTML elements here

Wrapping up

Writing an HTML page is easy!
Now you know how to:

  • use a proper text editor to create and edit a HTML document
  • what is a HTML element

But we have more to see on the second part to make it a little bit more complex ⚙️