Editeur
EditeurHTML CSS JavaSCRIPT | Il existe plus d’une trentaine d’éditeurs ! Inutile de passer en revue les avantages et inconvenients de chacun. Nous allons nous focaliser sur la dernière génération : les editeurs interactifs. Environnement de travail |
Editeur de base : Bloc-notes !Pour Windows, lancer le Bloc-notes dans l’invite de commande : La console se lance dans démarrer->command ou tapez la touche windows puis taper dans Rechercher les programmes et les fichiers (en bas à gauche) %windir%\system32\notepad.exe Commençons par écrire notre code avec le Bloc-notes, et enregistrer le fichier en index.htm. <!DOCTYPE html>
<li>glissantes Utilisez le lien W3C validateur pour tester la validité de ce code. Vous devriez obtenir un message surprenant[1]. This document was successfully checked as HTML5!La syntaxe de HTML5 est permissive mais il conviendra d'éviter ce genre d’écriture. Limiteles limites d’un éditeur de base comme Bloc-notes sont évidentes. Outre le fait, qu’il n’y a pas d’auto-completion, l'absence de verification syntaxique pose des problèmes. Ecrire le code <!DOCTYPE html>
Ce code n’est pas valide, le navigateur va prendre une décision pour l’affichage.
Editeur professionnelL’éditeur Eclipse un classique en programmation Java est largement utilisé pour le développement WEB entreprise.. AvantageLe warning en jaune indique que la balise H2 ne peut être à l'intérieur de la balise H1. Editeur interactifsNous vous proposons de découvrir les éditeurs : Nous allons utiliser jsbin Création d’un compteVotre compte vous permettra de retrouver et partager vos fichiers, il est donc important de créer un compte.Une fois connecté, un logo apparaît à droite Edition de code HTMLAllez dans l’onglet à gauche Bins->New, puis écrire le code html suivant <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <h1> coucou </h1> </body> </html> Créer une version 1 de ce fichier Modifier maintenant votre fichier, verifier que vous êtes à la version 2 Votre fichier est visible par tous à cette adresse. Testez cette interractivité en communiquant l’adresse à un camarade. PartagePartager un code permettra d’illustrer une idée, de se faire aider … Voici un exemple de code partagé pour illustrer la notion de canvas et d’intégration de jsbin dans un blog. AstucePour éviter de taper toutes les balises, comme par exemple <p>...</p>, vous pouvez vous contenter de taper la lettre p et de taper sur la touche tab. Aide à la saisiejsbin utilise Emmet. Voici un exemple HTMLtapez div>ul>li suivi de tab (une syntaxe CSS) Pas convaincu :
Pour le CSS, essayez Voici une liste pour aller plus loin. Option avancée Est il possible par exemple de découper mon code JS en plusieurs fichiers ? |
Autre
éditeurs !
|
[1] Il me semble en effet que ce code n’est pas valide : il manquerait en effet des balises et toutes les balises <body> ou encore l'absence des balises </li>