Certains exercices de ce site permettent d'entrer du code Html dans un formulaire (une zone de texte) et d'avoir en-dessous une prévisualisation directe de ce qu'affichera un navigateur. Par contre, ces formulaires ne permettent pas de créer directement un fichier .html.

Pour créer un fichier indépendant, il faudra utiliser un éditeur de texte.

Avant tout, commencez par créer un répertoire (un dossier) nommé Mon_Site (sans espace) dans lequel vous pourrez stocker le site web que vous aurez conçu au cours de cette séquence.

Premier fichier

Lancez un éditeur de texte (comme Notepad++).
Créez un [Nouveau] fichier.
L'[Enregistrer sous...] le nom dilophosaure.html dans le dossier Mon_Site.
Bien vérifier que le type de ce fichier est [Hyper Text Markup Language].
Allez dans le répertoire dans lequel vous avez sauvegardé ce fichier puis double-cliquez sur dilophosaure.html. Normalement le navigateur internet (Firefox) doit s'ouvrir… sur une page blanche. Si oui, fermez cette page, sinon, recommencez depuis la question 1°/.

Problèmes d'encodage

Ouvrir à nouveau dilophosaure.html avec l'éditeur de texte (clic droit puis [Ouvrir avec…]).
Copier/coller les lignes suivantes :

<!DOCTYPE html> <html lang="fr"> <head> <title>Dilophosaure</title> </head> <body> Ma première page écrite à partir d'un éditeur. </body> </html>
Enregistrez ce fichier puis double-cliquez dessus pour l'ouvrir avec le navigateur internet.
Le texte s'affiche-t-il comme dans l'image ci-dessous ?
Ce mauvais affichage provient de l'encodage des caractères accentués. Pour résoudre ce problème, ouvrir à nouveau dilophosaure.html avec l'éditeur de texte (clic droit sur le fichier puis [Ouvrir avec...]).
Ajoutez une ligne supplémentaire entre les balises <head> :

<head> <meta charset="utf-8" /> <title>Ma page à moi</title> </head>
Cette balise va permettre de prendre en compte les caractères accentués.
Vérifiez aussi l'encodage des caractères du fichier par l'éditeur de texte (Avec Notepad++ : [Encodage] → [Encoder en UTF-8 (sans BOM)]). Il faudra peut-être réécrire certaines partie du texte du paragraphe...
Ouvrez enfin le fichier à l'aide du navigateur : c'est terminé !

Insérer une image

Pour afficher une image sur une page web, il faut créer un lien hypertexte entre le fichier .html et le fichier image. Cela implique d'indiquer au navigateur quelle est l'adresse de l'image. Cette «adresse» a pour vrai nom URL : «Uniform Resource Locator».

Dans cet exercice, l'image à afficher devra se trouver dans le même dossier que le fichier .html.

Faites un clic droit sur l'image ci-contre afin de l'enregistrer dans votre répertoire de travail. Donnez-lui le nom Dilophosaure.png.
Ouvrez le fichier dilophosaure.html avec votre éditeur de texte et complétez ce fichier comme ci-dessous (ne pas hésiter à copier/coller) :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Dilophosaure</title> </head> <body> Ma première page écrite à partir d'un éditeur. Je sais aussi comment afficher une image ! </body> </html>
Il faut à présent indiquer au navigateur que le fichier dilophosaure.html utilise l'image Dilophosaure.png. Pour cela, on utilise la balise <img> qui est « auto-fermante » :

<img src="URL_de_l'image" alt="Texte_affiché_si_l'image_n'est_pas_trouvée"/>
Lorsque l'image se trouve dans le même dossier que le fichier .html, c'est très facile : l'URL est simplement le nom du fichier image (avec l'extension). Essayez d'afficher cette image dans votre page Html. Comparez avec l'affichage à obtenir avant d'aller voir la solution.

Affichage à obtenir
Une solution