Web Design

Internet

Internet est un réseau mondial qui a permis, depuis son adoption par le grand public dans les années 90, de diffuser de l'information rapidement et facilement.

Du simple réseau d'échange destiné aux militaires, puis aux universitaires, il est devenu le lieu de toutes les transactions commerciales, des communautés virtuelles et source de savoir.

Les échanges qui se font au sein de ce réseau suivent (presque) toujours le même principe que nous abordons ci-dessous.

Principe client-serveur

Toute l'information qui est contenue dans l'Internet l'est en fait sur des ordinateurs particuliers que l'on nomme serveurs. Ces derniers peuvent être des ordinateurs très spécialisés ou de simples ordinateurs de bureau détournés de leur utilisation première. La puissance de calcul, dans ce cas, n'est pas le facteur le plus important (les contraintes sont plus en matière de disponibilité, de fiabilité, d'espace de stockage).

Ces ordinateurs serveurs ont par contre un point commun : ils disposent tous d'un logiciel particulier qui permet de diffuser leurs informations sur le Web. Ce logiciel est un serveur Web ou, plus exactement un serveur HTTP^↓. Son rôle est de répondre aux requêtes provenant des clients de l'Internet (les navigateurs que l'on trouve sur nos ordinateurs) en leur envoyant les ressources demandées (documents texte, images, ...)

Des protocoles

Les échanges entre les clients et les serveurs se font forcément de manière particulière : ils respectent un protocole de communication connu sous le nom de protocole HTTP.

Les données échangées le sont majoritairement sous forme de texte (contenu des pages, mise en forme, scripts, ...), mais bien entendu des formats de fichiers plus spécialisés sont également très présents (images, fichiers audio, fichiers vidéo, ...)

Ce protocole de communication, bien qu'extrêmement important, ne sera pas étudié ici. Nous nous intéresserons plutôt à la façon dont les données échangées sont décrites. Si l'étude du protocole HTTP vous intéresse, nous vous invitons à vous reporter aux RFC le décrivant.

Des langages

Comme nous l'avons dit plus haut, la majorité des données échangées le sont sous forme textuelle. Bien entendu, les images, les sons, les vidéos sont échangés sous forme binaire, mais là encore, ce n'est pas l'objectif de ce cours.

Chaque page qui est envoyée par un serveur Web vers un client Web doit respecter une certaine syntaxe. En fait, les pages de l'Internet s'écrivent principalement à l'aide d'un langage de description nommé HTML^↓ et c'est ce langage que nous allons étudier ici.

Ce langage a beaucoup évolué depuis ses débuts en 1991. Il est né très simple avec peu de composantes, a mûri vers une version très lourde tentant de résoudre en une seule fois les problèmes du contenu, de la sémantique et de la forme, puis s'est rationalisé en sa version actuelle qui ne s'intéresse pratiquement qu'au contenu. C'est HTML dans sa version 5.

Mais effectivement, le contenu n'est pas tout et une belle présentation permet de mettre en valeur le message qui est passé. C'est pourquoi, bien que le HTML ait perdu ses capacités de gestion de mise en forme, les personnes au W3C ont imaginé un autre langage qui n'est dédié qu'à cela. Ce sont les CSS qui, suivant un autre formalisme, permettent de réaliser des bijoux de mise en forme. Nous aborderons les CSS dans le cadre de ce cours.

Tout ceci ne serait pas complet s'il n'y avait pas là dedans une touche d'interactivité. Bien entendu, certains contenus ne se prêtent pas exactement à une utilisation interactive. Lire un article scientifique ou une revue de presse demandera moins d'interactivité que de faire des achats en ligne en utilisant un comparateur de produits. Mais si le besoin se présente, la solution existe sous la forme d'un troisième langage (ici, un langage de programmation) qui est le Javascript^↓. Nous aborderons, dans les grands axes, l'utilisation de Javascript dans le cadre de ce cours.

Un langage de description

Le HTML est un langage arborescent de description de documents dérivé du SGML. À l'aide de balises (tags en anglais) il va en décrire la structure classique (titre, sous-titre, chapitres, sections, ...) mais parfois aussi une structure qui sera support de la mise en forme.

Certaines descriptions permettront également d'apporter des informations sémantiques qui faciliteront et rendront plus précise l'analyse des documents par les "robots"^↓ de l'Internet.

Le contenu de notre page, qui sera majoritairement écrit sous forme textuelle, est intégralement encadré par ces balises.

Les règles d'écriture simples, définies dans une DTD, sont faciles à suivre. La fonction de la DTD est de permettre au navigateur de vérifier la conformité du code HTML à une norme donnée. Pour plus de détails sur les différentes DTD possibles, vous pouvez vous reporter au site du W3C.

...
<body lang="fr">
  <nav>
    <ul>
      <li><a href="index.html">Sommaire</a></li>
      <li><a href="end.html">Conclusion</a></li>
    </ul>
  </nav>
  <header>
      <h1>De l'&eacute;criture des pages</h1>
      <p class="sous-titre">ou comment publier sur l'Internet</p>
  </header>
  <section>
    <h2>Baliser sans crainte</h2>
    <p>Une balise est &eacute;crite entre chevrons.</p>
    <p>Une balise ouvrante attend une balise fermante qui reprend le nom de la premi&egrave;re, pr&eacute;c&eacute;d&eacute; du caract&egrave;re '/'.</p>
    <p>Le nom des balises peut &ecirc;tre indiff&eacute;remment en majuscule ou minuscule</p>
  </section>
</body>
...

Comme on peut le voir, les balises sont organisées selon une arborescence. C'est à dire qu'il y a une notion de hiérarchie. Nous reviendrons sur cela plus loin.

On peut également remarquer que les caractères accentués sont représentés sous une forme particulière. Ce sont des entités^↓ (entities) qui permettent de s'affranchir des soucis d'encodage de caractères que l'on rencontre constamment sur l'Internet.

Enfin, un point important est la présence, parfois, d'attributs dans les balises. Un attribut est un couple clé/valeur noté sous la forme d'une égalité (certains attributs cependant n'ont pas de valeur et seule leur présence est importante ; dans ce cas on reprendra le nom de l'attribut comme valeur). Dans l'exemple ci-dessus les balises body, a et la première balise h2 ont des attributs (respectivement lang, href et class). Un attribut ne s'écrit que dans la partie ouvrante de la balise. S'il y a plusieurs attributs pour une seule balise, on les écrit tous les uns à la suite des autres sans se soucier de leur ordre. Leur nom est toujours en minuscule, de plus, même si ce n'est pas obligatoire, il est préférable de donner la valeur de l'attribut entre guillemets.

Au sein d'un document il est tout à fait possible qu'un de ces couples clé/valeur apparaisse plusieurs fois. On peut par exemple retrouver à plusieurs endroit l'attribut lang avec la valeur fr ou même avec une autre valeur. Il y a un attribut cependant, dont la valeur ne peut apparaître qu'une seule fois dans un document. C'est l'attribut id. Par exemple, si j'ai mis dans ma page le code suivant :

<p id="synopsis">La publication de documents numériques est une action simple. Cependant pour assurer la pérennité de nos textes, il convient de respecter les règles édictées par les organismes tels que le W3C.</p>

Il ne pourra pas y avoir une autre balise, quelle qu'elle soit, avec l'id ayant pour valeur synopsis.

Balises obligatoires

Les balises du HTML sont assez nombreuses, mais il n'est pas nécessaire de toutes les connaître pour écrire un document. Il faudra se souvenir des principales et les autres seront mémorisées avec la pratique. En tant qu'informaticien fainéant on pourra se créer un modèle (template) de squelette de page.

Ces balises principales sont celles que l'on va appeler obligatoires. Sans elles, un document HTML ne sera pas bien formé^↓ et même si les navigateurs sauront le plus souvent s'en contenter, ça ne nous permettra pas d'aller bien loin dans le développement web.

Ces balises sont celles qui vont définir la structure d'une page et vont peu avoir à faire avec le contenu lui même.

html

C'est la balise racine de toutes les autres. Elle contient l'intégralité de la page et donc les autres balises.

head

L'en-tête du document. Il a surtout une fonction informative. Il ne sera pas affiché dans le document en tant que tel, mais permettra de définir de nombreuses informations dont le navigateur se servira pour afficher correctement votre page.

body

Le corps de votre document. Il est la racine de tout ce qui sera affiché dans la fenêtre du navigateur.

title

Le titre de la page. C'est une balise qui doit être définie à l'intérieur de la section head. Ce titre n'est pas affiché dans la fenêtre du navigateur, mais dans la barre de titre de cette fenêtre. À ce titre, il ne peut pas être l'objet de mise en forme.

meta

Les méta-données. Cette balise ne peut apparaître que dans la section head. Elle peut apparaître plusieurs fois et permet de définir des couples clé/valeurs utiles aux navigateurs et aux robots de l'Internet. Par exemple, c'est par ce moyen que l'on va définir l'auteur du document ou encore les mots-clés. Cette balise a une particularité, elle est vide et tout son contenu est défini par ses attributs. Elle est donc toujours écrite sous forme abrégée (voir l'exemple ci-dessous).

link

Les liens vers les documents annexes. Ces liens sont utiles à l'affichage ou au positionnement de notre document dans un groupe d'autres documents. Cette balise ne peut apparaître que dans la balise head. C'est une balise vide dont toute l'information est définie dans ses attributs.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page</title>
    <link rel="stylesheet" href="styles/main.css" />
    <meta charset="utf-8" />
    <meta name="author" content="Xavier Serpaggi" />
    <meta name="robots" content="noindex, nofollow" />
  </head>
  <body>
    Le contenu de la page
  </body>
</html>

Balises communes

Bien que les balises ci-dessus permettent de créer une page complète et conforme, elles ne sont pas suffisantes pour donner une réelle structuration à nos documents.

Nous allons présenter ici les quelques balises permettant de définir les titres, les paragraphes, ...

h1...h6

Définition d'un titre. Le titre de plus haut niveau a le numéro le plus faible. Il est rare d'utiliser des niveaux de titre au delà de h4. Les balises de titre doivent être ouvertes et fermées. Un titre apparaîtra seul sur sa ligne. Le navigateur, au moment de l'affichage rajoutera automatiquement un saut de ligne à la suite.

Exemple d'utilisation :

<h1>De l'étude du balisage en terrain numérique</h1>

p

C'est un paragraphe. Tout le texte que vous écrirez, s'il n'est pas dans un autre élément comme par exemple une table, sera sans doute entre les deux extrémités d'une balise p. Un paragraphe peut contenir une ou plusieurs phrases, c'est à la discrétion de l'auteur du document. Un paragraphe sera affiché par le navigateur comme un bloc suivi d'un saut de ligne. Il n'y a pas de césure automatique en HTML, les coupures pour éviter que le texte ne dépasse de la fenêtre du navigateur se feront donc à la frontière des mots.

Exemple d'utilisation :

<p>Pour bien baliser en terrain numérique, il convient d'être prudent, et de poser chaque repère l'un après l'autre.</p>

br

Un sauf de ligne. Parfois on désire sauter explicitement une ligne. Comme le HTML ne reconnaît pas les sauts de ligne dans le code (en fait, il n'en prendra en compte qu'un seul, même si plusieurs se suivent) on peut vouloir utiliser cette balise pour forcer cette mise en page. Cette balise n'a pas de contenu. Elle s'écrira donc toujours sous sa forme abrégée.

Exemple d'utilisation :

<p>Tout d'abord, poser une première balise.<br/>Ensuite poser une deuxième balise.<br/>...<p/>

a

Un lien hypertexte. C'est la balise qui a fait le succès de HTML. C'est grâce à elle qu'il est possible de faire référence, depuis le document actuel, à un autre document qu'il soit local ou à l'autre bout de l'Internet. L'utilisation de cette balise est un peu particulière en ce sens qu'elle a deux parties qui contiennent des informations importantes. Tout d'abord le texte lui même qui est le contenu de la balise. Ensuite, l'attribut href qui va contenir l'URL de la page à afficher si l'utilisateur clique sur le lien ainsi créé.

Exemple d'utilisation :

<p>Une fois toutes les balises correctement disposées, rendez-vous sur la <a href="slide2.html">page suivante</a> pour la prochaine étape.</p>

ul, ol, li

Les listes, numérotées avec ol (ordered list), et non numérotées avec ul (unordered list). Chaque item de la liste est défini par une balise li.

Exemple d'utilisation :

<ul>
  <li>Repérer</li>
  <li>Baliser</li>
  <li>Afficher</li>
</ul>

table, th, tr, td

Les tableaux, les tables de données. Les tables sont divisées en lignes par des balises tr. Chacune des lignes est divisée en cellules par des balises td. La ou les lignes d'en-tête utilisent des balises th en lieu et place des balises td. Il est possible de faire des tableaux bien plus compliqués qu'une simple grille. Vous pourrez vous former à cela en lisant la page consacrée aux tables sur le site du W3C.
Les tables ont longtemps été utilisées à tort pour faire de la mise en forme. Cette mauvaise pratique a disparu aujourd'hui, il conviendrait de ne pas la faire réapparaître.

Exemple d'utilisation :

<table>
  <tr>
    <th>Balise</th>
    <th>Attributs</th>
    <th>Toujours vide</th>
  </tr>
  <tr>
    <td>a</td>
    <td>href</td>
    <td>non</td>
  </tr>
  <tr>
    <td>br</td>
    <td>aucun</td>
    <td>oui</td>
  </tr>
</table>

<!DOCTYPE html>
<html>
  <head>
    <title>Baliser en terrain num&eacute;rique</title>
    <link rel="stylesheet" href="styles/main.css" />
    <meta charset="utf-8" />
    <meta name="author" content="Xavier Serpaggi" />
    <meta name="robots" content="noindex, nofollow" />
  </head>
  <body>
    <h1>De l'&eacute;tude du balisage en terrain num&eacute;rique</h1>

    <h2>Introduction</h2>
    
    <p>Baliser a toujours &eacute;t&eacute; une pr&eacute;occupation importante dans le champ du document num&eacute;rique.  Nous donnons dans ce court document quelques pistes pour baliser sans crainte.</p>
    
    <h2>M&eacute;thodologie</h2>
    
    <p>Nous allons &agrave; pr&eacute;sent aborder les points suivants&nbsp;:</p>
    
    <ol>
      <li>Bien baliser un terrain num&eacute;rique&nbsp;;</li>
      <li>Les &eacute;tapes successives&nbsp;;</li>
      <li>La finalisation.</li>
    </ol>
    
    <p>Pour bien baliser en terrain num&eacute;rique, il convient d'&ecirc;tre prudent, et de poser chaque rep&egrave;re l'un apr&egrave;s l'autre.</p>
    
    <p>Tout d'abord, poser une premi&egrave;re balise.<br/>Ne pas oublier de fermer la balise, c'est tr&egrave;s important.<br/>Poser ensuite une deuxi&egrave;me balise.<br/>Continuer ainsi jusqu'&agrave; la fin du document.<p/>

    <p>Une fois toutes les balises correctement dispos&eacute;es, vous pouvez <a href="http://validator.w3.org/">v&eacute;rifier</a> que votre HTML est conforme avant de le publier.</p> 

    <h2>R&eacute;capitulatif</h2>
    <table>
      <tr>
        <th>Balise</th>
        <th>Contenu</th>
        <th>Attributs sp&eacute;cifiques</th>
      </tr>
      <tr>
        <td>html</td>
        <td>tout le document</td>
        <td>N/A</td>
      </tr>
      <tr>
        <td>body</td>
        <td>tout ce qui est affich&eacute; du document</td>
        <td>N/A</td>
      </tr>
      <tr>
        <td>a</td>
        <td>le texte du lien sur lequel on clique</td>
        <td>href="URL"</td>
      </tr>
      <tr>
        <td>br</td>
        <td>N/A</td>
        <td>N/A</td>
      </tr>
    </table>
  </body>
</html>

Balises complémentaires

<!DOCTYPE html>
<!--
Author  : Xavier Serpaggi
Date    : 03/06/2013
Revision: $Id VERSION 1.2.29$
Licence : CC BY-SA
-->
<html>
  <head>
    <title>Baliser en terrain num&eacute;rique</title>
    <!-- Feuille de style ne tenant pas compte
    des spécificités de IE -->
    <link rel="stylesheet" href="styles/main.css" />
    <meta charset="utf-8" />
    <meta name="author" content="Xavier Serpaggi" />
    <meta name="robots" content="noindex, nofollow" />
  </head>
  <body>
    <h1>De l'&eacute;tude du balisage en terrain num&eacute;rique</h1>

    <!-- ... --> 

    <h2>R&eacute;capitulatif</h2>
    <table>
      <tr>
        <th>Balise</th>
        <th>Contenu</th>
        <th>Attributs sp&eacute;cifiques</th>
      </tr>
      <tr>
        <td>html</td>
        <td>tout le document</td>
        <td>N/A</td>
      </tr>
      <tr>
        <td>body</td>
        <td>tout ce qui est affich&eacute; du document</td>
        <td>N/A</td>
      </tr>
      <tr>
        <td>a</td>
        <td>le texte du lien sur lequel on clique</td>
        <td>href="URL"</td>
      </tr>
      <tr>
        <td>br</td>
        <td>N/A</td>
        <td>N/A</td>
      </tr>
      <!-- tr>
  <td>hr</td>
  <td>N/A</td>
  <td>N/A</td>
</tr -->
    </table>

    <!-- TODO: ajouter une conclusion -->

  </body>
</html>

Un exemple

C'est le moment de découvrir l'outil de visualisation du code source de la page qui est inclus dans votre navigateur !

Un langage de sélection/description

Le principe d'écriture d'une feuille de style est donc d'être capable d'exprimer que l'on désire modifier le style de tel ou tel élément. Ceci se fait à l'aide de sélecteurs. Mais bien souvent, désigner un style par balise, même au sein d'un seul document, n'est pas suffisamment précis. Par exemple, un texte dans un paragraphe (balise p) ne sera pas forcément représenté de la même manière s'il apparaît en tant que sous-titre, ou bien dans une introduction ou encore simplement au milieu du texte. De plus, même si HTML5 propose un ensemble de balises à vocation sémantique, elles restent très générales et ne permettent pas de s'adapter à toutes les situations. Il est alors possible de les spécialiser via l'attribut class qui pourra être cible de règles de style.

Le fond est alors bien séparé de la forme en ce sens que tous les deux sont traités à part, cependant il faut concevoir la structure de son document en sachant a priori la façon dont on désire le mettre en forme.

Mais avant de voir cela plus en détail, il faut s'intéresser aux moyens de faire prendre connaissance de notre feuille de style au navigateur client^↓.

Règles de mise en place dans la page Web

Une feuille de style peut (et ce sera souvent le cas) être partagée par plusieurs pages.

Comme le principe des CSS est la cascade, il peut également y avoir plusieurs feuilles de style pour une page, permettant de compléter la première, d'en modifier certaines définitions ou encore de prendre en charge différents types d'affichages (écran, imprimante, text to speech, ...) Tout ceci sera détaillé plus bas.

Les feuilles de style seront, par commodité, stockées dans des fichiers séparés de la page ou des pages qu'elles viennent mettre en forme. Il est bien entendu possible d'écrire du style directement dans le fichier HTML et ce sera fait pour des cas très particuliers et ponctuels. Cependant, la méthode recommandée par le W3C est bien d'utiliser des fichiers séparés. Il faut tout de même faire le lien entre le fichier HTML et le fichier CSS. C'est un des rôles de la balise link que l'on trouve dans l'en-tête du document.

L'exemple ci-dessous permettra de vous faire une idée de son utilisation :

<head>
  <title>Baliser en terrain num&eacute;rique</title>
  <link rel="stylesheet" href="styles/main.css" />
  <!-- ... -->
</head>

Comme vous pouvez le remarquer, cette balise est vide et tout ce qu'elle représente est contenu dans ses attributs. Deux sont obligatoires :

rel

Le type de ce que désigne le lien. Dans le cas d'une feuille de style ce sera toujours stylesheet.

href

L'URL où trouver la feuille de style correspondante. Comme toute URL elle peut être locale (relative ou absolue dans l'arborescence du serveur Web) ou distante.

Deux autres attributs sont souvent présents :

media

Le média auquel est destinée cette feuille de style. Les valeurs couramment rencontrées sont screen, print ou encore braille.

title

Un titre que l'on donne à l'élément. Dans le cas présent d'une feuille de style ça permet à l'utilisateur de la sélectionner facilement via un menu de son navigateur.

<head>
  <title>Baliser en terrain num&eacute;rique</title>
  <link rel="stylesheet" href="styles/main.css" media="screen" title="Affichage &eacute;cran" />
  <link rel="stylesheet" href="styles/styles/print.css" media="print" title="Impression" />
  <!-- ... -->
</head>

À présent que nous savons comment intégrer nos feuilles de style il est grand temps d'apprendre à les écrire !

Règles d'écriture

Le langage permettant d'écrire des CSS n'est ni un langage de description comme le HTML ni un langage de programmation comme le C. C'est un langage de sélection/action. La logique de construction d'une feuille de style est d'écrire des règles qui sont composées d'un ou plusieurs sélecteurs servant à désigner un ensemble d'éléments et pour chacune de ces règles, d'appliquer un style en modifiant une ou plusieurs propriétés.

Commençons par un exemple que nous détaillerons ensuite.

/* Feuille de style pour affichage écran.
 * Redéfinition de certaines valeurs par défaut
 * et modification de la palette de couleurs.
 */

html {
  padding: 0 ;
  background-color: #fafaf4 ;
}

html,
body {
  margin: 0 ;
}

body {
  background-color: rgb(255,255,255) ;
  color: #333333 ;
  border: 1px solid rgb(217,217,217) ;
}

header * {
  text-shadow: 0 0 5px #c0c0c0 ;
}

header h1 {
  font-family: Georgia, serif ;
  color: rgb(43, 44, 109) ;
  text-align: center ;
}

pre.code {
  background-color: rgb(245, 253, 247) ;
  color: #000000 ;
  font-family: monospace ;
  white-space: pre-wrap ;
}

La première règle ne concerne que la balise html. Elle est seule désignée avant le bloc d'accolades. Pour cette règle, deux propriétés sont modifiées : padding et background-color.

On remarque la syntaxe pour modifier une propriété. Il faut préciser son nom, toujours en lettres minuscules, suivi du caractère : puis de la nouvelle valeur de la propriété et enfin, terminer avec le caractère ;. Toute définition de propriété doit être terminée par le caractère ; sauf éventuellement la dernière d'une règle. Cependant, pour des raisons de cohérence d'écriture et de facilité de maintenance, il convient de terminer toutes les définitions par un ; y compris la dernière.

Nous pouvons noter sur cette règle la façon de décrire une couleur, tout à fait classique dans le monde de l'informatique. Cette notion sera détaillée ultérieurement, mais pour fixer les idées dès à présent, ce sont les valeurs hexadécimales correspondant aux trois couleurs primaires rouge, vert et bleu. Les valeurs sont données entre 00 et ff (soit entre 0 et 255 en décimal). 00 correspond à pas du tout de la composante et ff correspond au maximum de la composante. Il est possible d'écrire ces valeurs en majuscule ou en minuscule indifféremment.

La deuxième règle concerne la balise html (encore) et body. On peut savoir que les deux balises sont concernées par cette règle du fait qu'elles apparaissent devant le bloc d'accolades et qu'elles sont séparées par une virgule.

Ici ce sont les marges de ces deux balises qui sont affectées. Nous détaillerons le modèle de boîtes plus tard.

La troisième règle concerne à nouveau la balise body. Vous pouvez remarquer que les couleurs peuvent également s'écrire sous la forme d'un triplet RGB décimal en utilisant la notation rgb(<valeur pour le rouge>, <valeur pour le vert>, <valeur pour le bleu>).

La règle suivante, la quatrième, est plus compliquée au niveau du sélecteur. En effet, elle désigne tous les élément qui sont à l'intérieur d'une balise header. C'est le sens de header *. Ce n'est pas la balise header qui est concernée, mais la balise * qui est à l'intérieur de la balise header (c'est à dire toutes les balises dans le sous-arbre dont la racine est header). La différence avec la règle n°2 est subtile, cependant, il n'y a pas de virgule entre les deux noms de balise et de fait ce ne sont pas les deux qui sont concernées.

Il en va de même pour la cinquième règle où la balise dont on modifie effectivement le style sera la balise h1, mais uniquement si elle se trouve dans une balise header.

Enfin, la sixième et dernière règle ne va sélectionner que les balises pre dont l'attribut class a la valeur code. On commence à entrer ici dans les spécificités des CSS en pouvant désigner une balise particulière grâce à une classe.

Comme vous pouvez le remarquer sur ces exemples, le jeu consiste à écrire les bons sélecteurs pour désigner les bonnes balises. La modification des propriétés n'est pas en elle même une difficulté et c'est plus le côté artistique de chacun qui s'exprimera alors. La juste sélection des balises demande une approche plus rigoureuse et une structuration préalable de son code HTML.

La section suivante donne un aperçu des sélecteurs les plus employés.

Sélecteurs basiques

Nous avons déjà abordé le sujet dans les sections précédentes, le rôle des sélecteurs est de désigner un élément ou un ensemble d'éléments.

Pour ceci, il y a quelques éléments de vocabulaire importants sur l'organisation du document HTML à noter :

élément (element)

Une balise, où qu'elle soit située dans l'arborescence du document.

descendant (descendant)

Tout élément qui se trouve dans un sous-arbre d'un élément donné. C'est le sens généalogique et donc, il n'y a pas de limite de profondeur au sous-arbre.

enfant (child)

Un descendant direct d'un élément donné. C'est également au sens généalogique et donc un enfant doit se trouver directement sous l'élément concerné. Un élément donné peut avoir plusieurs enfants.

parent (parent)

L'ascendant direct d'un élément. Un élément donné a un et un seul ascendant. En réalité, l'élément html est le seul à ne pas en avoir.

frère (sibling)

Tout élément qui partage le même parent que l'élément considéré. Un élément peut donc avoir 0 ou plusieurs frères.

Ci-dessous une table qui regroupe les sélecteurs usuels. Une description complète des sélecteurs niveau 3 est disponible au W3C. Le sens est donné ici pour une utilisation sur des balises HTML.

Ces sélecteurs sont au cœur des CSS. La compréhension de leur mode de fonctionnement est donc une étape importante.

Les sélecteurs présentés ici sont ceux qui sont issus des spécifications CSS2.1. Ce sont les plus courants et ceux avec lesquels on peut facilement commencer à travailler. Cependant, la publication Web est un domaine où on a souvent toujours envie d'en faire plus. Il est alors recommandé de se plonger dans la recommandation des sélecteurs niveau 3.

Dans tous les cas et quel que soit le niveau auquel vous abordez l'écriture de CSS il faudra comprendre comment les règles s'appliquent et comment elles se cascadent. Nous allons aborder ce point dans la section suivante.

Assignation des propriétés et cascade

Comprendre comment peuvent s'appliquer les règles est primordial pour ne pas faire face à des comportements a priori incompréhensibles.

La style que va avoir un élément au final, dépend de quatre facteurs :

1. la valeur spécifiée (specified value) ;
2. la valeur calculée, résultant de l'héritage (computed value) ;
3. la valeur absolue (used value) ;
4. et la valeur finale, dépendante de l'environnement (actual value).

Chacune de ces valeurs est calculée en fonction de la précédente et toutes sont détaillées ci-dessous.

p {
  border: 1px dotted rgb(255,100,100) !important ;
}
p {
  border-bottom: 1px solid rgb(0,0,0) ;
}

* { }             /* a=0, b=0, c=0, d=0 */
p { }             /* a=0, b=0, c=0, d=1 */
p:first-child { } /* a=0, b=0, c=0, d=2 */
ul li { }         /* a=0, b=0, c=0, d=2 */
ul > li { }       /* a=0, b=0, c=0, d=2 */
dl > dt[lang] { } /* a=0, b=0, c=1, d=2 */
pre.code.wrap { } /* a=0, b=0, c=2, d=1 */
#toc { }          /* a=0, b=1, c=0, d=0 */
[id="toc"] { }    /* a=0, b=0, c=1, d=0 Attention ici, id est considéré comme un attribut classique et non comme un réel ID */
style=""          /* a=1, b=0, c=0, d=0 */

Voici donc terminée la partie théorique concernant l'écriture des CSS. C'est à peu près tout ce qu'il y a à savoir. À présent nous allons nous intéresser à ce qu'il est possible de modifier (quelles sont donc ces fameuses propriétés) et nous allons commencer par un point relativement simple : les couleurs.

Modèle de couleurs

Avant de voir la façon dont on modifie les couleurs d'un élément visuel, il faut comprendre comment elles sont représentées.

Il reste à connaître les propriétés desquelles il est possible de changer la couleur. Elles sont relativement peu nombreuses et les principales sont color, background-color, border-color. La première permet de modifier la couleur du texte d'un élément, la deuxième la couleur de fond et la dernière la couleur du bord s'il est présent ou s'il est activé.

Ces propriétés sont applicables à tout élément qui aura un rendu visuel. Cela représente une grande majorité des éléments.

Expression des dimensions

Au fil de vos utilisations des CSS vous voudrez certainement modifier la taille des objets qui constituent vos pages. Cela peut être la taille d'une police de caractères ou la taille d'une bordure, d'une marge, de l'espace entre les mots, ... À chaque fois ce sont des dimensions que l'on devra donner.

Ces dimensions peuvent s'exprimer de manière absolue, comme par exemple en précisant le nombre de pixels^↓ nécessaires pour l'espace entre deux paragraphes ou encore le nombre de points^↓ qu'il doit y avoir entre le bord de la page et le texte. L'avantage des dimensions absolues c'est qu'en général, elles correspondent à quelque chose auquel le créateur peut rapidement donner un sens physique. Ceci a cependant l'inconvénient de figer la mise en forme et ne permet pas de s'adapter automatiquement à la variété croissante des dispositifs de visualisation (écran d'ordinateur, tablette, smartphone, téléviseur, ...)

Les dimensions absolues sont : le pouce (in), le centimètre (cm), le millimètre (mm), le point (pt), le pica^↓ (pc) et le pixel (px).

nav {
  border: 1px solid rgb(150,150,150) ;
  border-bottom-width: 3px ;
  word-spacing: 0.9pc ;
}

Pour réduire le problème de la rigidité induite par les unités absolues, des unités relatives ont été imaginées. Elles sont utilisées comme les unités absolues, mais sont définies par rapport à la dimension affectée à une autre propriété. Ceci permet d'imaginer des mises en pages beaucoup plus fluides qui sont capables de s'adapter, dans une certaine mesure, à la taille du média de visualisation et donc d'une certaine manière, à son type. Il sera alors possible de dire que la marge de tel paragraphe doit être un multiple de la hauteur moyenne des caractères de la police utilisée ou que la largeur de la zone de texte affichable doit être un multiple de la taille de la police de caractères.

Les dimensions relatives sont : la taille calculée de la police de caractères courante (em) et la hauteur calculée de la lettre x dans la police de caractères courante (ex).

Comme ces dimensions sont définies par rapport à la taille de la police courante, elles ont une signification particulière quand elles servent à définir la taille de la police elle-même. Dans ce cas, elles deviennent relatives à la taille calculée de la police de l'élément parent.

body {
  margin: 0 ;
  padding: 1ex 1em ;
}

Enfin, il est possible d'exprimer des dimensions sans unité, mais comme étant égales à un pourcentage de la valeur d'une autre propriété héritée. Il est également possible de laisser le moteur de rendu déterminer automatiquement la dimension d'un élément ou d'une des tailles d'un élément.

table {
  width: 90% ;
  margin-left: auto ;
  margin-right: auto ;
}

Mais quelles sont les propriétés auxquelles il est possible d'affecter une taille ? Il y en a en fait un nombre relativement limité et les principales sont données ci-dessous.

La largeur d'un élément (width), les marges autour d'un élément (margin, margin-top, margin-right, margin-bottom, margin-left), l'espacement entre le bord d'un élément et son contenu (padding, padding-top, padding-right, padding-bottom, padding-left), la largeur minimale d'un élément (min-width) et sa largeur maximale (max-width). Ces notions seront abordées dans la section suivante sur le modèle de boîtes.

Il y a également la taille des bordures (border-width, border-top-width, border-right-width, border-bottom-width, border-left-width), la taille des polices de caractères (font-size), la hauteur des lignes (line-height), l'espacement entre les mots (word-spacing) et l'espacement entre les lettres d'un mot (letter-spacing).

Modèle de boîtes

En HTML, chaque élément définit une boîte. Cette dernière dispose de propriétés particulières qui régissent son comportement : ses dimensions et son mode d'affichage.

Positionnement

Les objets formant un document numérique sont positionnés les uns par rapport aux autres de manière automatique par le dispositif de rendu et de visualisation (par exemple un navigateur). Cependant, pour des raisons de facilité de lecture, de choix de mise en page ou autre, il est possible de modifier la façon dont ces objets vont se positionner. Nous allons distinguer trois grands modes de positionnement qui seront mutuellement exclusifs. Le premier est le positionnement dans le flot. Ensuite, nous verrons qu'il est possible de positionner un élément de manière absolue. Enfin, nous aborderons le positionnement hors du contexte de formatage avec les objets flottants.

Nous allons détailler les différents modèles de positionnement et nous allons expliquer comment les appliquer. Pour cela nous allons utiliser des propriétés CSS particulières (position, float). Cependant certaines propriétés sont communes à tous ces modèles et permettent d'agir différemment selon le contexte. Ce sont les propriétés top, right, bottom et left. Elles auront pour valeur un entier relatif et désigneront un décalage ou une position dans le repère formé par le dispositif de visualisation dont l'origine est en haut à gauche.

Nous discuterons enfin de la notion d'empilement des objets dans les documents, en nous intéressant à la position relative de ces objets sur un axe qui serait perpendiculaire à notre surface de visualisation.

aside {
  white-space: normal ;
  float: right ;
  margin: 1ex 0 1ex 1ex ;
  padding: 0.5ex ;
  width: 30% ;
}
.clear-float {
  clear: both ;
}

<!-- ... -->
  <h2>M&eacute;thodologie</h2>
<!-- ... -->
  <p>Pour bien baliser en terrain num&eacute;rique, il convient d'&ecirc;tre prudent, et de poser chaque rep&egrave;re l'un apr&egrave;s l'autre.</p>
  
  <p>Tout d'abord, poser une premi&egrave;re balise.<br/>Ne pas oublier de fermer la balise, c'est tr&egrave;s important.<br/>Poser ensuite une deuxi&egrave;me balise.<br/>Continuer ainsi jusqu'&agrave; la fin du document.<p/>

<aside>
<p>Il n'est pas n&eacute;cessaire que les balises soient clignotantes. Cependant, cela peut rajouter un air festif &agrave; votre mise en page.</p>
</aside>
  <p class="clear-float">Une fois toutes les balises correctement dispos&eacute;es, vous pouvez <a href="http://validator.w3.org/">v&eacute;rifier</a> que votre HTML est conforme avant de le publier.</p>
<!-- ... -->

body {
  z-index: 0 ;
  margin-top: 50px ;
  width: 90% ;
  margin-left: auto ;
  margin-right: auto ;
}
nav {
  width: 100% ;
  margin: 0 ;
  border-bottom: 2px solid blue ;
  min-height: 50px ;
  z-index: 10 ;
}

Encore une chose ...

Là encore, il est possible d'ajouter des commentaires à nos feuilles de style. Ils sont très utiles pour expliciter des choix (à destination d'autres personnes ou de nous même) ou pour désactiver temporairement des styles en période de mise au point.

La syntaxe est celle du langage C, c'est à dire qu'un commentaire commence par les deux caractère /* et se termine par les deux même caractères dans l'ordre inverse */. Il n'est pas possible d'imbriquer ou d'entrelacer les commentaires.

Ci-dessous, un exemple de feuille de style commentée.

/* demo.css : cas d'utilisation des commentaires
 *            dans les feuilles de style CSS.
 * Auteur   : Xavier Serpaggi
 * Date     : 03/06/2013
 */


/* Les éléments de structure */
* {
  font-family: serif ;
}

/* Mise en forme spécifique */
a[lang="en"]:before {
  content: url("/images/en.png") ;
}

/* Adaptation au media */
@media (max-width: 650px) {
  body {
    margin: 0 ;
    border: none ;
    width: 100% ;
    /* padding: 0 ; */
  }
}

Un exemple

Vous avez découvert au moment de HTML la possibilité qu'a votre navigateur d'afficher le code source d'une page Web. Vous pouvez également afficher le code source des feuilles de style. Ceci se fait simplement, dans la vue du code source HTML, en cliquant sur le lien de l'URL du fichier CSS dans la balise link concernée.

Ceci est possible avec tous les documents que vous pouvez lire en ligne. Cependant, pour des raisons valables (efficacité par exemple, sachant qu'un saut à la ligne c'est un caractère) ou moins valables (masquage ou cryptage du code), il est parfois difficile de les lire. Heureusement de nombreux logiciels ou add-ons aux navigateurs permettent de bien s'en sortir.

Javascript pour quoi faire ?

Nous donnons ici quelques exemples de ce qu'il est possible de faire avec Javascript. Ce sont des méta actions qui se déclineront à l'envie du développeur.

Validation de champs

Pour vérifier qu'un utilisateur a correctement renseigner un formulaire avant de l'envoyer.

Manipulation du DOM

Ajouter, supprimer, modifier, déplacer des élèments de la page.

Réagir aux événements

Réagir à des actions utilisateurs (clic souris, valeur entrée dans un champ, ...), à des actions sur le réseau (chargement de la page en cours, terminé ...), sur le navigateur (changement de la taille de la fenâtre, de la police, ...)

Faire des actions à intervalle régulier

Faire des horloges, des redirections, des rechargements de page, ...

Accès au navigateur

Utilisation du stockage local (au sein des bases de données du navigateur)

Récupération de données

C'est AJAX, qui permet de récupérer des données pour les afficher dans une page, sans avoir à la recharger.

Utiliser Javascript

Tout comme pour les CSS, il est possible d'inclure le Javascript directement dans vos pages, ou de faire des fichiers séparés. Il est même possible de faire référence à des scripts qui sont sur des sites annexes au travers d'une URL. C'est très souvent ce qui est fait par les personnes utilisant JQuery^↓.

Que ce soit directement dans la page ou via un fichier externe, l'utilisation se fait au travers de la balise script. Elle peut se trouver n'importe où dans votre page, que ce soit dans l'en-tête (head) ou dans le corps (body). Ce qui va changer ce sont les attributs de la balise.

Dans l'exemple ci-dessous vous avez deux scripts stockés dans des fichiers et un script inclus dans la page.

<!DOCTYPE html>
<head>
  <title></title>
  ...
  
<script src="scripts/base.js"></script>
  
<script>
    var st = document.getElementById('status') ;
    document.onreadystatechange = function() {
      if ( document.readyState == 'interactive' ) {
        st.innerHTML = 'Chargement...' ;
      } else if ( document.readyState == 'complete' ) {
        st.innerHTML = 'Page prête&nbsp;!' ;
      }
    }
</script>
  ...
</head>
<body lang="fr">
  <nav>
    <ul>
      <li><a href="index.html">Sommaire</a></li>
      <li><a href="end.html">Conclusion</a></li>
    </ul>
  </nav>
  <header>
      <h1>De l'&eacute;criture des pages</h1>
      <p class="sous-titre">ou comment publier sur l'Internet</p>
  </header>
  <section>
    <h2>Baliser sans crainte</h2>
    <p>Une balise est &eacute;crite entre chevrons.</p>
    <p>Une balise ouvrante attend une balise fermante qui reprend le nom de la premi&egrave;re, pr&eacute;c&eacute;d&eacute; du caract&egrave;re '/'.</p>
    <p>Le nom des balises peut &ecirc;tre indiff&eacute;remment en majuscule ou minuscule</p>
  </section>
  
<script src="scripts/foottips.js"></script>
</body>
...
		
		

Ce chapitre n'est qu'une ébauche, il est là pour donner le point de départ de votre apprentissage de Javascript et de son utilisation pour créer de l'interactivité dans vos pages.

Le langage est simple, mais son utilisation peut révéler des surprises et le debugage au sein d'un navigateur est fastidieux. N'hésitez pas à utiliser des outils annexes pour vous faciliter la vie.