1.1 Exemple

1.2 Code CSS

.alignLeft_eiid{text-align: left;}
.rouge_eiid{color: #CC0000;}
.noir_eiid{color: #000000;}
.bleu_eiid{color: #0000FF;}
.fondrouge_eiid{background-color: #CC0000; color: #FFFFFF; font-weight: bold;}
.fondnoir_eiid{background-color: #000000; color: #FFFFFF; font-weight: bold;}
.fondbleu_eiid{background-color: #0000FF; color: #FFFFFF; font-weight: bold;}

1.3 (X)HTML code

<div>Voici la liste de tous les projets. Les projets figurant sur un <span class="rouge_eiid"><strong>fond rouge</strong></span> ont été annulés, ceux qui figurent sur un <span class="noir_eiid"><strong>fond noir</strong></span> sont en cours de réalisation, et les projets figurant sur un <span class="bleu_eiid"><strong>fond bleu</strong></span> sont terminés.</div><br />

<table class="data-table">
<caption class="alignLeft_eiid"><strong>État de tous les projets</strong></caption>
<thead>
<tr>
<th scope="col">Nom du projet</th>
<th scope="col">Chef de projet</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fondrouge_eiid">RTSP</td>
<td>Gagnon, Jean</td>
</tr>
<tr>
<td class="fondnoir_eiid">Services Web</td>
<td>Untel, Pierre</td>
</tr>
<tr>
<td class="fondbleu_eiid">Renouvellement de la paie</td>
<td>Gagnon, Jean</td>
</tr>
<tr>
<td class="fondnoir_eiid">SRTS</td>
<td>Unetelle, Diane</td>
</tr>
</tbody>
</table>

2.1 Exemple

2.2 Code CSS

Il n'y a pas de code CSS.

2.3 Code (X)HTML

<div><strong>Employés actuels</strong></div>
<table border="1">
<tr>
<td rowspan="2" colspan="1" class="alignCenter"><strong>Nom</strong></td>
<td rowspan="2" colspan="1" class="alignCenter"><strong>Titre</strong></td>
<td rowspan="1" colspan="2" class="alignCenter"><strong>Salaire bihebdomadaire</strong></td>
</tr>
<tr>
<td class="alignCenter"><strong>Brut</strong></td>
<td class="alignCenter"><strong>Net</strong></td>
</tr>
<tr>
<td>Unetelle, Diane </td>
<td>Gestionnaire</td>
<td class="alignRight">2 160,68 $</td>
<td class="alignRight">1 296,41 $</td>
</tr>
<tr>
<td>Untel, Pierre</td>
<td>Directeur</td>
<td class="alignRight">2 880,90 $</td>
<td class="alignRight">1 584,50 $</td>
</tr>
<tr>
<td>Gagnon, Jean</td>
<td>Programmeur-analyste</td>
<td class="alignRight">1 440,45 $</td>
<td class="alignRight">965,10 $</td>
</tr>
</table>

3.1 Exemple

3.2 Code CSS

.alignCenter_eiid{text-align: center;}

3.3 (X)HTML code

<p class="alignCenter_eiid"><img src="letter.jpg" width="550" height="159" alt="2005-10-28 Madame, Monsieur, Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par « Monsieur, Madame, » et se termine par l'expression « Veuillez agréer, Monsieur, Madame, l'expression de mes sentiments les meilleurs. », suivie du nom de l'expéditeur. Cordialement, Anonyme" /></p>

4.1 Exemple

4.2 Code CSS

.font10pt_eiid{font-size: 10pt;}
.greyBox_eiid{width: 67%; background-color: #CCCCCC; border: none; padding: 23px 12px 23px 12px; text-align: left;}
.indent1_eiid{padding-left: 5%; border: none;}
.indent2_eiid{padding-left: 10%; border: none;}
.alignCenter{align: center;}
.alignRight{align: right;}

4.3 Code (X)HTML

<div class="font10pt_eiid">
<div class="alignCenter"><div class="greyBox_eiid">
<p class="alignRight">2005-10-28</p>
<p>Monsieur, Madame, </p>
<p>Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par &#171;&#160;Monsieur, Madame,&#160;&#187; et se termine par l'expression &#171;&#160;Veuillez agréer, Monsieur, Madame, l'expression de mes sentiments les meilleurs.&#160;&#187;, suivie du nom de l'expéditeur. </p>
<div class="indent1_eiid">Cordialement ,</div>
<div class="indent2_eiid">Anonyme </div>
</div></div>
</div>

5.1 Exemple

Veuillez remplir le formulaire ci-dessous dans le cadre de l'enquête de l'ARC.

5.2 Code CSS

Il n'y a pas de code CSS.

5.3 Code (X)HTML

<p>Veuillez remplir le formulaire ci-dessous dans le cadre de l'enquête de l'<acronym title="Agence du revenu du Canada">ARC</acronym>.</p>

<form action="#" method="post">
<div>
<strong>Nom :</strong><br /><br />
Prénom<br />
<input type="text" id="fname" name="fname" size="20" maxlength="20" />
<br /><br />

Nom<br />
<input type="text" id="lname" name="lname" size="20" maxlength="20" />
<br /><br /><br />

<strong>Numéros de téléphone :</strong><br />
Domicile<br />
<input type="text" id="hphone" name="hphone" size="12" maxlength="12" />
<br /><br />

Travail<br />
<input type="text" id="wphone" name="wphone" size="12" maxlength="12" />&#160;&#160;poste&#160;<input type="text" id="wphonex" name="wphonex" size="5" maxlength="5" />
<br /><br /><br />

Sexe<br />
<input type="radio" name="gender" value="m" />Masculin<br />
<input type="radio" name="gender" value="f" />Féminin<br />
<br /><br /><br />

Depuis compbien de temps travaillez-vous pour l'<acronym title="Agence du revenu du Canada">ARC</acronym>?<br />
<input type="radio" name="years" value="0" />de 0 à 5 ans<br />
<input type="radio" name="years" value="1" />de 6 à 10 ans<br />
<input type="radio" name="years" value="2" />de 11 à 20 ans<br />
<input type="radio" name="years" value="3" />20 ans ou plus
<br /><br /><br />

Appartenez-vous à une minorité visible?<br />
<input type="radio" name="vismin" value="y" />Oui<br />
<input type="radio" name="vismin" value="n" />Non
<br /><br /><br />

Avez-vous besoin d'une ou de plusieurs technologies adaptées pour effectuer vos t&acirc;ches courantes?<br />
<input type="radio" name="dis" value="y" />Oui<br />
<input type="radio" name="dis" value="n" />Non
<br /><br /><br />

<input type="submit" value="Envoyer" />
</div>
</form>

6.1 Exemple

Le formulaire n'a pas pu être transmis à cause des erreurs suivantes :

• Vous devez préciser votre nom.
• Vous devez préciser votre numéro de téléphone au travail.
• Vous devez préciser votre sexe.

Veuillez revenir au formulaire et corriger les erreurs avant de le renvoyer.

6.2 Code CSS

Il n'y a pas de code CSS.

6.3 Code (X)HTML

<p><strong>Le formulaire n'a pas pu être transmis à cause des erreurs suivantes :</strong></p>
<ul>
<li>Vous devez préciser votre nom.</li>
<li>Vous devez préciser votre numéro de téléphone au travail.</li>
<li>Vous devez préciser votre sexe.</li>
</ul>

<p>Veuillez revenir au formulaire et corriger les erreurs avant de le renvoyer.</p>

7.1 Exemple

Sports intramuraux

Nous offrons divers sports intramuraux saisonniers.

Sports d'hiver

Nous offrons des sports d'hiver masculins et féminins.

Sports d'hiver masculins

• Basketball
• Hockey
• Volleyball

Sports d'hiver féminins

• Basketball
• Ringuette
• Volleyball

Sports d'été

Nous offrons des sports d'été masculins et féminins.

Sport d'été masculins

• Football
• Rugby
• Soccer

Sports d'été féminins

• Hockey sur gazon
• Soccer

7.2 Code CSS

.h2Size_eiid{font-size: 120%;}
.h3Size_eiid{font-size: 110%;}

7.3 Code (X)HTML

<p class="h2Size_eiid"><strong>Sports intramuraux</strong></p>
<p>Nous offrons divers sports intramuraux saisonniers.</p>

<p class="h3Size_eiid"><strong>Sports d'hiver</strong></p>
<p>Nous offrons des sports d'hiver masculins et féminins.</p>

<p><strong>Sports d'hiver masculins</strong></p>
<ul>
<li>Basketball</li>
<li>Hockey</li>
<li>Volleyball</li>
</ul>

<p><strong>Sports d'hiver féminins</strong></p>
<ul>
<li>Basketball</li>
<li>Ringuette</li>
<li>Volleyball</li>
</ul>

<p class="h3Size_eiid"><strong>Sports d'été</strong></p>
<p>Nous offrons des sports d'été masculins et féminins.</p>

<p><strong>Sport d'été masculins</strong></p>
<ul>
<li>Football</li>
<li>Rugby</li>
<li>Soccer</li>
</ul>
<p ><strong>Sports d'été féminins</strong></p>
<ul>
<li>Hockey sur gazon</li>
<li>Soccer</li>
</ul>

8.1 Exemple

Sports intramuraux

Nous offrons divers sports intramuraux saisonniers.

Sports d'hiver

Nous offrons des sports d'hiver masculins et féminins.

Sports d'hiver masculins

• Basketball
• Hockey
• Volleyball

Sports d'hiver féminins

• Basketball
• Ringuette
• Volleyball

Sports d'été

Nous offrons des sports d'été masculins et féminins.

Sports d'été masculins

• Football
• Rugby
• Soccer

Sports d'été féminins

• Hockey sur gazon
• Soccer

8.2 Code CSS

Il n'y a pas de code CSS.

8.3 Code (X)HTML

<h2>Sports intramuraux</h2>
<p>Nous offrons divers sports intramuraux saisonniers.</p>

<h1>Sports d'hiver</h1>
<p>Nous offrons des sports d'hiver masculins et féminins.</p>

<h3>Sports d'hiver masculins</h3>
<ul>
<li>Basketball</li>
<li>Hockey</li>
<li>Volleyball</li>
</ul>

<h3>Sports d'hiver féminins</h3>
<ul>
<li>Basketball</li>
<li>Ringuette</li>
<li>Volleyball</li>
</ul>

<h1>Sports d'été</h1>
<p>Nous offrons des sports d'été masculins et féminins.</p>

<h4>Sports d'été masculins</h4>
<ul>
<li>Football</li>
<li>Rugby</li>
<li>Soccer</li>
</ul>

<h3>Sports d'été féminins</h3>
<ul>
<li>Hockey sur gazon</li>
<li>Soccer</li>
</ul>

9.1 Exemple

9.2 Code CSS

Il n'y a pas de code CSS.

9.3 Code (X)HTML

10.1 Exemple

• Pour obtenir de plus amples renseignements sur les impôts des étudiants, cliquez ici.
• Pour obtenir de plus amples renseignements sur les impôts des adultes, cliquez ici.

Des conseils fiscaux importants qui vous permettront de réaliser des économies. plus...

Quels sont les conseils fiscaux les plus importants? Tous les détails

10.2 Code CSS

Il n'y a pas de code CSS.

10.3 Code (X)HTML

<ul>
<li>Pour obtenir de plus amples renseignements sur les impôts des étudiants,<a href="...url...">cliquez ici</a>.</li>
<li>Pour obtenir de plus amples renseignements sur les impôts des adultes, <a href="...url...">cliquez ici</a>.</li>
</ul>

<p>Des conseils fiscaux importants qui vous permettront de réaliser des économies.<a href="...url...">plus...</a></p>

<p><strong>Quels sont les conseils fiscaux les plus importants?</strong> <a href="...url...">Tous les détails</a></p>

11.1 Exemple

11.2 Code CSS

.width25_eiid{width : 20%;}
.width50_eiid{width : 5%;}

11.3 Code (X)HTML

<table>
<tr>
<td class="alignCenter">
<table class="g_eiid width70">
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3" class="alignRight">2005-10-28</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3" class="alignLeft">Monsieur, Madame,</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3" class="alignLeft">Voici un exemple de lettre datée. La date
est inscrite dans le coin supérieur droit, et la lettre commence par &#171; Monsieur,
Madame, &#187; et se termine par l'expression &#171; Veuillez agréer,
Monsieur, Madame, l'expression de mes sentiments les meilleurs. &#187;,
suivie du nom de l'expéditeur.</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td class="width20_eiid">&#160;</td>
<td colspan="2" class="alignLeft">Cordialement,</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td class="width20_eiid">&#160;</td>
<td class="width5_eiid">&#160;</td>
<td align="left">Anonyme</td>
<td class="width5_eiid">&#160;</td>
</tr>
<tr>
<td class="width5_eiid">&#160;</td>
<td colspan="3">&#160;</td>
<td class="width5_eiid">&#160;</td>
</tr>
</table>
</td>
</tr>
</table>

12.1 Exemple

Catégories disponible dans la boîte à outils pour la NSI 2.0 :

12.2 Code CSS

Il n'y a pas de code CSS.

12.3 Code (X)HTML

<p><strong>Catégories disponible dans la boîte à outils pour la NSI 2.0</strong></p>
<table border="0">
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Modèle et guide technique de la NSI 2.0</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Exemples de la façon de traiter les exigences de la NSI 2.0</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Partie 1&#160;: Norme sur les adresses Web</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Partie 2&#160;: Norme sur l'accessibilité, l'interopérabilité et la facilité d'utilisation des sites Web</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Partie 3&#160;: Norme sur la présentation commune des pages Web</td></tr>
<tr><td></td><td>&#160;&#160;&#160;&#160;</td><td class="alignTop">o</td><td class="alignTop">Partie 4&#160;: Norme sur le courriel</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Renseignements généraux</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Création de contenu</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Développement et transition</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Disposition et conception</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Scripts et pages dynamiques</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Spécifications, recommandations et lignes directrices</td></tr>
<tr><td class="alignTop">•</td><td colspan="3" class="alignTop">Outils</td></tr>
</table>

13.1 Exemple

13.2 Code CSS

.greyBox_eiid{width: 67%; background-color: #CCCCCC; border: none; padding: 23px 12px 23px 12px; text-align: left;}
.noBullet{list-style-type: none;}
.alignCenter{align: center;}
.alignRight{align: right;}

13.3 Code (X)HTML

<div class="alignCenter"><div class="greyBox_eiid">
<p class="alignRight">2005-10-28</p>
<p>Monsieur, Madame,</p>
<p>Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par &#171;&#160;Monsieur, Madame,&#160;&#187; et se termine par l'expression &#171;&#160;Veuillez agréer, Monsieur, Madame, l'expression de mes sentiments les meilleurs.&#160;&#187;, suivie du nom de l'expéditeur.</p>
<ul class="noBullet"><li>Cordialement,
<ul class="noBullet"><li>Anonyme</li></ul>
</li></ul>
</div></div>

14.1 Exemple

Le message aux Administrateurs généraux des institutions figurant aux annexes I, I.1, II de la Loi sur la gestion des finances publiques a déclaré :

« La présente a pour but de vous aviser que le Conseil du Trésor a approuvé une nouvelle version de la Normalisation des sites Internet. Les normes sont entrées en vigueur le 1er janvier 2007, et devra être appliquée aux sites Internet de toutes les institutions fédérales énumérées aux annexes I, I.1 et II de la Loi sur la gestion des finances publiques. Vu le cycle de vie normal des sites Web des ministères et organismes, la mise en oeuvre se fera de manière progressive afin d'éviter des coûts inutiles; tous les sites existants devront avoir été convertis au plus tard d'ici au 31 décembre 2008. Les sites lancés après le 1er janvier 2007, devront quant à eux être conformes. »

Il a déclaré aussi « Les ministères et organismes devront soumettre leur plan de mise en oeuvre d'ici juin 2007 et présenter des rapports d'étape en décembre 2007 et janvier 2009 » et « On pourra de plus solliciter périodiquement leurs commentaires ».

14.2 Code CSS

.indent2 {padding-left: 36px;}

14.3 Code (X)HTML

<p>Le message aux Administrateurs généraux des institutions figurant aux annexes I, I.1, II de la <em>Loi sur la gestion des finances publiques</em> a déclaré&#160;:</p>

<p class="indent2">&#171;&#160;La présente a pour but de vous aviser que le Conseil du Trésor a approuvé une nouvelle version de la <em>Normalisation des sites Internet</em>. Les normes sont entrées en vigueur le 1er janvier 2007, et devra être appliquée aux sites Internet de toutes les institutions fédérales énumérées aux annexes I, I.1 et II de la <em>Loi sur la gestion des finances publiques</em>. Vu le cycle de vie normal des sites Web des ministères et organismes, la mise en oeuvre se fera de manière progressive afin d'éviter des co&ucirc;ts inutiles; tous les sites existants devront avoir été convertis au plus tard d'ici au 31 décembre 2008. Les sites lancés après le 1er janvier 2007, devront quant à eux être conformes.&#160;&#187;</p>

<p>Il a déclaré aussi &#171;&#160;Les ministères et organismes devront soumettre leur plan de mise en oeuvre d'ici juin 2007 et présenter des rapports d'étape en décembre 2007 et janvier 2009&#160;&#187; et &#171;&#160;On pourra de plus solliciter périodiquement leurs commentaires&#160;&#187;.</p>

15.1 Exemple

15.2 Code CSS

.greyBox_eiid{width: 67%; background-color: #CCCCCC; border: none; padding: 23px 12px 23px 12px; text-align: left;}
.alignCenter{align: center;}
.alignRight{align: right;}

15.3 Code (X)HTML

<div class="alignCenter"><div class="greyBox_eiid">
<p class="alignRight">2005-10-28</p>
<p>Monsieur, Madame,</p>
<p>Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par &#171;&#160;Monsieur, Madame,&#160;&#187; et se termine par l'expression &#171;&#160;Veuillez agréer, Monsieur, Madame, l'expression de mes sentiments les meilleurs.&#160;&#187;, suivie du nom de l'expéditeur. </p>
<blockquote><div>Cordialement,</div>
<blockquote><div>Anonyme</div></blockquote>
</blockquote>
</li></ul>
</div></div>