Médiaforma

All posts tagged squelette

Voici le squelette standard d’un document HTML5 dans lequel on utilise du code jQuery. C’est à partir de ce squelette que tous les exemples de cette formation seront construits. Ce squelette est à utiliser en phase de développement :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="jquery.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

Quelques remarques :

  • La balise <link> fait référence au fichier feuille-de-styles.css qui sera utilisé pour définir le style du document.
  • La première balise <script> fait référence à la bibliothèque jQuery.
  • La deuxième balise <script> fait référence au fichier mon-script.js. C’est dans ce fichier que vous placerez tout le code jQuery à utiliser. Vous pouvez également l’inclure directement dans le squelette HTML, entre les balises <script> et </script>.

Une fois le code entièrement débogué, vous utiliserez un squelette un peu différent, dans lequel, la référence à la bibliothèque jQuery se fait via un CDN et non localement :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

Voici la structure minimale d’une page HTML 5 :

<!DOCTYPE html>
<html>
     <head>
     </head>
     <body>
     </body>
</html>

La balise <!DOCTYPE> doit toujours apparaître en premier. Elle indique au navigateur les règles d’écriture utilisées dans le code. Cette première ligne indique que la version 5 du langage HTML sera utilisée. Dans les versions précédentes, la balise <!DOCTYPE> était bien plus complexe. Mais cela fait partie du passé, et vous utiliserez uniquement cette version simplifiée.

La balise <html> matérialise le début du document HTML, et la balise </html> la fin de ce document.

Les balises <head> et </head> délimitent l’en-tête du document. Vous verrez ce qui peut être placé entre ces deux balises dans une autre rubrique.

Enfin, les balises <body> et </body> délimitent le corps du document. Tout ce qui est écrit entre ces deux balises apparaîtra dans le navigateur Web.

Lancez la commande Enregistrer dans le menu Fichier, sélectionnez Hyper Text Markup Language dans la liste Type, donnez le nom squelette à la page, choisissez le dossier de stockage du document et cliquez sur Enregistrer.

Déroulez le menu Exécution et lancez la commande :

  • Launch in IE pour ouvrir ce document dans Internet Explorer ;
  • Launch in Chrome pour ouvrir ce document dans Google Chrome ;
  • Launch in Firefox pour ouvrir ce document dans Mozilla Firefox ;
  • Launch in Safari pour ouvrir ce document dans Safari.

Bien entendu, ces commandes supposent que les navigateurs correspondants sont installés sur votre ordinateur. Dans le cas contraire, elles n’auront aucun effet.

Comme vous pouvez le voir, rien ne s’affiche.

Entrez du texte entre les balises <body> et </body>. Ici par exemple, nous entrons le texte “Bonjour“. Sauvegardez le document avec la commande Enregistrer dans le menu Fichier ou avec le raccourci clavier Ctrl+S.

Remarque

Si vous n’avez pas l’habitude des raccourcis clavier, sachez le raccourci Ctrl+S est obtenu en maintenant enfoncée la touche Ctrl, en appuyant puis en relâchant la touche S, puis en relâchant la touche Ctrl. Cela a l’air compliqué, mais une fois que le mécanisme est compris, il est difficile de s’en passer !

Lancez à nouveau la commande Launch in IE dans le menu Exécuter. Cette fois-ci, le texte “Bonjour” est affiché dans le navigateur.

Bravo, vous venez de créer votre premier document HTML5 !


Première étape : Création du squelette HTML5

Le jeu repose sur un squelette HTML5 standard.

La première ligne représente la DTD ou déclaration de type de document. Elle indique aux navigateurs les règles d’écriture utilisées dans le langage. Ici, cet en-tête correspond au langage HTML5.

Le document HTML est délimité par les balises <html> et </html>.

L’en-tête est délimité par les balises <head> et </head>. Il va nous permettre de définir :

  1. L’encodage des caractères dans le document avec la balise <meta charset>. L’encodage retenu est le plus utilisé sur le Web : UTF-8. Il permet de faire cohabiter dans un même document des caractères issus de plusieurs langues : le français et le japonais par exemple.
  2. Le titre du document avec la balise <title>. Ce titre apparaîtra dans la barre de titre ou dans l’onglet du navigateur.
  3. Les styles CSS utilisés dans le jeu entre les balises <style> et </style>.

Le corps du document se trouve entre les balises <body> et </body>. C’est à cet endroit que seront insérées les instructions responsables de l’affichage dans le navigateur.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Jeu de Memory</title>
    <style>
    </style>
  </head>
  <body>
  </body>
</html>