Création numérique
Atelier Conception et publication Web

Séance 2 - Structure d'une page web - HTML

Hiérarchie d'un document HTML

Un document HTML est structuré par les définitions de titres, paragraphes et listes.

Les titres

Les titres sont une des premières approches permettant la structuration de documents. Ils permettent de distinguer plusieurs parties qui composeront le document suivant une hiérarchie.

En html on associe à chaque définition de titre, une valeur entière comprise entre 1 et 6.
Cette valeur, qui peut être comparée à un rang ou niveau, permet de définir « l'importance » d'un titre.

Les balises <h1> et </h1> définissent le titre de plus grande importance
et <h6> associée à </h6> définissent le titre de plus petite importance.

Le W3C définit le titre de section comme un élément qui décrit brièvement le sujet de la section qu'il introduit. Ce titre de section ne doit pas être confondu avec le titre de la page, balisé avec title, exclusivement dans le head du document.

La hiérarchie des titres d'une page web doit être :

Les paragraphes

Les paragraphes permettent de structurer les informations ayant une relation directe entre elles. En HTML la définition d'un paragraphe permet également l'indentation du texte, ainsi que les passages à la ligne avant et après le paragraphe.

Définition d'un paragraphe

Un paragraphe se définit à l'aide des balises <p> et </p> (pour « Paragraph »).
Le texte contenu entre la balise de début de paragraphe <p> et la balise de fin du paragraphe </p> définit le contenu du paragraphe.

Lignes et sauts de lignes

À l'aide de la balise <br /> (pour « Break line »), Il est possible de demander explicitement un saut de lignes au sein d'un paragraphe, sans pour autant souhaiter terminer le paragraphe.

Au même titre que les sauts de lignes, il est possible d'insérer des lignes horizontales dans le document HTML avec la balise <hr>. Nous verrons par la suite qu'il est possible de modifier l'aspect de ces lignes de séparation.

Les listes

Liste descriptive

Les listes descriptives permettent de présenter un ensemble d'informations dans une forme proche de celle adoptée par les dictionnaires : le mot clé est placé sur la première ligne et la définition correspondante est placée sur les lignes suivantes.

Il existe donc une balise d'ouverture de la liste <dl> (pour « Definition List »), à laquelle correspond naturellement une balise de fermeture de la liste </dl>.

Le mot clé est placé entre les balises <dt> et </dt> (pour « Definition Term »).

Enfin, la définition associée est placée entre les balises <dd> et </dd> (pour « Definition Description »).

<dl>
<dt>Café</dt>
<dd>Boisson noire chaude</dd>
<dt>Lait</dt>
<dd>Boisson blanche froide</dd>
</dl>
Café
Boisson noire chaude
Lait
Boisson blanche froide

Liste non-ordonnée (ou liste à puce)

L'élément HTML <ul> (pour « Unordered List ») représente une liste d'éléments non ordonnés. C'est une collection d'éléments qui n'ont pas d'ordre numérique et dont leur position dans la liste n'a pas d'importance.
En règle générale une liste d'élements non ordonnée est affichée avec une puce qui peut prendre plusieurs formes : un simple point, un cercle ou un carré. Le style de la puce n'est pas défini dans le code HTML de la page, mais dans le code CSS associé utilisant la propriété list-style-type.

<ul>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ul>
  • Ligne 1
  • Ligne 2
  • Ligne 3

Liste ordonnée

Élément HTML <ol> (pour « Ordered List »).

<ol>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
</ol>
  1. Ligne 1
  2. Ligne 2
  3. Ligne 3

Imbrication de listes

<ul>
<li>Ligne 1
    <ul>
        <li>Ligne 1.1</li>
        <li>Ligne 1.2</li>
    </ul>
</li>
<li>Ligne 2</li>
<li>Ligne 3
    <ul>
        <li>Ligne 3.1
            <ul>
                <li>Ligne 3.1.1</li>
            </ul>
        </lI>
    </ul>
</li>
</ul>
  • Ligne 1
    • Ligne 1.1
    • Ligne 1.2
  • Ligne 2
  • Ligne 3
    • Ligne 3.1
      • Ligne 3.1.1

Section de contenu

L'élément <div> (pour « Division ») permet de diviser une page web en plusieurs sections. C'est un élément de type bloc.

<div class="section" id="section-1">
<h3>Ceci est un titre</h3>
<p>Ceci est un paragraphe.</p>
</div>

Les liens hypertextes

Qu'est ce qu'un lien hypertetxe ?

Exemples de liens hypertextes

Exemple de lien absolu <a href="http://www.univ-lyon2.fr">
  Site de Lyon 2
</a> 		Site de Lyon 2
Exemple de lien relatif <a href="page1.html">
  Page 1
</a> 		Page 1
Exemple de lien avec options <a href="presentation.php" target="_blank" class="special">
  Qui sommes-nous ?
</a> 		Qui sommes-nous ?

Les liens absolus

<a href="http://www.univ-lyon2.fr">Site de Lyon 2</a>

Les liens relatifs

<a href="page.html">Page</a>

Naviguer dans l'arborescence ?

Lien relatif vers la page A depuis la page index : <a href="partA/pageA.html">Page A</a>

Lien relatif vers index depuis la page A : <a href="../index.html">Page A</a>

Lien de messagerie

Exemple de liens de messagerie

        <!-- Exemple de lien de messagerie-->
        <a href="mailto:contact@site.com">Écrivez-nous</a>

        <!-- Exemple avec plusieurs destinataires -->
        <a href="mailto:contact@site.com,support@site.com">Écrivez-nous</a>

        <!-- Exemple avec option-->
        <a href="mailto:contact@site.com?subject=Demande Info">Écrivez-nous</a>

Les ancres nommées

        <!-- Exemple d'ancre nommée -->
        <a href="#ancre">Afficher le paragraphe</a>
        <!-- Élément à afficher -->
        <p id="ancre">
            Texte
        </p>

Exemple d'ancre classique : ¶ Retourner en haut de la page

Lien vers un fichier ???

Précisions sur la cible

Intitulés des liens

Nombre de liens par page

Paramètres des liens

Que se passe t'il si l'on clique sur les liens suivants ?

  1. Cliquer ici <a href="image.png">Cliquer ici</a>
  2. Cliquer ici <a href="app.exe">Cliquer ici</a>
  3. Cliquer ici <a href="#chapitre3">Cliquer ici</a>
  4. Cliquer ici <a href="doc.pdf">Cliquer ici</a>
  5. Cliquer ici <a href="google.fr">Cliquer ici</a>

Exemple d'une page web dynamique

Page web dynamique

Les images

La balise <img />

Dimensions des images

L'attribut alt

L'attribut longdesc

Exemples

<!-- Exemple image distante-->
<img src="http://www.site.fr/images/image.jpg" />

<!-- Exemple image stockée sur l'hébergeur -->
<img src="images/image.jpg" />

<!-- Exemple image avec options -->
<img src="images/logo.jpg" title="Logo du site" width="150" height="150" />

<!-- Exemple image avec description complète -->
<img src="poles.jpg" alt="Diminution de la surface de la calotte polaire de 1997 à 2003." longdesc="desc.html" />

Autre médias

Média audio

HTML 5 fournis une manière rapide et simple d'ajouter des fichiers audio sur une page web avec l'élément HTML <audio></audio> (pour « Audio file »). Comme pour l'image <img /> l'élément <audio> accepte une URL source dans l'attribut src. Contrairement à l'image <img /> l'élément <audio> à besoin d'une balise d'ouverture et une balise de fermeture.

<audio src="jazz.ogg"></audio>

Attributs

D'autres attributs que src peuvent accompagner l'élément <audio> :

Média vidéo

Ajouter une vidéo à une page web et très similaire à ajouter un fichier audio. On utilise l'élément HTML <video> (pour « Video file »)

<video src="earth.ogv" controls></video>

Exemple d'une video

Iframe

L'élément <iframe> (pour « Inline frame ») permet d'intégrer et afficher une page web à l'intérieur d'une autre page web.

<iframe src="https://www.google.com/maps/embed?..."></iframe>

Exemple d'une iframe

Figure & Captions

Figure

L'élément <figure> (pour « Figure ») est un block qui spécifie son propre contenu en tant que média.

<figure>
<img src="chien.jpg" alt="Un chien qui porte un chapeau">
</figure>

Figcaption

L'élément <figcaption> (pour « Figure caption ») améliore la sémantique autour d'un média, par exemple pour afficher une légende sous une image.

<figure>
<img src="chien.jpg">
<figcaption>Un chien qui porte un chapeau.</figcaption>
</figure>

Exercice

Consignes

Créer 3 pages HTML :

Contenu attendu sur toutes les pages :

Contenu spécifique attendu sur la page 1 et la page 2 :

Correction

Disponible à partir du 30/09/2016