[Previous Tutorial]
How to create and read HTML file?
Buenos dias my Dev! 
As usual, if you have any question, don’t hesitate to post a comment!
Silly questions don’t exist!
“AAAAAAaaaaaaaahhhh but it does not look like what I did!”
That is how you should have reacted!
Indeed, HTML code need a structure, rules!
All languages need rules, but this language is a bit particular because this language is a very permissive language.
That means never get an error message when you write an incorrect code! (You need special tools to see HTML errors…)
The page still displays even if there are errors!
On the other hand, if you make any mistake in your code, the website will still be available, but you could have some display surprises!
You will see, we will have some awfully good fun very soon!
Mwahahahahah!
Let’s take an example of a HTML file:
Let me explain:
At the moment, forget the first line, we will come back later.
Let’s look all tags, we can see they have all the same format.
The first element you have met, for example:
This tag is called HTML tag… not very difficult, but vocabulary does matter.
The format for a tag is:
{tagName} CANNOT be any word in HTML.
They have to be known by your browser. A standard exist, it is called W3C; however, we don’t care at the moment. We will learn them later on.
To be accurate, this tag is an opening tag…
This mean the HTML element is open.
NOW, in the HTML code above, at the last line, you can see this tag:
And this tag is the closing tag.
With this format, it’s not very difficult:
This means the HTML element is closed.
Want to know something cool? You can add other HTML elements between an opening tag and closing tag in HTML.
It is cool, isn’t it?
What is an HTML element?
An HTML element is all the content from a opening tag to the closing tag, with the other tags inside.
The elements inside are called the child elements, and the big one the parent element. Yep, that means HTML element can be nested. It’s easier to understand in an example:
The child of the <p> element is <i> element.
And the parent of <i> element is <p> element.
So elements can have several children, but an element has only one parent!
This is the structure of the HTML language, how it works!
We can add elements in elements endlessly, theoretically.
Let’s see siblings elements:
Those tags are on the same level.
Something very important to understand, the closing tags come exactly at the opposite order as the opening tags…
Which is a complicated explanation for very easy knowledge!
In other words, DO NOT NEVER CROSS TAGS!
You can imagine boxes inside other boxes.
Ok, and for the meta tag?
It does not need to be closed!
And nop, NOTHING IS MAGIC in computer science!
Your browser knows all HTML tags we are using, and it knows you can not add anything in this element, so it close it automatically.
Yep… unfortunately there is no way to know which one we have to close or not, but you will see, it is VERY LOGICAL when you know its usefulness.
As you noticed, in this tag you can see:
This is an attribute (charset) with its value (utf-8).
It is very useful to give some information about the element.
All elements can get attributes; however you cannot add any attribute on any element.
The attribute you can add depend on the tag.
It is not the only way to write attributes, but this one is the easiest way!
Most of time, attributes have a value… (like above).
But there are an exception to this rule called boolean attribute. It is just true or false.
For instance:
You can look over the checked attributes. It is there just to know if this input is checked or not.
All these lines work and they mean exactly the same thing. The value of “checked” is “true”.
Don’t worry, the attributes get repeated a lot!
A last thing about the HTML code above…
This line:
It is an HTML comment.
A comment is a text in a code which won’t be executed.
You can use comment to write a bit what you want.
Remind you why you wrote this code, a function you want to keep but without executing it or a function hard to understand with some explanation… any information in short…
It is very handy, I write comments all the time in my code!
This said, be careful with comments because your browser won’t display them, but they will still be there in the source code… so everybody will be able to read them by reading the source code!
I will show you later.
NOW, let’s come back to the first line.
That just means which HTML version we are using, it is the DOCTYPE of the web page.
Which HTML your browser has to use to display elements.
This DOCTYPE means this web page is written in HTML version 5 and higher.
Before the version 5, you had a different DOCTYPE for each version of HTML.
For example, this doctype represent the version 4.1:
Yep, it is a bit more complicated! Forget it, we don’t need it anymore.
It does matter to be precise the HTML version because there are some differences between elements size, height, margin, width, space in the different HTML versions.
Of course, if you add a DOCTYPE for HTML 4 and you add a HTML 5 tag, your browser should recognize it and use it properly, but your document could get few differences with the correct HTML version.
Anyway, in this tutorial I will teach HTML 5!!
The last version!
Ok, you know what is a DOCTYPE, a tag, an element, a comment.. let’s move on to write our first HTML page! Let’s see a basic structure:
All HTML page should have this structure with exactly these tags!
One <html> root element… to rule them all and in the darkness bind them!
Sorry…
It is just THE first element of all HTML page.
You will see in the future tutorials why we need a root element… with the DOM.. you don’t understand but you will see, it is very exciting!!
<head> tag is the place where you will add metadata. Metadata means data about data.
What does that mean? Data about data? What?
They are data about the website itself.
That could be scripts to load and to use in <body> or simple information like description, title of the web page, encoding type of the text, author of the page…
All these information won’t be displayed on the website but they are useful for your browser or for some company which scan internet and which would like more information about the website.
Some software scan all web pages of the internet (spider or web crawler) to get statistics, for a search engine, to copy web pages, etc… the metadata are also very useful for them.
For instance:
Title is here but nothing in the body of the web page.
Next element!
Well, now, you and me! <body>!
It is the place where all the display tags have to be!
Only this tag have to display the content.
Let’s practice a bit!
You have your HTML file (my-first-page.html for me) open in your favorite text editor.
Replace this text with this code:
Save your document, and open it!
Here we go!
You first HTML page displayed!
Congratulation, <body>! ahahah!
Some explanation about the code above:
<h1>:
Tag <h1> is the tag to display headings (or commonly title), it can go from <h1> to <h6>.
<p>:
It is the tag paragraph, usually it is the place where you add… a paragraph.
<br>:
Just a line break.
You just need to practice to know what are their properties. (like the font size – but everything is configurable
)
Quick tip:
You want to be sure that the code your browser get?
Don’t panic, and let me lead!
Right click on your page, click on Page Source!
It is as simple as that, and you can see everything!
The metadata, your HTML code and even your comments…
It is the code your browser got.
This code is only in your browser, on client side, it is not the code of the server!
You can modify this code with some tools… but you will modify it only on the client, not on the server! As soon as you will reload you web page, yours change will be gone.
If you need have a look what a client is and what a server is:). (Very soon on the website)
A last thing before I leave, just for the curiosity, if you want see the first website of the world, you could even read the source code of the first HTML version… A prehistoric website.
It is made by the father of HTML, Tim Berners-Lee!
In the next tutorial we will see how to create something….
I hope your enjoy the tutorial,
I have to fall in love.
Kiss, love!
As usual, if you have any question, don’t hesitate to post a comment!
Silly questions don’t exist!
Ok, now you have written something in your HTML file and you read it with Wampserver, from the previous tutorial.
But you got this!
But you got this!
“AAAAAAaaaaaaaahhhh but it does not look like what I did!”
That is how you should have reacted!
Indeed, HTML code need a structure, rules!
All languages need rules, but this language is a bit particular because this language is a very permissive language.
That means never get an error message when you write an incorrect code! (You need special tools to see HTML errors…)
The page still displays even if there are errors!
On the other hand, if you make any mistake in your code, the website will still be available, but you could have some display surprises!
You will see, we will have some awfully good fun very soon!
Mwahahahahah!
Let’s take an example of a HTML file:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>Title of the website</title> </head> <body> <!-- A comment to my text --> <h1>My super cool tutorial title</h1> <p>My super text</p> </body> </html> |
Let me explain:
At the moment, forget the first line, we will come back later.
Let’s look all tags, we can see they have all the same format.
The first element you have met, for example:
|
1 |
<html> |
This tag is called HTML tag… not very difficult, but vocabulary does matter.
The format for a tag is:
|
1 |
<{tagName}> |
{tagName} CANNOT be any word in HTML.
They have to be known by your browser. A standard exist, it is called W3C; however, we don’t care at the moment. We will learn them later on.
To be accurate, this tag is an opening tag…
This mean the HTML element is open.
NOW, in the HTML code above, at the last line, you can see this tag:
|
1 |
</html> |
And this tag is the closing tag.
With this format, it’s not very difficult:
|
1 |
</{name}> |
This means the HTML element is closed.
Want to know something cool? You can add other HTML elements between an opening tag and closing tag in HTML.
It is cool, isn’t it?
What is an HTML element?
An HTML element is all the content from a opening tag to the closing tag, with the other tags inside.
The elements inside are called the child elements, and the big one the parent element. Yep, that means HTML element can be nested. It’s easier to understand in an example:
The child of the <p> element is <i> element.
And the parent of <i> element is <p> element.
So elements can have several children, but an element has only one parent!
This is the structure of the HTML language, how it works!
We can add elements in elements endlessly, theoretically.
Let’s see siblings elements:
|
1 2 3 4 5 6 |
<head> ... </head> <body> ... </body> |
Those tags are on the same level.
Something very important to understand, the closing tags come exactly at the opposite order as the opening tags…
Which is a complicated explanation for very easy knowledge!
In other words, DO NOT NEVER CROSS TAGS!
You can imagine boxes inside other boxes.
Ok, and for the meta tag?
|
1 |
<meta charset="utf-8"> |
It does not need to be closed!
And nop, NOTHING IS MAGIC in computer science!
Your browser knows all HTML tags we are using, and it knows you can not add anything in this element, so it close it automatically.
Yep… unfortunately there is no way to know which one we have to close or not, but you will see, it is VERY LOGICAL when you know its usefulness.
As you noticed, in this tag you can see:
|
1 |
charset="utf-8" |
This is an attribute (charset) with its value (utf-8).
It is very useful to give some information about the element.
All elements can get attributes; however you cannot add any attribute on any element.
The attribute you can add depend on the tag.
|
1 2 3 |
<tagName attribute="value of the attribute"> My super text! </taName> |
It is not the only way to write attributes, but this one is the easiest way!
Most of time, attributes have a value… (like above).
But there are an exception to this rule called boolean attribute. It is just true or false.
For instance:
|
1 2 3 |
<label><input type='checkbox' checked> Cheese</label> <label><input type='checkbox' checked=''> Cheese</label> <label><input type='checkbox' checked=checked>Cheese</label> |
You can look over the checked attributes. It is there just to know if this input is checked or not.
All these lines work and they mean exactly the same thing. The value of “checked” is “true”.
Don’t worry, the attributes get repeated a lot!
A last thing about the HTML code above…
This line:
|
1 |
<!-- A comment to my text --> |
It is an HTML comment.
A comment is a text in a code which won’t be executed.
You can use comment to write a bit what you want.
Remind you why you wrote this code, a function you want to keep but without executing it or a function hard to understand with some explanation… any information in short…
It is very handy, I write comments all the time in my code!
This said, be careful with comments because your browser won’t display them, but they will still be there in the source code… so everybody will be able to read them by reading the source code!
I will show you later.
NOW, let’s come back to the first line.
|
1 |
<!DOCTYPE html> |
That just means which HTML version we are using, it is the DOCTYPE of the web page.
Which HTML your browser has to use to display elements.
This DOCTYPE means this web page is written in HTML version 5 and higher.
Before the version 5, you had a different DOCTYPE for each version of HTML.
For example, this doctype represent the version 4.1:
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
Yep, it is a bit more complicated! Forget it, we don’t need it anymore.
It does matter to be precise the HTML version because there are some differences between elements size, height, margin, width, space in the different HTML versions.
Of course, if you add a DOCTYPE for HTML 4 and you add a HTML 5 tag, your browser should recognize it and use it properly, but your document could get few differences with the correct HTML version.
Anyway, in this tutorial I will teach HTML 5!!
The last version!
Ok, you know what is a DOCTYPE, a tag, an element, a comment.. let’s move on to write our first HTML page! Let’s see a basic structure:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> </head> <body> </body> </html> |
All HTML page should have this structure with exactly these tags!
One <html> root element… to rule them all and in the darkness bind them!
Sorry…
It is just THE first element of all HTML page.
You will see in the future tutorials why we need a root element… with the DOM.. you don’t understand but you will see, it is very exciting!!
<head> tag is the place where you will add metadata. Metadata means data about data.
What does that mean? Data about data? What?
They are data about the website itself.
That could be scripts to load and to use in <body> or simple information like description, title of the web page, encoding type of the text, author of the page…
All these information won’t be displayed on the website but they are useful for your browser or for some company which scan internet and which would like more information about the website.
Some software scan all web pages of the internet (spider or web crawler) to get statistics, for a search engine, to copy web pages, etc… the metadata are also very useful for them.
For instance:
|
1 2 3 4 |
<meta name="description" content="Free Web tutorials"> <meta name="author" content="John Doe"> <meta charset="utf-8" > <title>My super Game</title> |
Title is here but nothing in the body of the web page.
Next element!
Well, now, you and me! <body>!
It is the place where all the display tags have to be!
Only this tag have to display the content.
Let’s practice a bit!
You have your HTML file (my-first-page.html for me) open in your favorite text editor.
Replace this text with this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>My Super Game Title! Yo!</title> </head> <body> <!-- From now... There's going to be trouble! --> <h1>I am a big text!!</h1> <p> I love www.development-tutorial.com <br> as much as I love strawberries or <br> chocolate or something else I love! <br><br> And another row underneath! </p> </body> </html> |
Save your document, and open it!
Here we go!
You first HTML page displayed!
Congratulation, <body>! ahahah!
Some explanation about the code above:
<h1>:
Tag <h1> is the tag to display headings (or commonly title), it can go from <h1> to <h6>.
<p>:
It is the tag paragraph, usually it is the place where you add… a paragraph.
<br>:
Just a line break.
You just need to practice to know what are their properties. (like the font size – but everything is configurable
)Quick tip:
You want to be sure that the code your browser get?
Don’t panic, and let me lead!
Right click on your page, click on Page Source!
It is as simple as that, and you can see everything!
The metadata, your HTML code and even your comments…
It is the code your browser got.
This code is only in your browser, on client side, it is not the code of the server!You can modify this code with some tools… but you will modify it only on the client, not on the server! As soon as you will reload you web page, yours change will be gone.
If you need have a look what a client is and what a server is:). (Very soon on the website)
A last thing before I leave, just for the curiosity, if you want see the first website of the world, you could even read the source code of the first HTML version… A prehistoric website.
It is made by the father of HTML, Tim Berners-Lee!
In the next tutorial we will see how to create something….
I hope your enjoy the tutorial,
I have to fall in love.
Kiss, love!
Leave a Reply