2.4.1. L'attribut title

Nom Syntaxe Validité Effet
Commentaire title="texte" tous les éléments de formatage Le texte devrait apparaître dans une info-bulle quand l'utilisateur passe avec la souris dans l'espace d'affichage de l'élément HTML .

Le code:
Hello <span title="sacrée boîte!"> LHCE </span> !
produit l'effet suivant:

Hello LHCE !

Passez avec votre souris sur le mot LHCE!

2.4.2. L'attribut style

Nom Syntaxe Validité Effet
Style style="propriété1:valeur1;propriété2:valeur2;propriété3:valeur3;....." tous les éléments de formatage Détermine l'aspect de l'élément dans la fenêtre du navigateur

→Essayez le code:

<span style="color:green;font-size:50px;font-weight:bold;">Ceci</span> est un texte avec style <span style="color:red;font-size:250px;font-weight:normal;">imposé</span>


Interprétation du premier attribut:

attribut propriété1 valeur1 propriété2 valeur2 propriété3 valeur3
style color green font-size 50px font-weight bold

Les propriétés en rapport avec la couleur (color)

Vous trouverez un →détail de ces propriétés dans les →références

Les propriétés en rapport avec la police (font)

Vous trouverez un →détail de ces propriétés dans les →références

2.4.3 Exercices

Dans les exercices suivants, on vous demande de trouver le code qui produit sur l'écran le résultat demandé. Si vous introduisez un texte entre plusieurs balises, imbriquez-les de manière logique, comme vous faites par exemple pour les accolades, crochets et parenthèses en mathématiques.
(Par exemple pour produire sur l'écran Hell o , écrivez le code Hell<big><u>o</u></big> et non Hell<big><u>o</big></u>

Copiez (Sélection, CTRL C, éditeur, ouvrir page vierge, CTRL V) le texte suivant dans votre éditeur et introduisez votre code entre les balises <body> et </body>, puis essayez-le dans Firefox et I.E.. N'oubliez pas d'enregistrer votre code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.74em; color:#555555; background-color:#FFFFFF; text-align:left; line-height:20px; text-align:left; }
</style>
</head>
<body>



</body>
</html>

Trouvez le code pour produire exactement ce résultat (espaces respectés, sans les lettres a, b etc..):


  1. couleur d'arrière plan de code hexadécimal #10A060

    ligne de séparation de couleur "navy"
    couleur de la police rgb (255,0,136)

  2. base verteexposant rouge en caractères gras

  3. en retrait de 60 pixels et souligné

    hauteur: 230% de la taille de police normale

2.4.4 Remarque

En utilisant l'attribut style de ce chapitre, vous aurez remarqué que vous pouvez vous passer entièrement du marquage physique (balises <i><b><ul>...). Bien que cela puisse vous paraître moins simple, faites-le dorénavant!

2.4.5 Exercice

Voici un →poème bien connu de Ronsart. Donnez-lui une forme aussi agréable que possible à l'aide de l'attribut <style>.