Médiaforma

All posts tagged body

Par défaut, l’arrière-plan des pages Web est uniforme et de couleur blanche. Pour choisir une autre couleur uniforme, il vous suffit de définir l’attribut bgcolor dans la balise <body> :

<body bgcolor=”#RRVVBB”>

RR, VV et BB représentent les composantes rouge, vert et bleu de la couleur, codées en hexadécimal. Pour vous aider à obtenir ces trois composantes, je vous suggère de vous connecter sur la page http://www.raider-knight.com/generateur-couleur.php. Sélectionnez une couleur avec le curseur vertical et cliquez dans la palette.

Il ne vous reste plus qu’à copier/coller le code hexadécimal obtenu  dans l’attribut bgcolor de la balise <body> :


Que diriez-vous d’insérer une image d’arrière-plan sur une page ? Pour cela, il suffit d’insérer l’attribut background dans la balise <body> et de préciser le chemin de l’image gif, jpg ou png à utiliser.

Ici, l’image se trouve dans le même dossier que le document et a pour nom chien.gif. Comme vous le voyez, elle est répétée autant de fois que nécessaire pour couvrir toute la surface occupée par la fenêtre. Ce fonctionnement est très pratique si vous utilisez une texture d’arrière-plan. De très nombreuses textures sont librement téléchargeables sur le Web. Ici, par exemple, nous allons utiliser une des textures proposées sur le site http://www.vracimages.com. A titre d’exemple, nous allons utiliser une texture Bois. Un clic droit sur l’une des textures proposées et nous sauvegardons la texture sur le disque dur de l’ordinateur, sous le nom bois.jpg. Il suffit maintenant de remplacer chien.gif par bois.jpg dans l’attribut background de la balise <body>. La page est rafraîchie et la nouvelle texture occupe tout l’arrière-plan.


Dans la rubrique précédente, vous avez vu que l’arrière-plan des pages était de couleur blanche par défaut, mais qu’il était possible de modifier cette couleur en utilisant l’attribut bgcolor de la balise <body>. D’autres attributs de la balise <body> permettent de modifier la couleur par défaut du texte, des liens non visités et des liens visités. Vous utiliserez l’attribut :

  • text pour modifier la couleur par défaut du texte ;
  • link pour modifier la couleur par défaut des liens non visités ;
  • vlink pour modifier la couleur par défaut des liens visités.

Dans cet exemple, les couleurs par défaut sont les suivantes : bleu pour le texte, rouge pour les liens non visités et vert pour les liens visités.


Voici la structure minimale d’une page HTML 5 :

<!DOCTYPE html>
<html>
     <head>
     </head>
     <body>
     </body>
</html>

La balise <!DOCTYPE> doit toujours apparaître en premier. Elle indique au navigateur les règles d’écriture utilisées dans le code. Cette première ligne indique que la version 5 du langage HTML sera utilisée. Dans les versions précédentes, la balise <!DOCTYPE> était bien plus complexe. Mais cela fait partie du passé, et vous utiliserez uniquement cette version simplifiée.

La balise <html> matérialise le début du document HTML, et la balise </html> la fin de ce document.

Les balises <head> et </head> délimitent l’en-tête du document. Vous verrez ce qui peut être placé entre ces deux balises dans une autre rubrique.

Enfin, les balises <body> et </body> délimitent le corps du document. Tout ce qui est écrit entre ces deux balises apparaîtra dans le navigateur Web.

Lancez la commande Enregistrer dans le menu Fichier, sélectionnez Hyper Text Markup Language dans la liste Type, donnez le nom squelette à la page, choisissez le dossier de stockage du document et cliquez sur Enregistrer.

Déroulez le menu Exécution et lancez la commande :

  • Launch in IE pour ouvrir ce document dans Internet Explorer ;
  • Launch in Chrome pour ouvrir ce document dans Google Chrome ;
  • Launch in Firefox pour ouvrir ce document dans Mozilla Firefox ;
  • Launch in Safari pour ouvrir ce document dans Safari.

Bien entendu, ces commandes supposent que les navigateurs correspondants sont installés sur votre ordinateur. Dans le cas contraire, elles n’auront aucun effet.

Comme vous pouvez le voir, rien ne s’affiche.

Entrez du texte entre les balises <body> et </body>. Ici par exemple, nous entrons le texte “Bonjour“. Sauvegardez le document avec la commande Enregistrer dans le menu Fichier ou avec le raccourci clavier Ctrl+S.

Remarque

Si vous n’avez pas l’habitude des raccourcis clavier, sachez le raccourci Ctrl+S est obtenu en maintenant enfoncée la touche Ctrl, en appuyant puis en relâchant la touche S, puis en relâchant la touche Ctrl. Cela a l’air compliqué, mais une fois que le mécanisme est compris, il est difficile de s’en passer !

Lancez à nouveau la commande Launch in IE dans le menu Exécuter. Cette fois-ci, le texte “Bonjour” est affiché dans le navigateur.

Bravo, vous venez de créer votre premier document HTML5 !


Etape 5 – Mise en forme de la page

Dans cette étape, nous allons ajouter :

1)      Un gradient en arrière-plan de la page ;

2)      Un espace à droite de chaque carte pour obtenir un écartement régulier, horizontalement et verticalement ;

3)      Un titre au-dessus des cartes.

Le gradient est défini avec la propriété CSS3 linear-gradient. Cette propriété n’étant pas encore finalisée, il est nécessaire d’utiliser les préfixes –ms (pour Internet Explorer), -moz (pour Firefox), -o (pour Opera) et –webkit (pour Chrome et les autres navigateurs WebKit).

La propriété linear-gradient admet trois arguments :

  • Le point de départ du gradient ;
  • La couleur de départ ;
  • La couleur de fin.

Pour que l’arrière-plan utilise la propriété linear-gradient, il suffit de l’affecter à la propriété background-image de l’élément body :

body {

background-image: -ms-linear-gradient(left, #FFFFFF, #00A3EF);

background-image: -moz-linear-gradient(left, #FFFFFF, #00A3EF);

background-image: -o-linear-gradient(left, #FFFFFF, #00A3EF);

background-image: -webkit-linear-gradient(left, #FFFFFF, #00A3EF);

}

Voyons maintenant comment ajouter un espace à droite de chaque image. Pour cela, il suffit de définir la propriété margin-right des éléments img :

img {

margin-right: 5px;

}

Enfin, pour ajouter un titre au-dessus des cartes, vous insèrerez une balise <h1> juste après la balise <body> :

<body>

<h1>Memory – Evaluez votre mémoire</h1>

</body>