Visualisateur html/css Visualisateur html/css© Normand Lamoureux, 2008
Le Visualisateur html/css est un utilitaire conçu pour composer une page html en tapant du code dans une fenêtre de *navigateur. La fenêtre comporte une zone pour recevoir le code html et une autre pour le code css. Une troisième zone illustre le résultat en temps réel.
* Fonctionne avec Firefox, Safari et, en général, les navigateurs conformes aux standards ouverts du Web.
Décompressez le fichier Visualisateur.zip et ouvrez le fichier index.html dans votre navigateur. Tapez le code html dans la portion supérieure gauche de l'écran, et le code css dans la portion supérieure droite. La page qui résulte de la combinaisons des deux codes s'affiche en temps réel dans la portion inférieure de l'écran.
Double-cliquez dans une portion de l'écran pour l'agrandir ou la remettre à sa taille d'origine. Cliquez sur le signe plus (+) pour augmenter la taille d'affichage du code, et sur le signe moins (–) pour la diminuer. Cliquez sur le logo du Visualisateur html/css pour afficher la synthèse des codes html et css dans un nouvel onglet. Cliquez sur le logo css pour lister les propriétés css 2.1 dans un nouvel onglet.
Pour obtenir une paire de balises, tapez le nom des balises voulues et appuyez sur Échap + T. Les balises br, hr, img, input, link et meta auront leur signe de fermeture caractéristique.
Les raccourcis clavier suivants permettent de générer d'un coup les balises les plus courantes :
Pour baliser un texte, sélectionnez-le d'abord. Le curseur se positionne au centre des balises lorsque rien n'est sélectionné. On peut baliser plusieurs lignes d'un coup.
L'indentation du code se fait en fonction des premiers espaces inclus dans la sélection. Les autres espaces de début ou de fin de ligne sont automatiquement supprimés.
Dans la zone css, appuyez sur Échap + K pour insérer les accolades {}, et sur Échap + Entrée pour terminer une déclaration de style et en commencer une autre. Dans la zone html, la commande Échap + Entrée insère une ligne indentée.