Drapeau

<!DOCTYPE html>
<html lang="fr">
  <!-- librement inspiré de DIU-EIL-WEB.html Université de Lyon 2019 -->
  <head>
    <meta charset="utf-8" />
    <title>1ères NSI : programmation WEB</title>
    <!-- ici on lie le style CSS externe avec la balise <link> -->
    <link href="1NSI-WEB-1.css" rel="stylesheet" media="all" type="text/css">
  </head>
  <body>
    <header id="header">
      <h1>Activité pratique &laquo;découverte de la programmation web&raquo;</h1>
      <h2>codes couleur, dimensions et style CSS</h2>
    </header>
    <main>
      <h2>Construction de drapeaux "simples" de la France, de l'Italie et du Mali à bandes verticales par codage HMTL plutôt que par insertion d'image.</h2>
      <table style="width:50%;" border="1" cellspacing="2" cellpadding="3" class="Tableau1">
        <colgroup>
          <col width="30%"/>
          <col width="70%"/>
        </colgroup>
        <tr>
          <td style="text-align:left;width:30%">
            <p>France</p>
          </td>
          <td bgcolor="#bdbdbd" align="center">
            <table style="width:80%" border="0" cellspacing="0">
              <tr border="1">
                <td height="250px" width="30%" bgcolor="#022396"></td>
                <td height="250px" width="30%" bgcolor="#ffffff"></td>
                <td height="250px" width="30%" bgcolor="#ed2839"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table style="width:50%;" border="1" cellspacing="2" cellpadding="3" class="Tableau1">
        <colgroup>
          <col width="30%"/>
          <col width="70%"/>
        </colgroup>
        <tr>
          <td style="text-align:left;width:30%">
            <p>Italie</p>
          </td>
          <td bgcolor="#bdbdbd" align="center">
            <table style="width:80%" border="0" cellspacing="0">
              <tr border="1">
                <td height="250px" width="30%" bgcolor="#02a104"></td>
                <td height="250px" width="30%" bgcolor="#ffffff"></td>
                <td height="250px" width="30%" bgcolor="#ed2839"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table style="width:50%;" border="1" cellspacing="2" cellpadding="3" class="Tableau1">
        <colgroup>
          <col width="30%"/>
          <col width="70%"/>
        </colgroup>
        <tr>
          <td style="text-align:left;width:30%">
            <p>Mail</p>
          </td>
          <td bgcolor="#bdbdbd" align="center">
            <table style="width:80%" border="0" cellspacing="0">
              <tr border="1">
                <td height="250px" width="30%" bgcolor="#01b146"></td>
                <td height="250px" width="30%" bgcolor="#f6c902"></td>
                <td height="250px" width="30%" bgcolor="#c60024"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <h1></h1><!-- Ligne vide -->
    </main>
    <footer id="footer">
      Créé par D.VAITON - Lycée JM CARRIAT - Bourg-en-Bresse - 10 Janvier 2020
    </footer>
  </body>
</html>


/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=7080s0kllllaFw0g0qFqFg0w0aF */
/* inspiré de DIU-EIL-WEB.css Univesité de Lyon 2019 */


header, menu, footer {
    padding: 1px 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
    background-color: #daa684;
    text-align: center;
    border-radius: 1em 1em 1em 1em;
}

footer {
    background-color: #46aaaa;
    text-align: center;
    clear: both;
    border-radius: 1em 1em 1em 1em;
}

h1 {
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-size: 2em;
}

h2 {
    font-family: Geneva, Verdana, Tahoma, sans-serif;
    font-size: 1.2em;
}

p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    font-size: 2.5em;
}

/*
nav  {
    padding-left: 2em;
    display: table-cell;
    width: 12em;
    background-color: #AA7239;
}
*/

main {
    display: table;
    margin: auto;
    width: 100%;
    background-color: #ffffff;
}
/*
section {
    padding-left: 4em;
    padding-right: 4em;
}
*/

/*
aside {
  width: 30%;
  padding-left: .5rem;
  margin-left: .5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #AA7239;
  font-style: italic;
}
*/
.dot {
  pointer-events: none;
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  position:absolute;
}