W11 - Conception de documents et d’interfaces numériques

Adrien Krähenbühl IUT Robert Schuman

Déroulement du module

Présentations

Équipe pédagogique

Adrien Krähenbühl
CMx + Groupe de TDs 12 + TP 5
Kévin-Michael Faulhaber
Groupe de TDs 56 + TPs 6
Baptiste Lafabrègue
Groupe TDs/TPs 34
Cyril Meyer
Groupe de TDs/TPs 78

Séances

<script>
    var CM  = 3;
    var TDs = 3;
    var TPs = 11;
    var nbHeures = (CM + TDs + TPs) * 2;

    console.log("Nb. heures = " + nbHeures);
</script>

Détail des séances

1. HTML
  • Le contenu
  • 1 CM + 1 TD + 1 TP
2. CSS
  • La mise en forme
  • 1 CM + 1 TD + 5 TPs
3. Javascript
  • L’interaction dynamique
  • 1 CM + 1 TD + 5 TPs


Note : Le contenu est construit sur la base du PPN 2013 (page 19).

Évaluation du module

Trois notes

2 notes de suivi
QCMs aux TPs suivant les CM 2 et 3.
1 note finale
Examen sous forme de TP noté en Janvier.

Calcul de votre moyenne

<script>
    /* note1   QCM au 1er TP après le CM n°2
     * note2   QCM au 1er TP après le CM n°3
     * noteTP  Examen sur ordinateur en Janvier */
    function noteFinale( note1, note2, noteTP )
    {
        return (note1 + note2) / 2 * .4 + noteTP * .6;
    }
</script>

HTML, les concepts

HTML, qu’est-ce que c’est ?

L’HyperText Markup Language est un langage à balise qui permet de décrire une page web.

Ça ressemble à ça :

<h2>HTML, qu'est-ce que c'est ?</h2>
<p>
    L'HyperText Markup Language est un langage à balise qui permet
    de décrire une page web.
</p>
<p>Ça ressemble à ça :</p>
<pre class="html">
    <code>
        <!-- Ce bloc de code -->
    </code>
</pre>
<p>
    Ceci est le code HTML de cette page #récursivité #inception
    <img src="img/inception.gif" alt="Gif inception">
</p>

Ceci le code HTML de cette slide
#récursivité #inception


HTML 5 et documentation

Tout ce module est basé sur la version 5 de HTML. La plus récente est la 5.2, sortie fin 2017.

La documentation

  • La doc la plus fiable est sur developer.mozilla.org ou W3Schools
  • N’hésitez pas à regarder les tutoriels d’Alsacréation.
  • Attention : Les morceaux de code/tutos/aides sur internet ne sont pas toujours conformes à la norme HTML 5.

Concept essentiel n°1 : la balise

Balise
  • Une balise (markup en anglais) est constituée d’un nom délimité par des chevrons < et >.
  • Son nom indique le type d’information qu’elle sert à stocker.

Concept essentiel n°2 : l’élément

Un élément HTML peut être :

  1. Un couple de balises ouvrantes-fermantes englobant un contenu.
<html>
<!-- Contenu -->
</html>
<code>
<!-- Contenu -->
</code>
<section>
<!-- Contenu -->
</section>
<footer>
<!-- Contenu -->
</footer>
  1. Une unique balise auto-fermante, sans contenu.
<br>
<link>
<img>
<input>
<meta>


La confusion entre balise et élément est très courante :
ni ce cours ni vos profs n’y feront exception.

Concept essentiel n°3 : l’imbrication

Les éléments HTML peuvent se combiner les uns avec les autres.
Ils peuvent :

  • se succéder : on parle d’éléments voisins
<h1>Titre de niveau 1</h1>
<p>Contenu du premier paragraphe</p>
<p>Contenu du second paragraphe</p>
  • s’imbriquer : on parle d’élément père et d’élément fils.
<article>
    <h2>Ce titre de niveau 2 est un fils de l'élément article</h2>
    <p>
        Contenu du paragraphe fils de l'élément article
        et voisin de l'élément h1.
    </p>
</article>

Concept essentiel n°4 : les attributs

Attribut
  • Un attribut est une association nom="valeur"
  • C’est une information supplémentaire à propos d’un élément, que l’on place à l’intérieur de sa balise ouvrante.
  • Un élément peut avoir un nombre quelconque d’attributs.


<code class="java">
<!-- Contenu -->
</code>

<img src="w11.png" alt="Image de W11">

L’élément code a un attribut class qui vaut center.

L’élément img a un attribut src qui vaut w11.png et un attribut alt qui a pour valeur Image de W11.

Les balises structurelles

Structure HTML minimale

<!doctype html>
<html lang="fr">
    <head>
        <!-- Informations complémentaires pour le navigateur -->
        <title>Titre de la page</title>
    </head>
    <body>
        <!-- Contenu de la page affiché par le navigateur -->
    </body>
</html>
  1. Le doctype pour indiquer qu’on est en HTML5.
  2. L’élement racine <html> contenant :
    1. un attribut lang dans laquelle est écrit le contenu
    2. un élément <head> contenant au minimum un <title>
    3. un élément <body> pour le corps de la page (contenu visible)

L’entête de la page

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="javascript.js"></script>
    <title>Balises d'entête</title>
</head>
<meta>
Spécifie une métadonnée, par exemple l’encodage des caractères.
<link>
Spécifie un fichier CSS à télécharger.
<script>
Spécifie un fichier JS à télécharger ou contient directement du code.
<title>
Le titre de la page. Il sera affiché dans l’onglet du navigateur.

Structure du corps

<body>
    <header>
        <!-- L'entête de la page avec titre, logo, etc. -->
        <nav> <!-- Le menu --> </nav>
    </header>
    <main>   <!-- Le contenu principal de la page --> </main>
    <footer>        <!-- Le pied de page -->          </footer>
</body>
<header>
Entête du corps de la page, contenant titre, logo, etc.
<nav>
Destiné à contenir des éléments de navigation (menus, fils d’Ariane).
<main>
Contenu principal de l’élément <body>.
<footer>
Pied de page du document ou d’un élément de structure.

Sections et articles

<main>
    <section>...</section>
    <article>...</article>
    <aside>...</aside>
</main>

\(\rightarrow\)

<section>
    <header>...</header>
      <!-- Contenu -->
    <footer>...</footer>
</section>

\(\rightarrow\)

<article>
    <header>...</header>
      <!-- Contenu -->
    <footer>...</footer>
</article>
<section>
Regroupe des élément d’une même thématique.
<article>
Élément autonome, commençant généralement avec un titre.
<aside>
En rapport avec le contenu principal, mais non essentiel.
<header> et <footer>
Entête et pied d’une section ou d’un article.

Exemple visuel

Exemple HTML

<!doctype html>
<html lang="fr">
    <head>
        <title>Introduction au HTML</title>
    </head>
    <body>
        <header> ... </header>
        <main>
            <header>
                <h1>Introduction au HTML</h1>
                ...
            </header>
            <section>
                <p>...<p>
                <article>
                    <header> ... </header>
                    <p> ... </p>
                    <blockquote> ... </blockquote>
                </article>
            </section>
            <aside> ... </aside>
        </main>
    </body>
</html>

Autres balises

Les titres

<h1>Titre niveau 1</h1>
<h2>Titre niveau 2</h2>
<h3>Titre niveau 3</h3>
<h4>Titre niveau 4</h4>
<h5>Titre niveau 5</h5>
<h6>Titre niveau 6</h6>

Titre niveau 1

Titre niveau 2

Titre niveau 3

Titre niveau 4

Titre niveau 5
Titre niveau 6
Code HTML
Code interprété par Firefox


Les niveaux de titre en HTML vont :

  • de 1, le plus grand
  • à 6 le plus petit.

Balises textuelles

<p>
    Bonjour,<br>
    Bienvenue à l'IUT Robert Schuman.
    <hr>
</p>

Bonjour,
Bienvenue à l’IUT Robert Schuman.


Code HTML
Code interprété par Firefox
<p>
(Paragraph) Élément de base pour insérer du texte.
<br>
(Break) Retour à la ligne dans un paragraphe.
<hr>
(Horizontal Rule) Règle horizontale.

Les liens

<p>
    Bonjour,<br>
    Bienvenue à
    <a href="http://iutrs.unistra.fr/">
        l'IUT Robert Schuman.
    </a>
</p>

Bonjour,
Bienvenue à l’IUT Robert Schuman.

Code HTML
Code interprété par Firefox
<a>
(Anchor) Lien vers une resource du web. Il peut être :
  • absolu, avec une URL de la forme http://...
  • relatif, vers une page du même site (e.g. ../autrepage.html)
  • interne, vers une autre partie de la page (e.g. #partie). Nécessite un élément sur la même page avec un attribut id="partie".

Les listes

<ul>
    <li>W11</li>
    <li>P11</li>
    <li>M11</li>
</ul>
  • W11
  • P11
  • M11
<ol>
    <li>W11</li>
    <li>P11</li>
    <li>M11</li>
</ol>
  1. W11
  2. P11
  3. M11
<ul>
(Unordered List) Liste non ordonnée interprétée comme une liste à puces. Contient au moins un élément <li>.
<ol>
(Ordered List) Liste ordonnée. Contient au moins un <li>.
<li>
(List Item) Élément d’une liste.

Les tableaux : structure

<table>
    <thead> ... </thead>
    <tbody> ... </tbody>
    <tfoot> ... </tfoot>
</table>
<table>
Élément racine d’un tableau.
<thead>
Entête des colonnes d’un tableau
<tbody>
Ensemble des lignes de données d’un tableau.
<tfoot>
Pied d’un tableau regroupant les résultats d’un tableau.

Les tableaux : contenu

<table>
    <thead>
        <tr><th>Modules</th></tr>
    </thead>
    <tbody>
        <tr><td>W11</td></tr>
        <tr><td>P11</td></tr>
    </tbody>
</table>
Modules
W11
P11
<tr>
(Table Row) Ligne d’un tableau.
<td>
(Table Data) Cellule d’un tableau, petit-enfant d’un <tbody>.
<th>
(Table Heading) Cellule d’entête d’un tableau, petit-enfant d’un <thead>.

Les formulaires : input et label

<form action="page.php">
    <label for="nom">Nom</label>
    <input  id="nom" type="text">
        <br>
    <label for="iut">IUT Robert Schuman</label>
    <input  id="iut" type="checkbox" id="IUTRS">
        <br>
    <label for="date">Date</label>
    <input  id="date" type="date" value="01-10-2018">
        <br>
    <input type="button" value="Valider">
</form>



<form>
Élément racine d’un formulaire.
<input>
Élément du formulaire modifiable par l’utilisateur.
<label>
Nom associé à un <input>. Son attribut for doit être identique à l’attribut id de l’<input> auquel il est attaché.

Les formulaires : options

<form action="page.php">
    <label for="module">Mon module préféré :</label>
    <select id="module">
        <option value="W11">W11</option>
        <option value="P11">P11</option>
        <option value="S11">S11</option>
        <option value="D11">D11</option>
    </select>
    <input type="button" value="Valider">
</form>


<select>
Élément regroupant les options du menu déroulant.
<option>
Élément d’un menu déroulant.

Les formulaires : fieldset et textarea

<form>
    <fieldset>
        <legend>
            Que pensez-vous de W11 ?
        </legend>
        <textarea>
            Je pense que W11...
        </textarea>
        <input type="button" value="Valider">
    </fieldset>
</form>
Que pensez-vous de W11 ?
<fieldset>
Permet de regrouper plusieurs éléments d’un formulaire.
<legend>
Nom décrivant le sujet commun des éléments regroupés.
<textarea>
Texte long avec fenêtre redimensionnable.

Les images

<figure>
    <img src="img/logo_all.svg" alt="Logo HTML">
    <figcaption>
        Source : Github.
    </figcaption>
</figure>
Logo HTML
Source : Github.
<figure>
Élément racine pour les figures.
<img>
Image à afficher sur la figure.
<figcaption>
Légende de la figure.

Les sons et vidéos

<audio controls>
    <source src="img/mozart.ogx" type="audio/ogg">
    L'élément audio n'est pas supporté par votre navigateur.
</audio>
<video width="320" height="240" controls>
    <source src="img/big_buck_bunny.ogv" type="video/ogv">
    <source src="img/big_buck_bunny.mp4" type="video/mp4">
    L'élément video n'est pas supporté par votre navigateur.
</video>
<audio>
Élément racine pour une bande son.
<video>
Élément racine pour une vidéo.
<source>
Cible le média à jouer. S’il y a plusieurs <source>, le navigateur tente de lire le premier puis le second, etc.

Validité d’un document HTML

  • Les navigateurs web sont très permissifs : même avec une page HTML contenant des erreurs de syntaxe, un affichage sera proposé… et souvent celui espéré par le concepteur !
  • Le W3C propose un outil en ligne pour vérifier : https://validator.w3.org/
  • Vous pouvez utiliser cet outil en ligne ou télécharger le .jar pour l’exécuter localement.

HTTP, comment ça marche ?

L’HyperText Transfer Protocol est un protocole permettant de transmettre du contenu HTML sur internet.

Les URL

URL
(Uniform Resource Locator) système de nommage universel d’une resource sur le web.

Une URL est constituée du nom du protocole à utiliser, et du chemin pour atteindre la resource.
Exemples :

  • http://monsite.fr/mapage.html
  • ftp://autresite.it/mapage.html

On peut également demander au navigateur d’interpréter un fichier HTML stocké en local sur son ordinateur avec une URL de la forme :

  • file:///home/monnom/mapage.html