activité sur l'évolution du design web, sept pages de 1995 à 2026

2026-09-18 08:12:21 +02:00
parent ef1766256d
commit 66e3123da8
9 changed files with 1071 additions and 0 deletions
@@ -0,0 +1,136 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Cours NSI / SNT / Socio</title>
+
+<!-- 2002. Grande nouveaute : la feuille de style. Les couleurs et les polices
+     quittent enfin les balises pour se regrouper ici. En revanche la mise en
+     page repose toujours sur un tableau : les techniques CSS de positionnement
+     ne sont pas encore fiables d'un navigateur a l'autre.
+
+     Largeur fixe de 760 pixels, calee sur les ecrans 800x600 de l'epoque. -->
+
+<style type="text/css">
+body {
+  background-color: #6b7d94;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  color: #333333;
+  margin: 0;
+  padding: 16px 0;
+}
+#page {
+  width: 760px;
+  margin: 0 auto;
+  background-color: #ffffff;
+  border: 1px solid #44536b;
+}
+#entete {
+  background-color: #44536b;
+  color: #ffffff;
+  padding: 14px 18px;
+}
+#entete h1 { font-size: 18px; margin: 0; letter-spacing: 1px; }
+#entete .sous { font-size: 10px; color: #c3cedd; }
+#menu {
+  background-color: #eef1f5;
+  border-right: 1px solid #c3cedd;
+  width: 160px;
+  padding: 14px;
+  vertical-align: top;
+}
+#menu a { display: block; padding: 4px 0; border-bottom: 1px dotted #c3cedd; }
+#contenu { padding: 16px 20px; vertical-align: top; }
+h2 { font-size: 13px; color: #44536b; border-bottom: 1px solid #c3cedd; padding-bottom: 4px; }
+a { color: #1f4e8c; }
+a:hover { color: #cc3300; }
+ul.matieres { list-style: square; padding-left: 18px; line-height: 1.8; }
+#pied {
+  background-color: #eef1f5;
+  border-top: 1px solid #c3cedd;
+  padding: 10px 18px;
+  font-size: 10px;
+  color: #666666;
+}
+.badge {
+  border: 1px solid #44536b;
+  padding: 1px 5px;
+  font-size: 9px;
+  background-color: #ffffff;
+}
+</style>
+</head>
+
+<body>
+
+<div id="page">
+
+  <div id="entete">
+    <h1>Cours NSI / SNT / Socio</h1>
+    <span class="sous">Lycee Charlotte Perriand</span>
+  </div>
+
+  <!-- La mise en page reste un tableau, avec les attributs de l'epoque. -->
+  <table cellpadding="0" cellspacing="0" border="0" width="100%">
+  <tr>
+
+    <td id="menu">
+      <a href="#">Accueil</a>
+      <a href="#">NSI Premiere</a>
+      <a href="#">NSI Terminale</a>
+      <a href="#">SNT</a>
+      <a href="#">L3 Sociologie</a>
+      <a href="#">Contact</a>
+    </td>
+
+    <td id="contenu">
+      <h2>Bienvenue</h2>
+      <p>
+        Vous trouverez ici les cours, les exercices et les ressources de NSI,
+        de SNT et d'algorithmes des graphes en L3 de sociologie quantitative.
+      </p>
+
+      <h2>Les matieres</h2>
+      <ul class="matieres">
+        <li><a href="#">NSI Premiere</a> : Numerique et Sciences Informatiques</li>
+        <li><a href="#">NSI Terminale</a> : Numerique et Sciences Informatiques</li>
+        <li><a href="#">SNT</a> : Sciences Numeriques et Technologie</li>
+        <li><a href="#">L3 Sociologie</a> : Algorithmes des graphes</li>
+      </ul>
+
+      <h2>Horaires</h2>
+      <table cellpadding="4" cellspacing="0" border="0" width="100%" style="border: 1px solid #c3cedd;">
+      <tr style="background-color: #eef1f5;">
+        <th align="left">Niveau</th><th align="left">Horaire hebdomadaire</th>
+      </tr>
+      <tr><td>Seconde</td><td>1h30</td></tr>
+      <tr style="background-color: #f7f9fb;"><td>Premiere</td><td>4h</td></tr>
+      <tr><td>Terminale</td><td>6h</td></tr>
+      </table>
+    </td>
+
+  </tr>
+  </table>
+
+  <div id="pied">
+    Derniere mise a jour : 12 septembre 2002 &nbsp;|&nbsp;
+    <span class="badge">XHTML 1.0</span>
+    <span class="badge">CSS</span>
+    &nbsp;|&nbsp; Optimise pour 800x600
+    <div style="margin-top: 8px;">
+      <a href="1995.html">1995</a> |
+      <a href="1998.html">1998</a> |
+      <strong>2002</strong> |
+      <a href="2005.html">2005</a> |
+      <a href="2010.html">2010</a> |
+      <a href="2020.html">2020</a> |
+      <a href="2026.html">2026</a>
+    </div>
+  </div>
+
+</div>
+
+</body>
+</html>