alainericgauthier.com

construire une présence sur le web

Apprendre HTML5 : la page de base

Web

Voici le code de départ que vous pouvez simplement copier et coller dans votre éditeur de texte pour démarrer la création de votre page web.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- contenu de la page -->
  </body>
</html>

Regardons ligne par ligne, ce que signifie chacune d'elles.

<!DOCTYPE html>

Il s'agit de la déclaration. Cette ligne dit au navigateur qu'il s'agit d'un document HTML5. Le navigateur prend cette information et saura comment traiter le reste du code qui se trouve dans le document.

<html lang="fr">
</html>

Il s'agit de l'élément html, l'élément placé au haut de la hiérarchie d'une page web. Cet élément est fait de deux balises : ouverture <html> et fermeture </html>. Tous les autres éléments de la plage seront placés entre ces deux balises.

  <head>
  </head>

Vient ensuite la tête du document, une portion qui est invisible quand on regarde une page web dans un navigateur. C'est dans cette section qu'on trouvera beaucoup d'instructions pour le navigateur.

    <meta charset="utf-8">

Cette élément meta indique au navigateur quel jeu de caractères utiliser pour afficher le texte qui se trouve dans le document.

    <title>Titre de la page</title>

Cet élément indique au navigateur le titre du document, celui-ci est toujours affiché au haut de la fenêtre ou de l'onglet du navigateur.

    <link rel="stylesheet" href="style.css">

L'élément link permet de lier des documents externes à une page web. Dans ce cas-ci, nous ajoutons un fichier CSS qui permet de modifier comment les éléments sont affichés dans la page web. Le CSS est un autre langage que nous verrons dans une autre série d'articles.

    <script src="script.js"></script>

La balise script permet d'importer des instructions plus complexes. Javascript est un langage de programmation qui permet à une page web d'être plus interactive. Cette interaction peut être très simple mais elle peut augmenter en complexité jusqu'à créer un app.

<body>
<!-- contenu de la page -->
</body>

Et finalement, l'élément body qui indique au navigateur que tout ce qu'il contient doit être affiché dans la page web.

Voilà qui fait le tour des éléments d'une page web de base.

Évidemment tout cela n'est que la base et il reste beaucoup à apprendre.

Dans le prochain article nous verrons les principaux éléments qui permettent de structurer le texte que vous mettez dans une page web.