Xposé

Comment faire votre exposé

1. But de ce document

Ce document sert à décrire le format avec lequel vous allez devoir concevoir le site de votre exposé. Il définit les différents élements HTML mis à votre disposition, ainsi que les éléments supplémentaires ne se trouvant pas dans la norme HTML.

Les éléments supplémentaires sont là pour compenser les manques de la norme HTML en ce qui concerne les exposés, et permettra à tous d'utiliser les mêmes balises et règles afin d'utiliser une feuille de styles commune.

2. Le document XHTML

Chaque document HTML devra être au format XHTML 1.0 Strict. La première ligne de chaque document devra donc être la définition du DOCTYPE de cette norme.

Un document XHTML étant un document XML, il faudra penser à valider chacune des pages au validateur du W3C.

En XHTML, il est important de préciser la langue du document en utilisant l'attribut xml:lang dans la balise <html>. Cet attribut peut être utilisé sur d'autres balises pour inclure des élémens d'une autre langue.

L'élément <head> devra contenir une balise <meta http-equiv="Content-Type"> avec dans l'attribut content le type de document (application/xhtml+xml pour XHTML) suivi du charset utilisé. Mettez comme valeur le charset d'enregistrement de votre éditeur, si vous ne savez pas, sous Windows c'est généralement windows-1252, sous Linux, c'est UTF-8, ISO-8859-1 ou ISO-8859-15

Structure de base d'un document XHTML :

<!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">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<title>Titre de ma page<title>
<link rel="stylesheet" type="text/css" title="Xposé" href="http://mess.genezys.net/Xpose/Xpose.css" />
</head>

<body>

</body>

</html>

3. Les éléments HTML utiles

Voici les éléments les plus utilisés en XHTML, tout d'abord les éléments boites :

<p>
pour tous les paragraphes de texte.
<h1>, <h2>,... <h6>
les 6 niveaux de titres disponibles de base dans XHTML. <h1> sert généralement à indiquer le titre du site web.
<ul>/<ol> <li>
utilisé pour des listes à puces ou numérotées. <ul> pour les listes à puces, et <ol> pour les listes numérotées. Chaque <li> sera alors un élément de la liste.

puis les éléments textes, ceux-ci sont placés en plein milieu d'un texte :

<img src="image.png" alt="mon image"/>
pour insérer une image. Attention, l'attribut alt est obligatoire et permet de décrire l'image lorsque celle-ci ne peut pas se charger.
<a href="cible">
pour placer un lien hypertexte vers cible.
<em>
pour faire une emphase. Les emphases sont généralement affichées en italique.
<strong>
pour faire une emphase forte. Les emphases fortes sont généralement affichées en gras.

Il existe aussi quelques autres balises qui vous seront utiles pour vos exposés :

<dl> <dt>/<dd> (boite)
pour faire des listes de définitions. On met un <dt> et un <dd> dans le <dl> pour chaque définition, le <dt> étant le titre et le <dd> étant la définition.
<pre> (boite)
pour écrire sur plusieurs lignes en conservant tous les espaces et saut de lignes (attention à l'indentation).
<code> (texte)
pour écrire du code. Il est recommandé de combiner <pre> et <code> pour écrire du code sur plusieurs lignes.
<blockquote> (bloc)
pour faire un bloc de citation.
<q> (texte)
pour faire une citation rapide dans un texte.
<sub> (texte)
pour mettre un texte en indice.
<sup> (texte)
pour mettre un texte en exposant.

4. Les éléments supplémentaires

Afin de mettre en place des zones spéciales dans votre document, voici une liste d'éléments supplémentaires qui sont plaçables soit par un attribut id (unique dans la page), soit par un attribut class.

Les id

navigation
Cet élément devra contenir vos menus de navigations. Ces menus se composent d'un titre <h2> et d'une liste de liens dans un <ul>.
content
Cet élément contient tout le reste de votre page, c'est à dire tout votre contenu.

Pour ces 2 éléments, vous pourrez utiliser l'élément englobant <div> qui n'a aucune signification et ne sert que pour grouper les éléments.

Il est préférable que le menu de navigation soit situé à la suite du contenu pour des raisons d'accessibilité aux données par les navigateurs texte (lynx, imprimante, export PDF, etc.).

<div id="content">
...
</div>

<div id="navigation">
...
</div>

5. Les éléments HTML nécessaires

Les menus de navigation doivent avoir un titre en <h2>.

Le titre de votre exposé doit être un <h1>, le titre de votre page sera un <h2> et les autres titres, vous pourrez utiliser <h3> à <h6>.

6. La feuille de style

Vous pouvez utiliser cette page comme base de départ.

Le vote est terminé, le style que vous voyez est le style retenu

Pour les boulets qui ne savent pas enregistrer une page web chez eux, voici le lien vers la CSS.