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 (par exemple) dans lequel vous pourrez stocker les différents fichiers conçus au cours de ce module.

Utiliser `Notepad++`

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

Problèmes d'encodage

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

<!DOCTYPE html> <html lang="fr"> <head> <title>Ma page à moi</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 essai01.html avec l'éditeur de texte. Ajouter une ligne supplémentaire entre les balises <head> :

<head> <meta charset="utf-8" /> <title>Ma page à moi</title> </head>
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 le texte du paragraphe...
Ouvrir 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 hypertext 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 Darth_Vader.jpeg.
Ouvrir le fichier essai01.html avec Notepad++ et complétez ce fichier comme ci-dessous :

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Ma page à moi</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 essai01.html utilise l'image Darth_Vader.jpeg. Pour cela, il existe la balise :

<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.

Affichage à obtenir ?
Une solution ?

Utiliser Notepad++

Problèmes d'encodage

Insérer une image

Utiliser `Notepad++`