Première page web en HTML

Créer une page web avec l'éditeur

Tout d'abord il nous faut un éditeur de texte comme:

• Sublime Text,
• Notepad++,
• Brackets,
• jEdit,
• vim,
• TextWrangler,
• Kate (KDE),
• Gedit (Gnome),
• etc...

On ouvre son logiciel (l'exemple est Sublime Text):

On tape ce qui nous passe par la tête:

Haut

Ensuite on enregistre, voici 2 méthodes:

Soit:

1. Ouvrez le menu Fichier (ou File en anglais).
2. Cliquez sur Enregistrer (ou Save en anglais), une boîte de dialogue vous demande où enregistrer le fichier et sous quel nom.
3. Enregistrez-le où vous voulez (dans l'idéal, créez un nouveau dossier).
4. Donnez au fichier le nom que vous voulez, en terminant par .html, par exemple test.html

Soit:

1. Ouvrez la boîte de dialogue en appuyant sur ctrl + S.
2. Enregistrez-le où vous voulez (dans l'idéal, créez un nouveau dossier).
3. Donnez au fichier le nom que vous voulez, en terminant par .html, par exemple test.html

Quand on va dans l'explorateur de fichiers et qu'on double-clique sur le document qu'on vient de créer, il s'ouvre sur le navigateur par défaut qu'on a.

On s'apperçoit que tout le texte s'affiche sur la même ligne, ce qui est normal puisqu'on n'a pas encore mis de balises, que nous allons voir par la suite.

Haut

Les balises et leurs attributs

Il ne suffit pas d'écrire « simplement » du texte dans l'éditeur, il faut aussi donner des instructions à l'ordinateur. En HTML, on utilise pour cela des balises.

Attention!! Les balises ont des noms anglais, les exemples que nous allons voir par la suite sont purement fictifs.

Les balises

Elles sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.

Elles sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme ceci: <balise>.

Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc...

On distingue deux types de balises : les balises en paires et les balises orphelines.

Haut

Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :

                                1   <titre>Ceci est un titre</titre>
                            

On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est pas un titre.

                                1   Ceci n'est pas un titre
2       <titre>Ceci est un titre</titre>
3   Ceci n'est pas un titre
                            

Haut

Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ».

Une balise orpheline s'écrit comme ceci :

                                1   <image />
                            

Le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour ne pas les confondre avec le premier type de balise, les webmasters recommandent de rajouter ce / (slash) à la fin des balises orphelines.

Haut

Les attributs

Ils viennent compléter les balises pour donner des informations supplémentaires.

L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :

                            1   <balise attribut="valeur">
                        

À quoi cela sert-il ?

Prenons la balise <image/> que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher, l'ordinateur comprendra alors qu'il doit afficher l'image contenue dans le fichier photo.jpg :

                            1   <image nom="photo.jpg">
                        

Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante.

Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 :

                            1   <citation auteur="Neil Armstrong" date="21/07/1969">
2       C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité.
3   </citation>
                        

Haut

Structure de base d'une page HTML5

Pour commencer à coder, voici le code qu'il faut inscrire:

                         1   <!DOCTYPE html>
 2   <html>
 3      <head>
 4          <meta charset="utf-8" />
 5          <title>Titre</title>
 6      </head>
 7   
 8      <body>
 9   
10      </body>
11   </html>
                    

L'indentation consiste à mettre des espaces au début de certaines lignes pour « décaler » les balises; ce n'est pas obligatoire et cela n'a aucun impact sur l'affichage de la page, mais cela rend le code source plus lisible.

les balises s'ouvrent et se ferment dans un ordre précis.
Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture, par exemple :

• <html> <body> </body> </html>: correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.
• <html> <body> </html> </body>: incorrect, les balises s'entremêlent.

Le doctype

                            1   <!DOCTYPE html>
                        

La toute première ligne s'appelle le doctype.

Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.

Haut

La balise </html>

                            1   <html>
2   
3   </html>
                        

C'est la balise principale du code. Elle englobe tout le contenu de votre page.

Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code.

L'en-tête <head> et le corps <body>

Une page web est constituée de deux parties :

• L'en-tête <head>: cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc...
  Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur.
• Le corps <body>: c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.

Haut

L'encodage (charset)

                            1   <meta charset="utf-8" />
                        

Cette balise indique l'encodage utilisé dans votre fichier .html, qui indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).

La méthode d'encodage UTF-8 permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète.

Le titre principal de la page

                            1   <title>
                        

C'est le titre de la page, il ne s'affiche pas dans la page mais en haut de celle-ci (souvent dans l'onglet du navigateur).

Il est conseillé de garder le titre assez court (moins de 100 caractères en général).

Voici ce que ça donne quand on ouvre un navigateur:

Il faut savoir que le titre apparaît aussi dans les résultats de recherche, comme sur Google (figure suivante).

Par conséquent, bien choisir son titre est important !

Haut

Les commentaires

Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.

Cela va nous servir ainsi qu'aux personnes qui liront le code source de la page, pour laisser des indications sur le fonctionnement de la page (pour nous rappeler comment fonctionne la page si vous revenez sur le code source après un long moment d'absence).

Insérer un commentaire

Un commentaire est une balise HTML avec une forme bien spéciale :

                            1   <!-- Ceci est un commentaire -->
                        

Il peut être placé n'importe où dans le code source, il n'a aucun impact sur la page, mais il peut nous aider à nous repérer dans le code source (surtout s'il est long).

                             1   <!DOCTYPE html>
 2   <html>
 3      <head>
 4          <!-- En-tête de la page -->
 5          <meta charset="utf-8" />
 6          <title>Titre</title>
 7      </head>
 8   
 9      <body>
10          <!-- Corps de la page -->
11      </body>
12   </html>
                        

Haut

Tout le monde peut voir vos commentaires… et tout votre code HTML !

Pour voir le code HTML d'une page web, il suffit de faire un clic droit sur la page et de sélectionner « Afficher le code source de la page » (l'intitulé peut changer selon le navigateur).

Moralité: Tout le monde pourra voir votre code HTML et vous ne pouvez pas l'empêcher.
Par conséquent, ne mettez pas d'informations sensibles comme des mots de passe dans les commentaires… et soignez votre code source, on ne sait pas qui vient vérifier!

Haut