Procédure pas à pas : modification de base du code HTML dans Visual Web Developer

Mise à jour : novembre 2007

L'outil de développement Web Microsoft Visual Web Developer fournit un éditeur choisi HTML riche qui vous permet de travailler en mode WYSIWYG pour afficher des pages Web 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 Web Developer.

Cette procédure pas à pas illustre 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 aurez besoin des éléments suivants :

• Connaissances générales sur Visual Web Developer.

Pour une introduction à la création de pages Web dans Visual Web Developer, consultez Procédure pas à pas : création d'une page Web de base dans Visual Web Developer.

Dans cette procédure pas à pas, vous utiliserez un site Web et une page Web ASP.NET unique semblable à la page créée dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer. Une fois que vous avez terminé cette procédure pas à pas, vous pouvez utiliser ce site et cette page Web.

Création du site et de la page Web

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

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

1. Ouvrez Visual Web Developer.

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

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

3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

4. 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.

5. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

6. Cliquez sur OK.

   Visual Web Developer crée le dossier et une page nommée Default.aspx.

Utilisation du mode Design

Dans cette partie de la procédure pas à pas, vous apprendrez à utiliser le mode Design qui fournit un affichage de type WYSIWYG de la page. 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. La première différence est que, en mode Design, le texte et les éléments sont modifiables. La deuxième différence est que, pour modifier vos pages, le mode Design affiche certains éléments et contrôles qui n'apparaissent pas dans le navigateur. En outre, quelques é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 avec quelques différences avec le 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 Application de style, cliquez sur Titre 1.

4. Positionnez le pointeur d'insertion e-dessous de 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. Cliquez pour activer la case 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 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 en mode Design, vous pouvez trouver utile de consulter les balises d'aire de conception, telles que div et span, et d'autres 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, puis cliquez sur Contrôles non visuels ASP.NET.

  Le concepteur affiche des symboles pour les paragraphes, les sauts de ligne et d'autres balises qui ne restituent pas de texte.

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 pointeur d'insertion à droite de la marque de fin de paragraphe de 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.

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

3. Faites glisser un contrôle Button sur la page.

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

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

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

5. 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 Propriétés.

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

1. Cliquez sur les contrôles Button que vous avez ajoutés dans « Ajout de contrôles et d'éléments » dans cette procédure pas à pas.

2. Dans Propriétés, affectez Cliquez ici à Text, une couleur différente à ForeColor et true à Bold.

3. Placez le point d'insertion sur le lien hypertexte ASP.NET que vous avez créé dans la section précédente.

   Notez que dans Propriétés, la propriété HRef 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 Web Developer démarre le serveur Web Visual Web Developer qui est un serveur Web local que vous pouvez utiliser pour tester les pages sans utiliser IIS.

Modification de l'affichage par défaut

Par défaut, Visual Web Developer ouvre de 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. Dans la boîte de dialogue Options, cliquez sur Général, puis sous Démarrer les pages en, cliquez sur mode Design.

Remarque :

Vous pouvez exécuter les pages de plusieurs façons. Si vous appuyez sur CTRL+F5, Visual Web Developer 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 est d'exécuter la page actuelle ; c'est-à-dire la page actuellement active en mode Source ou Design. Vous 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.

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 à gauche 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>.

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

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. Ces erreurs et avertissements sont disponibles si vous positionnez le pointeur de la souris sur texte de balisage.

Pour modifier le code HTML en mode Source

1. Positionnez le point d'insertion 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. Mettez en surbrillance a pour le sélectionner, puis appuyez sur ESPACE.

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

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

   L'éditeur vous propose une liste de pages actuellement disponibles pour une liaison et une option pour ouvrir la boîte de dialogue Homepicker.

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

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

5. Finissez l'élément anchor afin qu'il lie à la page Default.aspx à l'aide du texte de lien Home et qu'il le lise comme suit :

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

6. Positionnez le point d'insertion dans la balise a.

   Notez que Propriétés affiche les attributs de la balise.

7. Dans Propriétés, pour la propriété HRef, cliquez sur le bouton de sélection (...).

   La boîte de dialogue Sélectionner un élément dans le projet s'affiche.

   Maintenant, vous pouvez sélectionner une page dans le site Web actuel comme page cible. Si vous n'avez pas d'autres pages à choisir dans le site Web, fermez la boîte de dialogue Sélectionner un élément de projet et tapez une URL dans la zone Href de la fenêtre Propriétés.

8. Positionnez le point d'insertion 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.

9. 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 sauf si vous spécifiez 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"        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 nouveau contrôle Button, puis cliquez sur Copier.

4. Positionnez le point d'insertion au-dessous du nouveau contrôle Button, cliquez avec le bouton droit, puis cliquez sur Coller.

   Cette opération permet de créer un bouton dont l'ID est Button2.

5. À partir du groupe Standard de la Boîte à outils, faites glisser un troisième contrôle Button vers la page, qui crée <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 éléments asp:button.

   Remarque :
   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 Web Developer.

7. Modifiez le document afin que <Button1> et <Button2> soient sur la même ligne sans être séparés par un espace :

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

   Les éléments peuvent être renvoyés, mais la fin de <Button1> (c'est-à-dire />) doit être suivie immédiatement par le début de <Button2> (c'est-à-dire <asp:Button ID=).

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, cliquez sur Mettre le document en forme.

    Le document est reformaté, mais <Button1> et <Button2> restent sur la même ligne. Si l'éditeur devait séparer les boutons, il introduirait 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.

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 Web Developer 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 l'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éée dans « Utilisation du mode Source » dans cette procédure pas à pas.

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

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

Pour naviguer avec 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 avec le navigateur de balise

1. Positionnez le point d'insertion dans la balise <asp: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 l'événement <table> sélectionné.

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

   Remarque :
   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 <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, placez le pointeur d'insertion 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 le balisage compatible à la norme XHTML 1.1 et convertit tous les noms de balises HTML en minuscules, même si vous les tapez en majuscules. L'éditeur insère également des valeurs d'attribut (de propriété) entre guillemets. Pour plus d'informations, consultez Procédure pas à pas : modification avancée du code HTML dans Visual Web Developer.

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 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. Vous souhaiterez peut-être en apprendre davantage sur les fonctionnalités de modification dans Visual Web Developer. Par exemple, vous pouvez souhaiter procéder comme suit :

• 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. Pour plus d'informations, consultez Procédure pas à pas : modification avancée du code HTML dans Visual Web Developer.

• Apprenez à utiliser les styles de feuille de style en cascade. Pour plus d'informations, 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 Web Developer

Concepts

Mode Design

Référence

Mode Source