Écrire en HTML

Objectifs

Savoir créer une page HTML
Savoir intégrer dans une page HTML des paragraphes, titres, listes, tableaux

Introduction

Durée : 1h30
Environnement de travail : éditeur de texte
Pré-requis : Aucun

Introduction générale à HTML

Rappel :

HTML est l'un des trois standards qui ont permis de fonder le Web avec HTTP et URL.

Rappel : HTML est un standard du W3C

Le W3C est un consortium international composé d'industriels, des éditeurs de navigateurs et de centres de recherche.
Son rôle est de standardiser les technologies utilisées dans le domaine du Web.
Le W3C a été fondé en 1994 Tim Berners-Lee au MIT.
Le W3C compte 452 membres en 2021.

Rappel : Une petite histoire d'HTML

1990 : première page HTML
1995 : premier standard (HTML 2.0)
2014 : HTML5

Définition : HTML5

Le HyperText Markup Language, abrégé HTML, HTML5 dans sa dernière version, est le langage de balisage conçu pour écrire les pages web.

HTML5 permet :

d'écrire du texte et des liens entre des pages (hypertexte),
d'inclure des ressources multimédias (images, des vidéos...),
de structurer la page (balisage sémantique),
de mettre en forme le contenu (balisage physique avec CSS),
de programmer des interactions avec l'utilisateur (par exemple des formulaires de saisie, avec JavaScript).

(Source modifiée : Wikipédia)

Exemple : Hello World

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Méthode : Créer un document HTML

Un document HTML est un simple fichier texte, il peut donc être créé avec n'importe quel éditeur de texte.

On utilise a minima des éditeurs colorisant comme :

notepad++ sous Windows
gedit sous Linux

On préfère des éditeurs colorisant et validant comme :

https://atom.io (libre)
https://code.visualstudio.com (partiellement propriétaire, collecte de données par défaut, désactivable)

Méthode : Consulter un document HTML

Un document HTML se consulte avec un navigateur comme Firefox ou Chrome à l'aide du menu permettant d'ouvrir un fichier (par exemple CTRL+O avec Firefox).
On peut toujours consulter le code source d'un fichier HTML en cours de consultation que ce soit un fichier local ou un fichier en ligne (par exemple clic droit sur la page avec Firefox).

Complément : Outils d'édition HTML en ligne

Exercice

Connectez-vous à jsfiddle.net et testez le Hello World HTML.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Principe du balisage HTML

Définition : Balise

Les balises sont les composants fondamentaux permettant l'écriture de documents HTML.

Elles se distinguent du contenu en utilisant les caractères <, > et /.

Un balise HTML encadre en général d'autres balises ou du texte, un document HTML est donc formé d'une imbrication de balises et de chaînes de caractères.

Syntaxe :

balise d'ouverture : <nom_balise>
balise de fermeture : </nom_balise>

Exemple :

<p>12, rue de Paris</p>

Attention : Balises vides

Certains balises sont des balises vides, elle ne contiennent ni texte ni balises.

Elle sont représentée par une balise ouvrante qui n'est jamais fermée.

Exemple :

La balise <hr> permet de dessiner une ligne horizontale sur la page.

<!DOCTYPE html>
<html lang="en-US">
  <body>
    <p>The <i>spirit</i> is strong but the flesh is <u>weak</u></p>
    <hr>
    <p>The <b>vodka</b> is strong but the meat is <strong>rotten</strong></p>
  </body>
</html>

Exemple : Exemples de balises communément utilisées

Titres (du plus au moins important) : <h1> <h2> <h3> <h4> <h5> <h6>
Blocs : <div> <section> <article> <form> <footer> <header> <menu>
Éléments linéaires : <span> <p>
Champs : <input /> <textarea /> <button> <select>
Emphases : <em> <b> <i>
Listes : <ul> <ol> <li>
Images : <img src=""/>
Liens : <a href="">
Commentaires (non-visibles dans le rendu finale) :

Exercice

Connectez-vous à htmledit.squarefree.com et testez le fichier HTML ci-après.

Identifiez les fonctions des balises i, b, u et strong.

<!DOCTYPE html>
<html lang="en-US">
  <body>
    <p>The <i>spirit</i> is strong but the flesh is <u>weak</u></p>
    <hr>
    <p>The <b>vodka</b> is strong but the meat is <strong>rotten</strong></p>
  </body>
</html>

Structure d'un fichier HTML

Définition :

Un document HTML :

commence par l'instruction <!DOCTYPE html>
puis la balise ouvrante <html> ;
il se termine avec la balise fermante </html> ;
entre ces deux balises il y a un entête (head) et un corps (body)

Syntaxe :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>...</title>
        <meta charset="utf-8">
    </head>
    <body>
        ... 
    </body>
</html>

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Le titre de ma page</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>Mon premier paragraphe.</p>
        <p>Mon second paragraphe.</p>
    </body>
</html>

Remarque : lang

On associe à la balise html un attribut lang qui spécifie la langue principale du document, comme par exemple : <html lang="fr">

Remarque : head & body

L'entête head se compose au minimum d'un titre (title) et d'une information concernant l'encodage des caractères (charset="utf-8").
Le corps contient l'ensemble du contenu visible dans la page, par exemple, des paragraphes (p).

Exercice

Choisissez un livre que vous avez aimé.

Créez un fichier HTML qui présente le livre en affichant :

un premier paragraphe avec le titre du livre ;
un second paragraphe avec le nom de l'auteur ;
un troisième paragraphe avec un court résumé.

Le titre de la page sera également le titre du livre.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>La horde du contrevent</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>La horde du contrevent</p>
        <p>Alain Damasio</p>
        <p>Ils sont vingt-trois et forment la trente-quatrième Horde du Contrevent. Dans un monde balayé par les vents, ils ont été formés depuis l'enfance dans un seul but : parcourir le monde face au vent pour atteindre le mythique Extrême-Amont. (wikipedia.fr)</p> 
    </body>
</html>

Paragraphes et balises en ligne (p)

Définition :

Pour créer un paragraphe, il suffit d'encadrer une phrase par les deux balises <p> et </p>. La navigateur web qui affichera la page HTML s'occupera d'ajouter un retour à la ligne.

À l'intérieur d'un paragraphe, il est possible de mettre des mots en forme en utilisant des balises en ligne (inline) comme :

<b> pour des mots en gras
<i> pour des mots en italique
<q> pour des citations courtes
<code> pour du code informatique

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Le titre de ma page</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>Ceci est un paragraphe contenant du <b>gras</b> et de l'<i>italique</i>.</p>
    </body>
</html>

Syntaxe :

<b>des mots en gras</b>
<i>des mots en italique</i>
<q>des mots cités</q>
<code>du code informatique</code>

Exercice

Choisissez un livre que vous avez aimé.

Créez un fichier HTML qui présente le livre en affichant :

un premier paragraphe avec le titre du livre en gras ;
un second paragraphe avec le nom de l'auteur en italique ;
un troisième paragraphe avec un court résumé qui empruntera une citation à Wikipédia.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>La horde du contrevent</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p><b>La horde du contrevent</b></p>
        <p><i>Alain Damasio</i></p>
        <p><q>Ils sont vingt-trois et forment la trente-quatrième Horde du Contrevent. Dans un monde balayé par les vents, ils ont été formés depuis l'enfance dans un seul but : parcourir le monde face au vent pour atteindre le mythique Extrême-Amont</q>. (wikipedia.fr)</p> 
    </body>
</html>

Titres (hx)

Définition :

Pour créer un titre de premier niveau il suffit que celui-ci soit encadré par les balises <h1> et </h1>.

On peut ainsi créer jusqu'à 6 niveaux de titre de h1 à h6.

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Association à but non lucratif</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Association à but non lucratif</h1>
        <h2>Définition</h2>
        <p>Ce type d'association est une société de personnes et de droit privé dont l'objet social ne doit pas être lucratif. </p>
        <h2>Histoire</h2>
        <p>Les groupes de bénévoles constituent une forme initiale d'organisation à but non-lucratif, ayant existé depuis l'Antiquité. </p>    
        <p><i>Source : Wikipédia.fr</i></p>
    </body>
</html>

Syntaxe :

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>

Exercice

Réaliser votre CV en présentant deux sections : formation et expérience.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Stéphane Crozat</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Stéphane Crozat</h1>
        <h2>Formation</h2>
        <p>Ingénieur en Génie Information</p>
        <p>Docteur en Contrôle des Systèmes</p>
        <h2>Expérience</h2>
        <p>Enseinant-chercheur à l'Université de Technologie de Compiègne</p>           
    </body>
</html>

Listes (ol et ul)

Définition :

Pour faire une liste il faut imbriquer deux niveaux de balises :

un premier niveau ol (pour une liste numérotée) ou ul (pour une liste non numérotée)
un second niveau <li> pour chaque item de liste

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Recette de la tartine à la confiture de fraise</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Recette de la tartine à la confiture de fraise</h1>        
        <ol>
            <li>Prendre une tranche de pain</li>
            <li>Étaler du beurre avec un couteau</li>
            <li>Ajouter une couche de confiture avec une cuillère</li>
        </ol>
    </body>
</html>

Syntaxe :

<ul>
 <li>Item de liste à puce</li>
 <li>Item de liste à puce</li>
</ul>
<ol>
 <li>Item de liste à ordonnée</li>
 <li>Item de liste à ordonnée</li>
</ol>

Exercice

En consultant le lien ci-après, faites une liste des synonymes du mot langage : https://www.cnrtl.fr/synonymie/langage

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Langage</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Synonymes du substantif "langage"</h1>        
        <ul>
            <li>langue</li>
            <li>parler</li>
            <li>jargon</li>
            <li>patois</li>
            <li>style</li>
            <li>élocution</li>
            <li>vocabulaire</li>
            <li>parole</li>
            <li>idiome</li>
            <li>dialecte</li>
            <li>sémiotique</li>
            <li>parlure</li>
            <li>parlage</li>
            <li>lexique</li>
            <li>discours</li>
            <li>code</li>
            <li>argot</li>
            <li>verbe</li>
        </ul>
    </body>
</html>

Tableaux (table)

Définition :

Pour faire un tableau on utilise une balise table border="1" puis à l'intérieur :

on ajoute pour chaque ligne une balise tr (table row ou ligne de table)
à l'intérieur de celle-ci on ajoute pour chaque cellule une balise td (table data)

Si on veut que la première ligne soit une ligne de titre on utilise des balises th (table head) à la place de td.

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Population mondiale</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Population mondiale</h1>        
        <table border="1">
          <tr><th>Année</th><th>Population mondiale</th></tr>
          <tr><td>-100 000</td><td>0,5 million</td></tr>
          <tr><td>-5 000</td><td>5 à 20 millions</td></tr>
          <tr><td>400</td><td>190 à 206 millions</td></tr>
          <tr><td>1000</td><td>254 à 345 millions</td></tr>
          <tr><td>1500</td><td>425 à 540 millions</td></tr>
          <tr><td>1900</td><td>1,550 à 1,762 milliard</td></tr>
          <tr><td>1950</td><td>2,5 milliards</td></tr>
          <tr><td>2015</td><td>7 349 472 000</td></tr>
        </table>
        <p>Source : Wikipédia.fr</p>
    </body>
</html>

Syntaxe :

<table border="1">
  <tr><th>Titre colonne 1  </th><th>Titre colonne 2  </th><th>...</th></tr>
  <tr><td>Ligne 1 colonne 1</td><td>Ligne 1 colonne 2</td><td>...</td></tr>
  <tr><td>Ligne 2 colonne 1</td><td>Ligne 2 colonne 2</td><td>...</td></tr>
</table>

Attention :

Les tableaux ne doivent pas être utilisés pour mettre en page des contenus, par exemple pour afficher des informations sur deux colonnes, on utilisera pour cela CSS, une technologie complémentaire à HTML.

Exercice

En vous aidant du site de référence https://developer.mozilla.org, réaliser en HTML un tableau à deux colonnes qui présente les balises HTML inline ci-après, associées à leur signification : em, strong, sub, sup.

https://developer.mozilla.org/fr/docs/Web/HTML/Element#S%C3%A9mantique_du_texte_en_ligne

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Population mondiale</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Population mondiale</h1>
        <table border="1">
          <tr><th>Balise</th><th>Signification</th></tr>
          <tr><td>em</td><td>L'élément HTML <code>em</code> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister.</td></tr>
          <tr><td>strong</td><td>L'élément HTML <code>strong</code> indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. </td></tr>
          <tr><td>sub</td><td>L'élément HTML <code>sub</code> est utilisé, pour des raisons typographiques, afin d'afficher du texte souscrit (ou en indice).</td></tr>
          <tr><td>sup</td><td>L'élément HTML <code>sup</code> est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant.</td></tr>
        </table>
        <p>Source : developer.mozilla.org</p>
    </body>
</html>

Valider un fichier HTML

Fondamental :

Les fichiers HTML que l'on écrit et que l'on met en ligne doivent respecter les standard du W3C.

Rappel : Utiliser un éditeur colorisant

Introduction générale à HTML

Méthode : Afficher la source

Les navigateurs web proposent une fonction permettant d'afficher la source HTML de la page que l'on consulte.

Sous Firefox : Clic droit puis View Page Source (ou ajouter view-source: devant n'importe quelle URL).

Exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Primary Meta Tags -->
    <meta charset="utf-8">
[...]
    <!-- Page Title -->
    <title>Gauthier Roussilhe</title>  
[...]
</head>
<body>
    <header class="header">
        <h1 class="site-title"><a href="../index.html">Gauthier Roussilhe</a></h1>
[...]
    </header>
[...]

view-source:https://gauthierroussilhe.com/post/paradoxes-enjeux.html (extraits)

Méthode : W3C Markup Validation Service

Le W3C propose un service permettant de valider le code HTML d'une page en ligne ou locale : https://validator.w3.org/

Exemple :

https://validator.w3.org/check?uri=https%3A%2F%2Fwww.bortzmeyer.org%2Fenfer-numerique.html... (extrait)

Exercice

Consulter le site : https://motherfuckingwebsite.com/ et affichez la source de la page.

Quelle balise est utilisée pour la citation « Good design is as little design as possible. » ?

Sous Firefox : Clic droit puis View Page Source (ou ajouter view-source: devant n'importe quelle URL).

blockquote

Montrez que le contenu est valide selon les standards du w3c

https://validator.w3.org/

Documentation HTML

Le standard W3C

https://www.w3.org/TR/html52

MDN : une documentation de référence

https://developer.mozilla.org/fr/docs/Web/HTML

Quiz

Soit le document HTML ci-après. Créez un fichier correspondant et ouvrez-le dans un navigateur web.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Ma page</title>
 </head>
 <body>
   <h3>Liste de courses</h3>
   <ol>
    <li><s>Pommes</s></li>
    <li><s>Farine</s></li>
    <li>Levure</li>
    <li><b>Oeufs</b></li>
   </ol>
   <h3>Choses à faire <br/><i>Très important !</i></h3>
   <ul>
    <li><s>Factures</s></li>
    <li>Appeler Mamie</li>
    <li>Sport</li>
   </ul>
 </body>
</html>

Combien de lignes contient cette page web ?

Quelle mise en forme commande la balise <s> ?

Souligné

Barré

Italique

Gras

Quelle balise a permis de mettre « Très important ! » en italique ?

Quelle est la différence entre les balises <ol> et <ul> ?

<ol> est une liste numérotée

<ul> est une liste à puces

<ol> est une liste ordonnée

<ul> est une liste non ordonnée

Combien de lignes contient cette page web ?

La balise <br> au milieu du titre « Choses à faire Très important ! » crée un saut de ligne.

L'usage de <br> est en général une mauvaise pratique, on préférera créer un nouveau paragraphe.

Quelle mise en forme commande la balise <s> ?

Souligné

Barré

Italique

Gras

https://developer.mozilla.org/fr/docs/Web/HTML/Element/s

Quelle balise a permis de mettre « Très important ! » en italique ?

Quelle est la différence entre les balises <ol> et <ul> ?

<ol> est une liste numérotée

<ul> est une liste à puces

<ol> est une liste ordonnée

<ul> est une liste non ordonnée

Introduction à l'écriture de fichiers HTML

Objectifs

Introduction

Introduction générale à HTML

Rappel :

Rappel : HTML est un standard du W3C

Rappel : Une petite histoire d'HTML

Définition : HTML5

Exemple : Hello World

Méthode : Créer un document HTML

Méthode : Consulter un document HTML

Complément : Outils d'édition HTML en ligne

Exercice

Principe du balisage HTML

Définition : Balise

Syntaxe :

Exemple :

Attention : Balises vides

Exemple :

Exemple : Exemples de balises communément utilisées

Exercice

Structure d'un fichier HTML

Définition :

Syntaxe :

Exemple :

Remarque : lang

Remarque : head & body

Exercice

Paragraphes et balises en ligne (p)

Définition :

Exemple :

Syntaxe :

Exercice

Titres (hx)

Définition :

Exemple :

Syntaxe :

Exercice

Listes (ol et ul)

Définition :

Exemple :

Syntaxe :

Exercice

Tableaux (table)

Définition :

Exemple :

Syntaxe :

Attention :

Exercice

Valider un fichier HTML

Fondamental :

Rappel : Utiliser un éditeur colorisant

Méthode : Afficher la source

Exemple :

Méthode : W3C Markup Validation Service

Exemple :

Exercice

Documentation HTML

Le standard W3C

MDN : une documentation de référence

Quiz

Introduction générale à HTML

Rappel :

Rappel : HTML est un standard du W3C

Rappel : Une petite histoire d'HTML

Définition : HTML5

Exemple : Hello World

Méthode : Créer un document HTML

Méthode : Consulter un document HTML

Complément : Outils d'édition HTML en ligne