exercices sur les ancres
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercice – Ancres & scroll vertical (Les 5 sens)</title>
<style>
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
background: #fff;
color: #111;
}
/* Menu fixe */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #111;
padding: 14px 16px;
display: flex;
justify-content: center;
gap: 14px;
z-index: 10;
flex-wrap: wrap;
}
nav a {
color: #fff;
text-decoration: none;
padding: 8px 12px;
border-radius: 10px;
font-size: 14px;
}
nav a:hover {
background: #f97316;
color: #111;
font-weight: bold;
}
main {
max-width: 900px;
margin: auto;
padding: 90px 20px 40px; /* marge haute pour laisser la place au menu */
}
h1 { margin-top: 0; }
section {
padding: 20px;
border: 1px solid #eee;
border-radius: 16px;
margin: 0 0 120px; /* gros espace pour le scroll */
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
scroll-margin-top: 90px; /* évite que le titre soit caché sous le menu */
}
h2 {
margin-top: 0;
border-left: 5px solid #111;
padding-left: 12px;
}
.haut {
display: inline-block;
margin-top: 18px;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 12px;
text-decoration: none;
color: #111;
}
.haut:hover { background: #f5f5f5; }
.consigne {
background: #f8f8f8;
border-radius: 16px;
padding: 18px;
margin: 18px 0 30px;
}
.tag {
display: inline-block;
padding: 4px 10px;
border: 1px solid #eee;
border-radius: 999px;
margin-right: 8px;
font-size: 12px;
color: #333;
background: #fff;
}
</style>
</head>
<body>
<nav>
<a href="#vue">Vue</a>
<a href="#ouie">Ouïe</a>
<a href="#odorat">Odorat</a>
<a href="#gout">Goût</a>
<a href="#toucher">Toucher</a>
</nav>
<main id="top">
<h1>Exercice : les ancres (scroll vertical)</h1>
<div class="consigne">
<p style="margin:0;">
<span class="tag">Objectif</span>
Comprendre comment fonctionne un lien <strong>vers une ancre</strong> : <code>href="#id"</code>.<br>
Cliquez sur le menu (en haut) pour faire défiler la page. Puis repérez dans le code
où se trouvent les <strong>id</strong>.Seul la vue et le toucher fonctionne.
Corrige les autres.
</p>
</div>
<!-- ===================== VUE ===================== -->
<section id="vue">
<h2>Vue</h2>
<p><strong>Faculté de voir :</strong> on perçoit la forme, la couleur, les contrastes et la composition.</p>
<p>En web design, la vue est centrale : la hiérarchie des titres (H1, H2…), l’alignement, les marges et la typographie
guident l’utilisateur.</p>
<p>Exemple concret : sur une landing page, on doit repérer immédiatement le titre, le bouton d’action et l’image principale.</p>
<p>Avant de coder, on peut analyser un site : structure, lisibilité, cohérence graphique, adaptation mobile.</p>
<p>Quand on prépare des images dans Photoshop : on choisit le bon format (JPEG/PNG/WebP), on réduit le poids et on garde une bonne qualité.</p>
<p>Plus la page est claire visuellement, plus elle est efficace : l’utilisateur comprend en quelques secondes ce que propose le site.</p>
<a class="haut" href="#top">⬆ Retour en haut</a>
</section>
<!-- ===================== OUIE ===================== -->
<section>
<h2>Ouïe</h2>
<p><strong>Sens des sons :</strong> utile pour comprendre l’ambiance et le rythme.</p>
<p>Sur un site, le son est rarement automatique (et c’est mieux !). On peut l’utiliser seulement si c’est pertinent :</p>
<p>— Une vidéo de présentation avec contrôle (lecture/pause).<br>
— Un projet artistique (portfolio, expo).<br>
— Un site pédagogique, avec un bouton “écouter”.</p>
<p>Attention : un son qui démarre tout seul peut gêner en classe, au travail ou sur mobile.</p>
<p>Dans une landing page moderne, on privilégie le calme : un design propre, du texte lisible, et des interactions discrètes.</p>
<p>Si on veut animer une page, on préfère souvent une animation CSS légère plutôt qu’un média lourd.</p>
</section>
<!-- ===================== ODORAT ===================== -->
<section>
<h2>Odorat</h2>
<p><strong>Sens des odeurs :</strong> dans le web, on parle plutôt “d’impression”.</p>
<p>On ne “sent” pas un site, mais on le ressent : est-il professionnel, moderne, brouillon, agréable ?</p>
<p>Cette impression vient de détails simples : alignements, cohérence des couleurs, espaces, qualité des images.</p>
<p>Un site qui charge vite donne une bonne impression. Un site lent ou rempli d’animations inutiles donne l’effet inverse.</p>
<p>Dans le module GIF : un GIF peut être utile s’il explique quelque chose (une action, une démonstration),
mais il doit rester court et léger.</p>
<p>Un GIF trop lourd, trop long ou trop flashy peut dégrader l’expérience utilisateur.</p>
</section>
<!-- ===================== GOUT ===================== -->
<section>
<h2>Goût</h2>
<p><strong>Sens des saveurs :</strong> en design, on parle de “bon goût” = sobriété + cohérence.</p>
<p>Un menu moderne est simple : peu de liens, un bouton “Contact”, et une navigation claire.</p>
<p>On évite : 5 polices différentes, 10 couleurs, des effets partout.</p>
<p>On privilégie : une palette de 2–3 couleurs, une typographie lisible, et des boutons cohérents.</p>
<p>Dans Dreamweaver, le CSS devient plus facile à organiser : on peut modifier rapidement une règle
et voir le résultat sans se perdre.</p>
<p>Mais attention : il faut comprendre ce qu’on fait, sinon on empile des styles au hasard.</p>
</section>
<!-- ===================== TOUCHER ===================== -->
<section id="toucher">
<h2>Toucher</h2>
<p><strong>Sens du contact :</strong> sur le web, c’est le clic, le survol, et l’utilisation sur mobile.</p>
<p>Un site doit être agréable “au doigt” : boutons assez grands, espacements, liens clairs.</p>
<p>Les effets <code>:hover</code> sont utiles sur ordinateur (survol souris), par exemple pour un menu :</p>
<p>— le lien change de couleur<br>
— un fond apparaît<br>
— une transition adoucit le changement</p>
<p>Sur mobile, il n’y a pas vraiment de survol : il faut que la navigation reste claire sans hover.</p>
<p>Objectif : des interactions simples, compréhensibles et rapides.</p>
<a class="haut" href="#top">⬆ Retour en haut</a>
</section>
</main>
</body>
</html>📄 Exercice sur les autres liens : Page Contact / Crédits – Consigne
La page Contact (ou Crédits) devra regrouper différents types de liens HTML afin de démontrer votre maîtrise.
Elle devra contenir :
- ✅ Vos coordonnées (nom, prénom, email)
- ✅ Un lien mailto permettant d’envoyer un email
- ✅ Un lien téléphone
- ✅ Un lien vers votre fichier PDF (dossier à télécharger)
- ✅ Un lien vers un site externe de votre choix
- ✅ Une image cliquable (par exemple votre logo) renvoyant vers l’accueil
👉 L’objectif est d’utiliser la page Contact comme support pratique pour tester et démontrer tous les types de liens étudiés.