SlideShare a Scribd company logo
1 of 17
Les dessous de
HTML/CSS/JS
en deux idées simples
Cette présentation est un document du MOOC-ICN.
Les dessous de HTML5/CSS3/JS en deux idées simples :
- Distinguer le fond de la forme
- Expliciter les éléments d’un site Web
Peut-on résumer les concepts qui permettent de créer un site Web sous forme de
quelques éléments clés ?
On relève ce défi ici sous la forme d'une présentation réutilisable en classe,
après avoir créé son premier site Web, en utilisant quelques balises de base, et
quelques éléments exemples glanés ça et là.
Cette présentation pourrait même être faite sous forme de quelques exposés
d’élèves.
Distinguer le fond de la forme
Voir le résultat en ligne.
Distinguer le fond de la forme
Voilà une portion de document qui contient un texte descriptif, avec
- un mot mis en avant (en italique)
- un lien vers wikipédia,
- une portion de texte montrant un code informatique,
- et un bouton à cliquer pour lancer le code.
Bien. Enfin … bof, ça pourrait être plus joli:) Mais ce que nous voulons c’est séparer les
problèmes :
(i) représenter le sens du texte et sa structure en HTML
(ii) et définir sa mise en page en CSS
Bref : séparer le fond de la forme.
Ce qui est remarquable c’est que trois types de construction suffiront pour cela pour tout
faire, c’est à dire :
1/ structurer le texte,
2/ enrichir le texte,
3/ ajouter des liens ou y insérer des objets.
Distinguer le fond de la forme
- Structurer le propos :
section et sous-section, titre, …
- Indiquer le sens du contenu :
une définition, du code, …
- Utiliser le texte comme donnée :
pour des algorithmes.
Distinguer le fond de la forme
Structurer le texte.
Dans notre exemple chaque morceau de texte la description, le code, et l’animation est
insérée dans un bloc
<div class=’...’>…</div>
où ou l’attribut class explicite de quel type de texte il s’agit. En faisant ce geste, on gagne
trois choses.
- On structure son propos pour le lecteur, en section, sous-section ou paragraphe, avec des
titres (pardon, avec des <div class=’titre’>…</div>), on identifie les énumérations, on
rassemble les données du texte sous forme de table.
+ Et si on ajoute un index (avec l’attribut id, comme ici <div id=’ma-section’>…</div>), on va
pouvoir référencer la section de l’intérieur du document.
- On sépare le contenu de la façon de l’afficher, par exemple on précise que c’est du code
informatique ou une animation, pour que selon la machine (un grand écran ou un petit, par
exemple), la personne (qui parcourt juste la page, ou y revient après avoir lue, ou voit mal et
doit la faire lire par la machine) le même texte puisse être présenter au mieux.
- On permet à son texte d’être lu par humain mais aussi traité par des algorithmes (de
recherche ou d’analyse) à qui on a vraiment besoin de présenter de l’information bien
structurée.
Distinguer le fond de la forme
- Enrichir le texte :
en expliquant de quoi il s’agit,
sans fixer la mise en page.
~ N’utiliser que les balises
<div> et <span> pour se forcer
à expliciter le sous-texte.
Distinguer le fond de la forme
Enrichir le texte.
Dans notre exemple on met en avant une partie du texte en déclarant qu’il faut le présenter
avec emphase, car il est important, mais en laissant le soin à autre chose de dire comment
(en italique ? en couleur ? ou en haussant la voix si le texte est lu?).
Là encore, on gagne à mieux faire comprendre ce que les gens de théâtre appellent le
sous-texte : ce qui n’est pas explicitement dit, mais accompagne le texte.
Tout avec les balises <div>…</div> et <span> </span> ?
Vous devez être surpris ! Vous faites déjà un peu de HTML et vous connaissez les balises
<div>…</div> pour structurer le texte en division, mais peut-être aussi les balises <ul> et <li>
pour faire des listes d’items, et quelques balises pour le texte en italique <i> ou en gras <b>.
Et bien disons que ce sont de simples abréviations, pour exprimer une classe de texte. Mais
il faut vraiment à chaque fois bien noter de quel type de texte il s’agit.
Car techniquement, ça marche ! Toutes les divisions du texte ou les parties d’une phrase
peuvent se spécifier avec une seule balise.
Distinguer le fond de la forme
- Deux possibilités :
- Lier à des contenus externes.
- Insérer des objets multimédia.
~ Garder le plus simple possible sa façon de représenter le contenu d’une page HTML.
Distinguer le fond de la forme
Ajouter des liens ou des objets.
Dans notre exemple on ajoute
- un lien vers la définition de wikipédia pour qui ne serait pas familier avec le javascript il
suffit de cliquer sur le texte,
- et un lien vers le code de l’animation, où là on clique sur une image.
Et là nous voyons deux mécanismes : faire un lien vers un média externe ou insérer le ce
média dans la page.
- Insérer l’objet dans la page, ici une image avec la balise <img> (dont on a bien ajouté
l’attribut alt pour avoir une description alternative si l’image ne s'affiche pas ou la page était
produite en audio et pas en texte), mais on peut insérer des vidéos, des animations dans un
canevas graphique ou d’autres objets multimédia, et même une autre page Web.
Est-ce aussi simple que cela ?
Oui au niveau des principes. Ensuite selon les besoins on dispose de toute sorte d’attributs,
(par exemple : spécifier la langue dans une page internationale, faire afficher un titre), y
compris pour interagir avec l’élément (par exemple : quand la souris passe dessus).
Expliciter les éléments du site.
- Les méta-données
- La feuille de style
Expliciter les éléments du site.
Tout ce que vous mettez dans votre page Web n’a strictement aucun intérêt:) C’est que les
gens trouverons qui en a.
Et on ne parle pas ici de présenter les choses joliment, de manière claire et facile d’accès.
On vous fait confiance pour ça.
Mais de permettre de les présenter au mieux aux … moteurs de recherche et d’indexation.
À cette fin, il faut bien positionner les méta-données, comme dans l’exemple ci-dessus :
- Préciser comment sont encodés les caractères (comme les accents ou les symboles) et
toujours essayer d’utiliser le standard UTF-8
- Bien donner un titre à la page, avec si possible des mots-clé et préciser l’auteur, cela va
aider à classer et retrouver le contenu.
On peut aussi ajouter des ``données´´ par exemple si votre information contient des faits (par
exemple : des dates, des définitions, des références, …) c’est toujours mieux de les
rassembler sous forme structurée que de les diluer dans du texte. Par exemple sur toutes les
pages wikipédia comme celle-ci, on rassemble dans l’encadré de droite, ce qui correspond
au données et elles sont exploitables par d’autres sites Web.
Reste la ligne <link rel='stylesheet' type='text/css' href=’style.css'> nous allons en parler maintenant.
Expliciter les éléments du site.
Quel va être l’affichage sur un smartphone par exemple ? Et si la personne est malvoyante ?
Enfin ! Nous voilà prêt à comprendre comment afficher les pages comme nous le souhaitons.
Dans l’exemple précédent la page référence un fichier style.css qui contient des directives de
mis en page, ce fichier est souvent commun à tout un site pour bien garder une présentation
homogène.
Comment apprendre à faire de bon CSS ? C’est à la fois très simple en partant d’un fichier
exemple et en tâtonnant (c’est le moment où thimble se révèle l’outil idéal pour expérimenter)
ou en suivant les tutoriels proposés sur les site w3school, Openclassroom ou
Informatique au Lycée qui permettent d’apprendre en autonomie.
Très souvent comme dans les deux exemples qui suivent, on va partir d’un ``thème´´ créé
par un professionnel (on voit comment le même site peut s’afficher de manière bien différente
selon le CSS choisi) et l’adapter à ce que l’on souhaite. Faire un vrai graphisme
professionnel représente plusieurs jours de travail: c’est même un vrai métier.
Expliciter les éléments du site.
Expliciter les éléments du site.
Expliciter les éléments du site.
Les éléments d’un site Web
Un site Web n’est pas un ``paquet´´ de pages Webs, et il faut proposer un site Web où tout le
monde va se retrouver, car il y a des usages courants à respecter, et des outils qui nous
permettent de proposer immédiatement un vrai site et pas un simple bricolage.
Pour organiser votre information voici trois principaux outils
- Distinguer les pages du site, des articles qui se créent au fil du temps.
Une page présente une information générale et fixe sur le fonctionnement ou le contenu du
site. Il y a des pages usuelles : présentation du site, informations légales et copyright utilisé,
page de contact, présentation des auteurs (elles sont souvent en lien dans le pied de page).
Les articles eux, sont rangés par thème ou catégorie et bien indexés avec des mots-clé.
- Utiliser des menus pour naviguer entre les sections du site, au sein du site le contenu est
entouré d’un entête pour reconnaître le site, d’une barre ou plusieurs barres de navigation, et
en bas d’informations complémentaires. Les widgets (par exemple pour la recherche dans les
articles ou les pages) sont des outils qui permettent de rendre le site dynamique.
- Organiser l’espace de la page, par exemple avec une entête, menu, zone de fonctions
commune à toutes les pages d’une zone du site, comme on le voit dans l’exemple précédent.
On peut bien entendu faire autrement, innover, surprendre, mais en testant toujours sur de
vrais utilisateurs si leur permet de bien s’y retrouver.

More Related Content

Similar to Les dessous de html+ccs+js

CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
adeljaouadi
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
Sébastien Delorme
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
bellesmanieres
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 

Similar to Les dessous de html+ccs+js (20)

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
 
Formation web
Formation webFormation web
Formation web
 
Formation wordpress
Formation wordpressFormation wordpress
Formation wordpress
 
Cours html5
Cours html5Cours html5
Cours html5
 
Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)Formation WordPress médiathèque Mauguio (mai 2017)
Formation WordPress médiathèque Mauguio (mai 2017)
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
Wordpress meetup
Wordpress meetupWordpress meetup
Wordpress meetup
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
Accessibilité et SEO - Sébastien Delorme - SEO Campus 2010
 
Concilier accessibilité et SEO
Concilier accessibilité et SEOConcilier accessibilité et SEO
Concilier accessibilité et SEO
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 

Recently uploaded

Recently uploaded (11)

Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdf
 
Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en France
 
Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigées
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptx
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
 
Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciation
 

Les dessous de html+ccs+js

  • 1. Les dessous de HTML/CSS/JS en deux idées simples
  • 2. Cette présentation est un document du MOOC-ICN. Les dessous de HTML5/CSS3/JS en deux idées simples : - Distinguer le fond de la forme - Expliciter les éléments d’un site Web Peut-on résumer les concepts qui permettent de créer un site Web sous forme de quelques éléments clés ? On relève ce défi ici sous la forme d'une présentation réutilisable en classe, après avoir créé son premier site Web, en utilisant quelques balises de base, et quelques éléments exemples glanés ça et là. Cette présentation pourrait même être faite sous forme de quelques exposés d’élèves.
  • 3. Distinguer le fond de la forme Voir le résultat en ligne.
  • 4. Distinguer le fond de la forme Voilà une portion de document qui contient un texte descriptif, avec - un mot mis en avant (en italique) - un lien vers wikipédia, - une portion de texte montrant un code informatique, - et un bouton à cliquer pour lancer le code. Bien. Enfin … bof, ça pourrait être plus joli:) Mais ce que nous voulons c’est séparer les problèmes : (i) représenter le sens du texte et sa structure en HTML (ii) et définir sa mise en page en CSS Bref : séparer le fond de la forme. Ce qui est remarquable c’est que trois types de construction suffiront pour cela pour tout faire, c’est à dire : 1/ structurer le texte, 2/ enrichir le texte, 3/ ajouter des liens ou y insérer des objets.
  • 5. Distinguer le fond de la forme - Structurer le propos : section et sous-section, titre, … - Indiquer le sens du contenu : une définition, du code, … - Utiliser le texte comme donnée : pour des algorithmes.
  • 6. Distinguer le fond de la forme Structurer le texte. Dans notre exemple chaque morceau de texte la description, le code, et l’animation est insérée dans un bloc <div class=’...’>…</div> où ou l’attribut class explicite de quel type de texte il s’agit. En faisant ce geste, on gagne trois choses. - On structure son propos pour le lecteur, en section, sous-section ou paragraphe, avec des titres (pardon, avec des <div class=’titre’>…</div>), on identifie les énumérations, on rassemble les données du texte sous forme de table. + Et si on ajoute un index (avec l’attribut id, comme ici <div id=’ma-section’>…</div>), on va pouvoir référencer la section de l’intérieur du document. - On sépare le contenu de la façon de l’afficher, par exemple on précise que c’est du code informatique ou une animation, pour que selon la machine (un grand écran ou un petit, par exemple), la personne (qui parcourt juste la page, ou y revient après avoir lue, ou voit mal et doit la faire lire par la machine) le même texte puisse être présenter au mieux. - On permet à son texte d’être lu par humain mais aussi traité par des algorithmes (de recherche ou d’analyse) à qui on a vraiment besoin de présenter de l’information bien structurée.
  • 7. Distinguer le fond de la forme - Enrichir le texte : en expliquant de quoi il s’agit, sans fixer la mise en page. ~ N’utiliser que les balises <div> et <span> pour se forcer à expliciter le sous-texte.
  • 8. Distinguer le fond de la forme Enrichir le texte. Dans notre exemple on met en avant une partie du texte en déclarant qu’il faut le présenter avec emphase, car il est important, mais en laissant le soin à autre chose de dire comment (en italique ? en couleur ? ou en haussant la voix si le texte est lu?). Là encore, on gagne à mieux faire comprendre ce que les gens de théâtre appellent le sous-texte : ce qui n’est pas explicitement dit, mais accompagne le texte. Tout avec les balises <div>…</div> et <span> </span> ? Vous devez être surpris ! Vous faites déjà un peu de HTML et vous connaissez les balises <div>…</div> pour structurer le texte en division, mais peut-être aussi les balises <ul> et <li> pour faire des listes d’items, et quelques balises pour le texte en italique <i> ou en gras <b>. Et bien disons que ce sont de simples abréviations, pour exprimer une classe de texte. Mais il faut vraiment à chaque fois bien noter de quel type de texte il s’agit. Car techniquement, ça marche ! Toutes les divisions du texte ou les parties d’une phrase peuvent se spécifier avec une seule balise.
  • 9. Distinguer le fond de la forme - Deux possibilités : - Lier à des contenus externes. - Insérer des objets multimédia. ~ Garder le plus simple possible sa façon de représenter le contenu d’une page HTML.
  • 10. Distinguer le fond de la forme Ajouter des liens ou des objets. Dans notre exemple on ajoute - un lien vers la définition de wikipédia pour qui ne serait pas familier avec le javascript il suffit de cliquer sur le texte, - et un lien vers le code de l’animation, où là on clique sur une image. Et là nous voyons deux mécanismes : faire un lien vers un média externe ou insérer le ce média dans la page. - Insérer l’objet dans la page, ici une image avec la balise <img> (dont on a bien ajouté l’attribut alt pour avoir une description alternative si l’image ne s'affiche pas ou la page était produite en audio et pas en texte), mais on peut insérer des vidéos, des animations dans un canevas graphique ou d’autres objets multimédia, et même une autre page Web. Est-ce aussi simple que cela ? Oui au niveau des principes. Ensuite selon les besoins on dispose de toute sorte d’attributs, (par exemple : spécifier la langue dans une page internationale, faire afficher un titre), y compris pour interagir avec l’élément (par exemple : quand la souris passe dessus).
  • 11. Expliciter les éléments du site. - Les méta-données - La feuille de style
  • 12. Expliciter les éléments du site. Tout ce que vous mettez dans votre page Web n’a strictement aucun intérêt:) C’est que les gens trouverons qui en a. Et on ne parle pas ici de présenter les choses joliment, de manière claire et facile d’accès. On vous fait confiance pour ça. Mais de permettre de les présenter au mieux aux … moteurs de recherche et d’indexation. À cette fin, il faut bien positionner les méta-données, comme dans l’exemple ci-dessus : - Préciser comment sont encodés les caractères (comme les accents ou les symboles) et toujours essayer d’utiliser le standard UTF-8 - Bien donner un titre à la page, avec si possible des mots-clé et préciser l’auteur, cela va aider à classer et retrouver le contenu. On peut aussi ajouter des ``données´´ par exemple si votre information contient des faits (par exemple : des dates, des définitions, des références, …) c’est toujours mieux de les rassembler sous forme structurée que de les diluer dans du texte. Par exemple sur toutes les pages wikipédia comme celle-ci, on rassemble dans l’encadré de droite, ce qui correspond au données et elles sont exploitables par d’autres sites Web. Reste la ligne <link rel='stylesheet' type='text/css' href=’style.css'> nous allons en parler maintenant.
  • 13. Expliciter les éléments du site. Quel va être l’affichage sur un smartphone par exemple ? Et si la personne est malvoyante ? Enfin ! Nous voilà prêt à comprendre comment afficher les pages comme nous le souhaitons. Dans l’exemple précédent la page référence un fichier style.css qui contient des directives de mis en page, ce fichier est souvent commun à tout un site pour bien garder une présentation homogène. Comment apprendre à faire de bon CSS ? C’est à la fois très simple en partant d’un fichier exemple et en tâtonnant (c’est le moment où thimble se révèle l’outil idéal pour expérimenter) ou en suivant les tutoriels proposés sur les site w3school, Openclassroom ou Informatique au Lycée qui permettent d’apprendre en autonomie. Très souvent comme dans les deux exemples qui suivent, on va partir d’un ``thème´´ créé par un professionnel (on voit comment le même site peut s’afficher de manière bien différente selon le CSS choisi) et l’adapter à ce que l’on souhaite. Faire un vrai graphisme professionnel représente plusieurs jours de travail: c’est même un vrai métier.
  • 17. Les éléments d’un site Web Un site Web n’est pas un ``paquet´´ de pages Webs, et il faut proposer un site Web où tout le monde va se retrouver, car il y a des usages courants à respecter, et des outils qui nous permettent de proposer immédiatement un vrai site et pas un simple bricolage. Pour organiser votre information voici trois principaux outils - Distinguer les pages du site, des articles qui se créent au fil du temps. Une page présente une information générale et fixe sur le fonctionnement ou le contenu du site. Il y a des pages usuelles : présentation du site, informations légales et copyright utilisé, page de contact, présentation des auteurs (elles sont souvent en lien dans le pied de page). Les articles eux, sont rangés par thème ou catégorie et bien indexés avec des mots-clé. - Utiliser des menus pour naviguer entre les sections du site, au sein du site le contenu est entouré d’un entête pour reconnaître le site, d’une barre ou plusieurs barres de navigation, et en bas d’informations complémentaires. Les widgets (par exemple pour la recherche dans les articles ou les pages) sont des outils qui permettent de rendre le site dynamique. - Organiser l’espace de la page, par exemple avec une entête, menu, zone de fonctions commune à toutes les pages d’une zone du site, comme on le voit dans l’exemple précédent. On peut bien entendu faire autrement, innover, surprendre, mais en testant toujours sur de vrais utilisateurs si leur permet de bien s’y retrouver.