Mise en forme

Nous allons maintenant enrichir la présentation de notre page. Pour cela, nous allons utiliser la notion de styles sur laquelle nous reviendrons dans les prochains TDs.

Placez-vous dans l'en-tête du document (balise head, et ajoutez la balise style (Balises/Divers/Styles:).

Couleurs du fond de page ou des caractères

Pour modifier la couleur de fond, la technique est la suivante : se placer entre les balises style(pensez à enlever les balises de commentaires (< !-- et -->), puis dans le menu Dialogue/CSS/Créer un style, choisir body comme sélecteur et background-color comme propriété. Repérez la zone de saisie valeur ou passer par le bouton couleur pour avoir plus de choix. Chaque couleur est définie par un numéro (par exemple #A412BC) ; c'est ce numéro qui est noté dans le fichier html de la page ou bien par un nom.

Observez le code HTML : La nouvelle balise style dans l'entête du document encadre les codes CSS indiquant la mise en forme que vous avez choisie :

<style type="text/css">...</style>

L'indication que vous voyez dans le document entre les balises STYLE s'appelle une "RÈGLE CSS".

Opérez encore comme ci-dessus pour changer la couleur des caractères de la page (propriété color). Utilisez la roue de couleurs ; repérez la modification CSS dans le document.

Image du fond de page

On peut mettre une image en fond de page. Récupérez l'image fond.png et placez-là dans le même dossier que votre document html.

Exercice : saurez-vous trouver les caractéristiques (définition, format, poids) des images du dossier ? (sur mac, sous Finder, utilisez le menu contextuel "lire les informations").

Opérez encore comme ci-dessus pour ajouter une image de fond au corps de la page (sélecteur body, propriété background-image, valeur url(fond.png)).

Lorsque vous aurez choisi l'image de fond, elle sera diposée en "pavage" c'est à dire qu'elle est reproduite horizontalement et verticalement de sorte que l'écran soit totalement recouvert.

Testez les différentes options de la propriété background-repeat.

Centrage d'un titre

Vous remarquerez que le titre de notre exemple est balisé par h1 mais il n'est pas centré dans la page, il est aligné à gauche ; comment le centrer ?

Dans d'anciennes pages html, on trouve une façon de centrer : un attribut (align) est ajouté à la balise <h1>, et il a la valeur : center. Essayez en saisissant vous même la modification vous constaterez que le contenu de H1 est maintenant centré :

< h1 align="center" > titre....</ h1 >

Cette méthode de mise en forme est considérée aujourd'hui comme obsolète; ce n'est pas du CSS.

Pour centrer du texte, il convient de créer une nouvelle règle CSS (ici pour le sélecteur h1). La propriété à modifier est text-align. Effectuez la modification.

Enfin remarquez que l'onglet standard de la barre d'outils HTML contient un bouton centré; nous éviterons d'utiliser ce bouton.

Modifier une sélection de texte

Si nous devons modifier l'apprence d'une partie seulement d'un paragraphe, il faut d'abord baliser cette partie : les balises STRONG, EM, Q et SPAN peuvent être utilisées.

Les deux premières (strong et em) sont considérées comme des balises indiquant une insistance plus ou moins forte sur le texte encadré, la troisième (q) est destinée à encadrer une citation courte, la dernière (span) n'a pas de sémantique particulière ; on appelle cette balise une balise générique : on l'utilise lorsqu'aucune des balises sémantiques ne convient.

Une fois le texte correctement balisé, nous pourrons définir son apparence (en gras, en couleur, en gros, ...) ; nous verrons comment au prochain TD.

Reprenez votre CV en essayant de le réaliser avec Bluefish en produisant un code HTML "propre".