Sur cette page, nous verrons à peu près la même chose que ce que nous avons déjà vu en apportant quelques modifications notoires. Nous allons voir comment mettre du texte (du vrai) et naviguer entre les pages d'un site. Pour l'exemple, nous allons nous contenter de cinq pages sur lesquelles nous placerons un bouton pour avancer et un autre bouton pour reculer. Entre ces deux boutons de navigation nous mettrons la photo d'un animal et sous la photo nous placerons du texte.
Le but de cette page n'est pas de vous donner une leçon de présentation mais surtout de vous montrer quelques techniques intéressantes sur le positionnement des objets sur une page. Voyez le résultat recherché.
On commence par créer un dossier dans lequel on mettra les pages HTML ainsi que le fichier CSS qui les accompagne. A l'intérieur de ce dossier, on crée un nouveau dossier que l'on nomme img. A l'intérieur de ce dossier img vous enregistrez les cinq photos ci-dessous.
Images : 0201.jpg, 0202.jpg, 0203.jpg, 0204.jpg, 0205.jpg
Nous allons commencer par créer cinq pages HTML que nous nommerons respectivement 0201.html, 0202.html, 0203.html, 0204.html et 0205.html. Le 02 au début du nom c'est parce que nous sommes sur la deuxième page et les numéros suivants correspondent à l'ordre dans la présentation. Vous pouvez constater que les noms des pages et les noms des photos correspondent.
Le code ci-dessous correspond à la cinquième et dernière page de notre présentation (0205.html). Une fois, cette première page faite, il suffit, après l'avoir enregistrée, de l'enregistrer sous un nouveau nom et de modifier quelques petites choses.
<!DOCTYPE html> <html lang="fr"> <head> <link rel="stylesheet" type="text/css" href="page02.css" media="screen"> <title>Les z'animaux 5</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="author" content="Votre nom"> <meta name="generator" content="Notepad++"> <meta name="description" content="Une présentation de cinq animaux sauvages"> <meta http-equiv="refresh" content="30;url=0201.html"> </head> <body> <!-- L'image --> <img id="img" src="img/0205.jpg" width="720" height="540"> <!-- Les boutons --> <a href="0204.html" id="prec" class="btn">Précédent</a> <a href="0201.html" id="suiv" class="btn">Suivant</a> <!-- Le texte --> <div id="texte"> <p> Les rhinocéros sont les mammifères ... en voie de disparition. </p> <p> Les rhinocéros font localement ... les autres mammifères cornus. </p> </div> </body> </html>
On commence par l'entête. Entre les balises <head></head>, dans la ligne link rel= on indique le nom du fichier css que l'on va utiliser, page02.css. Le titre qui sera affiché dans l'onglet de la page (<title>) change à chaque page. J'ai mis "Les z'animaux" suivi du numéro de la page. La balise meta description n'est importante que si vous mettez vos pages en ligne. Certains robots s'en servent comme descriptif du site.
La dernière ligne meta refresh est sans doute la plus importante que vous mettiez vos images en ligne ou non. Dans cet exemple, j'ai mis un délai maximum de 30 secondes entre chaque image sans me soucier du texte. Il est évident que le rythme est trop rapide si je veux laisser le temps à celui qui regarde de voir l'image et lire le texte. J'ai mis volontairement un texte trop long pour pouvoir vous expliquer un truc technique que l'on verra un peu plus bas. L'idéal serait de mettre deux ou trois lignes de texte et de laisser le temps de regarder la photo, lire ce qui est écrit et, éventuellement de revenir sur la photo. Mieux vaut un temps trop long que trop court. Si votre visiteur trouve que c'est trop long, il a toujours la possibilité de cliquer sur le bouton Suivant.
Ceux qui ont eu la "chance" d'assister à des soirées diapos du style la communion du petit dernier en 200 photos et deux heures dans le noir savent que c'est franchement barbant. Internet nous offre la possibilité de faire bien mieux. On verra dans quelque temps comment faire des présentations avec un accompagnement sonore. Vous pouvez jouer sur la durée d'affichage de chaque image afin de donner du rythme à votre présentation.
Comme nous sommes sur la dernière image, nous faisons l'enchaînement vers la première page qui elle-même appelera la deuxième et ainsi de suite.
Nous arrivons à la page à proprement parler avec la balise <body></body>. Notre page est divisée en trois parties. Nous avons tout d'abord l'image, que nous nous contentons de centrer sur le haut de la page. Ensuite viennent les boutons de navigation ou liens. Pour terminer, nous avons le texte qui est le seul à défiler afin que l'image reste à l'écran en entier.
Vous connaissez déjà la balise <img>, on ne s'attarde pas dessus. Une nouveauté, la balise <a> ... </a> que l'on peut traduire par anchor ou ancre. C'est elle qui nous permet de créer des liens à travers une page, d'une page vers une autre page ou bien un point précis d'une autre page ou un autre site. Cette balise sert également pour le téléchargement de fichiers ou pour envoyer des courriels. En un mot, c'est une balise dont on ne peut se passer. Sa syntaxe de base est simple : <a href="adresse_ou_on veut_aller">Le_lien</a>. Le_lien peut être un ou plusieurs mots, une image, la cellule d'un tableau etc., c'est sur quoi va cliquer votre visiteur pour se déplacer dans votre site.
Les balises <a> de notre exemple contiennent chacune une valeur id qui va servir au positionnement et une valeur class qui elle va servir à définir les points communs aux deux liens. On verra ça quand on va écrire le fichier CSS.
On a vu la balise <div> sur la page précédente. Ici, on lui a donné l'identifiant texte afin de pouvoir la mettre en forme. C'est un conteneur donc on va lui donner un contenu à l'aide des balises <p> </p> qui délimitent un paragraphe. Bien que la balise de fin </p> soit quelques fois facultative, il vaut mieux la mettre systématiquement, cela met à l'abri des erreurs.
Vous avez enregistré vos cinq pages, vous allez les laisser tranquilles si ce n'est pour les tester de temps en temps. D'ailleurs, si vous testez vos pages maintenant, vous verrez deux choses. La première, et la plus importante, c'est de constater si votre présentation fonctionne bien. Si les pages se suivent dans le bon ordre c'est parfait. Vous pouvez tester les liens pour voir s'ils fonctionnent bien. Si tout est OK, la deuxième chose que vous constatez, c'est que c'est plutôt moche. Normal, lorsque le navigateur lit une page, il affiche les choses dans l'ordre dans lequel vous les avez inscrites. Nous avons déclaré l'image, le navigateur l'affiche là où il trouve de la place c'est à dire en haut et à gauche. Ensuite, nous avons mis deux liens. Le navigateur les a placés en bas à droite de l'image ce qui est leur place naturelle. La balise <div> ainsi que la balise <p> s'affichent par défaut au début de la ligne qui suit la dernière position lue par le navigateur.
C'est là qu'intervient le fichier page02.css. Je vous le présente petit bout par petit bout car il y a des choses nouvelles à dire. Ouvrez une feuille vierge et dans le menu Langage (Si vous utilisez Notepad++) cliquez sur la lettre C et, dans la liste, sélectionnez CSS. Lorsque vous saisirez votre texte, les propriétés qui correspondent à ce que vous tapez vous seront proposées. Un double clic sur la propriété désirée insérera son nom dans votre texte.
/* ---------------
Description de la présentation
semi-automatique de cinq animaux sauvages
--------------- */
/* Le corps du document */
body {
background-color: gainsboro;
font-family: Arial;
font-size: 16px;
}
/* La photo centrée */
#img {
position: absolute;
top: 10px;
left: calc(50% - 360px);
}
Rien de neuf pour la balise <body>, la propriété background-color donne la couleur de fond d'un élément, ici il s'agit du document lui-même. La propriété font-family nous permet d'indiquer quelle police de caractères sera prioritaire sur le document. Rien ne nous empêche, pour un élément particulier de la page, d'utiliser une autre police. Enfin, la propriété font-size définit quelle sera la taille de police utilisée en priorité sur le document.
Sur la première page, on a vu une manière de centrer une image à l'aide de la propriété margin. Elle est simple à mettre en œuvre c'est sans doute pour ça qu'on l'utilise souvent. On va en voir une deuxième, pas compliquée non plus, qui nécesssite la présence de la propriété position qui indique de quelle manière l'élément concerné est positionné. Si vous avez testé la page tout à l'heure, vous avez pu constater que le résultat n'est pas terrible. C'est simplement parce qu'il respecte le flux de l'écriture. La propriété position a alors la valeur static. On ne le marque pas car il s'agit de la valeur par défaut. Dans cette propriété, ce qu'il faut bien comprendre, c'est la différence qu'il y a entre les valeurs relative et absolute. Les deux valeurs ont un point en commun, elles dépendent l'élément parent. L'élément parent de <img> est l'élément <body> car l'image est directement posée dans le corps du document. Les balises <p> dans lesquelles on met le texte ont pour élément parent la balise <div>.
left:120px; top:-120px;
left:10px; top:170px;
Le petit dessin à gauche vous montre comment ça fonctionne. J'ai commencé par dessiné un premier rectangle avec la balise <div> (en pointillés). A cette balise j'ai donné la valeur relative à la propriété position. Bien que je ne l'ai pas positionnée, elle est obligatoire si je veux que la valeur absolute fonctionne correctement pour le quatrième élément. Dans cette balise j'ai mis une autre balise <div> à laquelle je n'ai donné qu'une taille et la couleur jaune. Elle est venue se positionner dans l'angle supérieur gauche en toute logique. Tout de suite après, j'ai déclaré une autre balise dont je n'ai changé que la couleur. Elle est venue se positionner directement sous la précédente car elle respecte le flux d'écriture.
Troisième balise, celle en vert, s'est vue dotée de la propriété position: relative;. Sa position a été calculée par rapport à la position qu'elle aurait eu dans le flux c'est à dire sous la deuxième balise cyan. Sa propriété left à 120px la décale vers la droite tandis que sa propriété top à -120px la fait remonter.
Le quatrième élément est positionné à 10px sur la gauche et à 170px du haut de notre premier rectangle parce que sa position est absolute. Il ne tient pas compte du flux. Si le rectangle en pointillés n'avait pas de propriété position ce quatrième élément aurait été se perdre au milieu du texte en haut du document. L'élément est positionné en fonction du premier élément qui possède une propriété position autre que static. A défaut, l'élément se positionne par rapport au body.
Z'avez pas vu le canard? Non? Alors, avec votre souris, allez dans l'angle supérieur droit de la fenêtre de votre navigateur. Si vous faites défiler la page avec la molette de la souris ou bien si vous changez la taille de la fenêtre, vous pourrez constater que l'image reste toujours à la même place. Cela m'amène à vous parler d'une autre valeur que peut prendre la propriété position. Il s'agit de fixed. La position de l'élément est calculée par rapport au viewport c'est à dire par rapport à la partie visible du contenu de la fenêtre du navigateur.
Si, dans notre cas, la valeur de la propriété position entre relative et absolute n'a que peu d'incidence (la différence est égale à la taille par défaut de la marge de la balise <body>. L'élément concerné est indépendant de l'endroit où vous le déclarez dans le document.
Lorsque l'on place un élément dans une page, on donne sa position, dans la plupart des cas, avec les propriétés left pour le côté gauche et top pour sa limite supérieure. Comme la propriété position à la valeur absolute, top: 10px; signifie que l'image sera placée à 10 pixels du haut du viewport. Avec une valeur relative pour la propriété position, l'image aurait été placée légèrement plus bas car la position aurait été calculée par rapport à la partie haute de la balise <body>.
On va voir une autre façon de centrer, tout aussi simple que la précédente mais sans doute sous utilisée. CSS, dans sa version 3 sait faire des calculs simples. Ça se limite à l'addition, la soustraction, la multiplication et la division. Ça rappelle l'école primaire cette affaire là! Si on nous apprenait qu'on ne peut pas additionner des choux et des carottes, ici on va pouvoir le faire grâce à la fonction calc(). La fonction calc() permet de calculer une valeur qui sera appliquée à une propriété. Pour l'utiliser, on doit respecter quelques règles simples que vous trouverez en suivant le lien. Pour centrer l'image, left: calc(50% - 360px); la fonction calcule le centre du viewport (50%) auquel il retranche 360 pixels qui correspondent à la moitié de la largeur de nos photos. Ce n'est pas plus compliqué que ça.
/* Le texte sous la photo */
#texte {
position: absolute;
top: 560px;
height: calc(100% - 560px);
margin-left: 120px;
margin-right: 120px;
overflow: scroll;
}
#texte:hover {
background-color: white;
}
p {
hyphens: auto;
}
p::first-letter {
font-weight: bold;
font-size: 125%;
color: crimson;
margin-left: 15px;
}
On va maintenant s'occuper de notre texte. Le but de la manip, c'est de le placer en bas de l'écran et de faire en sorte qu'il puisse défiler sans que la photo ne quitte l'écran par le haut si le texte est un peu long. On commence par dire que sa position sera absolue. En effet, on va placer le haut du texte (top) à 560 pixels qui correspondent à la hauteur de l'image plus deux fois 10 pixels (les 10 pixels que l'on a mis pour le top de l'image plus 10 pixels qui séparent l'image et le texte).
Il ne nous manque plus qu'à calculer la hauteur de la boîte qui va contenir le texte. On utilise à nouveau la fonction calc() qui, à la hauteur du viewport, retranche les 560 pixels.
Les propriétés margin nous permettent ici de laisser un espace libre à droite et à gauche du bloc texte. La balise <div> tout comme la balise <p> occupe par défaut toute la largeur du viewport. En ajoutant une marge à gauche comme à droite, cela nous permet de centrer notre bloc et ce, quel que soit la taille de la fenêtre du navigateur.
de l'élément
Le petit dessin à gauche compare les deux propriétés margin et padding. Le trait noir représente l'élément auquel on applique la propriété. La propriété margin est la distance qui sépare le bord de l'élément parent au bord de l'élement concerné. La propriété padding définit la distance comprise entre le bord intérieur de l'élément et le contenu de l'élément.
La propriété margin accepte des valeurs négatives contrairement à la propriété padding qui n'accepte que des valeurs positives.
La propriété overflow accepte trois valeurs : visible qui est la valeur par défaut, hidden et scroll. Elle nous permet de dire comment est géré le contenu qui déborde d'un élément. Si la valeur est visible ou bien si la propriété est absente, le texte sera affiché normalement et, pour voir le bas du texte, il faudra faire défiler la page ce qui masquera le haut de l'image. Avec la valeur hidden (caché), le texte en dehors de la balise <div> sera tronqué sans possibilité de la voir. Enfin, la valeur scroll limite le défilement à la balise <div> en rajoutant des barres de défilement.
La pseudo-classe :hover permet de modifier l'aspect d'un élément lorsque le curseur de la souris passe sur cet élément. Lorsque la souris quitte l'élément, celui-ci reprend son aspect initial. Il faut accoler son nom directement à celui de l'élément concerné sans ajouter d'espace. Si on utilise :hover surtout pour les liens, on peut l'utiliser partout. Ici c'est pour changer la couleur de fond du texte, sur cette même page, l'apparition de Donald en haut à droite se fait également grâce à cette pseudo-classe.
La propriété hyphens (traits d'union) que l'on applique ici aux paragraphes (balise <p>) accepte deux valeurs, manual qui est la valeur par défaut et auto. Lorsque cette valeur est appliquée, la césure du texte est faite automatiquement. Si on modifie la taille d'un paragraphe en changeant la taille du navigateur la position des traits d'union dans les mots coupés est susceptible de changer de place ou de disparaître.
Le pseudo-élément ::first-letter considère le premier caractère de l'élément auquel il est accolé comme un élément à part entière. Il est apparu avec CSS2, on l'écrivait alors :first-letter. Avec CSS3, on a rajouté un signe deux points (:). Le doublement de ces deux points sert à faire la distinction entre pseudo-élément et pseudo-classe. Si vous ne mettez qu'une fois deux points, ça fonctionnera de la même façon.
Le premier caractère des paragraphes sera en gras grâce à la propriété font-weight à laquelle on donne la valeur bold. Certaines propriétés peuvent être appliquées directement dans votre texte sans passer par une feuille de style.
Du texte en <b>gras</b> = Du texte en gras Du texte en <i>italique</i> = Du texte en italique Du texte <u>souligné</u> = Du texte souligné Du texte <s>barré</s> = Du textebarréUn texte en <sub>indice</sub> = Un texte en indice Un texte en <sup>exposant</sup> = Un texte en exposant
Ces balises qui modifient l'aspect d'une police ont bien entendu leur équivalent dans une feuille de style.
<b></b> devient font-weight: bold;
<i></i> devient font-style: italic;
<u></u> devient text-decoration: underline;
<s></s> devient text-decoration: line-through;
<sub></sub> et <sup></sup> n'ont pas d'équivalent donc il faut continuer à utiliser les balises HTML.
Il existe une autre façon de "décorer" du texte, ce sont les petites majuscules. Il n'y a pas de balise pour mettre du texte en petites majuscules, alors on utilise une balise qui se différencie des balises <div> et <p> par le fait qu'elle n'est pas considérée comme un bloc. Il s'agit de la balise <span> </span>. Cette balise est importante car elle permet d'appliquer un style à une portion de phrase même déjà stylée. Pour mettre en petites majuscules on utilise la propriété font-variant avec la valeur small-caps
/* Cette partie va dans une feuille de style */
.balspan {
font-family: cursive;
color: red;
}
#ptmaj {
color: blue;
font-family: Arial;
font-variant: small-caps;
}
<!-- Cette partie va dans une balise <body> -->
<p class="balspan">
Ce texte est stylé et <span id="ptmaj">cette partie est en petites majuscules</span>
et le reste ne l'est plus.
</p>
Ce texte est stylé et cette partie est en petites majuscules et le reste ne l'est plus.
On en revient à notre première lettre de paragraphe. Après l'avoir habilllée, on la pousse vers la droite avec margin-left. Comme elle est considérée comme un élément, cette propriété crée un espace entre la lettre et le bord gauche du paragraphe.
/* Les boutons */
.btn {
position: absolute;
top: 250px;
display: block;
width: 180px;
font-weight: bold;
text-align: center;
background-color: white;
color: black;
border-radius: 8px;
text-decoration: none;
border: 4px inset red;
}
.btn:hover {
background-color: black;
color: white;
/* Bouton Précédent */
#prec {
left: 50px;
}
/* Bouton Suivant */
#suiv {
right: 50px;
}
Il ne nous reste que les boutons de navigation à mettre en place. Tout ce qui est commun aux deux boutons est rangé dans la classe .btn, et la seule chose qui les différencie c'est à dire la position horizontale est définit par les identifiants #prec et #suiv.
Vous connnaissez la plupart des propriétés que l'on va utiliser. On commence par dire que la position sera absolue car on les place directement à un point précis de la page. Comme ils sont tous les deux à la même hauteur, on peut fixer la propriété top. Nos deux boutons sont des liens (balise <a>) et ils sont considérés comme du texte avec un affichage inline. Ils ont, par défaut, la longueur du texte marqué sur le bouton. On les force à s'afficher comme des blocs ce qui va nous permettre de leur donner une longueur avec la propriété width. Après avoir mis le texte en gras, on le centre avec la propriété text-align. Cette propriété est intéressante pour la gestion du positionnement d'un texte dans un bloc. On donne au bloc une couleur de fond, le blanc et une couleur d'encre, le noir.
L'art ou la manière d'arrondir les angles. La propriété border-radius est là pour ça.
Ce petit dessin est l'empilement de 5 blocs carrés avec border-radius: 50%;.
Par défaut, les liens (balise <a>) ont la propriété text-decoration positionnée à underline (souligné). La valeur none supprime ce trait de surlignement.
On termine l'habillage des boutons par leur rajouter une bordure rouge de 4 pixels d'épaisseur avec la propriété border. Les boutons ont une largeur de 180 pixels. En rajoutant une bordure de 4 pixels, cela porte la largeur du bouton à 188 pixels. C'est le fonctionnement normal des bordures, elles se placent à l'extérieur du bloc. Pour forcer un placement de la bordure à l'intérieur du bloc, il faut utiliser la propriété box-sizing.
Il ne reste plus qu'à finir de positionner les deux boutons. Le bouton gauche est placé à 50 pixels du bord gauche du viewport et le bouton droit est placé à 50 pixels du bord droit du viewport. Avec la propriété right, c'est le bord droit de l'élément qui est pris en compte pour placer l'élément.
