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

Microsoft Visual Studio 2012 fournit une expérience d'édition HTML enrichie pour les pages Web Forms. L'éditeur HTML Visual Studio vous permet de travailler en mode WYSIWYG et d'utiliser directement le balisage HTML pour un contrôle plus fin. Cette procédure pas à pas présente les fonctionnalités d'édition de code HTML de Visual Studio.

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

• Création et modification du code HTML en mode Design

• Création et modification du code HTML en mode Source.

• Utilisation du mode Fractionné.

• Utilisation d'outils de navigation pour parcourir les balises HTML rapidement.

Composants requis

Pour effectuer cette procédure pas à pas, vous avez besoin des éléments suivants :

• Visual Studio ou Visual Studio Express pour Web est installé sur votre ordinateur. 

  Notes

  Si vous utilisez Visual Studio, la procédure pas à pas suppose que vous avez sélectionné la collection de paramètres Développement Web lors du premier démarrage de Visual Studio.Pour plus d'informations, consultez Comment : sélectionner les paramètres de l'environnement de développement Web.

• Connaissances générales sur le fonctionnement de Visual Studio.

  Pour une introduction au mode de création de pages Web Forms dans Visual Studio, consultez Procédure pas à pas : création d'une page Web Forms de base dans Visual Studio.

Création du site Web et de la page Web Forms

Si vous avez déjà créé un site Web Forms dans Visual Studio ou Visual Studio Express pour Web (par exemple, en suivant la Procédure pas à pas : création d'une page Web Forms de base dans Visual Studio), vous pouvez utiliser ce site Web et passer à la section suivante. Sinon, créez un site Web et une page Web Forms en suivant ces étapes.

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

1. Ouvrez Visual Studio ou Visual Studio pour Web.

2. Dans le menu Fichier, cliquez sur Nouveau site Web.

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

3. Sous Installé, cliquez sur Visual Basic ou Visual C#, puis sélectionnez Site Web ASP.NET vide.

   Pour cette procédure pas à pas, vous allez créer un site Web qui n'inclut pas de pages prégénérées ni d'autres ressources.

4. Dans la zone Emplacement Web, sélectionnez Système de fichiers, puis entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

   Par exemple, tapez le nom du dossier C:\SitesWeb.

5. Cliquez sur OK.

   Visual Studio crée un projet de site Web qui inclut un fichier Web.config.

6. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur la racine de votre site Web, puis cliquez sur Ajouter un nouvel élément.

7. Sélectionnez Web Form, nommez le fichier Default.aspx, puis cliquez sur Ajouter.

Utilisation du mode Design

Dans cette partie de la procédure pas à pas, vous allez apprendre à utiliser le mode Design qui fournit un affichage de type WYSIWYG de la page Web Forms. Vous pouvez ajouter le texte comme dans un programme de traitement de texte. Vous pouvez mettre le texte directement en forme avec les commandes de mise en forme ou en créant des styles inline.

Le mode Design affiche votre page quasiment de la même façon qu'un navigateur, à quelques différences près. La première différence tient au fait que, en mode Design, le texte et les éléments sont modifiables. La deuxième différence tient au fait que, pour modifier vos pages, le mode Design affiche certains éléments et contrôles qui n'apparaissent pas dans le navigateur. En outre, certains éléments, tels que les tableaux HTML, ont un rendu du mode Design spécial qui ajoute de l'espace supplémentaire pour l'éditeur. En général, le mode Design vous permet d'afficher votre page, mais d'une manière légèrement différente du navigateur.

Pour ajouter et mettre en forme le HTML statique en mode Design

1. Si vous n'êtes pas en mode Design, cliquez sur Design en bas à gauche de la fenêtre.

   

2. En haut de la page, tapez Page Web ASP.NET.

   

3. Mettez le texte en surbrillance pour le sélectionner puis, dans la barre d'outils Mise en forme, cliquez sur Titre 1.

   

4. Appuyez sur ENTRÉE après Page Web ASP.NET, puis tapez Cette page a été générée par ASP.NET.

   

5. Mettez le texte en surbrillance puis, dans le menu Format, cliquez sur Nouveau style.

   

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

6. Sélectionnez l'option Appliquer un nouveau style à la sélection de document.

7. Sélectionnez une police dans la liste déroulante des familles de polices, puis cliquez sur Appliquer.

   La famille de polices est appliquée au texte sélectionné.

   

8. Sous Catégorie, cliquez sur Bloc, puis sélectionnez (valeur) dans la liste déroulante des hauteurs de ligne. Entrez une valeur pour la hauteur de ligne.

   

9. Sélectionnez (valeur) dans la liste déroulante d'espacement des lettres. Entrez une valeur pour l'espacement des lettres. Cliquez sur Appliquer pour que les valeurs soient appliquées au texte sélectionné.

10. Cliquez sur OK.

Affichage des informations sur les balises

Lorsque vous travaillez dans la vue Design , vous pouvez souhaiter consulter les balises telles que div et span qui n'ont pas de rendu visuel.

Pour consulter les balises d'aire de conception HTML en mode Design

• Dans le menu Affichage, pointez sur Aides visuelles, et assurez-vous que l'option Contrôles non visuels ASP.NET est sélectionnée.

  Le concepteur affiche des symboles pour les paragraphes, les sauts de ligne et d'autres balises qui ne restituent pas de texte. Les symboles ne sont pas tous affichés en même temps, mais lorsque vous cliquez sur un élément visuel, l'élément non visuel qui le précède est indiqué.

Ajout de contrôles et d'éléments

En mode Design, vous pouvez faire glisser les contrôles de la boîte à outils vers la page. Vous pouvez ajouter quelques éléments, tels que les tableaux HTML, à l'aide d'une boîte de dialogue. Dans cette section, vous ajouterez quelques contrôles et un tableau pour disposer d'éléments à utiliser ultérieurement dans la procédure pas à pas.

Pour ajouter des contrôles et un tableau

1. Positionnez le curseur à droite du texte Cette page a été générée par ASP.NET, puis appuyez sur ENTRÉE.

2. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle TextBox sur la page et déposez-le dans l'espace que vous avez créé à l'étape précédente.

   Notes

   Vous pouvez également ajouter un contrôle en double-cliquant dessus.

   

3. Faites glisser un contrôle Button sur la page et déposez-le à droite du contrôle TextBox que vous avez ajouté à l'étape précédente.

   Les contrôles TextBox et Button sont des contrôles serveur Web ASP.NET, non des éléments HTML.

   

4. Positionnez le curseur à droite du contrôle Button, puis appuyez sur ENTRÉE.

5. Dans le menu Tableau, cliquez sur Insérer un tableau.

   La boîte de dialogue Insérer un tableau s'affiche.

   

6. Cliquez sur OK.

   La boîte de dialogue Insérer un tableau fournit des options pour configurer le tableau que vous créez. Toutefois, dans cette procédure pas à pas, vous pouvez utiliser une disposition de tableau prédéfinie.

   

Création de liens hypertexte

Le mode Design fournit des générateurs et d'autres outils qui vous aident à créer des éléments HTML qui requièrent des paramètres de propriété.

Pour créer un lien hypertexte

1. Dans le texte Cette page a été générée par ASP.NET, mettez en surbrillance ASP.NET pour le sélectionner.

2. Dans le menu Format, cliquez sur Convertir en lien hypertexte.

   

   La boîte de dialogue Lien hypertexte s'affiche.

3. Dans la zone URL, tapez https://www.asp.net.

   

4. Cliquez sur OK.

Définition de Propriétés dans la fenêtre Propriétés

Vous pouvez modifier l'apparence et le comportement des éléments sur la page en définissant des valeurs dans la fenêtre Propriétés.

Pour définir des propriétés dans la fenêtre Propriétés

1. Sélectionnez le contrôle Button que vous avez ajouté à l'étape « Ajout de contrôles et d'éléments » de cette procédure pas à pas.

2. Dans la fenêtre Propriétés, affectez à Texte la valeur Cliquez ici et à CouleurTexte une couleur différente.

   

3. Positionnez le curseur sur le lien hypertexte ASP.NET que vous avez créé à la section précédente.

   Notez que dans la fenêtre Propriétés, la propriété hreef de l'élément a a pour valeur l'URL que vous avez fournie pour le lien hypertexte.

Test de la page

Vous pouvez consulter les résultats de votre modification en consultant la page dans le navigateur.

Pour démarrer la page dans le navigateur de l'extérieur

• Cliquez avec le bouton droit sur la page, puis cliquez sur Afficher dans le navigateur.

  Si vous êtes invité à enregistrer vos modifications, cliquez sur Oui.

  Visual Studio démarre IIS Express, qui est un serveur Web local que vous pouvez utiliser pour tester les pages sans utiliser un serveur IIS complet.

  Notes

  Vous pouvez exécuter les pages de plusieurs façons.Si vous appuyez sur Ctrl+F5, Visual Studio exécute l'action de démarrage configurée sur la page de propriétés pour Options de démarrage.L'option de démarrage par défaut avec CTRL+F5 consiste à exécuter la page active, c'est-à-dire la page actuellement active en mode Source ou DesignVous pouvez également exécuter des pages dans le débogueur.Pour plus d'informations, consultez Procédure pas à pas : débogage des pages Web dans Visual Web Developer.

Modification de l'affichage par défaut

Par défaut, Visual Studio ouvre les nouvelles pages en mode Source.

Pour changer l'affichage de la page par défaut en mode Design

1. Dans le menu Outils, cliquez sur Options.

2. Assurez-vous que l'option Afficher tous les paramètres est sélectionnée en bas de la boîte de dialogue.

3. Ouvrez le nœud Concepteur HTML et sélectionnez Général. Sous Démarrer les pages en, cliquez sur mode Design.

   

Utilisation du mode Source

Le mode Source vous permet de modifier directement le balisage de la page. L'éditeur du mode Source vous fournit un certain nombre de fonctionnalités qui vous aident à créer des contrôles HTML et ASP.NET. Vous pouvez utiliser la Boîte à outils en mode Source comme en mode Design pour ajouter des éléments à la page.

Pour ajouter des éléments en mode Source

1. Basculez en mode Source en cliquant sur Source en bas de la fenêtre.

   Les contrôles que vous avez ajoutés sont créés en tant qu'éléments <asp:>. Par exemple, le contrôle Button est l'élément <asp:button>. Les paramètres de propriété que vous avez créés sont conservés comme paramètres d'attribut dans la balise <asp:button> d'ouverture.

2. À partir du groupe HTML de la Boîte à outils (et non du groupe Standard), faites glisser un élément Table sur la page et placez-le juste au-dessus de la balise </form>.

L'éditeur vous aide également à taper le balisage manuellement. Par exemple, l'éditeur fournit des choix contextuels terminant les balises HTML et les attributs que vous tapez. L'éditeur indique les erreurs et les avertissements sur le balisage en soulignant la balise douteuse d'une ligne ondulée. Vous pouvez voir ces erreurs et avertissements en positionnant la souris sur le texte de balisage.

Pour modifier le code HTML en mode Source

1. Positionnez le curseur au-dessus de la balise </form> de fermeture, puis tapez un crochet angulaire gauche (<).

   Notez que l'éditeur vous propose une liste des balises appropriées selon le contexte actuel.

   

2. Entrez « a » pour créer une balise d'ancrage, puis appuyez sur Espace.

   L'éditeur affiche une liste d'attributs appropriés pour une balise d'ancrage.

   Notes

   La lettre a (élément d'ancrage) peut ne pas apparaître sous la forme d'une option, selon la cible de validation définie pour le site ou la page.Toutefois, vous pouvez quand même créer un élément d'ancrage en entrant « a » sans sélectionner d'élément dans la liste déroulante.Les cibles de validation sont présentées ultérieurement dans cette rubrique.

   

3. Dans la liste, cliquez sur href, puis tapez un signe égal (=) et un guillemet double (").

   L'éditeur fournit la liste des pages auxquelles vous pouvez vous connecter.

   

4. Dans la liste de fichiers, double-cliquez sur Default.aspx, appuyez sur Espace, puis tapez un crochet angulaire droit (>) pour fermer la balise.

   L'éditeur insère une balise </a> de fermeture.

5. Finissez l'élément d'ancrage en entrant le texte Home entre les balises d'ouverture et de fermeture.

   L'élément ressemble désormais à l'exemple suivant :

   <a href="Default.aspx">Home</a>
   

6. Positionnez le curseur au-dessus de la balise </form> de fermeture, puis tapez <invalid>.

   L'éditeur souligne la balise d'une ligne ondulée, indiquant que la balise n'existe pas dans HTML.

7. Supprimez la balise que vous avez créée dans l'étape précédente.

Examen de la mise en forme HTML

Une fonctionnalité importante du concepteur de pages est qu'il conserve la mise en forme HTML que vous appliquez à la page. Toutefois, vous pouvez spécifier explicitement que l'éditeur remette en forme le document.

Pour examiner la mise en forme HTML

1. Remettez en forme les attributs du contrôle Button en alignant les attributs de telle sorte que la syntaxe déclarative ressemble à :

   <asp:Button
       id="Button1"
       runat="server"
       Font-Bold="True"
       ForeColor="Blue"
       Text="Click Here" />
   

   Notez que si vous avez mis en retrait le premier attribut et que vous appuyez sur Entrée dans la balise, les lignes suivantes seront également mises en retrait.

2. Basculez en mode Design.

3. Cliquez avec le bouton droit sur le contrôle Button, puis cliquez sur Copier.

4. Positionnez le curseur au-dessous du contrôle Button, cliquez avec le bouton droit, puis cliquez sur Coller.

   Visual Studio crée un bouton dont la propriété ID a la valeur Button2.

5. À partir du groupe Standard de la Toolbox, faites glisser un troisième contrôle Button sur la page pour créer un bouton nommé Button3.

6. Basculez en mode Source.

   Notez que Button2 est mis en forme exactement comme vous avez mis en forme Button1. En revanche, Button3 est mis en forme à l'aide de la mise en forme par défaut pour les contrôles Button.

   Notes

   Pour plus d'informations sur la personnalisation de la mise en forme d'éléments individuels, consultez Procédure pas à pas : modification avancée du code HTML dans Visual Studio pour pages Web Forms.

7. Modifiez le document afin que Button1 et Button2 soient sur la même ligne sans être séparés par un espace, comme le montre l'exemple suivant :

   <asp:Button ID="Button1" runat="server" Font-Bold="True" 
   ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
   runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
   

   Les éléments peuvent être renvoyés à la ligne, mais la fin de Button1 (le caractère />) doit être suivie immédiatement par le début de Button2.

8. Basculez en mode Design.

   Notez que Button1 et Button2 sont juxtaposés l'un à l'autre sans espace entre eux.

9. Basculez en mode Source.

10. Dans le menu Edition, sous-menu Avancé, cliquez sur Mettre le document en forme.

    Le document est reformaté, mais Button1 et Button2 restent sur la même ligne. Si l'éditeur sépare les boutons, il introduit un espace lors du rendu. Par conséquent, l'éditeur ne change pas la mise en forme que vous avez créée.

Utilisation du mode Fractionné

Vous pouvez afficher en même temps les fenêtres des modes Design et Source en utilisant le mode Fractionné.

Pour afficher une page en mode Fractionné

• Basculez en mode Fractionné en cliquant sur Fractionné en bas à gauche de la fenêtre. Notez que la fenêtre affichage Source occupe la partie supérieure de l'écran, et la fenêtre affichage Design la partie inférieure. Notez également que les deux vues sont synchronisées. Si vous double-cliquez sur un élément dans une vue pour le sélectionner, l'élément correspondant dans l'autre vue est mis en surbrillance.

Navigation entre des éléments

Comme les pages deviennent plus grandes et plus complexes, il est utile de pouvoir rechercher rapidement des balises et d'améliorer la lisibilité de la page. Visual Studio fournit les outils suivants pour vous aider à effectuer ces tâches lorsque vous êtes en mode Source :

• Structure du document qui fournit un affichage complet du document.

• Navigateur de balises qui fournit des informations sur la balise en cours de sélection et son emplacement dans la hiérarchie de page.

Pour démarrer, ajoutez des éléments à la page pour pouvoir examiner des fonctionnalités de navigation.

Pour ajouter des éléments

1. Basculez en mode Design.

2. À partir du groupe HTML de la Boîte à outils, faites glisser un contrôle Table dans une cellule du tableau que vous avez créé à la rubrique « Utilisation du mode Source » de cette procédure pas à pas.

3. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle Button dans la cellule centrale du tableau imbriqué.

Avec les différents éléments imbriqués sur la page, vous pouvez voir comment la structure du document assure la navigation rapide vers les balises de la page.

Pour naviguer à l'aide de la structure du document

1. Basculez en mode Source.

2. Dans le menu Affichage, cliquez sur Structure du document.

3. Dans la structure du document, cliquez sur Button4.

   Dans l'éditeur, le contrôle<Button4> que vous avez ajouté dans la procédure précédente est sélectionné.

   

Le navigateur de balises fournit des informations sur la balise en cours de sélection et l'emplacement dans la hiérarchie de page.

Pour naviguer à l'aide du navigateur de balise

1. Positionnez le curseur dans l'élément Button.

   Vous pouvez remarquer le navigateur de balise en bas de la fenêtre, qui affiche la balise <asp:button> et ses balises parentes. Le navigateur de balise inclut l'ID de l'élément, le cas échéant, afin que vous puissiez identifier quel élément est affiché. Le navigateur de balise affiche également la feuille de style en cascade assignée, le cas échéant, qui a été définie avec l'attribut Class.

   

2. Dans le navigateur de balise, cliquez sur la balise <table> la plus proche de la balise <asp:button#Button4>.

   Le navigateur de balise se déplace vers l'élément <table> intérieur et le sélectionne.

   

3. Dans le navigateur de balise, cliquez sur la balise <td> à gauche de l'événement <table> sélectionné.

   La cellule entière qui contient le tableau imbriqué est sélectionnée.

   Notes

   Vous pouvez cliquer pour sélectionner la balise ou son contenu en utilisant la liste déroulante dans la balise du navigateur de la balise.Par défaut, vous pouvez cliquer sur une balise dans le navigateur de balise pour sélectionner la balise et son contenu.

Vous pouvez également utiliser le navigateur de balise pour vous déplacer ou copier des éléments.

Pour vous déplacer ou copier des éléments à l'aide du navigateur de balise

1. À l'aide du navigateur de balise, sélectionnez la balise <tr> qui contient le contrôle Button4.

2. Appuyez sur CTRL+C pour copier la balise.

3. Utilisez le navigateur de balise pour vous déplacer vers le tableau extérieur.

4. En mode Source, positionnez le curseur entre la balise <table> et la première balise <tr>.

5. Appuyez sur CTRL+V pour coller la ligne copiée dans le tableau.

6. Basculez en mode Design.

   Vous pouvez remarquer que la ligne a été ajoutée, comprenant un contrôle Button.

Mise en forme de texte

• La barre d'outils Mise en forme applique des styles inline à la plupart des paramètres. Les mises en forme gras et italique sont appliquées à l'aide des balises b et i. La mise en forme de paragraphe est appliquée une balise de bloc, telle que p (pour normal), pre (pour mise en forme), et ainsi de suite. L'alignement de paragraphe est appliqué à l'aide des styles inline conformes aux normes XHTML 1.1.

• Le Concepteur vous permet également de créer un bloc style et un lien vers une feuille de style en cascade. Pour plus d'informations, consultez Procédure pas à pas : création et modification d'un fichier CSS.

• Par défaut, l'éditeur crée un balisage compatible avec la norme XHTML5. L'éditeur convertit tous les noms de balises HTML en minuscules, même si vous les tapez en majuscules. L'éditeur insère également les valeurs d'attribut (de propriété) entre guillemets doubles. Pour plus d'informations, consultez Procédure pas à pas : modification avancée du code HTML dans Visual Studio pour pages Web Forms.

Pour modifier la validation de balisage par défaut

1. En mode Source, cliquez avec le bouton droit sur la page, puis cliquez sur Mise en forme et validation.

2. Dans la boîte de dialogue Options, développez Éditeur de texte, développez HTML, puis cliquez sur Validation.

3. Dans la liste Cible, entrez un type de validation.

Étapes suivantes

Cette procédure pas à pas vous a fourni une vue d'ensemble des fonctions HTML de l'éditeur de pages Web. Elle inclut la création de code HTML en mode Design et en mode Source, la mise en forme de base et la navigation. Pour en savoir plus sur les fonctionnalités de modification dans Visual Studio, consultez les ressources suivantes.

• Pour des informations complémentaires sur les fonctions supplémentaires de l'éditeur HTML, y compris les options de mise en forme personnalisée, le mode Plan et la validation de HTML, consultez Procédure pas à pas : modification avancée du code HTML dans Visual Studio pour pages Web Forms.

• Pour savoir comment utiliser les styles de feuille de style en cascade, consultez Procédure pas à pas : création et modification d'un fichier CSS.

Voir aussi

Tâches

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

Concepts

Design (mode)