NFA016 : HTML

O. Pons, S. Rosmorduc, M. Simonot

Conservatoire National des Arts & Métiers

HTML: c'est quoi

HyperText Markup Language

HTML: un peu d'histoire

Introduction

On sépare le contenu et la présentation

Contenu et structure
: décrit par le langage HTML ;
Présentation
: décrite par des feuilles de style CSS : (couleur fonte cadre …)

Principe :

Xhtml et XML

XHTML

XML (Extensible Markup Language)

Outils pour écrire des pages web

Pas besoin d'être connecté !
  1. Vous écrivez votre code html dans un fichier .html avec votre éditeur
  2. Vous ouvrez la page dans votre navigateur pour afficher le résultat.

Balises et attributs

Balises et attributs

exemple :

<img src="grnarrow.gif" alt="description de l'image" width="10px" height="10px" />

Élément

Définition : le mot élément désigne une balise et ce qu'elle contient.

Exemple : Dans

<h1>Cours de
<em>HTML</em></h1>

Règles pour l'écriture du code

(Ces règles sont obligatoires en XHTML, mais nous conseillons de les suivre en HTML5)

Structure d'une page

<!DOCTYPE html>
<html lang="fr">
 <head>
  <meta charset="utf-8"/>
  <title>Ma belle page</title>
 </head>
 <body>
  <h1>Un exemple de page</h1>
  <p>Ô la <em>jolie</em> page</p>
</body>
</html>

Structure d'une page

DOCTYPE
HTML 5
meta charset
précise le codage des caractères (accents, etc…)
balise ouvrante html
commence le document ; précise éventuellement sa langue (ici français).
en-tête
balise head . Informations diverses utiles au navigateur.

Au minimum : titre du document.

corps du document
body contient le texte du document.

Corps

Texte, titres et paragraphes

Exemple (source)

<body>
  <h1>Un gros titre</h1>
  <p>Voici le paragraphe associé au
    titre 1. Le saut de ligne précédent ne provoquera pas
    un saut de ligne à l'affichage.</p>
  <p>Voici un bout de texte mis en évidence avec la balise em:
    <em>ceci est à faire remarquer</em>.<br/>
    L'usage de la balise
    <code>br</code> n'est
    que rarement utile.
  </p>
  <p>Et voila le résultat de la balise strong : <strong>très
    important</strong> .</p>
  <h2>un titre un peu plus petit</h2>
  <h3>encore + petit</h3>
  <h4>encore + petit</h4>
  <h5>encore + petit</h5>
  <h6>encore + petit</h6>
</body>

Exemple (résultat)

Les listes

Une liste est

Il existe plusieurs sortes de listes :

  1. les listes « non ordonnées », ou « unsorted lists » introduites par ul;
  2. les listes numérotées « ordered lists », introduites par ol

Les listes à puce(source)

 <h2>listes à puces</h2>
 <p>Les animaux domestiques les plus courants sont:</p>
 <ul>
    <li>chat</li>
    <li>chien</li>
    <li>poisson rouge</li>
 </ul>
 <h2>listes ordonnées</h2>
 <p>Pour monter des blancs en neige :</p>
 <ol>
   <li>Séparer les blancs des jaunes</li>
   <li>Mettre un peu de sel dans les blancs</li>
   <li>Battre les blancs au fouet</li>
 </ol>

Les Liste (résultat)

Les listes de définition (source)

 <h2>listes de définitions</h2>
  <p>un exemple :</p>
  <dl>
   <dt>Java</dt>
   <dd>langage impératif orienté objet</dd>
   <dt>Scheme</dt>
   <dd>variante du langage fonctionnel Lisp</dd>
  </dl>

Les listes de définition (résultat)

Listes imbriquées

Listes imbriquées

  <h2>Plusieurs niveaux de listes</h2>

  <p>exemple :</p>
  <ol>
    <li>exercice 1
      <ol>
        <li>1er élément</li>
        <li>2ème élément</li>
        <li>3ème élément</li>
      </ol>
    </li>
    <li>exercice 2</li>
  </ol>
  <p>et non pas :</p>
  <ol>
    <li>exercice 1</li>
    erreur Xhtml
      <ol>
        <li>1er élément</li>
        <li>2ème élément</li>
        <li>3ème élément</li>
      </ol>
     <li>exercice 2</li>
    <li>exercice 3</li>
  </ol>

Et le résultat

Les tables

  <table>
    <tr>
      <th></th>
      <th>lundi</th>
      <th>mardi</th>
    </tr>
    <tr>
      <th>Matin</th>
      <td>julie</td>
      <td>martin</td>
    </tr>
    <tr>
      <th>Après-midi</th>
      <td>Julie</td>
      <td>didier</td>
    </tr>
    <tr>
      <th>Soir</th>
      <td>Martin</td>
      <td>Martin</td>
    </tr>
  </table>

Et le résultat

Une table

Un tableau plus compliqué

Le source

 <table summary="resumé du contenu">
    <caption>
      Mon premier tableau
    </caption>
    <tr> <th></th><th>lundi</th> <th>mardi</th> </tr>

    <tr> <th>Matin</th> <td rowspan="2">julie</td> <td>martin</td>
    </tr>

    <tr> <th>Après midi</th><!-- seconde ligne de "julie"-->
         <td>didier</td>
    </tr>
    <tr>
      <th>Soir</th>
      <td colspan="2">Martin</td> <!-- (occupe deux colonnes) -->
    </tr>
  </table>

Le résultat (bis)

(limites de cases ajoutées en CSS)
td,th {border-style :solid}

Les liens

Permet de naviguer de page en page ou de de morceaux de page en morceaux de page

Définir un lien

    <a href="URL">texte du lien< /a> 

URL : Uniform Resource Locator désigne une resource, par exemple une autre page web.

Les URL

absolue
protocole + adresse :
  • http://www.cnam.fr/salut.html : page web ;
  • ftp://ftp.cnam.fr/cours.zip : fichier sur un serveur ftp ;
  • file:///home/rosmord/test.html : fichier sur le disque local.
relative au serveur
/images/logoCnam.png : si le serveur actuel a l'adresse http://www.cnam.fr/, charge http://www.cnam.fr/images/logoCnam.png
relative
l'adresse de la nouvelle page est relative à celle de la page actuelle.

URL Relatives

Si on est sur la page http://localhost/CoursHTML/dossier/ici.html on peut :

Exemple de liens (sources)

body de depart.html

<body>
    <h1>Index</h1> 
    <ul>
      <li> <a href="chapitre1.html">chapitre 1 </a></li>
      <li> <a href="coursCss/chapitre2.html">chapitre 2</a></li>
    </ul>
</body>

body du fichier chapitre1.html

   <h1>chapitre 1</h1> 
   <p> bla bla bla trtrtrtr trtrtrtr </p> 
   <p>
     <a href="depart.html">Retour à l'index </a>
   </p>

body du fichier chapitre2.html du sous repertoire coursCss

  <h1>chapitre 2</h1>
  <p> bla bla bla </p>
  <p> <a href="../depart.html">Retour à l'index </a>
  </p> 

Démonstration

Les ancres

Désignent un point précis dans une page.

Définition d'une ancre
       <p id="nom_d_ancre">[contenu]</p> 
     

Pour nom_d_ancre noter un nom. Sans espace, ni accent, avec une lettre comme premier caractère.

On peut remplacer "p" par n'importe quelle balise

Note :

Les ancres, exemple (source)

  <h1 id="index">Index</h1>

  <p><a href="#chapitre1">chapitre 1</a></p>
  <p><a href="#chapitre2">chapitre 2</a></p>

  <p> un paragraphe </p>

  <h1 id="chapitre1">Chapitre 1</h1>
  <p> un paragraphe </p>

  <p> un paragraphe </p>

  <h2>bli blo</h2>

  <h1 id="chapitre2">Chapitre 2</h1>
  <p> un paragraphe </p>
  
  
  <a href="#index">retour à l'index</a>
		

Démonstration

Les images

Pour insérer une image dans une page : balise img

exemple : si on a dans notre repertoire le fichier image "logoCnam.gif" :

  <img src="coursHTMLdata/logoCnam.gif" alt=""/>

Catégories de balises

Attribut universels

<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
</head>
<body>
  <h1>titre 1</h1>
 <p class="bleu">bla bla bla <em>etc</em></p>
  <div class="important">
    <h1>titre 2</h1>
   <p>encore bla bla bla</p>
    <h2>titre3 <em>+++</em></h2>
  </div>
</body>
</html>

conclusion : page HTML = un arbre de balise

<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
</head>
<body>
  <h1>titre 1</h1>
 <p class="bleu">bla bla bla <em>etc</em></p>
  <div class="important">
    <h1>titre 2</h1>
   <p>encore bla bla bla</p>
    <h2>titre3 <em>+++</em></h2>
  </div>
</body>
</html>

racine : html
enfants : head, body
enfants de body : h1,p,div
descendants de body: h1,p,div,h1,p,h2,em

Certains noeuds de l'arbre ont des attributs

dessin de l'arbre

Quelques balises supplémentaires de HTML5

video

Permet d'inclure une vidéo dans une page. La video peut être désignée par l'attribut src, ou, si plusieurs formats sont proposés, listée dans une balise source.
	    <video controls>
  	      <source src="cours.webm" type="video/webm">
	      <source src="cours.mp4" type="video/mp4">
	      Désolé, format non disponible.
           </video>
	  

Balises de structuration de page

Elles ont été définies en regardant les utilisations les plus courantes de class.

Par défaut, ces balises se conduisent comme des div. Pour leur donner un aspect intéressant, il faut utiliser les CSS.

header
(à ne pas confondre avec head : délimite un bandeau en haut de page.
footer
bandeau de pied de page
main
contenu principal de la page.
nav
une zone qui contient essentiellement des liens (typiquement un menu)
<nav>
  <ul>
    <li><a href="home.php">Accueil</a></li>
    <li><a href="recettes.php">Recettes</a></li>
  </ul>
</nav>
	      

Structuration de contenu

article
délimite un contenu autonome ; qui a en théorie son propre header, qui lui-même contient un titre (h1...h9) ;
section
partie de document typiquement pourvue d'un titre.