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?
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!
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 Textoption checked
On Windows: Notepad
- don’t forget to set
save as typetoAll Files (*.*)
What are the better alternatives (and they are free):
- Visual Studio Code
- Atom
- and a lot more…
So you can download and use one of them 👍
Let’s begin!
Make a new file named my-first-webpage.html and save it somewhere.
You can now type:
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?
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!
We need to update our example like this:
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
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:
h1stands for heading of 1st levelpstands 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 ⚙️
Originally published at hiswe.github.io.
