Entrez dans le Web !

Présentation d'une page Web

Comme nous l'avons vu dans le paragraphe précédent, HTML est un langage de structuration de l'information et non un langage de présentation. A l'origine, le langage HTML a été conçu pour structurer un document (titre, citation, paragraphe, tableau,...) en qualifiant la nature du contenu et non pour présenter le texte (gras, italique, retrait, taille,...). Dès lors, quand le navigateur affiche votre HTML, il se sert de son propre style intégré pour présenter cette structure. Si vous désirez apporter une présentation personnalisée au contenu de votre page web, il est nécessaire de vous pencher sur un autre langage: CSS.

La séparation entre la structuration d'un document avec HTML et sa présentation avec CSS engendre de gros avantages:

• La structure du document et sa présentation peuvent être gérées dans des fichiers séparés;
• La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace;
• Dans le cas d'un site web, la présentation est uniformisée: les documents HTML font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel;
• Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran. Un exemple frappant de mise en pratique de cette souplesse d'emploi est le site CSSZenGarden;
• Le code HTML est considérablement réduit en taille et en complexité puisqu'il ne contient plus de balises ni d'attributs de présentation.

L'un des moyens d'appliquer du style à une page web consiste à ajouter, dans l'en-tête de son code HTML, l'élément <style> accompagné de l'attribut type affecté de la valeur text/css. Une fois cet élément placé, il ne vous reste plus qu'à ajouter des règles CSS pour donner un peu d'allure à la page comme le propose l'exemple suivant:

Comme nous pouvons le constater avec l'exemple ci-dessus, la syntaxe CSS est différente de celle du HTML. Chaque feuille de style CSS décrit une suite de règles constitué d'un sélecteur et d'une déclaration.

Le sélecteur a pour tâche d'identifier les éléments HTML qui seront affectés par le style défini alors que la déclaration est une suite de paires propriété : valeur séparées par un point virgule, le tout placé entre accolades. Par exemple, pour centrer et colorier en rouge tous les titres <h2> d'une page web, nous écrirons:

h2
    {
        text-align : center;
        color : red;
    }

Notons qu'il est possible de modifier le style d'un seul élément HTML à l'aide de l'attribut style placé dans la balise ouvrante de l'élément. Par exemple,

<h2 style="text-align:center;color:red">Ceci est un titre mis en forme.</h2>

permet de déclarer que cet élément de titre sera centré et colorié en rouge. Cette solution présente l'inconvénient majeur de mêler des informations sur la présentation d'un document et la structure de ce dernier, ce qui compliquera la mise à jour du code dans le cas d'une refonte de l'apparence graphique. L'utilisation de cet attribut est donc fortement déconseillé !

Finalement sachez qu'il est possible d'insérer des commentaires dans une feuille de style CSS, commentaires qui ne seront pas interprétés par le navigateur. Si vous souhaitez inclure un commentaire, il suffit alors de procéder comme suit:

/* Ceci est un commentaire en CSS */