La vocation d’une page HTML est d’être liée à d’autres pages. Ainsi nous souhaitons qu’un clic sur un item de menu renvoie à la recette correspondante.
nav a
{
display:block;
text-decoration:none;
}
Vous pouvez changer d’autres propriétés à votre guise. Que signifient les propriétés précédentes ?
Télécharger le fichier far-casimir.txt ici.
Insérer le document far-casimir.txt dans le modèle et sauvegarder sous le nom far-casimir.html.
Pour bien comprendre la différence entre le fond (le texte en dehors des balises) et la forme (défini par le fichier CSS) nous allons travailler sur un autre fichier CSS.
Cette fois ci nous voulons mettre le menu à l'horizontale, et ne faire apparaître à l'écran que les mots Entrées, Plats et Desserts. Lorsque la souris survole un de ces mots apparaît alors les items correspondants.
Voici ce que cela donne en ligne le menu horizontal au dessus du manifeste ici.
Pour le même fond avec une autre mise en forme (menu en colonne à gauche du manifeste) ici.
Télécharger le fichier css style2.css ici et le fichier css style1.css ici
Voici les fichiers html correspondants index2.txt puis index1.txt
Pour comprendre ce que fait une commande CSS vous pouvez "commentez" cette commande et l'inactiver en l'entourant par /* et */
Pour comprendre le positionnement des blocks les uns par rapport aux autres vous pouvez momentanément matérialiser leur contours par la commande CSS border:1px solid black;
Sélecteur
{
attribut1:valeur1;
attribut2:valeur2;
etc...
}
ul
{
display:none;/*on cache la liste ul à l'écran*/
}
ul
{
display:block;/*on montre la liste ul à l'écran*/
}
Les sélecteurs peuvent être un peu plus complexes comme nav .container h2:hover +ul qu'on lit de la droite vers la gauche:
Les attibuts qui vont suivre concernent donc l' ul qui suit immédiatement un h2 qui a été survolé par la souris (hover) dans le block container qui se trouve dans le block nav.
Concrétement cela permettra de montrer à l'écran l'ul lorsque le mot encadré par le block h2 a été survolé à l'écran, par exemple Entrées, ou Plats ou Desserts. Evidemment il ne faut pas que la liste des Desserts soit révélée, alors que le mot Entrées ait été survolé par la souris.
Pour écrire des sélecteurs plus complexes, il faut donc bien analyser la structure en arbre du fichier html.
Remarque importante En fonction du besoin on va chercher en ligne dans la documentation comme ici www.w3.org/Style/css3-selectors-updates des commandes un peu plus complexes.
Les pages HTML sont faites pour être lues par des navigateurs, des robots de recherche et bien sûr ceux qui les écrivent et les maintiennent. La multiplication des types d’usage différents et l’automatisation des processus à conduit à abandonner les pratiques des années 1990 consistant à mélanger la forme et le fond. On peut produire de mauvaises pages en suivant ces anciens principes à l’aide d’un traitement de texte. Au contraire, l’écriture de bonnes pages faciles à lire, à maintenir et à manipuler par des robots demande une structuration proche de la programmation. Il faut hiérarchiser les contenus, découper en blocs logiques, séparer la structure (HTML proprement dit), de la mise en page (reléguée dans les feuilles de style CSS). Ces bonnes pratiques ont aussi l’avantage d’augmenter la vitesse de chargement des pages (les feuilles de style utilisées plusieurs fois ne sont chargées qu’une fois) et d’optimiser l’espace de stockage de l’information. Nous avons pu constater qu’utiliser du HTML/CSS pur ne permettait toutefois pas d’éviter la répétition de certains contenus (bandeau,menu) ce qui ne facilite pas la maintenance des pages. On peut éviter cela par la division d’une page en plusieurs fichiers envoyés séparément aux navigateurs. Cela correspond à l’utilisation de frame. Nous n’avons pas expliqué cette technique ancienne car elle est déconseillée puisqu’elle rends difficile l’exploitation de liens profonds par les moteurs de recherche et risque de causer des incohérences et des pertes de contenu. Alors que faut-il faire ? La bonne solution consiste à faire construire automatiquement les pages du côté serveur WEB pour qu’elles soient ensuite envoyées complètes au navigateur client. Cela peut se faire par l’utilisation de langages de programmation comme JavaScript ou PHP si l’on souhaite que cette construction soit interactive (les pages sont générées à la demande du client). Mais si aucune interaction avec le client n’est nécessaire, les pages peuvent être aussi créées définitivement par des procédés automatiques avant l’installation sur le serveur. On pourra alors utiliser beaucoup de langages de programmation pour ce faire.