Traduction
Débuter en programmation web - sommaire
Débuter en HTML & CSS - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Pour éviter la multiplication des pages d'un site certains développeurs imaginent des pages avec beaucoup de contenu chacune (textes et images).
Il existe même des sites qui ne comprennent qu'une page ...
Mais attention la navigation dans une page très longue peut devenir fastidieuse si le développeur n'utiliser pas quelques astuces : ancres, masquage par défaut, etc.
Grâce à une "ancre" on peut accéder à un endroit très précis de la page courante voire à un endroit très précis dans une autre page.
Dans cette page il y a quatre ancres. Une ancre est créée avec l'attribut ID.
Les ancres sont ici :
Vous comprenez pourquoi il ne peut y avoir plusieurs noeuds d'une page ayant la même valeur pour l'attribut ID.
Une valeur d'ID doit être unique dans une page !
Ensuite pour accéder à une ancre il suffit de créer un lien hypertexte (balise A) avec en valeur de l'attribut href "#valeur ID de l'ancre"
Dans l'exemple il y a six liens vers des ancres de la page qui sont :
Le rendu du code dans un cadre :
La zone de navigation disparait ; il faut alors recliqué sur "retour haut de page" pour de nouveau pouvor naviguer ...
Imaginons que la page en question se nomme "page_longue.htm". Dans d'autre pages vous pouvez écrire des liens avec les valeurs suivantes
pour l'attribut href :
"page_longue.htm#partie2"
OU "page_longue.htm#partie3"
Pour qu'une page ne soit pas trop longue il suffit de masquer par défaut une grande partie de son contenu (texte image).
Ce masquage peut être réalisé avec CSS ou en HTML5 ou encore en JavaScript et plus précisément avec une extension de
la fameuse bibliothèque de jQuery ; jQuery UI.
Je n'en dis pas plus car il y a dans mon site tout un tuto sur le célèbre Framework de JavaScript.
Jquery UI - une extension de jQuery
Notez la présence d'une feuille de style interne avec trois règles.
Chacune des parties est désormais contenue dans une balise ARTICLE par contre les ancres et les liens vers celles-ci ont disparu !
La feuille de style précise que la hauteur par défaut de chaque boite ARTICLE est 50 pixels seulement et que le reste du contenu est masqué
(grâce à la propriété overflow :hidden).
50px, c'est la hauteur de la boite H2 de ARTICLE. Donc par défaut on ne voit que que le titre de la partie !
Si survol de la boite alors la hauteur s'ajuste au contenu (height : auto).
Le rendu du code dans un cadre :
L'affichage de tout le texte (initialement masqué) est ici immédiat. On pourrait envisager une transition.
Il y a transition lorsque pour un élément HTML donné une ou plusieurs propriétés changent de valeurs (sur survol ou clic) non pas instantanément
mais sur une certaine durée.
Le rendu du code avec une transition :
Le code HTML ne change pas.
Par contre au niveau de la feuille de style :
Notez la nouvelle règle de style : transition : all 2s ;
Les transititions sont une nouveauté de CSS version 3. Pour en savoir plus visitez le tutoriel CSS3 dans le même site (cliquez sur "accueil" pour revenir
au menu principal".
La version 5 de HTML propose deux nouvelles balises doubles de type block qui fonctionnent obligatoirement ensembles : details & summary.
La balise summary est obligatoirement "enfant" du conteneur details.
C'est la balise details debut qui précise le positionnement de la flèche.
Par défaut, seul le texte contenu à l'intérieur de SUMMARY apparait et la flèche est orientée vers la droite.
En cliquant sur une flèche le texte masqué apparait et la flèche s'oriente vers le bas.
Le rendu du code dans un cadre :
Il suffit de cliquer de nouveau sur la flèche pour remasquer le texte.
Vous avez pu constater que sur certains site et lorsque vous défilez vers le bas, la zone de navigation dans le site,
est toujours visible ; c'est le reste de la page qui glisse sous ce menu.
Donc la navigation est facilitée ; il n'est plus nécessaire de remonter en haut de page pour accéder au menu.
La zone de navigation sera encodée dans le bloc NAV.
Le texte structuré est dans le bloc SECTION.
La feuille de style est un peu compliquée.
Afin d'être affiché en permanence en haut de l'écran, la boite correspondant au menu doit être positionnée en fixe (position :fixed) !
Attention, pour des raisons mystérieuses position : absolute / fixed est incompatible avec margin: auto.
Donc pour centrer horizontalement les bloc NAV et SECTION il faut jouer sur deux propriétés
left : 50% & margin-left : - moitié de la largeur du bloc donc ici 45% puisque le bloc fait 90% de large.
Notez aussi la propriété z-index qui gère l'ordre d'apparition des blocs lorsqu'ils se superposent.
Je n'en dis pas plus car il y a dans ce tuto tout une page sur la propriété position : fixed/absolute/relative
Le rendu du code dans un cadre :
Surtout faites défiler la page vers le bas pour constater que la zone de navigation reste toujours visible à l'écran et bien ancrée en haut. C'est le contenu de SECTION qui glisse sous la boîte NAV.
Il y a dans ce tuto tout un chapitre sur la propriété CSS position : fixed / absolute /relative . Voir sommaire du tutoriel.