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

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

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.

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.

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.

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


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!

Utilisation du navigateur
Nous allons utiliser dans ce cours le navigateur Chrome pour faire les travaux pratiques.
Dans la liste de programmes, choisissez Chrome:
- Pour visualiser le fichier
exemple.HTML
, il faut l'ouvrir dans Chrome avec la commandeCTRL-O
: une fenêtre s'ouvre pour vous permettre de choisir le fichier dans le système de fichiers. - Pratiquer à visualiser le code de la page web en travaillant en mode développement avec la touche F12. Une
fenêtre s'ouvrira (parallèle à la page web, horizontalement ou verticalement) et on peut visualiser le code
HTML à partir de l'onglet Elements.
Mode développement dans Chrome - Souvent, en mode développement, nous ne voulons pas que le navigateur utilise la mémoire cache. Dans le
navigateur chrome, il faut donc cliquer sur les points à droite de la fenêtre d'Outils de développement,
choisir l'option Settings et ensuite, dans Network, cocher l'option Disable cache (en
général, cette option est cochée par défaut).
Désactiver le cache dans 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:
- Éléments
- Attributs
- Titres
- Paragraphes
- Quotations
- Commentaires
- Liens
- Images
- Titre
- Listes
- Block et Inline
- Head
- Entités
Ressources à explorer
- HTML5 - une norme en constante évolution
- WHATWG
- Quels sont les fondateurs du groupe de travail WHATWG?
- Tableau d'entités HTML
- Quelle est l'entité le code de l'entité qui représente le symbole de la monnaie du Japon, le Yen?
- Tableau unicode
- Quelle est l'entité le code de l'entité qui représente le symbole d'un coeur fléché ("heart arrow")?
- Codes des langues (ISO)
- Quel est le code de la langue de l'Allemagne?