<< Retour au sommaire

 

HTML 5, Les flottants

 

 

Table des matières

1.      Introduction ;

2.      Des colonnes flottantes ;

3.      Une image flottante à gauche ;

4.      Une image flottante à droite.

 

Introduction?

 

Dans l’emploi ordinaire du HTML, les différents éléments d’une page s’agencent naturellement d’une certaine façon, et il est très fastidieux, voir impossible, sans le recours de la technique dite « flottante », d’afficher certains éléments sur un même plan horizontal, par exemple plusieurs paragraphes, ou encore, un texte à côté d’une image.

Pour commencer, il est capital de se souvenir que les différents blocs d’une page s’enchaînent toujours verticalement, dans la mesure où chaque bloc déclenche systématiquement un saut de ligne à sa fermeture.

Pour mémoire, voici la liste des balises de type « block » que nous avons étudiées dans le manuel du HTML 5 :

<h1>, titre de niveau 1 ;

<h2>, titre de niveau 2 ;

<h3>, titre de niveau 3 ;

<h4>, titre de niveau 4 ;

<h5>, titre de niveau 5 ;

<h6>, titre de niveau 6 ;

<hr />, trait horizontal ;

<p>, paragraphe ;

<table>, tableau ;

<blockquote>, citation longue ;

<adress>, pour un bloc adresse ;

<div>, balise universelle.

Et aussi, les balises permettant de structurer une page :

<header>, l’en-tête d’une page structurée, la bannière ;

<nav>, l’espace de navigation de la page, contenant généralement des liens de navigation ;

<section>, le corps de la page, son contenu à proprement dire ;

<aside>, un commentaire sur la section ;

<article>, les différents articles de la section ;

<footer>, le pied de page.

 

Les balises de type « inline » quant à elles ne déclenchent jamais de passage à la ligne, elles doivent généralement être employées à l’intérieur d’un bloc.

Liste des balises « inline » découvertes dans le manuel du HTML 5 de ce site :

<br />, saut de ligne ;

<em>, mise en italique ;

<strong>, mise en gras ;

<mark>, texte sélectionné ;

<sup>, mise en exposant ;

<sub>, mise en indice ;

<q>, une citation courte ;

<ins>, un texte inséré ;

<del>, un texte supprimé ;

<dfn>, une définition ;

<font>, texte en couleur ;

<ul>, liste non ordonnée, liste à puces ;

<ol>, liste ordonnée, liste numérotée ;

<dl>, liste de définition dite également « liste descriptive » ;

<a>, le lien hypertexte ;

<img>, l’image ;

<figure>, une légende pour une image ou pour la balise audio ;

<abbr>, une abréviation ;

<acronym>, un acronyme ;

<audio>, affichage d’un média audio selon la technologie du streaming ;

Et aussi, les différents champs de formulaire :

<form>, le bloc formulaire ;

<input>, la plupart des champs de formulaire ;

<textarea>, un champ de type zone d’édition multi lignes ;

<select>, le champ de type « zone de liste déroulante » ;

<fieldset>, regroupement de champs de formulaire par catégorie.

 

Ainsi donc, grâce au CSS, vous avez la possibilité de contrarier l’agencement naturel des éléments listés ci-avant en recourant à différentes techniques selon les différents cas de figure.

 


 

Des colonnes flottantes

 

Dans ce chapitre, nous allons faire flotter 3 colonnes, et pour réussir ce tour de passe-passe, voici la technique que je vous propose :

·        Dans le code CSS, nous allons définir 3 classes, « colonne1 », « colonne2 » et « colonn3 ».

·        Pour chacune des définitions, nous allons indiquer que l’élément doit être flottant à gauche :

float: left;

·        Mais aussi, nous allons indiquer la largeur de l’élément en unité relative, chacune des colonnes devant occuper 30% de la page :

width: 30%;

·        Nous allons également définir une classe permettant d’indiquer la fin des flottants, le bloc concerné par cette classe s’affichera à la suite des colonnes flottantes, en bas. Le nom de la classe ? « normal », voici sa propriété et sa valeur :

clear: both;

·        Les 4 classes seront appliquées par l’intermédiaire de la balise universelle <div> dans lesquelles nous intégrerons les paragraphes.

 

Voici le code de la page :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>3 colonnes flottantes</title>

<style>

/* Bloc de définition CSS */

.colonne1 /* Définition de la première colonne */

{

float: left; /* Flotte à gauche */

width: 30%; /* Réserve un espace de 30% de large dans la fenêtre du navigateur */

border: 2px outset /* Bordure d'une épaisseur de 2 pixels */

}

.colonne2 /* Définition de la deuxième colonne */

{

margin-left: 5px; /* Marge extérieure gauche d'une épaisseur de 5 pixels */

float: left; /* Flotte à gauche */

width: 30%; /* Réserve un espace de 30% de large dans la fenêtre du navigateur */

border: 2px outset /* Bordure d'une épaisseur de 2 pixels */

}

.colonne3 /* Définition de la troisième colonne */

{

margin-left: 5px; /* Margin extérieure gauche d'une épaisseur de 5 pixels */

float: left; /* Flotte à gauche */

width: 30%; /* Réserve un espace de 30% de large dans la fenêtre du navigateur */

border: 2px outset /* Bordure d'une épaisseur de 2 pixels */

}

.normal /* Définition de la classe "normal" pour stoper les flottants */

{

clear: both

}

p

{

padding: 10px; /* Définit une marge intérieure de 10 pixels */

border-right: 2px /* Définit une bordure droite de 2 pixels d'épaisseur */

}

</style>

</head>

<body>

<h1>Quelques adaptations</h1>

<!-- Affichage de la première colonne -->

<div class="colonne1">

<p>

JAWS est une revue d'écran développée par Freedom Scientific, destinée aux utilisateurs non-voyants.

<br />

 Payante, il existe différentes versions selon le type d'usage, familial, professionnel, multipostes etc.

<br />

D'ailleurs, si vous n'achetez pas de licence, JAWS fonctionnera en mode d'évaluation, vous devrez redémarrer la machine toutes les 40 minutes !

<br />

Je vous propose de vous rendre sur le site, c'est simple, vous devez cliquer ici :

<br />

<a href="http://www.freedomsci.de/index.htm">Le site de Freedom Scientific</a>

</p>

</div>

<!-- Affichage de la deuxième colonne -->

<div class="colonne2">

<p>

NVDA est une revue d'écran libre et gratuite destinée aux utilisateurs non-voyants.

<br />

Tout comme JAWS, vous avez la possibilité de gérer des synthèses vocales additionnelles telles que Julie, Bruno, Virginie etc.

<br />

Pour en savoir davantage, rendez-vous sur le site :

<br />

<a href="http://www.nvda-fr.org">NVDA site francophone</a>

</p>

</div>

<!-- Affichage de la troisième colonne -->

<div class="colonne3">

<p>

ZoomText est un agrandisseur d'écran destiné aux utilisateurs malvoyants.

<br />

Développé par "ai squared - making accessibility simple", il existe 2 versions :

<br />

<ol>

<li>

ZoomText niveau 1, version uniquement orientée sur l'agrandissement.

</li>

<li>

ZoomText niveau 2, version plus complète intégrant une synthèse vocale.

</li>

</ol>

<br />

Pour en savoir davantage sur ZoomText ?

<br />

<a href="ai squared - making accessibility simple">Rendez-vous sur le site officiel</a>

<br />

<em>Bonne visite !</em>

</p>

</div>

<p class="normal">

Alors, ça marche ?

</p>

</body>

</html>

 

Tester la page >>

 


 

Une image flottante à gauche

 

Qu’est-ce qu’une image flottante ?

·        C’est la technique permettant d’afficher un paragraphe contenant du texte à gauche ou à droite d’une image.

 

Le principe est relativement simple, on encapsule l’image dans un bloc <div> dont la propriété « float » rend flottant, et dans la page, le paragraphe suivant est automatiquement placé à gauche ou à droite de l’image selon si la valeur de la propriété « float » est « left », pour gauche, «ou right », pour droite ». Dans le cas où la valeur est « left », l’image sera à gauche et le paragraphe qui suit à droite, et si la valeur est « right », l’image flottera à droite, quant au paragraphe qui suit dans la page HTML, il sera à gauche !

Il vous suffit ensuite d’appliquer la propriété « clear : both » au bloc qui viendra retrouver une place normale en-dessous.

 

Dans l’exemple qui suit, l’image « ordinateur.jpg » flottera à gauche, un paragraphe sera affiché à droite sur le même plan horizontal, et enfin, un autre paragraphe réinitialisera l’agencement classique des blocs.

 

Le code de la page :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Faire flotter une image à gauche</title>

<style>

/*- bloc CSS */

.gauche /* classe "gauche pour l'image flottante */

{

float: left; /* Faire flotter à gauche */

width: 200px /* Réserver une largeur de 200 pixels pour l'image ordinateur.jpg */

}

.normal /* Classe "normal" permettant de définir le premier bloc non flottant */

{

clear: both

}

p

{

padding-left: 25px /* Définir une marge intérieure gauche de 25 pixels */

}

</style>

</head>

<body>

<h1>Le format MP3</h1>

<!-- Affichage de l'image flottante à gauche -->

<div class="gauche">

<img src="ordinateur.jpg" alt="Un ordinateur" />

</div>

<!-- Affichage du paragraphe à droite de l'image -->

<p>

Le MP3 (« MPEG Audio layer 3 ») est un format de

Compression de données audio par destruction de données, développé par l'organisation de standardisation internationale (ISO). Ce format permet de compresser à un taux

de 1:12 les formats audio habituels (WAV ou CD audio).

<br />

Il permet de faire tenir l'équivalent en fichiers de douze albums de musique sur un seul CD-ROM. De plus, le format mp3 n'altère que faiblement le son pour l'oreille humaine.

<br />

La compression MPEG layer 3 consiste à retirer des données audio, les fréquences inaudibles pour l'auditeur moyen dans des conditions habituelles

d'écoute. La compression vise donc à analyser les composantes spectrométriques d'un signal audio, et de leur appliquer un modèle psychoacoustique pour

ne conserver que les sons « audibles ». L'oreille humaine est capable de discerner, en moyenne, des sons entre 0.02 kHz et 20 kHz, sachant que sa sensibilité

est maximale pour des fréquences entre 2 et 5 kHz, (la voix humaine est entre 0.5 et 2 kHz), suivant une courbe donnée par la loi de Fletcher et Munson.

<br />

La compression consiste à déterminer les sons que nous n'entendons pas et à les supprimer, il s'agit donc d'une compression destructive, c'est-à-dire avec

une perte d'information.

</p>

<!-- Affichage du paragraphe qui met un terme aux éléments flottants -->

<p class="normal">

Avez-vous compris ?

</p>

</body>

</html>

 

Tester la page >>

 


 

Une image flottante à droite

 

Ici, le principe est exactement le même que dans le chapitre précédent, excepté cette fois-ci que la valeur de la propriété « float » n’est pas « left » mais « right ».

Ainsi donc, l’image ne flottera plus à gauche, mais à droite, et le paragraphe qui suit l’affichage de l’image sera affiché à gauche de l’image.

 

Le code de la page :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Faire flotter une image à droite</title>

<style>

/* bloc CSS */

.droite /* classe "droite pour l'image flottante */

{

float: right; /* Faire flotter à droite */

width: 200px /* Réserver une largeur de 200 pixels pour l'image ordinateur.jpg */

}

.normal /* Classe "normal" permettant de définir le premier bloc non flottant */

{

clear: both

}

p

{

padding-right: 25px /* Définir une marge intérieure droite de 25 pixels */

}

</style>

</head>

<body>

<h1>Le format MP3</h1>

<!-- Affichage de l'image flottante à droite -->

<div class="droite">

<img src="ordinateur.jpg" alt="Un ordinateur" />

</div>

<!-- Affichage du paragraphe à gauche de l'image -->

<p>

Le MP3 (« MPEG Audio layer 3 ») est un format de

Compression de données audio par destruction de données, développé par l'organisation de standardisation internationale (ISO). Ce format permet de compresser à un taux

de 1:12 les formats audio habituels (WAV ou CD audio).

<br />

Il permet de faire tenir l'équivalent en fichiers de douze albums de musique sur un seul CD-ROM. De plus, le format mp3 n'altère que faiblement le son pour l'oreille humaine.

<br />

La compression MPEG layer 3 consiste à retirer des données audio, les fréquences inaudibles pour l'auditeur moyen dans des conditions habituelles

d'écoute. La compression vise donc à analyser les composantes spectrométriques d'un signal audio, et de leur appliquer un modèle psychoacoustique pour

ne conserver que les sons « audibles ». L'oreille humaine est capable de discerner, en moyenne, des sons entre 0.02 kHz et 20 kHz, sachant que sa sensibilité

est maximale pour des fréquences entre 2 et 5 kHz, (la voix humaine est entre 0.5 et 2 kHz), suivant une courbe donnée par la loi de Fletcher et Munson.

<br />

 

La compression consiste à déterminer les sons que nous n'entendons pas et à les supprimer, il s'agit donc d'une compression destructive, c'est-à-dire avec

une perte d'information.

</p>

<!-- Affichage du paragraphe qui met un terme aux éléments flottants -->

<p class="normal">

Avez-vous compris ?

</p>

</body>

</html>

 

Tester la page >>

Philippe BOULANGER