Sublime Text Travailler avec Emmet

Pour faire ce tutoriel avec Sublime Text 4 vous devez tenir compte des modifications suivantes :

1. Si vous venez d'installer la version 4 il se peut qu'Emmet ne soit pas "activé". Tapez CTRL+SHIFT+P puis tapez Emmet et choisissez la commande : Enter Abbreviation Mode.
2. Le raccourci clavier CTRL+SHIFT+G n'est plus associé à la commande Emmet: Wrap With Abbreviation : Vous pouvez aller chercher cette commande au moyen de la palette de commande CTRL+SHIFT+P à chaque fois que vous en avez besoin ou alors remettre en place ce raccourci.

1. Faites CTRL+N pour créer un nouveau fichier. Puis CTRL+S et enregistrez le sur le bureau avec le nom Emmet.html.
2. Tapez ! puis TAB pour avoir une structure minimum.

2. Placez votre curseur dans le body et tapez nav>ol puis TAB. Vous constatez que l'élément ol a été placé dans l'élément nav. Faites CTRL+Z.

3. Pour ajouter un élément li il faut maintenant encapsuler li dans ol donc faire nav>ol>li. Cependant si vous voulez plusieurs éléments li par exemple 5 alors tapez nav>ol>li*5 puis TAB. Vous avez ici 5 éléments li dans votre ol. Faites CTRL+Z.

4. Si vous voulez mettre un nom de classe sur la nav tapez nav.main-nav>ol>li*5. Faites CTRL+Z.
5. Si maintenant vous voulez placer un id sur vos li tapez nav.main-nav>ol>li#menu*5. Mais attention ici ça n'est pas suffisant car vos id sont tous identiques. Faites CTRL+Z.
6. Pour incrémenter automatiquement vos id ajouter -$ et tapez nav.main-nav>ol>li#menu-$*5.

7. Vous pouvez incrémenter en utilisant un autre format. Tapez nav.main-nav>ol>li#menu-$$*5.
8. Maintenant je remplie mes li avec un lien plus un paragraphe nav.main-nav>ol>li#menu-$*5>a+p (* deux sur l'illustration).

9. Maintenant si je veux ajouter une section sous ma navigation il me faut mettre des parenthèses autour du premier membre de l'abréviation (nav.main-nav>ol>li#menu$*5>a+p)+section.

L'outil pour envelopper de texte est appelé un wrapper en anglais.

1. Effacez ce qu'il y a dans le body puis tapez trois lignes pommes, poires et oranges.
2. Sélectionnez la zone et placer les curseurs multiple CTRL+SHIFT+L.
3. Appelez le wrapper Emmet avec CTRL+SHIFT+G.

4. Dans la fenêtre du wrapper changez le div en li.
5. Remarquez que la zone de code reste sous le contrôle de l'abréviation Emmet. Ajoutez #fruit-$$ puis RETURN pour fermer le wrapper.

6. Maintenant nous voulons placer le ul et pour cela il faut sélectionner toute la zone puis appelez à nouveau le wrapper CTRL+SHIFT+G.
7. Tapez ul dans la zone du wrapper puis RETURN.

Pour coder une définition CSS il suffit de taper les premières lettres de chaque mot du couple propriété : valeur. Vous aurez une liste de propositions et vous en choisirez une dedans.

1. Créez un nouveau fichier et vous le sauvegardez avec l'extension CSS.
2. Créez la classe main.
3. Vous voulez coder un text-align:center vous allez taper tac soit le t de text le a de align et le c de center. Il vous suffit d'appuyer sur RETURN car c'est la première proposition.

4. Tapez tdn RETURN pour text-decoration:none;
5. Tapez tdu RETURN pour text-decoration:underline;
6. Tapez db RETURN pour display:block;
7. Tapez dib RETURN pour display:inline-block;
8. Tapez di RETURN et aller chercher la proposition display:inline;

Comment rentrer des valeurs numériques par exemple 10px pour 10 pixels ou 1em ou 15%.

1. Tapez p10+TAB.
2. Tapez p10-20+TAB.
3. Tapez p10-15-20-25+TAB.

4. Tapez mr10+TAB.
5. Tapez ml10+TAB.
6. Tapez mt10+TAB.
7. Tapez mb10+TAB.
8. Tapez w85p+TAB.
9. Tapez fz2em+TAB.

1. Tapez fdr+RETURN. Vous constatez que les préfixes vendeurs sont intégrés.
2. Tapez ai+RETURN.