Tutoriel HTML5 & CSS3 & MathJax

Première partie: HTML5 uniquement

Avertissement

Ce tutoriel donne les meilleurs résultats avec Mozilla Firefox. Quelques fonctionnalités peuvent être ne pas donner les résultats souhaités avec Google Chrome. Avec Internet Explorer, il vaut mieux disposer des toutes dernières versions.

Introduction

Bien sûr, il est possible d'écrire des pages HTML directement à partir de Word ou LibreOffice Writer: il suffit d'écrire puis d'enregistrer le document avec l'extension .html. C'est WYSIWYG (tel écran, tel écrit) donc bien pratique, pas besoin d'apprendre un code surtout si le document est complexe, avec des photos, des tableaux,...,tout se fait en arrière plan.

A toute page html est associé un code auquel on accède très facilement par clic droit sur le document. Si le document a été construit automatiquement avec Word ou LibreOffice Writer, ce code est plus complexe et moins universel que celui auquel on aboutira à l'aide de ce tutoriel.

Ce tutoriel a l'ambition de permettre de construire des pages html fonctionnant sur les navigateurs les plus courants: Google Chrome, Firefox ou Internet Explorer.

Il y a beaucoup de points communs entre LaTeX et html:

On écrit le code sans voir immédiatement le résultat (non WYSIWYG).
Le document se décompose en 2 parties: une en-tête qui rappelle le préambule de LaTeX suivi du corps du document.
Des balises qui encadrent des morceaux de document qui rappellent les environnements de LaTeX
Des commentaires n'apparaissant pas à l'écran peuvent être ajoutés partout dans le code.
La gestion des espaces et des retours à la ligne se ressemblent beaucoup.

De quel matériel avons nous besoin ? Rien que du gratuit! La version HTLM actuelle est la version 5, elle fait partie des logiciels fournis avec les systèmes d'exploitation actuels. Si un document est écrit en HTML5 uniquement, il sera très austère. Pour le rendre plus agréable, il faut associer HTML5 et CSS3 logiciel de style. Les sources html et css peuvent se trouver sur le même document au format html. Il semble préférable de dissocier les deux codes donc dans deux fichiers, l'un au format html et l'autre au format css, chacun de ces formats ayant ses propres règles de syntaxe. La raison est que le même fichier de style puisse être utilisé pour des documents html différents, ou qu'un même document puisse recevoir différents styles.

Comme éditeur de texte, les plus courants suffisent, mais il est conseillé de préférer ceux qui permettent une colorisation des commandes spécifiques des langages HTML et CSS. C'est le cas de Notepad++ sous Windows et de Gedit sous Linux.

Pour écrire les formules mathématiques, on utilisera MathJax qui utilise les mêmes règles d'écriture que LaTeX. De plus, MathJax est maintenant bien intégré au logiciel Sage.

Le site html-ipsum.com permet d'avoir des morceaux de phrases en faux texte latin pour faire du remplissage facilement et découvrir en même temps les balises les plus utiles. Ces phrases ne posent aucun problème d'encodage contrairement au français qui contient des lettres accentuées, les cédilles et les ligatures.

L'unicode est en train de devenir le standard: il suffit de le déclarer dans le préambule pour que les caractères curieux remplaçant les lettres accentuées disparaissent.

Les commandes obligatoires

<!DOCTYPE html>						<!--écriture en HTML5-->
<html>							
    <head>						<!--entête-->
        <meta charset="utf-8" />				<!--encodage-->
	<title>HTML5 uniquement</title>		<!--le titre apparait dans l'onglet après compilation-->
    </head>

<!DOCTYPE html> signifie que le document en cours est écrit dans le langage HTML version 5

On notera la façon d'ajouter des commentaires:  . Ces commentaires peuvent être écrits sur plusieurs lignes. Il est donc possible d'ajouter par exemple en fin du source divers commentaires ou même des morceaux de code en attente d'intégration dans un document.

<html> doit toujours figurer au-début du code de n'importe quel document, quelle que soit la version

</html> doit terminer le document

<head> est la balise à placer en début d'entête

<title>HTML5+CSS3+MathJax</title> Dans tout navigateur, la page lue porte un nom qui apparaît en haut de l'écran: c'est le titre indiqué entre les balises title

</head> marque la fin de l'entête

<body> est la balise marquant le début du corps du document

</body> marque la fin du document

Les commandes principales de HTML5

On se sert en grande partie des exemples donnés sur le site html-ipsum.com

Les titres

Il existe 6 niveaux de titres différents par leur taille. On place un titre entre les balises <h1> à <h6> et </h1> à </h6>

<h6>Titre de niveau6</h6>

ce qui donne:

Titre de niveau6

Voici ce que donnent les différents niveaux de titre:

Niveau1

Niveau2

Niveau3

Niveau4

Niveau5

Niveau6

Le paragraphe

On le place entre les balises <p> et </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

ce qui donne:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

On peut constater que les coupures de phrases à l'écran ne correspondent pas à celles écrites dans le code. A un retour à la ligne dans le code ne correspond pas un retour à la ligne sur le document. Laisser une ou plusieurs espaces dans le code revient à une espace dans le document. Deux paragraphes différents sont séparés d'une ligne vide.

Le retour à la ligne

Le retour à la ligne nécessite de placer </br> dans le code à l'endroit souhaité:

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</br> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </br>Aenean ultricies mi vitae est.</br> Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

ce qui donne:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

On peut constater que les retours à la ligne se font sans introduction de ligne vide.

Les listes

Les listes non numérotées

On la place entre les balises <ul> et </ul>

Chaque item est placé entre <li> et </li>

<ul>
   <li>Morbi in sem quis dui placerat ornare. </br>Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.</br> Cras consequat.</li>
   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</br> Aliquam erat volutpat. </br>Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
   <li>Phasellus ultrices nulla quis nibh. Quisque a lectus.</br> Donec consectetuer ligula vulputate sem tristique cursus.</br> Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
   <li>Pellentesque fermentum dolor.</br> Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>

ce qui donne:

Morbi in sem quis dui placerat ornare.
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat.
Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Phasellus ultrices nulla quis nibh. Quisque a lectus.
Donec consectetuer ligula vulputate sem tristique cursus.
Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Pellentesque fermentum dolor.
Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Les listes numérotées

On la place entre les balises <ol> et </ol>

Chaque item est placé entre <li> et </li>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>

ce qui donne:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Les listes avec titres

On la place entre les balises <dl> et </dl>

Chaque item est placé entre <dd> et </dd>

<dl>
   <dt>Premier titre</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat.</dd>
   <dt>Deuxième titre</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat.</dd>
</dl>

ce qui donne:

Premier titre: Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Deuxième titre: Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Listes d'items sélectionnables

L'item envoie par clic vers un autre endroit du document, une autre page...

<nav>
	<ul>
		<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
		<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
		<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
		<li><a href="#nowhere" title="Praesent dapibus, neque id cursusfaucibus">Praesent</a></li>
		<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque </a></li>
	</ul>
</nav>

ce qui donne:

Mise en valeur du texte

Mise en caractères gras

Pour mettre un morceau de texte en gras, on le place entre <strong> et </strong>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.></p>

ce qui donne:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Mise en évidence

Pour mettre un morceau de texte en gras, on le place entre <em> et </em>

<p><em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.</p>

ce qui donne:

Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Mise en caractère type code

Pour mettre un morceau de texte en caractères de type code, on le place entre <code>et </code>

<p>Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.</p>

ce qui donne:

Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

Mise en caractères de sélection et créer des liens

Pour rendre un morceau de texte sélectionnable, il faut le placer entre <a href="#"> et </a>

<p><a href="http://home.scarlet.be/jobonne">Le site des tutoriels de l'auteur</a></p>
<p>Lien vers la page <a href="tuto1.html">MathJax dans HTML5</a></p>
<p><a href="mailto:jb@gmail.com"> envoyer un eMail</a></p>

ce qui donne:

Le site des tutoriels de l'auteur

Lien vers la page MathJax dans HTML5

envoyer un eMail

Surligner du texte

Pour surligner du texte, on le place entre <mark>et </mark>

<p><mark>Donec non enim</mark> in turpis pulvinar facilisis.</p>

ce qui donne:

Donec non enim in turpis pulvinar facilisis.

Indices et exposants

Pour mettre en exposant, il faut utiliser les balises <sup> et </sup>. Exemple: 1<sup>er</sup> donne 1^er

Pour mettre en indice, il faut utiliser les balises <sub> et </sub>. Exemple: H<sub> 2</sub>O donne H₂O

Modification de la marge

Des marges à gauche et à droite sont réalisées pour un paragraphe placé entre <blockquote> et </blockquote>

<blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p> </blockquote>

ce qui donne:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Le tableau

La construction d'un tableau se fait ligne par ligne:


<table>
	<thead>
		<tr>
			<th>Titre colonne1</th>
			<th>Titre colonne2</th>
			<th>Titre colonne3</th>
			<th>Titre colonne4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>L2C1</td>
			<td>L2C2</td>
			<td>L2C3</td>
			<td>L2C4</td>
		</tr>
		<tr>
			<td>L3C1</td>
			<td>L3C2</td>
			<td>L3C3</td>
			<td>L3C4</td>
		</tr>
		<tr>
			<td>L4C1</td>
			<td>L4C2</td>
			<td>L4C3</td>
			<td>L4C4</td>
		</tr>
	</tbody>
</table>

ce qui donne:

Titre colonne1	Titre colonne2	Titre colonne3	Titre colonne4
L2C1	L2C2	L2C3	L2C4
L3C1	L3C2	L3C3	L3C4
L4C1	L4C2	L4C3	L4C4

Cet autre exemple présente quelques options:

<table summary="Exemple de colspan et rowspan" border="1"> 	<!--summery n'apparaît pas,border encadre chaque cellule-->  										  		<caption>Exemple de colspan et rowspan</caption>	<!--caption apparaît à l'écran-->
  		<thead>
    			<tr>
      				<th colspan="2">L1C1&2</th>		<!--2 colonnes fusionnées-->
    			</tr>
    			<tr>
      				<th>L2C1</th>
      				<th>L2C2</th>
    			</tr>
  		</thead>
  		<tbody>
    			<tr>
      				<td rowspan="2">L3&4C1</td>		<!--2 lignes fusionnées-->
      				<td>L3C2</td>
    			</tr>
    			<tr>
      				<td>L4C2</td>
   			 </tr>
  		</tbody>
		</table>

ce qui donne:

Exemple de colspan et rowspan
L1C1&2
L2C1	L2C2
L3&4C1	L3C2
L3&4C1	L4C2

Ajouter une photo

Pour ajouter une photo dans le document, il faut bien indiquer le chemin permettant d'aller chercher la photo, le plus simple étant de la placer dans le même dossier que le document html.

<img src="sarko.jpg" alt="Nico" title="Nicolas SARKOZY" />

ce qui donne:

Une autre méthode permettant de placer un titre sous l'image:

<figure>
		<img src="hollande.jpg" alt="Hollande"  />
		<figcaption>François Hollande<figcaption>
</figure>

ce qui donne: