Démonstration - Introduction à  HTML5

Édition d'un fichier HTML dans l'éditeur VSCode

Au laboratoire de l'université, vous devez toujours travailler sur le disque R: (en non sur le disque C:). Le disque R: est accessible à partir de toutes les machines. Donc, si vous changez de poste de travail d'une semaine à l'autre, vous aurez tous vos fichiers.

Nous allons utiliser au laboratoire l'éditeur VSCode.

Créez un nouveau dossier sur le disque R: dont le nom est demoIntroHTML pour mettre les fichiers développés dans la démonstration d'aujourd'hui.

Téléchargez le fichier modelePage.html dans le dossier demoIntroHTML. Pour télécharger un fichier à partir d'une page web, vous devez, avec le bouton de la souris sur le lien, cliquez sur le bouton droit et choisir l'option Enregistrer la cible du lien sous. Ce fichier contient le modèle de page que nous utiliserons dans notre cours.

Faites une copie de ce fichier avec le nom exemple.html.

Dans la liste de programmes, choisissez le programme VSCode.

Choisir VSCode dans la liste de programmes.
Le choix de VSCode à partir du menu de démarrage de Windows.

Édition de fichier HTML:

Cliquez sur "Ouvrir fichier" et sélectionnez le fichier exemple.HTML sur le disque R:, dans le dossier demoIntroHTML:

Ouvrir le fichier exemple.html dans VSCode.
Ouvrir le fichier exemple.html dans VSCode.

Entrez avec le titre de la page dans l'élément title. Ensuite, pratiquez à entrer avec du code HTML dans le corps de la page.

Fichier exemple.html dans VSCode.
Fichier exemple.html dans VSCode. Observez que la localisation du fichier est indiqué dans la première ligne. Dans l'image, mon répertoire demoIntroHTML est sur le disque C (parce que je suis à la maison). Pour vous, au labo, le fichier doit être sur le disque R.

Observez comme l'éditeur affiche un menu déroulant avec les noms de balises HTML au fur e à mesure que vous tapez le nom de la balise. Vous pouvez sélectionner la balise que vous voulez et l'éditeur fournira la balise de fermeture.

Entrez avec du code HTML que vous avez appris: des titres, des paragraphes, des listes, des liens, des images. Sauvegardez au fur et à mesure que vous tapez le code et visualisez le résultat dans Chrome (voir prochaine section).

VSCode indique que le fichier n'est pas sauvegardé dans le premier icône à gauche en haut. Le chiffre sur l'icône indique le nombre de fichiers modifiés et non sauvegardés.

Fichier exemple.html dans VSCode avec l'icône qui indique qu'il n'est pas sauvegardé.
Fichier exemple.html dans VSCode. Observez l'icône à gauche en haut avec le chiffre 1 qu'indique que le fichier n'a pas encore été sauvegardé.

Vous pouvez sauvegarder le fichier avec l'option Save (ou Sauvegarder dans la version française) sur le menu File (ou Fichier). En bas de l'option Save, il y a aussi l'option de sauvegarder le fichier avec un autre nom et aussi l'option de sauvegarder tous les fichiers ouverts dans VSCode.

Sauvegarde du fichier exemple.html dans VSCode .
Sauvegarde du fichier exemple.html dans VSCode.

Indentation du code

Une autre fonctionnalité pratique est faire l'indentation du fichier HTML. Cela nous aide à mieux comprendre la structure du fichier et trouver des erreurs. Pour indenter le fichier, il faut cliquez sur le bouton droit de la souris. Tout de suite, un menu d'options est affiché. Il faut cliquer sur l'option Format document with pour indenter le code, et ensuite,, sélectionner l'option HTML Languages Features

Sélection de l'option pour faire l'indentation du fichier exemple.html dans VSCode .
Sélection de l'option pour faire l'indentation du fichier exemple.html dans VSCode.
Sélection de type de format pour faire l'indentation du fichier exemple.html dans VSCode .
Sélection de type de format pour faire pour faire l'indentation du fichier exemple.html dans VSCode.

N'oubliez pas de sauvegarder le fichier après l'avoir indenté. Vous devez indenter tous vous fichiers des Tps avant la remise pour ne pas perdre des points lors de la correction!

Fichier indenté et sauvegardé dans VSCode .
Fichier indenté et sauvegardé exemple.html dans VSCode.

Utilisation du navigateur

Nous allons utiliser dans ce cours le navigateur Chrome pour faire les travaux pratiques.

Dans la liste de programmes, choisissez Chrome:

Validation d'un fichier HTML

Pour valider le fichier qui vous venez d'éditer, ouvrez le navigateur à l'adresse: http://validator.w3.org.

Comme votre page n'est pas encore publiée dans l'internet, vous devez cliquer sur l'onglet File upload, ensuite cliquer sur le bouton Parcourir, pour trouver votre fichier dans le système de fichiers de votre ordinateur. Une fois le fichier ouvert, vous devez cliquer sur le bouton Check.

Corrigez les erreurs, s'il y en a, jusqu'à ce que le fichier soit valide.

Exercices W3Schools (en anglais)

Faire les sections suivantes des exercices:

Ressources à explorer