par Toute personne sérieuse qui souhaite créer un site Web doit connaître le code HTML, le code informatique des sites Web.
Le HTML est un langage simple – bien que certains locuteurs natifs soutiennent qu’il en est de même du swahili – il est composé de caractères de votre clavier. Pas d’héritoglyphes de fantaisie.
Encore d’actualité aujourd’hui malgré les nombreux CMS
Les logiciels de navigation, tels qu’Internet Explorer ou Mozilla Firefox, lisent le code HTML et créent un affichage à l’écran en fonction des instructions transmises dans les « balises » du code HTML. Ces balises indiquent au navigateur comment afficher du texte et des zones colorées, et comment importer et afficher des images selon des méthodes spécifiées pour créer des pages Web attrayantes.
Vous pouvez afficher le code HTML de toute page Web en cliquant avec le bouton droit de la souris sur une zone vide de la page Web, puis en sélectionnant « Afficher le code source » ou « Afficher le code source de la page ». Une nouvelle fenêtre s’ouvrira et vous verrez le code HTML.
Vous pouvez apprendre le HTML en enregistrant ce code sur votre ordinateur et en le testant.
Choisissez une page simple pour commencer, de préférence une page d’accueil. Les pages d’accueil sont très souvent nommées « index.htm » ou « index.html ».
Avec le code source visible sur votre écran, vous pouvez enregistrer la page Web sur votre ordinateur en cliquant sur « Fichier / Enregistrer sous » ou « Fichier / Enregistrer la page sous ». Lorsque vous faites cela, placez-le dans un nouveau dossier. Cela vous aidera à garder votre projet d’apprentissage organisé.
Vous pouvez indiquer à votre navigateur de lire la version du fichier enregistré localement en cliquant sur « Fichier / Ouvrir » ou « Fichier / Ouvrir un fichier » avec le navigateur ouvert et en recherchant le fichier que vous venez de sauvegarder. Si vous avez un navigateur avec affichage par onglets, utilisez un nouvel onglet pour pouvoir vous reporter à la version d’origine hébergée sur Internet.
Lorsque vous ouvrez la version locale, vous remarquerez peut-être des graphiques erronés
Les images n’ont peut-être pas été enregistrées avec le code HTML. Si tel est le cas, revenez à la version Web. Enregistrez chaque graphique manquant individuellement en cliquant avec le bouton droit de la souris sur le graphique et en sélectionnant « Enregistrer l’image sous », puis enregistrez-le dans le dossier que vous avez créé précédemment. Ne changez pas le nom de fichier de l’image.
Retournez à la vue du navigateur de la page Web enregistrée localement et actualisez l’écran en cliquant sur le bouton « Actualiser » ou en appuyant sur F5. Si tout se passe bien, l’image manquante devrait être rendue. Une exception pourrait être si, dans la structure de dossier du site Web d’origine, les images sont enregistrées dans un sous-dossier.
Si vous étiez avancé, vous créeriez un sous-dossier identique et y enregistreriez les images. Mais puisque vous êtes un débutant, oubliez-le et vivez avec ce que vous avez.
Vol complet! Commencer…
Maintenant que vous avez recréé la page Web localement, vous pouvez apprendre en observant et en modifiant le code HTML. Vous verrez le changement résultant sur la page affichée.
Pour ce faire, vous aurez le même fichier HTML ouvert dans le navigateur et également dans le Bloc-notes. Le navigateur doit être dirigé vers le fichier HTML local, comme décrit ci-dessus. Ensuite, ouvrez le Bloc-notes et ouvrez le même fichier HTML. Au bas de la fenêtre du Bloc-notes, où il est écrit « Type de fichier: », assurez-vous de sélectionner « Tous les fichiers ». Si vous ne le faites pas, vous ne verrez même pas le fichier HTML répertorié dans la fenêtre de navigation.
Organisez la fenêtre du navigateur et la fenêtre du bloc-notes afin que vous puissiez voir les deux. J’aime que le navigateur soit optimisé et que le Bloc-notes remplisse la moitié inférieure de l’écran « devant ». Lorsque je modifie le fichier Notepad, je clique sur « Fichier / Enregistrer », puis sur le bouton d’actualisation du navigateur. La fenêtre du Bloc-notes se réduit d’elle-même et vous aurez juste le temps de voir les modifications que vous avez apportées modifiées dans l’affichage du navigateur.
Ne vous inquiétez pas si vous faites une erreur.
Si vos modifications vous ont déplu, rouvrez le fichier Bloc-notes en cliquant sur le bouton approprié en bas de votre écran, puis, dans Bloc-notes, cliquez sur « Modifier / Annuler », puis sur « Fichier / Enregistrer ». Actualisez le navigateur et le boo-boo devrait disparaître.
Je n’enseignerai pas le HTML dans cet article. Poingo Resources propose d’excellentes ressources pour apprendre le langage HTML en profondeur.
Je vais vous donner quelques points pour commencer:
1. Toutes les « balises » HTML commencent et finissent par des caractères appelés « chevrons », qui sont également utilisés pour « supérieur à » ou « inférieur à » dans les équations mathématiques. Je ne peux pas les placer dans cet article car ils pourraient rendre votre navigateur complètement farfelu. J’utiliserai plutôt {et} dans cet article pour représenter les crochets angulaires.
2. Tous les fichiers HTML commencent par {html} et se terminent par {/ html}
3. Les fichiers HTML ont deux parties principales, « tête » et « corps ». La partie « head » commence par le tag {head} et se termine par le tag {/ head}.
4. L’en-tête contient un titre de page et des « méta » données non affichées sur la page Web elle-même. La partie « tête » de la page est non essentielle. Vous pouvez le prouver à vous-même:
Dans le fichier Bloc-notes, supprimez les balises {head} et {/ head} et tout ce qui les sépare. Fichier / Enregistrer le bloc-notes, actualisez le navigateur et voyez ce qui se passe. L’apparence peut changer si, par exemple, l’en-tête contient un lien vers une feuille de style distincte, mais que le contenu réel doit toujours y figurer.
5. La partie « body » commence par la balise {body} et se termine par la balise {/ body}. Il contient votre contenu, il est donc essentiel.
6. Outre les balises HTML décrites ci-dessus, de nombreuses autres balises permettent de formater du texte, de créer des tableaux, de créer des liens vers des images, de créer des liens vers d’autres sites et même d’ouvrir des courriers électroniques pré-écrits dans votre propre logiciel de messagerie.
7. Beaucoup de tags, comme ceux ci-dessus, ont des tags de début et de fin. Par exemple, si je souhaite mettre en gras une partie du texte, je placerais d’abord une balise {b} avant le texte, puis suivrais le texte en gras avec {/ b}.
8. Les autres balises ne nécessitent pas une fin telle que {br}, ce qui vous donne un saut de ligne, et {p} qui commence un nouveau paragraphe.
