Procédure pas à pas : utilisation d'extraits HTML

Cette procédure pas à pas indique comment ajouter du balisage à une page à l'aide d'extraits de code HTML. Vous pouvez utiliser des extraits de code HTML dans Visual Studio pour gagner du temps et réduire la saisie lors de la création de balisage de page Web en mode Source.

Cette rubrique contient les sections suivantes :

• Composants requis

• Fonctionnement des extraits de code

• Ouverture d'un projet existant ou création d'un projet

• Insertion d'extraits HTML

• Exécution de la page

• Étapes suivantes

Composants requis

Pour exécuter cette procédure pas à pas, vous devez :

• Visual Studio ou Visual Studio pour Web.

Fonctionnement des extraits de code

Visual Studio contient plus de 200 extraits de code pour C#, Visual Basic, XML et HTML (qui inclut du balisage ASP.NET). Les extraits de code se composent de code de programmation ou balisage pré-écrit. Dans certains cas, l'extrait de code contient des espaces réservés pour des informations (telles qu'un nom de propriété) que vous pouvez spécifier après avoir inséré l'extrait de code. Vous pouvez utiliser des extraits de code dans l'éditeur de code, et en mode Source de l'éditeur HTML lorsque vous créez une page Web.

Dans cette procédure pas à pas, vous allez ajouter du balisage HTML et ASP.NET à une page Web Forms. Presque tous les extraits proposent une méthode rapide pour insérer le code. Par exemple, pour insérer un contrôle serveur ASP.NET Button dans des pages Web Forms, vous pouvez taper <bu, puis appuyer deux fois sur la touche Tab. Sinon, vous pouvez taper button, puis appuyez une fois sur la touche Tab. Dans ce cas, l'éditeur complète le balisage pour le contrôle Button en insérant le balisage suivant :

<asp:Button Text="text" runat="server" />

Cette procédure pas à pas indique la méthode la plus rapide pour insérer des extraits de code. Toutefois, vous pouvez également insérer des extraits de code des manières suivantes :

• Positionnez le curseur où vous souhaitez que l'extrait de code inséré apparaisse, cliquez avec le bouton droit sur la page, puis sélectionnez Insérer un extrait.

• Positionnez le curseur où vous souhaitez que l'extrait de code inséré apparaisse, puis appuyez sur le raccourci clavier Ctrl+K, Ctrl+X. Une liste s'affiche qui vous permet de sélectionner un extrait de code.

• Sélectionnez un mot que vous souhaitez entourer à l'aide d'un extrait de code, puis cliquez avec le bouton droit sur le mot et cliquez sur Entourer de.

• Dans le menu Edition, sélectionnez IntelliSense, puis sélectionnez Insérer un extrait.

Dans Visual Studio, pour afficher les extraits de code disponibles ou pour ajouter des extraits de code, vous pouvez utiliser le Gestionnaire des extraits de code.

L'illustration suivante montre la boîte de dialogue Gestionnaire des extraits de code.

Boîte de dialogue Gestionnaire des extraits de code

Dans la procédure suivante, vous verrez quels extraits de code sont disponibles pour les éléments HTML.

Pour afficher les extraits de code HTML disponibles avec le Gestionnaire des extraits de code

1. Ouvrez Visual Studio. Il n'est pas nécessaire d'ouvrir un projet pour afficher le Gestionnaire des extraits de code.

2. Dans le menu Outils, sélectionnez Gestionnaire des extraits de code.

   La boîte de dialogue Gestionnaire des extraits de code s'affiche.

3. Dans la liste Langage, sélectionnez HTML.

   Remarquez que plusieurs dossiers contiennent des extraits de code liés à HTML, tels qu'ASP.NET, ASP.NET MVC et HTML.

4. Sous Emplacement, développez le dossier HTML.

5. Sélectionnez div.

   Remarquez que la liste Autres raccourcis inclut les éléments HTML associés tels que p, h1, h2. Les éléments associés ont également des extraits de code que vous pouvez insérer en utilisant les raccourcis <div, <p, <h1, et ainsi de suite.

Ouverture d'un projet existant ou création d'un projet

Si vous n'avez pas déjà de projet Visual Studio ou de projet d'application Web Visual Studio Express, suivez ces étapes pour en créer un pour cette procédure pas à pas. Dans la procédure pas à pas, vous allez travailler avec les extraits de code dans la page Default.aspx. Par contre, si vous utilisez un projet existant, vous pouvez effectuer les procédures dans n'importe quelle page.

Pour créer un projet d'application Web

1. Dans le menu Fichier, cliquez sur Nouveau projet.

   La boîte de dialogue Nouveau projet s'affiche.

2. Sélectionnez le nœud Web, puis sélectionnez Application Web ASP.NET dans la section Modèles Visual Studio installés.

3. Dans le champ Nom, tapez SnippetTest.

4. Cliquez sur OK.

   Visual Studio crée un projet d'application Web.

Insertion d'extraits HTML

IntelliSense affiche les extraits de code HTML qui sont disponibles comme d'autres éléments HTML. Plusieurs fonctionnalités des extraits de code permettent d'accélérer l'insertion et la modification des extraits. De plus, certains extraits de code contiennent des espaces réservés dont vous pouvez entrer la valeur sans avoir à déplacer le point d'insertion au niveau de l'attribut.

Dans cette procédure, vous insérez des éléments ASP.NET. Ils sont inclus dans la section HTML du Gestionnaire des extraits de code.

Pour insérer des extraits de code HTML dans le balisage

1. Ouvrez la page Default.aspx si ce n'est déjà fait.

2. Basculez en mode Source.

3. Positionnez le curseur avant la balise de fermeture </asp:Content>.

4. Tapez <che.

   La liste déroulante affiche des noms d'éléments et des extraits de code. Une icône qui contient des crochets indique un élément HTML, comme indiqué dans l'illustration suivante :

   

   Une icône en forme de feuille de papier indique un extrait de code, comme indiqué dans l'illustration suivante :

   

   Certains extraits de code ont le même nom que leur élément HTML et possèdent à la fois l'icône d'extrait de code et l'icône de balisage.

5. Appuyez deux fois sur la touche TAB.

   Le balisage pour un contrôle CheckBox apparaît et la valeur de propriété text est mise en surbrillance.

   Notes

   Si vous n'êtes pas positionné entre les balises d'ouverture et de fermeture d'un élément, vous pouvez obtenir des résultats différents.

6. Tapez Check box et appuyez sur Entrée pour finir l'élément.

   Le curseur se déplace à la fin de l'élément ; il n'est pas nécessaire d'utiliser la touche TAB pour finir l'élément.

7. Appuyez sur ENTRÉE pour passer à la ligne suivante.

8. Positionnez le curseur au début de la ligne et cliquez avec le bouton droit sur la page.

9. Sélectionnez Insérer un extrait pour afficher les dossiers d'extrait de code disponibles.

10. Double-cliquez sur le dossier d'extrait de code HTML.

11. Tapez br et appuyez sur TAB.

    Le balisage pour un élément de saut de ligne (br) apparaît.

12. Appuyez sur ENTRÉE pour passer à la ligne suivante.

13. Positionnez le curseur au début de la ligne et appuyez sur le raccourci clavier CTRL+K, CTRL+X.

    Le dossier d'extrait de code apparaît.

14. Appuyez sur Tab pour choisir le dossier d'extrait de code ASP.NET.

15. Tapez ra et appuyez sur Tab.

    Le balisage d'un contrôle RadioButton apparaît et text est mis en surbrillance.

16. Tapez Radio Button. Appuyez sur Entrée pour finir l'élément.

17. Appuyez sur ENTRÉE pour passer à la ligne suivante.

18. Tapez <br, puis appuyez sur la touche Tab deux fois.

19. Appuyez sur ENTRÉE pour passer à la ligne suivante.

20. Dans le menu Edition, sélectionnez IntelliSense, puis sélectionnez Insérer un extrait.

    Le dossier d'extrait de code s'affiche.

21. Double-cliquez sur le dossier d'extrait de code ASP.NET.

22. Tapez la et appuyez deux fois sur Tab.

    Le balisage pour un contrôle Label s'affiche. La valeur de la propriété text est mise en surbrillance.

23. Tapez Text box et appuyez sur Entrée.

24. Accédez à la ligne suivante.

25. Tapez <textb et appuyez deux fois sur Tab.

    Le balisage pour un contrôle TextBox apparaît.

Exécution de la page

La dernière étape consiste à tester la page. Pour tester une page, vous pouvez utiliser IIS Express, qui s'exécute en local et ne requiert pas IIS.

Pour exécuter la page

1. Appuyez sur CTRL+F5 pour exécuter la page.

2. Faites défiler jusqu'en bas. La case à cocher, la case d'option, le nom et les contrôles de zone de texte sont en bas de page.

Étapes suivantes

Dans cette procédure pas à pas, vous avez découvert comment des extraits de code HTML peuvent être ajoutés à votre projet Visual Studio. Pour plus d'informations sur l'utilisation d'extraits de code, consultez les rubriques sur la page Extraits de code.