Réseaux, xHTML et CSS

Dominique Gonzalez

Université Lille3-Charles de Gaulle

Ce document est soumis à la licence GNU FDL. Permission vous est donnée de distribuer, modifier des copies de ces pages tant que cette note apparaît clairement.

mercredi 26 août 2009 à 10h38


Table des matières

I. xHTML
1. Pourquoi et comment ?
Pourquoi ce document ?
Comment ce document a-t-il été construit ?
Où trouver ce document ?
QBullets
2. xHTML, à quoi ça resemble ?
HTML, à quoi ça ressemble ?
xHTML, à quoi ça ressemble ?
Quelles balises va-t-on utiliser ?
xHTML ou (x)HTML ?
Structure d'un document xHTML
Les principales balises de structure
Où placer les pages HTML pour qu'elles soient visibles par tous ?
Comment visualiser une page HTML ?
Derniers trucs
3. Application, acte 1
4. Les tableaux en (x)HTML
Syntaxe de base
Une cellule particulière
5. Les images en (x)HTML
II. CSS
6. Feuilles de style : présentation
Motivation
Généralités
Comme c'est beau les feuilles de style
7. Feuilles de style : appliquer un style
Application d'un style à un code (x)HTML
Association avec un média particulier
Association d'un style à une balise
Sélecteurs de types
Sélecteurs d'attributs (CLASS ou ID)
Par contexte
Par pseudo-classes
DIV et SPAN
Notion de boîte
8. Feuilles de style : liste des éléments
Unités de mesure
Propriétés de police
Mise en forme du texte
Agencement du texte
Mise en forme de listes
Couleurs et arrière-plans
Retraits extérieurs et intérieurs
Cadres
Positionnement absolu des éléments
Voir aussi...
9. Un exemple d'utilisation xHTML-CSS
Code source xHTML
Code source de la feuille de style (CSS)
10. Réalisation de la feuille de style du site
Rappel : que doit contenir le site ?
Le but à atteindre
Deux formats différents, donc deux feuilles de style
La feuille de style pour l'écran
Corps du texte
Parenthèses sur les couleurs
Titres
Noms de familles
Listes
Liens
Signature
Récapitulatif : le code source des pages
La page d'accueil (xHTML)
La feuille de style pour l'écran
La feuille de style pour l'impression
III. CSS, plus loin
11. La gestion des couleurs en (x)HTML et CSS
RGB
Quelques exemples
Comment ça s'utilise ?
Comment calculer un code RGB ?
Et plus simple ?
12. Utilitaires CSS
Formulaires
Recommandations du W3C
Open Web
Ressources
Tutoriels
Le nuancier hexadécimal
13. Positionnement et affichage avec les CSS
Pourquoi ?
Positionnement relatif
Positionnement absolu
Positionnement fixe
Exemples de positionnements relatif, absolu et fixe
Positionnement flottant
La propriété clear
Exemple de positionnement flottant
Affichage
Des bonnes lectures
14. Les bugs d'Internet Explorer, les contourner, les utiliser
Pourquoi ?
Avant-propos : compléments sur la syntaxe d'une feuille de style
Et alors ?
Exemple
Quelques bonnes lectures
IV. Quelques généralités sur les réseaux
15. Qu'est-ce qu'un réseau ?
Qu'est-ce qu'un réseau
Historique général des réseaux
Les dates marquantes
Qui est qui ? Qui fait quoi ?
Dernières remarques
16. Les adresses sur internet
Adresses domainisées
Les adresses URL
Glossaire
Index

Liste des tableaux

11.1. Correpondances décimal-hexadécimal

Partie I. xHTML

Chapitre 1. Pourquoi et comment ?

Pourquoi ce document ?

J'ai regroupé dans ces pages les cours sur (x)HTML et CSS.

Elles ont pour origine un cours destiné aux étudiants de 1ère et 2ème années de l'IUP IIES de l'université de Lille III-Charles de Gaulle, à Villeneuve d'Ascq, pour les années universitaires 2002-2003 et 2003-2004.

Elles ont ensuite été un peu remaniées et augmentées à l'occasion d'un cours destiné aux étudiants de 3ème année de la licence EGO et de 3ème année de la licence MIASHS.

Les dernières modifications en date concernent le passage de HTML à xHTML.

Ces pages ne sont pas destinées à être un cours autonome : elles n'ont pas la prétention d'être exhaustives... Elles ne sont qu'un support de cours, et beaucoup de choses, qui sont transmises à l'oral pendant les cours, ne sont pas écrites.

L'environnement technique du cours est constitué de machines sous linux. L'installation des logiciels nécessaires ne sera pas abordée et ne fait pas partie du contenu du cours.

Remarque

Il ne s'agit pas d'un cours sur (x)HTML. Les notions qui y figurent ne sont que fragmentaires, elles ne sont là que pour permettre d'utiliser les feuilles de style.

Il n'y aura ainsi aucune information sur les balises et attributs (x)HTML qui permettent de gérer la présentation du texte, celle-ci devant être gérée par les feuilles de style.

On trouvera également dans ce document quelques notions générales sur les réseaux et sur les logiciels libres.

Comment ce document a-t-il été construit ?

Ce polycopié a été rédigé au format DocBook :

  • Le texte source a été écrit au format XML avec emacs, en respectant la DTD de DocBook.

  • Le code source a été compilé au format PDF avec openjade et au format HTML avec xsltproc.

  • La version que vous avez devant les yeux a été compilée le mercredi 26 août 2009 à 10h38 .

Où trouver ce document ?

Ce document est disponible sous plusieurs formats sur le web :

QBullets

Les petites images animées qui illustrent les liens de la version web de ce document proviennent de QBullets Icone QBullets

Chapitre 2. xHTML, à quoi ça resemble ?

HTML, à quoi ça ressemble ?

Il suffit de regarder le code source d'une page quelconque, la base du HTML se trouve dans l'utilisation des balises :

  • Une balise est de la forme <blabla> : du texte entouré des symboles « plus petit que » et « plus grand que » (<blabla> n'est pas une balise existante !).

  • Les balises n'apparaissent jamais dans le résultat final, elle ne servent qu'à modifier la présentation (on pourrait considérer que c'est ce qui remplace les boutons d'un traitement de texte) : on voit leur effet, mais on ne les voit pas elles-même.

  • Les balises vont par deux (comme un parenthésage) :

    <blabla> ... </blabla>

    La première signifie « début de blabla », la deuxième signifie « fin de blabla », et tout le texte situé entre les deux subit l'effet de blabla.

    Seules quelques balises ne possédent pas de balise de fin ; on les signalera quand on les rencontrera.

  • Les balises peuvent être imbriquées (toujours comme un parenthésage) :

    <em> ... <kbd> ... ... </kbd> ... </em> comme le parenthésage « ( [ ] ) ».

    mais ne doivent jamais se chevaucher :

    FAUX : <em> ... <kbd> ... </em> ... </kbd> comme le parenthésage « ( [ ) ]  ».

xHTML, à quoi ça ressemble ?

xHTML est une version particulière de HTML (on pourra trouver l'historique des différentes versions sur internet, par exemple SELFHTML ou WDG).

Sa principale caractéristique par rapport aux versions purement HTML est de suivre la syntaxe XML :

  • toutes les balises sont écrites en minuscules (contrairement à HTML qui ne se préoccupe pas de la casse dans laquelle sont écrites les balises),

  • toutes les balises doubles doivent être fermées (contrairement à HTML où on n'est pas obligé de fermer par exemple les balises <li>, <td>, <p>, etc. quand le contexte peut suffire),

  • les balises qui ne possédent pas de balise de fin doivent se terminer par un «/» (par exemple <hr/> ou <br/>).

Quelles balises va-t-on utiliser ?

Il faut d'abord savoir que les normes (x)HTML sont en constante évolution, et que les navigateurs sont très tolérants (bien qu'il vaille mieux ne pas en abuser). Ce qui fait qu'il y a plusieurs manières d'écrire du (x)HTML : de la plus sale à la plus pure. Nous allons essayer de vous apprendre à produire un (x)HTML pur et propre.

Une première façon de s'en assurer sera d'utiliser les services de validation du W3C. Toutes les pages que vous produirez devront réussir ce test !

Nous ferons en sorte de vous pousser dans le sens de l'évolution actuelle (et naturelle) : séparation de la structure et de la présentation. Pour cela nous ne confierons RIEN de la présentation de vos pages (bien que ce soit possible) à (x)HTML. La présentation sera assurée exclusivement par les feuilles de style.

xHTML ou (x)HTML ?

Nous essaierons de nous tenir à cette règle :

  • nous utiliserons la notation « (x)HTML » quand cela s'appliquera indifféremment à HTML et xHTML ;

  • nous utiliserons la notation « xHTML » quand cela s'appliquera uniquement à la version XML de HTML.

Structure d'un document xHTML

Les documents xHTML que vous produirez devront obligatoirement contenir ceci :


    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
            <title>
                Un titre personnel et si possible intelligent....
            </title>
        </head>
        <body>

            Votre texte...

        </body>
    </html>

Tout ce que vous écrirez devra être entre <body> et </body>. Nous reviendrons plus tard en détail sur l'utilité de chacune de ces lignes.

Les principales balises de structure

(Il n'y aura rien sur les couleurs ou la mise en page des textes, tout sera vu plus tard, avec les feuilles de style.)

  • Tout texte doit être inclus entre deux balises de types bloc. La plus simple est <p> : retour à la ligne impératif (P pour Paragraph). Les retours à la ligne dans le code source n'ont aucun effet sur le résultat affiché. (Regardez les 3 premiers «  bla » de l'exemple suivant, et comparer leurs dispositions dans le code source et dans le résultat affiché.)

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : ce sont les structures de base pour obtenir un plan de votre texte. Ces balises définissent les titres (« h » comme Header, c'est-à-dire en-tête) de différents niveaux (comme titre1, titre2, titre3, etc. dans un traitement de texte).

    Ainsi ce code source :

            <p>
              Bla bla
              bla.
            </p>
            <h1>Un titre</h1>
            <p>
              Bla bla bla.
              Bla bla bla.
            </p>
            <h2>Un sous-titre</h2>
            <p>
              Bla bla bla.
              Bla bla bla.
            </p>
            <h2>Un autre sous-titre</h2>
            <p>
              Bla bla bla.
              Bla bla bla.
            </p>
            <h1>Un autre titre</h1>
            <p>
              Bla bla bla.
              Bla bla bla.
            </p>
                    

    produira ce résultat :

    Premier exemple HTML

  • <ul>, <ol>, <li> : tout ce qu'il faut pour faire des listes, numérotées ou non. Les éléments de liste sont définis par <li> (pour List Item), qu'ils soient numérotés ou non. C'est le type de liste <ul> (pour Un-numbered List) ou <ol> (pour Ordered List) qui définit la présence ou pas de numérotation.

    Ainsi ce code source :

            <p>Une liste non numérotée:</p>
            <ul>
                <li>un,</li>
                <li>deux,</li>
                <li>trois.</li>
            </ul>
            <p>Une liste numérotée:</p>
            <ol>
                <li>un,</li>
                <li>deux,</li>
                <li>trois.</li>
            </ol>
                    

    produira ce résultat :

    Listes en HTML

  • <hr/> : un trait horizontal (Horizontal Rule) sur toute la largeur du texte.

    La balise de fermeture n'existe pas.

  • <a href="***"> : pour construire des liens hypertextes (c'est quand même le but premier de (x)HTML...).

    La syntaxe de base en est simple. Pour construire un lien vers ma page, il suffit d'écrire ceci :

    vers <a href="http://grappa.univ-lille3.fr/~gonzalez">ma page</a>

    Que peut-on mettre comme adresse après href ?

    • une adresse complète d'une page qui se trouve n'importe où sur le web (il est impératif de faire figurer http://).

    • le nom seul d'un fichier qui se trouve dans le même répertoire (sans http://).

    • le chemin relatif d'accès à un fichier qui se trouve sur le même site, mais pas dans le même répertoire (sans http://).

    Remarque

    La balise dont on vient de parler est <a>. Elle contient un attribut (href="***"). Beaucoup de balises peuvent admettre des attributs, on les découvrira au fur et à mesure des besoins.

    On ne répête jamais les attributs quand on ferme une balise. Ainsi la balise <a> sera toujours fermée par </a>, quelle que soit l'adresse de destination.

  • Il reste les balises de construction de tableaux et d'insertion d'images qu'on verra plus tard.

Où placer les pages HTML pour qu'elles soient visibles par tous ?

Dans votre répertoire www.

Attention

Ceci n'est vrai que depuis les salles informatique de Lille3.

L'extension DOIT être html.

Comment visualiser une page HTML ?

En lançant un navigateur web et en tapant l'adresse : http://tandem.pedago.local/~user/fichier où :

  • user est le login de la personne dont vous voulez voir la page (votre login pour voir votre page).

  • fichier est le nom du fichier qui a été enregistré dans www.

Attention

Cette adresse ne peut fonctionner que depuis les salles informatique de Lille3.

Derniers trucs

Une fois la page visualisée dans un navigateur, on peut la reprendre pour la modifier : il faut alors un « refresh » (ou, selon votre navigateur, « rafraichir », ou « reload », ou « actualiser », etc.) pour voir les modifications.

Chapitre 3. Application, acte 1

Un premier site web, 3 pages, sur le modèle ci-dessous (en adaptant à votre cas, bien entendu) :

Chapitre 4. Les tableaux en (x)HTML

Syntaxe de base

Un tableau est défini par les balises <table> et </table>.

Un tableau est constitué de lignes, chacune étant définie par les balises <tr> et </tr>.

Une ligne est constituée de cellules, chacune étant définie par les balises <td> et </td>.

Il n'y a pas de notion de colonne. Une colonne est définie de manière implicite par la superposition des cases correspondantes dans chaque ligne.

Ainsi ce code :

   <table>
      <tr>
         <td>aaa aaa<br>aaa aaa aaa<br>aaa aaa</td>
         <td>bbb bbb bbb</td>
         <td>ccc</td>
      </tr>
      <tr>
         <td>ddd</td>
         <td>eee eee</td>
         <td>fff fff fff</td>
      </tr>
   </table>
		

produira ce résultat :

Un exemple de tableau

On peut remarquer que le résultat ci-dessus ne correspond pas forcément à ce qu'on nomme communément tableau.

Il n'y a par exemple pas de bords...

Le tableau de base n'est qu'une série de cellules, arrangées selon une grille (qui n'est pas visualisée) et dont les contenus sont alignés à gauche dans les cellules.

Dans l'exemple précédent :

  • La première ligne est composée de 3 cases, qui contiennent repectivement tous les « a » pour la première, tous les « b » pour la deuxième, tous les « c » pour la troisième.

  • La deuxième ligne est composée de 3 cases, qui contiennent repectivement tous les « d » pour la première, tous les « e » pour la deuxième, tous les « f » pour la troisième.

Une cellule particulière

On peut remplacer les balises <td> et </td> par <th> et </th>.

Ce qui change : le texte est en général automatiquement centré dans la cellule (au lieu d'être aligné à gauche) et mis en gras, ce qui ne nous intéresse pas, car nous ne confierons pas la présentation à (x)HTML. Il est plus important de comprendre ce qu'est cette cellule : c'est une cellule d'en-tête (H pour Header, c'est-à-dire en-tête), destinée, en général, à être placée en début de colonne ou en début de ligne.

Chapitre 5. Les images en (x)HTML

Une image s'insère dans un texte (x)HTML par la balise :

     <img src="adresse" alt="commentaire" />
        

adresse désigne la chemin où trouver le fichier d'image (au format PNG, GIF ou JPG). Cela peut être un fichier local (sur le serveur de page (x)HTML), mais aussi un fichier distant (ailleurs sur le web) et son adresse commencera alors par « http:// ».

commentaire est un texte alternatif à afficher quand l'image ne peut pas s'afficher : erreur sur le nom, déplacement de l'image, image momentanément inaccessible, affichage de la page sur un dispositif ne permettant pas l'utilisation d'images (terminal texte, terminal Braille). Ce texte devra être à la fois le plus descriptif possible, et le plus concis possible : il est déconseillé d'utiliser des généralités du genre « image », mais aussi à l'inverse d'écrire un paragraphe entier...

Partie II. CSS

Chapitre 6. Feuilles de style : présentation

Remarque

D'après Fabien Torre

Motivation

HTML reste aujourd'hui le langage de publication sur le web par excellence. Cependant, on note l'abandon des balises de pure mise en page, celle-ci étant reléguée dans les feuilles de style. Ainsi, il est recommandé de plus utiliser de balises comme FONT, B, I, etc. Les navigateurs futurs pourront ne pas les supporter.

De manière générale, les balises HTML ne doivent être utilisées que pour structurer le document, et non plus pour préciser son apparence.

C'est la même philosophie que n'importe quel traitement de texte (OpenOffice, Word, etc.) quand on essaie de l'utiliser correctement (autant que faire se peut...).

Il s'agit d'un paradigme général consistant à dissocier le contenu d'un document de sa forme. Ici, il semblerait donc que le langage HTML soit destiné à décrire le contenu, les feuilles de style dont nous allons discuter dans la suite servant elles à décrire la forme du document.

Les intérêts de cette séparation sont nombreux :

  • un style, appliqué à toutes les pages d'un site, assure la cohérence graphique de ce site ;

  • la maintenance d'un site en est facilitée, un changement de charte graphique ne portera que sur la feuille de style et la modification sera naturellement propagée à toutes les pages ;

  • plusieurs mises en forme différentes peuvent être pour un même document sans que celui-ci ne soit répliqué en autant d'exemplaires ;

  • le code HTML est lisible et facilement modifiable, sans que l'on ait à penser en même temps au contenu et à son apparence  ;

  • les pages, dégagées des balises de mise en forme, sont plus légères, donc plus rapides à circuler sur un réseau (la feuille de style est, le plus souvent, très légère et ne sera chargée qu'une seule fois pour l'ensemble des documents qui l'utilisent) ;

  • les balises donnent une indication sur la nature du contenu et cette indication pourra être utilisée par un moteur de recherche.

Enfin, précisons immédiatement que le couple HTML/CSS ne constitue pas la seule réponse à la motivation contenu séparé de la forme, citons :

  • le contenu peut être stocké dans un fichier XML ; l'apparence peut alors à nouveau être décrite dans une feuille de style, ou confiée à des traitements plus sophistiqués ;

  • le contenu peut être stocké dans une base de données, la mise en forme étant confié à un programme, en PHP par exemple (la production de ce programme pouvant très bien être du code HTML associé à une feuille de style).

Généralités

La solution retenue pour décrire des mises en forme se nomme donc feuilles de style ou, en anglais, Cascading Style Sheets (CSS).

Remarques

En cascade : prise en compte des feuilles du navigateur, de l'utilisateur, puis de l'auteur.

Il faut faire le lien avec les modèles de document des traitements de texte.

La spécification CSS level 1 date de 1996. Elle est supportée par les navigateurs à partir des versions suivantes :

  • Mozilla 1.1 (et son descendant FireFox)

  • Phoenix 0.4

  • Netscape 6

  • Konqueror 2.2.1

  • Galeon 0.12.1

  • Internet Explorer 5.5 (Mais plus ou moins bien... Plutôt moins que plus, d'ailleurs.)

  • Opera 4

Cependant, ces navigateurs gèrent souvent une même feuille de style de manière différente... surtout si l'on utilise des éléments de la spécification CSS level 2 sortie en mai 1998. On peut même utiliser, avec plus de risques encore, des éléments de la spécification CSS level 3 à venir.

Dans tous les cas, après avoir écrit une feuille de style, il conviendra donc de vérifier l'apparence du document avec un maximum de navigateurs. Enfin, et surtout, il faut s'assurer impérativement que le document reste lisible même sans la feuille de style.

Chapitre 7. Feuilles de style : appliquer un style

Remarque

D'après Fabien Torre

Application d'un style à un code (x)HTML

  • Dans une balise, avec l'attribut STYLE, par exemple :

    					Un exemple de <b style="color:silver;">texte en gris</b>.
    				
  • Dans l'en-tête, après la balise TITLE :

       <style type="text/css">
          bla bla feuilles de style
       </style>
    				

    Voire même en utilisant des commentaires HTML pour les navigateurs non compatibles :

       <style type="text/css">
         <!--
            bla bla feuilles de style
         //-->
       </style>
    	
  • Fichier externe : tout mettre dans un fichier texte .css (ne contenant pas de balise STYLE), puis ajouter ceci dans l'en-tête du fichier HTML (entre <head> et </head>) :

    					<link rel="stylesheet" type="text/css" href="bla.css">
    				

Association avec un média particulier

Avec la version 2 de la spécification CSS, on peut indiquer le média auquel est dédié une feuille de style. Pour l'instant, les médias possibles sont : all, aural, braille, embossed, handheld, print, projection, screen, tty, tv.

La précision du média peut se faire au sein d'une même feuille de style :

   @media print {
      BODY { font-size: 10pt }
   }
   @media screen {
      BODY { font-size: 12pt }
   }

ou dans l'en-tête de la page HTML :

   <link rel="stylesheet" type="text/css" href="site.css"  media="screen">
   <link rel="stylesheet" type="text/css" href="print.css" media="print">
		

Association d'un style à une balise

Nous allons voir dans cette partie la façon de préciser que telle balise doit avoir telle présentation...

Sélecteurs de types

Dans ce cas, on ne précise que les noms des balises concernées par la définition du style (ne jamais mettre les crochets « < » et « > ») :

   H1 {
      font-family: Wide Latin;
   }
   H1,H2,H3 {
      font-family: Wide Latin, Arial Black, Helvetica, sans-serif;
      color: red;
   }
   P {
      color: blue;
   }

Sélecteurs d'attributs (CLASS ou ID)

Il est également possible de proposer des apparences différentes pour une même balise. Nous avons précédemment décrit le style associé de manière générale aux balises P et nous allons maintenant définir un autre style pour certains paragraphes dits ecolo. Cela passe par une distinction dans le code HTML :

   <p class="ecolo">
       un paragraphe...
   </p>

Puis, on utilisera la syntaxe suivante dans la feuille de style pour décrire les caractéristiques de ces paragraphes particuliers :

   p.ecolo {
      color: green;
   }

Plus généralement, on peut spécifier l'apparence d'une classe sans préciser de balise :

   .ecolo {
      color: green;
   }

Cela aura pour effet de faire apparaître en vert toutes les textes contenus dans balises de classe ecolo :

   <h1 class="ecolo">Titre  militant</h1>
   <p class="ecolo">un paragraphe...</p>

Enfin, plutôt que de parler d'une classe, il est possible de ne donner un style que pour une apparition unique d'une balise donnée. Pour cela, il faut repérer cette balise en lui donnant un identifiant unique :

   <p id="cssappliquer_p1">
      bla bla bla bla bla bla
      bla bla bla bla bla bla
      bla bla bla bla bla bla
   </p>

Puis de définir le style du paragraphe nommé p1 en utilisant la syntaxe suivante :

   #p1 { color: blue; }

Cette pratique n'est plus tout à fait dans l'esprit que nous avons décrit jusqu'à maintenant, à savoir décrire des styles généraux qui seront repris sur l'ensemble d'un site. Elle peut cependant se révéler utile dans quelques cas particuliers.

Par contexte

Dans l'exemple suivant tous les LI situés dans un UL (donc pas ceux situés dans un OL) auront une taille de caractères small. (On dira dans ce cas que LI doit être un descendant d'un UL, ou que UL doit être un ascendant d'un LI.)

Mais ceux qui seront dans un LI lui-même situé dans un UL auront une taille de caractères x_small. (Les LI descendant d'un LI lui-même descendant d'un UL.)

   BODY { margin: 0.5cm; }
   UL LI { font-size: small; }
   UL LI LI { font-size: x_small; }

On peut utiliser aussi cette méthode avec des classes et non plus des balises. Par exemple pour définir le style des H1 descendant d'une balise quelconque de classe prof :

   .prof h1 { color: red; }

On peut même préciser que cela ne s'applique que pour les fils (descendant direct, sans intermédiauire). Ainsi la définition de style suivante ne s'appliquera qu'aux P de premier niveau, ceux qui ne seront inclus dans rien d'autre :

   body > p { color: red; }

Par pseudo-classes

Quelques exemples :

   A:link          (les liens)
   A:hover         (les liens, au passage de la souris)
   A:active        (les liens, au moment du click)
   A:visited       (les liens déjà visités, prioritaire sur les précédents)
   P:first-line
   P:first-letter
   p.ecolo:link
   p.ecolo:visited

DIV et SPAN

Il s'agit de balises HTML dont le seul rôle est de délimiter une zone associée à un style : DIV pour les blocs de texte (à la manière d'un paragraphe), SPAN pour une suite de mots dans un texte. Sans style, ces balises ne produisent rien de particulier (à part un retour à la ligne pour DIV).

Notion de boîte

La mise en page à l'aide de CSS repose sur la notion de boîtes : il faut imaginer que tout contenu entre une balise ouvrante et une balise fermante est en fait dans une boîte.

À l'aide des feuilles de style, on va pouvoir spécifier l'apparence du contenu de la boîte (color, font, background, etc.), les espacements à l'extérieur de la boîte (margin) et les espacements à l'intérieur (padding).

Naturellement, l'imbrication des balises implique une imbrication des boîtes. Ainsi, les éléments <li> sont vus comme des boîtes contenus dans une boîte représentant la balise <ul>.

Chapitre 8. Feuilles de style : liste des éléments

Remarque

D'après Fabien Torre

Unités de mesure

Les unités de mesure utilisables sont px (pixel), mm (millimètre), cm (centimètre), in (inch, pouce), pt (point[1]), pc (pica[2]), em (hauteur des majuscules de la police en cours), ex (hauteur des minuscules de la police en cours).

Il faut remarquer que les unités physiques (mm, cm, in, pt, pc) n'ont a priori pas de signification sur un écran...

Propriétés de police

  • font-family : suite de noms de polices (si l'une manque sur la machine du client, on essayera la suivante), terminée par le nom d'une famille de polices (si aucune police n'a été trouvée, on prendra une police dans la famille spécifiée) ; cinq familles sont distinguées :

    • serif (Times, etc.)

    • sans-serif (Arial, Helvetica, etc.)

    • cursive

    • monospace (machine à écrire comme Courrier)

    • fantasy

  • font-size : la taille des caractères ; on peut utiliser :

    • une longueur, exprimée dans les unités de la section intitulée « Unités de mesure » ;

    • l'un des mots xx-small, x-small, small, medium, large, x-large, xx-large ;

    • l'un des mots larger, smaller ;

    • un pourcentage (de l'élément parent).

  • font-style : normal, italic, oblique ;

  • font-variant : normal, small-caps ;

  • font-weight : normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Mise en forme du texte

  • word-spacing : l'espace entre les mots ; on peut utiliser le mot normal ou une longueur, exprimée dans les unités de la section intitulée « Unités de mesure » ;

  • letter-spacing : l'espace entre deux lettres au sein d'un même mot ; on peut utiliser le mot normal ou une longueur, exprimée dans les unités de la section intitulée « Unités de mesure » ;

  • text-decoration : none, underline, overline, line-through, blink ;

  • text-transform : none, uppercase, lowercase, capitalize.

Agencement du texte

  • display : block (en bloc, avec retour à la ligne, comme <p>), inline (sur la ligne, comme <a>), list-item (élément de liste), none (n'apparaît pas à l'écran) ;

  • text-align : left, center, right, justify ;

  • text-indent : taille du retrait de première ligne ; on peut utiliser une longueur, exprimée dans les unités de la section intitulée « Unités de mesure » ou un pourcentage de la largeur de l'élément parent ;

  • line-height : hauteur de ligne ; on peut utiliser le mot normal, une longueur exprimée dans les unités de la section intitulée « Unités de mesure », un pourcentage de la hauteur de l'élément parent ou un nombre seul (la hauteur sera alors obtenue en multipliant ce nombre par la hauteur des caractères) ;

  • vertical-align : on peut utiliser :

    • l'un des mots baseline, sub, super, top, text-top, middle, bottom, text-bottom ;

    • ou un pourcentage de la hauteur de ligne.

Mise en forme de listes

  • list-style-type : type de numérotation ou de puce ; on peut utiliser l'un des mots disc (disque plein), circle (cercle, donc vide), square (carré), decimal (numérotation classique : 1, 2, 3, 4, 5), lower-roman (numérotation en chiffres romains minuscules : i, ii, iii, iv, v), upper-roman (numérotation en chiffres romains majuscules : I, II, III, IV, V), lower-alpha (numérotation en lettres minuscules : a, b, c, d, e), upper-alpha (numérotation en lettres majuscules : A, B, C, D, E), none ; il est à noter que la définition du list-style-type l'emporte que le type d'origine de la liste : on peut ainsi numéroter une liste <ul>, et transformer une liste <ol> en liste à puces ; on pourra trouver sur internet d'autres types de listes moins classiques ;

  • list-style-image : permet de spécifier une image servant de puce pour les listes ; on peut utiliser none ou url(nom de fichier image) ;

  • list-style-position : position de la numérotation ou de la puce par rapport au reste du texte (décalage vers la droite ou pas) ; on peut utiliser l'un des mots inside ou outside ;

Couleurs et arrière-plans

  • color : couleur du texte ; on peut utiliser :

    • #rrggbbr, g et b sont des chiffres héxadécimaux (entre 0 et F), et où rr, gg et bb (qui sont donc des nombres héxdécimaux, compris en 00 et FF, c'est-à-dire entre 0 et 255 en décimal) représentent respectivement la quantité de rouge, vert et bleu.

    • #rgb qui est la même chose que ci-dessus, mais avec les 2 chiffres de chaque couleur identiques (par exemple #4C0 correspond à #44CC00) ;

    • rgb(x,y,z)x, y et z sont des entiers entre 0 et 255 ;

    • rgb(x%,y%,z%)x, y et z sont des nombres compris entre 0.0 and 100.0 ;

  • background-color : couleur du fond ; comme la couleur du texte ci-dessus ;

  • background-image : image de fond ; on peut utiliser none ou url(nom de fichier image) ;

  • background-repeat  mode de réplication de l'image de fond ; repeat (réplication sur toute la fenêtre), repeat-x (réplication horizontale seulement), repeat-y (réplication verticale seulement), no-repeat (aucune réplication) :

  • background-attachement : défilement ou non de l'image de fond ; les valeurs autorisées sont scroll (défilement) et fixed(pas de défilement) ;

  • background-position : positon de l'image de fond ; les valeurs autorisées sont ;

    • un ou deux pourcentage (de la taille de l'élément concerné) ou longueur exprimée dans les unités de la section intitulée « Unités de mesure » ; cela pourra donner « 10% 3em » ou « 5cm 20% » ou « 25px » ou « 15% » ; quand les deux valeurs sont données, la première représente le décalage horizontal, la deuxième représente le décalage vertical ; quand un seul nombre est présent, il représente le décalage horizontal et le décalage vertical est considéré comme étant de 50% ;

    • un ou aucun mot choisi parmi chacun des deux groupes suivants :

      • top, center, bottom pour le positionnement vertical ;

      • left, center, right pour le positionnement horizontal ;

      ces mots sont interprétés ainsi :

      • top left = left top = 0% 0%

      • top = top center = center top = 50% 0%

      • right top = top right = 100% 0%

      • left = left center = center left = 0% 50%

      • center = center center = 50% 50%

      • right = right center = center right = 100% 50%

      • bottom left = left bottom = 0% 100%

      • bottom = bottom center = center bottom = 50% 100%

      • bottom right = right bottom = 100% 100%

Retraits extérieurs et intérieurs

  • margin, margin-top, margin-bottom, margin-left, margin-right : retraits extérieurs à un bloc ; on donnera une (ou plusieurs s'il s'agit de margin) longueur exprimée dans les unités de la section intitulée « Unités de mesure », ou un pourcentage de la dimension correpondante de l'élément parent ;

  • padding, padding-top, padding-bottom, padding-left, padding-right : retraits intérieurs à un bloc ; on donnera une (ou plusieurs s'il s'agit de padding) longueur exprimée dans les unités de la section intitulée « Unités de mesure », ou un pourcentage de la dimension correpondante de l'élément parent.

Il n'est pas peut-être pas inutile de rappeler le sens des mots padding et margin :

Le sens des mots padding et margin

Si vous utilisez margin ou padding :

  • une seule valeur s'applique aux quatre côtés;

  • quatre valeurs s'appliquent dans l'ordre en haut, à droite, en bas et à gauche (dans le sens des aiguilles d'une montre) ;

  • deux ou trois valeurs s'appliquent comme pour quatre, les valeurs manquantes étant prises sur le bord opposé.

Cadres

  • border-style, border-style-top, border-style-bottom, border-style-left, border-style-right : style du cadre ; on peut utiliser solid (plein), double (double trait), groove (en creux,), ridge (en relief), inset (3D lumière basse,), outset (3D lumière haute), dotted (en pointillé), dashed (en tirets) ;

  • border-width : largeur du bord ; vous pouvez utiliser une longueur exprimée dans les unités de la section intitulée « Unités de mesure », ou l'un des mots thin, medium et thick ;

  • border-color : couleur du bord ; vous pouvez utiliser les couleurs comme définies la section intitulée « Couleurs et arrière-plans ».

Comme pour margin, si vous utilisez border-style ou border-width ou border-color :

  • une seule valeur s'applique aux quatre côtés;

  • quatre valeurs s'appliquent dans l'ordre en haut, à droite, en bas et à gauche (dans le sens des aiguilles d'une montre) ;

  • deux ou trois valeurs s'appliquent comme pour quatre, les valeurs manquantes étant prises sur le bord opposé.

Positionnement absolu des éléments

  • position : positionnement de l'élément ; les valeurs autorisées sont static (emplacement normal), absolute (position fixe, par rapport au document), fixed (position fixe par rapport à la fenêtre du navigateur) relative (positionnement par rapport à la dernière boite affichée) ; il est à noter qu'Internet Explorer gère tout ceci très mal, à part absolute ;

  • top, bottom, left, right, width, height : respectivement position du bord supérieur, position du bord inférieur, position du bord gauche, position du bord droit, largeur de la boite, hauteur de la boite ; les valeurs autorisées sont une longueur exprimée dans les unités de la section intitulée « Unités de mesure », ou un pourcentage de l'élément contenant ;

  • visibility : rendre visible ou pas un élément ; les valeurs autorisées sont un des mots visible ou hidden ; attention : « visibility: hidden; » (l'élément n'est pas visible, mais il est affiché, et prend donc sa place dans l'affichage) n'est pas identique à « display: none » (l'élément n'est pas affiché et n'occupe aucun espace dans l'affichage) ;

  • z-index : positionnemnt vertical des éléments ; vous pouvez utiliser tout nombre comme valeur ; les éléments sont empilés dans l'ordre croissant des valeurs, au lieu de l'ordre dans lequel ils apparaissent dans le texte.

Voir aussi...



[1] Unité utilisée en imprimerie. Équivalent à 1/72 inch ou 0,352778 mm.

[2] Unité utilisée en imprimerie. Équivalent 12 points ou 4,233 mm.

Chapitre 9. Un exemple d'utilisation xHTML-CSS

L'exemple dont vous trouverez le code source ci-dessous n'a pas été construit pour être esthétique, mais comme un catalogue (non exhaustif) de certaines fonctionnalités obtenues par xHTML et CSS.

De plus certains de ces effets ne marchent pas avec Internet Explorer, utilisez de préférence un navigateur qui suit les spécifications du W3C, FireFox par exemple.

Code source xHTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Un exemple xHTML-CSS</title>
        <link rel="stylesheet" type="text/css" href="exemplexhtmlcss.css" />
    </head>
    <body>

        <h1 title="Une page pour montrer certaines possibilités des feuilles de style">
            Une page d'exemple xHTML-CSS
        </h1>

        <div class="avantpropos"
            title="Ce cadre doit contenir un titre. 
            Sinon utilisez un vrai navigateur, Firefox par exemple.">
            Cette page n'a pas été construite pour être esthétique, mais comme un catalogue
            (non exhaustif) de certaines fonctionnalités obtenues par xHTML et CSS.<br />

            De plus certains de ces effets ne marchent pas avec <em>Internet Explorer</em>,
            utilisez un <a title="Téléchargez Firefox !" href="http://www.mozilla.com">vrai
            navigateur</a>.
        </div>

        <p style="text-align:center">
            Voir cette page <a title="Lien vers une page totalement identique à celle-ci,
            mais SANS feuille de style" href="exemplexhtmlsanscss.html">sans la feuille de
            style</a>.
        </p>

        <h2 title="Présentation générale de la page, couleurs, texte, etc...">
            Présentation de la page
        </h2>

        <p>
            La couleur de fond de la page est <span class="couleur">#9fa0f4</span> 
            (utilisation d'un code héxadécimal de couleur), la couleur du texte est
            <span class="couleur">blue</span> (utilisation d'un nom de couleur).
        </p>

        <p>
            Les parties de texte de type <span class="balise">&lt;em&gt;</span> sont en
            police <em>sans-serif</em>, le reste en police <em>serif</em>.
        </p>

        <p>
            Les noms et codes de couleur sont écrits en <em>monotype</em>, en
            <span class="couleur">black</span> sur fond <span class="couleur">#ccc</span>.
            Les balises sont écrites en <span class="couleur">black</span>,
            en <em>monotype</em> également.
        </p>

        <h2 title="Présentation des titres h1 et h2">
            Les titres
        </h2>

        <p>
            Le grand titre est de type <span class="balise">&lt;h1&gt;</span> 
            et il a la présentation suivante&nbsp;:
       </p>

        <ul>
            <li> texte <span class="couleur">noir</span> sur fond
                <span class="couleur">#febadc</span>,</li>
            <li> bord <span class="couleur">blanc</span> épais,</li>
            <li> texte centré dans la ligne, texte écrit en <em>sans-serif</em>. </li>
        </ul>

        <p>
             Les autres titres sont de type <span class="balise">&lt;h2&gt;</span> et ils
             ont la présentation suivante&nbsp;:
        </p>

        <ul>
            <li> texte <span class="couleur">rouge</span> sur fond
                 <span class="couleur">blanc</span>,</li>
            <li> quand on les survole les couleurs s'inversent (texte
                 <span class="couleur">blanc</span> sur fond
                 <span class="couleur">rouge</span>),</li>
            <li> pas de bord,</li>
            <li> texte de taille 20 <em>pixels</em>, aligné à droite avec un
                 <em>padding</em> droit de 2 <em>em</em>.</li>
        </ul>

        <h2 title="Présentation des liens">
            Les liens
        </h2>

        <p>
            Les liens, quand le pointeur de souris n'est pas au-dessus, ne sont pas 
            soulignés, sont de couleur <span class="couleur">#afa</span> (vert clair), 
            et sont suivis d'une petite image (obtenue par <a title="QBullet 
            est un ensemble d'images pour orner vos pages" 
            href="http://www.matterform.com/mac_software/free_web_icons/legend.html">QBullet</a>).
        </p>

        <p>
            Quand le pointeur de souris est au-dessus, ils sont soulignés, de couleur
            <span class="couleur">#fa0</span> (orange), et la petite image est animée.
       </p>

        <h2 title="Comment vérifier que ces pages sont conformes aux normes du W3C ?">
            Conformité W3C
        </h2>

        <p>
            Les deux liens suivant permettent de vérifier la conformité de cette page 
            avec les normes du W3C&nbsp;: pour le <a
            title="Lien vers le validateur xHTML du W3C"
            href="http://validator.w3.org/check/referer">code xHTML</a>, et pour la
            <a title="Lien vers le validateur CSS du W3C"
            href="http://jigsaw.w3.org/css-validator/check/referer">feuille de style</a>.
        </p>

        <h2 title="Positionnement fixe à l'écran. Seulement pour les vrais navigateurs.">
            Positionnement
        </h2>

        <p>
            Une boite de type <span class="balise">&lt;div&gt;</span> est positionnée 
            fixée (<em>fixed</em>) en haut à droite de l'écran (<em>Internet
            Explorer</em>ne sait pas faire ça, utiliser un <a title="Téléchargez
            Firefox !" href="http://www.mozilla.com">vrai navigateur</a>). 
            Elle contient un lien écrit en <span class="couleur">blue</span> 
            pour le retour au cours, sa taille et la taille de texte augmentent 
            quand le pointeur de souris la survole.
        </p>

        <div class="navigation">
            <a title="Cliquer ici pour retourner sur la page d'accueil poly de cours"
            href="..">Retour vers le cours</a>
        </div>

        <h2 title="Quelques bulles d'aide qui apparaissent au survol par la souris">
            Bulles d'aide
        </h2>

        <p>
            Certains mots possèdent des bulles d'aide qui apparaissent quand la souris 
            les survole, en particulier les liens, les titres, les cases du tableau.
        </p>

        <h2 title="Un exemple de tableau">
            Un tableau
        </h2>

        <p>
            Le tableau est entouré d'un cadre rouge pointillé.
        </p>

        <p>
            Les cases de type <span class="balise">&lt;td&gt;</span> sont centrées, 
            entourées d'un bord fin <span class="couleur">black</span>. Le texte 
            est écrit en <span class="couleur">#eef</span> (bleu très clair) sur fond
            <span class="couleur">#00f</span> (bleu foncé).
        </p>

        <p>
            Les cases de type <span class="balise">&lt;th&gt;</span> sont alignées 
            à droite, entourées d'un bord fin de couleur <span class="couleur">blue</span>. 
            Le texte est écrit en <span class="couleur"></span> sur fond
            <span class="couleur">#ccf</span> (bleu clair).
        </p>

        <p>
            Le tableau est centré sur la page (<em>Internet Explorer</em> ne sait pas
            faire ça, utiliser un <a title="Téléchargez Firefox !"
            href="http://www.mozilla.com">vrai navigateur</a>).
        </p>

        <table>
            <tr>
                <th class="vide"></th>
                <th title="Une case de type th (en-tête)">XXXX XX X</th>
                <th title="Une case de type th (en-tête)">YYY</th>
                <th title="Une case de type th (en-tête)">ZZZ</th>
            </tr>
            <tr>
                <th title="Une case de type th (en-tête)">Ici</th>
                <td title="Une case de type td">AA</td>
                <td title="Une case de type td">BB BBB</td>
                <td title="Une case de type td">CC</td>
            </tr>
            <tr>
                <th title="Une case de type th (en-tête)">ou là</th>
                <td title="Une case de type td">3121</td>
                <td title="Une case de type td">8956 32</td>
                <td title="Une case de type td">etc.</td>
            </tr>
        </table>

    </body>
</html>
        

Code source de la feuille de style (CSS)

body { /* style général de la page */
    background:#9fa0f4;
    color:blue;
    font-family:serif;
    margin-bottom:5em;   /* Pour rendre la bas de page plus lisible */
}
DIV.avantpropos {
    padding:0 10%;
    margin:0 4em;
    border:thin solid black;
    color:rgb(30%,30%,30%);
    background:rgb(60%,60%,60%);
}
DIV.avantpropos:before { /* Ne marche pas avec Internet Explorer */
    content:"Mise en garde : ";
    font-size:120%;
    font-style: oblique;
    font-variant: small-caps;
    font-weight:bold;
}
H1 { /* style des en-têtes <h1> */
    background:#febadc;
    color:black;
    border:thick solid white;
    text-align:center;
    font-family:sans-serif;
    font-weight:bold;
}

H2 { /* style des en-têtes <h2> */
    background:white;
    color:red;
    text-align:right;
    font-size:20px;
    padding-right:2em;
}
H2:hover { /* Quand la souris passe sur un <h2>, les couleurs soint inversées */
    background:red;
    color:white;
}
li { /* Toutes les listes sont numérotées, même les <ul> */
    list-style-type:decimal;
}
.couleur { /* Présentation des noms et codes de couleurs (span) dans le texte */
    font-family:monospace;
    color:black;
    background:#ccc;
    font-size:110%;
}
em { /* Modification de la présentation des <em> */
    font-family:sans-serif;
    color:#555;
    background:inherit;
}
.balise { /* Présentation des balises xHTML figurant dans le texte */
    font-family:monospace;
    font-weight:bold;
    color:black;
    background:inherit;
    font-size:120%;
}
a:link,a:visited  {
    text-decoration:none; /* pas de soulignemnt pour les liens */
    background: url(../images/remote.gif) right center no-repeat; /* image fixe à la */
                                                                  /* fin des liens /*
    padding-right: 12px;
    color:#afa;
    background-color:inherit;
}
a:hover,a:visited:hover {
    text-decoration:underline; /* soulignemnt pour les liens survolés */
    background: url(../images/remote_a.gif) right center no-repeat; /* image animée à la  */
                                                                    /* fin des liens survolés */
    padding-right: 12px;
    color:#fa0;
    background-color:inherit;
}
.navigation { /* positionnepment fixe de la boite de retour au poly */
    position:fixed; /* Ne marche pas avec Internet Explorer */
    top:5px;
    right:5px;
    background:yellow;
    color:inherit;
    text-align:center;
}
.navigation:hover { /* modification ds tailles au survol */
    width:40em;
    height:8em;
    padding-top:4em;
}
.navigation a:link,.navigation a:visited  { /* liens dans la boite de navigation */
    background: url(../images/remote.gif) right center no-repeat;
    background-color:inherit;
    color:blue;
}
.navigation:hover a:link,.navigation:hover a:visited { /* liens dans la boite de */
                                                       /* navigation au survol */
    background: url(../images/remote_a.gif) right center no-repeat;
    font-size:250%;
}
table {
    border:thin dashed red;
    margin:0 auto;
}
td {
    border:thin solid black;
    text-align:center;
    color:#eef;
    background:#00f;
}
th.vide {
    border:none;
    background:inherit;
    color:inherit;
}
th {
    border:thin solid blue;
    text-align:right;
    color:blue;
    background:#ccf;
}
        

Chapitre 10. Réalisation de la feuille de style du site

Remarque

On reprend le site qui a été construit au Chapitre 3, Application, acte 1, et on lui ajoute une feuille de style.

Rappel : que doit contenir le site ?

Remarque

Les titres des pages doivent être des h1.

Le but à atteindre

  • Une unité graphique : même couleur de texte, même couleur de fond, même police, même présentation des titres, etc.

  • Un format pour l'écran, un autre pour l'impression.

  • Une signature fixée à droite.

  • etc.

Deux formats différents, donc deux feuilles de style

   <link rel="stylesheet" type="text/css" href="ecran.css" media="screen">
   <link rel="stylesheet" type="text/css" href="imprime.css" media="print">

La feuille de style pour l'écran

Remarque

Les couleurs sont volontairement choisies plutôt repoussantes, pour vous encourager à les changer.

Corps du texte

Couleur de fond d'écran rose et couleur de texte blanche définies pour tout le site ; comme il n'y a pas grand'chose sur le site, on va essayer de faire illusion en augmentant la taille des lettres ; la police à l'écran doit être sans-sérif :

   BODY { 
      background:#FFDDDD;
      color:blue;
      font-size:130%;
      font-family: sans-serif;
   }

Parenthèses sur les couleurs

  • On peut utiliser les noms anglais des couleurs : Black, White, Gray, Silver, Red, Maroon, Yellow, Navy, Green, Lime, Olive, Blue Aqua, Purple, Fuchsia.

  • On peut utiliser la décomposition RGB en héxadécimal (voir Chapitre 11, La gestion des couleurs en (x)HTML et CSS : Couleurs en (x)HTML).

  • Des pages font très bien le travail à notre place[3].

Titres

Les titres (h1) seront centrés, avec fond bleu et texte blanc, avec un bord blanc :

   H1 { 
      text-align:center;
      background:blue;
      color:white;
      border-style:solid;
      border-width:thin;
      border-color:white;
   }

Noms de familles

Les noms de famille seront écrits en small caps et italique :

   SPAN.nom { 
      font-variant: small-caps;
      font-style: italic;
   }

Ceci nous amènera à écrire dans le code (x)HTML par exemple :

   <SPAN CLASS="nom">Truc Bidule</SPAN>

Listes

Les listes seront préfixées par des carrés :

   LI { 
      list-style-type:square;
   }

Liens

Les liens non visités seront verts, mais passent rouges quand la souris les survole ; les liens visités sont orange :

   A:link { 
      color:green;
   }
   A:visited { 
      color:#FF9900;
   }
   A:hover, A:visited:hover { 
      color:red;
   }

Signature

Une signature identique sur toutes les pages, en bas à droite, en italique, en caractères plus petits, de couleur grise :

   DIV.signature { 
      position: fixed;
      bottom: 10pt;
      right: 5pt;
      font-size:90%;
      color:gray;
      font-style:italic;
   }
   DIV.signature:before { 
      content:"C'est moi qui l'ai fait!";
   }

Il suffira d'ajouter ceci dans le code source des pages (x)HTML :

   <div class="signature"></div>
      

Récapitulatif : le code source des pages

La page d'accueil (xHTML)

Il y a peu de différence pour les deux autres pages.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
                                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
      <title>DG : La salcicophilie</title>
      <link rel="stylesheet" type="text/css" href="site-ecran.css" media="screen" />
      <link rel="stylesheet" type="text/css" href="site-imprime.css" media="print" />
   </head>
   <body>

      <h1>Bienvenue chez moi</h1>

      <p>
         Je m'appelle <span class="nom">Truc Bidule</span>, je suis en 
         <a href="http://grappa.univ-lille3.fr/polys/htmlcss/">Licence MIASHS</a>, 
         j'ai 99 ans.
      </p>

      <p>
         Mes loisirs préférés sont :
      </p>

      <ul>
         <li>la <a href="xsite02css.html">salcicophilie</a>,</li>
         <li>la <a href="xsite03css.html">pénidébarphilie</a>.</li>
      </ul>

      <p>
         Mon voisin s'appelle 
         <a href="http://grappa.univ-lille3.fr/~gonzalez"><span class="nom">Machin 
         Chose</span></a>.
      </p>

      <div class="signature"></div>     

      <div class="valid">
         <a title="Validation HTML du W3C : ces pages respectent la norme" 
          href="http://validator.w3.org/check/referer"><img style="border:0" 
          src="http://grappa.univ-lille3.fr/~gonzalez/images/validxhtml.png" 
          alt="Valid HTML 4.01!" /></a>
         <a title="Validation CSS du W3C : la feuille de style respecte la norme" 
          href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0" 
          src="http://grappa.univ-lille3.fr/~gonzalez/images/vcss.png" 
          alt="Valid CSS!" /></a>
      </div>
   </body>
</html>

La feuille de style pour l'écran

   BODY { 
      background:#FFDDDD;
      color:blue;
      font-size:130%;
      font-family: sans-serif;
   }
   H1 { 
      text-align:center;
      background:blue;
      color:white;
      border-style:solid;
      border-width:thin;
      border-color:white;
   } 
   SPAN.nom { 
      font-variant: small-caps;
      font-style: italic;
   } 
   LI { 
      list-style-type:square;
   }
   A:link { 
      color:green;
      background:inherit;
   }
   A:visited { 
      color:#FF9900;
      background:inherit;
   }
   A:hover, A:visited:hover { 
      color:red;
      background:inherit;
   }
   DIV.signature { 
      position: fixed;
      bottom: 10pt;
      right: 5pt;
      font-size:90%;
      color:gray;
      font-style:italic;
      background:inherit;
   }
   DIV.signature:before { 
      content:"C'est moi qui l'ai fait!";
   }
   DIV.retour { 
      background:yellow;
      position: fixed;
      top: 5pt;
      right: 5pt;
      font-size:90%;
      color:gray;
      font-variant:small-caps;
      border: red thin solid;
   }
   DIV.retour a:link,DIV.retour a:hover,DIV.retour a:visited { 
      text-decoration:none;
   }
   DIV.valid { 
      position: fixed;
      bottom: 10pt;
      left:5pt;
      border:none;
   }

La feuille de style pour l'impression

Elle sera presque identique à celle pour l'écran.

   BODY { 
      font-family: serif;
      font-size:12pt;
   }
   H1 { 
      text-align:center;
      border-style:solid;
      border-width:thin;
      border-color:black;
      margin:2em;
      padding:2em;
   }
   SPAN.nom { 
      font-variant:small-caps;
      font-style:italic;
   }
   LI { 
      list-style-type:circle;
   }
   A:link,A:hover,A:visited { 
      text-decoration:none;
      color:black;
   }
   DIV.signature { 
      position: fixed;
      bottom: 10pt;
      right: 5pt;
      font-size:90%;
      color:gray;
      font-style:italic;
   }
   DIV.signature:before { 
      content:"C'est moi qui l'ai fait!";
   }
   .cacher { 
      visibility: hidden;
   }
   DIV.valid, DIV.retour { 
      display:none;
   }

Partie III. CSS, plus loin

Chapitre 11. La gestion des couleurs en (x)HTML et CSS

Tous les noms (ou codes) de couleurs vus dans ce chapitre sont utilisables en CSS ou (x)HTML, partout où une couleur est attendue (couleur de texte, couleur de fond, couleur de bord, etc.).

RGB

En plus de quelques noms prédéfinis[4] les couleurs informatiques sont définies par leur décomposition en 3 couleurs primaires rouge (Red), vert (Green) et bleu (Blue) : c'est le système RGB.

Toute couleur est alors définie par 3 nombres (entre 0 et 255) qui précisent chacun la quantité de la couleur primaire correspondante qui doit intervenir.

Quelques exemples

Si vous lisez ces pages imprimées en noir et blanc, vous allez sans doute avoir du mal à distinguer les couleurs ci-dessous. Je ne peux que vous encourager à aller voir cette page sur le web.

Exemples de couleurs

Comment ça s'utilise ?

À chaque fois que vous utilisez le nom d'une couleur (red, blue, green, yellow, gray), vous pouvez aussi utiliser un code RGB (#FF0000, #00FF00, #0000FF, #800000, #008000, #000080, #000000, #808080, #A0FF20).

Comment calculer un code RGB ?

Il s'agit d'un calcul en base 16 (on dit que c'est une valeur héxadécimale).

La base 16 utilise en plus de nos 10 chiffres (0, 1, 2, 3, ... , 8, 9) les chiffres A, B, C, D, E et F qui représentent respectivement les valeurs 10, 11, 12, 13, 14 et 15.

Notre système de calcul habituel est en base 10. Cela signifie que quand nous écrivons 35 on parle de 3 dizaines et 5 unités.

Par contre le nombre qui s'écrit 36 en base 16 représente 3 seizaines et 6 unités, ce qui fait en base 10 (notre système de calcul habituel) : 3 fois 16, c'est-à-dire 48, à quoi on ajoute 6, c'est-à-dire un résultat de 54.

On écrira parfois : 3616=5410.

Le plus grand nombre qu'on puisse écrire en base 10 avec 2 chiffres est 99 (9 est le plus grand chiffre en base 10).

De la même façon le plus grand nombre qu'on puisse écrire en base 16 avec 2 chiffres est FF (F est le plus grand chiffre en base 16). C'est (en base 10) : 15×16+15 = 240+15 = 255.

On a les correspondances suivantes :

Tableau 11.1. Correpondances décimal-hexadécimal

1016 1016 1016 1016 1016 1016 1016 1016 1016
000 101 202 303 404 505 606 707 808
909 10A 11B 12C 13D 14E 15F 1610 1711
1812 1913 2014 2115 2216 2317 2418 2519 261A
271B 281C 291D 301E 311F 3220 3321 3422 3523
3624 3725 3826 3927 4028 4129 422A 432B 442C
452D 462E 472F 4830 4931 5032 5133 5234 5335
5436 5537 5638 5739 583A 593B 603C 613D 623E
633F 6440 6541 6642 6743 6844 6945 7046 7147
7248 7349 744A 754B 764C 774D 784E 794F 8050
8151 8252 8353 8454 8555 8656 8757 8858 8959
905A 915B 925C 935D 945E 955F 9660 9761 9862
9963 10064 10165 10266 10367 10468 10569 1066A 1076B
1086C 1096D 1106E 1116F 11270 11371 11472 11573 11674
11775 11876 11977 12078 12179 1227A 1237B 1247C 1257D
1267E 1277F 12880 12981 13082 13183 13284 13385 13486
13587 13688 13789 1388A 1398B 1408C 1418D 1428E 1438F
14490 14591 14692 14793 14894 14995 15096 15197 15298
15399 1549A 1559B 1569C 1579D 1589E 1599F 160A0 161A1
162A2 163A3 164A4 165A5 166A6 167A7 168A8 169A9 170AA
171AB 172AC 173AD 174AE 175AF 176B0 177B1 178B2 179B3
180B4 181B5 182B6 183B7 184B8 185B9 186BA 187BB 188BC
189BD 190BE 191BF 192C0 193C1 194C2 195C3 196C4 197C5
198C6 199C7 200C8 201C9 202CA 203CB 204CC 205CD 206CE
207CF 208D0 209D1 210D2 211D3 212D4 213D5 214D6 215D7
216D8 217D9 218DA 219DB 220DC 221DD 222DE 223DF 224E0
225E1 226E2 227E3 228E4 229E5 230E6 231E7 232E8 233E9
234EA 235EB 236EC 237ED 238EE 239EF 240F0 241F1 242F2
243F3 244F4 245F5 246F6 247F7 248F8 249F9 250FA 251FB
252FC 253FD 254FE 255FF               

Et plus simple ?

Vous pourrez trouver un nuancier à cette adresse :

ou à cette adresse :



[4] Par exemple : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, etc. Vous n'aurez aucun mal à en trouver beaucoup d'autres sur internet.

Il faudra cependant faire attention dans l'utilisation des noms de couleur : il existe de nombreux noms que les navigateurs comprennent, mais qui ne passent pas les contrôles du W3C. La politique de normalisation actuelle est en pleine maturation et assez fluctuante : parfois la tendance dans la norme CSS2 est à la réduction (il y a eu une période où 16 noms seulement étaient autorisés), alors qu'actuellement la tendance (dans la norme CCS3) serait à l'intégration de tous les noms de couleurs inclus dans la norme SVG. Je ne peux que vous encourager à aller voir la page « CSS3 module: Color » du W3C.

Chapitre 12. Utilitaires CSS

Recommandations du W3C

Open Web

Extrait de la page d'accueil d'Open Web :

Un beau jour de mars 2002, un message anodin sur un forum parle d'un projet de site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C. Un noyau dur se rassemble autour de cette idée, souhaitant combler par-là le manque cruel d'une telle réalisation en français. Aujourd'hui, ce projet est réalisé.

Adresse de la page des articles : http://www.openweb.eu.org/articles

Chapitre 13. Positionnement et affichage avec les CSS

Pourquoi ?

Il existe 3 modes de positionnement CSS : relative, absolute, fixed. Chaque type a ses propres règles de positionnement et différentes boîtes peuvent utiliser différents schémas et interférer entre elles.

Il n'est pas peut-être pas inutile de rappeler le sens des mots padding et margin :

Le sens des mots padding et margin

Tout fonctionne par empilement de boites. Pour une boite quelconque margin désigne l'écart entre son bord (visible ou non) et le reste de la page (espace rose ci-dessus), tandis que padding désigne l'écart entre son bord (visible ou non) et son contenu (espace jaune ci-dessus).

Positionnement relatif

La position relative d'un élément est calculée et déterminée par rapport à la position de l'élément précédent dans le code HTML.

Dans ce cas :

  • « top = » sert à définir la distance entre le bord supérieur d'une zone et celui de la zone environnante.

  • « bottom = » sert à définir la distance entre le bord inférieur d'une zone et celui de la zone environnante.

  • « right = » sert à définir la distance entre le bord de droite d'une zone et celui de la zone environnante.

  • « left = » sert à définir la distance entre le bord de gauche d'une zone et celui de la zone environnante.

Les valeurs numériques et de pourcentage sont utilisées. Les valeurs négatives sont admises et il est alors possible de parvenir à faire chevaucher deux zones.

Positionnement absolu

Ce positionnement est déterminé par rapport au coin supérieur gauche du document. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

Résumé :

  • « top = » distance verticale entre le côté supérieur du navigateur et la partie supérieure de la boîte sélectionnée.

  • « left = » distance horizontale entre le côté gauche du navigateur et la partie gauche de la boîte sélectionnée.

Positionnement fixe

Ce positionnement est déterminé par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

Remarque

Attention à ne pas confondre le positionnement absolu avec le positionnement fixe.

Exemples de positionnements relatif, absolu et fixe

   <div style="
      position:fixed;
      top:5em;
      left:3em;
      width:12em;
      height:12em;
      background:yellow;
      ">fixed fixed fixed fixed fixed fixed fixed fixed </div>
   <div style="
      position:absolute;
      top:5em;
      left:3em;
      width:15em;
      height:10em;
      background:pink;
      ">absolute absolute absolute absolute absolute absolute absolute absolute </div>
   <div style="
      position:relative;
      top:5em;
      left:3em;
      width:10em;
      height:15em;
      background:green;
      ">relative relative relative relative relative relative relative relative </div>

La partie positionnée relative le sera par rapport au dernier texte affiché.

Ce qui donnera ceci :

Positionnements fixe, absolu et relatifs

Positionnement flottant

En fonction de la valeur de la propriété float (left ou right) on positionne à gauche ou à droite une boîte par rapport au reste de la page. Cette boîte n'est plus dans le flux normal, le contenu de la boîte suivante viendra se placer juste à droite (ou à gauche en fonction de l'inverse de la valeur de la propriété float).

La propriété clear

Cette propriété très intéressante permet d'empêcher une boîte d'être adjacente à une autre en fonction du côté où elle se trouve par rapport à celle-ci (et de la valeur de la propriété clear : left, right ou both, qui désigne les côtés concernés par cette interdiction).

Exemple de positionnement flottant

   <div style="float:right;border-style:solid;">droit n°1</div>
   <div style="float:right;border-style:solid;">droit n°2</div>
   <div style="float:left;border-style:solid;">gauche n°1</div>
   <div style="float:right;border-style:solid;">droit n°3</div>
   <div style="float:left;border-style:solid;">gauche n°2</div>
   <div style="float:right;border-style:solid;">droit n°4</div>
   <div style="float:left;border-style:solid;">gauche n°3</div>

Ce qui donne ceci :

Positionnement flottant

Ou encore ceci, quand la fenêtre est trop étroite :

Positionnement flottant

La propriété clear (avec les valeurs both, right et left) a pour effet de terminer une série de flottants et faire recommencer le flux sur la ligne suivante.

Affichage

La propriété display permet en fonction de la valeur qu'elle prend d'afficher de différentes manière une boîte (balise), un tableau, une liste, etc...

Valeurs possibles :

  • none : L'élément est masqué ;

  • block : transforme la boîte en type block;;

  • inline : transforme un type block en type inline.

Par défaut les boîtes (ou balises si vous préférez) sont positionnées les unes en dessous des autres (pour celle étant de type block).

Ainsi ce code :

   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>

produira cet affichage :

Display block

On peut changer la donne en modifiant le style grâce à la propriété display et une valeur inline.

Ainsi ce code :

   <div style="display:inline">Un</div>
   <div style="display:inline">Deux</div>
   <div>Trois</div>

produira cet affichage :

Display inline

Il existe aussi des boîtes de type inline. C'est donc l'inverse qui se produit, et elles sont placées à la suite des autres. Si vous souhaitez les afficher verticalement (les unes en dessous des autres), il faut utiliser la propriété display et une valeur block.

Exemple : css-demo-03.html

   <div>Un</div>
   <div>Deux</div>
   <div>Trois</div>
   
   <hr />
   
   <div style="display:inline">Un</div>
   <div style="display:inline">Deux</div>
   <div>Trois</div>
   
   <hr />
   
   <p>
   <span>Un</span>
   <span>Deux</span>
   <span>Trois</span>
   </p>
   
   <hr />
   
   <p>
   <span style="display:block">Un</span>
   <span style="display:block">Deux</span>
   <span>Trois</span>
   </p>

Ce qui donne ceci :

Display inline et block

Chapitre 14. Les bugs d'Internet Explorer, les contourner, les utiliser

Pourquoi ?

On a déjà vu plusieurs fois qu'Internet Explorer est vraiment peu efficace sur les feuilles de style[5]. Le problème c'est que de (trop !) nombreux internautes l'utilisent encore, et que vos pages doivent être visibles avec tous les navigateurs...

Nous pouvons nous simplifier la vie en apprenant à utiliser les bugs d'Internet Explorer à notre avantage.

Nous n'en verrons qu'un ici, mais à vous d'en trouver d'autres.

Avant-propos : compléments sur la syntaxe d'une feuille de style

On a vu qu'écrire (X et Y étant des balises quelconques) :

   X Y {
      bla bla bla
   }

permet de restreindre l'application de ce style aux cas où <y> est un héritier de <x>, c'est-à-dire quand <y> est située dans <x>, c'est-à-dire :

   <x> 
      ....  
   <y> .... ici le style s'applique .... </y>
      ....
   </x>
   <y> .... ici le style ne s'applique pas .... </y>

Il en existe une variante :

   X > Y {
      bla bla bla
   }

qui restreint l'application de ce style aux cas où <y> est un héritier direct (ou plus simplement un enfant) de <x>, c'est-à-dire quand aucune autre balise n'est entre <y> et <x>.

Autrement dit :

   <x>
      .... 
   <z>
      .... 
   <y> ... le premier style s'applique, pas le deuxième ... </y>
      .... 
   </z> 
      ....
   </x>
   <x>
      ....
   <y> ... les deux styles s'appliquent ... </y>
      ....
   </x>
   <y> ... aucun des deux styles ne s'applique ... </y>

Et alors ?

À cause d'un bug (!) de son parser la notation précédente n'est pas comprise par Internet Explorer.

Comme de plus une nouvelle définition écrase toute ancienne déclaration pour la même balise, il suffit d'écrire :

   balise {
      le style à appliquer à Internet Explorer
   }
   html>body balise {
      le style à appliquer aux autres navigateurs
   }

Internet Explorer lira correctement le premier style, mais sera incapable de lire le deuxième. Il appliquera donc le premier.

Un autre navigateur lira bien le premier style. Puis il lira également le deuxième style (qui signifie qu'il doit s'appliquer à la balise quand elle est déscendante de BODY, qui doit être elle-même fille de HTML, c'est-à-dire toujours, si votre code HTML est bien écrit) et qui remplacera le premier...

Exemple

Une feuille de style pour positionner un menu fixe en bas de l'écran.

Cependant Internet Explorer ne sait pas positionner de tels éléments, donc on lui demandera simplement de faire un cadre qui sera en bas du texte (sans doute pas aussi « beau » qu'on aurait voulu, mais comme il ne peut pas faire mieux, on s'en contentera...).

   div.menu { /* version pour IE */
      background:#ffe;
      border:1px solid silver;
      text-align:center;
   }
   html > body div.menu { /* version pour les autres navigateurs */
      background:#ffe;
      border: 1px solid silver;
      text-align:center;
      position:fixed;
      bottom:1em;
      left:1em;
      right:1em;
   }


[5] À tel point qu'une campagne « Éradiquons IE » a été lancée au printemps 2009 par des sites norvégiens, avant de gagner le monde entier. Vous pourrez trouver plus d'informations sur les pages suivantes : « Campagne pour l'éradication d'IE 6 », « À mort Internet Explorer 6 ! », « Meurs, navigateur de malheur », « Le jour où le Web refusa le navigateur Internet Explorer 6 », « Navigateurs : une "campagne pour l'éradication d'Internet Explorer 6" », « Campaign to rid the WWW of Internet Explorer 6 ».

Partie IV. Quelques généralités sur les réseaux

Chapitre 15. Qu'est-ce qu'un réseau ?

Qu'est-ce qu'un réseau

Le mot réseau est très souvent employé dans un sens qui le lie aux communications. Ainsi tout un chacun connaît le réseau téléphonique, le réseau routier on parlera, aussi, d'un réseau d'amis.

En informatique deux ordinateurs reliés entre eux par un câble forment déjà un réseau. On peut ainsi connecter deux « PC » avec un câble parallèle et faire des transferts de fichiers d'un disque dur vers l'autre. On utilisera pour cela un logiciel adapté au protocole d'émission et de réception des données par le port parallèle.

Deux réseaux reliés entre eux par un quelconque moyen permettant aux informations de circuler (ligne téléphonique, satellite...) forment un nouveau réseau. Il faut pour cela, ce qui n'est pas si simple, qu'un protocole commun d'échange puisse être utilisé.

Internet est un réseau fait de réseaux qui peuvent utiliser un protocole commun d'échange de données.

Historique général des réseaux

Internet est issu du réseau Arpanet (de l'Advanced Research Projects Agency), créé en 1968 par le département américain de la Défense, dans un but stratégique, pour relier ses centres de recherche.

Le réseau initial ne permettait que l'envoi de courrier électronique. C'est en 1972 que commencèrent les spécifications des protocoles TCP/IP avec l'expérience de l'usage de X25 sur ARPANET. Le but était de concevoir un réseau qui résiste à des attaques militaires telles que des bombardements. Ainsi, il ne devait pas y avoir de point névralgique dans le réseau, dont l'arrêt aurait provoqué le blocage complet de celui-ci, et les données devaient pouvoir automatiquement prendre un chemin différent en cas de coupure de liaison. D'où l'absence de contrôle centralisé dans l'internet et un cheminement dynamique des données.

Mis dans le domaine public (libre d'utilisation), il fut repris par les universitaires en 1979 (La Duke University à Durham Caroline du Nord), qui y virent le moyen d'échanger des informations.

Après les militaires et les universitaires (La National Science Foundation finance leurs mises en réseau), Internet devient aux États-Unis l'affaire des grandes entreprises privées, des P.M.E. et des particuliers.

En 1983, c'est au tour de l'Europe (par le biais en France du C.N.A.M. Conservatoire national des arts et métiers) et du reste du monde de se connecter à ce réseau de réseaux.

Selon le principe d'internet, le réseau IP français pour la recherche s'est construit par le bas, en partant des laboratoires puis des campus et en passant ensuite par la région, avant de passer au projet national. Actuellement, le développement de l'infrastructure internet en France se fait surtout du côté des opérateurs privés qui offrent les services de l'internet aux entreprises et aux particuliers.

L'outil qui rendit populaire l'internet à partir de 1993 est le WWW, le World Wide Web en un mot le Web. Le mot Web désigne la toile d'araignée et World Wide Web désigne donc la toile d'araignée couvrant le monde entier.

Le premier navigateur WEB graphique a été mis aux points au CERN (centre européen de recherche nucléaire) en 1993.

Un navigateur Web permet de se connecter à une multitude de sites diffusant des informations sans connaissances des règles de communication propre au réseau.

L'internet reliait en 1995 plus de 2 millions d'ordinateurs et plus de 30 millions d'utilisateurs dans 146 pays.

Les dates marquantes

1969 :

Le département américain de la Défense (DOD) décide de construire un réseau appelé ARPANET. D'après « la légende », le but est de pouvoir résister à une guerre nucléaire, à des sabotages, etc., en évitant la centralisation excessive des infrastructures existantes. Une dizaine de sites sont donc connectés par un réseau maillé, non hiérarchique, basé sur le protocole IP. Des laboratoires de recherche universitaires sont associés. La première utilisation est le courrier électronique.

1972 :

ARPANET rassemble une quarantaine d'ordinateurs militaires et universitaires.

1979 :

En parallèle, création du réseau civil USENET, utilisé pour des discussions thématiques, les (News ou forums).

1982 :

L'accès au réseau est accordé gratuitement.

1983 :

La National Science Foundation (NSF) américaine, équivalent du Ministère de la Recherche, finance la mise en réseau de 60 universités américaines et 3 européennes. Les stations de travail apparaissent.

1984 :

Scission d'ARPANET entre MILNET (réseau militaire) et INTERNET. La NSF prend le relai d'ARPA et assure le développement d'Internet qui intègre le NSFnet. La demande de connection est grande. Internet connecte plus de 1000 systèmes.

1986 :

Le réseau est connecté sur les lignes publiques de transmission.

1989 :

EUnet (Europe), Aussienet (Australie) rejoignent NSFnet. Les entreprises commencent à se brancher sur Internet.

1991 :

Apparition des « providers » commerciaux (fournisseurs d'accès).

1992 :

Apparition du World Wide Web (WWW), développé par le CERN à Genève. Il constitue un moyen simple d'organiser l'information et la navigation sur Internet par des hyperliens, en utilisant le format de fichier HTML.

Qui est qui ? Qui fait quoi ?

L'internet est totalement décentralisé, il ne comporte aucun site central d'où on pourrait en surveiller la bonne marche et il n'est pas géré par un administrateur unique. Il est formé d'un ensemble de réseaux. Ici le terme « réseau » est à prendre au sens d'ensemble de liaisons, d'équipements de communication, de services sous le contrôle d'une « autorité » (société commerciale, association 1901, Groupement d'intérêt public...). Chacun de ces réseaux a ses propres règles administratives, ses clients, ses tarifs, ses services et ses opérateurs (les personnes qui font fonctionner les appareils).

Plus particulièrement destinés aux entreprises et aux particuliers, il existe aussi un certain nombre de réseaux, administrés par des prestataires de services d'accès à l'Internet. Ce sont des sociétés commerciales ou des associations 1901. Les opérateurs de ces réseaux sont généralement des personnels de ces sociétés. Selon les réseaux, ils utilisent comme liaisons les réseaux publics (téléphone, Transpac, Numeris), ou/et des liaisons permanentes louées. Certains possèdent aussi leurs propres liaisons internationales.

Pour que la communication entre deux utilisateurs clients de deux réseaux différents soit possible, il faut que ces deux réseaux aient établi un chemin entre eux. Cela est très simple techniquement. Mais financièrement, il faut aussi que chaque réseau, concurrent de l'autre, y trouve son compte. Généralement, la volonté d'offrir une connectivité maximale est la motivation qui fait aboutir ce genre de négociation, quelquefois sous la pression des utilisateurs. Cela n'empêche pas que, dans certains cas, pour communiquer entre deux réseaux français, on passe par Amsterdam ou par Washington.

Généralement, ce sont des équipes très légères qui font fonctionner ces réseaux, avec quelques spécialistes.

Dernières remarques

Certaines mauvaises surprises peuvent attendre le nouvel arrivant sur l'Internet et peuvent donner lieu à un rejet total. C'est un labyrinthe. Il n'y a pas de guide et l'on risque de se perdre.

Le labyrinthe est bien réel, et il n'y a pas de recette miracle, il faut de la pratique. Il est nécessaire d'installer et d'apprendre à utiliser correctement les outils informatiques dont on a besoin, de repérer les listes utiles, les adresses clés et les sites où l'on sait trouver la matière que l'on recherche. Pour ce faire, il est primordial pour le nouveau venu d'avoir un initiateur qui a les mêmes pôles d'intérêt pour l'aiguiller sur les informations intéressantes. Il y a tout et n'importe quoi comme information. Comme la plupart des informations qui circulent ne sont validées par personne et qu'il est très simple d'en émettre, certaines ne présentent aucun intérêt, ne sont pas triées, sont obsolètes, voire fausses... Au départ cela paraît choquant. Mais un kiosque à journaux est-il différent ?

Le service n'est pas garanti. Concrètement, un jour, un utilisateur lit une information sur un ordinateur de l'Internet. Le lendemain, il ne peut plus y accéder. La liaison est momentanément interrompue, l'ordinateur est arrêté ou bien l'administrateur du serveur a décidé de changer l'organisation des informations sur la machine. Ces petits ennuis sont très horripilants lorsque l'on débute. Mais, n'étant pas très fréquents, les utilisateurs s'y habituent. Quand on ne peut accéder à quelque chose, il faut essayer un peu plus tard ou chercher sur une autre machine.

Chapitre 16. Les adresses sur internet

Adresses domainisées

Pour le cas de ma machine, l'adresse domainisée est l3ux02.univ-lille3.fr : elle se trouve en France (suffixe fr), à l'université de Lille 3 (univ-lille3) et s'appelle l3ux02.

Le monde a donc été découpé en domaines hiérarchisés. Le « top level domain », le dernier suffixe dans le nom désigne souvent le pays (fr pour France, de pour Allemagne, au pour Autriche, jp pour Japon...) ou encore une adresse commerciale par le suffixe com. Les sous-domaines sont souvent la désignation des entreprises ou des institutions (univ-lille3 ou sncf, ...). Les noms des machines qui apparaissent dans le préfixe des adresses domainisées sont souvent nommées par le service qu'elles proposent : www.sncf.fr est la machine qui permet de lire des pages hypertextes à la SNCF en France tandis que ftp.univ-lille1.fr est la machine qui permet de faire de l'échange de fichiers à l'université de Lille 1 en France.

Pour que cela marche, Internet comprend des machines qui contiennent des tables qui associent numéros IP et adresses domainisées. Ces machines sont nommées DNS pour domain name server.

Certains messages d'erreur courants font référence à cette table : « This address has not a DNS entry » signifie qu'une adresse ne peut être associée à aucun numéro IP.

Les adresses URL

Voici des exemples de format d'adresse URL par type de service.

http :

C'est l'adresse d'un document hypertexte (dans l'arborescence) sur une machine dont le nom est donné par une adresse domainisée.

Exemples :

ftp :

On désigne le fichier ainsi que sa localisation dans l'arborescence de la machine. La machine est donnée par son adresse domainisée. Dans le cas où l'utilisateur n'est pas précisé, l'échange de fichier sera anonyme (anonymous ftp dans le jargon anglo-saxon) et les droits et les autorisations relatifs à la copie ou la lecture des fichiers seront limités. Dans le cas où l'utilisateur est précisé, on hérite des droits et des autorisations de l'utilisateur. Bien sûr, ce nom doit être présent dans l'annuaire de la machine (c'est quelqu'un de connu).

Exemple : ftp://ftp.netscape.com/pub/communicator

news :

Les groupes de discussions sont aussi hiérarchisés pour mieux s'y retrouver.

Par exemple news:comp.theory, est un groupe qui parle de théorie dans la catégorie des groupes qui parlent d'informatique (comp = computer science).

Autre exemple : news:nord-pdc.petites-annonces est le groupe des petites annonces des gens du Nord-Pas-de-Calais.

mailto :

Le @ se prononce souvent « at » pour dire « chez ». Par exemple je vais envoyer un mail à William qui travaille chez Minimou, l'adresse sera sans doute mailto:William@minimou.fr.

telnet :

Sous réserve que l'utilisateur soit connu de la machine, il ouvre une connection à distance lui permettant de travailler comme si il se trouvait en face.

Par exemple l'adresse telnet://l3av03.univ-lille3.fr tente d'ouvrir une session telnet sur la machine l3av03.univ-lille3.fr.

Glossaire

A

Adresse IP

Code qui identifie une machine de manière unique sur internet ou sur un réxeau local. Une adresse IP est une valeur codée sur 32 bits et typiquement représentée sous la forme de 4 nombres décimaux correspondant aux 4 octets la composant. Toutes les valeurs possibles sont permises, mais certaines sont interprétées spécialement, comme adresses de diffusion, locales, etc.

C

Code source

Le code source est un ensemble d'instructions écrites dans un langage de programmation informatique compréhensible par les humains permettant d'obtenir un programme pour un ordinateur. Les systèmes d'exploitation ne peuvent pas directement exploiter le code source ; ils ne peuvent que lancer des exécutables. Le code source doit donc être transformé en exécutable par la compilation ou être exécuté tel quel par un interpréteur. (Définition provenant de Wikipédia.)

D

DNS

Domain Name Server. C'est une machine qui fournit un service d'annuaire. La seule façon qu'ont les machines de se contacter à travers internet passe par les adresses IP (par exemple 194.254.131.21). Les adresses IP n'étant pas très parlantes pour les êtres humains, on préfère utiliser les adresses domainisées (par exemple www.univ-lille3.fr). Ces adresses n'étant pas compréhensibles par votre ordinateur il doit demander à sa DNS quelle est l'adresse IP correspondant à cette adresse domainisée, et seulement ensuite pouvoir ainsi contacter la machine distante. Une conséquence de ce mécanisme: lors de la configuration de votre réseau la DNS doit évidemment être définie par son adresse IP (son adresse domainisée serait une information sans utilité puisque il faudrait d'abord contacter la DNS pour pourvoir contacter la DNS... Cercle vicieux.).

E

Éditeur de texte

Un éditeur de texte est un programme qui permet de saisir et modifier interactivement es textes. Un éditeur de texte est un logiciel destiné à la manipulation de fichiers textes. Un tel outil est souvent fourni avec le système d'exploitation, tellement son usage est courant, voire incontournable pour certaines tâches informatiques(administration développement). Il n'est pas en général concerné par la mise en forme. (Définition provenant de Wikipédia.)

Extension

Les extensions sont des petits programmes qui s'installent dans les logiciels de la famille Mozilla, permettant d'apporter de nouvelles fonctionnalités à l'interface. Il ne faut pas confondre les plugins avec les extensions. Les plugins permettent de lire des contenus internet que Mozilla ne sait pas lire nativement.

F

FireFox

Mozilla Firefox (précédemment Phoenix et Mozilla Firebird) est un navigateur Web libre développé et distribué par la Fondation Mozilla aidée de centaines de bénévoles grâce aux méthodes de développement open source. Avant de se concentrer sur FireFox et son compagnon Thunderbird, qui lui, permet de gérer son courrier électronique, Mozilla était surtout connu pour sa suite intégrée de logiciels Internet, d'une conception plus ancienne héritée de Netscape. (Définition provenant de Wikipédia.)

I

Internet Explorer

Internet Explorer, parfois abrégé IE ou MSIE, est le navigateur Web de Microsoft, vendu avec Windows. C'est depuis la fin des années 1990 le navigateur le plus utilisé au monde cat il s'est largement diffusé sur les ordinateurs sous Windows et Mac OS où il était souvent installé par défaut.

Internet Explorer est aujourd'hui critiqué par un nombre croissant de webmestres à cause de son implémentation incomplète des dernières technologies et de ses nombreuses entorses aux standards (les plus célèbres étant le « modèle de boîte Microsoft » en contradiction avec CSS2 et la non gestion de la translucidité des images au format PNG). Ceci vient probablement du fait que la dernière version d'Internet Explorer date d'octobre 2001, ce qui représente une éternité dans le domaine de l'informatique.

Du point de vue des utilisateurs, c'est surtout sa sécurité qui est mise en cause. Il est en effet accusé de permettre trop facilement la propagation de spywares par l'intermédiaire de sa technologie ActiveX. Un nombre impressionnant de failles de sécurité sont comblées régulièrement, mais on en annonce toujours la découverte de nouvelles. (Définition provenant de Wikipédia.)

L

Logiciel libre

L'expression « logiciel libre », donnée par Richard M. Stallman, fait référence à la liberté pour tous (simples utilisateurs ou développeurs) d'exécuter, de copier, de distribuer, d'étudier, de modifier et d'améliorer le logiciel. Plus précisément, elle fait référence à quatre libertés pour un individu ayant acquis une version du logiciel, définies par la licence de ce logiciel : la liberté d'exécuter le programme, la liberté d'étudier le fonctionnement du programme, et de l'adapter à ses besoins, la liberté de redistribuer des copies, donc d'aider son voisin, et la liberté d'améliorer le programme et de publier ses améliorations, pour en faire profiter toute la communauté. (Définition provenant de Wikipédia.)

M

Mozilla

Mozilla est un ensemble de logiciels libres multi-plateformes destinés à Internet, comprenant notamment un navigateur Web, un gestionnaire de courrier électronique, un éditeur HTML (Composer) et un client IRC (ChatZilla). Il s'agit également du nom du projet responsable du développement de ces logiciels.

N

Navigateur

Un navigateur Web est un logiciel conçu pour consulter le World Wide Web. Techniquement, c'est un client HTTP. Le terme navigateur Web (ou navigateur Internet) est inspiré de Netscape Navigator. D'autres termes sont ou ont été utilisés. Le premier terme utilisé était browser, comme en anglais. Par la suite on a vu fureteur (surtout utilisé au Québec), butineur, brouteur, arpenteur, fouineur ou explorateur (inspiré de Internet Explorer). (Définition provenant de Wikipédia.)

O

Onglet

La navigation par onglets fait référence à une nouvelle fonctionnalité apparue sur des navigateurs (browsers) internet. Cette fonctionnalité permet de pallier le désagrément lié à l'ouverture de trop nombreuses fenêtres : au bout d'une heure de surf, on a ouvert 20 fenêtres successives, la navigation parmi les applications s'en trouve alors beaucoup compliquée. La navigation par onglets n'est pas encore supportée par Internet Explorer, le navigateur web de Microsoft, mais on peut le trouver dans toute la suite Mozilla (MS Windows, Mac OS, linux, *BSD etc.) ainsi que dans Safari sur Macintosh. (Définition provenant de Wikipédia.)

P

PDF

« PDF », qui signifie « Portable Document Format » (traduit littéralement par «  format portable de documents »), est un format de fichier informatique créé par la société Adobe Systems. Il est à noter que c'est un format ouvert : ses spécifications sont publiques et utilisables librement (certains éléments sont à disposition sur le site Adobe). Il est dérivé du format PostScript. (Définition provenant de Wikipédia.)

Popup

Les pop-ups « classiques » s'ouvrent dans une nouvelle fenêtre du navigateur. Cependant, devant la multiplication des logiciels anti pop-ups, de nouvelles techniques sont utilisées pour contourner les protections, notamment des pop-up en flash ou en DHTML au sein même de la page web. (Définition provenant de Wikipédia.)

Protocole

Si on ne veut pas se lancer dans les explications techniques, il suffit de comprendre qu'un protocole n'est qu'un langage sur lequel on se met d'accord pour faire communiquer deux ordinateurs (ou plus) sur un réseau. Cette langue est en principe totalement indépendante des ordinateurs choisis. C'est ce qui permet de faire communiquer des ordinateurs tournant sur des systèmes différents (linux, MS Windows, etc.).

S

Stallman, Richard M.

Richard Matthew Stallman (né à Manhattan, le 16 mars 1953), aussi connu sous les initiales RMS, est le fondateur du mouvement pour les logiciels libres. Il est célèbre pour avoir initié le projet GNU et avoir rédigé (avec Eben Moglen) la première licence permettant de réglementer la distribution d'un logiciel avec son code source, modifiable (un logiciel libre) : la licence publique générale GNU (GNU GPL). Il a inventé le concept de Copyleft (« gauche d'auteur »). Il fut chercheur informaticien au Massachusetts Institute of Technology, puis a créé la Free software Foundation (FSF) en 1983. « Free » est à comprendre dans le sens de « libre » et non de « gratuit ». Il a également écrit l'éditeur de texte GNU Emacs, le compilateur C GCC, et le débogueur Gdb. (Définition provenant de Wikipédia.)

T

Thème

Les thèmes sont des habillages pout FireFox et Thunderbird (ainsi que d'autres logiciels). Ils permettent de changer l'apparence du logiciel et de le personnaliser à votre goûts. Un thème peut se contenter de changer les couleurs, mais il peut aussi changer tout son apparence.

U

URL

Uniform Resource Locator. C'est ce qu'on appelle communément l'adresse d'un document (par exemple http://grappa.univ-lille3.fr/~gonzalez/). Mais cela ne se limite pas aux pages web. Une URL commence par le service qui est demandé (http://, mailto:, ftp://, etc.).

W

wiki

Un wiki est un site Web dynamique permettant à tout visiteur de modifier les pages à volonté. Il permet non seulement de communiquer et diffuser des informations rapidement (ce que faisait déjà Usenet), mais de structurer cette information pour permettre d'y naviguer commodément. Il réalise donc une synthèse des forums Usenet, des FAQ dans le World Wide Web en une seule application intégrée (et hypertexte). (Définition provenant de Wikipédia.)

Wikipédia

Wikipédia est une encyclopédie libre, gratuite, universelle et multilingue, écrite bénévolement par des volontaires et basée sur un site Web (http://fr.wikipedia.org en pour la version francophone) utilisant la technologie wiki. Wikipédia est financée et gérée par la Fondation Wikimedia. Ce nom se rapporte aussi au projet visant à construire l'encyclopédie. (Définition provenant de Wikipédia.)

Index

B

background-attachement, Couleurs et arrière-plans
background-color, Couleurs et arrière-plans
background-image, Couleurs et arrière-plans
background-position, Couleurs et arrière-plans
background-repeat, Couleurs et arrière-plans
balise, HTML, à quoi ça ressemble ?
a, Les principales balises de structure
body, Structure d'un document xHTML
div, DIV et SPAN
h1, Les principales balises de structure
h2, Les principales balises de structure
h3, Les principales balises de structure
h4, Les principales balises de structure
h5, Les principales balises de structure
h6, Les principales balises de structure
head, Application d'un style à un code (x)HTML
hr, Les principales balises de structure
html, Structure d'un document xHTML
li, Les principales balises de structure
link, Association avec un média particulier
ol, Les principales balises de structure
p, Les principales balises de structure
span, DIV et SPAN
table, Syntaxe de base
td, Syntaxe de base
th, Une cellule particulière
title, Application d'un style à un code (x)HTML
tr, Syntaxe de base
ul, Les principales balises de structure
baseline, Agencement du texte
blink, Mise en forme du texte
block, Agencement du texte, Affichage
body, Structure d'un document xHTML
boîte, Notion de boîte
boite, Pourquoi ?
bold, Propriétés de police
bord d'un tableau, Syntaxe de base
border, Cadres
both, La propriété clear
bottom, Agencement du texte, Couleurs et arrière-plans, Positionnement absolu des éléments, Positionnement relatif
brouteur, Glossaire
browser, Glossaire
bug, Pourquoi ?
butineur, Glossaire

C

C.N.A.M., Historique général des réseaux
calculer un code RGB, Comment calculer un code RGB ?
capitalize, Mise en forme du texte
Cascading Style Sheets, Généralités
cellule d'un tableau, Syntaxe de base
center, Agencement du texte, Couleurs et arrière-plans
centimètre, Unités de mesure
circle, Mise en forme de listes
classe, Par contexte
clear, La propriété clear
client HTTP, Glossaire
code source, Glossaire
colonne d'un tableau, Syntaxe de base
color, Couleurs et arrière-plans, Cadres
compilation, Glossaire
connection à distance, Les adresses URL
couleur, Cadres
dans les feuilles de style, Couleurs et arrière-plans
en HTML, RGB
nom, Parenthèses sur les couleurs
nom d'une -, Comment ça s'utilise ?
primaire, RGB
CSS, Généralités
CSS Zen Garden, Comme c'est beau les feuilles de style
cursive, Propriétés de police

E

éditeur de texte, Glossaire
em (unité de mesure), Unités de mesure
emacs, Glossaire
ex (unité de mesure), Unités de mesure
exécutable, Glossaire
explorateur, Glossaire
extension, Glossaire

F

failles, Glossaire
fantasy, Propriétés de police
feuille de style, Quelles balises va-t-on utiliser ?, Motivation
fichier texte, Glossaire
FireFox, Glossaire
fixed, Couleurs et arrière-plans, Positionnement absolu des éléments, Pourquoi ?
float, Positionnement flottant
Fondation Mozilla, Glossaire
Fondation Wikimedia, Glossaire
font-family, Propriétés de police
font-size, Propriétés de police
font-style, Propriétés de police
font-variant, Propriétés de police
font-weight, Propriétés de police
fouineur, Glossaire
Free software Foundation, Glossaire
ftp
anonymous, Les adresses URL
fureteur, Glossaire

G

groove, Cadres
groupe
de discussion, Les adresses URL

M

mail, Les adresses URL
mailto, Les adresses URL
margin, Retraits extérieurs et intérieurs, Pourquoi ?
Massachusetts Institute of Technology, Glossaire
medium, Cadres
middle, Agencement du texte
millimètre, Unités de mesure
MILNET, Les dates marquantes
monospace, Propriétés de police
Mozilla, Glossaire

S

sans-serif, Propriétés de police
scroll, Couleurs et arrière-plans
sécurité, Glossaire
séparation de la structure et de la présentation, Quelles balises va-t-on utiliser ?
serif, Propriétés de police
service, Glossaire
small-caps, Propriétés de police
solid, Cadres
sous-domaines, Adresses domainisées
span, DIV et SPAN
spécification CSS, Généralités
spyware, Glossaire
square, Mise en forme de listes
Stallman, Richard M., Glossaire
static, Positionnement absolu des éléments
style, Application d'un style à un code (x)HTML
sub, Agencement du texte
super, Agencement du texte
surf, Glossaire
système RGB, RGB