{"id":484,"date":"2020-02-12T03:01:18","date_gmt":"2020-02-12T03:01:18","guid":{"rendered":"http:\/\/mytribu.fr\/cmopc\/?p=484"},"modified":"2026-02-17T01:04:01","modified_gmt":"2026-02-17T01:04:01","slug":"les-differents-liens-et-les-ancres","status":"publish","type":"post","link":"http:\/\/mytribu.fr\/cmopc\/les-differents-liens-et-les-ancres\/","title":{"rendered":"exercices sur les ancres"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Exercice \u2013 Ancres & scroll vertical (Les 5 sens)<\/title>\n\n  <style>\n    html { scroll-behavior: smooth; }\n\n    body {\n      margin: 0;\n      font-family: Arial, sans-serif;\n      line-height: 1.6;\n      background: #fff;\n      color: #111;\n    }\n\n    \/* Menu fixe *\/\n    nav {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      background: #111;\n      padding: 14px 16px;\n      display: flex;\n      justify-content: center;\n      gap: 14px;\n      z-index: 10;\n      flex-wrap: wrap;\n    }\n\n    nav a {\n      color: #fff;\n      text-decoration: none;\n      padding: 8px 12px;\n      border-radius: 10px;\n      font-size: 14px;\n    }\n\n    nav a:hover {\n      background: #f97316;\n      color: #111;\n      font-weight: bold;\n    }\n\n    main {\n      max-width: 900px;\n      margin: auto;\n      padding: 90px 20px 40px; \/* marge haute pour laisser la place au menu *\/\n    }\n\n    h1 { margin-top: 0; }\n\n    section {\n      padding: 20px;\n      border: 1px solid #eee;\n      border-radius: 16px;\n      margin: 0 0 120px; \/* gros espace pour le scroll *\/\n      box-shadow: 0 8px 20px rgba(0,0,0,0.05);\n      scroll-margin-top: 90px; \/* \u00e9vite que le titre soit cach\u00e9 sous le menu *\/\n    }\n\n    h2 {\n      margin-top: 0;\n      border-left: 5px solid #111;\n      padding-left: 12px;\n    }\n\n    .haut {\n      display: inline-block;\n      margin-top: 18px;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 12px;\n      text-decoration: none;\n      color: #111;\n    }\n\n    .haut:hover { background: #f5f5f5; }\n\n    .consigne {\n      background: #f8f8f8;\n      border-radius: 16px;\n      padding: 18px;\n      margin: 18px 0 30px;\n    }\n\n    .tag {\n      display: inline-block;\n      padding: 4px 10px;\n      border: 1px solid #eee;\n      border-radius: 999px;\n      margin-right: 8px;\n      font-size: 12px;\n      color: #333;\n      background: #fff;\n    }\n  <\/style>\n<\/head>\n\n<body>\n\n  <nav>\n    <a href=\"#vue\">Vue<\/a>\n    <a href=\"#ouie\">Ou\u00efe<\/a>\n    <a href=\"#odorat\">Odorat<\/a>\n    <a href=\"#gout\">Go\u00fbt<\/a>\n    <a href=\"#toucher\">Toucher<\/a>\n  <\/nav>\n\n  <main id=\"top\">\n    <h1>Exercice : les ancres (scroll vertical)<\/h1>\n\n    <div class=\"consigne\">\n      <p style=\"margin:0;\">\n        <span class=\"tag\">Objectif<\/span>\n        Comprendre comment fonctionne un lien <strong>vers une ancre<\/strong> : <code>href=\"#id\"<\/code>.<br>\n        Cliquez sur le menu (en haut) pour faire d\u00e9filer la page. Puis rep\u00e9rez dans le code\n        o\u00f9 se trouvent les <strong>id<\/strong>.Seul la vue et le toucher fonctionne.\n        Corrige les autres.\n      <\/p>\n    <\/div>\n\n    \n\n    <!-- ===================== VUE ===================== -->\n    <section id=\"vue\">\n      <h2>Vue<\/h2>\n      <p><strong>Facult\u00e9 de voir :<\/strong> on per\u00e7oit la forme, la couleur, les contrastes et la composition.<\/p>\n\n      <p>En web design, la vue est centrale : la hi\u00e9rarchie des titres (H1, H2\u2026), l\u2019alignement, les marges et la typographie\n        guident l\u2019utilisateur.<\/p>\n      <p>Exemple concret : sur une landing page, on doit rep\u00e9rer imm\u00e9diatement le titre, le bouton d\u2019action et l\u2019image principale.<\/p>\n      <p>Avant de coder, on peut analyser un site : structure, lisibilit\u00e9, coh\u00e9rence graphique, adaptation mobile.<\/p>\n      <p>Quand on pr\u00e9pare des images dans Photoshop : on choisit le bon format (JPEG\/PNG\/WebP), on r\u00e9duit le poids et on garde une bonne qualit\u00e9.<\/p>\n      <p>Plus la page est claire visuellement, plus elle est efficace : l\u2019utilisateur comprend en quelques secondes ce que propose le site.<\/p>\n\n      <a class=\"haut\" href=\"#top\">⬆ Retour en haut<\/a>\n    <\/section>\n\n    <!-- ===================== OUIE ===================== -->\n    <section>\n      <h2>Ou\u00efe<\/h2>\n      <p><strong>Sens des sons :<\/strong> utile pour comprendre l\u2019ambiance et le rythme.<\/p>\n\n      <p>Sur un site, le son est rarement automatique (et c\u2019est mieux !). On peut l\u2019utiliser seulement si c\u2019est pertinent :<\/p>\n      <p>\u2014 Une vid\u00e9o de pr\u00e9sentation avec contr\u00f4le (lecture\/pause).<br>\n         \u2014 Un projet artistique (portfolio, expo).<br>\n         \u2014 Un site p\u00e9dagogique, avec un bouton \u201c\u00e9couter\u201d.<\/p>\n      <p>Attention : un son qui d\u00e9marre tout seul peut g\u00eaner en classe, au travail ou sur mobile.<\/p>\n      <p>Dans une landing page moderne, on privil\u00e9gie le calme : un design propre, du texte lisible, et des interactions discr\u00e8tes.<\/p>\n      <p>Si on veut animer une page, on pr\u00e9f\u00e8re souvent une animation CSS l\u00e9g\u00e8re plut\u00f4t qu\u2019un m\u00e9dia lourd.<\/p>\n\n      \n    <\/section>\n\n    <!-- ===================== ODORAT ===================== -->\n    <section>\n      <h2>Odorat<\/h2>\n      <p><strong>Sens des odeurs :<\/strong> dans le web, on parle plut\u00f4t \u201cd\u2019impression\u201d.<\/p>\n\n      <p>On ne \u201csent\u201d pas un site, mais on le ressent : est-il professionnel, moderne, brouillon, agr\u00e9able ?<\/p>\n      <p>Cette impression vient de d\u00e9tails simples : alignements, coh\u00e9rence des couleurs, espaces, qualit\u00e9 des images.<\/p>\n      <p>Un site qui charge vite donne une bonne impression. Un site lent ou rempli d\u2019animations inutiles donne l\u2019effet inverse.<\/p>\n      <p>Dans le module GIF : un GIF peut \u00eatre utile s\u2019il explique quelque chose (une action, une d\u00e9monstration),\n        mais il doit rester court et l\u00e9ger.<\/p>\n      <p>Un GIF trop lourd, trop long ou trop flashy peut d\u00e9grader l\u2019exp\u00e9rience utilisateur.<\/p>\n\n    \n    <\/section>\n\n    <!-- ===================== GOUT ===================== -->\n    <section>\n      <h2>Go\u00fbt<\/h2>\n      <p><strong>Sens des saveurs :<\/strong> en design, on parle de \u201cbon go\u00fbt\u201d = sobri\u00e9t\u00e9 + coh\u00e9rence.<\/p>\n\n      <p>Un menu moderne est simple : peu de liens, un bouton \u201cContact\u201d, et une navigation claire.<\/p>\n      <p>On \u00e9vite : 5 polices diff\u00e9rentes, 10 couleurs, des effets partout.<\/p>\n      <p>On privil\u00e9gie : une palette de 2\u20133 couleurs, une typographie lisible, et des boutons coh\u00e9rents.<\/p>\n      <p>Dans Dreamweaver, le CSS devient plus facile \u00e0 organiser : on peut modifier rapidement une r\u00e8gle\n        et voir le r\u00e9sultat sans se perdre.<\/p>\n      <p>Mais attention : il faut comprendre ce qu\u2019on fait, sinon on empile des styles au hasard.<\/p>\n\n    \n    <\/section>\n\n    <!-- ===================== TOUCHER ===================== -->\n    <section id=\"toucher\">\n      <h2>Toucher<\/h2>\n      <p><strong>Sens du contact :<\/strong> sur le web, c\u2019est le clic, le survol, et l\u2019utilisation sur mobile.<\/p>\n\n      <p>Un site doit \u00eatre agr\u00e9able \u201cau doigt\u201d : boutons assez grands, espacements, liens clairs.<\/p>\n      <p>Les effets <code>:hover<\/code> sont utiles sur ordinateur (survol souris), par exemple pour un menu :<\/p>\n      <p>\u2014 le lien change de couleur<br>\n         \u2014 un fond appara\u00eet<br>\n         \u2014 une transition adoucit le changement<\/p>\n      <p>Sur mobile, il n\u2019y a pas vraiment de survol : il faut que la navigation reste claire sans hover.<\/p>\n      <p>Objectif : des interactions simples, compr\u00e9hensibles et rapides.<\/p>\n\n      <a class=\"haut\" href=\"#top\">⬆ Retour en haut<\/a>\n    <\/section>\n\n \n\n  <\/main>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
📄 Exercice sur les autres liens : Page Contact \/ Cr\u00e9dits<\/strong> \u2013 Consigne<\/h2>\n\n\n\n
La page Contact<\/strong> (ou Cr\u00e9dits<\/strong>) devra regrouper diff\u00e9rents types de liens HTML afin de d\u00e9montrer votre ma\u00eetrise.<\/p>\n\n\n\n
Elle devra contenir :<\/p>\n\n\n\n
    \n
  • ✅ Vos coordonn\u00e9es (nom, pr\u00e9nom, email)<\/li>\n\n\n\n
  • ✅ Un lien mailto<\/strong> permettant d\u2019envoyer un email<\/li>\n\n\n\n
  • ✅ Un lien t\u00e9l\u00e9phone<\/strong><\/li>\n\n\n\n
  • ✅ Un lien vers votre fichier PDF<\/strong> (dossier \u00e0 t\u00e9l\u00e9charger)<\/li>\n\n\n\n
  • ✅ Un lien vers un site externe de votre choix<\/strong><\/li>\n\n\n\n
  • ✅ Une image cliquable (par exemple votre logo) renvoyant vers l\u2019accueil<\/li>\n<\/ul>\n\n\n\n
    👉 L\u2019objectif est d\u2019utiliser la page Contact comme support pratique pour tester et d\u00e9montrer tous les types de liens \u00e9tudi\u00e9s.<\/p>\n","protected":false},"excerpt":{"rendered":"
    📄 Exercice sur les autres liens : Page Contact \/ Cr\u00e9dits \u2013 Consigne La page Contact (ou Cr\u00e9dits) devra regrouper<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-484","post","type-post","status-publish","format-standard","hentry","category-non-classe","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=484"}],"version-history":[{"count":9,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/484\/revisions"}],"predecessor-version":[{"id":1517,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/484\/revisions\/1517"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/categories?post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/tags?post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}