How to create a HTML file?

easy tutorial to create an html file


Hey, welcome to this new tutorial!!

dr duck to teach how to create html file!


Before starting, if you have any question, don’t hesitate to post a comment!
I will help you with pleasure, there are no silly questions!

Finally a tutorial to learn code!
Yeeeaaahhh!!

If you follow the line of “How to create a website from scratch?” tutorial, you should already have installed Wampserver with a new project, otherwise read my previous tutorial

So please open this folder… and turn on Wampserver!

In this folder, do a right click and create a new text file

create a new HTML file


Name it with the name you want and replace .txt with .html.
Confirm if you need to confirm that you want to change this extension.

Congratulation!
You just created your first HTML file… ok empty, but it is a first step!

html web page code


Now open it in your favorite text editor

Any text editor can do the job, I use Notepad++, it is free, powerful and very easy to use!

Write some rows:

Save your file and double click to open it with your favorite browser….
And should get this result!

first html code


“AAAAAAaaaaaaaahhhh but it does not look like what I did!”

free html code


It 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.

You won’t never get an error message when you write an incorrect code! (Except with some tools…)
The page still displays even whether there are errors!

On another side, even if someone do an error, the website will still be available, but you could have some display surprises!

You will see, it is very good fun very soon!
Mouhahahahah!

coding html file new


The basic structure of a HTML file is like this….

Let me to give you some explanation and 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 is matter.

The format for a tag is…

{tagName} can NOT take any word in HTML.
They have to be known from your browser and a standard exist, it is called W3c… we don’t care at the moment.

To be accurate, this tag is an opening tag

opening html tag


NOW, in the HTML code above, at the last line, you can see this tag:
And this tag is the closing tag.


closing html tag


And in this HTML tag, you can add other tags.
It is the structure of the HTML language.

We can add tags in tags endlessly theoretically!

Keep reading…

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
Complicated explanation for very easy knowledge!

html code tag


In other words, DO NOT NEVER CROSS TAGS!
You can imagine cubes inside other cubes.

structure html tags


Now you understood how the HTML structure works, we need to learn what is an HTML element.
It is 2 tags (opening and closing) with all the content between these 2 tags.

structure html element


In my example, you can see there is the <i> element in the <p> element.
All good!

Ok, and for the meta tag?

Your browser knows all HTML tags we are using, and it knows that for this one, you can not add anything in this tag, 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 with its value.
Most of time, attribute has a value, it exist a very few exceptions to this rule!

All tags can get an attribute, however you can not add any attribute on any element.
The attribute you can add depend on the tag.

Don’t worry, the attributes get repeated a lot!

So the format is in general
And the exceptions are


A last thing about the HTML code above…
This line:

As you guess it is a 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,
a function hard to understand.
It is very handy, I write comments all the time in my code!

HTML comments has this format:

This said, be careful with comments because your browser won’t display them, but they will be still there in the source code… I will you show you later.

NOW, let’s come back to the first line.

That just means which HTML version we are using.
Which HTML your browser has to use.

It does matter to precise because there are some differences between elements size, height, margin, width, space in the different HTML versions.

Of course, if you add a DOCTYPE form 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!

And now it is NOT necessary to add when it is HTLM 5.1 or more, it is interoperable.
That means HTML 5 will be compatible with all new higher version, like a standard.

html 5


Let’s come back to our basic structure

All HTML document should have this structure with exactly these tags!

We need the <html> root element… to rule them all and in the darkness bind them!
html for all


You will see in the future tutorials why we need a root element… with the DOM… you will see, it is very exciting!!

<head> tag is the place where you will add metadata tags, data about the website itself.
That could be simple information, or script to load to use in the <body>.

For example,
Description, title of the web page, encoding type, author.

All these information you won’t be displayed on the website but if you want search engine to know them, you will use meta tags.
Some programs scan all web pages of the internet to get statistics, for a search engine, etc… the metadata are very useful for these programs.


Title is here but nothing in the body of the web page.

html title tag


Well, now, you and me! <body>!
It is the place where all the display tags have to be!

Only this tag should display the content.

I said “should” because it will work if you add a tag <p> anywhere (like above the <html> tag)… no error will be displayed, your browser will make it!
But it is not correct, your browser will try to display your web page, but it probably deactivate some tags and it will add others, because it need it.

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 what you just learnt!
Add some rows in <body> tag and instead of adding a line break with enter add <br>

Exactly like below

Save your document, and open it!

Open your localhost
Click on your project!

how to open an html file


You should arrive on this page and now click on the link!

code html ready

AND BOOOOOOOOOOOOOOM!!
You just created your first web page!!



To check the source code it is very simple:
Right click on your page, click on Page Source!

html code source


And now you can see everything!
The metadata, your HTML code and even your comments
It is the code your browser got.
And 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… The prehistoric website!

first html version


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

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.