[Previous Tutorial]
How to create a HTML file?
Hello my friends,
If you follow our line of tutorial to build a website from scratch,
you should already have your first HTML file.
And now we would like to make a whole web page in HTML.What does a web page look like?
I hope you understand something on this schema… It is just a web page structure.
We will see in this tutorial all the HTML elements of this schema.
To start, the color ones are called HTML sections, it like containers.
As you know HTML elements nests each other!
BUT HTML elements can not be nested in any other HTML elements.
There are rules.
So to get a good structure we need to know these rules.
How you can know? Who made this rules?
Good question, I like it!!
The Father of HTML, Sir Tim Berners-Lee, created W3C.
What’s that?
It is an PUBLIC international community which develop Web standards.
THE only web standard in the world!
https://www.w3.org/
This W3C community made the rules, the tags, they create HTML version than browsers have to integrate in their engine, and we have to respect in our code.
Everybody is happy!
And if you want to know if your HTML code is correct you can validate it…
https://validator.w3.org/
Very useful!
I won’t ask you to learn all rules by hearth, they are very logical and you will learn them little by little.
I will add in the HTML element list, on another page, children and parents of the HTML element we already used.
Now, let’s play to the architect!
Let’s start with the different sections
|
1 |
<header></header> |
|
1 |
<footer></footer> |
In our website:
|
1 2 3 4 5 6 7 8 9 10 |
<body> <header> The super header of our Battleships game website </header> ... <footer> Site plan What to do if we have an issue with the website </footer> </body> |
|
1 |
<article></article> |
This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.
We could apply this HTML element in our website like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <header> The super header of our Crazy Battleships game website </header> <article> In our website, in the home page we will add the presentation of our Battleships game! </article> <footer> Site plan What to do if we have an issue with the website </footer> </body> |
|
1 |
<section></section> |
Different section should have the same thematic for a content.
On our website:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <header> The super header of our Crazy Battleships game website </header> <article> <!-- Article talking about the presentation of our game --> <section> We will add the story here </section> <section> And in this section, we will describe objectives </section> </article> <footer> Site plan What to do if we have an issue with the website </footer> </body> |
|
1 |
<nav></nav> |
But not necessary to append <nav> on each link, for example no need to add a <nav> element in footer.
You got the idea:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <header> The super header of our Crazy Battleships game website </header> <nav> We will our menu, I will create a tutorial to do that. :) </nav> <article> <!-- Article talking about the presentation of our game --> <section> In this section we will add the story </section> <section> And in this section, we will describe objectives </section> </article> <footer> Site plan What to do if we have an issue with the website </footer> </body> |
|
1 |
<aside></aside> |
Yep… like a normal sidebar!
Let’s see an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body> <header> The super header of our Crazy Battleships game website </header> <nav> We will our menu, I will create a tutorial to do that. :) </nav> <article> <!-- Article talking about the presentation of our game --> <section> In this section we will add the story </section> <section> And in this section, we will describe objectives </section> </article> <aside> We will add the best score in this part and the very good critics of our super game! </aside> <footer> Site plan What to do if we have an issue with the website </footer> </body> |
Now we have to talk about a legend in HTML world…
A container completely generic…
The most used of them…
It is not in the overview because it could be anywhere…
|
1 |
<div></div> |
Can you add an epic music plz?
<div> tag has no meaning, it is completely neutral.
Exactly, you could create a website with only <div> element in body, it would work!!
But W3C suggest us to use all others sections for many reasons.
One of them is because machines will be able to read it easily, and search engine like Google will be able to understand more easily website.
Ok, now few tags to manipulate text
|
1 2 3 4 |
<h1>Title</h1> <h2>Sub-title</h2> ... <h6></h6> |
<h1> is the highest level of heading whereas <h6> the lowest.
|
1 |
<p>A paragraph... the text of our story for example.</p> |
|
1 |
<br> |
Let’s build our website:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<body> <header> <h1>Battleships</h1> <h2>The legend between 2 great Captain...</h2> </header> <nav> We will our menu, I will create a tutorial to do that. :) </nav> <article> <!-- Article talking about the presentation of our game --> <section> EXERCISE 1 (keep reading!) </section> <section> And in this section, we will describe objectives </section> </article> <aside> We will add the best score in this part and<br> the very good critics of our super game! </aside> <footer> Site plan<br> What to do if we have an issue with the website </footer> </body> |
Quick Exercise:
– In the code below I would like you to add an article in the marked Section.
With a new <header> with a title <h1> and a <div> for the text of the story.
Don’t make up a title or a story… add just random text instead.
– Then test your file in the W3C validator to get a CORRECT HTML page
– Add a header in a footer
– Test your file in the W3C validator to get an ERROR.
– In the code below I would like you to add an article in the marked Section.
With a new <header> with a title <h1> and a <div> for the text of the story.
Don’t make up a title or a story… add just random text instead.
– Then test your file in the W3C validator to get a CORRECT HTML page
– Add a header in a footer
– Test your file in the W3C validator to get an ERROR.
Yeah… It missing one…
You are a tiger!
And now we would like to add an image because it is cool, but our website is ugly!
We need to know how to get an image on a server.
We will see this in the next tutorial!!
Thanks for reading,
See you very soon!
I have to fly in space,
Kiss!
