Cours d'introduction aux langages HTML5 et CSS3


1. Préambule

Le HTML (Hypertext Markup Language) est un langage de balisage qui sert à représenter les pages Web (WWW : World Wide Web).

Le HTML donne la structure d'une page Web.

Le HTML est généralement associé avec :

Les langages HTML et CSS font partie des langages de description (contrairement à JavaScript qui est un langage de programmation).

2. Versions

Version Année
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

Dans la suite de ce cours, nous utiliserons la version HTML5.

Les langages HTML et XHTML sont largement compatibles, XHTML possédant une syntaxe plus rigoureuse.

Notez que la version actuellement la plus utilisée est HTML5.

Question 1 ☆
Recherchez sur le Web :
– De quand date le HTML et plus globalement le Web ?
– Qui en est le principal inventeur ?

3. Les outils pour coder en langage HTML

Le code d'une page HTML est stocké dans un fichier texte avec l'extension .htm ou .html

Un éditeur de texte est donc nécessaire pour écrire le code source :

Pour interpréter le code HTML, il faut simplement un navigateur Web (c'est-à-dire un client HTTP HyperText Transfer Protocol).
Je vous propose Firefox (logiciel multiplateforme, libre et gratuit, téléchargeable ici) car il possède par défaut des outils de développement Web très pratiques (sans parler des modules complémentaires tel que Firebug).

4. Squelette d'une page HTML5

La langage HTML manipule des balises (markup) :

<!DOCTYPE html>

<html>
    <head>
        <!-- en-tête de la page -->
        <!-- encodage des caractères -->
        <meta charset="UTF-8">
        <title>Titre de la page web</title>
    </head>

    <body>
        <!-- corps de la page -->

    </body>
</html>

Commentaires

Le doctype indique au navigateur la version HTML utilisée par la page (ici HTML5).

L'en-tête (élément <head>) donne l'encodage des caractères (ici UTF-8).

La structure de la page est contenue dans l'élément <body> : pour l'instant la page est vide.

Question 2 ☆ Quel est le doctype d'une page en XHTML 1.0 Strict ?

Question 3 ☆ Quels sont la version HTML et l'encodage des caractères de la page Web actuelle, située à l'adresse Web (ou URL Uniform Resource Locator) :
http://f.sincere.free.fr/isn/html/cours_html.php ?
Remarque : avec le navigateur Firefox, pour accéder :

5. Ma première page Web

<!DOCTYPE html>

<html>
    <head>
        <!-- en-tête de la page -->
        <meta charset="ISO-8859-15">
        <title>Ma première page web en HTML5</title>
    </head>

    <body>
        <!-- corps de la page -->
        <p>Bonjour à tous !</p>
    </body>
</html>

Question 4 ☆
Dans un éditeur de texte, copier-coller le code ci-dessus et enregistrez-le dans le fichier premierepageweb.html
Ouvrir la page avec votre navigateur.
Le rendu de la page est-il correct ? (normalement non, vous devriez voir : Bonjour � tous !)
Quelle grosse erreur faut-il corriger ?

6. Quelques règles de syntaxe

Toute balise ouverte doit être refermée :

<p>contenu de la balise</p>

<p> est la balise ouvrante, </p> est la balise fermante.

Certaines balises sont vides (elles n'ont pas de contenu), la fermeture se fait alors immédiatement :

<br>
<img src="velo.jpg" alt="vélo">

La valeur des attributs doit être entourée de guillemets ou d'apostrophes :

<img src='velo.jpg' alt='vélo'>
<a href="http://fr.wikipedia.org">Un lien hypertexte vers le site de Wikipédia</a>

Les balises doivent être correctement imbriquées :

<p>Cette syntaxe est <strong>bonne</strong></p>
<p>Cette syntaxe est <strong>mauvaise</p></strong>

7. Eléments de type bloc et de type en-ligne (inline)

Eléments de type bloc

Par défaut, les éléments de type bloc sont affichés par le navigateur avec un saut de ligne au début et à la fin.

Exemples : <h1>, <p>, <ul>, <table>, <hr>, <pre>, <form> ...

Le code suivant affichera deux paragraphes, l'un en dessous de l'autre :

<p>Premier paragraphe.</p><p>Deuxième paragraphe.</p>

Eléments de type inline

Les éléments de type inline se placent normalement l'un à côté de l'autre (pas de saut de ligne).

Exemples : <strong>, <em>, <a>, <img>, <sup>, <sub> ...

Propriétés

Les éléments de type bloc peuvent contenir des éléments de type bloc ou de type inline.

Exceptions : les paragraphes <p> et les titres <h1> ... ne peuvent contenir que des éléments inline.
Donc pas de titres dans un paragraphe, pas de paragraphes dans un paragraphe !

Exemple : un élément bloc <p> (paragraphe) qui contient un élément inline <strong> :

<p>Ceci est <strong>important</strong></p>

Les éléments inline ne peuvent contenir que des éléments inline.

Exemple : un élément inline <a> (lien hypertexte) qui contient un élément inline <strong> :

<p><a href="http://fr.wikipedia.org">Un <strong>lien hypertexte</strong> vers le site de Wikipédia</a></p>

8. Un outil de vérification de la syntaxe

Pour vérifier que votre page Web est conforme aux spécifications HTML5, rendez-vous sur le site du W3C (World Wide Web Consortium) : http://validator.w3.org

Pour une page Web locale (pas encore publiée sur le Web) :

Validate by File Upload → Check

S'il y a des erreurs, elles vous seront indiquées, avec des explications (en anglais, of course).

Conseil : vérifier et corriger systématiquement vos pages Web avec cet outil.
C'est contraignant au début, mais cela vous fera prendre rapidement de bonnes habitudes.

Question 5 ☆
Votre page premierepageweb.html est-elle valide ?

9. Une deuxième page Web

Vous trouverez ici une page Web qui contient les balises les plus courantes.

Travail à réaliser
Etudier le code source de cette page.
Vous pouvez enregistrer la page sur votre bureau, puis l'ouvrir et la modifier avec un éditeur de texte.

Vous pouvez également examiner la page avec un des outils de Firefox : Menu → Développement → Inspecteur

En synthèse, compléter le tableau (à télécharger ici) :

Balise Description Exemple d'utilisation
<!-- --> Commentaire <!-- ici un commentaire -->
<p> Paragraphe <p>Ceci est un paragraphe.</p>
<h1> à <h6>
<br>
<strong>
<em>
<sub>
<sup>
<ul>
  <li>
<table>
  <tr>
    <th>
    <td>
<a>
<img>
<hr>

10. Mise en page avec les feuilles de style CSS

Les règles de style CSS permettent de personnaliser les couleurs, de définir les polices de caractères, de positionner les éléments les uns par rapport aux autres, etc.

Insertion des styles dans les balises HTML

On peut incorporer les styles CSS directement dans les balises HTML avec l'attribut style.
Cette technique est simple mais peu pratique.

Exemple :

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Une page web en HTML5</title>
    </head>

    <body style="background-color: beige; font-family: 'Times New Roman';">
            
        <h2 style="text-align: center; color: brown;">Les feuilles de style CSS</h2>
                
        <p style="margin-left: 100px;">Bonjour à tous !<br>
        Ceci est un exemple d'utilisation des feuilles de style <span style="color: blue; font-weight: bold;">CSS</span> (Cascade Style Sheet).</p>
    
    </body>
</html>

Voir le résultat

Note : <span> est un élément inline générique.
Il existe aussi un élément bloc générique : <div>

Lier des styles à partir d'une feuille séparée

C'est la technique la plus efficace, celle que l'on rencontre dans la plupart des sites Web.

Reprenons l'exemple précédent :

– Code HTML :

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Une page web en HTML5</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
            
        <h2>Les feuilles de style CSS</h2>
                
        <p>Bonjour à tous !<br>
        Ceci est un exemple d'utilisation des feuilles de style <span class="important">CSS</span> (Cascade Style Sheet).</p>
    
    </body>
</html>

Notes :
L'élément <link> fait le lien avec la feuille de style CSS (ici le fichier externe style.css)
L'attribut class de l'élément <span> permet d'utiliser des règles CSS personnalisées.

– Code CSS :

La feuille de style se trouve dans le fichier style.css
La syntaxe du langage CSS est très simple à comprendre :

body {
background-color: beige;
font-family: 'Times New Roman';
}

h2 {
text-align: center;
color: brown;
}

p {
margin-left: 100px;
}

/* classe */
.important {
color: blue;
font-weight: bold;
}

Voir le résultat

Travail à réaliser

Modifier la feuille de style style.css de manière à afficher :

On s'aidera des outils que propose Firefox :
Menu → Développement → Editeur de styles (ou MAJ + F7)

Vous validerez votre code CSS en vous rendant sur le site du W3C :
http://jigsaw.w3.org/css-validator

Exercices

Exercice 1 ★ Une galerie de grands noms de l'informatique

Tout le monde connaît Bill Gates, Steve Jobs ou Mark Zuckerberg.

Beaucoup moins célèbres mais tout aussi importants, voici une liste non exhaustive de grands informaticiens, avec un lien vers leurs photos :

1) Avec un éditeur de texte, écrire le code HTML d'une page Web qui ressemble à ceci :

Quelques grands noms de l'informatique

On fera en sorte que les images soient toutes de la même hauteur (attribut height).

On pourra utiliser un tableau pour aligner facilement les photos par lignes et colonnes.

Télécharger les photos

2) Avec une feuille de style CSS, modifier à votre goût la couleur de fond de la page, la police, la couleur du texte, etc.


Exercice 2 ★☆ Création dynamique d'une page Web avec le langage de programmation Python

Ecrire un script Python qui génère le code HTML d'une table de conversion de degrés °C en degrés °F, dans la plage -200 °C à +1000 °C avec un pas de 1° C.

On pourra s'aider de cette page.

N.B. Vous devez créer petit à petit une chaîne de caractères qui contient le code HTML de la page Web :

#-*- coding:cp1252 -*-
# script Python
# création du doctype
codehtml = "<!DOCTYPE html>"

# ajout de l'en-tête (balise head)
codehtml += """
<html>

    <head>
        <meta charset="windows-1252">
        <title>Table de conversion °C en °F</title>
    </head>"""

# ajout du corps (balise body)
# à compléter...

Les triples guillemets (ou les triples apostrophes) servent à encadrer une chaîne définie sur plusieurs lignes.

Ensuite, vous sauvegarderez cette chaîne dans un fichier conversiontemperature.html (voici comment faire : Création d'un fichier texte en langage Python).

Remarque : avec Python, vous pouvez commander le chargement d'une page Web avec le navigateur par défaut :

import webbrowser
webbrowser.open('conversiontemperature.html')

Exercice 3 ★★ Création dynamique d'une page Web avec le langage de programmation Python

A partir d'une variable qui contient la liste des noms et des adresses URL des images (ici), écrire un script Python qui génère le code HTML de la page Web d'une galerie de photos, avec le choix du nombre de colonnes et de la taille des images.
Par exemple :

>>>
Nombre de colonnes ? 5
Hauteur des images (en pixels)? 150
>>>

Guitaristes

>>>
Nombre de colonnes ? 6
Hauteur des images (en pixels)? 100
>>>

Guitaristes

Autre exemple

Exercice 4 ★★ Création dynamique d'une page Web avec le langage de programmation Python

Ecrire un script Python qui génère le code HTML de la page Web d'un tableau d'interprétation de l'indice de masse corporelle.
Par exemple :

>>>
Taille min (en cm) ? 150
Taille max (en cm) ? 190
Pas (en cm) ? 5
Masse min (en kg) ? 50
Masse max (en kg) ? 100
Pas (en kg) ? 2
>>>

Le résultat est ici.

Note technique

Un serveur Web (serveur HTTP) utilisant une interface CGI (Common Gateway Interface) peut exécuter directement un script Python pour générer une page Web.
L'URL correspondant à votre programme CGI ressemblera alors à ceci :
http://www.monsiteweb.fr/cgi-bin/monscriptpython.py

Webographie

Outils pour créer rapidement de belles pages Web

Sans être un spécialiste des langages HTML, CSS ou JavaScript, vous pouvez créer de jolies pages Web à partir d'exemples proposés par des sites spécialisés :