• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Your first web page in HTML

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

So you've installed all the software? You should now have a text editor to create your website (such as Notepad++) and several browsers to test it (Mozilla Firefox, Google Chrome, Internet Explorer, etc.).

In this chapter, we are going to get started! We are going to discover the basics of HTML and save our very first web page!
Of course, you won't be expecting to produce an exceptional web page from the second chapter only, but wait and see... it will come!

Creating a web page with the editor

So, let's get going! As I just said, we're going to create our website in a text editor. You should have installed one as I advised in the first chapter: it doesn't matter whether it's called Notepad++, PSPad, jEdit, vim, TextWrangler... or whatever. These programs have a very simple purpose: to allow you to type text!

Later on in this course, I'm going to work with Notepad++. I'm thus going to open it (see next figure).

Opening Notepad++
Opening Notepad++

OK, so what do we do now? What are we going to write on this blank page?

Let's do a little test. Just type whatever comes into your head, like me in the next figure.

Text in Notepad++
Text in Notepad++

You can type the same sentences as me or anything you want; the aim is just to type something.

Let's now save this file. This is very simple to do: as in all programs, you have aFile>Savemenu. A dialog box asks you where to save the file and as what name. Save it wherever you want. Give the file any name you want, ending with.html, for exampletest.html, as shown in the next figure.

Save a file in Notepad++
Save a file in Notepad++

Now open the file explorer in the folder where you saved your page. You'll see the file you just created (next figure).

The file in Explorer
The file in Explorer

The icon representing the file depends on your default web browser. The icon shown here is the icon for Google Chrome, which is my default browser, but the file may have another icon on your computer. For example, here are the icons that appear when your primary browser is Firefox or Internet Explorer (see next figure).

Firefox file icon
Firefox file icon
Internet Explorer file icon
Internet Explorer file icon

Simply double-click on this file and... your browser opens and, as shown in the next figure, displays the text you wrote.

The web page displayed
The web page displayed

It doesn't work very well, it seems! All the text is displayed on the same line whereas we wrote two different lines of text!?

Indeed, well spotted!
The text is displayed on the same line whereas we asked it to be typed on two different lines. What's going on?

In fact, to create a web page it's not enough to just type the text as we've just done. In addition to this text, you need to also type what is known as tags, which will give instructions to the computer such as "go to next line", "display an image", etc.

Tags and their attributes

Well, all that was too easy. Obviously, those pesky computer specialists just had to interfere and complicate things. It's not enough "just" to type text in the editor, you also need to give instructions to the computer. To do this in HTML, you use tags.

Tags

HTML pages are filled with so-called tags. Although these tags cannot be seen on the screen by those visiting your site, they allow the computer to understand what it has to display.
Tags are easy to spot. They are surrounded by "angle brackets", in other words symbols<and>, like this:<tag>

What purpose do they serve? They indicate the type of text they surround. They mean, for example: "This is the page title", "This is a picture", "This is a text paragraph", etc.

There are two types of tags: tags in pairs and orphan tags.

Tags in pairs

They are opened, contain text, and are closed later. Here's what they look like:

<paragraph>This is a paragraph</paragraph>

You can see an opening tag (<paragraph>) and a closing tag (</paragraph>) which indicates the end of the paragraph. For the computer, this means that everything that is not between these two tags is not a paragraph.

This is not a paragraph <paragraph>This is a paragraph</paragraph> This is not a paragraph
Orphan tags

These are tags that are most often used to insert an element at a given point (for example, an image). There is no need to define the start and the end of the image. You just want to tell the computer to "Insert an image here".

An orphan tag is written like this:

<image />

Attributes

Attributes are a bit like tag options. They supplement them to provide additional information. The attribute is placed after the name of the opening tag and is most often a value, like this:

<tag attribute="value">

What purpose does it serve? Let's take the<image />tag we've just seen. By itself, it is not much use. We could add an attribute that indicates the name of the image to be displayed:

<image name="picture.jpg" />

The computer then understands that it has to display the image contained in the file photo.jpg.

In the case of a tag working as a "pair", the attributes are only placed in the opening tag and not in the closing tag. For example, this code indicates that the quotation was made by Neil Armstrong and dates from July 21, 1969:

<quote author="Neil Armstrong"  date="07/21/1969">
That's one small step for man, one giant leap for mankind.
</quote>

Basic structure of an HTML5 page

Let's go back to our text editor (in my case Notepad++). Just type or copy and paste the source code below into Notepad++. This code corresponds to the basis of a web page in HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>

<body>

</body>
</html>

The result when copied into Notepad++ is shown in the next figure.

Minimum HTML5 code in Notepad++
Minimum HTML5 code in Notepad++

You'll notice that the tags are opened and closed in a specific order. For example, the<html>tag is the first one that is opened and is also the last one that is closed (at the very end of the code, with</html>). The tags must be closed in the reverse order they are opened. For example:

  • <html><body></body></html>: correct. A tag which is opened inside another tag must also be closed inside it.

  • <html><body></html></body>: incorrect, the tags are intertwined.

Uh, could you explain all the tags that we've just copied into the editor, sir?

Of course, as you asked so nicely.
Don't take fright seeing all these tags at once, I'm going explain what they do!

doctype

<!DOCTYPE html>

The very first line is called the doctype. It is essential as it is it indicates that it is effectively an HTML web page.
It's not really a tag like the others (it starts with an exclamation mark), and can be considered to be an exception that proves the rule.

The</html>tag

<html>

</html>

This is the code's main tag. It includes the whole content of your page. As you can see, the</html>closing tag is located right at the end of the code!

The header<head>and the body<body>

A web page consists of two parts:

  • The header<head>: this section provides some general information on the page such as its title, the encoding (for managing special characters), etc. This section is usually fairly short. The information contained in the header is not displayed on the page and is simply general information intended for the computer. It is, however, very important!

  • The body<body>: this is where the main part of the page is located. Everything we type here will be displayed on the screen. Most of our code will be typed within the body.

For the time being, the body is empty (we'll come back to this later). But let's have a look at the two tags contained in the header...

The encoding (charset)
<meta charset="utf-8" />

This tag indicates the encoding used in your.htmlfile.

Without going into details as it could quickly become complicated, encoding specifies how the file is saved. It is what determines how special characters will be displayed (accents, Chinese and Japanese characters, Arabic characters, etc.).

There are several encoding techniques with weird names that are used depending on the language: ISO-8859-1, OEM 775, Windows-1253, etc. Wherever, however, only one should now be used: UTF-8. This encoding method allows virtually all the symbols in all the world's languages to be displayed with no problem! That is why I indicatedutf-8in this tag.

Your file must also effectively be saved in UTF-8. This is most often the default case in Linux, but the software generally has to be told this in Windows.

The main title of the page
<title>

This is the title of your page, which is probably the most important item! Every page must have a title that describes what it contains.
It is advisable to keep the title fairly short (less than 100 characters in general).

The title is not displayed in your page but at the top of it (usually in the browser tab). Save your web page and open it in your browser. You will see that the title is displayed in the tab, as shown in the next figure.

The page title appears at the top of the browser
The page title appears at the top of the browser

You should know that the title also appears in search results, such as with Google (next figure).

The page title appears in Google searches
The page title appears in Google searches

So choosing your title is important!

Comments

In this chapter, we learned how to create our first real HTML page. Before concluding, I'd like to say a word or two on comments.

A comment in HTML is a text that is simply a memo. It is not displayed, is not read by the computer and does not change the display of the page.

In short, it serves no purpose?

Well of course it does!
It is used by you and those who read your page's source code. You can use comments to leave indications on how your page works.

What is the point of this? It will help you remember how your page works if you return to your source code after not seeing it for some time. No kidding, this happens to all webmasters.

Inserting a comment

A comment is an HTML tag with a very special form:

<!-- This is a comment -->

You can put it wherever you want in your source code: it has no effect on your page, but you can use it to help you find your way round source code (especially if it's long).

<!DOCTYPE html>
<html>
<head>
<!-- Page header -->
<meta charset="utf-8" />
<title>Title</title>
</head>

<body>
<!-- Page body -->
</body>
</html>

Everyone can see your comments... and all your HTML code!

I'll conclude with an important remark: everyone can see the HTML code of your page once it has been placed on line on the Web. Simply right click on the page and select "View page source" (the exact text may vary according to your browser), as shown in the next figure.

View page source menu
View page source menu

The source code then appears (next figure).

Source code display
Source code display

You can test this on any website, it works! 100% guaranteed. This can be easily explained: the browser needs the HTML code to know what to display. The HTML code for all sites is thus public.

The moral of the story? Everyone can see your HTML code and you can do nothing about it. As a consequence, don't include sensitive information such as passwords in comments... and take over your source code, because I'll be able to come and check whether you've followed my course to the letter!

Summing up

  • A text editor (Notepad++, jEdit, vim, etc.) is used to create a file with the extension.html(e.g.test.html). This will be our web page.

  • This file can be opened in the web browser simply by double-clicking it.

  • Inside the file, we type the content of our page, together with HTML tags.

  • Tags can have several forms:

    • <tag> </tag>: they open and close to delimit the content (start and end of a title, for example).

    • <tag />: orphan tags (only one tag is inserted) are used to insert an item at a specific point (an image, for example).

  • Tags are sometimes accompanied by attributes to provide additional information (e.g.<image name="photo.jpg" />).

  • A web page consists of two main sections: a header (<head>) and a body (<body>).

  • The source code of any web page can be displayed by right-clicking and selectingView source code of web page.

Exemple de certificat de réussite
Exemple de certificat de réussite