Le simulateur HTML-CSS

Introduisons maitenant notre simulateur HTML-CSS qui vous permettra de tester simultanément du code HTML et du code CSS sans quitter votre navigateur.

Le simulateur HTML-CSS

Le simulateur HTML-CSS est une page web qui contient trois fenêtres. La fenêtre de gauche, de fond rouge pâle, est la fenêtre d'édition HTML, où vous pouvez entrer votre code HTML. La fenêtre du milieu, de fond vert pâle, est la fenêtre d'édition CSS, où vous pouvez entrer votre code CSS. Finalement, 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 les deux autres fenêtres.

Les remarques suivantes sont de rigueur :

  1. Comme pour le simulateur HTML, vous devez 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. L'identifiant de la fenêtre de visualisation est « targetHTML ». Pour appliquer une déclaration CSS à la fenêtre au complet, vous devez utiliser le sélecteur « #targetHTML » au lieu du sélecteur « body ».
  2. Les fenêtres d'édition se comportent comme des éditeurs de texte : vous pouvez donc faire des saisies avec la souri, du copier-coller, etc.
  3. Il est important que vous vous habituiez à coder des pages web complètes et à utiliser des feuilles de style externes. Vous ne devez donc pas vous limiter à utiliser le simulateur HTML-CSS. Pratiquez-vous à coder des pages web complètes avec métadonnées, etc. et des feuilles de style externes en utilisant un éditeur de texte.

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

Exercice

Dans l'encadrés rouge de la première page du chapitre, saisissez la partie du code HTML située entre les balises <body> et </body> ; copiez-la et collez-la dans la fenêtre d'édition HTML. Ensuite, saisissez le code CSS dans l'encadré vert et faites un copier-coller dans la fenêtre d'édition CSS. Vous devez faire les changements suivants :

1. Remplacez le sélecteur body par #targetHTML.

2. Le simulateur n'est pas dans le même sous répertoire

que le fichier test3.html. Il faut donc remplace l'URL relative url(blue_background.jpg); par url(../test/blue_background.jpg);.

3. Dans le deuxième bloc de déclarations, remplacez width: 800px; par width: 500px;.

Quand vous aurez fini, copiez le code HTML située entre les balises <body> et </body> dans l'encadré rouge de la page précédente et collez le sous le code qui est déjà dans la fenêtre d'édition HTML.

Accueil