thibaudcolas/avance.html

## avance.html
<!--
    Cette page est en HTML5.
    Certaines balises viennent s'ajouter à celles vues en TP,
    mais elles ne sont pas plus difficiles à utiliser.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <title>Titre de ma page</title>

        <!-- Description de la page pour les moteurs de recherche (Google, Bing, etc) -->
        <meta name="description" content="Description de ma page">

        <!-- Styles prédéfinis à NE PAS TOUCHER. Vos styles s'ajouteront par dessus. -->
        <link rel="stylesheet" href="css-avance.css">
        <!-- Contient votre code CSS. -->
        <link rel="stylesheet" href="styles.css">

    </head>
    <body>
        <!-- Ici le header (et le div qui l'encapsule) contiennent le titre de la page et un menu. -->
        <div class="header-container">
            <header class="wrapper clearfix">
                <h1 class="title">Titre de ma page</h1>
                <nav>
                    <ul>
                        <!-- Pour ajouter un lien à votre menu, copier/coller l'un des liens préexistants et remplacer son texte et son href. -->
                        <li><a href="http://www.glin102.univ-montp2.fr/">GLIN102</a></li>
                        <li><a href="http://www.univ-montp2.fr/">UM2</a></li>
                        <li><a href="autrepage.html">Autre page</a></li>
                    </ul>
                </nav>
            </header>
        </div>

        <div class="main-container">
            <div class="main wrapper clearfix">


                <!--

                    Le contenu de votre page doit être placé ici.
                    Exemple de contenu :
                    quand j'ai passé mon C2I, j'avais eu à rendre un document HTML sur la loi LOPSI.
                -->

                <h2>La loi LOPSI</h2>
                <p>Les mesures phare de la <acronym title="Loi d'orientation et de programmation pour la sécurité intérieure">LOPSI</acronym> sont :</p>

                <h3>Réorganisation institutionnelle</h3>
                <p>
                La LOPSI renforce le rôle des préfets tout en créant les <em>Conseils locaux de sécurité et de prévention de la délinquance</em> et les <em>Groupements d'intervention régionnaux</em> (GIR).
                La gendarmerie conserve son statut particulier de militaires mais passe sous le commandement du ministère de l'intérieur.
                </p>

                <h3>Fichiers informatiques</h3>
                <p>
                La loi permet aux officiers de police judiciaire (OPJ) de saisir à distance <em>tout fichier ou renseignement paraîssant nécessaire à la manifestation de la vérité</em>
                avec l'autorisation d'un juge. Elle prévoit également la fusion des fichiers de police et de gendarmerie <a href="http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_traitement_des_infractions_constat%C3%A9es" title="Système de traitement des infractions constatées">STIC</a>
                et <a href="http://fr.wikipedia.org/wiki/Syst%C3%A8me_judiciaire_de_documentation_et_d%27exploitation" title="Système judiciaire de documentation et d'exploitation">JUDEX</a> en un fichier <a href="http://fr.wikipedia.org/wiki/ARIANE_(fichier)" title="Système d'application de rapprochement, d'identification et d'analyse pour les enquêteurs">ARIANE</a>.
                </p>

                <!-- Fin de l'exemple. -->

            </div> <!-- #main -->
        </div> <!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
                <hr/>
                <p>Site web réalisé par <strong>PRÉNOM NOM</strong> dans le cadre du cours de <a href="http://www.glin102.univ-montp2.fr/">GLIN102</a>.</p>
            </footer>
        </div>
    </body>
</html>

## css-avance.css
/*
  ---------------------------------------------------------------------
  Styles préappliqués - NE PAS TOUCHER.
  ---------------------------------------------------------------------
*/


/*! normalize.css v1.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Addresses margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/*
 * Addresses `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ===================
    ALL: Orange Theme
   =================== */

.header-container {
    border-bottom: 20px solid #e44d26;
}

.footer-container,
.main aside {
    border-top: 20px solid #e44d26;
}

.header-container,
.footer-container,
.main aside {
    background: #f16529;
}

.title {
    color: white;
}

/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
}

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
    background: #e44d26;
}

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 30px 0;
}

.main article h1 {
    font-size: 2em;
}

.main aside {
    color: white;
    padding: 0px 5% 10px;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */

    nav a {
        float: left;
        width: 27%;
        margin: 0 1.7%;
        padding: 25px 2%;
        margin-bottom: 0;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

    .header-container,
    .main aside {
        -webkit-box-shadow: 0 5px 10px #aaa;
           -moz-box-shadow: 0 5px 10px #aaa;
                box-shadow: 0 5px 10px #aaa;
    }

/* ============
    WIDE: Menu
   ============ */

    .title {
        float: left;
    }

    nav {
        float: right;
        width: 38%;
    }

/* ============
    WIDE: Main
   ============ */

    .main article {
        float: left;
        width: 57%;
    }

    .main aside {
        float: right;
        width: 28%;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

## index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><style>html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body{
  color:#444;
  font-family:Georgia, Palatino, 'Palatino Linotype', Times,
              'Times New Roman', serif,
              "Hiragino Sans GB", "STXihei", "微软雅黑";
  font-size:12px;
  line-height:1.5em;
  background:#fefefe;
  width: 45em;
  margin: 10px auto;
  padding: 1em;
  outline: 1300px solid #FAFAFA;
}

a{ color: #0645ad; text-decoration:none;}
a:visited{ color: #0b0080; }
a:hover{ color: #06e; }
a:active{ color:#faa700; }
a:focus{ outline: thin dotted; }
a:hover, a:active{ outline: 0; }

span.backtick {
  border:1px solid #EAEAEA;
  border-radius:3px;
  background:#F8F8F8;
  padding:0 3px 0 3px;
}

::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
::selection{background:rgba(255,255,0,0.3);color:#000}

a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
a::selection{background:rgba(255,255,0,0.3);color:#0645ad}

p{
margin:1em 0;
}

img{
max-width:100%;
}

h1,h2,h3,h4,h5,h6{
font-weight:normal;
color:#111;
line-height:1em;
}
h4,h5,h6{ font-weight: bold; }
h1{ font-size:2.5em; }
h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
h3{ font-size:1.5em; }
h4{ font-size:1.2em; }
h5{ font-size:1em; }
h6{ font-size:0.9em; }

blockquote{
color:#666666;
margin:0;
padding-left: 3em;
border-left: 0.5em #EEE solid;
}
hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }


pre , code, kbd, samp {
  color: #000;
  font-family: monospace;
  font-size: 0.88em;
  border-radius:3px;
  background-color: #F8F8F8;
  border: 1px solid #CCC;
}
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px;}
pre code { border: 0px !important; }
code { padding: 0 3px 0 3px; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
li p:last-child { margin:0 }
dd { margin: 0 0 0 2em; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

@media only screen and (min-width: 480px) {
body{font-size:14px;}
}

@media only screen and (min-width: 768px) {
body{font-size:16px;}
}

@media print {
  * { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; }
  body{font-size:12pt; max-width:100%;}
  a, a:visited { text-decoration: underline; }
  hr { height: 1px; border:0; border-bottom:1px solid black; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page :left { margin: 15mm 20mm 15mm 10mm; }
  @page :right { margin: 15mm 10mm 15mm 20mm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}</style></head><body><h1 id="revisions-pour-le-cc3">Révisions pour le CC3</h1>

<p>Le CC3 est le dernier examen de GLIN102. Il prendra la forme d'un QCM (comme pour le CC1) de 45minutes.</p>

<p>Les questions porteront sur l'ensemble du programme de GLIN102 :</p>

<ul>
<li>Les ordinateurs en général</li>
<li>Le système UNIX et ses commandes</li>
<li>Navigateurs web</li>
<li>Traitement de texte</li>
<li>Tableur et feuilles de calcul</li>
<li>Présentations / diaporamas</li>
<li>Pages web en HTML et CSS</li>
<li>... et j'en oublie sûrement.</li>
</ul>

<p><a href="http://www.glin102.univ-montp2.fr/controleur/index.php?page=cc3">Informations sur le site de GLIN102</a></p>

<h2 id="exemples-de-questions">Exemples de questions</h2>

<p>Un examen semblable au vôtre est disponible gratuitement et anonymement sur le site de l'université de Perpignan :</p>

<p><a href="https://qcm-c2i1.univ-perp.fr/anonyme.php">https://qcm-c2i1.univ-perp.fr/anonyme.php</a></p>

<p>Entrez une adresse mail, faites le test et vos résultats vous seront envoyés.</p>

<h2 id="durant-lexamen">Durant l'examen</h2>

<p>Les documents électroniques sont autorisés, ainsi que les recherches sur internet.
Mes conseils :</p>

<ul>
<li>Commencez par donner toutes les réponses dont vous êtes sûrs</li>
<li>Puis faites le tour des questions restantes et faites quelques recherches dans vos cours</li>
<li>Si certaines questions vous résistent encore, cherchez leurs mots-clef sur Google ou Wikipedia</li>
</ul>

<h2 id="pour-reviser-le-tp8">Pour réviser le TP8</h2>

<p>Voici une correction du TP8 : c'est le code obtenu une fois le TP fini.
Il est composé de :</p>

<ul>
<li><a href="simpson1.html">simpson1.html</a></li>
<li><a href="simpson2.html">simpson2.html</a></li>
<li><a href="styleSimpson.css">styleSimpson.css</a></li>
</ul>

<p>Vous pouvez visualiser le résultat en ligne, ou bien télécharger les fichiers et les utiliser sur votre ordinateur.</p>

<p>Pour travailler sur ces fichiers chez vous, je vous conseille d'installer un éditeur de texte spécifique :  </p>

<ul>
<li>Sur Windows, Notepad++ : <a href="http://notepad-plus-plus.org/">http://notepad-plus-plus.org/</a></li>
<li>Sur Mac, TextWrangler : <a href="http://www.barebones.com/products/textwrangler/">http://www.barebones.com/products/textwrangler/</a></li>
<li>Sur Linux, gedit, kate ou n'importe quel éditeur colorant correctement les balises HTML</li>
</ul>

<p>Ce code est rempli de commentaires pour vous aider à comprendre le rôle des différentes balises.</p>

<p>Rappel : Vous pouvez faire un click droit sur la page et utiliser la fonction "Voir le code source", ou bien utiliser le raccourci __ CTRL + U __ pour visualiser le code HTML.</p>

<h2 id="pour-aller-plus-loin-en-html-css">Pour aller plus loin en HTML / CSS</h2>

<p>J'ai adjoint à la correction un exemple de page web écrite avec les dernières avancées en matière de HTML et CSS. </p>

<ul>
<li><a href="avance.html">avance.html</a></li>
<li><a href="styles.css">styles.css</a></li>
</ul>

<p>Pour les plus motivés, vous pouvez utiliser cette page comme base pour vos révisions, et tester ainsi les balises découvertes durant le TP dans un autre cadre.</p>

<p>Pour vous aider dans vos révisions, voici une documentation de référence sur les balises HTML : <br />
<a href="https://developer.mozilla.org/fr/docs/HTML/Element">https://developer.mozilla.org/fr/docs/HTML/Element</a></p>
</body>

## simpson1.html
<!--
  HTML est un langage permettant de structurer des documents à l'aide de balises (tags en anglais).
  Tous les sites web de la planète utilisent HTML, assorti d'autres technologies selon les cas.

  Les balises sont des éléments ayant des sens différents les un des autres et dont
  la combinaison forme un arbre dont la racine est la balise <html></html>.
  Les balises peuvent contenir du texte, ou bien d'autres balises, et peuvent également avoir des attributs :
  les attributs sont des informations additionnelles, par exemple, ici la balise <html> a un attribut lang="fr"
  pour que le navigateur et les moteurs de recherche sachent que la page web est en français.

  Exemple :
  <a href="http://example.org/">Exemple</a>

  Ici, on a créé un lien qui conduira vers la cible indiquée dans l'attribut href. Le texte du lien (affiché sur la page) est "Exemple".

  Si HTML définit la structure du document (le "fond"), sa présentation ("forme") est assurée par du code CSS.
  CSS n'est pas un langage de balises mais de règles. On définit une règle de la manière suivante :

  a {
    color: tomato;
    font-weight: bold;
  }
  Ici, on dit que tous les liens (balise a) seront de couleur tomate ("tomato") et seront en gras.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

  <!--
      <head> : contient les informations générales sur la page telles que :
      - Son titre : balise <title>, affiché dans la fenêtre du navigateur
        et utilisé dans les favoris du navigateur.
      - Le type de contenu et l'encodage de la page : balise <meta http-equiv="" content="">
      - Le/les fichiers CSS à utiliser : balise(s) <link rel="stylesheet" href="fichier.css">,
        le CSS permet de définir des règles de présentation du document.

      Pour aller plus loin :
      <head> peut aussi contenir des balises définissant :
      - une icône de favoris pour la page, ex : <link rel="shortcut icon" href="favicon.ico">
      - une description de la page pour les moteurs de recherche, ex : <meta name="description" content="Initiation au HTML et CSS">
      - un lien vers un fichier JavaScript, permettant d'animer la page
      - et bien d'autres informations.
  -->
  <head>
    <title>Les Simpsons - Présentation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- media="screen" -> Feuille de styles pour les écrans. On pourrait aussi avoir media="print" par ex. -->
    <link rel="stylesheet" media="screen" href="styleSimpson.css">
  </head>

  <!--
      <body> : contient le contenu affiché de la page, tout ce qui est visible dans la fenêtre du navigateur.
      Généralement, le contenu de <body> est séparé en 3/4 sections :
      - Une section "en-tête", "bannière" ou encore "header", correspondant au haut de page. Contient par exemple
        le logo du site web, son nom, certains contrôles comme un formulaire de connexion par exemple.
      - Une section "menu" ou "navigation" contenant des liens internes vers les autres pages du site web.
        Cette section est parfois intégrée dans la section "en-tête".
      - Une section "corps", "main", "contenu" : le contenu principal de la page, ce en quoi les visiteurs
        de la page seraient intéressés. Cette section est différente d'une page à l'autre d'un même site.
      - Une section "pied de page" ou "footer", servant à donner des informations sur la page / le site comme son auteur.

      Ces sections sont matérialisées par des balises <div> : ces balises servent comme conteneurs pour former des
      groupes logiques de balises.
      Comme toutes les balises, les <div> peuvent avoir des id (identifiants, uniques) ou des classes.
      Ces propriétés sont utilisées en CSS pour cibler certaines balises particulières de la page.

      Par exemple, pour des balises
        <div id="corps" class="conteneur">...</div>
        et une autre <div id="menu" class="conteneur"></div> :

      #corps {
        /* Styles spécifiques à la balise id="corps". */
      }

      #menu {
        /* Styles du menu. */
      }

      .conteneur {
        /* Styles communs au corps et au menu. */
      }

      Pour aller plus loin :
      La dernière version de HTML, HTML5, introduit de nouvelles balises :
      - <header>, remplaçant les <div id="entete"> qu'on trouve sur de nombreuses pages.
      - <footer>, remplaçant les <div id="pieddepage">
      - et des balises <section>, permettant de limiter l'usage abusif de <div> dans certains sites.
  -->

  <body>
    <div id="en_tete">
      <h1>Les Simpson</h1>
    </div>

    <div id="menu">
      <h3>Menu</h3>
      <ul>
        <li><a href="simpson1.html">Présentation et historique</a></li>
        <li><a href="simpson2.html">Personnages et voix</a></li>
        <li><a href="index.html">Aide aux révisions</a></li>
        <li><a href="avance.html">Pour aller plus loin</a></li>
      </ul>
    </div>

    <div id="corps">
      <a name="top"></a>

      <h2>Présentation</h2>
      <p>
      Petits êtres jaunes tout en rondeur, aux yeux globuleux, et ne possédant que
      quatre doigts à chaque main, les Simpson sont une caricature de la famille
      américaine moyenne, habitant une ville américaine moyenne, peuplée par des
      américains moyens, où toutes les classes sociales y sont representées.
      <br/>
      <br/>
      Allez voir le site web : <a href="http://les-simpson.hypnoweb.net/site.105.329/" title="Site sur les Simpson">Site sur les Simpson</a>
      </p>

      <!-- Le contenu de title s'affiche quand la souris survole l'image. Celui de alt en remplacement de l'image. -->
      <!-- Ici on utilise l'image directement depuis le site de GLIN102, mais idéalement elle devrait être enregistrée sur votre ordinateur. -->
      <img src="http://www.glin102.univ-montp2.fr/vue/images/TP08-Docs/famille3.gif" title="La famille Simpson" alt="La famille Simpson"/>

      <!-- Barre horizontale -->
      <hr width="100" color="black" align="center"/>

      <h2>Petit historique de la série</h2>
      <p>
      La série "Les Simpson" est crée par Matt Groening et produite par Gracie
      Films pour la Twentieth Century Fox et la Fox Network.
      </p>

      <p>
      Les Simpson apparurent dès 1987, aux Etats-Unis, sous forme de courts
      dessins animés, pour le "Tracey Ullman Show".
      </p>

      <p>
      Le premier véritable épisode de la série intitulé "Noël mortel" parut le 17
      décembre 1989 à 20h sur la chaîne "The Fox Network" .
      </p>

      <p>
      A partir du 14 janvier 1990, date de sortie du second épisode de la série,
      les épisodes parurent régulièrement.
      </p>

      <p>
      Les saisons 1 et 2 furent animées par Klasky-Csupo qui travaillait aussi sur
      le "Tracey Ullman Show". Les saisons suivantes furent animées par la boite
      Film Roman, avec entre-temps un travail pour les deux maisons d'animation
      par Akon Production Company, Anivision et Rough Draft Studios en Corée.
      </p>

      <a href="#top">Revenir en haut du document</a>
    </div>

    <div id="pied_de_page">
      Site web construit par Thibaud Colas
      <br/>
      Source : <a href="http://www.siteduzero.com/tutoriel-3-13572-creons-le-design-de-votre-site-web.html">Site du Zero</a>
    </div>

  </body>
</html>

## simpson2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Les Simpsons - Personnages</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- media="screen" -> Feuille de styles pour les écrans. On pourrait aussi avoir media="print" par ex. -->
    <link rel="stylesheet" media="screen" href="styleSimpson.css">
  </head>

  <body>
    <div id="en_tete">
      <h1>Les Simpson</h1>
    </div>

    <div id="menu">
      <h3>Menu</h3>
      <ul>
        <li><a href="simpson1.html">Présentation et historique</a></li>
        <li><a href="simpson2.html">Personnages et voix</a></li>
        <li><a href="index.html">Aide aux révisions</a></li>
        <li><a href="avance.html">Pour aller plus loin</a></li>
      </ul>
    </div>

    <!-- Tout le contenu de simpson1.html est repris ici, à l'exception du corps de page. -->

    <div id="corps">
      <a name="top"></a>

      <h2>Les personnages</h2>
      <!-- La balise <ol> sert à crééer une liste ordonnée contenant des <li> (list item). -->
      <ol>
        <li>Homer Simpson</li>
        <li>Marge Simpson</li>
        <li>Bart Simpson</li>
        <li>Lisa Simpson</li>
        <li>Maggi Simpson</li>
      </ol>

      <h2>Tableau des voix originales et françaises</h2>
      <table>
        <tr>
          <th>Personnage</th>
          <th>Voix originale</th>
          <th>Voix française</th>
        </tr>
        <tr>
          <td>Homer Jay. Simpson</td>
          <td>Dan Castellaneta</td>
          <td>Philippe Peythieu</td>
        </tr>
        <tr>
          <td>Marjorie "Marge" Bouvier</td>
          <td>Julie Kavner</td>
          <td>Véronique Augereau</td>
        </tr>
        <tr>
          <td>Barthelomew Jo-Jo "Bart" Simpson</td>
          <td>Nancy Cartwright</td>
          <td>Joëlle Guigui</td>
        </tr>
        <tr>
          <td>Elisabeth Marie "Lisa" Simpson</td>
          <td>Yeardley Smith</td>
          <td>Aurélia Bruno</td>
        </tr>
      </table>

      <a href="#top">Revenir en haut du document</a>
    </div>

    <div id="pied_de_page">
      Site web construit par Thibaud Colas
      <br/>
      Source : <a href="http://www.siteduzero.com/tutoriel-3-13572-creons-le-design-de-votre-site-web.html">Site du Zero</a>
    </div>

  </body>
</html>

## styles.css
/* Les styles définis par vos soins. */

/* Style des liens dans le pied de page. */
footer a {
  color:white;
}

/* Style des liens dans le corps de la page. */
.main a {
  color:tomato;
}

/* Ici on change le style des liens de la page quand la souris passe dessus. */
.main a:hover {
  color:grey;
}

/* Un exemple de CSS avancé. */
h3 {
  /* On définit que la couleur du texte est "corail". */
  color:coral;
  /* Le texte est suivi de deux ombres : une noire à opacité de 50% et une blanche 90% opaque. */
  text-shadow:1px 1px 1px rgba(0, 0, 0, .5), 1px 1px 1px rgba(255, 255, 255, .9);
  /* Le texte est encadré 5pixels en haut et en bas et 10 pixels sur les cotés. */
  padding:5px 10px;
  /* Le conteneur du texte a des bords arondis. */
  border-radius:5px;
  /* Le texte est automatiquement passé en majuscule. */
  text-transform:uppercase;
  /* On utilise une image de fond intégrée dans le code. */
  background-image: url(data:image/png;base64,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);
  /* Une légère bordure est ajoutée. */
  border:1px solid #eee;
  /* Le tout est limité aux pourtours du texte et pas à toute la ligne. */
  display:inline;
}

## styleSimpson.css
/* Style appliqué au "fond" de la page. */
body
{
   /* Largeur du corps de la page */
   width: 760px;
   /* Marges */
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   /* Image de fond : le motif répété en arrière-plan. */
   background-image: url("http://www.glin102.univ-montp2.fr/vue/images/TP08-Docs/arplanbart.gif");
}

/* Style des paragraphes */
p {
color: blue;
text-align: justify;
 }

/* L'en-tête */

#en_tete
{
   width: 760px;
   height: 50px;
   margin-bottom: 10px;
}

#en_tete h1
{
   /*
   En CSS, color permet de définir la couleur du texe.
   Comme valeur, on peut utiliser un code couleur : green, blue, tomato.
   Liste complète des codes couleur : http://www.147colors.com/
   On peut aussi utiliser des valeurs dites RGB, précédées d'un diese : #000000 = noir, #FFFFFF = blanc.
   */
   color: green;
   text-align: center;
   font-family: Arial;
}


/* Le menu */

#menu
{
   /* Place le menu à gauche. */
   float: left;
   width: 120px;
	 background-color: white;
   /* #0A0 : une autre façon de produire du vert. */
   border: 2px solid #0A0;
   margin-bottom: 20px;
}

#menu h3
{
   color: black;
   font-family: Arial;
   text-align: center;
}

#menu ul
{

   padding: 0;
   padding-left: 20px;
   margin: 0;
   margin-bottom: 5px;
}

#menu a
{
   color: black;
}

#menu a:hover
{
   background-color: green;
   color: black;
}


/* Le corps de la page */

#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;

   /* Sans cette règle, le corps de page serait illisible
   à cause de l'image de fond de body. */
   background-color: white;

   border: 2px solid black;
}

#corps h2
{
   text-align: left;
   font-family: Arial;
}


#corps ol
{
  color: blue;

}

#corps table
{
border-width:1px;
border-style:solid;
border-color:black;
width:100%;
border-collapse:collapse;
color:blue;
}

#corps th
{
border-width:1px;
border-style:solid;
border-color:orange;
width:30%;
}

#corps td
{
border-width:1px;
border-style:solid;
border-color:orange;
width:30%;
}


/* Le pied de page  */

#pied_de_page
{
   padding: 5px;

   text-align: center;

   color: black;
   background-color: white;

   border: 2px solid black;
}
	<!--
	Cette page est en HTML5.
	Certaines balises viennent s'ajouter à celles vues en TP,
	mais elles ne sont pas plus difficiles à utiliser.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<title>Titre de ma page</title>

	<!-- Description de la page pour les moteurs de recherche (Google, Bing, etc) -->
	<meta name="description" content="Description de ma page">

	<!-- Styles prédéfinis à NE PAS TOUCHER. Vos styles s'ajouteront par dessus. -->
	<link rel="stylesheet" href="css-avance.css">
	<!-- Contient votre code CSS. -->
	<link rel="stylesheet" href="styles.css">

	</head>
	<body>
	<!-- Ici le header (et le div qui l'encapsule) contiennent le titre de la page et un menu. -->
	<div class="header-container">
	<header class="wrapper clearfix">
	<h1 class="title">Titre de ma page</h1>
	<nav>
	<ul>
	<!-- Pour ajouter un lien à votre menu, copier/coller l'un des liens préexistants et remplacer son texte et son href. -->
	<li><a href="http://www.glin102.univ-montp2.fr/">GLIN102</a></li>
	<li><a href="http://www.univ-montp2.fr/">UM2</a></li>
	<li><a href="autrepage.html">Autre page</a></li>
	</ul>
	</nav>
	</header>
	</div>

	<div class="main-container">
	<div class="main wrapper clearfix">


	<!--

	Le contenu de votre page doit être placé ici.
	Exemple de contenu :
	quand j'ai passé mon C2I, j'avais eu à rendre un document HTML sur la loi LOPSI.
	-->

	<h2>La loi LOPSI</h2>
	<p>Les mesures phare de la <acronym title="Loi d'orientation et de programmation pour la sécurité intérieure">LOPSI</acronym> sont :</p>

	<h3>Réorganisation institutionnelle</h3>
	<p>
	La LOPSI renforce le rôle des préfets tout en créant les <em>Conseils locaux de sécurité et de prévention de la délinquance</em> et les <em>Groupements d'intervention régionnaux</em> (GIR).
	La gendarmerie conserve son statut particulier de militaires mais passe sous le commandement du ministère de l'intérieur.
	</p>

	<h3>Fichiers informatiques</h3>
	<p>
	La loi permet aux officiers de police judiciaire (OPJ) de saisir à distance <em>tout fichier ou renseignement paraîssant nécessaire à la manifestation de la vérité</em>
	avec l'autorisation d'un juge. Elle prévoit également la fusion des fichiers de police et de gendarmerie <a href="http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_traitement_des_infractions_constat%C3%A9es" title="Système de traitement des infractions constatées">STIC</a>
	et <a href="http://fr.wikipedia.org/wiki/Syst%C3%A8me_judiciaire_de_documentation_et_d%27exploitation" title="Système judiciaire de documentation et d'exploitation">JUDEX</a> en un fichier <a href="http://fr.wikipedia.org/wiki/ARIANE_(fichier)" title="Système d'application de rapprochement, d'identification et d'analyse pour les enquêteurs">ARIANE</a>.
	</p>

	<!-- Fin de l'exemple. -->

	</div> <!-- #main -->
	</div> <!-- #main-container -->

	<div class="footer-container">
	<footer class="wrapper">
	<hr/>
	<p>Site web réalisé par <strong>PRÉNOM NOM</strong> dans le cadre du cours de <a href="http://www.glin102.univ-montp2.fr/">GLIN102</a>.</p>
	</footer>
	</div>
	</body>
	</html>
	/*
	---------------------------------------------------------------------
	Styles préappliqués - NE PAS TOUCHER.
	---------------------------------------------------------------------
	*/


	/! normalize.css v1.0.1 \| MIT License \| git.io/normalize /

	/* ==========================================================================
	HTML5 display definitions
	========================================================================== */

	/*
	* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
	*/

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	nav,
	section,
	summary {
	display: block;
	}

	/*
	* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
	*/

	audio,
	canvas,
	video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	}

	/*
	* Prevents modern browsers from displaying `audio` without controls.
	* Remove excess height in iOS 5 devices.
	*/

	audio:not([controls]) {
	display: none;
	height: 0;
	}

	/*
	* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
	* and Safari 4.
	* Known issue: no IE 6 support.
	*/

	[hidden] {
	display: none;
	}

	/* ==========================================================================
	Base
	========================================================================== */

	/*
	* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
	* `em` units.
	* 2. Prevents iOS text size adjust after orientation change, without disabling
	* user zoom.
	*/

	html {
	font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	-ms-text-size-adjust: 100%; /* 2 */
	}

	/*
	* Addresses `font-family` inconsistency between `textarea` and other form
	* elements.
	*/

	html,
	button,
	input,
	select,
	textarea {
	font-family: sans-serif;
	}

	/*
	* Addresses margins handled incorrectly in IE 6/7.
	*/

	body {
	margin: 0;
	}

	/* ==========================================================================
	Links
	========================================================================== */

	/*
	* Addresses `outline` inconsistency between Chrome and other browsers.
	*/

	a:focus {
	outline: thin dotted;
	}

	/*
	* Improves readability when focused and also mouse hovered in all browsers.
	*/

	a:active,
	a:hover {
	outline: 0;
	}

	/* ==========================================================================
	Typography
	========================================================================== */

	/*
	* Addresses font sizes and margins set differently in IE 6/7.
	* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
	* and Chrome.
	*/

	h1 {
	font-size: 2em;
	margin: 0.67em 0;
	}

	h2 {
	font-size: 1.5em;
	margin: 0.83em 0;
	}

	h3 {
	font-size: 1.17em;
	margin: 1em 0;
	}

	h4 {
	font-size: 1em;
	margin: 1.33em 0;
	}

	h5 {
	font-size: 0.83em;
	margin: 1.67em 0;
	}

	h6 {
	font-size: 0.75em;
	margin: 2.33em 0;
	}

	/*
	* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
	*/

	abbr[title] {
	border-bottom: 1px dotted;
	}

	/*
	* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
	*/

	b,
	strong {
	font-weight: bold;
	}

	blockquote {
	margin: 1em 40px;
	}

	/*
	* Addresses styling not present in Safari 5 and Chrome.
	*/

	dfn {
	font-style: italic;
	}

	/*
	* Addresses styling not present in IE 6/7/8/9.
	*/

	mark {
	background: #ff0;
	color: #000;
	}

	/*
	* Addresses margins set differently in IE 6/7.
	*/

	p,
	pre {
	margin: 1em 0;
	}

	/*
	* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
	*/

	code,
	kbd,
	pre,
	samp {
	font-family: monospace, serif;
	_font-family: 'courier new', monospace;
	font-size: 1em;
	}

	/*
	* Improves readability of pre-formatted text in all browsers.
	*/

	pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
	}

	/*
	* Addresses CSS quotes not supported in IE 6/7.
	*/

	q {
	quotes: none;
	}

	/*
	* Addresses `quotes` property not supported in Safari 4.
	*/

	q:before,
	q:after {
	content: '';
	content: none;
	}

	/*
	* Addresses inconsistent and variable font size in all browsers.
	*/

	small {
	font-size: 80%;
	}

	/*
	* Prevents `sub` and `sup` affecting `line-height` in all browsers.
	*/

	sub,
	sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	}

	sup {
	top: -0.5em;
	}

	sub {
	bottom: -0.25em;
	}

	/* ==========================================================================
	Lists
	========================================================================== */

	/*
	* Addresses margins set differently in IE 6/7.
	*/

	dl,
	menu,
	ol,
	ul {
	margin: 1em 0;
	}

	dd {
	margin: 0 0 0 40px;
	}

	/*
	* Addresses paddings set differently in IE 6/7.
	*/

	menu,
	ol,
	ul {
	padding: 0 0 0 40px;
	}

	/*
	* Corrects list images handled incorrectly in IE 7.
	*/

	nav ul,
	nav ol {
	list-style: none;
	list-style-image: none;
	}

	/* ==========================================================================
	Embedded content
	========================================================================== */

	/*
	* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
	* 2. Improves image quality when scaled in IE 7.
	*/

	img {
	border: 0; /* 1 */
	-ms-interpolation-mode: bicubic; /* 2 */
	}

	/*
	* Corrects overflow displayed oddly in IE 9.
	*/

	svg:not(:root) {
	overflow: hidden;
	}

	/* ==========================================================================
	Figures
	========================================================================== */

	/*
	* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
	*/

	figure {
	margin: 0;
	}

	/* ==========================================================================
	Forms
	========================================================================== */

	/*
	* Corrects margin displayed oddly in IE 6/7.
	*/

	form {
	margin: 0;
	}

	/*
	* Define consistent border, margin, and padding.
	*/

	fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
	}

	/*
	* 1. Corrects color not being inherited in IE 6/7/8/9.
	* 2. Corrects text not wrapping in Firefox 3.
	* 3. Corrects alignment displayed oddly in IE 6/7.
	*/

	legend {
	border: 0; /* 1 */
	padding: 0;
	white-space: normal; /* 2 */
	margin-left: -7px; / 3 */
	}

	/*
	* 1. Corrects font size not being inherited in all browsers.
	* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
	* and Chrome.
	* 3. Improves appearance and consistency in all browsers.
	*/

	button,
	input,
	select,
	textarea {
	font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	vertical-align: baseline; /* 3 */
	vertical-align: middle; / 3 */
	}

	/*
	* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
	* the UA stylesheet.
	*/

	button,
	input {
	line-height: normal;
	}

	/*
	* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
	* and `video` controls.
	* 2. Corrects inability to style clickable `input` types in iOS.
	* 3. Improves usability and consistency of cursor style between image-type
	* `input` and others.
	* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
	* Known issue: inner spacing remains in IE 6.
	*/

	button,
	html input[type="button"], /* 1 */
	input[type="reset"],
	input[type="submit"] {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
	overflow: visible; / 4 */
	}

	/*
	* Re-set default cursor for disabled elements.
	*/

	button[disabled],
	input[disabled] {
	cursor: default;
	}

	/*
	* 1. Addresses box sizing set to content-box in IE 8/9.
	* 2. Removes excess padding in IE 8/9.
	* 3. Removes excess padding in IE 7.
	* Known issue: excess padding remains in IE 6.
	*/

	input[type="checkbox"],
	input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	height: 13px; / 3 */
	width: 13px; / 3 */
	}

	/*
	* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
	* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
	* (include `-moz` to future-proof).
	*/

	input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box; /* 2 */
	box-sizing: content-box;
	}

	/*
	* Removes inner padding and search cancel button in Safari 5 and Chrome
	* on OS X.
	*/

	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	}

	/*
	* Removes inner padding and border in Firefox 3+.
	*/

	button::-moz-focus-inner,
	input::-moz-focus-inner {
	border: 0;
	padding: 0;
	}

	/*
	* 1. Removes default vertical scrollbar in IE 6/7/8/9.
	* 2. Improves readability and alignment in all browsers.
	*/

	textarea {
	overflow: auto; /* 1 */
	vertical-align: top; /* 2 */
	}

	/* ==========================================================================
	Tables
	========================================================================== */

	/*
	* Remove most spacing between table cells.
	*/

	table {
	border-collapse: collapse;
	border-spacing: 0;
	}


	/* ==========================================================================
	HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
	========================================================================== */

	html,
	button,
	input,
	select,
	textarea {
	color: #222;
	}

	body {
	font-size: 1em;
	line-height: 1.4;
	}

	::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
	}

	::selection {
	background: #b3d4fc;
	text-shadow: none;
	}

	hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
	}

	img {
	vertical-align: middle;
	}

	fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	}

	textarea {
	resize: vertical;
	}

	.chromeframe {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
	}


	/* ===== Initializr Styles ==================================================
	Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
	========================================================================== */

	body {
	font: 16px/26px Helvetica, Helvetica Neue, Arial;
	}

	.wrapper {
	width: 90%;
	margin: 0 5%;
	}

	/* ===================
	ALL: Orange Theme
	=================== */

	.header-container {
	border-bottom: 20px solid #e44d26;
	}

	.footer-container,
	.main aside {
	border-top: 20px solid #e44d26;
	}

	.header-container,
	.footer-container,
	.main aside {
	background: #f16529;
	}

	.title {
	color: white;
	}

	/* ==============
	MOBILE: Menu
	============== */

	nav ul {
	margin: 0;
	padding: 0;
	}

	nav a {
	display: block;
	margin-bottom: 10px;
	padding: 15px 0;

	text-align: center;
	text-decoration: none;
	font-weight: bold;

	color: white;
	background: #e44d26;
	}

	nav a:hover,
	nav a:visited {
	color: white;
	}

	nav a:hover {
	text-decoration: underline;
	}

	/* ==============
	MOBILE: Main
	============== */

	.main {
	padding: 30px 0;
	}

	.main article h1 {
	font-size: 2em;
	}

	.main aside {
	color: white;
	padding: 0px 5% 10px;
	}

	.footer-container footer {
	color: white;
	padding: 20px 0;
	}

	/* ===============
	ALL: IE Fixes
	=============== */

	.ie7 .title {
	padding-top: 20px;
	}

	/* ==========================================================================
	Author's custom styles
	========================================================================== */















	/* ==========================================================================
	Media Queries
	========================================================================== */

	@media only screen and (min-width: 480px) {

	/* ====================
	INTERMEDIATE: Menu
	==================== */

	nav a {
	float: left;
	width: 27%;
	margin: 0 1.7%;
	padding: 25px 2%;
	margin-bottom: 0;
	}

	nav li:first-child a {
	margin-left: 0;
	}

	nav li:last-child a {
	margin-right: 0;
	}

	/* ========================
	INTERMEDIATE: IE Fixes
	======================== */

	nav ul li {
	display: inline;
	}

	.oldie nav a {
	margin: 0 0.7%;
	}
	}

	@media only screen and (min-width: 768px) {

	/* ====================
	WIDE: CSS3 Effects
	==================== */

	.header-container,
	.main aside {
	-webkit-box-shadow: 0 5px 10px #aaa;
	-moz-box-shadow: 0 5px 10px #aaa;
	box-shadow: 0 5px 10px #aaa;
	}

	/* ============
	WIDE: Menu
	============ */

	.title {
	float: left;
	}

	nav {
	float: right;
	width: 38%;
	}

	/* ============
	WIDE: Main
	============ */

	.main article {
	float: left;
	width: 57%;
	}

	.main aside {
	float: right;
	width: 28%;
	}
	}

	@media only screen and (min-width: 1140px) {

	/* ===============
	Maximal Width
	=============== */

	.wrapper {
	width: 1026px; /* 1140px - 10% for margins */
	margin: 0 auto;
	}
	}

	/* ==========================================================================
	Helper classes
	========================================================================== */

	.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
	}

	.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 100%;
	}

	.hidden {
	display: none !important;
	visibility: hidden;
	}

	.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	}

	.visuallyhidden.focusable:active,
	.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
	}

	.invisible {
	visibility: hidden;
	}

	.clearfix:before,
	.clearfix:after {
	content: " ";
	display: table;
	}

	.clearfix:after {
	clear: both;
	}

	.clearfix {
	*zoom: 1;
	}

	/* ==========================================================================
	Print styles
	========================================================================== */

	@media print {
	* {
	background: transparent !important;
	color: #000 !important; /* Black prints faster: h5bp.com/s */
	box-shadow: none !important;
	text-shadow: none !important;
	}

	a,
	a:visited {
	text-decoration: underline;
	}

	a[href]:after {
	content: " (" attr(href) ")";
	}

	abbr[title]:after {
	content: " (" attr(title) ")";
	}

	/*
	* Don't show links for images, or javascript/internal links
	*/

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
	content: "";
	}

	pre,
	blockquote {
	border: 1px solid #999;
	page-break-inside: avoid;
	}

	thead {
	display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
	page-break-inside: avoid;
	}

	img {
	max-width: 100% !important;
	}

	@page {
	margin: 0.5cm;
	}

	p,
	h2,
	h3 {
	orphans: 3;
	widows: 3;
	}

	h2,
	h3 {
	page-break-after: avoid;
	}
	}
	<!DOCTYPE html><html><head><meta charset="UTF-8"><style>html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

	body{
	color:#444;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times,
	'Times New Roman', serif,
	"Hiragino Sans GB", "STXihei", "微软雅黑";
	font-size:12px;
	line-height:1.5em;
	background:#fefefe;
	width: 45em;
	margin: 10px auto;
	padding: 1em;
	outline: 1300px solid #FAFAFA;
	}

	a{ color: #0645ad; text-decoration:none;}
	a:visited{ color: #0b0080; }
	a:hover{ color: #06e; }
	a:active{ color:#faa700; }
	a:focus{ outline: thin dotted; }
	a:hover, a:active{ outline: 0; }

	span.backtick {
	border:1px solid #EAEAEA;
	border-radius:3px;
	background:#F8F8F8;
	padding:0 3px 0 3px;
	}

	::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
	::selection{background:rgba(255,255,0,0.3);color:#000}

	a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
	a::selection{background:rgba(255,255,0,0.3);color:#0645ad}

	p{
	margin:1em 0;
	}

	img{
	max-width:100%;
	}

	h1,h2,h3,h4,h5,h6{
	font-weight:normal;
	color:#111;
	line-height:1em;
	}
	h4,h5,h6{ font-weight: bold; }
	h1{ font-size:2.5em; }
	h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
	h3{ font-size:1.5em; }
	h4{ font-size:1.2em; }
	h5{ font-size:1em; }
	h6{ font-size:0.9em; }

	blockquote{
	color:#666666;
	margin:0;
	padding-left: 3em;
	border-left: 0.5em #EEE solid;
	}
	hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }


	pre , code, kbd, samp {
	color: #000;
	font-family: monospace;
	font-size: 0.88em;
	border-radius:3px;
	background-color: #F8F8F8;
	border: 1px solid #CCC;
	}
	pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px;}
	pre code { border: 0px !important; }
	code { padding: 0 3px 0 3px; }

	b, strong { font-weight: bold; }

	dfn { font-style: italic; }

	ins { background: #ff9; color: #000; text-decoration: none; }

	mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

	sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }

	ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
	li p:last-child { margin:0 }
	dd { margin: 0 0 0 2em; }

	img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

	table { border-collapse: collapse; border-spacing: 0; }
	td { vertical-align: top; }

	@media only screen and (min-width: 480px) {
	body{font-size:14px;}
	}

	@media only screen and (min-width: 768px) {
	body{font-size:16px;}
	}

	@media print {
	* { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; }
	body{font-size:12pt; max-width:100%;}
	a, a:visited { text-decoration: underline; }
	hr { height: 1px; border:0; border-bottom:1px solid black; }
	a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
	pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
	tr, img { page-break-inside: avoid; }
	img { max-width: 100% !important; }
	@page :left { margin: 15mm 20mm 15mm 10mm; }
	@page :right { margin: 15mm 10mm 15mm 20mm; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
	}</style></head><body><h1 id="revisions-pour-le-cc3">Révisions pour le CC3</h1>

	<p>Le CC3 est le dernier examen de GLIN102. Il prendra la forme d'un QCM (comme pour le CC1) de 45minutes.</p>

	<p>Les questions porteront sur l'ensemble du programme de GLIN102 :</p>

	<ul>
	<li>Les ordinateurs en général</li>
	<li>Le système UNIX et ses commandes</li>
	<li>Navigateurs web</li>
	<li>Traitement de texte</li>
	<li>Tableur et feuilles de calcul</li>
	<li>Présentations / diaporamas</li>
	<li>Pages web en HTML et CSS</li>
	<li>... et j'en oublie sûrement.</li>
	</ul>

	<p><a href="http://www.glin102.univ-montp2.fr/controleur/index.php?page=cc3">Informations sur le site de GLIN102</a></p>

	<h2 id="exemples-de-questions">Exemples de questions</h2>

	<p>Un examen semblable au vôtre est disponible gratuitement et anonymement sur le site de l'université de Perpignan :</p>

	<p><a href="https://qcm-c2i1.univ-perp.fr/anonyme.php">https://qcm-c2i1.univ-perp.fr/anonyme.php</a></p>

	<p>Entrez une adresse mail, faites le test et vos résultats vous seront envoyés.</p>

	<h2 id="durant-lexamen">Durant l'examen</h2>

	<p>Les documents électroniques sont autorisés, ainsi que les recherches sur internet.
	Mes conseils :</p>

	<ul>
	<li>Commencez par donner toutes les réponses dont vous êtes sûrs</li>
	<li>Puis faites le tour des questions restantes et faites quelques recherches dans vos cours</li>
	<li>Si certaines questions vous résistent encore, cherchez leurs mots-clef sur Google ou Wikipedia</li>
	</ul>

	<h2 id="pour-reviser-le-tp8">Pour réviser le TP8</h2>

	<p>Voici une correction du TP8 : c'est le code obtenu une fois le TP fini.
	Il est composé de :</p>

	<ul>
	<li><a href="simpson1.html">simpson1.html</a></li>
	<li><a href="simpson2.html">simpson2.html</a></li>
	<li><a href="styleSimpson.css">styleSimpson.css</a></li>
	</ul>

	<p>Vous pouvez visualiser le résultat en ligne, ou bien télécharger les fichiers et les utiliser sur votre ordinateur.</p>

	<p>Pour travailler sur ces fichiers chez vous, je vous conseille d'installer un éditeur de texte spécifique : </p>

	<ul>
	<li>Sur Windows, Notepad++ : <a href="http://notepad-plus-plus.org/">http://notepad-plus-plus.org/</a></li>
	<li>Sur Mac, TextWrangler : <a href="http://www.barebones.com/products/textwrangler/">http://www.barebones.com/products/textwrangler/</a></li>
	<li>Sur Linux, gedit, kate ou n'importe quel éditeur colorant correctement les balises HTML</li>
	</ul>

	<p>Ce code est rempli de commentaires pour vous aider à comprendre le rôle des différentes balises.</p>

	<p>Rappel : Vous pouvez faire un click droit sur la page et utiliser la fonction "Voir le code source", ou bien utiliser le raccourci __ CTRL + U __ pour visualiser le code HTML.</p>

	<h2 id="pour-aller-plus-loin-en-html-css">Pour aller plus loin en HTML / CSS</h2>

	<p>J'ai adjoint à la correction un exemple de page web écrite avec les dernières avancées en matière de HTML et CSS. </p>

	<ul>
	<li><a href="avance.html">avance.html</a></li>
	<li><a href="styles.css">styles.css</a></li>
	</ul>

	<p>Pour les plus motivés, vous pouvez utiliser cette page comme base pour vos révisions, et tester ainsi les balises découvertes durant le TP dans un autre cadre.</p>

	<p>Pour vous aider dans vos révisions, voici une documentation de référence sur les balises HTML : <br />
	<a href="https://developer.mozilla.org/fr/docs/HTML/Element">https://developer.mozilla.org/fr/docs/HTML/Element</a></p>
	</body>
	<!--
	HTML est un langage permettant de structurer des documents à l'aide de balises (tags en anglais).
	Tous les sites web de la planète utilisent HTML, assorti d'autres technologies selon les cas.

	Les balises sont des éléments ayant des sens différents les un des autres et dont
	la combinaison forme un arbre dont la racine est la balise <html></html>.
	Les balises peuvent contenir du texte, ou bien d'autres balises, et peuvent également avoir des attributs :
	les attributs sont des informations additionnelles, par exemple, ici la balise <html> a un attribut lang="fr"
	pour que le navigateur et les moteurs de recherche sachent que la page web est en français.

	Exemple :
	<a href="http://example.org/">Exemple</a>

	Ici, on a créé un lien qui conduira vers la cible indiquée dans l'attribut href. Le texte du lien (affiché sur la page) est "Exemple".

	Si HTML définit la structure du document (le "fond"), sa présentation ("forme") est assurée par du code CSS.
	CSS n'est pas un langage de balises mais de règles. On définit une règle de la manière suivante :

	a {
	color: tomato;
	font-weight: bold;
	}
	Ici, on dit que tous les liens (balise a) seront de couleur tomate ("tomato") et seront en gras.
	-->

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

	<!--
	<head> : contient les informations générales sur la page telles que :
	- Son titre : balise <title>, affiché dans la fenêtre du navigateur
	et utilisé dans les favoris du navigateur.
	- Le type de contenu et l'encodage de la page : balise <meta http-equiv="" content="">
	- Le/les fichiers CSS à utiliser : balise(s) <link rel="stylesheet" href="fichier.css">,
	le CSS permet de définir des règles de présentation du document.

	Pour aller plus loin :
	<head> peut aussi contenir des balises définissant :
	- une icône de favoris pour la page, ex : <link rel="shortcut icon" href="favicon.ico">
	- une description de la page pour les moteurs de recherche, ex : <meta name="description" content="Initiation au HTML et CSS">
	- un lien vers un fichier JavaScript, permettant d'animer la page
	- et bien d'autres informations.
	-->
	<head>
	<title>Les Simpsons - Présentation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- media="screen" -> Feuille de styles pour les écrans. On pourrait aussi avoir media="print" par ex. -->
	<link rel="stylesheet" media="screen" href="styleSimpson.css">
	</head>

	<!--
	<body> : contient le contenu affiché de la page, tout ce qui est visible dans la fenêtre du navigateur.
	Généralement, le contenu de <body> est séparé en 3/4 sections :
	- Une section "en-tête", "bannière" ou encore "header", correspondant au haut de page. Contient par exemple
	le logo du site web, son nom, certains contrôles comme un formulaire de connexion par exemple.
	- Une section "menu" ou "navigation" contenant des liens internes vers les autres pages du site web.
	Cette section est parfois intégrée dans la section "en-tête".
	- Une section "corps", "main", "contenu" : le contenu principal de la page, ce en quoi les visiteurs
	de la page seraient intéressés. Cette section est différente d'une page à l'autre d'un même site.
	- Une section "pied de page" ou "footer", servant à donner des informations sur la page / le site comme son auteur.

	Ces sections sont matérialisées par des balises <div> : ces balises servent comme conteneurs pour former des
	groupes logiques de balises.
	Comme toutes les balises, les <div> peuvent avoir des id (identifiants, uniques) ou des classes.
	Ces propriétés sont utilisées en CSS pour cibler certaines balises particulières de la page.

	Par exemple, pour des balises
	<div id="corps" class="conteneur">...</div>
	et une autre <div id="menu" class="conteneur"></div> :

	#corps {
	/* Styles spécifiques à la balise id="corps". */
	}

	#menu {
	/* Styles du menu. */
	}

	.conteneur {
	/* Styles communs au corps et au menu. */
	}

	Pour aller plus loin :
	La dernière version de HTML, HTML5, introduit de nouvelles balises :
	- <header>, remplaçant les <div id="entete"> qu'on trouve sur de nombreuses pages.
	- <footer>, remplaçant les <div id="pieddepage">
	- et des balises <section>, permettant de limiter l'usage abusif de <div> dans certains sites.
	-->

	<body>
	<div id="en_tete">
	<h1>Les Simpson</h1>
	</div>

	<div id="menu">
	<h3>Menu</h3>
	<ul>
	<li><a href="simpson1.html">Présentation et historique</a></li>
	<li><a href="simpson2.html">Personnages et voix</a></li>
	<li><a href="index.html">Aide aux révisions</a></li>
	<li><a href="avance.html">Pour aller plus loin</a></li>
	</ul>
	</div>

	<div id="corps">
	<a name="top"></a>

	<h2>Présentation</h2>
	<p>
	Petits êtres jaunes tout en rondeur, aux yeux globuleux, et ne possédant que
	quatre doigts à chaque main, les Simpson sont une caricature de la famille
	américaine moyenne, habitant une ville américaine moyenne, peuplée par des
	américains moyens, où toutes les classes sociales y sont representées.
	<br/>
	<br/>
	Allez voir le site web : <a href="http://les-simpson.hypnoweb.net/site.105.329/" title="Site sur les Simpson">Site sur les Simpson</a>
	</p>

	<!-- Le contenu de title s'affiche quand la souris survole l'image. Celui de alt en remplacement de l'image. -->
	<!-- Ici on utilise l'image directement depuis le site de GLIN102, mais idéalement elle devrait être enregistrée sur votre ordinateur. -->
	<img src="http://www.glin102.univ-montp2.fr/vue/images/TP08-Docs/famille3.gif" title="La famille Simpson" alt="La famille Simpson"/>

	<!-- Barre horizontale -->
	<hr width="100" color="black" align="center"/>

	<h2>Petit historique de la série</h2>
	<p>
	La série "Les Simpson" est crée par Matt Groening et produite par Gracie
	Films pour la Twentieth Century Fox et la Fox Network.
	</p>

	<p>
	Les Simpson apparurent dès 1987, aux Etats-Unis, sous forme de courts
	dessins animés, pour le "Tracey Ullman Show".
	</p>

	<p>
	Le premier véritable épisode de la série intitulé "Noël mortel" parut le 17
	décembre 1989 à 20h sur la chaîne "The Fox Network" .
	</p>

	<p>
	A partir du 14 janvier 1990, date de sortie du second épisode de la série,
	les épisodes parurent régulièrement.
	</p>

	<p>
	Les saisons 1 et 2 furent animées par Klasky-Csupo qui travaillait aussi sur
	le "Tracey Ullman Show". Les saisons suivantes furent animées par la boite
	Film Roman, avec entre-temps un travail pour les deux maisons d'animation
	par Akon Production Company, Anivision et Rough Draft Studios en Corée.
	</p>

	<a href="#top">Revenir en haut du document</a>
	</div>

	<div id="pied_de_page">
	Site web construit par Thibaud Colas
	<br/>
	Source : <a href="http://www.siteduzero.com/tutoriel-3-13572-creons-le-design-de-votre-site-web.html">Site du Zero</a>
	</div>

	</body>
	</html>
	/* Les styles définis par vos soins. */

	/* Style des liens dans le pied de page. */
	footer a {
	color:white;
	}

	/* Style des liens dans le corps de la page. */
	.main a {
	color:tomato;
	}

	/* Ici on change le style des liens de la page quand la souris passe dessus. */
	.main a:hover {
	color:grey;
	}

	/* Un exemple de CSS avancé. */
	h3 {
	/* On définit que la couleur du texte est "corail". */
	color:coral;
	/* Le texte est suivi de deux ombres : une noire à opacité de 50% et une blanche 90% opaque. */
	text-shadow:1px 1px 1px rgba(0, 0, 0, .5), 1px 1px 1px rgba(255, 255, 255, .9);
	/* Le texte est encadré 5pixels en haut et en bas et 10 pixels sur les cotés. */
	padding:5px 10px;
	/* Le conteneur du texte a des bords arondis. */
	border-radius:5px;
	/* Le texte est automatiquement passé en majuscule. */
	text-transform:uppercase;
	/* On utilise une image de fond intégrée dans le code. */
	background-image: url(data:image/png;base64,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);
	/* Une légère bordure est ajoutée. */
	border:1px solid #eee;
	/* Le tout est limité aux pourtours du texte et pas à toute la ligne. */
	display:inline;
	}
	/* Style appliqué au "fond" de la page. */
	body
	{
	/* Largeur du corps de la page */
	width: 760px;
	/* Marges */
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	/* Image de fond : le motif répété en arrière-plan. */
	background-image: url("http://www.glin102.univ-montp2.fr/vue/images/TP08-Docs/arplanbart.gif");
	}

	/* Style des paragraphes */
	p {
	color: blue;
	text-align: justify;
	}

	/* L'en-tête */

	#en_tete
	{
	width: 760px;
	height: 50px;
	margin-bottom: 10px;
	}

	#en_tete h1
	{
	/*
	En CSS, color permet de définir la couleur du texe.
	Comme valeur, on peut utiliser un code couleur : green, blue, tomato.
	Liste complète des codes couleur : http://www.147colors.com/
	On peut aussi utiliser des valeurs dites RGB, précédées d'un diese : #000000 = noir, #FFFFFF = blanc.
	*/
	color: green;
	text-align: center;
	font-family: Arial;
	}



	/* Le menu */

	#menu
	{
	/* Place le menu à gauche. */
	float: left;
	width: 120px;
	background-color: white;
	/* #0A0 : une autre façon de produire du vert. */
	border: 2px solid #0A0;
	margin-bottom: 20px;
	}

	#menu h3
	{
	color: black;
	font-family: Arial;
	text-align: center;
	}

	#menu ul
	{

	padding: 0;
	padding-left: 20px;
	margin: 0;
	margin-bottom: 5px;
	}

	#menu a
	{
	color: black;
	}

	#menu a:hover
	{
	background-color: green;
	color: black;
	}


	/* Le corps de la page */

	#corps
	{
	margin-left: 140px;
	margin-bottom: 20px;
	padding: 5px;

	/* Sans cette règle, le corps de page serait illisible
	à cause de l'image de fond de body. */
	background-color: white;

	border: 2px solid black;
	}

	#corps h2
	{
	text-align: left;
	font-family: Arial;
	}


	#corps ol
	{
	color: blue;

	}

	#corps table
	{
	border-width:1px;
	border-style:solid;
	border-color:black;
	width:100%;
	border-collapse:collapse;
	color:blue;
	}

	#corps th
	{
	border-width:1px;
	border-style:solid;
	border-color:orange;
	width:30%;
	}

	#corps td
	{
	border-width:1px;
	border-style:solid;
	border-color:orange;
	width:30%;
	}


	/* Le pied de page */

	#pied_de_page
	{
	padding: 5px;

	text-align: center;

	color: black;
	background-color: white;

	border: 2px solid black;
	}