Skip to content

Latest commit

 

History

History
162 lines (139 loc) · 4.38 KB

début_html.adoc

File metadata and controls

162 lines (139 loc) · 4.38 KB
Raw

Début HTML

Code source mémo

index.html

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Le titre de la page  -->
  <title>Cours HTML</title>
  <!-- Icone de l'onglet -->
  <link rel="shortcut icon" href="html-logo.png" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
</head>

<body>
  <header>
    <h1>Texte - Titre H1</h1>
    <p>
      <em>em pour mettre en italique</em>,
      <strong>strong pour mettre en gras</strong>
      <span>L'élement en span ne revient pas à la ligne</span>.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
      cumque ratione veniam officiis nulla a debitis at facilis sed
      dignissimos.
    </p>
  </header>

  <section>
    <div>
      <h2>Photo - Titre H2</h2>
      <img src="./img-1.jpg" alt="image-arbre" height="200" />
    </div>

    <div>
      <h3>Liste - Titre H3</h3>
      <ul>
        <li>UL = unordered list</li>
        <li>UL = unordered list</li>
        <li>UL = unordered list</li>
      </ul>
      <ol>
        <li>OL = ordered list</li>
        <li>OL = ordered list</li>
        <li>OL = ordered list</li>
      </ol>
    </div>

    <div>
      <h4>Tableaux - Titre H4</h4>
      <table border="4" cellpadding="10" cellspacing="4" style="text-align: center">
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
          </tr>
          <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
          </tr>
          <tr>
            <td colspan="3">Row 3 Cell 1</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div>
      <h5><span>&#9814;</span> Liens - Titre H5</h5>
      <a href="https://htmlcheatsheet.com/" target="_blank">HTML Cheatsheet</a>
      <br />
      <a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank">Icones natifs en HTML</a>
    </div>

    <div>
      <h6><i class="fas fa-video"></i> Vidéo - Titre H6</h6>
      <video src="video.mp4" height="150" autoplay loop muted></video>
    </div>
  </section>
  <br />
  <!-- Formulaires en HTML -->
  <section>
    <h2>Formulaire</h2>
    <form action="/action.php" method="post">
      <label for="name">Nom</label>
      <input id="name" type="text" placeholder="Entrez votre nom" /><br />

      <label for="number">Entrez votre age</label>
      <input type="number" id="number-age" value="15" oninput="document.getElementById('range-age').value=this.value">
      <input type="range" id="range-age" min="0" max="100"
        oninput="document.getElementById('number-age').value=this.value"><br />

      <!-- Input select -->
      <label for="gender">Genre</label>
      <select id="gender">
        <option selected="selected" value="Homme">Homme</option>
        <option value="Femme">Femme</option>
      </select><br />

      <!-- Input radio -->
      <div>
        <input type="radio" name="type" id="human" checked />
        <label for="human">Humain</label>

        <input type="radio" name="type" id="dog" />
        <label for="dog">Chien</label>

        <input type="radio" name="type" id="cat" />
        <label for="cat">Chat</label>
      </div>

      <textarea cols="20" rows="5" placeholder="Votre message..."></textarea><br />

      <!-- Input Checkbox -->
      <label><input type="checkbox" />Accepter les CGV</label> <br />
      <input type="submit" value="Submit" />
    </form>
  </section>
  <br />
  <!-- Mail & envoi de fichiers -->
  <footer>
    <a href="mailto:[email protected]">Ecrivez-moi !</a>
    <br />
    <a href="notice.txt" download="nom-du-fichier">Télécharger la notice</a>
    <details>
      <summary>Plus d'infos</summary>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum,
        repellendus.
      </p>
    </details>
  </footer>
</body>

</html>