Créer une page HTML 5 simple - Tutoriel pour Webmasters  

Accueil > Tutoriels pour Webmasters > Créer une page HTML 5 simple

Créer une page HTML 5 simple

Ce petit cours pour débutant explique comment créer une page web (en XHTML), même si vous n'y connaissez rien en informatique et programmation. A la fin de ce tutoriel, vous aurez créé une première petite page web et obtenu des connaissances de bases en XHTML.

Prérequis

Il est nécessaire d'avoir envie d'apprendre quelques bases sur le langage XHTML et de posséder un éditeur de texte basique. Si vous n'en avez pas, je vous suggère de télécharger Notepad++, qui est un éditeur texte très pratique pour la programmation.

Créer un fichier HTML

La première chose à faire consiste à ouvrir une nouvelle page ("fichier" -> "nouveau"). Puis il faut enregistrer cette page vierge au format XHTML. Pour cela il faut cliquer sur "fichier" -> "enregistrer sous", choisir l'endroit où la page web doit être enregistrée et indiquer un nom tel que "page.html". Pour information, il y a deux extensions possibles ".html" ou ".htm". Pour finir, il faut cliquer sur "Enregistrer" pour sauver la toute fraîche page nouvellement créée.

Code d'une page HTML simple

La page web est donc créé, mais elle est vierge. Pour créé une page web simple il faut copier et coller le code HTML suivant:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Titre de la page</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. </head>
  7. <body>
  8. <p>Contenu de la page.</p>
  9. </body>
  10. </html>

Une fois ce code créé, il faut enregistrer en sélectionnant "fichier" -> "enregistrer". Voilà, la page est créée.

Ouvrir la page web

Maintenant que la page est créé, il doit y avoir un fichier de ce type à l'endroit où vous avez enregistré la page:

Pour ouvrir la page avec un navigateur web (exemple: Internet Explorer, Firefox ...) il faut double-cliquer sur le fichier. Si vous utilisez Firefox vous devriez voir une page de ce type:

Vous pouvez dors et déjà remarquer que le titre "Titre de la page" est visible en haut du navigateur et que le contenu "Contenu de la page" est visible sur la page.

Comprendre le code

Vous avez déjà sûrement compris où vous devez agir pour modifier le titre et le contenu. Voici des explications plus détaillées:

  • La première ligne stipule le doctype. Ça donne des informations sur le code qui le succède, pour que les navigateurs web sachent comment afficher la page
  • La page web est comprise entre <html> et </html>
  • Le code entre <head> et </head> est interprété par le navigateur et stipule des directives pour la page web
  • Le texte entre <title> et </title> est tout simplement le titre principal d'une page web
  • Le texte qui commence par <meta ...> définie le codage des caractères
  • Le code entre <body> et </body> c'est le texte qui sera visible sur la page
  • La balise <p> définit un paragraphe. Le texte présent entre <p> et </p> est le texte d'un paragraphe

Aller plus loin

Pour aller plus loin, il est possible d'essayer d'autre balises HTML, telle que :

  • <strong> pour désigner un texte important. Les navigateurs mettent ce texte en gras.
  • <em> pour désigner une emphase (mise en avant). Les navigateurs affichent souvent cette balise en italique