Editeur
Editeur
HTML
CSS
JavaSCRIPT
|
Il existe plus d’une trentaine d’éditeurs ! Inutil 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
Commençons par ecrire notre code avec le Bloc-notes, et enregistrer le fichier en index.htm.
<!DOCTYPE html>
<meta charset="UTF-8"> <title>Insert title here</title> <p>Fruits <ul> <li>bananes <li>glissantes </ul>
Utilisez le lien W3C validateur pour tester la validité de ce code. Vous devriez obtenir un message surprenant.
This document was successfully checked as HTML5!
La syntaxe de HTML5 est permissive mais il conviendra d’eviter ce genre d’écriture.
Limite
les 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>
<meta charset="UTF-8"> <title>Insert title here</title> <h1> <h2> coucou </h2></h1>
Ce code n’est pas valide, le navigateur va prendre une décision pour l’affichage.
 Editeur professionnel
L’éditeur Eclipse un classique en programmation Java est largement utilisé pour le développement WEB entreprise..
Avantage
Le warning en jaune indique que la balise H2 ne peut être à l’interieur de la balise H1.
 Editeur interactifs
Nous vous proposons de découvrir les éditeurs :
Nous allons utiliser jsbin
Création d’un compte
Votre compte vous permettra de retrouver et partager vos fichiers, il est donc important de créer un compte.Une fois connecté, un logo apparait à droite
  Edition de code HTML
Allez 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.
Partage
Partager 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.
Astuce
Pour eviter 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 saisie
jsbin utilise Emmet.
Voici un exemple
HTML
tapez div>ul>li suivi de tab (une syntaxe CSS)
 
Pas convaincu : taper .item*5 suivi de tab.
Pour le CSS, essayez
 Limite
A chacun de trouver les faiblesses de cette éditeur !
Sublime est un éditeur très utilisé chez les professionnel. |