HTML 5 - 4.5 : Les images et tableaux de disposition

Le positionnement des images dans un layout se gère avec la propriété float. La valeur float: right; place une image à droite et permet au texte de s'enrouler autour ; float: left; fait le même à gauche. Exemple : un logo avec float: right; s'aligne en haut à droite de la page, tandis que le contenu remplit l'espace à sa gauche. Pour empêcher le chevauchement, on ajoute une margin (par exemple margin-left: 5px;). La propriété clear arrête le flottement : clear: both; sur un élément force le retour à la ligne complète, utile pour séparer les articles.

Pour les images au sein d'articles, on les floate à gauche et on ajoute des marges pour les éloigner du texte. Les feuilles de style externes (fichiers .css liés via <link rel="stylesheet" href="style.css">) permettent de réutiliser les mêmes styles sur plusieurs pages HTML. Le child selector (body > header) ne stylise que le direct enfant, utile pour éviter les conflits quand une structure imbriquée diffère d'une page à l'autre.

Pour les tableaux, width: 100%; remplit le conteneur. border-collapse: collapse; fusionne les bordures des cellules adjacentes. Ajouter text-align: center; aux cellules d'en-tête (th) et un padding (par exemple 5px) crée un tableau lisible et esthétique. Combining background-color sur th (par exemple #FF9900; orange) améliore le contraste.

En résumé

Cette leçon couvre le positionnement des images en HTML5 à l'aide des propriétés CSS de disposition. Elle explique comment utiliser les propriétés `float`, `clear` et les marges pour déplacer les images (logos, images d'articles) et créer une mise en page équilibrée où le texte s'écoule autour des images. La leçon aborde également la création d'une feuille de style CSS externe pour appliquer les styles à plusieurs fichiers HTML et l'utilisation des sélecteurs CSS (comme le child selector) pour cibler précisément les éléments.

Points clés

Utiliser `float: right` ou `float: left` pour positionner les images et laisser le texte s'écouler autour d'elles
Appliquer des marges (`margin-right`, `margin-bottom`) aux images pour ajouter de l'espacement et améliorer la présentation
Utiliser la propriété `clear` pour annuler le flottement et éviter les décalages de contenu lors du redimensionnement
Ajouter des bordures aux images avec la propriété `border` pour améliorer l'apparence visuelle
Créer une feuille de style CSS externe (`.css`) et la relier aux fichiers HTML avec la balise `<link rel="stylesheet">`
Utiliser les sélecteurs CSS avancés (comme le child selector avec `>`) pour appliquer des styles à des éléments spécifiques

Questions fréquentes

Comment déplacer une image vers la droite et laisser le texte s'enrouler autour ?

Utilisez la propriété CSS `float: right` sur l'image. Vous pouvez également ajouter des marges avec `margin-right` et `margin-bottom` pour créer de l'espace entre l'image et le texte. Si vous avez plusieurs images, utilisez un sélecteur approprié comme `article img { float: left }` pour cibler uniquement les images des articles.

Pourquoi le contenu se décale-t-il quand j'agrandis mon image ?

Cela se produit parce que le flottement affecte le flux du contenu suivant. Pour résoudre ce problème, utilisez la propriété `clear: both` sur l'élément suivant (par exemple, sur la balise `<article>` ou un conteneur) pour annuler le flottement et forcer le contenu à revenir à la normale.

Comment appliquer le même style CSS à plusieurs fichiers HTML ?

Créez une feuille de style externe (fichier `.css`) contenant tout votre CSS. Ensuite, liez cette feuille à chaque fichier HTML en ajoutant la balise `<link rel="stylesheet" href="style.css">` dans la section `<head>` de chaque page. Cela centralise vos styles et facilite leur maintenance.