MMI Nouméa
Accessibilité (S1)
Accessibilité (S1)
  • Objectifs
  • Introduction
  • Séance 1
  • Séance 2
  • Séance 3
Powered by GitBook
On this page
  • Les autres balises
  • Images
  • Listes
  • Quelques ressources
  • Page complète
  • Le panier
  • Quelques ressources
  • Abandon de panier...
  • La réglementation française
  • Exercice : tableau et formulaire

Séance 3

PreviousSéance 2

Last updated 2 years ago

Les autres balises

L'objectif de cette séance est d'apprendre à utiliser les bonnes balises HTML, pour produire un code de meilleure qualité, et plus accessible.

Nous verrons notamment les bons usages pour les images, les tableaux et les formulaires. Ainsi que le choix d'une structure de page adaptée au contenu.

L'objectif de cette séance n'est pas de se focaliser sur le CSS, mais uniquement sur le code HTML.

Images

Reproduire cette mise en page (avec l'image de votre choix) en écrivant un code HTML juste et de qualité

<figure>
        <img src="image.png" alt="Description de l'image">
        <figcaption>Fig.1 Légende de l'image</figcaption>
</figure>
    <!--
        on peut utiliser longdesc pour apporter une description plus longue de l'image
        l'alternative "alt" est obligatoire, même si elle est vide pour les images décoratives.
    -->

Listes

Reproduire cette mise en page (avec les données de votre choix) en écrivant un code HTML juste et de qualité.

<dl>
    <dt>Processeur</dt>
    <dd>Intel i7</dd>
    <dt>Mémoire Ram</dt>
    <dd>16Go</dd>
    <dt>Carte Graphique</dt>
    <dd>Radeon xxxx</dd>
</dl>

Quelques ressources

Page complète

Pour les pages ci-dessus, quelles balises utiliseriez vous pour définir la structure globale ?

Le panier

Quelques ressources

Abandon de panier...

La réglementation française

Exercice : tableau et formulaire

En mélangeant les deux concepts vus précédemment et en vous inspirant de votre expérience, concevoir un panier d'achat, contenant au moins 4 produits, les mentions obligatoires (total TTC, total HT, TVA, frais, frais de livraisons, la quantité de chaque produit, son prix unitaire et son prix total).

Vous permettrez à l'utilisateur de modifier les quantités des produits (y compris en supprimer).

L'objectif n'est pas ici de faire fonctionner le panier, mais simple d'en concevoir la mise en page.

Vous pouvez pour cet exercice utiliser des librairies CSS si vous le souhaitez.

LogoHTML figcaption Tag
Extrait de la documentation sur W3Schools.com
LogoHTML dl tag
Extrait de la documentation pour les listes "dl"
LogoHTML5 Input Types: Where Are They Now? — Smashing MagazineSmashing Magazine
LogoUX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1) — Smashing MagazineSmashing Magazine
LogoUX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2) — Smashing MagazineSmashing Magazine
Logo36 Most Beautiful CSS Forms Designed By Top Designers In 2022uiCookies
LogoPanier d’achat et e-commerce : définition et 5 exemples concrets pour vous inspirerShopify
Logo10 paniers e-commerce dont vous devriez vous inspirer - Codeur BlogCodeur.com
Logo7 conseils pour réduire l'abandon de panier - SendinblueSendinblue
Image à reproduire
Image à reproduire
Image 1
Image 2
LogoE-commerce : 12 conseils pour réduire les abandons de panierBDM
LogoFaire du commerce en ligne (e-commerce) : règles à respecterservicepublicfr
LogoE-commerce & loi Hamon : comment mettre aux normes son tunnel de commandejournaldunet
LogoQuelles mentions obligatoires pour un site internet (ecommerce) ? | Assistant-juridique.fr