✨
Accessibilité numérique
  • Présentation du module
  • Séance 1
  • Séance 2
  • Séance 3
  • Séance 4
  • Séance 5
  • Séance 2 - S1 - BUT MMI
  • Astuces pour vos IDE
  • Ressources
    • Bibliographie / Sitographie
    • Outils de navigateur
Powered by GitBook
On this page
  • Images
  • Tableaux
  • Listes
  • Formulaires
  • Quelques ressources
  • Page complète

Was this helpful?

Séance 2 - S1 - BUT MMI

PreviousSéance 5NextAstuces pour vos IDE

Last updated 3 years ago

Was this helpful?

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

Tableaux

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

<table>
    <caption>Légende de mon tableau</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3"></th>
            <th</th>
        </tr>
    </tfoot>
</table>

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>

Formulaires

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

<form action="/action_page.php" method="post">
  <fieldset>
    <legend>Votre identité</legend>
    <label for="fname">Prénom :</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Nom :</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br>
    <label for="datenaissance">Date de naissance :</label><br>
    <input type="date" id="datenaissance" name="datenaissance"><br>
  </fieldset>

  <fieldset>
      <legend>Votre Adresse</legend>
      <label for="numero">N° :</label><br>
      <input type="text" id="numero" name="numero"><br>
      <label for="rue">Rue :</label><br>
      <input type="text" id="rue" name="rue"><br>
      <label for="codepostal">Code postal :</label><br>
      <input type="integer" id="codepostal" name="codepostal"><br>
      <label for="ville">Ville :</label><br>
      <input type="text" id="ville" name="ville"><br>
    </fieldset>

  <input type="submit" value="Submit">
</form>

Quelques ressources

Page complète

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

HTML figcaption Tag
Extrait de la documentation sur W3Schools.com
Logo
HTML table tag
Extrait de la documentation de W3Schools sur les tables
Logo
HTML caption tag
Extrait de la documentation de W3Schools sur Caption
Logo
HTML dl tag
Extrait de la documentation pour les listes "dl"
Logo
HTML fieldset tag
Extrait de la documentation pour la balise "fieldset"
Logo
HTML input tag
Extrait de la documentation pour les champs "input"
Logo
HTML5 Input Types: Where Are They Now? — Smashing MagazineSmashing Magazine
Page 1
Page 2
Logo
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1) — Smashing MagazineSmashing Magazine
Logo
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2) — Smashing MagazineSmashing Magazine
Logo
36 Most Beautiful CSS Forms Designed By Top Designers In 2022uiCookies
Logo