http -> https

vive sed

HELP.md

@@ -5,12 +5,12 @@ layout: index
 # How to use/edit this site
 
 This is a
-[*static website*](http://en.wikipedia.org/wiki/Static_web_page)
-automatically generated with [Jekyll](http://jekyllrb.com/) by
-[GitHub Pages](http://pages.github.com/). The source code is
+[*static website*](https://en.wikipedia.org/wiki/Static_web_page)
+automatically generated with [Jekyll](https://jekyllrb.com/) by
+[GitHub Pages](https://pages.github.com/). The source code is
 [available on GitHub]({{ site.github.repository_url }}) and you are
 free to copy it, modify it and share it under the terms of the
-[Creative Commons 4.0 BY-SA license](http://creativecommons.org/licenses/by-sa/4.0/deed.en_GB).
+[Creative Commons 4.0 BY-SA license](https://creativecommons.org/licenses/by-sa/4.0/deed.en_GB).
 
 You are a student, a collaborator, or a casual visitor to this site
 and want to learn how to take advantage of the
@@ -28,18 +28,18 @@ on top.
 
 This will drop you in GitHub's file editing interface, where you can
 modify the source code, preview it, and
-[commit your changes](http://readwrite.com/2013/10/02/github-for-beginners-part-2)
+[commit your changes](https://readwrite.com/2013/10/02/github-for-beginners-part-2)
 by giving a short description of what you modified.
 
 Most of the pages are written in
-[Markdown](http://daringfireball.net/projects/markdown/), which is a
+[Markdown](https://daringfireball.net/projects/markdown/), which is a
 textual format for generating formatted text. Markdown syntax is very
 intuitive, you can get a quick review
 [here](https://help.github.com/articles/github-flavored-markdown/) or
-[here](http://kramdown.gettalong.org/syntax.html).
+[here](https://kramdown.gettalong.org/syntax.html).
 
 **CAVEATS:** The Markdown engine used by this site is
-[Kramdown](http://kramdown.gettalong.org/). Its syntax definitions are
+[Kramdown](https://kramdown.gettalong.org/). Its syntax definitions are
 slightly different form
 [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/),
 thus the preview feature in GitHub might not render source as in the
@@ -54,7 +54,7 @@ results are:
   [this one]({{ site.github.zip_url | replace: 'zipball', 'blob' }}/{{ page.path }}))
   use them to access site-wide configuration variables.
 - Use of special purpose markup, HTML, and scripts, such as
-  mathematical excerpts written in [MathJax](http://mathjax.org/).
+  mathematical excerpts written in [MathJax](https://mathjax.org/).
 
 
 ## Copying the site for your own use
@@ -63,15 +63,15 @@ You want to get a copy of the website and its source code to analyze
 it, or because you are afraid that I might take it down someday, this
 is very easily done, even if you're not (yet!) the technical type.
 
-All you need is a [GitHub account](http://github.com/). Once your
+All you need is a [GitHub account](https://github.com/). Once your
 account is setup,
 [forking the repository]({{site.github.repository_url}}/fork) will
 create your own copy in your GitHub account.
 
 Now you can make changes to your own copy of the site. Edit some
 files, commit the changes, and examine the result. The compiled static
 site will be served at
-**http://*username*.github.io/{{site.github.project_title}}** (replace
+**https://*username*.github.io/{{site.github.project_title}}** (replace
 *username* by your GitHub user name).
 
 **Note:** the website will not be compiled when you first fork the
@@ -110,7 +110,7 @@ preview are too limited for this, and handling git history via
 GitHub's web interface becomes too clumsy at this point. You need to
 work locally on your computer.
 
-All you need to work locally is a [Git client](http://git-scm.com/).
+All you need to work locally is a [Git client](https://git-scm.com/).
 [Clone the repository](https://help.github.com/articles/fork-a-repo/#step-2-create-a-local-clone-of-your-fork)
 and start coding right away.
 
@@ -138,7 +138,7 @@ jekyll serve -w -b''
 ~~~
 
 Your site will be generated in a `_site` sub-directory, and served
-live at <http://localhost:4000/>. Any changes to the sources will
+live at <https://localhost:4000/>. Any changes to the sources will
 trigger an automatic recompilation!
 
 Have fun coding!

assets/tut5-complement.md

@@ -12,8 +12,8 @@ layout: tutorial
 ### Les framework CSS
 
 Dans vos futurs projets Web, vous serez sûrement amenés à utiliser des framework
-CSS tels que [Foundation](http://foundation.zurb.com/) et
-[Bootstrap](http://getbootstrap.com/css/). Ces logiciels vous donneront accès à
+CSS tels que [Foundation](https://foundation.zurb.com/) et
+[Bootstrap](https://getbootstrap.com/css/). Ces logiciels vous donneront accès à
 un certain nombre éléments d'interface CSS clés en main pour pouvoir concevoir
 un site Web responsive (boutons, formulaires, menus, ...). 
 
@@ -22,7 +22,7 @@ L'un des éléments les plus importants des frameworks CSS est un systèmes de
 grille qui permet de créer facilement des mises en pages. L'arrivée du modèle
 FlexBox a considérablement simplifié le code CSS derrière le framework (par
 exemple, regardez le
-[Flex Grid de Foundation](http://foundation.zurb.com/sites/docs/flex-grid.html)).
+[Flex Grid de Foundation](https://foundation.zurb.com/sites/docs/flex-grid.html)).
 
 Notre but dans ce TD est de comprendre comment le modèle FlexBox permet de coder
 facilement le modèle de grille. **Attention :** Nous n'utiliserons pas ces

tutorials/tutorial1_1-en.md

@@ -80,7 +80,7 @@ annotate. A markup language annotates its content to give it structure.
 
 HTML is a standard, that is to say a language described completely (do not
 hesitate to throw a quick glance
-[to its specification](http://www.w3.org/TR/html5/), a highly technical document
+[to its specification](https://www.w3.org/TR/html5/), a highly technical document
 but very complete).
 
 <div class="exercise-en">
@@ -163,7 +163,7 @@ and therefore allow to add meaning to it. There are two types of tags:
 tag* `</mytag>`. For example, the tag `<title>` is used to say that the text
 inside will be the title of the document.
 
-2. [Some tags](http://www.w3.org/TR/html5/syntax.html#void-elements) **do not
+2. [Some tags](https://www.w3.org/TR/html5/syntax.html#void-elements) **do not
 accept any content**: they just consist of an opening tag.  For example, we
 have seen the tag `<meta>` and we will soon see `<img>`, `<br>` ...
 
@@ -392,7 +392,7 @@ Previously, we had seen another tag with an attribute: What was this tag?
 
 The attribute `src` must contain the location of the image. The attribute `alt`
 allows you to add an alternative text for browsers that cannot display images
-(e.g. textual browser <a href="http://lynx.browser.org/">Lynx</a>) or for the
+(e.g. textual browser <a href="https://lynx.browser.org/">Lynx</a>) or for the
 persons who can not see images clearly (blind or people with visual
 deficits). **Careful**, the `alt` attribute is mandatory.
 
@@ -433,13 +433,13 @@ A link is composed mainly of a target URL and a label (the clickable text often
 underlined in blue):
 
 ```html
-<a href="http://target_url">The label</a>
+<a href="https://target_url">The label</a>
 ```
 
 You can specify the complete URL of the target (absolute path), for example:
 
 ```html
-<a href="http://lynx.browser.org/">Lynx</a>
+<a href="https://lynx.browser.org/">Lynx</a>
 ```
 
 or give a relative address to the current page (relative path), for example:

tutorials/tutorial1_1.md

@@ -106,7 +106,7 @@ d’hypertexte), est donc un langage à balise contenant des liens, dits
 
 Le HTML est un standard, c'est-à-dire un langage complètement décrit (n'hésitez
 pas à jeter un rapide coup d'œil
-[à sa spécification](http://www.w3.org/TR/html5/), un document très technique
+[à sa spécification](https://www.w3.org/TR/html5/), un document très technique
 mais complet).
 
 <div class="exercise">
@@ -194,7 +194,7 @@ finissent par une *balise fermante* `</mabalise>`.
 Par exemple, la balise `<title>` sert à dire que le texte qu'elle englobe sera
 le titre du document.
 
-2. [Certaines balises](http://www.w3.org/TR/html5/syntax.html#void-elements)
+2. [Certaines balises](https://www.w3.org/TR/html5/syntax.html#void-elements)
 **n'acceptent pas de contenu** : elles consistent juste d'une balise
 ouvrante. On les appelle aussi balises auto-fermantes.
 Par exemple, nous avons vu la balise `<meta>` et nous verrons bientôt `<img>`,
@@ -438,7 +438,7 @@ Précédemment, on avait vu une autre balise avec un attribut : quelle était ce
 
 L'attribut `src` doit contenir l'adresse de l'image. L'attribut `alt` permet
 d'ajouter un texte alternatif pour les navigateurs ne pouvant les afficher
-(navigateur textuel <a href="http://lynx.browser.org/">Lynx</a>) ou pour les
+(navigateur textuel <a href="https://lynx.browser.org/">Lynx</a>) ou pour les
 personnes ne pouvant pas bien les distinguer (aveugles ou déficits visuels
 légers). **Attention**, l'attribut `alt` est obligatoire.
 
@@ -478,14 +478,14 @@ Un lien est composé principalement d'une URL cible et d'un libellé (le texte
 cliquable souvent souligné en bleu) :
 
 ```html
-<a href="http://urlcible">le libellé</a>
+<a href="https://urlcible">le libellé</a>
 ```
 
 On peut renseigner l'URL complète de la cible (URL en chemin absolu), par
 exemple :
 
 ```html
-<a href="http://lynx.browser.org/">Lynx</a>
+<a href="https://lynx.browser.org/">Lynx</a>
 ```
 
 ou donner une adresse relative à la page courante (URL en chemin relatif), par exemple :

tutorials/tutorial1_2-en.md

@@ -5,12 +5,12 @@ layout: tutorial
 ---
 
 The standards defining the CSS are published by the World Wide Web Consortium
-(<a Href="http://www.w3.org/"> </a> W3C) at the address
-[http://www.w3.org/Style/CSS/](http://www.w3.org/Style/CSS/).
+(<a Href="https://www.w3.org/"> </a> W3C) at the address
+[https://www.w3.org/Style/CSS/](https://www.w3.org/Style/CSS/).
 
 > Cascading Style Sheets (CSS) is a simple mechanism for adding style
 > (e.g. font, color, space) to a Web document.  
-> <cite><a href="http://www.w3.org/Style/CSS/"> W3C </a></cite>
+> <cite><a href="https://www.w3.org/Style/CSS/"> W3C </a></cite>
 
 The CSS is responsible for rendering the site on your screen,
 but also on smartphone and paper printouts (CSS rules sets can be specified for
@@ -133,7 +133,7 @@ well-distributed colors as shown in the following diagram:
 </div>
 
 CSS3 has added 147 keywords of colors that you can find at the address
-[http://www.w3.org/TR/css3-color/#svg-color](http://www.w3.org/TR/css3-color/#svg-color).
+[https://www.w3.org/TR/css3-color/#svg-color](https://www.w3.org/TR/css3-color/#svg-color).
 
 You can be more specific and access to the 16 million colors that a screen can
 display by the hexadecimal values `R`,` G` and `B` of respectively the Red,
@@ -146,7 +146,7 @@ Green and Blue components of the color. This is written with the format
  * `#FF00FF` is pink, which can also be accessed with the keyword` pink`.
 
 **Note** You can use the website
-  [http://www.colorpicker.com/](http://www.colorpicker.com/) to easily find the
+  [https://www.colorpicker.com/](https://www.colorpicker.com/) to easily find the
   `# RRVVBB` code of any color.
 
 ### Dimensions
@@ -179,7 +179,7 @@ decrease by half the width compared to that which would have been calculated
 normally.
 
 **Reference:** For details on available units
-[http://www.w3.org/TR/css3-values/#absolute-lengths](http://www.w3.org/TR/css3-values/#absolute-lengths)
+[https://www.w3.org/TR/css3-values/#absolute-lengths](https://www.w3.org/TR/css3-values/#absolute-lengths)
 
 ### Fonts
 
@@ -215,7 +215,7 @@ We will list here the most used properties on fonts:
 **Important:** The last two fonts specified by the rule are fallback fonts: they
 will be used if and only if the previous are not available on the browser. A few
 classic fonts are listed on
-[http://www.w3schools.com/cssref/css_websafe_fonts.asp](http://www.w3schools.com/cssref/css_websafe_fonts.asp).
+[https://www.w3schools.com/cssref/css_websafe_fonts.asp](https://www.w3schools.com/cssref/css_websafe_fonts.asp).
 
 
 **Import new fonts:** You can import new fonts in your web page by using the
@@ -231,12 +231,12 @@ classic fonts are listed on
 If you want to learn more, go to
 [https://developer.mozilla.org/fr/docs/Web/CSS/@font-face](https://developer.mozilla.org/fr/docs/Web/CSS/@font-face).
 Here are two practical websites to download new fonts:
-[http://www.1001fonts.com](http://www.1001fonts.com) and
-[http://www.fontsquirrel.com](http://www.fontsquirrel.com).
+[https://www.1001fonts.com](https://www.1001fonts.com) and
+[https://www.fontsquirrel.com](https://www.fontsquirrel.com).
 
 **Reference:**
-  [http://www.w3.org/TR/CSS21/fonts.html](http://www.w3.org/TR/CSS21/fonts.html)
-  and [http://www.w3.org/TR/css-fonts-3/](http://www.w3.org/TR/css-fonts-3/).
+  [https://www.w3.org/TR/CSS21/fonts.html](https://www.w3.org/TR/CSS21/fonts.html)
+  and [https://www.w3.org/TR/css-fonts-3/](https://www.w3.org/TR/css-fonts-3/).
 
 ### Texts
 
@@ -289,7 +289,7 @@ change this and give `<body>` the color choosen by our web-designer: `#838892`.
 6. Each paragraph should be indented `5px`.
 
 3. Go get a font of your choice on
-   [http://www.fontsquirrel.com](http://www.fontsquirrel.com). Link it to your
+   [https://www.fontsquirrel.com](https://www.fontsquirrel.com). Link it to your
    document with `@font-face`. Apply it to the section titles `<h2>` and do not forget to give fallback fonts.
 
    **Warning:** If you use spaces in the name of your font, you will have to

tutorials/tutorial1_2.md

@@ -5,12 +5,12 @@ layout: tutorial
 ---
 
 Les standards définissant le CSS sont publiés par le World Wide Web Consortium
-(<a href="http://www.w3.org/">W3C</a>) à l'adresse
-[http://www.w3.org/Style/CSS/](http://www.w3.org/Style/CSS/).
+(<a href="https://www.w3.org/">W3C</a>) à l'adresse
+[https://www.w3.org/Style/CSS/](https://www.w3.org/Style/CSS/).
 
 > Cascading Style Sheets (CSS) est un mécanisme simple pour ajouter du style
 > (exemple fonte, couleurs, espace) à un document web.  
-> <cite><a href="http://www.w3.org/Style/CSS/">W3C</a></cite>
+> <cite><a href="https://www.w3.org/Style/CSS/">W3C</a></cite>
 
 Le CSS est responsable du rendu du site sur votre écran, mais aussi sur
 smartphone et des impressions papier (des ensembles de règles CSS peuvent être
@@ -148,7 +148,7 @@ suivant :
 
 Le CSS3 les a complétés par 147 mots-clés de couleurs que vous pouvez retrouver
 à l'adresse
-[http://www.w3.org/TR/css3-color/#svg-color](http://www.w3.org/TR/css3-color/#svg-color).
+[https://www.w3.org/TR/css3-color/#svg-color](https://www.w3.org/TR/css3-color/#svg-color).
 
 Vous pouvez être plus précis et accéder aux 16 millions de couleurs que peut
 afficher un écran en donnant les valeurs `R`, `V` et `B` en hexadécimal des
@@ -161,7 +161,7 @@ avec le format `#RRVVBB` (ou `#RVB` qui est un raccourci). Par exemple :
  * `#FF00FF` est rose, que l'on peut aussi accéder avec le mot clé `pink`.
 
 **Remarque :** Vous pouvez utiliser le site Web
-  [http://www.colorpicker.com/](http://www.colorpicker.com/) pour trouver
+  [https://www.colorpicker.com/](https://www.colorpicker.com/) pour trouver
   facilement le code `#RRVVBB` de n'importe quelle couleur.
 
 ### Dimensions
@@ -194,7 +194,7 @@ diminuer de moitié la largeur par rapport à celle qui aurait été calculée
 normalement.
 
 **Référence :** Pour plus de détails sur les unités disponibles
-[http://www.w3.org/TR/css3-values/#absolute-lengths](http://www.w3.org/TR/css3-values/#absolute-lengths)
+[https://www.w3.org/TR/css3-values/#absolute-lengths](https://www.w3.org/TR/css3-values/#absolute-lengths)
 <!-- les autres unitées sont in cm mm pt pc => font de plus de sens pour
 d'autres médias-->
 
@@ -250,7 +250,7 @@ Nous allons lister ici les propriétés les plus utilisées sur les fontes :
 fontes de secours (fallback) : elles seront utilisées si et seulement si les
 précédentes ne sont pas disponibles sur le navigateur. Quelques fontes
 classiques sont répertoriées sur
-[http://www.w3schools.com/cssref/css_websafe_fonts.asp](http://www.w3schools.com/cssref/css_websafe_fonts.asp).
+[https://www.w3schools.com/cssref/css_websafe_fonts.asp](https://www.w3schools.com/cssref/css_websafe_fonts.asp).
 
 
 **Importer de nouvelles fontes :** Vous pouvez associer à votre page Web de
@@ -271,12 +271,12 @@ Attention aux extensions non reconnues par Firefox (comme .eot)
 Si vous souhaitez en savoir plus, allez sur
 [https://developer.mozilla.org/fr/docs/Web/CSS/@font-face](https://developer.mozilla.org/fr/docs/Web/CSS/@font-face). Voici
 deux sites pratiques pour télécharger de nouvelles fontes : 
-[http://www.1001fonts.com](http://www.1001fonts.com) et 
-[http://www.fontsquirrel.com](http://www.fontsquirrel.com).
+[https://www.1001fonts.com](https://www.1001fonts.com) et 
+[https://www.fontsquirrel.com](https://www.fontsquirrel.com).
 
 **Référence :**
-  [http://www.w3.org/TR/CSS21/fonts.html](http://www.w3.org/TR/CSS21/fonts.html)
-  et [http://www.w3.org/TR/css-fonts-3/](http://www.w3.org/TR/css-fonts-3/).
+  [https://www.w3.org/TR/CSS21/fonts.html](https://www.w3.org/TR/CSS21/fonts.html)
+  et [https://www.w3.org/TR/css-fonts-3/](https://www.w3.org/TR/css-fonts-3/).
 
 ### Textes
 
@@ -331,7 +331,7 @@ traiter grossièrement le problème, limitez la largeur de l'élément `<body>`
 6. Chaque paragraphe doit être indenté de `5px`.
 
 3. Allez chercher une fonte de votre choix sur
-   [http://www.fontsquirrel.com](http://www.fontsquirrel.com). Liez-là à votre
+   [https://www.fontsquirrel.com](https://www.fontsquirrel.com). Liez-là à votre
    document avec la règle `@font-face`. Appliquez-la aux titres de section
    `<h2>` en n'oubliant pas de mettre des fontes en *fallback* (fonte de
    recours).  

tutorials/tutorial2-en.md

@@ -172,7 +172,7 @@ style applies.
 Starting from the basic selectors (of tag, class and id) presented
 [in the previous tutorial]({{site.baseurl}}/tutorials/tutorial1_2-en.html#the-basics-of-css-selectors),
 it is possible to create
-[complex selectors](http://www.w3.org/TR/css3-selectors/#combinators). For
+[complex selectors](https://www.w3.org/TR/css3-selectors/#combinators). For
 example, we will see how to select the `<div>` tags with class `toto` and who
 are sons of an element of identifier `titi`.
 
@@ -253,7 +253,7 @@ instruction. The right part of the page is there to help you. The tags in the
 game (`<plate>`, `<bento>`, ...) are not HTML5 tags but the principle of
 selectors remains the same.
 
-**Go on** [http://flukeout.github.io/](http://flukeout.github.io/) and pass
+**Go on** [https://flukeout.github.io/](https://flukeout.github.io/) and pass
 the levels 1 to 11 and the level 14.
 
 **Notes:**

tutorials/tutorial2.md

@@ -193,7 +193,7 @@ s’applique le style.
 présentés
 [dans le TD précédent]({{site.baseurl}}/tutorials/tutorial1_2.html#les-sélecteurs-css-de-base),
 il est possible de créer des
-[sélecteurs complexes](http://www.w3.org/TR/css3-selectors/#combinators).  Par
+[sélecteurs complexes](https://www.w3.org/TR/css3-selectors/#combinators).  Par
 exemple, nous allons voir comment sélectionner les `<div>` ayant la classe
 `toto` et qui sont fils d'un élément d'identifiant `titi`.
 
@@ -277,7 +277,7 @@ donnée. Les balises de ce jeu (`<plate>`, `<bento>`, ...) ne sont pas des
 balises HTML5 mais le principe des sélecteurs reste le même. La partie de droite
 de la page est là pour vous aider.
 
-**Allez sur** [http://flukeout.github.io/](http://flukeout.github.io/) et faites
+**Allez sur** [https://flukeout.github.io/](https://flukeout.github.io/) et faites
 les niveaux de 1 à 11 et le niveau 14.
 
 **Notes :**

tutorials/tutorial3.md

@@ -415,7 +415,7 @@ la fenêtre pour voir comment l'affichage s'adapte.
 **Note (optionnelle)** -- Règle d'inclusion des éléments `inline` et `block` du
 point de vue du HTML et du CSS :
 
-  [^somesamplefootnote]: En fait le HTML5 permet cette inclusion dans [certains cas](http://html5doctor.com/block-level-links-in-html-5/).
+  [^somesamplefootnote]: En fait le HTML5 permet cette inclusion dans [certains cas](https://html5doctor.com/block-level-links-in-html-5/).
 
 >   Inclure des éléments `block` dans des éléments `inline` n'est pas conforme
 >   en HTML[^somesamplefootnote], mais cela l'est du point de vue du CSS.  En