Démarrage rapide : affichage de texte (HTML)

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les applications du Windows Store en JavaScript peuvent utiliser plusieurs éléments pour afficher du texte. Les principaux éléments utilisés pour afficher du texte en lecture seule sont label, div, paragraph et heading. Cette rubrique de démarrage rapide indique comment utiliser ces éléments pour afficher du texte.

Voir cette fonctionnalité en action dans notre série Fonctionnalités d’application de A à Z: Interface utilisateur des applications du Windows Store, de A à Z

Prérequis

• Nous partons du principe que vous savez créer une application élémentaire du Windows Store en JavaScript avec le modèle Bibliothèque Windows pour JavaScript. Pour obtenir de l’aide lors de la création de votre première application, voir Créer votre première application du Windows Store en JavaScript.

Contrôles Label, div, paragraph et text area

Label, div, paragraph et heading sont les principaux contrôles utilisés pour afficher du texte en lecture seule dans les applications du Windows Store en JavaScript. Le code HTML suivant indique comment définir un contrôle label simple et définir son texte.

<label>Hello, World!</label>

Vous pouvez utiliser l’attribut style inline pour afficher du texte avec une mise en forme différente. Voici comment utiliser l’attribut style avec des contrôles div, paragraph, label et heading pour définir plusieurs chaînes de texte avec des mises en forme différentes.

Remarque  Vous pouvez utiliser des feuilles de style en cascade (CSS) à la place de l’attribut style pour afficher du texte avec une mise en forme différente. Ceci vous permet de définir un style une seule fois, puis d’y faire référence à partir de plusieurs contrôles. Si, par la suite, vous souhaitez modifier la définition du style, il vous suffit d’apporter les modifications désirées dans un seul et même endroit. Pour en savoir plus, voir Feuilles de style en cascade (CSS).

 

<div style="font-family:Arial">Sample text formatting runs</div>

<!-- 'margin:0px' removes any default margins from the <p> element. -->
<p style="margin:0px; color:lightgray; font-family:'courier new'; font-size:24px">Courier New 24</p>

<label style="color:teal; font-family:'times new roman'; font-style:italic; font-size:18px">Times New Roman Italic 18</label><br />
    
<!-- 'padding:0px' remove any default padding from the <h1> element. -->
<h1 style="padding:0px; background-color:transparent; color:steelblue; font-family:Verdana; font-weight:bold; font-size:14px">Verdana Bold 14</h1>

Résultat :

Récapitulatif et étapes suivantes

Vous avez appris à créer des éléments label, div, paragraph et heading pour afficher du texte dans votre application.

Rubriques associées

Recommandations en matière de polices

Démarrage rapide : ajout de contrôles de saisie et de modification de texte