Le simulateur HTML

Avant d'aller plus loin, introduisons notre simulateur HTML qui vous permettra de tester du code HTML sans quitter votre navigateur favori.

Le simulateur HTML

Le simulateur HTML est une page web qui contient deux fenêtres. La fenêtre de gauche, de fond rouge pâle, est la fenêtre d'édition, où vous pouvez entrer votre code HTML. La fenêtre de droite est la fenêtre de visualisation : c'est là que vous verrez apparaître le résultat du code que vous aurez mis dans la fenêtre de gauche.

Les remarques suivantes sont de rigueur :

  1. Le simulateur étant déjà hébergé dans une page web, vous pouvez seulement entrer dans la fenêtre de gauche du code HTML qui, dans une page web complète, serait situé entre les balises <body> et </body>.
  1. La fenêtre d'édition se comporte comme un éditeur de texte : vous pouvez donc faire des saisies avec la souris, du copier-coller, etc.
  2. Il est important que vous vous habituiez à coder des pages web complètes, incluant la déclaration <!DOCTYPE html>, les balises <html> et </html>, <body> et </body> ainsi que le titre et les méta­don­nées éventuelles. Vous ne pouvez donc pas vous limiter à utiliser le simulateur HTML. Pratiquez-vous aussi à coder des pages web complètes en utilisant un éditeur de texte.

Cliquez le bouton Simulateur HTML pour lancer le simulateur HTML dans un nouvel onglet.

Exercice

<p>Ceci               est le
paragraphe         trois.</p><p>Ceci est
le                           paragraphe
quatre.</p>

Dans l'encadré de la page précédente, saisissez la partie du code située entre les balises <body> et </body> ; copiez-la et collez-la dans la fenêtre d'édition du simulateur HTML. Vous pouvez expérimenter et changer le code : que se passe-t-il, par exemple, si vous ajoutez le code de l'encadré de droite ?

Accueil