Conception d'Interface Web

HTML

Simon BERNARD

Présentation de HTML

Structuration/organisation du contenu (texte, images, vidéos) : HTML
Présentation (visuelle) du contenu : CSS
Rendre ce contenu interactif : JavaScript

Présentation de HTML

HyperText Markup Language
Ce n’est pas un langage de programmation
Il sert à structurer un contenu web
Le contenu structuré en HTML est visualisé avec un navigateur web (la plupart du temps)

(source: https://internetingishard.netlify.app/, comme plusieurs autres dans la suite de ce support)

Les navigateurs intègrent des outils de développement

Code source HTML

Le code source HTML comprend :

du contenu textuel (sans mise en forme)
des balises de structuration : balises par paires


<title>Ceci est un titre</title>

des balises pour insérer un contenu (ici une image) : balises auto-fermantes


<img src="logo-urn.png">

des options de balises : attributs de balises


<meta charset="utf-8">
<a href="http://www.univ-rouen.fr">Lien</a>

Anatomie d'une page HTML


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ma première page HTML</title>
    </head>
    <body>
        <!-- Contenu de la page -->
        <h1>Ma premiere page HTML5</h1>
        <section>
            <h2> Un premier paragraphe </h2>
            Une page web HTML5 tres simple
        </section>
        <img src="../img/logo_mastersd.png">
    </body>
</html>

Doctype : indique le type de balisage, i.e. la syntaxe et la version utilisée (simplifié depuis la version 5)

Anatomie d'une page HTML


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ma première page HTML</title>
    </head>
    <body>
        <!-- Contenu de la page -->
        <h1>Ma premiere page HTML5</h1>
        <section>
            <h2> Un premier paragraphe </h2>
            Une page web HTML5 tres simple
        </section>
        <img src="../img/logo_mastersd.png">
    </body>
</html>

<html></html> : élément racine, avec quelques attributs utiles, e.g. lang qui spécifie la langue par défaut (utile pour le navigateur mais facultatif)

Anatomie d'une page HTML


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ma première page HTML</title>
    </head>
    <body>
        <!-- Contenu de la page -->
        <h1>Ma premiere page HTML5</h1>
        <section>
            <h2> Un premier paragraphe </h2>
            Une page web HTML5 tres simple
        </section>
        <img src="../img/logo_mastersd.png">
    </body>
</html>

<head></head> : entête de page contenant les méta-données de la page, par exemple :

<title></title>: définit un titre de page
<meta charset="utf-8">: définit l'encodage des caractères

Anatomie d'une page HTML


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ma première page HTML</title>
    </head>
    <body>
        <!-- Contenu de la page -->
        <h1>Ma premiere page HTML5</h1>
        <section>
            <h2> Un premier paragraphe </h2>
            Une page web HTML5 tres simple
        </section>
        <img src="../img/logo_mastersd.png">
    </body>
</html>

<body></body> : corps de la page. Ce qui est inclut dans cette balise est ce qui se sera affiché dans le navigateur. Par exemple ici :

<hX></hX>: définit un titre, avec $X \in \{1,2,\dots,6\}$
<section></section>: définit une section de contenu

Éléments HTML

Élément HTML

Un élément HTML est l'entité du document comportant soit une paire de balises et son contenu, soit une balise auto-fermante

Arbre des éléments HTML

Les éléments HTML peuvent être imbriqués les uns dans les autres


<!DOCTYPE html>
<html lang="fr">
    <head>
        ...
    </head>
    <body>
        <section>
            <h3> Un premier paragraphe </h3>
            Une page web HTML5 tres simple
        </section>
    </body>
</html>

ici, le contenu de l’élément section comprend un élément h3
la balise fermante de h3 doit apparaître avant la balise fermante de section
certaines imbrications ne sont pas autorisées selon la nature des éléments concernés

Arbre des éléments HTML

Dans cet exemple :

div est le parent de p
p est parent de em et img
em et img sont les enfants de p
em est frère de img
div est un ancêtre de em
em est un descendant de div

Arbre des éléments HTML

Les outils de développement des navigateurs permettent de visualiser cet arbre

Notion de flux normal

Flux normal

Chaque élément a un rendu visuel par défaut, défini par le navigateur mais respectant des conventions
Dans la page, il prend la forme d'une boîte :

Insérée dans un flux d’affichage dit ”normal”, avant, après ou à l’intérieur des boites des autres éléments

Flux normal

Flux vertical, adaptatif, ordonné et avec des superpositions
Adaptatif: position et rendu du contenu s’adapte à la largeur de la fenêtre
Ordonnée: l’ordre d’affichage est fonction de l’ordre d’apparition dans le code HTML
Avec des superpositions: des éléments imbriqués peuvent se superposer

Éléments blocs et en ligne

Élément bloc (block)

occupe toute la largeur de l’écran (ou de son conteneur)
retours à la ligne avant et après
peut contenir des éléments bloc ou en ligne

Élément en ligne (inline)

occupe uniquement la largeur nécessaire pour le contenu
pas de retours à la ligne, ni avant ni après
ne peut contenir que des éléments en ligne

Éléments blocs et en ligne

Exemple d'éléments blocs

Titres


<h1> Titre de niveau 1 </h1>
<h2> Titre de niveau 2 </h2>
...
<h6> Jusqu'à 6 niveaux </h6>

Paragraphes


<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Listes


<ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
</ul>

Éléments blocs et en ligne

Exemple d'éléments en ligne

Texte mis en emphase, important ou marqué


<em>Texte en emphase</em>
<strong>Texte important</strong>
<mark>Texte marqué</mark>

Images


<img src="image.jpg" alt="Description de l'image">

Hyperliens


<a href="https://www.example.com">Texte du lien</a>

Éléments blocs et en ligne

Il existe deux balises neutres :

<div> : élément bloc générique
<span> : élément en ligne générique
Ces deux balises, n’ont pas d’aspect spécifique
Elles servent à modifier le flux normal d’une page et/ou appliquer des styles CSS particuliers.
Par exemple, les <div> ont beaucoup été utilisées pour agencer les pages


<body>
    <div id="conteneur">
        <div id="entete">...</div>
        <div id="menu">...</div>
        <div id="page">...</div>
        <div id="colonne">...</div>
        <div id="pied">...</div>
    </div>
</body>

Éléments blocs et en ligne


<body>
    <div id="conteneur">
        <div id="entete">...</div>
        <div id="menu">...</div>
        <div id="page">...</div>
        <div id="colonne">...</div>
        <div id="pied">...</div>
    </div>
</body>

Balises sémantiques

Balise sémantique

Les balises sémantiques sont des éléments HTML qui ont une signification spécifique et qui décrivent le contenu qu'ils contiennent

Exemple: pour le plan d'une page:

Une page HTML a un plan, déterminé en grande partie par les <h1>...<h6>
Ces titres donnent un sens au contenu via cette hiérarchie en parties/sous-parties
Les moteurs de recherche (entre autres) se basent sur ce plan pour déterminer les contenus importants

(cf. site HTML5 Outliner)

Balise sémantique

HTML5 introduit de balises sémantiques qui permettent de mieux structurer le contenu d'une page web

Décomposition de la page en plusieurs parties indépendantes
Remplacent (partiellement) l’usage généralisé des <div>
Ces balises sont très importantes pour le référencement : permettent aux moteurs de recherche, lecteurs d’écran, frameworks, d’identifier les différentes parties d’une page et de les manipuler indépendamment du reste

Balise sémantique

Exemples

<header> : définit l'en-tête de page ou section
<nav> : définit une section de navigation
<main> : définit le contenu principal d'une page
<article> : définit un article indépendant
<section> : définit une section thématique
<footer> : définit le pied de page
<aside> : définit une section latérale
<figure> : définit une figure

Balise sémantique

Balise `<article>`

L'élément <article> définit un contenu indépendant du reste du document, destinée à être distribué ou réutilisé de manière indépendamment


<article>
    <h1>Article Interessant</h1>
    <h6>Par John Smith, le 37-15-2247</h6>
    <p>
        Cet article est vraiment tres
        interessant et il peut etre
        facilement référencé.
        Il peut également être extrait du site 
        et existé indépendamment du reste du contenu
    </p>
</article>

Balise sémantique

Balise `<section>`

L'élément <section> définit une section thématique dans un document. Il peut contenir des titres, des paragraphes et d'autres éléments, et est souvent utilisé pour regrouper des contenus connexes.


<section>
  <h2>Première section</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
...
</section>
<section>
  <h2>Deuxième section</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

Balise sémantique

Balise `<aside>`

L'élément <aside> représente une partie d'un document dont le contenu n'est qu'indirectement lié au contenu principal du document. Il est souvent présenté sous forme de barre latérale ou d'encadré.


<article>
    <header>
        <h1>Article Interessant</h1>
        <h6>Par John Smith, le 37-15-2247</h6>
    </header>
    <aside>
        <img src="illu.png"/>
    </aside>
...

Balise sémantique

Balises `<time>` et `<address>`

<time> : pour indiquer les dates, heures, etc. Permet de faciliter le parsing car ce sont en général des éléments difficiles à identifier dans un contenu

<address> : pas nécessairement adresse postale, mais plutôt des informations de contact en fin d’article ou de page, sur un auteur ou une organisation.

Liens et images

Les liens et les images sont des éléments particuliers car ils concernent des ressources externes à la page HTML

Un lien (ou hyperlien) renvoie l’utilisateur vers une page différente
Les images sont des ressources externes, inclues dans la page au moment de la visualisation dans un navigateur

Balise `<a>`

Le texte contenu dans l’élément <a> devient automatiquement ”cliquable” (pris en charge par le navigateur)
href doit se voir affecter l’URL de la page vers laquelle le lien renvoie
Il existe 4 sortes d'URL:

# qui rend le lien actif mais inopérant
les liens relatifs à la page dans laquelle est inclue l’élément a
les liens relatifs à la racine du site
les liens absolus (une URL complète comme vu au chapitre précédent)

Exemples


<body>
    <header>
        <h1>Master Science et Ingénierie des Données</h1>
        <h2>Conception d'Interfaces Web</h2>
        <nav>
            <ul>
                <li><a href="first_page.html">Première page</a></li>
                <li><a href="second_page.html">Deuxème page</a></li>
                ...
            </ul>
        </nav>
    </header>
    <hr>
    <a href="http://www.univ-rouen.fr">L'Universite de Rouen Normandie</a>
    <a href="../index.html">Page d'accueil</a>
    <a href="/HTMLPages/first_page.html">Première page</a>
</body>

Balise `<img>`

Comme avec les liens, la balise seule ne suffit pas, il faut définir l'attribut src
L’attribut src pointe vers l’emplacement de l’image sur le serveur
Là aussi, le chemin peut être absolu, relatif à la page ou relatif à la racine du site
4 format d'images principaux:

JPEG : format d'image compressé, large palette de couleur, idéal pour les photographies
GIF : autorise les animations, limité à 256 couleurs
PNG : format sans perte, supporte la transparence, pour tout ce qui n’est ni une animation, ni une photo
SVG : format vectoriel, idéal pour les logos et les illustrations (de préférence sans texte)

Par défaut, l'image est inclue avec ses dimensions originales. Il est possible de redimensionner avec les attributs width et height (pixels), mais nous verrons une méthode CSS plus adaptée plus tard

Formulaire

Élément qui rassemblent des contrôles intéractifs (inputs)
Ces inputs permettent à l’utilisateur de saisir des informations
Ces informations sont envoyées au serveur web quand l’utilisateur valide sa saisie

Balise `<form>`

Elle sert de conteneur aux inputs
Elle propose beaucoup d’attributs, les plus importants sont action et method

action définit une URL vers laquelle les informations sont envoyées
method définit la méthode HTTP pour l’envoie de la requête


<form action="/MyApp/form/" method="POST">
...
</form>

/MyApp/form/

Exemple (source)

HTML5

Histoire du HTML

Avant HTML5 : standardisé par le W3C, consortium international à but non lucratif chargé de promouvoir les technologies du Web
2003-2019 : 15 ans de peripéties autour de la version 5. Long story short :

W3C voulait abandonner HTML au profit de XHTML (HTML avec une syntaxe XML)
Opposition des principaux distributeurs de navigateurs web (sauf Microsoft) qui ont constitué leur propre groupe de travail WHATWG
A partir de 2012 : 2 specifications divergentes de HTML5
2019 : W3C céde finalement la charge de la spécification HTML5 à WHATWG (rejoint par Google et Microsoft entre temps)
HTML5 devient HTML Living Standard, une spécification évoluant au fil de l’eau

Aujourd’hui : Le standard HTML5 introduit régulièrement des nouveautés

Liens utiles pour approfondir

Présentation de HTML

Présentation de HTML

Les navigateurs intègrent des outils de développement

Code source HTML

Anatomie d'une page HTML

Anatomie d'une page HTML

Anatomie d'une page HTML

Anatomie d'une page HTML

Éléments HTML

Arbre des éléments HTML

Arbre des éléments HTML

Arbre des éléments HTML

Flux normal

Flux normal

Éléments blocs et en ligne

Éléments blocs et en ligne

Exemple d'éléments blocs

Éléments blocs et en ligne

Exemple d'éléments en ligne

Éléments blocs et en ligne

Éléments blocs et en ligne

Balise sémantique

Balise sémantique

Balise sémantique

Exemples

Balise sémantique

Balise <article>

Balise sémantique

Balise <section>

Balise sémantique

Balise <aside>

Balise sémantique

Balises <time> et <address>

Liens et images

Balise <a>

Exemples

Balise <img>

Formulaire

Balise <form>

Exemple (source)

Histoire du HTML

Liens utiles pour approfondir

Balise `<article>`

Balise `<section>`

Balise `<aside>`

Balises `<time>` et `<address>`

Balise `<a>`

Balise `<img>`

Balise `<form>`