1. Créer un site
  2. Tutoriels
  3. Configuration avancée du site
  4. Comment encadrer un texte
 

 

Encadrer un texte

Comment encadrer un texte en HTML et CSS sur une page de son site Internet ?

Dans ce tutoriel, nous allons voir comment encadrer un texte sur une page web son site internet en HTML et CSS, ou encore plus simplement avec les options de réglages des colonnes.
Encadrer du texte consiste à ajouter une bordure ou un arrière-plan à un paragraphe ou à une portion de texte, afin de le mettre en valeur ou de le distinguer du reste du contenu.

 
 
 

Ajouter simplement une bordure avec l'option "Bordé" de la colonne

Grâce aux outils de création de site internet d'e-monsite, vous pouvez border un texte, un paragraphe ou encore une image de façon très simple. Vous allez simplement utiliser l'option "Bordé" sur une colonne de votre contenu.

 

Editez une page de votre site. Cliquez ensuite sur les options de la colonne, et sélectionnez l'option "Bordé" :

Apparence colonne

 
 

Design colonne

Vous pourrez personnaliser la couleur de la bordure ou de l'arrière plan depuis le manager dans Configuration > Apparence.

 

Ajouter une bordure sur un élément du site en HTML/CSS

Il est également possible de créer des encadrements avec du HTML et du CSS. 

Ce texte est dans un cadre.

Il y a 2 méthodes possible, en utilisant :

  • du code HTML et via la feuille de styles CSS de votre site
  • des éléments html et CSS en ligne

En utilisant du code HTML et via la feuille de styles CSS de votre site

Il faut pour faire cela basculer l'éditeur visuel en éditeur HTML et ajouter une class CSS pour le paragraphe ou le bout de texte à encadrer (alors dans une balise span). En CSS, il faut définir 3 caractéristiques pour la bordure : sa taille, son style et sa couleur. Ajoutez également une marge intérieure pour que le texte ne soit pas collé à la bordure. 

Voici le code utilisé en HTML : 

<span class="encadrer-un-contenu">Ce texte est dans un cadre.</span>

Et voici les styles CSS appliquées à la class encadrer-un-contenu :

.encadrer-un-contenu{ border: 1px solid black; padding: 5px; }

Les règles CSS sont à appliquer dans Configuration > Apparence en restant en mode simple, dans le formulaire en bas de page Modifier/Ajouter du code CSS au thème (utilisateurs avertis).

De nombreuses possibilités sont offertes en CSS pour personnaliser les bordures (arrondies, en pointillés, double-trait, etc.).

En utilisant des éléments html et CSS en ligne

Pour encadrer un texte en HTML, basculer l'éditeur visuel en éditeur HTML et utilisez la balise <p> (paragraphe). Cette balise permet de définir un paragraphe de texte et d'appliquer des styles au contenu qu'elle contient. Par exemple :

<p style="border: 1px solid black; padding: 10px;" >Ce texte sera encadré grâce à la balise <p> et aux styles CSS définis.</p>

Ce code affichera un paragraphe de texte encadré par une bordure noire et avec un espacement intérieur de 10 pixels. Il existe également d'autres balises qui peuvent être utilisées pour encadrer du texte, comme <div> (division), <blockquote> (citation en bloc) ou encore <pre> (texte préformaté). Chacune de ces balises a sa propre signification et peut être utilisée de manière appropriée en fonction de la structure et de l'apparence souhaitées pour votre contenu.

Ces tutoriels pourraient également vous intéresser