# Séance 3

## 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.

{% hint style="info" %}
L'objectif de cette séance n'est pas de se focaliser sur le CSS, mais uniquement sur le code HTML.
{% endhint %}

## Images

<figure><img src="/files/jUp46Sh27DB539defyli" alt=""><figcaption><p>Image à reproduire</p></figcaption></figure>

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

```html
<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.
    -->
```

{% embed url="<https://www.w3schools.com/tags/tag_figcaption.asp>" %}
Extrait de la documentation sur W3Schools.com
{% endembed %}

## Listes

<figure><img src="/files/Tqmq7gMIbsAuABKl1yPj" alt=""><figcaption><p>Image à reproduire</p></figcaption></figure>

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

```html
<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>
```

{% embed url="<https://www.w3schools.com/tags/tag_dl.asp>" %}
Extrait de la documentation pour les listes "dl"
{% endembed %}

### Quelques ressources

{% embed url="<https://www.smashingmagazine.com/2019/01/html5-input-types#a5>" %}

{% embed url="<https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1>" %}

{% embed url="<https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2>" %}

{% embed url="<https://uicookies.com/beautiful-css-forms>" %}

## Page complète

<div><figure><img src="/files/Ub0hqtw7rD3stnhr9QuJ" alt=""><figcaption><p>Image 1</p></figcaption></figure> <figure><img src="/files/zun4M08udFi3HAQ3cPiN" alt=""><figcaption><p>Image 2</p></figcaption></figure></div>

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

## Le panier

## Quelques ressources

{% embed url="<https://www.shopify.com/fr/blog/panier-achat>" %}

{% embed url="<https://www.codeur.com/blog/panier-e-commerce-reussi/>" %}

### Abandon de panier...

{% embed url="<https://fr.sendinblue.com/blog/7-conseils-pour-reduire-labandon-de-panier/>" %}

{% embed url="<https://www.blogdumoderateur.com/e-commerce-conseils-reduire-abandons-panier/>" %}

### La réglementation française

{% embed url="<https://entreprendre.service-public.fr/vosdroits/F23455>" %}

{% embed url="<https://www.journaldunet.com/ebusiness/commerce/1137770-e-commerce-loi-hamon-comment-mettre-aux-normes-son-tunnel-de-commande/>" %}

{% embed url="<https://www.assistant-juridique.fr/mentions_obligatoires_ecommerce.jsp>" %}

## 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cours.davidannebicque.fr/mmi-noumea/accessibilite-s1/seance-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.