TP 1: Découverte du Html

Contexte et historique de HTML

Le langage HTML (Hyper Text Markup Language) fait partie d’une classe plus vaste de langages (SGML, XML, XHTML,...) destinés à décrire des documents et leur mise en page tout en distinguant la forme et le fond. Il a été inventé Tim Berners-Lee en 1991 et a d’abord été utilisé par des physiciens du CERN afin de communiquer leurs travaux. Il est a la base du WEB, la partie actuellement la plus utilisée d’internet.

Tim Berners-Lee suit encore aujourd'hui avec attention l'évolution du Web et a créé le World Wide Web Consortium (W3C) qui définit les nouvelles versions des langages. Il a par ailleurs créé plus récemment la World Wide Web Foundation, qui analyse et suit l'évolution du Web.

Activité préparatoire

Exercice 1 : mise en route

  1. Ouvrez le logiciel de traitement de texte libre office ou NotePad++ et tapez un texte comprenant un titre, deux paragraphes comprenant un mot en rouge. Faites “fichier/enregistrer sous” en choisissant le format “.html”.
  2. Ouvrez le navigateur Firefox, puis faire: “fichier/ouvrir” et sélectionnez le fichier html précédemment sauvegardé.
  3. Faites un clic-droit sur le texte et sélectionnez “voir le code source de la page”. Les éléments de texte et de formatage sont délimités par des balises comme par exemple et .
    1. Quelles balises délimitent votre titre ?
    2. Quelle balises délimitent vos paragraphes ?
    3. Comment est codée la couleur rouge de votre texte ?

Le langage HTML

Un fichier au format HTML (version 5) est avant tout destiné à être lu à l’aide d’un navigateur internet mais peut-être souvent en partie interprété par un traitement de texte comme nous venons de le constater.

La structure typique d’un document HTML (version 5) est la suivante :

L'en-tête

<!DOCTYPE html >

< html lang="fr" >

<head >

<title >

Exemple de HTML

</title >

<body>

<p>

Ceci est une phrase avec un <a href="cible.html">hyperlien</a>.

</p>

<p>

Ceci est un paragraphe où il n’y a pas d’hyperlien.

</p>

</body>

</html>

La première ligne est une description du format du document. Le reste du document séparé en un en-tête et un corps encapsulé par les balises ou tags <html> et </html>.

Les balises les plus courantes sont <p> et </p> qui délimitent un paragraphe et les plus importantes <a> et </a> qui définissent un lien hypertexte c’est-à-dire un renvoi vers une autre partie du document courant ou vers un autre document.

Bien qu’il soit possible de transformer un document HTML en une véritable soupe de tags assez indigeste (comme le font souvent les traitements de texte), de bonnes habitudes et de la rigueur permettent d’écrire des documents lisibles dont le fond est relativement séparé de la forme. On écrira ainsi dans des fichiers HTML le contenu et les tags relatifs à la structure et dans un fichier CSS (Cascading Style Sheet) les informations relatives au style. On ne se lancera donc pas dans la rédaction d’un document HTML sans avoir réfléchi avant à sa structure et son découpage en sous-partie. Cette réflexion pourra être conduite au brouillon et à l’aide de schémas. Dans la suite nous construirons petit à petit les bases d’un site internet présentant des recettes de cuisines.

Structurer un document

Nous allons respecter une structure extrêmement classique pour un site internet : un bandeau horizontal en haut donnant l’identité du site (titre, logo), un menu latéral sur le côté gauche (pour la navigation dans la base de données des recettes) et un bloc droit destiné à recevoir les informations plus variables (ici les recettes mais aussi les informations de présentation du site). Il faut donc prévoir dès l'écriture d'une page sa structure en différentes divisions: en-tête, menu, section, article,etc...

Exercice 2 : contenu première page

  1. Télécharger le fichier index.txt ici.

    Ouvrir le fichier index.txt avec NotePad++, le sauvegarder en le renommant indextp1.html et encapsuler le texte par les balises < body> et < /body>.

  2. Télécharger le fichier en-tete.txt ici.

    Ouvrir le fichier en-tete.txt inclure son contenu en tête du fichier indextp1.html et terminer le fichier par la balise < /html>.

  3. Mettre un titre entre les balises <title> et < / title> de l’en-tête. C’est sous ce titre que votre document apparaîtra dans l’onglet de votre navigateur.
  4. L’en-tête étant complet, travaillons sur le corps du document.
    1. Encapsuler le bandeau (ie le haut du corps où il y a le titre) par les balises <header > et </header > .
    2. Encapsuler le menu par les balises <nav > et </nav > .
    3. Encadrer la présentation du site par les balises <article > et </article > .
    4. Sauvegarder et faire clic droit ouvrir avec Firefox pour tester votre code. .

    Si vous n’avez pas fait d’erreurs les trois divisions devraient apparaître de façon informe mais chacune débutant sur une ligne.

  5. Encapsuler le texte du bandeau par les balises <h1 > et </h1 > pour en faire un titre de niveau 1. Mettre le “e” de “XXIe” entre les balises <sup > et </sup >. Sauvegarder et tester dans votre navigateur (il suffit de rafraîchir la page avec la petite flèche en haut à droite de la barre URL)
  6. Mettre un titre de niveau 2 au manifeste et des balises <p> et </p> à chacun des deux paragraphes. Tester.
  7. Attaquons nous au menu à présent.
    1. “Au menu” doit devenir un titre de niveau 1, “Entrées/Plats/Desserts” des titres de niveau 2. Sauvegarder et tester.
    2. Encadrer les items de menus par trois balises <ul > et </ul > .
      3. pour en faire des listes non ordonnées (unordered list), et chacun des six noms de recettes par des balises <li > et </li > . pour en faire des items de liste (list item). Tester.

  8. Taper l’adresse “http://validator.w3.org/” dans un nouvel onglet du navigateur et faire valider la page par la méthode “file upload”.

    Si votre document contient des erreurs corrigez les. Sinon vous aurez seulement un avertissement que vous utilisez la dernière version HTML 5 et non la 4 et par conséquent votre page ne peut pas être validée, bien qu'elle soit correctement écrite.

    Aller voir sur le Web l'évolution du langage HTML au cours du temps.

On notera que la mise en forme actuelle est minimale. Nous n’avons indiqué que la nature des choses mais donné aucune véritable instruction de mise en forme. Toute la mise en page a été décidée entièrement par le navigateur à partir de nos instructions de fond. Une bonne page HTML doit toujours être ainsi conçue.