Personnaliser une page de contenu grâce au HTML et à la CSS

Une fois que vous avez créé une page simple à l’aide des modèles prédéfinis, vous pouvez aller plus loin. Vous pouvez, par exemple, ajouter un nouveau bloc en dessous ou un grand en-tête centré en haut de la page.

Le mode expert vous permet d’éditer directement le langage sous-jacent de la page, donc les codes HTML et CSS.

Le HTML et la CSS sont la base de toutes les pages Web : il est possible de faire des choses très complexes avec mais, au départ, ils sont conçus pour être explicites et faciles à utiliser. Après avoir pris vos marques, vous serez en mesure de faire des choses simples comme changer la disposition de votre page ou encore la taille de la police de votre texte.

Dans cet article, nous allons vous expliquer comment faire quelques changements de base sur un modèle de page. Nous n’avons pas pour objectif de vous enseigner tout ce qu’il y a à savoir sur le HTML et la CSS, car d’autres le font bien mieux que nous, mais nous vous proposons quelques exemples à partir desquels vous pourrez développer vos connaissances.

Commençons par créer une page sur la base du modèle “Main block + right column” (Bloc principal + colonne de droite), comme vu dans l’article Créer une page de contenu simple. Passons ensuite en mode expert grâce au lien dans le coin supérieur droit de l’interface. Vous voyez désormais deux onglets, “CSS” et “HTML”, qui contiennent le code de la page.

L’onglet CSS est vide pour le moment, car il n’y a pas de code CSS spécifique. En revanche le code HTML de la page est bien là :

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

Ajouter une ligne

Chaque tag <div> représente un bloc de la page ; la classe liée à chaque bloc définit son apparence, sa largeur par exemple.

Plus précisément :
  • <div class="container-fluid"> est un bloc entourant toute la page pour faire en sorte qu’elle occupe toute la largeur d’affichage disponible.

  • <div class="row"> représente une ligne qui contient d’autres blocs. En raisonnant en termes de “lignes”, nous nous assurons que les blocs ne se superposent pas si il y en a un plus grand que les autres.

  • <div class="col-md-8"> et <div class="col-md-4"> sont deux blocs qui contiennent le contenu “réel” (le texte par exemple). Le principe avec les classes col-md-8 et col-md-4 est de considérer chaque ligne comme une grille à 12 “cellules” ; les blocs de cette ligne ne peuvent pas dépasser un total de 12 cellules et chaque bloc utilise col-md-X, où X correspond au nombre de cellules que le bloc occupera. Ici, nous voulions qu’un bloc occupe les deux tiers de l’espace et qu’un autre bloc occupe le tiers restant. Nous avons donc divisé les 12 cellules disponibles en 8 et 4. L’intégralité de cette logique (nommée “logique des grilles”) est détaillée dans l’article Concevoir un portail responsive.

  • <div class="ods-box"> crée simplement un bloc visuel avec des bordures et un fond, plus adapté à contenir du texte.

Ajoutons désormais une nouvelle ligne avec trois blocs, qui occupent chacun un tiers de l’espace. En suivant la même logique que précédemment, nous ajoutons une nouvelle ligne puis trois blocs occupant 4 cellules chacun.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
    <div class="row">
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

Voici un aperçu du résultat :

../../_images/new-row-preview--fr.png

Configurer un style simple

Le code CSS peut être utilisé pour modifier le mode d’affichage de votre contenu : vous pouvez changer la taille de la police, ajouter des fonds colorés ou des bordures ou encore changer les couleurs.

Il y a plusieurs manières d’appliquer des “règles” CSS aux éléments de votre page, mais il est conseillé de toujours utiliser des “classes” : en ajoutant class=”myclass” à un élément de votre page, vous y attachez une “classe”. Cela vous permettra par la suite d’écrire des règles pour cette classe dans votre style CSS. Vous pouvez ainsi appliquer la même classe à plusieurs éléments, et même si vous modifiez votre page les règles continueront de s’appliquer aux éléments.

Imaginons que nous voulons faire ressortir un texte en augmentant la taille de sa police. Vous devez d’abord ajouter une classe à l’élément qui contient le texte. Dans notre cas, il s’agit de “Hello world!” :

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="ods-box">
                <span class="larger-text">Hello world!</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ods-box"></div>
        </div>
    </div>
</div>

Il nous suffit désormais d’ajouter une règle dans le code CSS, indiquant que la classe “larger-text” doit avoir une taille de police supérieure :

.larger-text {
    font-size: 24px;
}

Il existe de nombreuses règles CSS que vous pouvez ajouter à vos éléments.