Comment créer une page web locale (hors-ligne) avec HTML

Avant d'acheter un nom de domaine et d'héberger un site chez un FAI, envisagez les pages web locales pour des tâches web simples. Elles permettent de créer applications web, galeries photos, lecteurs média qui s'exécutent dans votre navigateur. Vous pouvez même les mettre en favori pour un accès rapide. Utile aussi pour disséquer d'autres sites et améliorer vos compétences en développement web.

Étape 1 : Structure HTML de base

Ouvrez un éditeur HTML ou le Bloc-notes et collez ce code dans un nouveau document :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Ma Page Locale</title>
</head>
<body>
</body>
</html>

Cela crée un document HTML vide sans éléments ni contrôles.

Étape 2 : Ajouter un lecteur audio

Ajoutez ce code sous la balise <body> :

<p>Mon Titre 1</p>
<embed src="xyz.mp3" width="200" height="30" />

Cela insère un lecteur audio. Remplacez « Mon Titre 1 » par une description d'un fichier audio sur votre disque ou en ligne. Remplacez « xyz.mp3 » par le vrai nom de fichier ou URL. Ajustez width et height pour dimensionner le lecteur.

Étape 3 : Ajouter des images

Ajoutez ce bloc sous le précédent :

<p></p><img src="monImage1.jpg" />
<p></p><img src="monImage2.jpg" />

Remplacez les noms de fichiers par vos images locales ou URLs. Pour une galerie, ajoutez d'autres balises <img>.

Étape 4 : Ajouter des liens

Ajoutez ce bloc :

<p>Mon Site 1</p>
<a href="https://www.xyz.com">Lien</a>

Remplacez le nom et l'URL. Ajoutez d'autres liens au même format.

Étape 5 : Enregistrer en .html

Enregistrez le fichier avec l'extension .html. Le navigateur le reconnaîtra comme page web.

Étape 6 : Ouvrir dans le navigateur

Ouvrez votre navigateur, « Fichier » > « Ouvrir ». Sélectionnez le fichier HTML. Cliquez « OK ». La page locale s'affiche avec titres, texte, lecteurs, photos, liens. Cliquez « Lecture » sur l'audio pour le lancer.

Étape 7 : Mettre en favori

Ajoutez la page aux favoris. Accédez-y plus tard via le favori.

Astuce

Exemple simple illustrant la technique. Ajoutez lecteurs pour playlist, balises <img> pour photothèque, liens pour page de démarrage personnelle. Personnalisez avec autres éléments HTML, contrôles, CSS. Pour apprendre : « Affichage » > « Source » sur n'importe quelle page web, copiez le code, collez dans un fichier HTML vierge, enregistrez, étudiez.