• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/10/19

Comprenez le langage HTML

Log in or subscribe for free to enjoy all this course has to offer!

Bravo, vous avez créé et publié votre premier site ! Ce faisant, vous avez appris à utiliser quelques balises html. Et si on tentait de comprendre ensemble ce qui se cache vraiment sous ce html et de résumer les concepts qui permettent de créer un site Web !

Distinguez le fond de la forme

Regardons un petit bout de code HTML dont on peut voir le résultat en ligne.  Pour plus de facilité, vous Intégrerez l’ensemble du projet “Exemple minimal pour piger les dessous de HTML/CSS/JS (remix)” sur votre compte Thimble en cliquant sur le bouton Remixer en haut à droite de la page. Vous pourrez ainsi le modifier si vous le souhaitez.

Voici tout d’abord le résultat de l’affichage dans votre navigateur :

On y voit :

  • un mot avec une emphase (en italique) ;

  • un lien vers Wikipédia ;

  • une portion de texte montrant un code informatique ;

  • et un bouton à cliquer pour lancer le code.

D’ailleurs si vous avez cliqué sur ce bouton (faites-le si vous n’avez pas essayé ;) ), une boîte de dialogue est apparue, comme ceci :

Bien. Enfin… Ça pourrait être plus joli :)

Mais ce que nous voulons, c’est séparer les problèmes, pour d'une part représenter le sens du texte et sa structure en HTML et d’autre part définir sa mise en page. Bref : séparer le fond de la forme.

Structurez votre texte

Dans notre exemple chaque morceau de texte - la description, le code et l’animation (la boîte de dialogue) - est inséré dans un bloc <div>…</div>:

Structurez votre propos

On structure son propos pour le lecteur, en sections, sous-sections ou paragraphes, avec des titres (pardon, avec des <div class=’titre’>…</div> ;).

 <div> </div>représente une balise générique qui crée un bloc dans la page web avec un retour à la ligne.

On peut ajouter un index avec l’attribut id, comme cela : <div id="mon-exemple"></div>. Cela permet de référencer la section se trouvant à l’intérieur du document, c’est-à-dire d’attribuer à toute une partie du texte, au sein même du document, une référence qu’on pourra réutiliser ensuite, que ce soit pour créer une ancre à cet endroit précis de la page, ou encore pour définir un style particulier pour ce bout de texte.

Donnez du sens aux différents éléments de texte

On sépare le contenu de la façon de l’afficher. Ainsi, on précise via l’attribut class de quel type de texte il s’agit, plus exactement, le nom de la classe pour le style à utiliser (on en reparle juste après).

Dans notre exemple, le contenu d’un des blocs est du code informatique qui sera affiché comme défini par la classe nommée "code". On pourra, de la même façon, indiquer une citation ou une abréviation.

On permet ainsi à son texte d’être lu par un humain mais aussi d’être traité par des algorithmes (de recherche ou d’analyse) auxquels on a besoin de présenter de l’information bien structurée.

Enrichissez le texte

Nous avons du texte, et nous souhaitons le mettre en forme avec de l’italique, par exemple, ou des couleurs. C’est là qu’intervient le fichier style.css : c’est lui qui indique que la partie qu’on met en emphase sera en italique.

D’ailleurs, si vous reprenez le projet “Exemple minimal pour piger les dessous de HTML/CSS/JS (remix)” sur votre compte Thimble, vous trouverez le fichier style.css suivant :

.description {
width:100%;
padding:10px;
background-color: #f0f0f0;
}
.emphase {
font-style: italic;
}
.code {
display: block;
font-family: monospace;
white-space: pre;
font-size: larger;
color: grey;
margin: 1em 0;
}
.button {
display:block;
margin: 5px auto;
width: 10%
}

Par exemple, dans le code CSS au-dessus, le passage :

.emphase {
font-style: italic;
}

...indique que tout ce qui sera déclaré comme appartenant à la classe emphase sera en italique. Autrement dit, cela concerne tous les bouts de texte entre les balises<span class=”emphase”> et  </span>  ;).
Par exemple, avec  <span class="emphase">minimal</span> , le mot “minimal” sera en italique.

On retrouve aussi dans le fichier style.css la classe "code" mentionnée précédemment.

.code {
display: block;
font-family: monospace;
white-space: pre;
font-size: larger;
color: grey;
margin: 1em 0;
}

Ajoutez des liens ou des objets

Dans cette partie, nous allons voir deux nouveaux mécanismes : faire un lien vers un média externe ou insérer ce média directement dans la page.

Dans notre exemple, on ajoute :

  • Un lien vers l'article Wikipédia sur le javascript (il suffit de cliquer sur le texte “code javascript” et on sera redirigé vers l’URL "https://fr.wikipedia.org/wiki/JavaScript" indiquée par le “href=”).

    Ça donne :  <a href="https://fr.wikipedia.org/wiki/JavaScript">code javascript</a>  

  • Un lien vers le code de l’animation en cliquant sur une image.
     <a class="button" title="Click me !" href="javascript:hello()"> <img alt="Hi!" src="click-me.png"/> 

Wow, ce n'est pas facile ! Prenez un peu de temps pour décortiquer ce dernier exemple. Ici, on a inséré un objet dans la page : c’est une image avec la balise <img> (à laquelle on a bien ajouté l’attribut "alt" pour avoir une description alternative au cas où l’image ne s'affiche pas ou si la page est produite en audio et pas en texte), mais on peut aussi insérer des vidéos, des animations, et bien d’autres choses encore ! 

Est-ce aussi simple que cela ?

Oui, en principe. Ensuite, selon les besoins, on dispose de toutes sortes d’attributs (par exemple : "spécifier la langue dans une page internationale", "faire afficher un titre"…), y compris pour interagir avec l’élément (par exemple : quand la souris passe dessus).

Mais qu’est-ce qu’un site bien fait ?

Regardons le haut d’une page HTML :

Jusqu’à présent, vous avez codé en html entre les balises <body> et </body>. Ici, nous allons nous intéresser à l’en-tête des pages web, c’est-à-dire tout ce qui est situé entre les balises <head> et </head>. Entre ces balises, vous voyez, entre autres, le nom de l'auteur, le titre du document, ainsi que la référence de la feuille CSS.

Indexer votre site web grâce à la partie <head>

Ce serait dommage de faire de belles pages Web si personne ne pouvait les trouver. On ne parle pas ici de présenter les choses joliment, de manière claire et facile d’accès. On vous fait confiance pour ça. Non, on parle ici de permettre de les présenter au mieux aux… moteurs de recherche et d’indexation.

À cette fin, il faut bien positionner les méta-données, comme dans l’exemple ci-dessus, c’est-à-dire :

  • Préciser comment sont encodés les caractères (comme les accents ou les symboles) et toujours essayer d’utiliser le standard UTF-8Ce point est vraiment important. Pour faire simple, les navigateurs, pour afficher les caractères correctement, doivent connaître comment ceux-ci ont été encodés (le caractère "e", par exemple, est représenté par la valeur décimale 101). Il existe des normes pour cela : ASCII, unicode, UTF-8. L’encodage UTF-8, spécifié par la balise  <meta charset="utf-8"/>, permet d’afficher un grand nombre de caractères ("charset" signifie "character set").

  • Veillez à donner un titre à la page, avec si possible des mots-clés, et à préciser l’auteur : cela va aider à classer et retrouver le contenu :
     <meta name="author" content="Thierry Vieville" /> <title>Distinguer le fond de la forme</title> 

Des pages Web avec du style

Il nous reste une petite chose à voir ensemble, la ligne  <link rel='stylesheet' type='text/css' href=’style.css'>, dont nous allons parler maintenant.
Vous vous souvenez que l’on a évoqué le fichier style.css plus haut ? Eh bien le revoici :

.description {
  width:100%;
  padding:10px;
  background-color: #f0f0f0;
}
.emphase {
  font-style: italic;
}
.code {
  display: block;
  font-family: monospace;
  white-space: pre;
  font-size: larger;
  color: grey;
  margin: 1em 0;
}
.button {
  display:block;
  margin: 5px auto;
  width: 10%
}

Ce fichier contient des directives de mise en page. D’ailleurs, il est souvent commun à tout un site pour garder une présentation homogène.

Très souvent, sur une plateforme comme Wordpress, on part d’un “thème” créé par un professionnel et on l’adapte à ce que l’on souhaite. C’est le cas dans les deux exemples suivants, où l’on voit un même site avec deux looks complètement différents (seul le fichier CSS varie) :

Néanmoins, si vous souhaitez apprendre à faire de bons fichiers CSS, c’est très simple en partant d’un fichier exemple puis en tâtonnant (c’est le moment où Thimble se révèle l’outil idéal pour expérimenter).

Rendre votre site accessible : une priorité

Ça ne viendrait à l’esprit de personne de se mettre à parler trop bas à quelqu’un qui entend mal ou de glisser des pièges sous les pas d’une personne malvoyante. On tend hélas ce genre de pièges sur nos pages Web.

L’important pour un site web est qu’il soit bien structuré avec des titres et des liens clairement identifiés. N’oubliez pas la commande "alt" pour permettre de connaître la description de l’image même sans la visualiser.

Pour vous rendre compte de la complexité ou non de votre site, vous pouvez par exemple utiliser le logiciel VoiceOver, l’activer sur le navigateur Safari (sur Mac) et vous déplacer sur votre site.

HTML est-il un langage de programmation ?

À propos… HTML est-il un langage de programmation ?

Pas tout à fait. C’est un langage de spécification. On ne donne pas explicitement des instructions à la machine pour afficher le texte, on décrit juste ce qu’on veut. Et un programme (qui se trouve dans le navigateur) va prendre cette page HTML comme une donnée en entrée et exécuter l’algorithme qui va en permettre l’affichage.

On peut dire que notre description de la page HTML est plus “abstraite” : elle permet de structurer sémantiquement et logiquement, et de mettre en forme le contenu des pages, d’inclure des ressources multimédia (image, son), des formulaires de saisie, et même du code informatique (souvent en JavaScript). Cela permet de créer des documents interopérables avec des équipements très variés, conformément aux exigences de l’accessibilité du web.

Racontez une page web… sans ordinateur

Vous connaissez déjà un peu mieux le HTML/CSS et ce qui se cache sous le web. Pour initier les enfants lors de vos ateliers, nous vous proposons un petit jeu de cartes à faire sans ordinateur.

À partir du jeu cHTeMeLe, conçu par Olivier Chambon et Pascal Mabille, nous avons créé nos propres cartes, que nous vous proposons d’utiliser comme suit. Vous pouvez bien entendu fabriquer les vôtres, ainsi que vos propres règles, à condition de les diffuser sous la licence CC-BY-NC.

Vous pouvez télécharger les cartes ici : Planche de cartes 1, Planche de cartes 2.

Une fois les cartes téléchargées, vous pouvez les imprimer en plusieurs exemplaires et les découper : en mettant ensuite les enfants par binôme, vous pouvez faire construire par l'un une page HTML, tandis que l'autre devra jouer le rôle de l'aperçu en temps réel, et donc dessiner le rendu de cette page...

Amusez-vous bien !

En résumé

  • Le fait d’avoir un fichier HTML pour écrire le contenu de la page, et un fichier CSS pour dire comment sera mis en page ce contenu permet de distinguer le fond de la forme.

  • HTML n’est pas un langage de programmation, mais de description.

Example of certificate of achievement
Example of certificate of achievement