Regardez n'importe quelle page Web et vous verrez une combinaison de contenu textuel et d'images. Ces deux éléments sont des ingrédients essentiels au succès d’un site Web. Le contenu texte est ce que les visiteurs du site liront et ce que les moteurs de recherche utiliseront dans le cadre de leurs algorithmes de classement. Les images ajouteront un intérêt visuel au site et contribueront à accentuer le contenu du texte.
Ajouter du texte et des images à des sites Web est facile. Le texte est ajouté avec des balises HTML standard telles que des paragraphes, des en-têtes et des listes, tandis que les images sont placées sur une page avec élément. Une fois que vous avez ajouté une image à votre page Web, vous pouvez toutefois souhaiter que le texte passe à côté de l'image, plutôt que l'aligner en dessous (méthode par défaut utilisée pour rendre une image ajoutée au code HTML dans le navigateur). Techniquement, il existe deux manières de réaliser cet aspect, soit en utilisant CSS (recommandé), soit en ajoutant les instructions visuelles directement dans le code HTML (non recommandé, car vous souhaitez conserver la distinction entre style et structure pour votre site Web).
Utilisation de CSS
La bonne façon de changer la façon dont la mise en page du texte et des images d'une page et la manière dont leurs styles visuels apparaissent dans le navigateur consiste à utiliser CSS. Rappelez-vous simplement, puisque nous parlons d'un changement visuel sur la page (faisant que le texte s'écoule autour d'une image), cela signifie que c'est le domaine des feuilles de style en cascade.
-
Tout d'abord, ajoutez votre image à votre page Web. N'oubliez pas d'exclure toutes les caractéristiques visuelles (telles que les valeurs de largeur et de hauteur) de ce code HTML. Ceci est important, en particulier pour un site Web réactif où la taille de l'image varie en fonction du navigateur. Certains logiciels, comme Adobe Dreamweaver, ajoutent des informations sur la largeur et la hauteur aux images insérées avec cet outil. Assurez-vous donc de supprimer ces informations du code HTML! Veillez toutefois à inclure le texte de remplacement approprié. Voici un exemple de l'apparence de votre code HTML:
-
À des fins de style, vous pouvez également ajouter une classe à une image. Cette valeur de classe est ce que nous allons utiliser dans notre fichier CSS. Notez que la valeur que nous utilisons ici est arbitraire, même si, pour ce style particulier, nous avons tendance à utiliser les valeurs "gauche" ou "droite", en fonction de la manière dont nous voulons aligner notre image. Nous trouvons que cette syntaxe simple fonctionne bien et est facile à comprendre pour les autres utilisateurs qui devront peut-être gérer un site à l'avenir, mais vous pouvez lui attribuer la valeur de classe que vous souhaitez.
En soi, cette valeur de classe ne fera rien. L'image ne sera pas automatiquement alignée à gauche du texte. Pour cela, nous devons maintenant nous tourner vers notre fichier CSS.
-
Dans votre feuille de style, vous pouvez maintenant ajouter le style suivant:
.la gauche {
float: gauche;
remplissage: 0 20px 20px 0;
}
Ce que vous avez fait ici est d'utiliser la propriété CSS "float", qui extraira l'image du flux de documents normal (la manière dont l'image serait normalement affichée, avec le texte aligné en dessous) et l'aligner sur le côté gauche de son conteneur. . Le texte qui suit dans le balisage HTML est maintenant entouré. Nous avons également ajouté des valeurs de remplissage afin que ce texte ne soit pas directement aligné sur l'image. Au lieu de cela, il aura un bel espacement qui sera visuellement attrayant dans la conception de la page. Dans le raccourci CSS pour le remplissage, nous avons ajouté 0 valeurs en haut et à gauche de l'image, et 20 pixels à gauche et en bas. N'oubliez pas que vous devez ajouter un peu de marge au côté droit d'une image alignée à gauche. Une image alignée à droite (que nous examinerons dans un instant) aurait un rembourrage appliqué sur son côté gauche.
-
Si vous affichez votre page Web dans un navigateur, vous devriez maintenant voir que votre image est alignée sur le côté gauche de la page et que le texte s’enroule joliment autour. Une autre façon de dire cela est que l'image est "flottée à gauche".
-
Si vous vouliez que cette image soit alignée à droite (comme dans l'exemple de photo qui accompagne cet article), ce serait simple. Premièrement, vous devez vous assurer que, en plus du style que nous venons d'ajouter à notre CSS pour la valeur de classe "left", nous en avons également un pour l'alignement à droite. Cela ressemblerait à ceci:
.droite {
Flotter à droite;
remplissage: 0 0 20px 20px;
}
Vous pouvez voir que ceci est presque identique au premier CSS que nous avons écrit. La seule différence est la valeur que nous utilisons pour la propriété "float" et les valeurs de remplissage que nous utilisons (en ajoutant du côté gauche de notre image au lieu du côté droit).
-
Enfin, vous modifieriez la valeur de la classe de l'image de "gauche" à "droite" dans votre code HTML:
-
Examinez maintenant votre page dans le navigateur et votre image devrait être alignée à droite avec un texte parfaitement enveloppant. Nous avons tendance à ajouter ces deux styles, "à gauche" et "à droite" à toutes nos feuilles de style afin que nous puissions utiliser ces styles visuels au besoin lorsque nous créons des pages Web. Ces deux styles deviennent de jolies fonctionnalités réutilisables vers lesquelles nous pouvons nous tourner chaque fois que nous devons styliser des images entourées de texte.
Utilisation de HTML au lieu de CSS (et pourquoi vous ne devriez pas le faire)
Même s'il est possible d'encadrer le texte autour d'une image avec HTML, les normes Web dictent que CSS (et les étapes présentées ci-dessus) est la voie à suivre afin que nous puissions maintenir une séparation entre structure (HTML) et style (CSS). Ceci est particulièrement important lorsque vous considérez que, pour certains périphériques et dispositions, ce texte Peut-être pas besoin de circuler autour de l'image. Pour les écrans plus petits, la mise en page d'un site Web réactif peut nécessiter que le texte s'aligne effectivement sous l'image et que celle-ci s'étire sur toute la largeur de l'écran. Cela se fait facilement avec des requêtes multimédia si vos styles sont séparés de votre balise HTML.Dans le monde multi-appareils actuel, où les images et le texte apparaîtront différemment pour différents visiteurs et sur différents écrans, cette séparation est essentielle au succès à long terme et à la gestion d'une page Web.
