Procédure pas à pas : modification avancée du code HTML dans Visual Studio pour pages Web Forms

Article
11/15/2012

Microsoft Visual Studio propose une expérience d'édition enrichie pour créer des pages Web. Cette procédure pas à pas présente certaines fonctionnalités d'édition HTML les plus avancées de Visual Studio. Pour obtenir une introduction à l'édition HTML, consultez Procédure pas à pas : modification de base du code HTML dans Visual Studio pour pages Web Forms.

Notes

Les exemples de cette rubrique sont spécifiques aux pages Web Forms ASP.NET.Toutefois, vous pouvez utiliser les options de mise en forme HTML pour le balisage dans les pages Web Forms, les vues ASP.NET MVC (Contrôleur de l'affichage du modèle), les Pages Web ASP.NET et les pages HTML.

Cette procédure pas à pas décrit les tâches suivantes :

Spécification des options relatives au mode d'affichage du balisage par l'éditeur en mode Source.
Sélection des options permettant à l'éditeur HTML que vous créez d'être compatible avec un schéma spécifique (normes de balisage) tel que HTML5.
passage de votre page en mode Plan (création de régions réductibles dans l'éditeur afin de réduire l'encombrement).

Composants requis

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

Connaissances de base sur le fonctionnement de Visual Studio.

Pour une introduction à Visual Studio, consultez Procédure pas à pas : modification de base du code HTML dans Visual Studio pour pages Web Forms.

Création du site et de la page Web

Si vous avez déjà créé un projet Web Forms dans Visual Studio (par exemple, en effectuant Procédure pas à pas : modification de base du code HTML dans Visual Studio pour pages Web Forms), passez à la section suivante. Sinon, créez un projet et une page Web en suivant ces étapes.

Pour créer un projet de site Web de système de fichiers

Ouvrez Visual Studio.
Dans le menu Fichier, cliquez sur Nouveau site Web.

La boîte de dialogue Nouveau site Web s'affiche.

Notes

Cette procédure pas à pas utilise un projet de site Web.Vous pouvez utiliser un projet d'application Web à la place.Pour plus d'informations sur la différence entre ces types de projet Web, consultez Projets d'application Web et projets de site Web.
Sous Installé, sélectionnez le langage de programmation de votre choix.
Dans le volet Modèles, sélectionnez Site Web Forms ASP.NET.
Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

Par exemple, tapez le nom du dossier C:\SitesWeb.
Cliquez sur OK.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis sélectionnez Ajouter un nouvel élément.
Sous Installé, sélectionnez le langage avec lequel vous souhaitez travailler.
Dans le volet Modèles, sélectionnez Web Form.
Choisissez Ajouter.

Mise en forme du balisage

L'éditeur HTML fournit diverses options pour vous aider à mettre en forme le balisage de vos pages en fonctions de vos propres préférences. Les options de mise en forme incluent les éléments suivants :

déterminer si les noms de balises et d'attributs sont en majuscules ou en minuscules. Vous pouvez spécifier des options séparément pour les balises HTML et les contrôles serveur Web ASP.NET ;
déterminer si les attributs sont ajoutés en étant mis entre guillemets ;
déterminer si les éléments sont fermés automatiquement par l'éditeur. Vous pouvez choisir entre créer des balises de fermeture automatique (par exemple, <br />), créer des balises d'ouverture et de fermeture (<p></p>) et insérer automatiquement des balises de fermeture ;
mode de mise en retrait des éléments enfants d'une balise.
indiquer l'emplacement des sauts de ligne autour des balises.

Indépendamment des options de mise en forme définies, vous avez un contrôle optimal de la disposition et de l'apparence du balisage dans l'éditeur. Vous pouvez mettre en forme des éléments manuellement (par exemple, en les mettant en retrait). L'éditeur conserve votre mise en forme à moins que vous demandiez explicitement une nouvelle mise en forme du balisage.

Dans cette section de la procédure pas à pas, vous modifiez des paramètres qui affectent la façon dont le balisage s'affiche dans l'éditeur et consultez le résultat. Vous apprendrez également à appliquer la mise en forme à une page entière ou à une sélection dans la page.

Pour ajouter des éléments HTML qui possèdent des options de mise en forme par défaut

Basculez en mode Design.
Dans le menu Tableau, sélectionnez Insérer un tableau. Ne modifiez aucun des paramètres par défaut dans la boîte de dialogue.
Cliquez sur OK.

Le concepteur crée un tableau HTML contenant deux colonnes et deux lignes.
En dessous de la table, cliquez sur la page.
Appuyez plusieurs fois sur ENTRÉE pour créer de l'espace, puis à partir du groupe HTML de la boîte à outils, faites glisser un contrôle Image sur la page.
Basculez en mode Source.

Vous verrez que les éléments <table> et <img> ont été insérés dans la page. L'élément <img> est mis en surbrillance.

Par défaut, le concepteur crée des éléments dans lesquels les noms de balises et d'attributs sont en minuscules et les attributs sont entre guillemets.

À présent, vous pouvez modifier les options de mise en forme.

Pour modifier les options de mise en forme et de validation

Dans le menu Outils, choisissez Options.
Cliquez sur Éditeur de texte, développez HTML, puis cliquez sur Validation.
Dans la liste Cible, sélectionnez HTML5.

Notes

Au lieu de sélectionner manuellement un schéma par défaut pour valider les nouvelles pages, vous pouvez choisir Utiliser doctype pour la validation de la détection de schéma.Cette option demande à Visual Studio d'utiliser la déclaration de page DOCTYPE pour déterminer le schéma à utiliser pour la validation.Dans cette procédure pas à pas, n'activez pas cette case à cocher afin que vous puissiez voir comment le choix du schéma cible affecte le fonctionnement de l'éditeur.
Choisissez Mise en forme.

Les zones déroulantes Balise cliente et Attributs clients sont activées car vous avez sélectionné HTML5 dans l'étape précédente. Si vous avez conservé pour le paramètre Target la valeur XHTML5, ces deux zones déroulantes sont configurées pour des caractères en minuscules et désactivées car XHTML5 requiert des minuscules.

Notes

Vous pouvez définir des options séparément pour les balises serveur spécifiques (contrôles serveur ASP.NET) et les balises clientes (éléments HTML) en sélectionnant Options spécifiques pour les balises.Vous utiliserez cette fonctionnalité plus tard dans cette procédure pas à pas.
Définissez l'option Balise cliente à Majuscules.
Désactivez les cases à cocher Insérer des guillemets de valeur d'attribut lors de la mise en forme et Insérer des guillemets de valeur d'attribut lors de la saisie.
Cliquez sur OK pour retourner à l'éditeur.

Vous pouvez remarquer que même si vous ayez modifié des options de mise en forme, le balisage existant dans la page ne change pas.

À présent, vous pouvez ajouter de nouveaux éléments.

Pour ajouter des éléments HTML à l'aide des nouvelles options de mise en forme

En mode Source, allez au bas de la page en faisant défiler celle-ci.
À partir du groupe HTML de la boîte à outils, faites glisser un contrôle Table sur la page et positionnez-le au-dessus de la balise </form>.

Cette fois, les balises dans l'élément <TABLE> sont en majuscules.
En dessous de la table que vous venez de créer, positionnez le point d'insertion, puis tapez un crochet angulaire à gauche (<) pour commencer une nouvelle balise.

Une liste apparaît dans laquelle tous les noms de balises se présentent en majuscules, car il s'agit désormais de la valeur par défaut.
Tapez img en minuscules.

IMG s'affiche dans la liste en majuscules, représentant la nouvelle casse par défaut pour les balises.
Appuyez sur ESPACE.

<IMG est entré dans la page en majuscules, et une liste d'attributs de la balise s'affiche. Les attributs sont en minuscules, car, lorsque vous avez défini les options de mise en forme, vous avez laissé Minuscules comme paramètre par défaut de Attributs clients.
Type src=.

Normalement, l'éditeur fournit un jeu de guillemets doubles après le signe égal. Toutefois, étant donné que vous avez désactivé l'option Insérer des guillemets de valeur d'attribut lors de la saisie, l'éditeur ne les fournit pas.

Notes

Si vous entrez une valeur d'attribut qui contient un espace dans la fenêtre Propriétés, l'éditeur insère des guillemets, indépendamment du paramètre des options.
Tapez Graphic.gif (un nom de fichier factice).

La balise se présente désormais comme suit :
```
<IMG src=Graphic.gif 
```
Tapez une marque de barre oblique (/) et un crochet angulaire à droite (>) pour fermer la balise <img>. Vous pouvez également taper un espace et un signe supérieur à, et l'éditeur fournit la barre oblique automatiquement.

Lorsque vous modifiez des options de mise en forme, le balisage existant sur la page n'est pas affecté. Toutefois, vous pouvez appliquer des paramètres de mise en forme manuellement à une page ou à toute partie d'une page.

Pour appliquer la mise en forme aux éléments existants

En mode Source, sélectionnez la première table que vous avez créée (celle avec le balisage en minuscules).
Dans le menu Édition, choisissez Mettre la sélection en forme.

Les noms de balises passent en majuscules.

Notes

L'éditeur ne supprime pas les guillemets, même si vous modifiez le paramètre de l'option.De même, l'éditeur ne modifie pas la fin des balises existantes, même si vous modifiez l'option de fermeture des balises.

Lorsque vous utilisez des outils d'édition, tels que Boîte à outils ou Propriétés, pour modifier des éléments, l'éditeur utilise le jeu actuel d'options de mise en forme pour générer le balisage. Toutefois, l'éditeur ne modifie pas le balisage existant. Pour appliquer de nouvelles options de mise en forme à du balisage existant, utilisez les commandes Mettre le document en forme et Mettre la sélection en forme du menu Édition.

Définition des paramètres de mise en forme des balises

Les options de mise en forme que vous avez utilisées jusqu'à présent s'appliquent à tous les éléments de la page. Si vous le souhaitez, vous pouvez également spécifier des options de mise en forme pour les balises individuelles. Cette approche est utile si vous utilisez fréquemment certaines balises et souhaitez utiliser la mise en forme non définie par défaut pour ces balises. La mise en forme par balise vous permet de définir les options suivantes :

mode de fermeture des balises (non fermées, fermées automatiquement ou avec une balise de fermeture séparée) ;
mode d'utilisation des sauts de ligne autour et dans les balises ;
mode de mise en retrait des éléments enfants d'une balise.

Notes

L'éditeur HTML ignore les paramètres d'affichage de balise qui modifient le mode de rendu du contenu de balise dans le navigateur.

Dans cette partie de la procédure pas à pas, vous définissez plusieurs options de mise en forme des balises. Jusqu'à présent, vous avez utilisé des éléments HTML, tels que l'élément <table>. À présent, vous allez utiliser des contrôles serveur Web ASP.NET, afin que vous puissiez voir que les options de mise en forme s'appliquent de la même façon aux contrôles et aux éléments.

Vous commencerez par définir des options qui s'appliquent à toutes les balises d'un certain type. Vous pouvez définir des options pour les types d'éléments suivants :

les éléments HTML qui n'ont pas de contenu, tels que br et input ;
les éléments HTML qui peuvent avoir du contenu, tels que table et span ;
les éléments serveur (asp:) qui ne peuvent pas avoir de contenu, tels que asp:image ;
les éléments serveur qui peuvent avoir du contenu, tels que asp:textbox.

Note de sécurité
Un contrôle TextBox accepte l'entrée d'utilisateur, qui constitue une menace de sécurité potentielle.Par défaut, les pages Web ASP.NET vérifient que l'entrée d'utilisateur n'inclut pas de script ou d'éléments HTML.Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Au cours de la première partie de cette section, vous ajouterez un tableau HTML. Vous modifierez ensuite les règles de mise en forme des balises pour les éléments du tableau et reformaterez le document afin de voir les effets de la modification des règles de mise en forme.

Pour définir des règles de mise en forme des balises pour un tableau HTML

En mode Source, dans une partie vide de la fenêtre, cliquez avec le bouton droit, puis sélectionnez Mise en forme et validation.

Notes

La commande Mise en forme et validation est uniquement disponible en mode Source.

La boîte de dialogue Options s'affiche avec les options de mise en forme que vous avez définies dans la section précédente.
Dans la liste Balise cliente, sélectionnez Minuscules pour réinitialiser la mise en forme des balises clientes.
Cliquez sur OK pour fermer la boîte de dialogue Options.
Dans la Boîte à outils, à partir du groupe HTML, faites glisser un contrôle Table en mode Source.

L'éditeur crée un élément <table> qui comporte trois lignes (éléments <tr>) et trois cellules (éléments <td>) sur chaque ligne. Chaque balise se trouve sur une ligne séparée :
```
<table>
    <tr>
        <td>
            &nbsp;
       </td>
    </tr>
```
Dans une partie vide de la fenêtre, cliquez avec le bouton droit, puis sélectionnez Mise en forme et validation.
Choisissez Options spécifiques pour les balises.
Développez Paramètres par défaut.

Une liste de types de balises s'affiche, commençant par La balise cliente ne prend pas en charge le contenu. Sous Paramètres par défaut, vous pouvez définir différentes options pour les éléments clients et serveur, pour les éléments qui ont du contenu (tels qu'un élément table) et pour les éléments qui n'en ont pas (tels qu'un élément img).
Cliquez sur La balise cliente prend en charge le contenu.

Notez que le paramètre par défaut définit que les balises utilisent une balise de fermeture séparée et qu'elles contiennent des sauts de ligne avant, dans et après la balise.
Développez Balises HTML clientes.
Choisissez td.

Vous définirez les options permettant de modifier la mise en forme des balises td.
Dans la liste Sauts de ligne, sélectionnez Aucun.
Cliquez sur OK pour fermer la boîte de dialogue Options spécifiques pour les balises, puis cliquez sur OK pour fermer la boîte de dialogue Options.
Dans le menu Édition, choisissez Mettre le document en forme.

Le document est reformaté. Les balises <td> du tableau que vous avez ajouté sont placées sur une seule ligne :