logo
Seconde SNT
Sciences Numériques et Technologie

Internet
Le Web
Réseaux
Données
Localisation
Objets
Photos
Le Programme



Source : Mise en forme CSS from Université Lille SHS on Vimeo.



Etape n°2 : Mise en forme de la page Web en CSS

Les CSS, Cascading Style Sheets (feuilles de styles en cascade), servent à mettre en forme des documents web, type page HTML.

Tâche n°1 : Créez le fichier CSS

  1. Ouvrir l'éditeur de texte notepad++.
  2. Créer un nouveau fichier puis recopier le texte suivant en respectant la mise en page :
    3. body
    {
    margin : 20 px;
    font-family : Verdana;
    background : yellow;
    color : blue;
    }

  3. Dans le même dossier que votre page web, sauvegarder la page sous le nom : Reseaux.css ATTENTION à l'extension du fichier .css

  4. Ouvrir la page web que vous avez créé à la séance précédente dans notepad++.
  5. Ouvrir aussi la page web que vous avez créé à la séance précédente dans un navigateur. (Pour voir ce qu'il faut obtenir …)
  6. Partagez votre écran avec votre fichier html ouvert dans le navigateur et le même fichier ouvert dans notepad++.
  7. Dans notepad++, insérer dans la page web que vous avez créé à la séance précédente, dans la partie <head> :
    <link rel="stylesheet" href="Reseaux.css" />
  8. Actualiser votre page web dans le navigateur. Observez …


  9. Explication :
    • margin : pour créer des marges en bord de page
    • font-family : pour choisir la police de caractère utilisée
    • background : pour colorier l'arrière plan

Tâche n°2 : Mettre en forme sa page web

  1. Choisissez une mise en forme pour votre propre page web en vous inspirant des exemples ci-dessous. (Pour voir ce qu'il faut obtenir …)
    2. h1
    {
    color : grey;
    text-align : center;
    font-weight : bold;
    font-size : 40 px;
    }
    h2
    {
    color : orange;
    text-align : center;
    font-style : italic;
    font-size : 30 px;
    background : purple;
    }
    ol
    {
    color : green;
    text-align : right;
    font-variant : small-caps;
    }
    table
    {
    border : 2px dotted black;
    }
    ul
    {
    color : red;
    text-align : left;
    font-weight : bold;
    text-decoration : underline;
    list-style-type : circle;
    }
    td
    {
    border : 2px outset silver;
    color : purple;
    font-weight : bold;
    padding : 5px;
    }
    a
    {
    color : rgb(102,255,255);
    text-decoration : underline;
    }
    a:hover
    {
    color: #009999;
    text-decoration : underline;
    cursor : pointer;
    }
  2. A vous de créer votre style, changez les polices, les couleurs, les tailles … L'esthétique de votre page web comptera dans l'évaluation de votre travail.


    3. Éducation aux Médias et à l'Information : Modèle économique

    Bilan des balises HTML et