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 ?
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 style (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.


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 :