Les Tutos de Gabriel

Notepad++

Installer le plugin Emmet

Présentation :

Ce programme est un "plug-in" utilisable avec de nombreux éditeurs de textes, et en particulier pour Notepad++ que nous utilisons pour créer les pages de ce site.

Pour le télécharger, le lien du logo cliquable ci-dessus vous montrera la grande diversité des éditeurs de textes, et la méthode pour chacub d'eux.

En ce qui concerne Notepad++, je vous traduis cette méthode.

  1. Si ce n'est déjà fait, mettez à jour votre version de Notepad++
  2.  dans cours0002
  3. Dans Notepad++, déroulez le menu "Compléments - Plugin Manager - Show Plugin Manager"
  4.  dans cours0002
  5. Dans la boîte de dialogue, cherchez et sélectionnez "Emmet" dans la liste, puis cliquez sur le bouton Install.
    Le programme va s'installer tout seul, et vous demandera de redémarrer.
  6. Déroulez ensuite le menu "Paramétrage - Raccourcis clavier...
  7.  dans cours0002
  8. En cas de besoin, modifiez le raccourci pour celui montré dans la figure "inf0003". Ici, on a choisi Touche CtrlTouche Maj+Touche Enter

Dans cette application, j'ai choisi la combinaison ci-dessus,
alors que d'autres utilisent la touche Touche Tab.
L'avantage, c'est l'emploi d'une seule touche.
L'inconvénient, ça réagit moins vite et crée un petit temps d'attente, chaque fois qu'on appuie sur "tab" pour une tabulation normale. Le mieux c'est de faire vos essais.

Petit réglage à faire pour franciser Emmet

Dans Motepad++, ouvrez le fichier "snippets.json", en suivant le chemin ci-dessous :
C:\Program Files (x86)\Notepad++\plugins\EmmetNPP\emmet

 dans cours0002

Dans ce fichier, vous modifierez la langue comme montré dans la figure "inf0005" ci-dessous.

 dans cours0002

Remarque : vous devrez certainement accepter d'ouvrir le fichier en mode administrateur !
D'autre part, pour que ça fonctionne, il faut fermer Notepad++ et le redémarrer.

Exemples :

Le premier, un peu spectaculaire :

Dans Notepad++, tapez le raccourci Touche Ctrl+Touche N pour ouvrir une "Nouvelle page".

Tapez simplement le point d'exclamation "!", puis le raccourci clavier qui a été défini.

!CibleTouche CtrlTouche Maj+Touche Enter ==>

Résultat :

<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>CibleDocument</title> </head> <body>
</body> </html>

Vous pouvez remarquer que le point d'insertion "Cible" clignotte devant le mot Document, prêt à être remplacé par le titre que vous allez taper.

La plupart du temps, ce sera comme cela, le point d'insertion sera en attente là où il est logique que vous continuiez à taper vos textes.

pCibleTouche CtrlTouche Maj+Touche Enter ==> <p>Cible</p>

Ci-dessus : en début de ligne, vous tapez d'abord la lettre "p". Votre "point d'insertion Cible" clignotte juste à sa droite et attend que vous tapiez les lettres suivantes.
Vous tapez alors votre raccourci clavier "Ctrl+Maj+Entrée".
Cela vous écrit automatiquement vos balises de paragraphe <p>Cible</p> et le "point d'insertion Cible" se met en attente entre les deux balises "ouvrante et fermante".

Vous pouvez faire pareil avec toutes les balises, exemples :

h0CibleTouche CtrlTouche Maj+Touche Enter ==> <h0>Cible</h0>

h1CibleTouche CtrlTouche Maj+Touche Enter ==> <h1>Cible</h1>

h2CibleTouche CtrlTouche Maj+Touche Enter ==> <h2>Cible</h2>

h3CibleTouche CtrlTouche Maj+Touche Enter ==> <h3>Cible</h3>

h4CibleTouche CtrlTouche Maj+Touche Enter ==> <h4>Cible</h4>

h5CibleTouche CtrlTouche Maj+Touche Enter ==> <h5>Cible</h5>

h6CibleTouche CtrlTouche Maj+Touche Enter ==> <h6>Cible</h6>

Bien sûr, je ne vais pas continuer à mettre les touches dans les exemples suivants :

divCible ==> <div>Cible</div>

navCible ==> <nav>Cible</nav>

headerCible ==> <header>Cible</header>

sectionCible ==> <section>Cible</section>

articleCible ==> <article>Cible</article>

figureCible ==> <figure>Cible</figure>

footerCible ==> <footer>Cible</footer>

On peut aussi faire des assemblages, par exemple :

#NomIdCible ==> <div id="NomId">Cible</div>

div.NomDeClassCible ==> <div class="NomDeClass">Cible</div>

.NomDeClassCible ==> <span class="NomDeClass">Cible</span>

div#NomId.NomDeClassCible ==> <div id="NomId" class="NomDeClass">Cible</div>

Avec lorem ipsum

On veut mettre un exemple avec du texte.

Formule : div#NomId.NomDeClass>p*4>lorem20Cible ==>

Résultat :

<div id="NomId" class="NomDeClass"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, quae, illum iusto est architecto inventore dolorem obcaecati! Corporis, sequi dicta.</p> <p>Obcaecati, neque, provident, explicabo, molestiae vitae eligendi voluptas nihil mollitia blanditiis aut ipsum sint odio laborum numquam eos eius porro!</p> <p>Suscipit, similique, inventore repellendus nisi nesciunt voluptatum fugit recusandae repudiandae eveniet autem quae eaque ipsa error ut maxime itaque molestias?</p> <p>Explicabo, iure, impedit sequi dicta temporibus a debitis vitae autem cumque soluta adipisci laudantium hic corporis placeat ratione similique tempore.</p> </div>

Explications

Nous voulons une "div" ayant un identifiant "NomId" et une classe "NomDeClass" qui contiendra 4 paragraphes "p" de texte modèle "lorem" de 20 mots.

La force du programme est de fournir tout seul 4 paragraphes différents !

Autre exemple pour un tableau :

Total

Formule : table>(thead>tr>th*2)(tfoot>tr>td{Total}+td)(tbody>tr*2>td*2)Cible ==>

Résultat :

<table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tfoot> <tr> <td>Total</td> <td></td> </tr> </tfoot> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table>

Remarque :

Vous observerez le modèle du tableau au-dessus, et la ligne "formule" ainsi que le résultat.
Vous y voyez que l'on a mis dans l'ordre "thead" - "tfoot" - "tbody". Ne cherchez pas d'erreur, c'est juste une bizarerie du HTML qui impose de faire comme cela.

Exemple de menu :

nav>ul>li.niveau1*5>(li.niveau2)(li.submenu>li.niveau3)Cible

<nav> <ul> <li class="niveau1"> <li class="niveau2"></li> <li class="submenu"> <li class="niveau3"></li> </li> </li> <li class="niveau1"> <li class="niveau2"></li> <li class="submenu"> <li class="niveau3"></li> </li> </li> <li class="niveau1"> <li class="niveau2"></li> <li class="submenu"> <li class="niveau3"></li> </li> </li> <li class="niveau1"> <li class="niveau2"></li> <li class="submenu"> <li class="niveau3"></li> </li> </li> <li class="niveau1"> <li class="niveau2"></li> <li class="submenu"> <li class="niveau3"></li> </li> </li> </ul> </nav>

Pour mettre une balise strong

strong{Mots avec strong}Cible

Mots avec strong

Et avec les lignes CSS3

Ouvrez une nouvelle page avec le raccourci clavier : Touche Ctrl+Touche N
Sauvegardez au format CSS par le racourci clavier : Touche Ctrl+Touche S

1 - On va commencer par une balise Id en écrivant :

#essai { Cible }

Taper : dCibleTouche CtrlTouche Maj+Touche Enter

2 - On continue :

#essai { display: block; }

Taper : bgcCibleTouche CtrlTouche Maj+Touche Enter

#essai { display: block; background-color: #Ciblefff; }

Le point d'insertion clignotte après le "#" et les 3 lettres "f" sont surlignées. Il vous suffit de taper directement la valeur hexadécimale de la couleur que vous désirez.
Dans le cas présent le fond est blanc.

Tapez par exemple "000" pour du noir,
puis ensuite la touche Touche Fin et ensuite la touche Touche Enter pour aller à la ligne suivante.

Commentaire :

"#fff" est équivalent à "#ffffff;"

"#000" est équivalent à "#000000;"

C'est une façon raccourcie d'écrire une couleur où les 6 caractères seraient les mêmes.

3 - On continue :

Taper : bg+CibleTouche CtrlTouche Maj+Touche Enter

4 - Résultat :

#essai { display: block; background-color: #Ciblefff; background: #Ciblefff url() 0 0 no-repeat; }

Taper : cCibleTouche CtrlTouche Maj+Touche Enter

#essai { display: block; background-color: #Ciblefff; background: #Ciblefff url() 0 0 no-repeat; color: #Cible000; }

Comme nous avons défini un bloc à notre "#essai", nous pouvons aussi lui donner des bordures.
Dans ce cas, l'abréviation à retenir sera "bd".

Taper : bd+CibleTouche CtrlTouche Maj+Touche Enter

#essai{ display: block; background-color: #fff; background: #fff url() 0 0 no-repeat; color: #000; border:Cible1px solid #000; }

Ici le point d'insertion clignotte juste pour l'épaisseur de la bordure, et il ne vous reste qu'à saisir la valeur que vous désirez.

Taper : wCibleTouche CtrlTouche Maj+Touche Enter

#essai{ display: block; background-color: #fff; background: #fff url() 0 0 no-repeat; color: #000; border: 1px solid #000; width: Cible; }

Vous complétez par 300px au point d'insertion.

Taper : hCibleTouche CtrlTouche Maj+Touche Enter

#essai{ display: block; background-color: #fff; background: #fff url() 0 0 no-repeat; color: #000; border: 1px solid #000; width: 300px; height: Cible; }

Vous complétez par 50px au point d'insertion.

Taper : lhCibleTouche CtrlTouche Maj+Touche Enter

#essai{ display: block; background-color: #fff; background: #fff url() 0 0 no-repeat; color: #000; border: 1px solid #000; width: 300px; height: 50px; line-height: Cible; }

Vous complétez par 50px au point d'insertion.

Taper : ta:cCibleTouche CtrlTouche Maj+Touche Enter

#essai{ display: block; background-color: #fff; background: #fff url() 0 0 no-repeat; color: #000; border: 1px solid #000; width: 300px; height: 50px; line-height: 50px; text-align: centerCible; }

Cela met directement "text-align: center" au point d'insertion.

Intéressant

Taper : bdrsCibleTouche CtrlTouche Maj+Touche Enter

#essai{ display: block; background-color: #fff; background: #fff url() 0 0 no-repeat; color: #000; border: 1px solid #000; -webkit-border-radius: Cible; -moz-border-radius: Cible; border-radius: Cible; }

Ici, ce qu'il y a de bien, c'est que Emmet écrit en une seule fois tous les préfixes nécessaires pour les navigateurs.
Il ne vous reste plus qu'à écrire les valeurs, par exemple 10px, pour avoir des coins arrondis.

Le code css complet :

#essai{ display: block; background-color: #fff; background: #fff url() 0 0 no-repeat; color: #000; border: 1px solid #000; width: 300px; height: 50px; line-height: 50px; text-align: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

5 - Et notre exemple dans la page php :

<div id="essai">Essai pour le css avec Emmet.</div>

Résultat :

Essai pour le css avec Emmet.


Conclusion :

Cet exercice vous a montré quelques unes des possibilités de ce plugin Emmet pour vous faire gagner beaucoup de temps dans la saisie de vos pages.

Pour compléter, vous aurez donc à côté de vous le catalogue de Emmet, que vous consulterez à cette adresse : https://docs.emmet.io/cheat-sheet/